动态表单

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

@@ -8,31 +8,54 @@
    :width="dialogOptions.width"

    append-to-body

  >

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

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

        <div>

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

        </div>

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

      </template>

    </avue-form>

    <div class="avue-dialog__footer">

      <el-button @click="close()">取 消</el-button>

      <el-button @click="close()" type="primary">确 定</el-button>

    </div>

    <el-dialog title="测试参照" :visible.sync="visible2" append-to-body>

      <div style="height: 100px;">

        <p>部门数据 {depName: '我是部门名称', depId: '我是部门id'}</p>

      </div>

      <div class="avue-dialog__footer">

        <el-button @click="visible2 = false">取 消</el-button>

        <el-button @click="czSubmit" type="primary">确 定</el-button>

      </div>

    </el-dialog>

  </el-dialog>

</template>



<script>

import { getFormTemplate } from "../../api/common";

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

export default {

  name: "FormTemplate",

  props: {

@@ -40,9 +63,15 @@
      type: Boolean,

      default: false,

    },

    disabledProp: {

      type: Array,

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

    },

  },

  data() {

    return {

      index: 0,

      form: {},

      loading: false,

      dialogOptions: {

        width: "60%",

@@ -59,8 +88,12 @@
        combox: "select",

        truefalse: "switch",

        number: "number",

        textarea: "textarea",

        datetime: "datetime",

        date: "date",

        file: "upload",

      },

      // 假数据

      testItems: [

        {

          comboxKey: null,

@@ -72,31 +105,6 @@
          extendAttrMap: null,

          extendAttrString: null,

          field: "id",

          hidden: true,

          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: null,

          required: false,

          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "代号",

          tooltips: "",

          type: "text",

          unique: false,

          verify: "",

        },

        {

          comboxKey: "wupin${lcstatus}",

          customClass: null,

          data: null,

          dateFormate: "",

          defaultValue: "",

          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "lcstatus",

          hidden: false,

          keyAttr: false,

          prefix: "",

@@ -106,7 +114,31 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "状态",

          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,

@@ -131,7 +163,7 @@
          selectLibFlag: "",

          showField: null,

          suffix: "文本后缀测试",

          text: "前后缀",

          text: "前后缀功能",

          tooltips: "",

          type: "text",

          unique: false,

@@ -156,14 +188,14 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "正则校验",

          text: "正则校验功能",

          tooltips: "请输入数字",

          type: "text",

          unique: false,

          verify: "/[0-9]/",

        },

        {

          comboxKey: "materialclassify_data",

          comboxKey: null,

          customClass: null,

          data: [

            {

@@ -182,7 +214,7 @@
          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "materialclassify",

          field: "dataSelect",

          hidden: false,

          keyAttr: false,

          prefix: "",

@@ -192,7 +224,32 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "物料分类",

          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,

@@ -232,7 +289,7 @@
          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "secondfl",

          field: "datetime",

          hidden: false,

          keyAttr: false,

          prefix: "",

@@ -242,7 +299,7 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "时间选择器",

          text: "日期时间选择器",

          tooltips: "",

          type: "datetime",

          unique: false,

@@ -257,9 +314,9 @@
          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "thrifl",

          field: "time",

          hidden: false,

          keyAttr: true,

          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: null,

@@ -267,9 +324,9 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "关键属性",

          text: "时间选择器",

          tooltips: "",

          type: "text",

          type: "date",

          unique: false,

          verify: "",

        },

@@ -292,7 +349,7 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "销售物料",

          text: "开关",

          tooltips: "",

          type: "truefalse",

          unique: false,

@@ -303,7 +360,7 @@
          customClass: null,

          data: null,

          dateFormate: "",

          defaultValue: "",

          defaultValue: "我是默认值",

          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

@@ -317,7 +374,7 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "图号",

          text: "默认值功能",

          tooltips: "提示",

          type: "text",

          unique: false,

@@ -334,7 +391,7 @@
          extendAttrString: null,

          field: "xinghaoguige",

          hidden: false,

          keyAttr: false,

          keyAttr: true,

          prefix: "",

          readOnly: false,

          referConfig: null,

@@ -342,7 +399,7 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "规格型号（CAPP）",

          text: "属性关键值",

          tooltips: "",

          type: "text",

          unique: false,

@@ -362,166 +419,87 @@
          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: {

            backPath: "",

            displayTable: null,

            height: null,

            initSort: null,

            loadType: "all",

            mapFields: "",

            method: "GET",

            muti: false,

            onlyLeaf: false,

            paramForFormKey: "",

            parentFieldName: null,

            parentUsedField: null,

            parentValue: null,

            referContent: null,

            referType: "appendix",

            remoteSort: false,

            tableConfig: {

              cols: [

                {

                  align: "left",

                  colspan: 1,

                  comboxKey: null,

                  data: [],

                  dateFormate: null,

                  edit: null,

                  editConfig: null,

                  event: null,

                  field: "id",

                  fieldType: "text",

                  fixed: null,

                  hidden: false,

                  minWidth: null,

                  optionButtons: null,

                  optionField: false,

                  optionJsMap: null,

                  queryField: null,

                  referConfig: null,

                  rowspan: 1,

                  showField: null,

                  sort: true,

                  sortField: "id",

                  style: null,

                  templet: null,

                  title: "编号",

                  unresize: false,

                  width: 150,

                },

                {

                  align: "left",

                  colspan: 1,

                  comboxKey: null,

                  data: [],

                  dateFormate: null,

                  edit: null,

                  editConfig: null,

                  event: null,

                  field: "name",

                  fieldType: "text",

                  fixed: null,

                  hidden: false,

                  minWidth: null,

                  optionButtons: null,

                  optionField: false,

                  optionJsMap: null,

                  queryField: null,

                  referConfig: null,

                  rowspan: 1,

                  showField: null,

                  sort: true,

                  sortField: "name",

                  style: null,

                  templet: null,

                  title: "名称",

                  unresize: false,

                  width: 180,

                },

              ],

              oid: null,

              page: {

                limit: 15,

                page: 1,

              },

              queryColumns: [

                {

                  align: "left",

                  colspan: 1,

                  comboxKey: null,

                  data: [],

                  dateFormate: null,

                  edit: null,

                  editConfig: null,

                  event: null,

                  field: "id",

                  fieldType: "text",

                  fixed: null,

                  hidden: false,

                  minWidth: null,

                  optionButtons: null,

                  optionField: false,

                  optionJsMap: null,

                  queryField: null,

                  referConfig: null,

                  rowspan: 1,

                  showField: null,

                  sort: true,

                  sortField: "id",

                  style: null,

                  templet: null,

                  title: "编号",

                  unresize: false,

                  width: 150,

                },

                {

                  align: "left",

                  colspan: 1,

                  comboxKey: null,

                  data: [],

                  dateFormate: null,

                  edit: null,

                  editConfig: null,

                  event: null,

                  field: "name",

                  fieldType: "text",

                  fixed: null,

                  hidden: false,

                  minWidth: null,

                  optionButtons: null,

                  optionField: false,

                  optionJsMap: null,

                  queryField: null,

                  referConfig: null,

                  rowspan: 1,

                  showField: null,

                  sort: true,

                  sortField: "name",

                  style: null,

                  templet: null,

                  title: "名称",

                  unresize: false,

                  width: 180,

                },

              ],

            },

            textField: "name",

            type: "default",

            url: "",

            useFormKey: "",

            valueField: "oid",

            where: {

              materialname: "计量单位",

            },

          },

          tip: "我是提示功能",

          required: false,

          selectLibFlag: "",

          showField: "jiliangdwname",

          suffix: "",

          text: "计量单位",

          text: "提示功能",

          tooltips: "",

          type: "refer",

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

        },

@@ -534,7 +512,7 @@
          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "chukufangshi",

          field: "textarea",

          hidden: false,

          keyAttr: false,

          prefix: "",

@@ -544,9 +522,9 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "出库方式",

          text: "文本域",

          tooltips: "",

          type: "text",

          type: "textarea",

          unique: false,

          verify: "",

        },

@@ -569,9 +547,9 @@
          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "备注说明",

          text: "文件功能",

          tooltips: "",

          type: "text",

          type: "file",

          unique: false,

          verify: "",

        },

@@ -584,102 +562,27 @@
          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "hesuanfenlei",

          field: "cz",

          hidden: false,

          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: {

            backPath: "",

            displayTable: null,

            height: null,

            initSort: null,

            loadType: "all",

            mapFields: "",

            method: "GET",

            muti: false,

            onlyLeaf: false,

            paramForFormKey: "",

            parentFieldName: "PARENTCODECLASSIFYOID",

            parentUsedField: "oid",

            parentValue:

              "\\IN(SELECT oid from PLATFORMBTM_CODECLASSIFY where id ='hesuanfenlei')",

            referContent: null,

            referType: "codeclassify",

            remoteSort: false,

            tableConfig: null,

            textField: "name",

            type: "tree",

            url: "",

            useFormKey: "",

            valueField: "oid",

            where: null,

          },

          readOnly: true,

          referConfig: true,

          required: false,

          selectLibFlag: "",

          showField: "hesuanfenleiname",

          showField: "depId",

          suffix: "",

          text: "核算分类",

          text: "参照",

          tooltips: "",

          type: "refer",

          unique: false,

          verify: "",

        },

        {

          comboxKey: "Eummaterialtype",

          customClass: null,

          data: null,

          dateFormate: "",

          defaultValue: "1001",

          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "materialtype",

          hidden: false,

          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: null,

          required: false,

          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "物料类型",

          tooltips: "",

          type: "combox",

          unique: false,

          verify: "",

        },

        {

          comboxKey: "myDataSecret",

          customClass: null,

          data: null,

          dateFormate: "",

          defaultValue: "",

          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "secretgrade",

          hidden: false,

          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: null,

          required: false,

          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "secretGrade",

          tooltips: "",

          type: "combox",

          type: "text",

          unique: false,

          verify: "",

        },

      ],

      visible2: false,

    };

  },

  created() {

    this.preOrSufFixShow();

  },

  computed: {

    dialogVisible: {

@@ -714,16 +617,23 @@
        });

    },

    templateRender() {

      const items = this.testItems;

      // const items = this.templateData.formDefineVO.items;

      const items = this.testItems;

      let column = [];

      let dictKeys = [];

      items.forEach((item) => {

        // 隐藏表单元素

        if (item.hide) {

          return;

        }

        // if (item.field === 'id' || item.field === 'lcstatus') {

        //   item.readOnly = true

        // }

        // 手机字典key统一异步请求获取

        if (!this.$utilFunc.isEmpty(item.comboxKey)) {

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

        }

        // 禁用部分属性

        if (this.disabledProp.includes(item.field)) {

          item.disabled = true;

        }

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

        let message = "请选择";

        let trigger = "change";

@@ -736,10 +646,11 @@
        let columnItem = {

          label: item.text,

          labelslot: true,

          prop: item.field,

          prop: item.referConfig ? item.showField : item.field,

          type: this.columnType[item.type],

          dicData: this.getDictData(item.type, item.dicData),

          disabled: item.readOnly,

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

          disabled: item.disabled,

          readonly: item.readOnly,

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

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

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

@@ -747,7 +658,21 @@
          valueFormat: item.dateFormate,

          format: item.dateFormate,

          keyAttr: item.keyAttr,

          value: 1,

          value: item.defaultValue,

          tip: item.tip,

          comboxKey: item.comboxKey,

          change: ({ value, column }) => {

            this.changeFun(value, column, item.displayExtension);

          },

          click: this.clickFun(item.referConfig),

          // action:

          //   item.type === "file"

          //     ? "/api/ubcs-resource/oss/endpoint/put-file"

          //     : "",

          // propsHttp: {

          //   res: "data",

          //   url: "link",

          // },

          rules: [

            {

              required: item.required,

@@ -755,7 +680,8 @@
              trigger,

            },

            {

              pattern: item.verify,

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

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

              message: item.tooltips,

              trigger,

            },

@@ -765,8 +691,29 @@
            value: "key",

          },

        };

        console.log(this.$refs.form, "form");

        this.option.column.push(columnItem);

        column.push(columnItem);

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

      });

      this.index++;

      this.geDictData(dictKeys);

    },

    changeFun(value, column, jsCode) {

      if (typeof jsCode === "string" && jsCode.length > 0) {

        eval(jsCode);

      }

    },

    clickFun(referConfig) {

      if (referConfig) {

        return () => {

          this.visible2 = true

        }

      }

    },

    czSubmit() {

      this.visible2 = false

      this.form = Object.assign(this.form, {

        depName: "我是部门名称",

        depId: "我是部门id",

      });

    },

    close() {

@@ -780,23 +727,43 @@
        return val;

      }

    },

    // 获取字典数据

    getDictData(type, dicData) {

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

    getDataList(type, dicData) {

      if (type === "truefalse") {

        return [

          {

            key: false,

            value: "否",

            key: 0,

          },

          {

            key: true,

            value: "是",

            key: 1,

          },

        ];

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

@@ -816,4 +783,8 @@
  top: 2px;

  color: red;

}

// 解决swich组件不垂直居中的问题

/deep/ .el-switch {

  vertical-align: baseline;

}

</style>


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

@@ -6,17 +6,14 @@
</template>



<script>

import FormTemplate from '../../components/FormTemplate/index'

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

export default {

  name: 'FormTempalteTest',

  name: "FormTempalteTest",

  components: { FormTemplate },

  data() {

    return {

      visible: false

    }

  }

}

      visible: false,

    };

  },

};

</script>

<style lang='less' scoped>



</style>