Merge pull request 'feat : 新增子公司和部门界面全部展开/收起功能' (#15) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/15

src/views/system/department/index.vue

@@ -14,13 +14,18 @@
       <el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
     </el-form-item>
   </el-form>
+  <div class="table-header-btn">
+    <el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
+  </div>
   <el-table
       :data="list"
       ref="tableTree"
+      :default-expand-all="isExpand"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       row-key="departmentId"
       :lazy="true"
       v-loading="loading"
+      @expand-change="expandChange"
       @cell-click="cellClick"
       v-tabh
   >
@@ -32,7 +37,7 @@
 </template>
 
 <script setup>
-import {Search, Refresh} from "@element-plus/icons-vue";
+import {Search, Refresh,Sort} from "@element-plus/icons-vue";
 import {getDepartmentList} from "@/api/subsidiary";
 const queryInstance = ref()
 const queryParams = reactive({
@@ -41,12 +46,27 @@ const queryParams = reactive({
   departmentName: ''
 })
 const loading = ref(true)
+const isExpand = ref(true)
 const list = ref([])
 const tableTree = ref()
 const cellClick = (row,column) => {
-  // if ("operation" !== column.property){
-  //   tableTree.value.toggleRowExpansion(row)
-  // }
+  if ("operation" !== column.property){
+    tableTree.value.toggleRowExpansion(row)
+  }
+}
+const handleExpand = () => {
+  isExpand.value = !isExpand.value
+  expandChange(list.value, isExpand)
+  getList()
+}
+//展开收缩封装函数
+const expandChange = (data, isExpansion) => {
+  for (let i = 0; i < data.length; i++) {
+    tableTree.value.toggleRowExpansion(data[i], isExpansion);
+    if (data[i].children !== null) {
+      expandChange(data[i].children, isExpansion);
+    }
+  }
 }
 const handleReset = (instance) => {
   if (!instance) return

src/views/system/subsidiary/index.vue

@@ -14,6 +14,9 @@
       <el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
     </el-form-item>
   </el-form>
+  <div class="table-header-btn">
+    <el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
+  </div>
   <el-table
       :data="list"
       ref="tableTree"
@@ -22,6 +25,7 @@
       row-key="subCompanyId"
       :lazy="true"
       v-loading="loading"
+      @expand-change="expandChange"
       @cell-click="cellClick"
       v-tabh
   >
@@ -33,7 +37,7 @@
 </template>
 
 <script setup>
-import {Search, Refresh} from "@element-plus/icons-vue";
+import {Search, Refresh,Sort} from "@element-plus/icons-vue";
 import {getSubCompanyList} from "@/api/subsidiary";
 const queryInstance = ref()
 const queryParams = reactive({
@@ -50,6 +54,20 @@ const cellClick = (row,column) => {
     tableTree.value.toggleRowExpansion(row)
   }
 }
+const handleExpand = () => {
+  isExpand.value = !isExpand.value
+  expandChange(list.value, isExpand)
+  getList()
+}
+//展开收缩封装函数
+const expandChange = (data, isExpansion) => {
+  for (let i = 0; i < data.length; i++) {
+    tableTree.value.toggleRowExpansion(data[i], isExpansion);
+    if (data[i].children !== null) {
+      expandChange(data[i].children, isExpansion);
+    }
+  }
+}
 const handleReset = (instance) => {
   if (!instance) return
   instance.resetFields()