110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
<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 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="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="matrix" label="矩阵审批">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.matrix?'success':'danger'"> {{scope.row.matrix?'完备':'缺失'}}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间"/>
|
|
<el-table-column prop="oper" label="操作">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" v-perm="['admin:department:update']" link @click="goEdit(row.departmentId)">编辑</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
|
|
import {getDepartmentList} from "@/api/subsidiary";
|
|
import { useRouter } from "vue-router";
|
|
const queryInstance = ref()
|
|
const queryParams = reactive({
|
|
departmentCode: '',
|
|
departmentMark: '',
|
|
departmentName: ''
|
|
})
|
|
const router = useRouter()
|
|
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
|
|
})
|
|
}
|
|
|
|
const goEdit = (id) => {
|
|
router.push({
|
|
name: 'Mosrdeptedit',
|
|
query: {
|
|
id
|
|
}
|
|
})
|
|
}
|
|
getList()
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|