<template>
|
<div class="department-management">
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<span>部门管理</span>
|
<el-button type="primary" :icon="Plus" @click="handleAdd">新增部门</el-button>
|
</div>
|
</template>
|
|
<el-table
|
:data="tableData"
|
v-loading="loading"
|
border
|
stripe
|
row-key="id"
|
default-expand-all
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
>
|
<el-table-column prop="deptCode" label="部门编码" width="150" />
|
<el-table-column prop="deptName" label="部门名称" width="200" />
|
<el-table-column prop="parentCode" label="父级编码" width="150" />
|
<el-table-column prop="sortOrder" label="排序" width="80" />
|
<el-table-column prop="description" label="描述" />
|
<el-table-column prop="status" label="状态" width="80">
|
<template #default="{ row }">
|
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
|
{{ row.status === 1 ? '启用' : '禁用' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="180">
|
<template #default="{ row }">
|
<el-button type="primary" link :icon="Edit" @click="handleEdit(row)">编辑</el-button>
|
<el-button type="danger" link :icon="Delete" @click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
width="500px"
|
@close="handleDialogClose"
|
>
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="部门编码" prop="deptCode">
|
<el-input v-model="form.deptCode" placeholder="请输入部门编码" />
|
</el-form-item>
|
<el-form-item label="部门名称" prop="deptName">
|
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
|
</el-form-item>
|
<el-form-item label="父级部门" prop="parentCode">
|
<el-select v-model="form.parentCode" placeholder="请选择父级部门" style="width: 100%">
|
<el-option label="顶级部门" value="0" />
|
<el-option
|
v-for="dept in flatDepartmentList"
|
:key="dept.deptCode"
|
:label="dept.deptName"
|
:value="dept.deptCode"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="排序" prop="sortOrder">
|
<el-input-number v-model="form.sortOrder" :min="0" />
|
</el-form-item>
|
<el-form-item label="描述" prop="description">
|
<el-input v-model="form.description" type="textarea" placeholder="请输入描述" />
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :value="1">启用</el-radio>
|
<el-radio :value="0">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
|
import { getDepartmentTree, createDepartment, updateDepartment, deleteDepartment } from '@/api/department'
|
|
const loading = ref(false)
|
const tableData = ref([])
|
const dialogVisible = ref(false)
|
const dialogTitle = ref('')
|
const formRef = ref(null)
|
|
const form = reactive({
|
id: null,
|
deptCode: '',
|
deptName: '',
|
parentCode: '0',
|
sortOrder: 0,
|
description: '',
|
status: 1
|
})
|
|
const rules = {
|
deptCode: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
|
deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
|
}
|
|
const flatDepartmentList = computed(() => {
|
const flatten = (list) => {
|
let result = []
|
list.forEach(item => {
|
result.push(item)
|
if (item.children && item.children.length > 0) {
|
result = result.concat(flatten(item.children))
|
}
|
})
|
return result
|
}
|
return flatten(tableData.value)
|
})
|
|
const buildTree = (list) => {
|
const map = {}
|
const roots = []
|
|
list.forEach(item => {
|
map[item.deptCode] = { ...item, children: [] }
|
})
|
|
list.forEach(item => {
|
const parent = map[item.parentCode]
|
if (parent) {
|
parent.children.push(map[item.deptCode])
|
} else {
|
roots.push(map[item.deptCode])
|
}
|
})
|
|
const cleanEmptyChildren = (nodes) => {
|
nodes.forEach(node => {
|
if (node.children && node.children.length === 0) {
|
delete node.children
|
} else {
|
cleanEmptyChildren(node.children)
|
}
|
})
|
}
|
|
cleanEmptyChildren(roots)
|
return roots
|
}
|
|
const fetchData = async () => {
|
loading.value = true
|
try {
|
const res = await getDepartmentTree()
|
tableData.value = buildTree(res.data)
|
} catch (error) {
|
console.error('获取部门列表失败:', error)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
const handleAdd = () => {
|
dialogTitle.value = '新增部门'
|
resetForm()
|
dialogVisible.value = true
|
}
|
|
const handleEdit = (row) => {
|
dialogTitle.value = '编辑部门'
|
resetForm()
|
Object.assign(form, row)
|
dialogVisible.value = true
|
}
|
|
const handleDelete = async (row) => {
|
try {
|
await ElMessageBox.confirm('确定要删除该部门吗？', '提示', {
|
type: 'warning'
|
})
|
await deleteDepartment(row.id)
|
ElMessage.success('删除成功')
|
fetchData()
|
} catch (error) {
|
if (error !== 'cancel') {
|
console.error('删除部门失败:', error)
|
}
|
}
|
}
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
await formRef.value.validate(async (valid) => {
|
if (valid) {
|
try {
|
if (form.id) {
|
await updateDepartment(form)
|
ElMessage.success('修改成功')
|
} else {
|
await createDepartment(form)
|
ElMessage.success('新增成功')
|
}
|
dialogVisible.value = false
|
fetchData()
|
} catch (error) {
|
console.error('保存部门失败:', error)
|
}
|
}
|
})
|
}
|
|
const handleDialogClose = () => {
|
formRef.value?.resetFields()
|
}
|
|
const resetForm = () => {
|
form.id = null
|
form.deptCode = ''
|
form.deptName = ''
|
form.parentCode = '0'
|
form.sortOrder = 0
|
form.description = ''
|
form.status = 1
|
}
|
|
onMounted(() => {
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.department-management {
|
padding: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|
