详情页页面修改

src/views/kpi/report/detail.vue

@@ -7,11 +7,9 @@
       <div>等级分布详情</div>
     </div>
     <div class="detail_content">
-        <el-cascader
+        <el-button
-          :options="depList"
+          @click="handleChange"
-          @change="handleChange"
+          style="margin-bottom:20px">{{selectDepName}}<i class="el-icon-arrow-down"></i></el-button>
-          style="margin-bottom:20px"
-          v-model="defaultOpt"></el-cascader>
       <el-table :data="tableData"
               border
               :header-cell-style="{ background:'#F5F7FA'}"
@@ -23,29 +21,46 @@
         <el-table-column prop="scoreLevel" label="实际分布"></el-table-column>
     </el-table>
     </div>
+    <dialog-depart
+      v-if="showDialogDepart"
+      :isShow.sync='showDialogDepart'
+      :showDataList.sync='showData'
+      :len.sync="len"
+      :isSignle.sync="isSignle"
+    />
    </div>
 </template>
 
 <script>
 import {getChartDetail, getDepList} from '@/api/report'
+import dialogDepart from '@/components/getDepart'
+
 export default {
+  components: {
+    dialogDepart
+  },
   data () {
     return {
       // 表格数据
       tableData: [],
-      // 部门数据列表
+      // 当前选中部门
-      depList: [{
+      selectDepName: '全部',
-        value: '',
+      // 当前选中部门id
-        label: '全部'
+      selectDepId: '',
-      }],
+
+      showDialogDepart: false,
       //
-      defaultOpt: ['']
+      showData: {},
+      //
+      len: 1,
+      //
+      isSignle: true
     }
   },
-  computed: {},
+  computed: {
+  },
   beforeMount () {},
   mounted () {
-    this.handleDepListReq()
     this.handleDetailReq()
   },
   methods: {
@@ -55,7 +70,7 @@ export default {
     },
     // 多选框转中处理
     handleChange (val) {
-      this.handleDetailReq(val[1])
+      this.showDialogDepart = true
     },
     // 请求详情页面信息
     async handleDetailReq (depId) {
@@ -64,38 +79,23 @@ export default {
         departmentId: depId,
         flowProcess: this.$route.query.flowProcess,
         startId: this.$route.query.startId,
-        pageSize: 20
+        pageSize: 999
       }
       let result = await getChartDetail(params)
       this.tableData = result.data.list
-    },
-    // 请求部门信息
-    async handleDepListReq (handleNode) {
-      let params = {
-        type: 0
-      }
-      let result = await getDepList(params)
-      this.depList = this.depList.concat(this.handleDepResult(result.data))
-      console.log(this.depList)
-    },
-    // 递归生成可用数组
-    handleDepResult (list) {
-      return Array.from(list).map(item => {
-        let resItem = {
-          value: item.departmentId,
-          label: item.departmentName
-        }
-        // 如果有下一级部门则递归调用
-        if (item.list && item.list.length > 0) {
-          let children = this.handleDepResult(item.list)
-          resItem['children'] = children
-        }
-        return resItem
-      })
     }
   },
   watch: {
-
+    showDialogDepart (newV, oldV) {
+      console.log(this.showData)
+      if (!newV && oldV) {
+        console.log(this.showData.list[0])
+        this.selectDepName = this.showData.list[0].departmentName
+        console.log(this.selectDepName)
+        this.selectDepId = this.showData.list[0].departmentId
+        this.handleDetailReq(this.selectDepId)
+      }
+    }
   }
 
 }
@@ -127,4 +127,7 @@ export default {
   padding: 40px 20px;
   border:solid 1px #b4b4b4;
 }
+.el-icon-arrow-down{
+  margin-left: 20px;
+}
 </style>