标准请码-左侧树渲染-右侧表单渲染

 Source/UBCS-WEB/src/api/code/codeApply.js

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

//编码申请树
export const getAuthTree = (params) => {
  return request({
    url: '/api/ubcs-code/codeApplyWebManagementController/getAuthTree',
    method: 'get',
    params:{
      ...params
    }
  })
}
//编码申请控件
export const getUsedTemplateByClassifyOid = (params) => {
  return request({
    url: '/api/ubcs-code/codeApplySwingController/getUsedTemplateByClassifyOid',
    method: 'get',
    params
  })
}
export function getCodeRule(params) {
  return request({
    url: 'api/ubcs-code/mdmEngineController/getCodeRuleByClassifyOid',
    method: 'get',
    params
  })
}

 Source/UBCS-WEB/src/components/Master/MasterTree.vue

@@ -170,6 +170,7 @@
      try {
        // console.log(data)
        this.TreeValue=data.label.split(" ")[0].trim();
        console.log('TreeValue',this.TreeValue)
        this.$emit('TreeValue',this.TreeValue)
        this.nodeClickList = data;
        this.tableHeadDataFateher = []

 Source/UBCS-WEB/src/views/code/codeApply.vue

@@ -1,10 +1,316 @@
<template>
  <p>编码申请</p>
    <el-row>
      <el-col :span="4">
        <basic-container>
          <avue-tree ref="tree"
                     v-model="form"
                     :data="TreeData"
                     :option="TreeOption"
                     style="height: calc(100vh - 150px)"
                     @node-click="nodeClick">
          </avue-tree>
        </basic-container>
      </el-col>
      <el-col :span="20">
        <basic-container>
          <div style="height: calc(100vh - 150px)">
            <FormTemplate
              key="masterForm" data-key="masterForm"
              v-bind="$attrs"
              :type="type"
              :TreeValue="TreeValue"
              :eventList="eventList"
              ref="FormTemplate"
              @getFormData="getFormData"
            ></FormTemplate>
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
              <el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
                <FormTemplate
                  key="codeApplyForm" data-key="codeApplyForm"
                  secDTOListv-bind="$attrs"
                  :type="type"
                  :selfColumnType="selfColumnType"
                  :selfColumnConfig="selfColumnConfig"
                  ref="CodeApply"
                  @getFormData="getCodeApplyFormData"
                  @referConfigDataUpdate="referConfigDataUpdate"
                ></FormTemplate>
              </el-tab-pane>
            </el-tabs>
          </div>
        </basic-container>
      </el-col>
    </el-row>
</template>

<script>
import {getAuthTree,getUsedTemplateByClassifyOid,getCodeRule} from '@/api/code/codeApply.js'

export default {
name: "codeApply"
  name: "codeApply",
  components: { FormTemplate: () => import('@/components/FormTemplate/FormTemplate') },
  data() {
    return {
      codeClassifyOid:'',
      type:'add',
      TreeValue:'',
      dialogVisible:true,
      setForm:{},
      secVOList: [],
      codeRuleOid: "",
      activeName: "codeApply",
      showCodeApply: false,
      eventList:[],
      form: {},
      TreeData:[],
      TreeOption: {
        defaultExpandAll: false,
        addBtn: false,
      },
      //新增类型
      selfColumnType: {
        codefixedsec: "combox",//固定码段
        codeclassifysec: "refer",//分类码段
        codevariablesec: "text",//可变码段
        coderefersec: "refer",//引用码段
        codeattrsec: "text",
        codelevelsec: "text",
        codedatesec: "date"
      },
      selfColumnConfig: {
        function: {
          required: this.isRequired,
          dicData: this.getOptionList,
          type: this.getType,
          referConfig: this.getReferConfig,
          readOnly: this.getDisabled,
        },
        exchange: {
          text: "name",
          field: "oid",
          prop: "oid",
          showField: "name",
          parentClassifySecOid: "parentClassifySecOid",
          label: "name",
          maxlength: "codeSecLength",
          data: "fixedValueVOList",
          dateFormate: "codeDateFormatStr"
        },
        directVoluation: {
          search: true,
          props: {
            label: "id",
            value: "id",
          },
        },
      },
    }
  },
  created() {
    this.getTreeData()
  },
  methods:{
    getFormData(form) {
      this.form = form;
    },
    //定义一个修改数据属性名的方法
    ModifyProperties(obj, oldName, newName) {
      for (let key in obj) {
        if (key === oldName) {
          obj[newName] = obj[key];
          delete obj[key];
        }
        if (typeof obj[key] === 'object') {
          this.ModifyProperties(obj[key], oldName, newName);
        }
      }
    },
    getTreeData(){
      getAuthTree({
        'library': 'XH',
        'systemOid': '061261BF-2736-4589-12F7-0DFA79121222',
        'systemId': '02'
      }).then(res => {
        // console.log(res);
        this.TreeData=res.data;
        this.ModifyProperties(this.TreeData, 'name', 'label');
        // console.log( this.codeClassifyOid)

      });
    },
    nodeClick(row){
      // console.log(row)
      this.TreeValue=row.text.split(" ")[0].trim();
      this.codeClassifyOid = row.oid;
      getUsedTemplateByClassifyOid({ 'codeClassifyOid': this.codeClassifyOid,templateOid:' 97e979919a1f1dca67290e85fee22688' }).then((res) => {
        console.log('===res',res)
        if (res.data.code === 200) {
          this.$nextTick(() => {
            this.eventList=res.data.data.attributes
            // this.$refs.FormTemplate.$emit('eventList',  res.data.templateVO.attributes);
            if (Object.keys(this.setForm).length > 0) {
              this.$refs.FormTemplate.form = this.setForm;
            }
          });
        }
      })
        .catch(() => {
          this.loading = false;
        });
      this.getCodeRule()
    },
    getCodeRule() {
      let that = this;
      getCodeRule({codeClassifyOid: that.codeClassifyOid}).then((res) => {
        if (res.data && res.data.code === 200) {
          that.codeRuleOid = res.data.data.oid;
          const typeList = [
            //属性码段 åªè¯»
            "codeattrsec",
            //可变码段
            "codevariablesec",
            //固定码段
            "codefixedsec",
            //分类码段
            "codeclassifysec",
            //日期码段 åªè¯»
            "codedatesec",
            //引用码段
            "coderefersec",
            //层级码段 åªè¯»
            "codelevelsec",
            //流水码段 éšè—
          ];
          that.secVOList = (res.data.data.secVOList || []).filter((item) =>
            typeList.includes(item.secType)
          );
          if (that.secVOList.length > 0 && that.type === "add") {
            that.showCodeApply = true;
            that.activeName = "codeApply";
            this.$nextTick(() => {
              that.$refs.CodeApply.templateRender(that.secVOList, this.TreeValue);
            });
          } else {
            that.showCodeApply = false;
          }
        }
      });
    },
    getType(item) {
      return this.selfColumnType[item.sectype];
    },
    isRequired(item) {
      return item.nullableFlag != "true";
    },
    getOptionList(item) {
      if (
        Array.isArray(item.fixedValueVOList) &&
        item.fixedValueVOList.length > 0
      ) {
        const configAttr = {
          key: "id",
          value: "id",
        };
        const optionList = item.fixedValueVOList.map((item) => {
          for (const key in configAttr) {
            if (Object.hasOwnProperty.call(configAttr, key)) {
              const element = configAttr[key];
              item[key] = item[element];
            }
          }
          return item;
        });
        return optionList;
      } else {
        return [];
      }
    },
    getReferConfig(item) {
      let params = {};
      if (item.secType == "codeclassifysec") {
        //分类码段
        params = {
          isMuti: false,
          type: "grid",
          tableConfig: {
            limit: -1,
            cols: [
              {
                field: "id",
                title: "英文名称",
                sort: true,
                width: 150,
              },
              {
                field: "name",
                title: "中文名称",
                sort: true,
                width: 150,
              },
              {
                field: "description",
                title: "描述",
                width: 250,
              },
            ],
            queryColumns: [
              {
                field: "id",
                title: "英文名称",
              },
              {
                field: "name",
                title: "中文名称",
              },
            ],
          },
          url: "api/ubcs-code/ubcs-code/mdmEngineController/listCodeClassifyValueBySecOid",
          extraParams: {
            classifySecOid: item.oid,
            parentClassifyValueOid: item.parentClassifySecOid
              ? this.codeApplyForm[item.parentClassifySecOid]
              : "",
          },
        };
      } else if (item.secType == "coderefersec") {
        //引用码段
        params = JSON.parse(item.referValueInfo);
      }
      return params;
    },
    getDisabled(item) {
      if (item.secType === "codeclassifysec") {
        if (item.parentClassifySecOid) {
          if (!this.codeApplyForm[item.parentClassifySecOid]) {
            return true;
          } else {
            return false;
          }
        }
      }
    },
    // å‚照组件数据变更
    referConfigDataUpdate(data) {
      const { field } = data;
      let childItems=[];
      this.secVOList = this.secVOList.map((item) => {
        if (item.parentClassifySecOid === field) {
          this.$refs.CodeApply.form[item.oid] = undefined;
          this.$refs.CodeApply.form[item.name] = undefined;
          item.readOnly=false;
          item.referConfig.extraParams.parentClassifyValueOid=data.value;
          item.referConfig.reloadData = true;
          childItems.push(item)
        }
        return item;
      });
      //this.$refs.CodeApply.templateRender(this.secVOList,this.TreeValue);
      this.$refs.CodeApply.changeChildItem(childItems);
    },
    getCodeApplyFormData(codeApplyForm) {
      this.codeApplyForm = codeApplyForm;
    },
  }
}
</script>