89 lines
2.8 KiB
Vue
89 lines
2.8 KiB
Vue
<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 color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
|
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="table-header-btn">
|
|
<el-button color="#DED0B2" @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>
|