laws-sinotruk-client/src/views/system/modules/DictItemModal.vue

<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('close')"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="itemText"
          :label="$t('name')">
          <a-input :placeholder="$t('pleaseEnter') + $t('name')"
                   :maxLength="50"
                   @change="event => event.target.value = event.target.value.trim()"
                   v-model="model.itemText" />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="enName"
          :label="$t('englishName')">
          <a-input :placeholder="$t('pleaseEnter') + $t('englishName')"
                   :maxLength="50"
                   @change="event => event.target.value = event.target.value.trim()"
                   v-model="model.enName" />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="itemValue"
          :label="$t('dict.dataValue')">
          <a-input :placeholder="$t('pleaseEnter') + $t('dict.dataValue')" v-model="model.itemValue" />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :label="$t('description')">
          <a-input :maxLength="50" v-model="model.description" @change="event => event.target.value = event.target.value.trim()" />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :label="$t('dict.rankingValue')">
          <a-input-number :min="1" v-model="model.sortOrder" />
          {{ $t('dict.valueSmallerIsHigher') }}
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :label="$t('whether') + $t('enable')"
          :hasFeedback="true">
          <a-switch :checkedChildren="$t('enable')" :unCheckedChildren="$t('disable')" @change="onChose" v-model="visibleCheck" />
        </a-form-model-item>

      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
// import pick from 'lodash.pick'
import { addDictItem, editDictItem } from '@/api/api'
import { getAction } from '@api/manage'

export default {
  name: 'DictItemModal',
  data () {
    return {
      title: this.$t('operation'),
      visible: false,
      visibleCheck: true,
      model: {},
      dictId: '',
      status: 1,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        itemText: [{ required: true, message: this.$t('pleaseEnter') + this.$t('name') + '!' }],
        itemValue: [{
          required: true,
          message: this.$t('pleaseEnter') + this.$t('dict.dataValue') + '!'
        }, { validator: this.validateItemValue }]
      }
    }
  },
  created () {
  },
  methods: {
    add (dictId) {
      this.dictId = dictId
      // 初始化默认值
      this.edit({ sortOrder: 1, status: 1 })
    },
    edit (record) {
      if (record.id) {
        this.dictId = record.dictId
      }
      this.status = record.status
      this.visibleCheck = (record.status === 1)
      this.model = Object.assign({}, record)
      this.model.dictId = this.dictId
      this.model.status = this.status
      this.visible = true
    },
    onChose (checked) {
      if (checked) {
        this.status = 1
        this.visibleCheck = true
      } else {
        this.status = 0
        this.visibleCheck = false
      }
    },
    // 确定
    handleOk () {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          this.model.itemText = (this.model.itemText || '').trim()
          this.model.itemValue = (this.model.itemValue || '').trim()
          this.model.description = (this.model.description || '').trim()
          this.model.status = this.status
          let obj
          // 数据字典
          if (!this.model.id) {
            obj = addDictItem
          } else {
            obj = editDictItem
          }
          const params = Object.assign({}, this.model, {
            dictId: this.dictId, // 数据字典的id
            isTagDict: 0, // 是否为标签管理的表示
            delFlag: 0 // 是否删除的标识，新的接口必须增加这一个字段，可以联系后端沟通,否则不能查看
          })
          obj(params).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        } else {
          return false
        }
      })
    },
    // 关闭
    handleCancel () {
      this.close()
    },
    close () {
      this.$emit('close')
      this.visible = false
      this.$refs.form.resetFields()
    },
    validateItemValue (rule, value, callback) {
      const param = {
        itemValue: value,
        dictId: this.dictId
      }
      if (this.model.id) {
        param.id = this.model.id
      }
      if (value) {
        const reg = new RegExp('[`_~!@#$^&*()=|{}\'.<>《》/?！￥（）—【】‘；：”“。，、？]')
        if (reg.test(value)) {
          callback(new Error(this.$t('dict.valueCannotContainSpecChar')))
        } else {
          // update--begin--autor:lvdandan-----date:20201203------for：JT-27【数据字典】字典 - 数据值可重复
          getAction('/sys/dictItem/dictItemCheck', param).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback(res.message)
            }
          })
          // update--end--autor:lvdandan-----date:20201203------for：JT-27【数据字典】字典 - 数据值可重复
        }
      } else {
        callback()
      }
    }
  }
}
</script>