ore_transport/src/views/goaf/unloading_evaluation_threshold/Model.vue

<template>
  <el-drawer
    :title="title"
    :modal-append-to-body="false"
    :modal="false"
    :wrapper-closable="false"
    size="36%"
    :visible.sync="dialogVisible"
  >
    <el-form
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      label-position="right"
      label-width="160px"
    >
      <el-form-item label="时差阈值" required>
        <el-input-number v-model="formData.transTimedifferenceThreshold" placeholder="时差阈值（分钟）" :controls="false" />
      </el-form-item>
      <el-form-item label="载物差阈值" required>
        <el-input-number v-model="formData.transWeightdifferenceThreshold" placeholder="载物差阈值（吨）" :controls="false" />
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
    </div>
  </el-drawer>
</template>
<script>
import { createThreshold, updateThreshold } from '@/api/threshold'
export default {
  name: 'CameraModel',
  data() {
    return {
      title: '载物评估阈值',
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      dialogVisible: false,
      CameraCats: [],
      goaf: [],
      formData: {
        transTimedifferenceThreshold: 0,
        transWeightdifferenceThreshold: 0
      },
      rules: {}
    }
  },
  methods: {
    // Show Add Dialog
    showAddModel() {
      this.resetFormData()
      this.actionType = 'ADD'
      this.title = '新增载物评估阈值配置'
      this.dialogVisible = true
    },
    // Show Edit Dialog
    showEditModel(data) {
      this.resetFormData()
      this.actionType = 'UPDATE'
      this.title = '修改载物评估阈值配置'
      this.dialogVisible = true
      this.formData = data
    },

    // Reset Form Data
    resetFormData() {
      this.formData = {
        transTimedifferenceThreshold: 0,
        transWeightdifferenceThreshold: 0
      }
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          switch (this.actionType) {
            case 'ADD':
              createThreshold(this.formData)
                .then((resp) => {
                  const { code, msg } = resp
                  if (code === 0) {
                    this.dialogVisible = false
                    this.$message.success(msg)
                    this.formSuccess()
                  } else {
                    this.$message.error(msg)
                  }
                })
              break

            case 'UPDATE':
              updateThreshold(this.formData)
                .then((resp) => {
                  const { code, msg } = resp
                  if (code === 0) {
                    this.dialogVisible = false
                    this.$message.success(msg)
                    this.formSuccess()
                  } else {
                    this.$message.error(msg)
                  }
                })
              break
          }
        } else {
          this.$message.error('error submit!!')
          return false
        }
      })
    },
    formSuccess() {
      this.$emit('formSuccess')
    },
    resetFormField(formName) {
      this.$refs[formName].resetFields()
    },
    deeepClone(params) {
      return JSON.parse(JSON.stringify(params))
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group {
  padding-left: 160px;
  margin-top: 50px;
}
.safe-area {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  .safe-area-item {
    margin: 0 5px 10px 0;
    width: 20%;
    min-width: 120px;
  }
  .el-input__inner {
    text-align: left !important;
  }
}
::v-deep.el-select-tree {
  .label {
    color: #606266 !important;
  }
  .el-tree-node.is-current > .el-tree-node__content,
  .el-tree-node__content:hover {
    background-color: #fff !important;
    color: #606266;
  }
}
</style>