模块单元结构只能叶子节点多选, 关联模块vpps不用限制只能叶子节点,所以另起一个组件实现只能叶子节点多选功能

src/components/treeSelect/treeSelectModule.vue

@@ -0,0 +1,332 @@
+<template>
+    <el-drawer
+            class="org-tree"
+            :title="drawerTitle"
+            :visible.sync="modalShowFlag"
+            :size="width"
+            :append-to-body=true
+            :before-close="cancelUserInfo"
+            :show-checkbox="showCheckBox"
+            >
+        <el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
+                 :load="loadNode"
+                 :lazy="lazy"
+                 :show-checkbox="multiple"
+                 :node-key="nodeKey"
+                 :check-strictly="checkStrictly"
+                 :expand-on-click-node="false"
+                 :default-checked-keys="defaultCheckedKeys"
+                 :highlight-current="true"
+                 @node-click="handleNodeClick"
+                 @check-change="handleCheckChange">
+        </el-tree>
+        <div id="roleFormButton" class="demo-drawer-footer">
+            <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
+            <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelUserInfo">取消</el-button>
+        </div>
+    </el-drawer>
+</template>
+
+<script>
+// 模块单元结构只能叶子节点多选, 关联模块vpps不用限制只能叶子节点,所以另起一个组件实现只能叶子节点多选功能  …(⊙_⊙;)…(技术有限)
+     export default {
+        name: "treeSelectModule",
+        props: {
+            // 树结构数据
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            url: {
+                type: String,
+                default () {
+                    return "";
+                }
+            },
+          type: {
+            type: String,
+            default () {
+              return "";
+            }
+          },
+            urlChild: {
+                type: String,
+                default () {
+                    return "";
+                }
+            },
+            params: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            defaultProps: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            // 配置是否可多选
+            multiple: {
+                type: Boolean,
+                default () {
+                    return false;
+                }
+            },
+            lazy: {
+                type: Boolean,
+                default () {
+                    return false;
+                }
+            },
+            nodeKey: {
+                type: String,
+                default () {
+                    return 'id';
+                }
+            },
+            // 显示复选框情况下，是否严格遵循父子不互相关联
+            checkStrictly: {
+                type: Boolean,
+                default () {
+                    return false;
+                }
+            },
+            disabled: {
+                type: Boolean,
+                default () {
+                    return false;
+                }
+            },
+            // 默认选中的节点key数组
+            checkedKeys: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            width: {
+                type: String,
+                default () {
+                    return "";
+                }
+            },
+            drawerTitle:{
+                type: String,
+                default () {
+                    return '';
+                }
+            },
+          showCheckBox:{
+                type: Boolean,
+                default () {
+                    return true;
+                }
+            },
+            // 配置是否展开
+            modalShowFlag: {
+                type: Boolean,
+                default () {
+                    return false;
+                }
+            },
+        },
+        data () {
+            return {
+                nodeList: [],
+                defaultCheckedKeys: [],
+                isShowSelect: false, // 是否显示树状选择器
+                options: [],
+                selectedData: [], // 选中的节点
+                style: 'width:' + this.width + 'px;' + '',
+                selectStyle: 'width:100%;',
+                checkedIds: [],
+                checkedData: [],
+            };
+        },
+        created(){
+        },
+        mounted () {
+            if (this.checkedKeys.length > 0) {
+                if (this.multiple) {
+                    this.defaultCheckedKeys = this.checkedKeys;
+                    this.getChildByIDSList(this.defaultCheckedKeys);
+                    // this.selectedData = this.checkedKeys.map((item) => {
+                    //     var node = this.$refs.tree.getNode(item);
+                    //     return node.label;
+                    // });
+                } else {
+                    const item = this.checkedKeys[0];
+                    this.getChildByIDSList(item);
+                    // this.$refs.tree.setCurrentKey(item);
+                    // var node = this.$refs.tree.getNode(item);
+                    // this.selectedData = node.label;
+                }
+            }
+        },
+        methods: {
+            loadNode(node, resolve) {
+                const that = this;
+
+                if (node.level === 0) {
+                    that.loadTreeData(resolve);
+                }
+
+                if (node.level >= 1) {
+                    setTimeout(() => {
+                        this.getChildByList(node.data.level,node.data.id, resolve);
+                    }, 500);
+                    return resolve([]); // 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
+                }
+
+
+            },
+            getChildByIDSList( _parentID) {     // 获取子节点请求
+                let params = {ids : _parentID};
+                this.$http.get(this.urlChild, params, {
+                    _this: this
+                }, res => {
+                    if(res.data){
+                        this.$emit('popoverHide', this.checkedIds, res.data,false);
+                    }
+                })
+            },
+            getChildByList( level,id,resolve) {     // 获取子节点请求
+                let params = {level : level,id :id,type : this.type};
+                this.$http.get(this.urlChild, params, {
+                    _this: this
+                }, res => {
+                    if(res.data){
+                        resolve(res.data);
+                    }else {
+                        return false;
+                    }
+                })
+            },
+            loadTreeData(resolve) {
+            // 获取loadtreeData 就是父节点数据，getChildByList就是异步获取子节点数据
+                this.$http.get(this.url,  {type : this.type}, {
+                    _this: this
+                }, res => {
+                    if(res.data){
+                        resolve(res.data)
+                    }else {
+                        return false;
+                    }
+                })
+            },
+            popoverHide () {
+
+            },
+            // 节点被点击时的回调,返回被点击的节点数据
+            handleNodeClick (data, node) {
+                if (!this.multiple) {
+                    let tmpMap = {};
+                    tmpMap.value = node.key;
+                    tmpMap.label = node.label;
+                    this.options = [];
+                    this.options.push(tmpMap);
+                    this.selectedData = node.label;
+                    this.isShowSelect = !this.isShowSelect;
+                }
+            },
+          // 递归
+          getTreeData(data) {
+            // 循环遍历json数据
+            for (let i = 0; i < data.length; i++) {
+              if (data[i].children.length < 1) {
+                // children若为空数组，则将children设为undefined
+                delete data[i].children
+              } else {
+                // children若不为空数组，则继续 递归调用 本方法
+                this.getTreeData(data[i].children)
+              }
+            }
+            return data
+          },
+            // 节点选中状态发生变化时的回调
+            handleCheckChange () {
+                var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
+                this.options = checkedKeys.map((item) => {
+                    var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
+                    let tmpMap = {};
+                    tmpMap.value = node.key;
+                    tmpMap.label = node.label;
+                    return tmpMap;
+                });
+                this.selectedData = this.options.map((item) => {
+                    return item.label;
+                });
+            },
+            saveUserInfo () {
+                if (this.multiple) {
+                    this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
+                    this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
+                } else {
+                    this.checkedIds = this.$refs.tree.getCurrentKey();
+                    this.checkedData = this.$refs.tree.getCurrentNode();
+                }
+                this.$emit('popoverHide', this.checkedIds, this.checkedData,false);
+            },
+            cancelUserInfo () {
+                this.$emit('popoverHideCancel', this.checkedIds, this.checkedData,false);
+            },
+        },
+        watch: {
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+/deep/ .expanded{
+    background-image: none !important;
+    background-size:100% 100%;
+}
+.el-drawer__body{
+& > div:first-child{
+      display: flex;
+      flex: auto;
+      flex-direction: column;
+  }
+}
+::v-deep .el-drawer__header{
+&>span:first-child{
+     outline: none!important;
+ }
+}
+::v-deep .el-drawer{
+    outline: none!important;
+}
+
+//#tree {
+//  .el-checkbox .el-checkbox__inner {
+//    display: none;
+//  }
+//  div[role="group"] {
+//    .el-checkbox .el-checkbox__inner {
+//      display: inline-block;
+//    }
+//  }
+//}
+//
+//.el-tree-node {
+//  .is-leaf + .el-checkbox .el-checkbox__inner {
+//    display: inline-block;
+//  }
+//  .el-checkbox .el-checkbox__inner {
+//    display: none;
+//  }
+//}
+
+/deep/ .el-tree-node{
+  .is-leaf + .el-checkbox .el-checkbox__inner{
+    display: inline-block;
+  }
+  .el-checkbox .el-checkbox__inner{
+    display: none;
+  }
+}
+</style>

src/components/treeSelect/treeSelectNew.vue

@@ -320,12 +320,4 @@
 //  }
 //}
 
-/deep/ .el-tree-node{
-  .is-leaf + .el-checkbox .el-checkbox__inner{
-    display: inline-block;
-  }
-  .el-checkbox .el-checkbox__inner{
-    display: none;
-  }
-}
 </style>

src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue

@@ -1241,7 +1241,7 @@
           :defaultProps="defaultCodeProps" :checkedKeys="defaultCheckedKeys2"
           :nodeKey="nodeKeyCode" @popoverHide="popoverHideCarVs"
           @popoverHideCancel="popoverHideCarVsCancel()"></tree-select-new>
-      <tree-select-new
+      <tree-select-module
           width="500"
           :lazy=true
           :multiple=true
@@ -1252,7 +1252,7 @@
           :urlChild="urlChild"
           :defaultProps="defaultModelProps" :checkedKeys="defaultCheckedKeys3"
           :nodeKey="nodeKeyModel" @popoverHide="popoverHideModel"
-          @popoverHideCancel="popoverHideModelCancel()"></tree-select-new>
+          @popoverHideCancel="popoverHideModelCancel()"></tree-select-module>
       <!--      导入失败-->
       <el-dialog :visible.sync="importFailed" :close-on-click-modal="false" width="400px">
         <p slot="title" style="color:#f60">
@@ -1916,6 +1916,7 @@ import CustomDatePickWithText2 from '@/components/CustomFormComponents/DatePicke
 import {interfaceUrl} from '@/sysConfig'
 import TreeSelect from '@/components/treeSelect/treeSelect.vue';
 import TreeSelectNew from '@/components/treeSelect/treeSelectNew.vue';
+import treeSelectModule from "@/components/treeSelect/treeSelectModule.vue";
 import ProcessTitle from '@/pages/processCenter/pages/components/ProcessTitle'
 
 
@@ -1941,6 +1942,7 @@ export default {
     TreeSelect,
     MechanismTree,
     TreeSelectNew,
+    treeSelectModule,
     ProcessTitle
   },
   data() {