465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
<template>
|
|
<div class="organizations-container">
|
|
<div class="page-header">
|
|
<h1>组织管理</h1>
|
|
<el-button type="primary" @click="handleAdd">
|
|
<el-icon><Plus /></el-icon>
|
|
新增组织
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 搜索栏 -->
|
|
<el-card class="search-card">
|
|
<el-form :model="searchForm" inline>
|
|
<el-form-item label="组织名称">
|
|
<el-input
|
|
v-model="searchForm.orgname"
|
|
placeholder="请输入组织名称"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="组织类型">
|
|
<el-select v-model="searchForm.orgtype" placeholder="请选择组织类型" clearable>
|
|
<el-option label="公司" value="1" />
|
|
<el-option label="部门" value="2" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">
|
|
<el-icon><Search /></el-icon>
|
|
搜索
|
|
</el-button>
|
|
<el-button @click="handleReset">
|
|
<el-icon><Refresh /></el-icon>
|
|
重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- 数据表格 -->
|
|
<el-card class="table-card">
|
|
<div class="table-header">
|
|
<div class="table-actions">
|
|
<el-button type="success" @click="expandAll">
|
|
<el-icon><ArrowDown /></el-icon>
|
|
展开全部
|
|
</el-button>
|
|
<el-button @click="collapseAll">
|
|
<el-icon><ArrowUp /></el-icon>
|
|
收起全部
|
|
</el-button>
|
|
</div>
|
|
<div class="table-info">
|
|
共 {{ total }} 条记录
|
|
</div>
|
|
</div>
|
|
|
|
<el-table
|
|
ref="tableRef"
|
|
v-loading="loading"
|
|
:data="tableData"
|
|
row-key="id"
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
stripe
|
|
border
|
|
>
|
|
<el-table-column prop="orgname" label="组织名称" min-width="200">
|
|
<template #default="{ row }">
|
|
<span :style="{ paddingLeft: (row.level || 0) * 20 + 'px' }">
|
|
{{ row.orgname }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="orgcode" label="组织编码" width="120" />
|
|
<el-table-column prop="orgtype" label="组织类型" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.orgtype === '1' ? 'success' : 'primary'">
|
|
{{ row.orgtype === '1' ? '公司' : '部门' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="orderno" label="排序" width="80" />
|
|
<el-table-column prop="orgdesc" label="组织描述" min-width="150" />
|
|
<el-table-column prop="createTime" label="创建时间" width="160" />
|
|
<el-table-column label="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" size="small" @click="handleEdit(row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button type="success" size="small" @click="handleAddChild(row)">
|
|
添加子组织
|
|
</el-button>
|
|
<el-button type="danger" size="small" @click="handleDelete(row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<!-- 组织表单对话框 -->
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
:title="dialogTitle"
|
|
width="600px"
|
|
@close="handleDialogClose"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="formRules"
|
|
label-width="80px"
|
|
>
|
|
<el-form-item label="上级组织" prop="parentId">
|
|
<el-tree-select
|
|
v-model="form.parentId"
|
|
:data="orgTreeOptions"
|
|
:props="treeSelectProps"
|
|
placeholder="请选择上级组织"
|
|
clearable
|
|
check-strictly
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="组织名称" prop="orgname">
|
|
<el-input v-model="form.orgname" placeholder="请输入组织名称" />
|
|
</el-form-item>
|
|
<el-form-item label="组织类型" prop="orgtype">
|
|
<el-select v-model="form.orgtype" placeholder="请选择组织类型">
|
|
<el-option label="公司" value="1" />
|
|
<el-option label="部门" value="2" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="排序" prop="orderno">
|
|
<el-input-number v-model="form.orderno" :min="0" :max="9999" />
|
|
</el-form-item>
|
|
<el-form-item label="组织描述" prop="orgdesc">
|
|
<el-input
|
|
v-model="form.orgdesc"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入组织描述"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Plus, Search, Refresh, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
|
|
import { getOrganizationTree, createOrganization, updateOrganization, deleteOrganization } from '@/api/organization'
|
|
import { arrayToTree } from '@/utils'
|
|
|
|
// 响应式数据
|
|
const loading = ref(false)
|
|
const submitLoading = ref(false)
|
|
const dialogVisible = ref(false)
|
|
const isEdit = ref(false)
|
|
const isAddChild = ref(false)
|
|
const tableData = ref([])
|
|
const orgTreeOptions = ref([])
|
|
const total = ref(0)
|
|
const formRef = ref()
|
|
const tableRef = ref()
|
|
const parentOrg = ref(null)
|
|
|
|
// 搜索表单
|
|
const searchForm = reactive({
|
|
orgname: '',
|
|
orgtype: ''
|
|
})
|
|
|
|
// 表单数据
|
|
const form = reactive({
|
|
id: '',
|
|
parentId: '',
|
|
orgname: '',
|
|
orgtype: '2',
|
|
orderno: 0,
|
|
orgdesc: ''
|
|
})
|
|
|
|
// 表单验证规则
|
|
const formRules = {
|
|
orgname: [
|
|
{ required: true, message: '请输入组织名称', trigger: 'blur' },
|
|
{ min: 2, max: 50, message: '组织名称长度在 2 到 50 个字符', trigger: 'blur' }
|
|
],
|
|
orgtype: [
|
|
{ required: true, message: '请选择组织类型', trigger: 'change' }
|
|
],
|
|
orderno: [
|
|
{ required: true, message: '请输入排序', trigger: 'blur' }
|
|
]
|
|
}
|
|
|
|
// 树形选择器配置
|
|
const treeSelectProps = {
|
|
value: 'id',
|
|
label: 'orgname',
|
|
children: 'children'
|
|
}
|
|
|
|
// 计算属性
|
|
const dialogTitle = computed(() => {
|
|
if (isAddChild.value) {
|
|
return `添加子组织 - ${parentOrg.value?.orgname}`
|
|
}
|
|
return isEdit.value ? '编辑组织' : '新增组织'
|
|
})
|
|
|
|
// 加载组织树
|
|
const loadOrganizations = async () => {
|
|
loading.value = true
|
|
try {
|
|
const response = await getOrganizationTree()
|
|
if (response.success) {
|
|
const allOrgs = response.data || []
|
|
|
|
// 过滤搜索条件
|
|
let filteredOrgs = allOrgs
|
|
if (searchForm.orgname) {
|
|
filteredOrgs = filteredOrgs.filter(org =>
|
|
org.orgname.includes(searchForm.orgname)
|
|
)
|
|
}
|
|
if (searchForm.orgtype) {
|
|
filteredOrgs = filteredOrgs.filter(org =>
|
|
org.orgtype === searchForm.orgtype
|
|
)
|
|
}
|
|
|
|
tableData.value = arrayToTree(filteredOrgs, 'id', 'parentid')
|
|
orgTreeOptions.value = arrayToTree(allOrgs, 'id', 'parentid')
|
|
total.value = allOrgs.length
|
|
}
|
|
} catch (error) {
|
|
console.error('加载组织列表失败:', error)
|
|
ElMessage.error('加载组织列表失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 搜索
|
|
const handleSearch = () => {
|
|
loadOrganizations()
|
|
}
|
|
|
|
// 重置搜索
|
|
const handleReset = () => {
|
|
Object.assign(searchForm, {
|
|
orgname: '',
|
|
orgtype: ''
|
|
})
|
|
loadOrganizations()
|
|
}
|
|
|
|
// 新增组织
|
|
const handleAdd = () => {
|
|
isEdit.value = false
|
|
isAddChild.value = false
|
|
parentOrg.value = null
|
|
dialogVisible.value = true
|
|
resetForm()
|
|
}
|
|
|
|
// 添加子组织
|
|
const handleAddChild = (row) => {
|
|
isEdit.value = false
|
|
isAddChild.value = true
|
|
parentOrg.value = row
|
|
dialogVisible.value = true
|
|
resetForm()
|
|
form.parentId = row.id
|
|
}
|
|
|
|
// 编辑组织
|
|
const handleEdit = (row) => {
|
|
isEdit.value = true
|
|
isAddChild.value = false
|
|
parentOrg.value = null
|
|
dialogVisible.value = true
|
|
Object.assign(form, {
|
|
...row,
|
|
parentId: row.parentid || ''
|
|
})
|
|
}
|
|
|
|
// 删除组织
|
|
const handleDelete = async (row) => {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`确定要删除组织 "${row.orgname}" 吗？删除后其子组织也将被删除！`,
|
|
'确认删除',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
)
|
|
|
|
const response = await deleteOrganization(row.id)
|
|
if (response.success) {
|
|
ElMessage.success('删除成功')
|
|
loadOrganizations()
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('删除组织失败:', error)
|
|
ElMessage.error('删除组织失败')
|
|
}
|
|
}
|
|
}
|
|
|
|
// 展开全部
|
|
const expandAll = () => {
|
|
if (tableRef.value) {
|
|
const expandRows = (data) => {
|
|
data.forEach(row => {
|
|
tableRef.value.toggleRowExpansion(row, true)
|
|
if (row.children && row.children.length > 0) {
|
|
expandRows(row.children)
|
|
}
|
|
})
|
|
}
|
|
expandRows(tableData.value)
|
|
}
|
|
}
|
|
|
|
// 收起全部
|
|
const collapseAll = () => {
|
|
if (tableRef.value) {
|
|
const collapseRows = (data) => {
|
|
data.forEach(row => {
|
|
tableRef.value.toggleRowExpansion(row, false)
|
|
if (row.children && row.children.length > 0) {
|
|
collapseRows(row.children)
|
|
}
|
|
})
|
|
}
|
|
collapseRows(tableData.value)
|
|
}
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
|
|
try {
|
|
const valid = await formRef.value.validate()
|
|
if (!valid) return
|
|
|
|
submitLoading.value = true
|
|
|
|
const submitData = {
|
|
...form,
|
|
parentid: form.parentId || null
|
|
}
|
|
delete submitData.parentId
|
|
|
|
let response
|
|
if (isEdit.value) {
|
|
response = await updateOrganization(form.id, submitData)
|
|
} else {
|
|
response = await createOrganization(submitData)
|
|
}
|
|
|
|
if (response.success) {
|
|
ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
|
|
dialogVisible.value = false
|
|
loadOrganizations()
|
|
}
|
|
} catch (error) {
|
|
console.error('提交失败:', error)
|
|
ElMessage.error('提交失败')
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 对话框关闭
|
|
const handleDialogClose = () => {
|
|
resetForm()
|
|
}
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
Object.assign(form, {
|
|
id: '',
|
|
parentId: '',
|
|
orgname: '',
|
|
orgtype: '2',
|
|
orderno: 0,
|
|
orgdesc: ''
|
|
})
|
|
if (formRef.value) {
|
|
formRef.value.clearValidate()
|
|
}
|
|
}
|
|
|
|
// 组件挂载时加载数据
|
|
onMounted(() => {
|
|
loadOrganizations()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.organizations-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
h1 {
|
|
color: #333;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.search-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.table-card {
|
|
.table-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.table-info {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-table) {
|
|
.el-table__row {
|
|
.el-table__indent {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style> |