shaun-sheep 4 anni fa
parent
commit
0f8f97868a

+ 1 - 1
src/api/dictionary/index.js

@@ -4,7 +4,7 @@ import http from '@/api/scan/httpUtil'
 //查询组织结构
 export function dictionaryQuery(param, success) {
   let url = `${baseUrl}/prod/dictionary/query`
-  http.getJson(url, {}, success)
+  http.getJson(url, param, success)
 }
 
 //查询专业

+ 6 - 29
src/components/product/productTool.vue

@@ -32,6 +32,10 @@
     created() {
       dictionaryQuery({},res=> {
         this.options = res.Content
+        this.options.unshift({
+          Code: "common",
+          Name: "标准字典"
+        })
         console.log(res)
       })
     },
@@ -41,27 +45,12 @@
         options:[],
         isClearable: true,      // 可清空(可选)
         isAccordion: true,      // 可收起(可选)
-        valueId: 20,            // 初始ID(可选)
+        valueId: 'common',            // 初始ID(可选)
         props: {                // 配置项(必选)
           value: 'Code',
           label: 'Name',
           children: 'Project',
-          // disabled:true
         },
-        // 选项列表(必选)
-        list: [
-          {id: 1, parentId: 0, name: "一级菜单A", },
-          {id: 2, parentId: 0, name: "一级菜单B",},
-          {id: 3, parentId: 0, name: "一级菜单C", },
-          {id: 4, parentId: 1, name: "二级菜单A-A", },
-          {id: 5, parentId: 1, name: "二级菜单A-B", },
-          {id: 6, parentId: 2, name: "二级菜单B-A",},
-          {id: 7, parentId: 4, name: "三级菜单A-A-A", },
-          {id: 20, parentId: 0, name: "一级菜单C", },
-          {id: 39, parentId: 0, name: "一级菜单C", },
-          {id: 40, parentId: 0, name: "一级菜单end", }
-        ],
-
       }
     },
     methods: {
@@ -71,20 +60,8 @@
       // 取值
       getValue(value) {
         this.valueId = value
-        console.log(this.valueId);
+        console.log(value)
       },
-
-    },
-    computed: {
-      /* 转树形数据 */
-      // optionData() {
-      //   let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
-      //   return cloneData.filter(father => {                      // 循环所有项,并添加children属性
-      //     let branchArr = cloneData.filter(child => father.id == child.parentId);       // 返回每一项的子级数组
-      //     branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性,并赋值
-      //     return father.parentId == 0;      //返回第一层
-      //   });
-      // }
     },
   }
 </script>

+ 11 - 8
src/components/public/selectTree.vue

@@ -25,9 +25,9 @@
       props:{
         type: Object,
         default: {
-          value:'id',             // ID字段名
-          label: 'title',         // 显示名称
-          children: 'children'    // 子级字段名
+          value:'Code',             // ID字段名
+          label: 'Name',         // 显示名称
+          children: 'Project'    // 子级字段名
         }
       },
 
@@ -35,7 +35,7 @@
       options:{ type: Array, default: [] },
 
       // 初始值
-      value:{ type: Number, default: null },
+      value:{ type: String, default: null },
 
       // 可清空选项
       clearable:{ type:Boolean, default: true },
@@ -51,16 +51,18 @@
       }
     },
     mounted(){
-      this.valueId = this.value,    // 初始值
+      this.valueId = this.value// 初始值
         this.initHandle()
     },
     methods: {
       // 初始化值
       initHandle(){
         if(this.valueId){
-          this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
-          this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
-          this.defaultExpandedKey = [this.valueId]      // 设置默认展开
+            this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     //初始化显示
+            this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
+            this.defaultExpandedKey = [this.valueId]      // 设置默认展开
+
+
         }
         this.initScroll()
       },
@@ -78,6 +80,7 @@
         this.valueTitle = node[this.props.label]
         this.valueId = node[this.props.value]
         this.$emit('getValue',this.valueId)
+        console.log('子组件',this.valueId)
         this.defaultExpandedKey = []
       },
       // 清除选中

