动态表格组件

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
import request from "@/router/axios";

export const MasterTable =(params)=>{
  return request({
    url: 'api/ubcs-code/ubcs-code//mdmEngineController/getUIInfoByClassifyOid',
    method: 'get',
    params:{
      ...params
    }
  })
}

export const TableData =(params)=>{
  return request({
    url: 'api/ubcs-code/ubcs-code//mdmEngineController/gridTableDataByClassifyOid',
    method: 'get',
    params:{
      ...params
    }
  })
}

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

@@ -1,15 +1,94 @@
<template>
  <avue-crud :data="data" ></avue-crud>
<basic-container style="height: 750px">
  <avue-crud ref="crud" :data="data" :option="option" style="height: 750px" @sort-change="sortChange"></avue-crud>
</basic-container>
</template>

<script>
import { MasterTable,TableData } from "@/api/GetItem";
export default {
  name: "Crud.vue",
  data(){
    return{
      data:[],
      option:{}
      data:[
        {
          zhiliangbz:"111",
        },
        {
          xinghaoguige:"1121",
        },
      ],
      option:{
        //默认高度,
        align:'center',
        menuAlign:'center',
        column:[]
      },
      List:[],
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        datetime: "datetime",
      },
    }
  },
  created() {
   this.CrudHeaderRend();
   this.CrudRend()
  },
  activated() {
    this.doLayout()
  },
  methods:{
    doLayout() {
      this.$nextTick(() => {
        this.$refs.crud.doLayout();
      });
    },
    CrudHeaderRend(){
      MasterTable({codeClassifyOid:"D9CF223F-317D-71EB-BD11-433A94CAD9F3",functionId: 5,_: 1685067339479}).then(res=>{
        this.List=res.data.tableDefineVO.cols[0];
        this.List.forEach(item=>{
          console.log(item)
          let columnItem={
            label:item.title,
            prop:item.field,
            type:this.columnType[item.type],
            sortable:item.sort,
            width:item.minWidth
          };
          this.option.column.push(columnItem);

        })
      })
    },
    CrudRend(){
      TableData({templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F",
        codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3",
        page: 1,
        limit: 9,
        _: 1685089123575
      }).then(res=>{
        console.log(res)
        this.data=res.data.data
      })
    },
    // æŽ’序
    sortChange(val){
      console.log(val)

      // TableData(  {
      //   templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F",
      //   codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3",
      //   order:"desc",
      //   sort:val.prop
      // }).then(res=>{
      //   console.log(res.data.data)
      //   this.data=res.data.data
      // })
    },
  }
}
</script>

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

@@ -1,819 +1,819 @@
<template>

  <el-dialog

    :visible.sync="dialogVisible"

    v-dialogDrag

    top="0vh"

    title="提示"

    class="avue-dialog avue-dialog--top"

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

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

</template>



<script>

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

export default {

  name: "FormTemplate",

  props: {

    visible: {

      type: Boolean,

      default: false,

    },

  },

  data() {

    return {

      loading: false,

      dialogOptions: {

        width: "60%",

      },

      option: {

        emptyBtn: false,

        submitBtn: false,

        labelWidth: "120",

        column: [],

      },

      templateData: {},

      columnType: {

        text: "input",

        combox: "select",

        truefalse: "switch",

        number: "number",

        datetime: "datetime",

      },

      testItems: [

        {

          comboxKey: null,

          customClass: null,

          data: null,

          dateFormate: "",

          defaultValue: "",

          displayExtension: null,

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

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

          customClass: null,

          data: [

            {

              attributes: {},

              key: "model_type",

              value: "模型",

            },

            {

              attributes: {},

              key: "part_type",

              value: "零件",

            },

          ],

          dateFormate: "",

          defaultValue: "",

          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "materialclassify",

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

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

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

          prefix: "",

          readOnly: false,

          referConfig: null,

          required: false,

          selectLibFlag: "",

          showField: null,

          suffix: "",

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

          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,

          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: "计量单位",

            },

          },

          required: false,

          selectLibFlag: "",

          showField: "jiliangdwname",

          suffix: "",

          text: "计量单位",

          tooltips: "",

          type: "refer",

          unique: false,

          verify: "",

        },

        {

          comboxKey: null,

          customClass: null,

          data: null,

          dateFormate: "",

          defaultValue: "",

          displayExtension: null,

          extendAttrMap: null,

          extendAttrString: null,

          field: "chukufangshi",

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

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

          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,

          },

          required: false,

          selectLibFlag: "",

          showField: "hesuanfenleiname",

          suffix: "",

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

          unique: false,

          verify: "",

        },

      ],

    };

  },

  created() {

    this.preOrSufFixShow();

  },

  computed: {

    dialogVisible: {

      get() {

        return this.visible;

      },

      set(val) {

        this.$emit("update:visible", val);

      },

    },

  },

  methods: {

    getFormTemplate() {

      this.loading = true;

      getFormTemplate({

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

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

        page: 1,

        limit: 30,

      })

        .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);

        });

    },

    templateRender() {

      const items = this.testItems;

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

      items.forEach((item) => {

        // éšè—è¡¨å•å…ƒç´ 

        if (item.hide) {

          return;

        }

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

        //   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: item.field,

          type: this.columnType[item.type],

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

          disabled: 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: 1,

          rules: [

            {

              required: item.required,

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

              trigger,

            },

            {

              pattern: item.verify,

              message: item.tooltips,

              trigger,

            },

          ],

          props: {

            label: "value",

            value: "key",

          },

        };

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

        this.option.column.push(columnItem);

      });

    },

    close() {

      this.dialogVisible = false;

    },

    // å‰åŽç¼€

    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;

      }

    },

    // èŽ·å–字典数据

    getDictData(type, dicData) {

      if (type === "truefalse") {

        return [

          {

            value: "否",

            key: 0,

          },

          {

            value: "是",

            key: 1,

          },

        ];

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

        return dicData;

      }

      return [];

    },

  },

  watch: {

    visible(newV) {

      if (newV) {

        this.getFormTemplate();

      }

    },

  },

};

