修改表单模板中的参照展示

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

@@ -1,793 +1,791 @@
<template>

  <div>

  <avue-form v-model="form" :option="option" v-loading="loading" ref="form"  :style="{minHeight: loading ? '300px' : ''}">

    <template :slot="item.prop + 'Label'" v-for="item in slotColumnList">

      <span>

        <span>{{ item.label }} </span>

        <el-tooltip

          v-if="item.keyAttr"

          class="item"

          effect="dark"

          content="该属性为关键属性"

          placement="top-start"

        >

          <i class="el-icon-star-on key_attr_icon"></i>

        </el-tooltip>

      </span>

    </template>

    <template :slot="groupItem.prop + ''" v-for="groupItem in option.group">

      <template :slot="item.prop + ''" v-for="item in groupItem.column">

        <span>1111</span>

        <vciWebRefer v-if="item.type=='refer'" :value="item.value" :options="item.referConfig"></vciWebRefer>

      </template>



    </template>

  </avue-form>

  </div>

</template>



<script>

import { getFormTemplate } from "@/api/formTemplate";

import { getDictionary } from "../../api/system/dict";

import vciWebRefer from "../refer/vciWebRefer.vue";

export default {

  name: "FormTemplate",

  components: { vciWebRefer},

  props: {

    // 默认禁用元素

    disabledProp: {

      type: Array,

      default: () => ["id"],

    },

    templateOid: {

      type: String,

      default: "",

    },

    codeClassifyOid: {

      type: String,

      default: "",

    },

    // 修改回显的数据

    editForm: {

      type: Object,

      default: () => ({}),

    },

    // 表单类型（add, edit, detail）

    type: {

      type: String,

      default: "add",

    },

    // 自定义表单类型

    selfColumnType: {

      type: Object,

      default: () => ({}),

    },

    // 自定义表单属性

    selfColumnConfig: {

      type: Object,

      default: () => ({}),

    },

  },

  data() {

    return {

      formIndex: 0,

      form: {},

      option: {

        emptyBtn: false,

        submitBtn: false,

        labelWidth: "130",

        column: [],

        group: [],

      },

      loading: true,

      columnType: {

        text: "input",

        combox: "select",

        truefalse: "switch",

        number: "number",

        textarea: "textarea",

        datetime: "datetime",

        date: "date",

      },

      // 假数据

      // 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]/",

      //   },

      //   {

      //     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: "this.form.sum = this.form.fun1 + this.form.fun2",

      //     extendAttrMap: null,

      //     extendAttrString: null,

      //     field: "fun1",

      //     hidden: false,

      //     keyAttr: false,

      //     prefix: "",

      //     readOnly: false,

      //     referConfig: null,

      //     required: false,

      //     selectLibFlag: "",

      //     showField: null,

      //     suffix: "",

      //     text: "参数1测试js",

      //     tooltips: "",

      //     type: "text",

      //     unique: false,

      //     verify: "",

      //   },

      //   {

      //     comboxKey: null,

      //     customClass: null,

      //     data: null,

      //     dateFormate: "",

      //     defaultValue: "",

      //     displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2",

      //     extendAttrMap: null,

      //     extendAttrString: null,

      //     field: "fun2",

      //     hidden: false,

      //     keyAttr: false,

      //     prefix: "",

      //     readOnly: false,

      //     required: false,

      //     selectLibFlag: "",

      //     showField: "hesuanfenleiname",

      //     suffix: "",

      //     text: "参数2测试js",

      //     tooltips: "",

      //     type: "text",

      //     unique: false,

      //     verify: "",

      //   },

      //   {

      //     comboxKey: null,

      //     customClass: null,

      //     data: null,

      //     dateFormate: "",

      //     defaultValue: "",

      //     displayExtension: "",

      //     extendAttrMap: null,

      //     extendAttrString: null,

      //     field: "sum",

      //     hidden: false,

      //     keyAttr: false,

      //     prefix: "",

      //     readOnly: true,

      //     required: false,

      //     selectLibFlag: "",

      //     showField: "",

      //     suffix: "",

      //     text: "参数1参数2求和",

      //     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: true,

      //     required: false,

      //     selectLibFlag: "",

      //     showField: "depId",

      //     suffix: "",

      //     text: "参照",

      //     tooltips: "",

      //     type: "text",

      //     unique: false,

      //     verify: "",

      //   },

      // ],

      trendsSpan: 8,

      defaultValue: {},

      // 表单属性

      attributes: [],

      slotColumnList: []

    };

  },

  mounted() {

    this.handleResize();

  },

  methods: {

    init(columnList) {

      if (Array.isArray(columnList)) {

        this.templateRender(columnList);

      } else {

        this.getFormTemplate();

      }

    },

    getFormTemplate() {

      getFormTemplate({

        templateOid: this.templateOid,

        codeClassifyOid: this.codeClassifyOid,

      })

        .then((res) => {

          if (res.status === 200) {

            this.templateRender(res.data.formDefineVO.items);

            this.$emit("getFormTemplateEnd", res.data);

          }

        })

        .catch((err) => {

          this.loading = false;

          console.log(err);

        });

    },

    templateRender(formItemList) {

      // 无需分组数据

      let column = [];

      let group = [];

      let dictKeys = [];

      let slotColumnList = []

      formItemList.forEach((formItem) => {

        formItem = this.resetFormConfig(formItem);

        if (formItem.type === "line") {

          group.push({

            label: formItem.text,

            prop: formItem.text,

            collapse: true,

            column: [],

          });

        }

        if (

          formItem.type === "combox" &&

          formItem.comboxKey &&

          (!Array.isArray(formItem.dicData) || formItem.dicData.length === 0)

        ) {

          dictKeys.push({ dictKey: formItem.comboxKey, field: formItem.field });

        }

        // 禁用部分属性（外部传值禁用和参照禁用）

        if (

          this.disabledProp.includes(formItem.field) ||

          this.$utilFunc.isValuableObj(formItem.referConfig)

        ) {

          formItem.readOnly = true;

        }

        // 设置表单校验的规则，文本

        let message = "请选择";

        let trigger = "change";

        if (formItem.type === "text") {

          message = "请输入";

          trigger = "blur";

        }

        let columnItem = {

          label: formItem.text,

          labelslot: true,

          prop: this.$utilFunc.isValuableObj(formItem.referConfig)

            ? formItem.showField || formItem.field

            : formItem.field,

          field: formItem.field,

          type: this.columnType[formItem.type],

          dicData: this.getDataList(formItem.type, formItem.data),

          disabled: this.type === "detail" ? true : formItem.readOnly,

          prepend: this.preOrSufFixShow("text", formItem.prefix),

          append: this.preOrSufFixShow("text", formItem.suffix),

          prefixIcon: this.preOrSufFixShow("icon", formItem.prefix),

          suffixIcon: this.preOrSufFixShow("icon", formItem.suffix),

          valueFormat: formItem.dateFormate,

          format: formItem.dateFormate,

          keyAttr: formItem.keyAttr,

          value: formItem.defaultValue,

          tip: formItem.tooltips,

          tipPlacement: "right",

          comboxKey: formItem.comboxKey,

          display: !formItem.hidden,

          maxlength: formItem.maxlength,

          filterable: true,

          change: () => {

            this.changeFun(formItem.displayExtension, formItem.prop);

          },

          span: formItem.type === "textarea" ? 24 : this.trendsSpan,

          click: () => {

            this.clickFun(formItem.referConfig)

          },

          rules: [

            {

              required: formItem.required,

              message: `请${message}${formItem.text}`,

              trigger,

            },

            {

              // 如果没有正则则匹配任何字符

              pattern: formItem.verify ? formItem.verify : /[\s\S.]*/g,

              message: formItem.tooltips,

              trigger,

            },

          ],

          props: {

            label: "value",

            value: "key",

          },

        };

        slotColumnList.push(columnItem)

        if (group.length === 0) {

          column.push(columnItem);

        } else {

          group[group.length - 1]["column"].push(columnItem);

        }

      });

      this.slotColumnList = slotColumnList

      this.$set(this.option, "column", column);

      this.$set(this.option, "group", group);

      this.formIndex++;

      this.loading = false

      this.geDictData(dictKeys);

    },

    // 使用传入的表单数据配置

    resetFormConfig(formItem) {

      for (const configType in this.selfColumnConfig) {

        if (Object.hasOwnProperty.call(this.selfColumnConfig, configType)) {

          const element = this.selfColumnConfig[configType];

          if (configType === "function") {

            for (const attr in element) {

              if (Object.hasOwnProperty.call(element, attr)) {

                const fun = element[attr];

                formItem[attr] = fun(formItem);

              }

            }

          } else if (configType === "exchange") {

            for (const newAttr in element) {

              if (Object.hasOwnProperty.call(element, newAttr)) {

                const oldAttr = element[newAttr];

                formItem[newAttr] = formItem[oldAttr];

              }

            }

          } else if (configType === "directVoluation") {

            for (const attr in element) {

              if (Object.hasOwnProperty.call(element, attr)) {

                const value = element[attr];

                formItem[attr] = value;

              }

            }

          }

        }

      }

      return formItem;

    },

    handleResize() {

      let windowWidth = document.body.clientWidth;

      this.trendsSpan = 24 / Math.floor(windowWidth / 500);

      this.formIndex++;

    },

    // 前后缀

    preOrSufFixShow(type, val) {

      if (this.$utilFunc.isEmpty(val) && typeof val !== "string") return;

      const isIcon = val.slice(0, 8) === "el-icon-";

      if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) {

        return val;

      }

    },

    changeFun(displayExtension, prop) {

      // executeCode({displayExtension, data: this.form}).then(res => {

      //   this.form[prop] = res.data.data

      // })

    },

    clickFun(referConfig) {

      console.log(123123);

      if (this.type === "detail") {

        return;

      }

    },

    // 获取swich和已拿到的下拉数据

    getDataList(type, dicData) {

      if (type === "truefalse") {

        return [

          {

            key: false,

            value: "否",

          },

          {

            key: true,

            value: "是",

          },

        ];

      } else if (type === "combox") {

        return dicData;

      }

      return [];

    },

    // 获取字典数据

    geDictData(dictKeys) {

      dictKeys.forEach((dictObj) => {

        getDictionary({ code: dictObj.dictKey }).then((res) => {

          if (res.data && res.data.code === 200) {

            this.option.column = this.option.column.map((item) => {

              if (item.field === dictObj.field) {

                let dictData = (res.data.data || []).map((itm) => {

                  itm.value = itm.dictValue;

                  itm.key = itm.dictKey;

                  return itm;

                });

                item.dicData = dictData;

              }

              return item;

            });

          }

        });

      });

    },

  },

  watch: {

    form: {

      deep: true,

      immediate: true,

      handler(newV) {

        this.$emit("getFormData", newV);

      },

    },

  },

};

