动态表单分组

 Source/UBCS-WEB/src/api/formTemplate.js

@@ -20,8 +20,17 @@
// ç›¸ä¼¼é¡¹æŸ¥è¯¢

export const findLike = (data) => {

  return request({

    url: 'api/mdmEngineController/resembleQuery',

    url: 'api/ubcs-code/ubcs-code/mdmEngineController/resembleQuery',

    method: 'post',

    data

  })

}



// èŽ·å–数据

export const getCodeRule = (params) => {

  return request({

    url: 'api/ubcs-code/ubcs-code/mdmEngineController/getCodeRuleByClassifyOid',

    method: 'get',

    params

  })

}

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
<template>

  <div></div>

</template>



<script>

import { getCodeRule } from "@/api/formTemplate.js";



export default {

  name: "CodeApply",

  props: {

    codeClassifyOid: {

      type: String,

      default: ''

    }

  },

  data() {

    return {

      secVOList: [],

      formItems: [],

      trendsSpan: 8

    };

  },

  created() {

    this.handleResize();

    this.getCodeRule();

  },

  mounted() {

    
  },

  methods: {

    getCodeRule() {

      getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {

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

          this.defaultValue = res.data.data;

          this.secVOList = res.data.data.secVOList || [];

          this.codeRuleOid = res.data.data.oid;

        }

      });

    },

    handleResize() {

      let windowWidth = document.body.clientWidth;

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

    },

  },

  watch: {

    secVOList: {

      deep: true,

      handler(newV) {

        this.formItems = [];

        newV.forEach((item) => {

          let itemObj = {};

          let options = [];

          //固定码段

          if (item.sectype == "codefixedsec") {

            options = item.fixedValueVOList.map((item) => {

              item.key = item.id;

              item.value = item.id;

            });

            itemObj = {

              field: item.oid,

              title: item.name,

              required: item.nullableFlag != "true",

              type: "combox",

              data: options,

              search: true,

            };

            //可变码段

          } else if (item.sectype == "codevariablesec") {

            itemObj = {

              field: item.oid,

              title: item.name,

              required: item.nullableFlag != "true",

              type: "text",

            };

          }

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

          this.formItems.push(itemObj);

        });

      },

    },

  },

};

</script>



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


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

ÎļþÒÑɾ³ý

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,762 @@
<template>

  <avue-form v-model="form" :option="option" v-loading="loading" ref="form">

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

      <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>

  </avue-form>

</template>



<script>

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

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

export default {

  name: "FormTemplate",

  props: {

    disabledProp: {

      type: Array,

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

    },

    templateOid: {

      type: String,

      default: "",

    },

    codeClassifyOid: {

      type: String,

      default: "",

    },

    editForm: {

      type: Object,

      default: () => ({}),

    },

    type: {

      type: String,

      default: "add",

    },

    dialogOpen: {

      type: Boolean,

      default: false,

    },

    selfColumnType: {

      type: Object,

      default: () => ({}),

    },

    selfColumnConfig: {

      type: Object,

      default: () => ({}),

    },

  },

  data() {

    return {

      formIndex: 0,

      form: {},

      option: {

        emptyBtn: false,

        submitBtn: false,

        labelWidth: "130",

        column: [],

        group: [],

      },

      loading: false,

      templateData: {},

      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: [],

      // è¡¨å•å…ƒç´ 

      items: [],

    };

  },

  mounted() {

    this.handleResize();

  },

  methods: {

    getFormTemplate() {

      this.loading = true;

      getFormTemplate({

        templateOid: this.templateOid,

        codeClassifyOid: this.codeClassifyOid,

      })

        .then((res) => {

          if (res.status === 200) {

            this.templateData = res.data;

            // è¡¨å•å…ƒç´ ï¼ˆè¿‡æ»¤éœ€è¦éšè—çš„属性）

            this.items = res.data.formDefineVO.items;

            this.templateRender();

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

          }

          this.loading = false;

        })

        .catch((err) => {

          this.loading = false;

          console.log(err);

        });

    },

    templateRender() {

      // æ— éœ€åˆ†ç»„数据

      let column = [];

      let group = [];

      let dictKeys = [];

      this.items.forEach((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";

        } else if (formItem.type === "file") {

          message = "请上传";

        }

        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,

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

          },

        };

        columnItem = this.resetFormConfig(columnItem);

        if (group.length === 0) {

          column.push(columnItem);

        } else {

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

        }

      });

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

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

      this.formIndex++;

      this.geDictData(dictKeys);

    },

    // ä½¿ç”¨ä¼ å…¥çš„表单数据配置

    resetFormConfig(formItem) {

      for (const key in this.selfColumnConfig) {

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

          const element = this.selfColumnConfig[key];

          formItem[key] = element;

        }

      }

      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) {

      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: {

    dialogOpen: {

      immediate: true,

      handler(newV) {

        if (newV) {

          this.getFormTemplate();

        }

      },

    },

    form: {

      deep: true,

      immediate: true,

      handler(newV) {

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

      },

    },

  },

};