</script>



<style lang="scss" scoped>

.key_attr_icon {

  font-size: 24px;

  position: relative;

  top: 2px;

  color: red;

}

</style>

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    v-dialogDrag
    top="0vh"
    title="提示"
    class="avue-dialog avue-dialog--top"
    :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>
      </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>
</template>

<script>
import { getFormTemplate } from "../../api/common";
export default {
  name: "FormTemplate",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      dialogOptions: {
        width: "60%",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "120",
        column: [],
      },
      templateData: {},
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        datetime: "datetime",
      },
      testItems: [
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          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: "",
          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: "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: "materialclassify_data",
          customClass: null,
          data: [
            {
              attributes: {},
              key: "model_type",
              value: "模型",
            },
            {
              attributes: {},
              key: "part_type",
              value: "零件",
            },
          ],
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "materialclassify",
          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: "secondfl",
          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: "thrifl",
          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: "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: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "规格型号（CAPP）",
          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,
          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: "计量单位",
            },
          },
          required: false,
          selectLibFlag: "",
          showField: "jiliangdwname",
          suffix: "",
          text: "计量单位",
          tooltips: "",
          type: "refer",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "chukufangshi",
          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: "beizhushuoming",
          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: "hesuanfenlei",
          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,
          },
          required: false,
          selectLibFlag: "",
          showField: "hesuanfenleiname",
          suffix: "",
          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",
          unique: false,
          verify: "",
        },
      ],
    };
  },
  created() {
    this.preOrSufFixShow();
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    getFormTemplate() {
      this.loading = true;
      getFormTemplate({
        templateOid: "78B8C7C5-A042-0B96-FE6D-65421451782A",
        codeClassifyOid: "4524E801-6CC6-92E8-1AC3-2AB9604E8F96",
        page: 1,
        limit: 30,
      })
        .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);
        });
    },
    templateRender() {
      const items = this.testItems;
      // const items = this.templateData.formDefineVO.items;
      items.forEach((item) => {
        // éšè—è¡¨å•å…ƒç´ 
        if (item.hide) {
          return;
        }
        // if (item.field === 'id' || item.field === 'lcstatus') {
        //   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: item.field,
          type: this.columnType[item.type],
          dicData: this.getDictData(item.type, item.dicData),
          disabled: 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: 1,
          rules: [
            {
              required: item.required,
              message: `请${message}${item.text}`,
              trigger,
            },
            {
              pattern: item.verify,
              message: item.tooltips,
              trigger,
            },
          ],
          props: {
            label: "value",
            value: "key",
          },
        };
        console.log(this.$refs.form, "form");
        this.option.column.push(columnItem);
      });
    },
    close() {
      this.dialogVisible = false;
    },
    // å‰åŽç¼€
    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;
      }
    },
    // èŽ·å–字典数据
    getDictData(type, dicData) {
      if (type === "truefalse") {
        return [
          {
            value: "否",
            key: 0,
          },
          {
            value: "是",
            key: 1,
          },
        ];
      } else if (type === "combox") {
        return dicData;
      }
      return [];
    },
  },
  watch: {
    visible(newV) {
      if (newV) {
        this.getFormTemplate();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.key_attr_icon {
  font-size: 24px;
  position: relative;
  top: 2px;
  color: red;
}
</style>

 Source/UBCS-WEB/vue.config.js

@@ -28,7 +28,8 @@
        //本地服务接口地址
        // target: 'http://localhost:37000',
        //target: 'http://192.168.3.7:37000',
        target: 'http://dev.vci-tech.com:37000',
        // target: 'http://dev.vci-tech.com:37000',
        target: 'http://192.168.1.51:37000/',
        //远程演示服务地址,可用于直接启动项目
        // target: 'https://saber.bladex.vip/api',
        ws: true,