【修改】收入统计部门筛选

src/views/dashboard/IncomeSortEcharts.vue

@@ -1,11 +1,29 @@
 <!-- 分类统计-->
 <template>
   <div class="container">
-    <div class="title">收入分类统计 </div>
+    <div class="title">收入分类统计
+      <a-tree-select
+        :multiple="false"
+        show-search
+        :replaceFields="{value:'orgCode'}"
+        allowClear
+        tree-default-expand-all
+        tree-node-filter-prop="title"
+        @change="changeDepart"
+        style="width:40%"
+        :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
+        :treeData="treeDepartData"
+        v-model="queryParam.departCode"
+        placeholder="请选择组织机构">
+      </a-tree-select>
+    </div>
     <div class="operator">
-      <span @click="toggleEcharts('income')" class="operator-left"  :class="{'active':activeIndex === 'income'}">收入分析</span>
+      <span @click="toggleEcharts('income')" class="operator-left"
-      <span @click="toggleEcharts('allMoney')" class="operator-left"  :class="{'active':activeIndex === 'allMoney'}">应收</span>
+            :class="{'active':activeIndex === 'income'}">收入分析</span>
-      <span @click="toggleEcharts('confirmAmount')" class="operator-right" :class="{'active':activeIndex === 'confirmAmount'}">确收</span>
+      <span @click="toggleEcharts('allMoney')" class="operator-left"
+            :class="{'active':activeIndex === 'allMoney'}">应收</span>
+      <span @click="toggleEcharts('confirmAmount')" class="operator-right"
+            :class="{'active':activeIndex === 'confirmAmount'}">确收</span>
     </div>
     <div class="echarts-box" id="incomeSort"></div>
     <!--   表格区域beign -->
@@ -62,6 +80,8 @@ echarts.use([
 ])
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
+import {queryDepartTreeList} from '@api/api'
+
 const columns = [
   {
     title: '',
@@ -82,11 +102,14 @@ export default {
       url: {
         list: '/index/incomeClassificationStatistics'
       },
-      dataSource:[]
+      queryParam:{},
+      dataSource: [],
+      treeDepartData:[],// 组织机构 树数据
     }
   },
   mounted() {
     this.loadData()
+    this.loadDepartTreeData()
   },
   methods: {
     formatMoney,
@@ -99,6 +122,31 @@ export default {
         this.$forceUpdate()
       }
     },
+    /**
+     * 选择部门
+     * */
+    changeDepart(val){
+      console.log(val,'val')
+      this.queryParam.departCode = val
+      this.loadData()
+    },
+    /*
+    *  组织机构下拉数据
+    * */
+    loadDepartTreeData() {
+      const that = this
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          that.treeDepartData = []
+          let treeList = res.result
+          for (let a = 0; a < treeList.length; a++) {
+            let temp = treeList[a]
+            temp.isLeaf = temp.leaf
+            that.treeDepartData.push(temp)
+          }
+        }
+      })
+    },
     loadData() {
       if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
         this.echartsInstace.dispose()//销毁
@@ -108,7 +156,7 @@ export default {
         confirmAmount: 2,
         income: 3
       }
-      getAction(this.url.list,{type:typeEnum[this.activeIndex]}).then(res =>{
+      getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode}).then(res => {
         if (res.success) {
           let dataSource = res.result
           this.initColumns(res.result)
@@ -265,6 +313,7 @@ export default {
   box-sizing: border-box;
   width: 100%;
 }
+
 .operator {
   color: #069F99;
   position: absolute;
@@ -281,25 +330,30 @@ export default {
   border: 1px solid #069F99;
   border-radius: 4px;
   cursor: pointer;
+
   &-left {
     width: 33.3%;
     text-align: center;
     border-right: 1px solid #069F99;
   }
+
   &-right {
     width: 33.3%;
     text-align: center;
   }
 }
+
 .active {
   background: #069F99;
   color: #fff;
 }
+
 .echarts-box {
   min-width: 300px;
   width: 100%;
   height: 400px;
 }
+
 .point {
   width: 3px;
   height: 3px;
@@ -307,6 +361,7 @@ export default {
   border-radius: 50%;
   background: #000;
 }
+
 .title {
   text-align: left;
   font-weight: 500;
@@ -320,6 +375,7 @@ export default {
   background: rgb(245, 245, 246);
   border: none;
 }
+
 /deep/ .ant-table-tbody tr > td {
   color: rgba(5, 5, 37, 0.8);
   border: none;