</script>



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


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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,184 @@
<template>

  <div>

    <el-table :data="tableData" v-loading="loading" height="250" :border="true">

      <el-table-column

        type="index"

        width="60"

        label="序号"

        align="center"

      ></el-table-column>

      <el-table-column

        v-for="item in column[0]"

        :key="item.field"

        :prop="item.field"

        :label="item.title"

        :min-width="item.width"

        align="center"

      >

        <template #default="{ row }" v-if="item.field === 'id'">

          <el-button type="text" @click="openFormTemlpate(row)">{{

            row.id

          }}</el-button>

        </template>

        <template #default="{ row }" v-else>

          <span>{{ row[item.field] }}</span>

        </template>

      </el-table-column>

    </el-table>

    <FormTemplate

      ref="FormTemplate"

      type="detail"

      :visible.sync="formTemplateVisible"

      :templateOid="this.resembleTemplateOid"

      :codeClassifyOid="this.resembleCodeClassifyOid"

    ></FormTemplate>

  </div>

</template>



<script>

import { findLike } from "@/api/formTemplate.js";



export default {

  name: "ResembleQuery",

  props: {

    column: {

      type: Array,

      default: () => [],

    },

    codeClassifyOid: {

      type: String,

      default: "",

    },

    templateOid: {

      type: String,

      default: "",

    },

    hasResemble: {

      type: Boolean,

      default: false,

    },

    type: {

      type: String,

      default: "add",

    },

    form: {

      type: Object,

      default: () => ({}),

    },

    codeRuleOid: {

      type: String,

      default: ''

    }

  },

  data() {

    return {

      tableVisible: true,

      formTemplateVisible: false,

      activeName: "findlike",

      tableData: [],

      loading: false,

      resembleTemplateOid: "78B8C7C5-A042-0B96-FE6D-65421451782A",

      resembleCodeClassifyOid: "4524E801-6CC6-92E8-1AC3-2AB9604E8F96",

      defaultValue: {},

      secVOList: [],

      defaultKeys: [

        "oid",

        "id",

        "name",

        "description",

        "revisionoid",

        "nameoid",

        "btmname",

        "lastr",

        "firstr",

        "lastv",

        "firstv",

        "creator",

        "createtime",

        "lastModifier",

        "lastmodifytime",

        "revisionrule",

        "revisionseq",

        "revisionvalue",

        "versionrule",

        "versionseq",

        "versionvalue",

        "lcstatus",

        "ts",

        "owner",

        "checkinby",

        "checkintime",

        "checkoutby",

        "checkouttime",

        "copyfromversion",

        "secretgrade",

      ],

      formItems: [],

    };

  },

  created() {

    this.getCodeRule();

  },

  computed: {

    showCodeOrder() {

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

        if (this.secVOList.length == 0 && this.hasResemble) {

          return false;

        }

      } else {

        if (this.hasResemble) {

          return false;

        }

      }

      return true;

    },

  },

  methods: {

    // ç›¸ä¼¼é¡¹æŸ¥è¯¢

    resembleQuery(form) {

      this.loading = true;

      this.activeName = "findlike";

      const { defaultValue, formValue } = this.getDefaultValueAndFormValues(form);

      let params = {

        codeClassifyOid: this.codeClassifyOid,

        codeRuleOid: this.codeRuleOid,

        templateOid: this.templateOid,

        data: formValue,

      };

      params = Object.assign(params, defaultValue);

      this.tableVisible = true;

      findLike(params).then((res) => {

        this.loading = false;

        this.tableData = res.data.data || [];

      });

    },

    
    openFormTemlpate(row) {

      this.$nextTick(() => {

        console.log(this.$refs.FormTemplate);

      });

      this.codetemplateoid = row.codetemplateoid;

      this.formTemplateVisible = true;

    },

    getDefaultValueAndFormValues(form) {

      let defaultValue = {};

      let formValue = {};

      for (const key in form) {

        if (Object.hasOwnProperty.call(form, key)) {

          const element = form[key];

          if (this.defaultKeys.includes(key)) {

            defaultValue[key] = element;

          } else {

            formValue[key] = element;

          }

        }

      }

      return {

        defaultValue,

        formValue,

      };

    },

  },

  
};

</script>

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