+ 138 - 0
src/components/selectTree.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">
+    <el-option :value="valueTitle" :label="valueTitle" class="options">
+      <el-tree
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        :default-expanded-keys="defaultExpandedKey"
+        @node-click="handleNodeClick">
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    name: "el-tree-select",
+    props:{
+
+      // 配置项
+      props:{
+        type: Object,
+        default: {
+          value:'id',             // ID字段名
+          label: 'title',         // 显示名称
+          children: 'children'    // 子级字段名
+        }
+      },
+
+      // 选项列表数据(树形结构的对象数组)
+      options:{ type: Array, default: [] },
+
+      // 初始值
+      value:{ type: Number, default: null },
+
+      // 可清空选项
+      clearable:{ type:Boolean, default: true },
+
+      // 自动收起
+      accordion:{ type:Boolean, default: false }
+
+    },
+    data() {
+      return {
+        valueId: null,
+        valueTitle:'',
+        defaultExpandedKey:[]
+      }
+    },
+    mounted(){
+      this.valueId = this.value,    // 初始值
+        this.initHandle()
+    },
+    methods: {
+      // 初始化值
+      initHandle(){
+        if(this.valueId){
+          this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
+          this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
+          this.defaultExpandedKey = [this.valueId]      // 设置默认展开
+        }
+        this.initScroll()
+      },
+
+      // 初始化滚动条
+      initScroll(){
+        this.$nextTick(()=>{
+          let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
+          let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
+          scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
+          scrollBar.forEach(ele => ele.style.width = 0)
+        })
+      },
+
+      // 切换选项
+      handleNodeClick(node){
+        this.valueTitle = node[this.props.label]
+        this.valueId = node[this.props.value]
+        this.$emit('getValue',this.valueId)
+        this.defaultExpandedKey = []
+      },
+
+      // 清除选中
+      clearHandle(){
+        this.valueTitle = ''
+        this.valueId = null
+        this.defaultExpandedKey = []
+        this.clearSelected()
+        this.$emit('getValue',null)
+      },
+
+      // 清空选中样式
+      clearSelected(){
+        let allNode = document.querySelectorAll('#tree-option .el-tree-node')
+        allNode.forEach((element)=>element.classList.remove('is-current'))
+      }
+
+    },
+
+    watch: {
+      value(){
+        this.valueId = this.value
+        this.initHandle()
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
+    height: auto;
+    max-height: 274px;
+    padding: 0;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .el-select-dropdown__item.selected{
+    font-weight: normal;
+  }
+  ul li >>>.el-tree .el-tree-node__content{
+    height:auto;
+    padding: 0 20px;
+  }
+  .el-tree-node__label{
+    font-weight: normal;
+  }
+  .el-tree >>>.is-current .el-tree-node__label{
+    color: #409EFF;
+    font-weight: 700;
+  }
+  .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
+    color:#606266;
+    font-weight: normal;
+  }
+</style>

+ 2 - 5
src/components/test.vue

@@ -12,24 +12,21 @@
     <search text="请输入关键词/拼音/首字母" type="header"></search>
     <search text="请输入品牌名称" type="content"></search>
     <el-button type="primary" @click="handBrand">添加产品</el-button>
-    <addBrand ref="addBrand" title="添加品牌"></addBrand>
-    <test1></test1>
+<!--    <addBrand ref="addBrand" title="添加品牌"></addBrand>-->
 
   </div>
 </template>
 
 <script>
-  import SelectTree from "./public/selectTree";
+  import SelectTree from "./selectTree";
   import search from "./public/search";
   import addBrand from "./business/addBrand";
-  import test1 from "./test1";
   export default {
     name: "test",
     components: {
       SelectTree,
       search,
       addBrand,
-      test1
     },
     data() {
       return {

+ 0 - 3
src/components/test1.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>hello</div>
-</template>