侧边树组件

src/benyun/components/sideTree/sideTree.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="sideTree" v-loading="load">
+    <div class="tree-top">
+      <el-switch
+        v-model="switchValue"
+        size="mini">
+      </el-switch>
+    </div>
+    <el-tree :data="data" :props="defaultProps" node-key="id" highlight-current :default-expand-all="attrs.defaultExpandAll" @node-click="handleNodeClick"></el-tree>
+  </div>
+</template>
+
+<script lang="ts">
+  /*
+  config:{
+    attr:{
+      retConfig:{}, //返回值配置
+      label:'',
+      children:'',
+      defaultExpandAll: true/false  //	是否默认展开所有节点
+      resType:''  //请求返回数据所在位置
+    }，
+    request:{
+      url:'',
+      method:'',
+      data:'',
+      params:''
+    }
+  }
+
+  */
+  import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+  import VueViews from '@/benyun/compVue/VueViews'
+  @Component
+	export default class SideTree extends VueViews {
+    load = false;
+    value:any={}
+    switchValue = true;
+    data:Array<any>=[]
+    config:any={}
+    
+    get defaultProps(){
+      let obj = {
+        children: 'children',
+        label: 'label'
+      }
+      if(this.attrs.label){
+        obj.label = this.attrs.label
+      }
+      if(this.attrs.children){
+        obj.children = this.attrs.children
+      }
+      return obj;
+    }
+
+    get requestConfig(){
+      return this.config.request
+    }
+    
+    created(){
+      if(this.propConfig){
+        this.setConfig(this.propConfig)
+      }
+      if(this.requestConfig){
+        this.request()
+      }
+    }
+
+    setData(data:Array<any>){
+      this.data=data;
+    }
+
+    handleNodeClick(data:any){
+      this.value={}
+      let newData = this.getChildData([data]);
+      if(this.attrs.retConfig){
+        for(const item of newData){
+          for(const key in this.attrs.retConfig){
+            if(!this.value[key]) this.value[key] = [];
+            this.value[key].push(item[this.attrs.retConfig[key]])
+          }
+        }
+      }
+      this.onChange();
+    }
+    onChange(){
+      this.$emit('onChange',this.value)
+    }
+    //获取下级数据
+    getChildData(data:Array<any>):Array<any>{
+      let d:Array<any> = [];
+      for(const item of data){
+        d.push(item);
+        if(item.children && item.children.length > 0){
+          d = d.concat(this.getChildData(item.children))
+        }
+      }
+      return d;
+    }
+    request(){
+      this.data = []
+      this.load = true;
+      if(this.requestConfig){
+        this.requestHandle({
+          ...this.requestConfig,
+          success:(res:any) => {
+            let t = this.attrs.resType?this.attrs.resType:'data'
+            if(res && res[t]){
+              this.setData(res[t])
+            }
+            this.load = false
+          },
+          fail:() => {
+            this.load = false;
+          }
+        })
+      }
+    }
+    
+  }
+</script>
+
+<style scoped lang="scss">
+.tree-top{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 8px;
+}
+</style>

src/benyun/plugins/componentRegister.ts

@@ -43,6 +43,10 @@ const comps: Array<ComBase> = [
     name: "byArea",
     component: () => import("@/benyun/components/byArea/byArea.vue"),
   },
+  {
+    name: "sideTree",
+    component: () => import("@/benyun/components/sideTree/sideTree.vue"),
+  },
 ];
 
 const install = function (Vue: any) {

src/views/audit/productClassification/index.vue

@@ -3,8 +3,9 @@
 		<div class="bill-left">
 			<div class="bill-tab">
 				<div class="tab-title">导航</div>
-				<el-tree :data="data" node-key="id" :default-expanded-keys="expandedKeys" :props="props"
-					@node-click="handleNodeClick"></el-tree>
+				<!-- <el-tree :data="data" node-key="id" :default-expanded-keys="expandedKeys" :props="props"
+					@node-click="handleNodeClick"></el-tree> -->
+					<side-tree :propConfig="treeConfig" @onChange="onChangeTree" />
 			</div>
 		</div>
 		<div class="bill-main">
@@ -49,6 +50,20 @@
 		popTitle : any = ''
 		radio : any = 0
 		dialogFormVisible : boolean = false
+		treeConfig={
+			attr:{
+				retConfig:{
+					id:'id'
+				},
+				defaultExpandAll:true,
+				label: 'name',
+				resType:'data'
+			},
+			request:{
+				url:'/maindata/maindataMaterialCategory/treeList',
+				method:'GET'
+			}
+		}
 		config : any = {
 			search: {
 				attr: {
@@ -233,6 +248,10 @@
 				this.getDataList()
 			}, 500)
 		}
+		//点击树获取数据
+		onChangeTree(data:any){
+			console.log('点击结果：',data)
+		}
 		// 获取树型导航数据
 		getTreeList() {
 			api.treeList('maindataMaterialCategory').then((res : any) => {

src/views/oms/order/components/mergeMedal.vue

@@ -14,7 +14,7 @@
       </template>
       <template v-slot:address="{row}">
         <div class="addr">{{ row.receiverProvince + '-' + row.receiverCity + '-' + row.receiverDistrict + (row.receiverTown?'-'+row.receiverTown:'') }}</div>
-        <div>{{ row.receiverAddress }}</div>
+        <div class="de-addr">{{ row.receiverAddress }}</div>
       </template>
       <template v-slot:pay="{row}">
         <div><el-tag type="success">已付款</el-tag></div>
@@ -168,4 +168,7 @@ export default class MergeModel extends Vue {
 .buyer-msg,.addr{
   color: dodgerblue;
 }
+.addr,.de-addr{
+  font-size: 12px;
+}
 </style>