kgraph-ui/src/views/knowledge/modal/addAttrClassModal.vue

<template>
  <a-modal
    :title="title"
    :visible="show"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleClose"
  >
    <a-form :form="form">
      <a-form-item label="名称：" v-bind="formItemLayout">
        <a-input v-decorator="FormRulesDefine.attrClsName" />
      </a-form-item>
      <a-form-item label="单位：" v-bind="formItemLayout">
        <a-input v-decorator="FormRulesDefine.attrUnit" />
      </a-form-item>
      <a-form-item label="属性类型" v-bind="formItemLayout">
        <a-select
          v-decorator="FormRulesDefine.attrType"
        >
          <a-select-option
            :value="attrType.id"
            v-for="attrType in attrTypeList"
            :key="attrType.id"
            >{{ attrType.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="数据类型" v-bind="formItemLayout">
        <a-select
          v-decorator="FormRulesDefine.valueType"
          @change="handleChangeType"
        >
          <a-select-option
            :value="key"
            v-for="(value, key) in attrClsType"
            :key="key"
            >{{ value }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="枚举类选择" v-bind="formItemLayout" v-show="isShow1">
        <a-button type="primary" @click="handleOpenEnumManageModal"
          >选择</a-button
        >
      </a-form-item>
      <a-form-item
        label="枚举类名称"
        v-bind="formItemLayout"
        v-show="isShow1 && domainKey"
      >
        <span>{{ domainKey }}</span>
      </a-form-item>
      <a-form-item label="最大值：" v-bind="formItemLayout" v-show="isShow2">
        <a-input-number v-decorator="FormRulesDefine.maxValue" />
      </a-form-item>
      <a-form-item label="最小值：" v-bind="formItemLayout" v-show="isShow2">
        <a-input-number v-decorator="FormRulesDefine.minValue" />
      </a-form-item>
      <a-form-item label="描述：" v-bind="formItemLayout">
        <a-textarea v-decorator="FormRulesDefine.attrClsMemo" />
      </a-form-item>
      <a-form-item label="是否必填：" v-bind="formItemLayout">
        <a-checkbox
          @change="onChangeNotNull"
          v-decorator="FormRulesDefine.notNull"
          :checked="notNull"
        ></a-checkbox>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { updateAttrClass, addAttrClass } from "@/api/graph/attrClass"

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const attrTypeList = [
  {
    name: "基础属性",
    id: "ELEM",
  },
  {
    name: "能力属性",
    id: "CIDX",
  },
  {
    name: "多媒体属性",
    id: "MIME",
  },
  {
    name: "待审属性",
    id:"NONE"
  }
];
export default {
  name: "add-attr-class-modal",
  // attrClassParam 要编辑的属性类数据  isPublic:自定义页面
  props: ["title", "attrClassParam", "entClsID", "type", "isPublic"],
  data() {
    let domain;
    if (this.attrClassParam) {
      domain = this.attrClassParam.domain ? JSON.parse(this.attrClassParam.domain) : null;
    }
    return {
      attrTypeList,
      notNull: false,
      isShow1: true, // 控制枚举类显隐
      isShow2: false, // 控制最大值最小值
      // 显隐
      attrClsType: this.$const.attrClsType,
      formItemLayout,
      FormRulesDefine: {
        attrClsName: [
          // 用作标识，我们统一写成和表单提交字段一样
          "attrClsName", // 表单提交的字段
          {
            rules: [
              { required: true, message: "属性名称需要填写", whitespace: true },
            ],
            initialValue: this.attrClassParam
              ? this.attrClassParam.attrClsName
              : "",
          },
        ],
        attrUnit: [
          // 用作标识，我们统一写成和表单提交字段一样
          "attrUnit", // 表单提交的字段
          {
            rules: [
              {
                required: false,
                message: "属性单位需要填写",
                whitespace: false,
              },
            ],
            initialValue: this.attrClassParam
              ? this.attrClassParam.attrUnit
              : "",
          },
        ],
        attrClsMemo: [
          // 用作标识，我们统一写成和表单提交字段一样
          "attrClsMemo", // 表单提交的字段
          {
            rules: [
              {
                required: false,
                message: "属性描述需要填写",
                whitespace: false,
              },
            ],
            initialValue: this.attrClassParam
              ? this.attrClassParam.attrClsMemo
              : "",
          },
        ],
        maxValue: [
          // 用作标识，我们统一写成和表单提交字段一样
          "maxValue", // 表单提交的字段
          {
            rules: [],
            initialValue: (domain && domain.maxValue) || "",
          },
        ],
        minValue: [
          // 用作标识，我们统一写成和表单提交字段一样
          "minValue", // 表单提交的字段
          {
            rules: [],
            initialValue: (domain && domain.minValue) || "",
          },
        ],
        notNull: [
          // 用作标识，我们统一写成和表单提交字段一样
          "notNull", // 表单提交的字段
          {
            rules: [],
            initialValue: this.attrClassParam
              ? this.attrClassParam.notNull
              : "",
          },
        ],
        valueType: [
          "valueType", // 表单提交的字段
          {
            initialValue: this.attrClassParam
              ? this.attrClassParam.attrValueType
              : "TEXT",
          },
        ],
        attrType: [
          "attrType", // 表单提交的字段
          {
            initialValue: this.attrClassParam
              ? this.attrClassParam.attrType
              : this.type,
          },
        ],
      },
      form: this.$form.createForm(this),
      show: true,
      domainKey: "", // 枚举类名称
    };
  },
  created() {},
  mounted() {
    const attrClassParam = this.attrClassParam;
    if (attrClassParam) {
      // 编辑进来的赋值
      try {
        var domain = attrClassParam.domain ? JSON.parse(attrClassParam.domain) : null;
        this.domainKey = domain.domainKey || "";
      } catch (e) {
        console.warn(e);
      }
      this.notNull = attrClassParam.notNull;

      if (
        attrClassParam.attrValueType === "LONG" ||
        attrClassParam.attrValueType === "DOUBLE"
      ) {
        this.isShow1 = false;
        this.isShow2 = true;
      } else if (
        attrClassParam.attrValueType === "DATE" ||
        attrClassParam.attrValueType === "BOOLEAN"
      ) {
        this.isShow1 = false;
        this.isShow2 = false;
      }
    }
  },
  methods: {
    // 打开枚举类管理
    handleOpenEnumManageModal() {
      this.$open("openEnumManageModal", {}, function(data) {
        this.domainKey = data.domainKey;
      });
    },
    onChangeNotNull(e) {
      this.notNull = e.target.checked;
    },
    // 改变数据类型
    handleChangeType(type) {
      if (type === "LONG" || type === "DOUBLE") {
        this.isShow1 = false;
        this.isShow2 = true;
      } else if (type === "TEXT") {
        this.isShow1 = true;
        this.isShow2 = false;
        this.form.setFieldsValue({
          maxValue: "",
          minValue: "",
        });
      } else {
        this.isShow1 = false;
        this.isShow2 = false;
      }
    },
    async getFormData() {
      var result = await this.$formValidateFields("form"); //form的字符串
      // 在这里对form返回数据进行处理
      return result;
    },
    async handleOk(e) {
      var result = await this.getFormData(); // this是当前组件的this,  'form'此表单的名称，一定要是字符串
      var param = {};
      if (result.maxValue * 1 < result.minValue * 1) {
        this.$message.error("最大值不应该小于最小值");
        return false;
      }
      param["isPublic"] = this.isPublic ? "1" : "0"; // 自定义页面必须传
      param["attrClsName"] = result.attrClsName || "";
      param["attrUnit"] = result.attrUnit || "";
      param["valueType"] = result.valueType || "";
      param["attrClsMemo"] = result.attrClsMemo || "";
      param["notNull"] = this.notNull || false;
      param["maxValue"] = result.maxValue || "";
      param["minValue"] = result.minValue || "";
      param["domainKey"] = this.domainKey || "";
      param["attrType"] = result.attrType;
      param["entClsID"] = this.entClsID || "";

      const uniqueMatchList = this.$checkSpecialChar(result.attrClsName)
      if (uniqueMatchList.length > 0) {
        this.$message.error(`属性类名称不能包含特殊字符【${uniqueMatchList.join('、')}】！`)
        return false
      }
      if (this.attrClassParam) {
        // 编辑的属性类id
        const attrClsID = this.attrClassParam.attrClsID;
        param["attrClsID"] = attrClsID;
        updateAttrClass(param).then((res) => {
          this.$close({ data: res });
        });
      } else {
        // 添加
        // 添加接口
        addAttrClass(param).then((res) => {
          this.$close(res);
        });
      }
    },
    handleClose(e) {
      this.$close(false);
    },
  },
};
</script>

<style scoped></style>