@@ -5,569 +5,82 @@
    top="0vh"
    :title="title"
    class="avue-dialog avue-dialog--top"
    :width="dialogOptions.width"
    :width="width"
    append-to-body
    v-if="dialogVisible"
  >
    <avue-form
      v-model="form"
      :option="option"
      v-loading="loading"
      ref="form"
      :key="index"
    >
      <template :slot="item.prop + 'Label'" v-for="item in option.column">
        <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>
          <el-tooltip
            v-if="item.tip"
            class="item"
            effect="dark"
            :content="item.tip"
            placement="top-start"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </span>
      </template>
    </avue-form>
    <FindLike ref="findLike"></FindLike>
    <FormTempalte
      v-bind="$attrs"
      :dialogOpen="visible"
      :type="type"
      @getFormTemplateEnd="getFormTemplate"
      @getFormData="getFormData"
    ></FormTempalte>

    <div class="tab_box">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
          <CodeApply v-bind="$attrs"></CodeApply>
        </el-tab-pane>
        <el-tab-pane
          label="相似项查询"
          name="resembleQuery"
          v-if="showResembleQuery"
        >
          <ResembleQuery
            v-bind="$attrs"
            ref="resembleQueryRef"
            :hasResemble="this.hasResemble"
            :column="this.resembleTableColumn"
            :form="this.form"
          ></ResembleQuery>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="avue-dialog__footer" v-if="type !== 'detail'">
      <el-button @click="close()">取 æ¶ˆ</el-button>
      <el-button @click="close()" type="primary" :loading="submitBtnLoading">ç¡® å®š</el-button>
      <el-button @click="findLinkSubmit" type="primary">相似像查询</el-button>
      <el-button @click="close()" type="primary" :loading="submitBtnLoading"
        >ç¡® å®š</el-button
      >
      <el-button @click="resembleQuerySubmit" type="primary" v-if="hasResemble"
        >相似像查询</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { getFormTemplate, executeCode, findLike } from "@/api/formTemplate";
import { getDictionary } from "../../api/system/dict";
import FindLike from "./FindLike.vue";
import FormTempalte from "./FormTempalte";
import ResembleQuery from "./ResembleQuery";
import CodeApply from "./CodeApply";
export default {
  name: "FormTemplate",
  components: { FindLike },
  name: "FormTemplateDialog",
  components: { ResembleQuery, FormTempalte, CodeApply },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    disabledProp: {
      type: Array,
      default: () => ["id"],
    },
    templateOid: {
      type: String,
      default: "",
    },
    codeClassifyOid: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: 'add'
      default: "add",
    },
    title: {
      type: String,
      default: '表单模板'
    }
      default: "表单模板",
    },
    width: {
      type: String,
      default: "80%",
    },
  },
  data() {
    return {
      index: 0,
      form: {},
      loading: false,
      dialogOptions: {
        width: "60%",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "120",
        column: [],
      },
      templateData: {},
      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: "",
        },
      ],
      submitBtnLoading: false
      submitBtnLoading: false,
      hasResemble: false,
      resembleTableColumn: [],
      activeName: "resembleQuery",
      form: {}
    };
  },
  created() {},
