addProp.vue 5.96 KB
/**
* @Description: 工艺资源分类-新增属性类型
* @author wx
* @date 2021/4/07
*/
<template>
  <div class="add-prop-com">
    <dee-form
      ref="editForm"
      label-width="120px"
      :form="editForm"
      :form-data="editFormData"
      form-btn-position="center"
      :rules="formRules"
      :inline="true"
    >
      <span style="display:flex">
        <el-button
          type="primary"
          class="searchBtn"
          @click="handleSubmit"
        >确定</el-button>

        <el-button
          class="searchBtn"
          @click="handleClose"
        >取消</el-button>
      </span>
    </dee-form>
  </div>
</template>

<script>
import { getAttrtype } from '@/api/modelApi'
import { addResourceProp, editResourceProp } from '@/api/resource'
export default {
  name: 'AddProp',
  components: { },
  props: {
    basicData: {
      type: Object,
      default: () => null
    },
    resourceAttrs: {
      type: Array,
      default: () => []
    },
    units: {
      type: Array,
      default: () => []
    },
    item: {
      type: Object,
      default: () => null
    },
    enumTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      editForm: {},
      formRules: {
        resourceAttrCategoryCode: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
        name: [{ required: true, message: '请填写属性名称', trigger: 'blur' }],
        displayName: [{ required: true, message: '请填写属性名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择属性类型', trigger: 'change' }],
        dictTypeArr: [{ required: true, message: '请选择字典类型', trigger: 'change' }]
      },
      attrtypeOptions: []
    }
  },
  computed: {
    editFormData: function() {
      const editFormData = [
        { data: [
          {
            key: 'resourceAttrCategoryCode',
            title: '资源类型名称',
            component: {
              name: 'el-select',
              options: this.resourceAttrs
            }
          },
          {
            key: 'name',
            title: '属性名称',
            component: {
              name: 'el-input'
            }
          },
          {
            key: 'displayName',
            title: '显示名称',
            component: {
              name: 'el-input'
            }
          },
          {
            key: 'type',
            title: '属性类型',
            component: {
              name: 'el-select',
              disabled: this.type === 'look',
              options: this.attrtypeOptions
            }
          },
          {
            key: 'dictTypeArr',
            title: '字典类型',
            hidden: this.editForm.type !== 'DictDataVO',
            component: {
              name: 'el-cascader',
              disabled: this.type === 'look',
              options: this.enumTypeOptions,
              props: { checkStrictly: true },
              'change-on-select': true
            },
            handler: {
              'change': (val) => {
              // this.changeType(val)
              }
            }
          },
          {
            key: 'notNull',
            title: '非空',
            component: {
              name: 'el-checkbox',
              disabled: this.type === 'look'
            }
          },
          {
            key: 'maxLength',
            title: '最大长度',
            component: {
              name: this.type === 'look' ? 'readable' : 'el-input'
            },
            handler: {
              'input': (val) => {
                this.$set(this.editForm, 'maxLength', val.replace(/[^\d]/g, ''))
              }
            }
          },
          {
            key: 'scale',
            title: '精度',
            component: {
              name: this.type === 'look' ? 'readable' : 'el-input',
              type: 'number'
            }
          },
          {
            key: 'unitCode',
            title: '单位',
            component: {
              name: 'el-select',
              disabled: this.type === 'look',
              options: this.units
            }
          },
          {
            key: 'description',
            title: '说明',
            component: {
              name: this.type === 'look' ? 'readable' : 'el-input',
              type: 'textarea',
              rows: '2'
            }
          }
        ] }
      ]

      editFormData[0].data = editFormData[0].data.filter(r => !r.hidden)
      return editFormData
    }
  },
  watch: {
    item: {
      immediate: true,
      deep: true,
      handler: function(val) {
        if (val) {
          this.editForm = JSON.parse(JSON.stringify(val))
          this.$set(this.editForm, 'dictTypeArr', val.dictType ? [val.dictType] : [])
        }
      }
    }
  },
  created() {
    getAttrtype().then((res) => {
      this.attrtypeOptions = res.items.map(item => {
        item.label = item.typeName
        item.value = item.typeName
        return item
      })
    })
  },
  mounted() {
  },
  methods: {
    handleSubmit() {
      this.$refs.editForm.$refs.form.validate((valid) => {
        if (valid) {
          const params = { ...this.editForm }
          params.dxResourceClasscificationId = this.basicData.id
          params.dxResourceClasscificationIdType = this.basicData.subTypeName
          params.dictType = this.editForm.dictTypeArr && this.editForm.dictTypeArr.length ? this.editForm.dictTypeArr[this.editForm.dictTypeArr.length - 1] : ''
          delete params.dictTypeArr
          const updateFun = this.editForm.id ? editResourceProp : addResourceProp
          updateFun(params).then(res => {
            this.handleClose()
            this.$emit('getTableData')
          })
        }
      })
    },
    handleEdit() {

    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style lang="scss" >
.add-prop-com{
  .dee-table{
    height:270px;
    .dee-table-body{
      height: calc( 100% - 38px);
      overflow-y: scroll;
    }
  }
}
</style>