Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue

@@ -50,7 +50,7 @@
    // 默认禁用元素
    disabledProp: {
      type: Array,
      default: () => ["id"],
      default: () => ["id", "lcstatus"],
    },
    templateOid: {
      type: String,
@@ -80,6 +80,11 @@
      type: Object,
      default: () => ({}),
    },
    // 一行放几个表单
    trendsSpan: {
      type: Number,
      default: 8,
    }
  },
  data() {
    return {
@@ -103,395 +108,6 @@
        date: "date",
        refer: "refer",
      },
      // 假数据
      testItems: [
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "id",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "传值禁用功能",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "state",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: true,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "接口禁用功能",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "oldcode",
          hidden: false,
          keyAttr: false,
          prefix: "el-icon-search",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "文本后缀测试",
          text: "前后缀功能",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "materialname",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: true,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "正则校验功能",
          tooltips: "请输入数字",
          type: "text",
          unique: false,
          verify: /^[0-9]+$/g,
        },
        {
          comboxKey: null,
          customClass: null,
          data: [
            {
              attributes: {},
              key: "model_type",
              value: "模型",
            },
            {
              attributes: {},
              key: "part_type",
              value: "零件",
            },
          ],
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "dataSelect",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "直接返回下拉",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          comboxKey: "formTemplateTest",
          customClass: null,
          data: [],
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "dictSelect",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "字典返回下拉",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "firstfl",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "数字输入框",
          tooltips: "",
          type: "number",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "yyyy-MM-dd HH:mm:ss",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "datetime",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "日期时间选择器",
          tooltips: "",
          type: "datetime",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "time",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "时间选择器",
          tooltips: "",
          type: "date",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "false",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "xiaoshouwl",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "开关",
          tooltips: "",
          type: "truefalse",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "我是默认值",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "tuhao",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "默认值功能",
          tooltips: "提示",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "xinghaoguige",
          hidden: false,
          keyAttr: true,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "属性关键值",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "jiliangdw",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          tip: "我是提示功能",
          required: false,
          selectLibFlag: "",
          showField: "jiliangdwname",
          suffix: "",
          text: "提示功能",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "textarea",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "文本域",
          tooltips: "",
          type: "textarea",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "cz",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: true,
          referConfig: {},
          required: false,
          selectLibFlag: "",
          showField: "depId",
          suffix: "",
          text: "参照",
          tooltips: "",
          type: "refer",
          unique: false,
          verify: "",
        },
      ],
      trendsSpan: 8,
      defaultValue: {},
      // 表单属性
      attributes: [],
@@ -500,6 +116,16 @@
  },
  mounted() {
    this.handleResize();
  },
  computed: {
    localTrendsSpan() {
      if (this.trendsSpan) {
        return this.trendsSpan;
      } else {
        let windowWidth = document.body.clientWidth;
        return 24 / Math.floor(windowWidth / 500);
      }
    },
  },
  methods: {
    // 渲染表单模板
@@ -523,12 +149,17 @@
        if (
          formItem.type === "combox" &&
          formItem.comboxKey &&
          (!Array.isArray(formItem.dicData) || formItem.dicData.length === 0)
          (!Array.isArray(formItem.dicData) || formItem.dicData.length === 0) &&
          (!Array.isArray(formItem.data) || formItem.data.length === 0)
        ) {
          dictKeys.push({ dictKey: formItem.comboxKey, field: formItem.field });
        }
        // 禁用部分属性（外部传值禁用和参照禁用）
        if (this.disabledProp.includes(formItem.field)) {
          formItem.readOnly = true;
        }
        if (formItem.field == "lcstatus") {
          formItem.field = formItem.field + "_text";
          formItem.readOnly = true;
        }
        // 设置表单校验的规则，文本
@@ -537,6 +168,12 @@
        if (formItem.type === "text") {
          message = "请输入";
          trigger = "blur";
        }
        let fieldMapKey=''
        if( formItem.type == "refer"){
          if(!formItem.fieldMap){
            fieldMapKey=formItem.field+'Id'
          }
        }
        let columnItem = {
          label: formItem.text,
@@ -558,24 +195,30 @@
          value: formItem.defaultValue,
          placeholder: formItem.inputTip,
          comboxKey: formItem.comboxKey,
          tip: formItem.tooltips,
          display: !formItem.hidden,
          maxlength: formItem.maxlength,
          filterable: true,
          referConfig:
            formItem.type == "refer" 
            formItem.type == "refer"
              ? {
                  title: formItem.text,
                  showField: formItem.showField || formItem.field,
                  field: formItem.field,
                  fieldMap:formItem.fieldMap || {fieldMapKey:'id'},
                  placeholder: formItem.inputTip,
                  options: formItem.referConfig,
                  options: formItem.referConfig
                }
              : {},
          span: formItem.span ? formItem.span : formItem.type === "textarea" ? 24 : this.trendsSpan,
          span: formItem.span
            ? formItem.span
            : formItem.type === "textarea"
            ? 24
            : this.localTrendsSpan,
          rules: [
            {
              required: formItem.required,
              message: `请${message}${formItem.text}`,
              message: `${message}${formItem.text}`,
              trigger,
            },
            {
@@ -604,6 +247,7 @@
      if (this.type === "add") {
        this.loading = false;
      }

      this.geDictData(dictKeys);
      this.getFormDetail();
    },
@@ -640,9 +284,9 @@
    },
    // 根据屏幕动态配置表单布局
    handleResize() {
      let windowWidth = document.body.clientWidth;
      this.trendsSpan = 24 / Math.floor(windowWidth / 500);
      this.updateIndex++;
      // let windowWidth = document.body.clientWidth;
      // this.trendsSpan = 24 / Math.floor(windowWidth / 500);
      // this.updateIndex++;
    },
    // 前后缀
    preOrSufFixShow(type, val) {
@@ -717,6 +361,42 @@
      if (data.field) {
        this.form[data.field] = data.value || "";
        this.form[data.showField] = data.text || "";
        if (data.fieldMap) {
          //说明需要映射
          for (let key in data.fieldMap) {
            let mapFields = data.fieldMap[key].split(",");
            let value = [];
            data.rawData.forEach(_item => {
              var temp;
              if (!_item.attributes) {
                _item.attributes = _item;
              }
              if (mapFields.length == 1) {
                var mapField = mapFields[0];
                if (mapField.indexOf("attribute.") > -1) {
                  temp = _item['attributes'][mapField.subString("attribute.".length)];
                } else {
                  temp = _item['attributes'][mapField] || _item[mapField];
                }
              } else {
                //有多个
                var mutiTemp = [];
                layui.each(mapFields, function (_indexField, _itemField) {
                  if (_itemField.indexOf("attribute.") > -1) {
                    mutiTemp.push(_item['attributes'][_itemField.subString("attribute.".length)]);
                  } else {
                    mutiTemp.push(_item['attributes'][_itemField] || _item[_itemField]);
                  }
                });
                temp = mutiTemp.join(' ');
              }
              if (temp != null && temp != '') {
                value.push(temp);
              }
            })
            this.form[key] = value.join(',');
          }
        }
        this.$emit("getFormData", this.form);
        this.$emit("referConfigDataUpdate", data);
      }