DataRoom/data-room-ui/packages/DataSetLabelManagement/src/LabelConfigEdit.vue

<template>
  <el-dialog
    class="bs-dialog-wrap bs-el-dialog"
    :append-to-body="true"
    :before-close="cancel"
    :title="dataForm.id!==''?'编辑标签':'新增标签'"
    :visible.sync="formVisible"
  >
    <el-form
      ref="ruleForm"
      :model="dataForm"
      :rules="rules"
      label-position="right"
      label-width="90px"
      class="form-container bs-el-form"
    >
      <el-form-item
        label="标签名称"
        prop="labelName"
      >
        <el-input
          v-model="dataForm.labelName"
          class="bs-el-input"
          clearable
          placeholder="请输入标签名称"
          maxlength="200"
        />
      </el-form-item>

      <el-form-item
        label="标签类型"
        prop="labelType"
      >
        <el-select
          ref="searchSelect"
          v-model="dataForm.labelType"
          class="bs-el-select"
          popper-class="bs-el-select"
          allow-create
          clearable
          filterable
          placeholder="请选择或输入标签类型"
          @blur="selectBlur"
          @input.native="filterData"
        >
          <el-option
            v-for="(item,K) in labelTypeList"
            :key="K"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="标签说明"
        prop="labelDesc"
      >
        <el-input
          v-model="dataForm.labelDesc"
          clearable
          placeholder="请输入标签说明"
          class="bs-el-input"
          type="text"
        />
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        class="bs-el-button-default"
        @click="cancel"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >
        确定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addOrUpdateLabel, checkRepeatLabel } from 'data-room-ui/js/utils/LabelConfigService'

export default {
  name: 'LabelEdit',
  data () {
    return {
      loading: false,
      datasetList: [],
      typeId: '',
      dataForm: {
        id: '',
        labelName: '',
        labelType: '',
        labelDesc: '',
        relList: []
      },
      formVisible: true,
      rules: {
        labelName: [
          { required: true, message: '标签名称不能为空', trigger: 'blur' },
          { validator: this.validateLabelName, trigger: 'blur' }
        ],
        labelType: [
          { required: true, message: '标签类型不能为空', trigger: 'change' }
        ]
      },
      // 分类树数据
      categoryData: [],
      relVisible: false,
      // 标签分类列表
      labelTypeList: [],
      // 选中的数据集id列表
      datasetIdList: []
    }
  },
  watch: {
    'dataForm.labelType': function (val) {
      if (val.length > 20) {
        this.dataForm.labelType = val.substring(0, 20)
      }
    }
  },
  methods: {
    /**
     * 初始化
     * @param row 标签信息
     */
    init (row) {
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
      this.dataForm.id = row ? row.id : ''
      this.formVisible = true
      if (row) {
        this.dataForm.id = row.id
        this.dataForm.labelName = row.labelName
        this.dataForm.labelType = row.labelType
        this.dataForm.labelDesc = row.labelDesc
      } else {
        this.dataForm.id = ''
        this.dataForm.labelName = ''
        this.dataForm.labelType = ''
        this.dataForm.labelDesc = ''
      }
    },
    /**
     * 标签名称校验
     * @param rule
     * @param value
     * @param callback
     */
    validateLabelName (rule, value, callback) {
      checkRepeatLabel({ id: this.dataForm.id, labelName: this.dataForm.labelName }).then(repeat => {
        if (repeat) {
          callback(new Error('标签名称已存在'))
        } else {
          callback()
        }
      })
    },
    /**
     * 表单关闭
     */
    handleClose () {
      this.$parent.editFormVisible = false
    },
    /**
     * 取消按钮
     */
    cancel () {
      this.formVisible = false
      this.$nextTick(() => {
        this.handleClose()
      })
    },
    /**
     * 提交按钮
     * @param formName
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveForm(true)
        } else {
          return false
        }
      })
    },
    /**
     * 保存标签信息
     * @param flag
     */
    saveForm (flag) {
      addOrUpdateLabel(this.dataForm).then((r) => {
        this.$message.success('保存成功')
        this.cancel()
        this.$emit('afterEdit')
      })
    },
    selectBlur (e) {
      this.dataForm.labelType = e.target.value
    },
    // 对输入字符串控制
    filterData () {
      // 此属性得到输入的文字
      const str = this.$refs.searchSelect.$data.selectedLabel
      // 控制的js
      if (str.length > 20) {
        this.$refs.searchSelect.$data.selectedLabel = str.substr(0, 20)
      }
    }
  }
}
</script>

<style scoped>
.form-container{
  padding: 0 8px;
}
</style>