feat : 新增子公司和部门界面全部展开/收起功能

src/views/system/department/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-form :model="queryParams" inline class="query-form" ref="queryInstance">
+    <el-form-item label="部门编码" prop="departmentCode">
+      <el-input v-model="queryParams.departmentCode" placeholder="请输入部门编码" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="部门标志" prop="departmentMark">
+      <el-input v-model="queryParams.departmentMark" placeholder="请输入部门标志" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="部门名称" prop="departmentName">
+      <el-input v-model="queryParams.departmentName" placeholder="请输入部门名称" clearable></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
+      <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
+  >
+    <el-table-column prop="departmentMark" label="部门标志"/>
+    <el-table-column prop="departmentCode" label="部门编码"/>
+    <el-table-column prop="departmentName" label="部门名称"/>
+    <el-table-column prop="createTime" label="创建时间"/>
+  </el-table>
+</template>
+
+<script setup>
+import {Search, Refresh,Sort} from "@element-plus/icons-vue";
+import {getDepartmentList} from "@/api/subsidiary";
+const queryInstance = ref()
+const queryParams = reactive({
+  departmentCode: '',
+  departmentMark: '',
+  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)
+  }
+}
+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()
+  getList()
+}
+const getList =  () => {
+  loading.value = true
+  getDepartmentList(queryParams).then(res => {
+    list.value = res.data
+    loading.value = false
+  })
+}
+getList()
+</script>
+
+<style scoped>
+
+</style>

src/views/system/subsidiary/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-form :model="queryParams" inline class="query-form" ref="queryInstance">
+    <el-form-item label="子公司编码" prop="companyCode">
+      <el-input v-model="queryParams.companyCode" placeholder="请输入子公司编码" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="子公司全称" prop="companyDesc">
+      <el-input v-model="queryParams.companyDesc" placeholder="请输入子公司全称" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="子公司简称" prop="companyName">
+      <el-input v-model="queryParams.companyName" placeholder="请输入子公司简称" clearable></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
+      <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="subCompanyId"
+      :lazy="true"
+      v-loading="loading"
+      @expand-change="expandChange"
+      @cell-click="cellClick"
+      v-tabh
+  >
+    <el-table-column prop="companyDesc" label="子公司全称"/>
+    <el-table-column prop="companyCode" label="子公司编码"/>
+    <el-table-column prop="companyName" label="	子公司简称"/>
+    <el-table-column prop="createTime" label="创建时间"/>
+  </el-table>
+</template>
+
+<script setup>
+import {Search, Refresh,Sort} from "@element-plus/icons-vue";
+import {getSubCompanyList} from "@/api/subsidiary";
+const queryInstance = ref()
+const queryParams = reactive({
+  companyCode: '',
+  companyDesc: '',
+  companyName: ''
+})
+const loading = ref(true)
+const list = ref([])
+const tableTree = ref()
+const isExpand = ref(true)
+const cellClick = (row,column) => {
+  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
+  instance.resetFields()
+  getList()
+}
+const getList =  () => {
+  loading.value = true
+  getSubCompanyList(queryParams).then(res => {
+    list.value = res.data
+    loading.value = false
+  })
+}
+getList()
+</script>
+
+<style scoped>
+
+</style>