@@ -580,170 +93,38 @@
        this.$emit("update:visible", val);
      },
    },
    showCodeApply() {
      if (this.type === "add") {
        if (this.hasResemble && this.resembleTableColumn.length === 0) {
          return false;
        }
      } else {
        if (this.hasResemble) {
          return false;
        }
      }
      return true;
    },
    showResembleQuery() {
      return this.hasResemble;
    },
  },
  methods: {
    getFormTemplate() {
      this.loading = true;
      getFormTemplate({
        templateOid: this.templateOid,
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          if (res.status === 200) {
            this.templateData = res.data;
            this.templateRender();
          }
          this.loading = false;
          console.log(res.data);
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    close() {
      this.dialogVisible = false;
    },
    templateRender() {
      const items = this.templateData.formDefineVO.items;
      let column = [];
      let dictKeys = [];
      items.forEach((item) => {
        // éšè—è¡¨å•å…ƒç´ 
        if (item.hide) {
          return;
        }
        if (
          item.type === "combox" &&
          item.comboxKey &&
          (!Array.isArray(item.dicData) || item.dicData.length === 0)
        ) {
          dictKeys.push({ dictKey: item.comboxKey, field: item.field });
        }
        // ç¦ç”¨éƒ¨åˆ†å±žæ€§ï¼ˆå¤–部传值禁用和参照禁用）
        if (this.disabledProp.includes(item.field) || this.$utilFunc.isValuableObj(item.referConfig)) {
          item.readOnly = true;
        }
        // è®¾ç½®è¡¨å•æ ¡éªŒçš„规则，文本
        let message = "请选择";
        let trigger = "change";
        if (item.type === "text") {
          message = "请输入";
          trigger = "blur";
        } else if (item.type === "file") {
          message = "请上传";
        }
        let columnItem = {
          label: item.text,
          labelslot: true,
          prop: this.$utilFunc.isValuableObj(item.referConfig) ? (item.showField || item.field) : item.field,
          type: this.columnType[item.type],
          dicData: this.getDataList(item.type, item.data),
          disabled: this.type === 'detail' ? true : item.readOnly,
          prepend: this.preOrSufFixShow("text", item.prefix),
          append: this.preOrSufFixShow("text", item.suffix),
          prefixIcon: this.preOrSufFixShow("icon", item.prefix),
          suffixIcon: this.preOrSufFixShow("icon", item.suffix),
          valueFormat: item.dateFormate,
          format: item.dateFormate,
          keyAttr: item.keyAttr,
          value: item.defaultValue,
          tip: item.tip,
          comboxKey: item.comboxKey,
          change: () => {
            this.changeFun(item.displayExtension, item.prop);
          },
          span: item.type === "file" || item.type === "textarea" ? 24 : null,
          click: this.clickFun(item.referConfig),
          rules: [
            {
              required: item.required,
              message: `请${message}${item.text}`,
              trigger,
            },
            {
              // å¦‚果没有正则则匹配任何字符
              pattern: item.verify ? item.verify : /[\s\S.]*/g,
              message: item.tooltips,
              trigger,
            },
          ],
          props: {
            label: "value",
            value: "key",
          },
        };
        column.push(columnItem);
        this.$set(this.option, "column", column);
      });
      this.index++;
      this.geDictData(dictKeys);
    getFormTemplate(data) {
      this.hasResemble =
        data.resembleTableVO &&
        data.resembleTableVO.cols &&
        data.resembleTableVO.cols.length > 0;
      this.resembleTableColumn = data.resembleTableVO.cols || [];
    },
    changeFun(displayExtension, prop) {
      // executeCode({displayExtension, data: this.form}).then(res => {
      //   this.form[prop] = res.data.data
      // })
    getFormData(form) {
      this.form = form
    },
    clickFun(referConfig) {
      if (this.type === 'detail') {
        return
      }
    },
    // å‰åŽç¼€
    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;
      }
    },
    // èŽ·å–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;
            });
          }
        });
      });
    },
    findLinkSubmit() {
      this.templateData.templateVO.data = this.form
      console.log(this.$refs.findLike, 'this.$refs.findLike');
      this.$refs.findLike.findLinkClick(this.templateData.templateVO)
    }
  },
  watch: {
    visible(newV) {
      if (newV) {
        this.getFormTemplate();
        // this.templateRender()
      }
    resembleQuerySubmit() {
      this.$refs.resembleQueryRef.resembleQuery(this.form);
    },
  },
};

 Source/UBCS-WEB/src/main.js

@@ -42,6 +42,7 @@
import businessAdd from "@/views/modeling/BusinessAdd"
import TableCrud from "@/components/Crud/Crud"
import originalAdd from "@/views/modeling/originalAdd"
import FormTemplateDialog from "@/components/FormTemplate/index"

// å°†å·¥å…·å‡½æ•°æ·»åŠ åˆ°å…¨å±€
import utilFunc from './util/func'
@@ -85,7 +86,7 @@
Vue.component('attrCrud',attrCrud)
Vue.component('TableCrud',TableCrud)
Vue.component('originalAdd',originalAdd)

Vue.component('FormTemplateDialog',FormTemplateDialog)

// åŠ è½½ç›¸å…³url地址
Object.keys(urls).forEach(key => {

 Source/UBCS-WEB/src/views/MasterData/FormTempalteTest.vue

@@ -1,18 +1,33 @@
<template>

  <div>

    <el-button @click="visible = true">测试</el-button>

    <FormTemplate :visible.sync="visible" templateOid="78B8C7C5-A042-0B96-FE6D-65421451782A" codeClassifyOid="4524E801-6CC6-92E8-1AC3-2AB9604E8F96"></FormTemplate>

    <FormTemplateDialog

      :visible.sync="visible"

      :FormTemplateProp="FormTemplateProp"

      :type="this.type"

      :editForm="editForm"

      :templateOid="this.templateOid"

      :codeClassifyOid="this.codeClassifyOid"

      :disabledProp="disabledProp"

    ></FormTemplateDialog>

  </div>

</template>codeClassifyOid

</template>

codeClassifyOid



<script>

import FormTemplate from "../../components/FormTemplate/index";

export default {

  name: "FormTempalteTest",

  components: { FormTemplate },

  data() {

    return {

      visible: false,

      // é»˜è®¤ç¦ç”¨çš„表元素

      disabledProp: ["id"],

      // ä¿®æ”¹å›žæ˜¾çš„数据

      editForm: {},

      // è¡¨å•ç±»åž‹

      type: "add",

      templateOid: "D32FC682-4376-A148-DF8D-6261206E6412",

      codeClassifyOid: "91E05D2B-FEB2-6D41-5CE5-5B489615A29C",

    };

  },

};