</script>



<style lang="less" scoped></style>

<template>
  <div>
  <avue-form v-model="form" :option="option" v-loading="loading" ref="form"  :style="{minHeight: loading ? '300px' : ''}">
    <template :slot="item.prop + 'Label'" v-for="item in slotColumnList">
      <span>
        <span>{{ item.label }} </span>
        <el-tooltip
          v-if="item.keyAttr"
          class="item"
          effect="dark"
          content="该属性为关键属性"
          placement="top-start"
        >
          <i class="el-icon-star-on key_attr_icon"></i>
        </el-tooltip>
      </span>
    </template>
    <template :slot="item.prop + ''" v-for="item in slotColumnList">
      <vciWebRefer v-if="item.type=='refer'" :value="item.value" :options="item.referConfig"></vciWebRefer>
    </template>
  </avue-form>
  </div>
</template>

<script>
import { getFormTemplate } from "@/api/formTemplate";
import { getDictionary } from "../../api/system/dict";
import vciWebRefer from "../refer/vciWebRefer.vue";
export default {
  name: "FormTemplate",
  components: { vciWebRefer},
  props: {
    // 默认禁用元素
    disabledProp: {
      type: Array,
      default: () => ["id"],
    },
    templateOid: {
      type: String,
      default: "",
    },
    codeClassifyOid: {
      type: String,
      default: "",
    },
    // 修改回显的数据
    editForm: {
      type: Object,
      default: () => ({}),
    },
    // 表单类型（add, edit, detail）
    type: {
      type: String,
      default: "add",
    },
    // 自定义表单类型
    selfColumnType: {
      type: Object,
      default: () => ({}),
    },
    // 自定义表单属性
    selfColumnConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formIndex: 0,
      form: {},
      option: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "130",
        column: [],
        group: [],
      },
      loading: true,
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        textarea: "textarea",
        datetime: "datetime",
        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]/",
      //   },
      //   {
      //     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: "this.form.sum = this.form.fun1 + this.form.fun2",
      //     extendAttrMap: null,
      //     extendAttrString: null,
      //     field: "fun1",
      //     hidden: false,
      //     keyAttr: false,
      //     prefix: "",
      //     readOnly: false,
      //     referConfig: null,
      //     required: false,
      //     selectLibFlag: "",
      //     showField: null,
      //     suffix: "",
      //     text: "参数1测试js",
      //     tooltips: "",
      //     type: "text",
      //     unique: false,
      //     verify: "",
      //   },
      //   {
      //     comboxKey: null,
      //     customClass: null,
      //     data: null,
      //     dateFormate: "",
      //     defaultValue: "",
      //     displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2",
      //     extendAttrMap: null,
      //     extendAttrString: null,
      //     field: "fun2",
      //     hidden: false,
      //     keyAttr: false,
      //     prefix: "",
      //     readOnly: false,
      //     required: false,
      //     selectLibFlag: "",
      //     showField: "hesuanfenleiname",
      //     suffix: "",
      //     text: "参数2测试js",
      //     tooltips: "",
      //     type: "text",
      //     unique: false,
      //     verify: "",
      //   },
      //   {
      //     comboxKey: null,
      //     customClass: null,
      //     data: null,
      //     dateFormate: "",
      //     defaultValue: "",
      //     displayExtension: "",
      //     extendAttrMap: null,
      //     extendAttrString: null,
      //     field: "sum",
      //     hidden: false,
      //     keyAttr: false,
      //     prefix: "",
      //     readOnly: true,
      //     required: false,
      //     selectLibFlag: "",
      //     showField: "",
      //     suffix: "",
      //     text: "参数1参数2求和",
      //     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: true,
      //     required: false,
      //     selectLibFlag: "",
      //     showField: "depId",
      //     suffix: "",
      //     text: "参照",
      //     tooltips: "",
      //     type: "text",
      //     unique: false,
      //     verify: "",
      //   },
      // ],
      trendsSpan: 8,
      defaultValue: {},
      // 表单属性
      attributes: [],
      slotColumnList: []
    };
  },
  mounted() {
    this.handleResize();
  },
  methods: {
    init(columnList) {
      if (Array.isArray(columnList)) {
        this.templateRender(columnList);
      } else {
        this.getFormTemplate();
      }
    },
    getFormTemplate() {
      getFormTemplate({
        templateOid: this.templateOid,
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          if (res.status === 200) {
            this.templateRender(res.data.formDefineVO.items);
            this.$emit("getFormTemplateEnd", res.data);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    templateRender(formItemList) {
      // 无需分组数据
      let column = [];
      let group = [];
      let dictKeys = [];
      let slotColumnList = []
      formItemList.forEach((formItem) => {
        formItem = this.resetFormConfig(formItem);
        if (formItem.type === "line") {
          group.push({
            label: formItem.text,
            prop: formItem.text,
            collapse: true,
            column: [],
          });
        }
        if (
          formItem.type === "combox" &&
          formItem.comboxKey &&
          (!Array.isArray(formItem.dicData) || formItem.dicData.length === 0)
        ) {
          dictKeys.push({ dictKey: formItem.comboxKey, field: formItem.field });
        }
        // 禁用部分属性（外部传值禁用和参照禁用）
        if (
          this.disabledProp.includes(formItem.field) //||
          //this.$utilFunc.isValuableObj(formItem.referConfig)
        ) {
          formItem.readOnly = true;
        }
        // 设置表单校验的规则，文本
        let message = "请选择";
        let trigger = "change";
        if (formItem.type === "text") {
          message = "请输入";
          trigger = "blur";
        }
        let columnItem = {
          label: formItem.text,
          labelslot: true,
          prop: this.$utilFunc.isValuableObj(formItem.referConfig)
            ? formItem.showField || formItem.field
            : formItem.field,
          field: formItem.field,
          type: this.columnType[formItem.type],
          dicData: this.getDataList(formItem.type, formItem.data),
          disabled: this.type === "detail" ? true : formItem.readOnly,
          prepend: this.preOrSufFixShow("text", formItem.prefix),
          append: this.preOrSufFixShow("text", formItem.suffix),
          prefixIcon: this.preOrSufFixShow("icon", formItem.prefix),
          suffixIcon: this.preOrSufFixShow("icon", formItem.suffix),
          valueFormat: formItem.dateFormate,
          format: formItem.dateFormate,
          keyAttr: formItem.keyAttr,
          value: formItem.defaultValue,
          tip: formItem.tooltips,
          tipPlacement: "right",
          comboxKey: formItem.comboxKey,
          display: !formItem.hidden,
          maxlength: formItem.maxlength,
          filterable: true,
          referConfig:formItem.referConfig,
          change: () => {
            this.changeFun(formItem.displayExtension, formItem.prop);
          },
          span: formItem.type === "textarea" ? 24 : this.trendsSpan,
          click: () => {
            this.clickFun(formItem.referConfig)
          },
          rules: [
            {
              required: formItem.required,
              message: `请${message}${formItem.text}`,
              trigger,
            },
            {
              // 如果没有正则则匹配任何字符
              pattern: formItem.verify ? formItem.verify : /[\s\S.]*/g,
              message: formItem.tooltips,
              trigger,
            },
          ],
          props: {
            label: "value",
            value: "key",
          },
        };
        slotColumnList.push(columnItem)
        if (group.length === 0) {
          column.push(columnItem);
        } else {
          group[group.length - 1]["column"].push(columnItem);
        }
      });
      this.slotColumnList = slotColumnList;
      this.$set(this.option, "column", column);
      this.$set(this.option, "group", group);
      this.formIndex++;
      this.loading = false
      this.geDictData(dictKeys);
    },
    // 使用传入的表单数据配置
    resetFormConfig(formItem) {
      for (const configType in this.selfColumnConfig) {
        if (Object.hasOwnProperty.call(this.selfColumnConfig, configType)) {
          const element = this.selfColumnConfig[configType];
          if (configType === "function") {
            for (const attr in element) {
              if (Object.hasOwnProperty.call(element, attr)) {
                const fun = element[attr];
                formItem[attr] = fun(formItem);
              }
            }
          } else if (configType === "exchange") {
            for (const newAttr in element) {
              if (Object.hasOwnProperty.call(element, newAttr)) {
                const oldAttr = element[newAttr];
                formItem[newAttr] = formItem[oldAttr];
              }
            }
          } else if (configType === "directVoluation") {
            for (const attr in element) {
              if (Object.hasOwnProperty.call(element, attr)) {
                const value = element[attr];
                formItem[attr] = value;
              }
            }
          }
        }
      }
      return formItem;
    },
    handleResize() {
      let windowWidth = document.body.clientWidth;
      this.trendsSpan = 24 / Math.floor(windowWidth / 500);
      this.formIndex++;
    },
    // 前后缀
    preOrSufFixShow(type, val) {
      if (this.$utilFunc.isEmpty(val) && typeof val !== "string") return;
      const isIcon = val.slice(0, 8) === "el-icon-";
      if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) {
        return val;
      }
    },
    changeFun(displayExtension, prop) {
      // executeCode({displayExtension, data: this.form}).then(res => {
      //   this.form[prop] = res.data.data
      // })
    },
    clickFun(referConfig) {
      console.log(123123);
      if (this.type === "detail") {
        return;
      }
    },
    // 获取swich和已拿到的下拉数据
    getDataList(type, dicData) {
      if (type === "truefalse") {
        return [
          {
            key: false,
            value: "否",
          },
          {
            key: true,
            value: "是",
          },
        ];
      } else if (type === "combox") {
        return dicData;
      }
      return [];
    },
    // 获取字典数据
    geDictData(dictKeys) {
      dictKeys.forEach((dictObj) => {
        getDictionary({ code: dictObj.dictKey }).then((res) => {
          if (res.data && res.data.code === 200) {
            this.option.column = this.option.column.map((item) => {
              if (item.field === dictObj.field) {
                let dictData = (res.data.data || []).map((itm) => {
                  itm.value = itm.dictValue;
                  itm.key = itm.dictKey;
                  return itm;
                });
                item.dicData = dictData;
              }
              return item;
            });
          }
        });
      });
    },
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler(newV) {
        this.$emit("getFormData", newV);
      },
    },
  },
};
</script>

<style lang="less" scoped></style>