flowable_management/base-vue/src/views/modules/sys/dictDetail-add-or-update.vue

<template>
  <el-dialog
    :title="dataForm.dict_id === null ? '新增字典详情' : '修改字典详情'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="500px">
    <el-form :model="dataForm" :rules="dataRule" size="mini" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="字典标签" prop="label">
        <el-input v-model="dataForm.label" placeholder="字典标签"></el-input>
      </el-form-item>
      <el-form-item label="字典值" prop="value">
        <el-input v-model="dataForm.value" placeholder="字典值"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="dictSort">
        <el-input-number
          v-model.number="dataForm.dictSort"
          :min="0"
          :max="999"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="参数1" prop="para1">
        <el-input v-model="dataForm.para1" placeholder="参数1"></el-input>
      </el-form-item>
      <el-form-item label="参数2" prop="para2">
        <el-input v-model="dataForm.para2" placeholder="参数2"></el-input>
      </el-form-item>
      <el-form-item label="参数3" prop="para3">
        <el-input v-model="dataForm.para3" placeholder="参数3"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="visible = false">取消</el-button>
      <el-button size="mini" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
  
<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          code: null,
          label: null,
          value: null,
          dictSort: null,
          para1: null,
          para2: null,
          para3: null
        },
        dataRule: {
          label: [
            { required: true, message: '字典标签不能为空', trigger: 'blur' }
          ],
          value: [
            { required: true, message: '字典值不能为空', trigger: 'blur' }
          ],
          dictSort: [
            { required: true, message: '排序不能为空', trigger: 'blur', type: 'number' }
          ]
        }
      }
    },
    methods: {
      init (row, code) {
        this.visible = true
        this.dataForm.code = code
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (row) {
            this.dataForm = {...row}
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/api/dict/dictDetail'),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: data.msg,
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>