标准类别下拉树

src/common/myFun.js

@@ -0,0 +1,17 @@
+function getTreeItem(tree, id){
+    let result = {}
+    tree.map(item => {
+        if(item.id === id){
+            result = item
+        }else{
+            if(item.children.length > 0){
+                getTreeItem(item.children)
+            }
+        }
+    })
+    return result
+}
+
+export {
+    getTreeItem
+}

src/components/abc/selectTree/selectTree.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-form-item :label="label" class="search-item">
+    <el-select :ref="refName" v-model="value" :placeholder="placeholder" style="width: 100%" fixed>
+      <ElInput
+        v-if="treeList.length !== 0"
+        v-model="filterText"
+        placeholder="输入关键字搜索"
+        class="sel-input"
+        @click.stop.native
+      />
+      <el-option :value="value" :label="checkLabel" class="sel-option">
+        <el-tree
+          class="tree-line"
+          ref="selectTree"
+          :data="treeList"
+          :props="defaultProps"
+          icon-class="icon-tree"
+          node-key="id"
+          highlight-current
+          @node-click="nodeClick"
+          :filter-node-method="filterNode">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
+              <span style="font-size:12px"> {{ node.label }} </span>
+            </span>
+        </el-tree>
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      filterText: '', // 筛选
+      checkLabel: '', // 回显值
+    }
+  },
+  props:{
+    label:{
+      type: String
+    },
+    placeholder: {
+      type: String,
+      default(){
+        return '请选择'
+      }
+    },
+    // 树
+    treeList:{
+      type: Array,
+      required: true
+    },
+    // 绑定的值 -> id
+    value:{
+      type: String,
+      required: true
+    },
+    defaultProps:{
+      type: Object,
+      default(){
+        return {
+          children: 'children',
+          label: 'menuName'
+        }
+      }
+    },
+    refName:{
+      type: String,
+      default() {
+        return 'selectRefs'
+      }
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs[this.refName].filter(val);
+    },
+  },
+  methods: {
+    nodeClick(node){
+      this.$emit('input',node.id) // 父子v-model的input事件
+      this.checkLabel = node.menuName
+    },
+    filterNode (value, data) {
+      if (!value) return true;
+      return data.menuName.indexOf(value) !== -1;
+    },
+    // 父组件通过ref调用该方法
+    clear(){
+      // 清空值
+      this.$emit('input', '')
+      this.checkLabel = ''
+      this.filterText = ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .icon-tree {
+  margin: 0 5px 0 10px;
+  position: relative;
+  background: url('~@/assets/images/shangqi/img/tree-add.png');
+  background-size: 100% 100%;
+}
+/deep/ .expanded {
+  background: url('~@/assets/images/shangqi/img/tree-sub.png');
+  background-size: 100% 100%;
+}
+/deep/ .is-leaf {
+  background-image: none;
+  background-size: 100% 100%;
+}
+/deep/ .is-show {
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/tree.png');
+  background-size: 100% 100%;
+}
+/deep/ .is-leaf-none {
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/none-file-new.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .tree-line {
+  .el-tree-node {
+    position: relative;
+    padding-left: 0px; // 缩进量
+    line-height: 30px;
+  }
+
+  .el-tree-node__content{
+    padding-left: 0 !important;
+  }
+
+  .el-tree-node__children {
+    padding-left: 16px; // 缩进量
+  }
+
+  // 竖线
+  .el-tree-node::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    left: -3px;
+    top: -26px;
+    border-width: 1px;
+    border-left: 1px dashed #858990e0;
+  }
+
+  // 当前层最后一个节点的竖线高度固定
+  .el-tree-node:last-child::before {
+    height: 38px; // 可以自己调节到合适数值
+  }
+
+  // 横线
+  .el-tree-node::after {
+    content: "";
+    width: 11px;
+    height: 20px;
+    position: absolute;
+    left: -3px;
+    top: 12px;
+    border-width: 1px;
+    border-top: 1px dashed #858990e0;
+  }
+
+  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+  & > .el-tree-node::after {
+    border-top: none;
+  }
+
+  & > .el-tree-node::before {
+    border-left: none;
+  }
+
+  // 展开关闭的icon
+  .el-tree-node__expand-icon {
+    font-size: 16px;
+    // 叶子节点（无子节点）
+    &.is-leaf {
+      color: transparent;
+      // display: none; // 也可以去掉
+    }
+  }
+}
+
+.sel-input {
+  width: 96%;
+  margin: 5px;
+  height: 30px;
+  /deep/ .el-input__inner{
+    height: 30px;
+    line-height: 30px;
+  }
+}
+.sel-option {
+  width: 100%;
+  height: 200px;
+  overflow: auto;
+  background-color: #fff;
+  cursor: pointer;
+  font-weight: normal!important;
+  padding: 0 5px;
+}
+</style>

src/pages/processCenter/pages/creatProcess/qbfs/step1.vue

@@ -533,13 +533,14 @@
                 clearable
                 :maxlength="100"></el-input>
           </el-form-item>
-          <el-form-item label="标准类别" class="search-item">
+          <selectTree
-            <el-input
+              ref="selectTreeRef"
-                v-model="replaceLawsNumForm.menuId"
+              label="标准类别"
-                placeholder="根据标准类别查找"
+              placeholder="根据标准类别查找"
-                clearable
+              :treeList="selectTreeList"
-                :maxlength="100"></el-input>
+              v-model="replaceLawsNumForm.menuId"
-          </el-form-item>
+          >
+          </selectTree>
           <el-form-item class="search-item btn-box">
             <el-button
                     type="primary"
@@ -665,13 +666,16 @@ import ProcessHeader from "../../components/ProcessHeader";
 import ProcessFooter from "../../components/ProcessFooter";
 import ProcessTitle from "../../components/ProcessTitle";
 import {saveTaskFirst,queryTaskFirst, inboundLiaisonDetail,taskDel,startProcessRollBack, completeTask } from "api/process";
+import selectTree from "@/components/abc/selectTree/selectTree"
+import { getTreeItem }  from "@/common/myFun.js"
 
 export default {
   name: "qbfsStep1",
   components:{
     ProcessHeader,
     ProcessFooter,
-    ProcessTitle
+    ProcessTitle,
+    selectTree
   },
   filters: {
     ellipsis (value) {
@@ -791,6 +795,7 @@ export default {
           {required: true, validator: bussFsSubUser1NameVal, trigger: 'blur'},
         ],
       },
+      selectTreeList: [],
     }
   },
   mounted() {
@@ -932,12 +937,18 @@ export default {
         pageSize: this.$store.getters.userInfo.configContent,
         total: 0,
         validFlag: '0',
-        menuId: "", // 标准类别
+        // menuId: "", // 标准类别
         QCDW: '' // 起草单位
       }
+      // 清空值
+      this.$refs.selectTreeRef.clear()
       this.getReplaceLawsNumRow()
     },
     getReplaceLawsNumRow () {
+      this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
+      let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
+      this.replaceLawsNumForm.treeType = currentTreeItem.treeType
+
       if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
         this.replaceLawsNumForm.issueTimeStart = this.replaceLawsNumForm.issueTimeArr[0] || null
         this.replaceLawsNumForm.issueTimeEnd = this.replaceLawsNumForm.issueTimeArr[1] || null
@@ -978,6 +989,10 @@ export default {
       })
     },
     getReplaceLawsNumRowFirst () {
+      this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
+      let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
+      this.replaceLawsNumForm.treeType = currentTreeItem.treeType
+
       this.replaceLawsNumForm.page = 1
       this.replacePage = 1
       if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
@@ -1058,9 +1073,40 @@ export default {
     handleTabs(name) {
       this.active = name;
     },
-    choiceShow(){
+    async choiceShow(){
       this.getReplaceLawsNumRow()
       this.replaceLawsNumModel = true;
+      // 标准类别树
+      const list1 = await this.getMenuListOne()
+      const list2 = await this.getMenuListTwo()
+      this.selectTreeList = list1.concat(list2)
+    },
+    // 企业标准树
+    getMenuListOne() {
+      return new Promise((resolve, reject) => {
+        this.$http._getData('sarResource/ts-resource/getListStandLimitData',  {
+          sorDivide: 'BUSINESS_STAND',
+          userId: this.$store.getters.userInfo.userId
+        }).then(res=>{
+          if(res && res.data)
+            resolve(res.data)
+        }).catch(e=>{
+          console.log(e)
+        })
+      })
+    },
+    // 技术体系树
+    getMenuListTwo() {
+      return new Promise((resolve, reject) => {
+        this.$http._getData('lawss/sarMenuStandardLimit/getListStandLimit',  {
+          dicId: '9m4qqqaansxmox5e82zm'
+        }).then(res=>{
+          if(res && res.data)
+            resolve(res.data)
+        }).catch(e=>{
+          console.log(e)
+        })
+      })
     },
     getStandDataBtns(){
       this.$http.get('lawss/sarBussionessStand/getSarBussionStandPage',{

src/pages/regulatoryRepository/enterpriseStandardDatabase/components/EnterpriseStandardDatabase.vue

@@ -1509,13 +1509,14 @@
                             clearable
                             :maxlength="100"></el-input>
                       </el-form-item>
-                      <el-form-item label="标准类别" class="search-item">
+                      <selectTree
-                          <el-input
+                          ref="selectTreeRef"
-                            v-model="replaceLawsNumForm.menuId"
+                          label="标准类别"
-                            placeholder="根据标准类别查找"
+                          placeholder="根据标准类别查找"
-                            clearable
+                          :treeList="selectTreeList"
-                            :maxlength="100"></el-input>
+                          v-model="replaceLawsNumForm.menuId"
-                      </el-form-item>
+                      >
+                      </selectTree>
                       <el-form-item class="search-item btn-box">
                           <el-button
                                   type="primary"
@@ -1769,6 +1770,8 @@ import TreeSelect from "@/components/treeSelect/treeSelect.vue";
 import TreeSelectNew from "@/components/treeSelect/treeSelectNew.vue";
 import ProcessTitle from "@/pages/processCenter/pages/components/ProcessTitle";
 import treeSelectModule from "@/components/treeSelect/treeSelectModule.vue";
+import selectTree from "@/components/abc/selectTree/selectTree"
+import { getTreeItem }  from "@/common/myFun.js"
 
 import {mapGetters} from "vuex";
 import store from "@/store";
@@ -1789,7 +1792,8 @@ export default {
     TreeSelect,
     TreeSelectNew,
     treeSelectModule,
-    ProcessTitle
+    ProcessTitle,
+    selectTree
   },
   props: {},
   data() {
@@ -2563,6 +2567,7 @@ export default {
       url: '',
       urlChild: '',
       modelType:'',
+      selectTreeList: [],
     }
   },
   methods: {
@@ -2654,9 +2659,40 @@ export default {
       map.set(3,"继续有效");
       return map.get(data)
     },
-    selectBuss(){
+    async selectBuss(){
       this.replaceLawsNumModel = true
       this.getReplaceLawsNumRow()
+      // 标准类别树
+      const list1 = await this.getMenuListOne()
+      const list2 = await this.getMenuListTwo()
+      this.selectTreeList = list1.concat(list2)
+    },
+    // 企业标准树
+    getMenuListOne() {
+      return new Promise((resolve, reject) => {
+        this.$http._getData('sarResource/ts-resource/getListStandLimitData',  {
+          sorDivide: 'BUSINESS_STAND',
+          userId: this.$store.getters.userInfo.userId
+        }).then(res=>{
+          if(res && res.data)
+            resolve(res.data)
+        }).catch(e=>{
+          console.log(e)
+        })
+      })
+    },
+    // 技术体系树
+    getMenuListTwo() {
+      return new Promise((resolve, reject) => {
+        this.$http._getData('lawss/sarMenuStandardLimit/getListStandLimit',  {
+          dicId: '9m4qqqaansxmox5e82zm'
+        }).then(res=>{
+          if(res && res.data)
+            resolve(res.data)
+        }).catch(e=>{
+          console.log(e)
+        })
+      })
     },
     replaceLawsNumModelCancel () {
       // this.replaceLawsNumModel = false
@@ -2690,11 +2726,16 @@ export default {
         total: 0,
         validFlag: '0',
         QCDW: '',
-        menuId: ''
+        // menuId: ''
       }
+      this.$refs.selectTreeRef.clear()
       this.getReplaceLawsNumRow()
     },
     getReplaceLawsNumRow () {
+      this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
+      let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
+      this.replaceLawsNumForm.treeType = currentTreeItem.treeType
+
       if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
         this.replaceLawsNumForm.issueTimeStart = this.replaceLawsNumForm.issueTimeArr[0] || null
         this.replaceLawsNumForm.issueTimeEnd = this.replaceLawsNumForm.issueTimeArr[1] || null
@@ -2728,6 +2769,10 @@ export default {
       })
     },
     getReplaceLawsNumRowFirst () {
+      this.replaceLawsNumForm.userId = this.$store.getters.userInfo.userId
+      let currentTreeItem = getTreeItem(this.selectTreeList, this.replaceLawsNumForm.menuId)
+      this.replaceLawsNumForm.treeType = currentTreeItem.treeType
+
       this.replaceLawsNumForm.page = 1
       this.replacePage = 1
       if(this.replaceLawsNumForm.issueTimeArr && this.replaceLawsNumForm.issueTimeArr.length > 0){
@@ -5456,6 +5501,9 @@ export default {
     }
   },
   watch: {
+    // selectTreeFilterText (val) {
+    //   this.$refs.selectTree.filter(val);
+    // },
     'sarBussionessStandEO.standSort':{
       handler:function(val){
         this.QCBFC = !!(val && val.indexOf("QCBFC") !== -1);
@@ -5850,4 +5898,23 @@ export default {
 /deep/.el-table__fixed-body-wrapper .el-table__body {
   padding-bottom: 20px;
 }
+//
+//.sel-input {
+//  width: 96%;
+//  margin: 5px;
+//  height: 30px;
+//  /deep/ .el-input__inner{
+//    height: 30px;
+//    line-height: 30px;
+//  }
+//}
+//.sel-option {
+//  width: 100%;
+//  height: 200px;
+//  overflow: auto;
+//  background-color: #fff;
+//  cursor: pointer;
+//  font-weight: normal!important;
+//  padding: 0 5px;
+//}
 </style>