修改用户管理 部门改成科室
This commit is contained in:
parent
c0b99c2ba2
commit
a3f9dbea49
@ -1,23 +1,21 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
|
||||
<el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入科室名称">
|
||||
<template #prefix>
|
||||
<Icon icon="ep:search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="deptList"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
<div class="dept-list-container">
|
||||
<div
|
||||
v-for="item in filteredDeptList"
|
||||
:key="item.departmentCode"
|
||||
class="dept-item"
|
||||
:class="{ 'active': selectedDept === item.departmentCode }"
|
||||
@click="handleDeptChange(item.departmentCode)"
|
||||
>
|
||||
{{ item.departmentName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -25,39 +23,67 @@
|
||||
import { ElTree } from 'element-plus'
|
||||
import * as DeptApi from '@/api/system/dept'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
|
||||
import { DepartmentApi, DepartmentVO } from '@/api/inspect/inspectdepartment/index'
|
||||
defineOptions({ name: 'SystemUserDeptTree' })
|
||||
|
||||
const deptName = ref('')
|
||||
const deptList = ref<Tree[]>([]) // 树形结构
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const deptList = ref<DepartmentVO[]>([]) // 改为普通数组
|
||||
const selectedDept = ref('')
|
||||
|
||||
/** 获得部门树 */
|
||||
const getTree = async () => {
|
||||
const res = await DeptApi.getSimpleDeptList()
|
||||
deptList.value = []
|
||||
deptList.value.push(...handleTree(res))
|
||||
/** 获取科室列表 */
|
||||
const getList = async () => {
|
||||
const res = await DepartmentApi.getListDepartment()
|
||||
deptList.value = res
|
||||
}
|
||||
|
||||
/** 基于名字过滤 */
|
||||
const filterNode = (name: string, data: Tree) => {
|
||||
if (!name) return true
|
||||
return data.name.includes(name)
|
||||
}
|
||||
|
||||
/** 处理部门被点击 */
|
||||
const handleNodeClick = async (row: { [key: string]: any }) => {
|
||||
emits('node-click', row)
|
||||
}
|
||||
const emits = defineEmits(['node-click'])
|
||||
|
||||
/** 监听deptName */
|
||||
watch(deptName, (val) => {
|
||||
treeRef.value!.filter(val)
|
||||
/** 过滤后的科室列表 */
|
||||
const filteredDeptList = computed(() => {
|
||||
if (!deptName.value) return deptList.value
|
||||
return deptList.value.filter(item =>
|
||||
item.departmentName.includes(deptName.value)
|
||||
)
|
||||
})
|
||||
|
||||
/** 处理科室选择 */
|
||||
const handleDeptChange = (deptId: string | number) => {
|
||||
const selectedDepartment = deptList.value.find(item => item.departmentCode === deptId)
|
||||
emits('node-click', selectedDepartment)
|
||||
}
|
||||
|
||||
const emits = defineEmits(['node-click'])
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await getTree()
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dept-list-container {
|
||||
height: calc(100vh - 180px); // 适当调整高度
|
||||
overflow-y: auto;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dept-item {
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e6f0fc;
|
||||
color: #2d6dcc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,15 +14,15 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
v-model="formData.deptId"
|
||||
:data="deptList"
|
||||
:props="defaultProps"
|
||||
check-strictly
|
||||
node-key="id"
|
||||
placeholder="请选择归属部门"
|
||||
/>
|
||||
<el-form-item label="归属科室" prop="deptId">
|
||||
<el-select v-model="formData.deptId" placeholder="请选择归属科室">
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.departmentName"
|
||||
:label="item.departmentName"
|
||||
:value="item.departmentCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -68,7 +68,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="formData.postIds" multiple placeholder="请选择">
|
||||
<el-option
|
||||
@ -79,7 +79,7 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
@ -103,6 +103,7 @@ import * as PostApi from '@/api/system/post'
|
||||
import * as DeptApi from '@/api/system/dept'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { FormRules } from 'element-plus'
|
||||
import { DepartmentApi, DepartmentVO } from '@/api/inspect/inspectdepartment/index'
|
||||
|
||||
defineOptions({ name: 'SystemUserForm' })
|
||||
|
||||
@ -147,7 +148,7 @@ const formRules = reactive<FormRules>({
|
||||
]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const deptList = ref<Tree[]>([]) // 树形结构
|
||||
const deptList = ref<DepartmentVO[]>([]) // 树形结构
|
||||
const postList = ref([] as PostApi.PostVO[]) // 岗位列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
@ -165,10 +166,11 @@ const open = async (type: string, id?: number) => {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
// 加载部门树
|
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
// 加载科室
|
||||
// deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
deptList.value = await DepartmentApi.getListDepartment()
|
||||
// 加载岗位列表
|
||||
postList.value = await PostApi.getSimplePostList()
|
||||
// postList.value = await PostApi.getSimplePostList()
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
|
||||
<!-- <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
|
||||
<doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
|
||||
<doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
|
||||
<doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" /> -->
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧部门树 -->
|
||||
@ -74,14 +74,14 @@
|
||||
>
|
||||
<Icon icon="ep:plus" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
<!-- <el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="handleImport"
|
||||
v-hasPermi="['system:user:import']"
|
||||
>
|
||||
<Icon icon="ep:upload" /> 导入
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@ -110,7 +110,7 @@
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="部门"
|
||||
label="科室"
|
||||
align="center"
|
||||
key="deptName"
|
||||
prop="deptName"
|
||||
@ -251,12 +251,14 @@ const handleQuery = () => {
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
//重置时候清除选择的科室
|
||||
queryParams.deptId = undefined
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 处理部门被点击 */
|
||||
const handleDeptNodeClick = async (row) => {
|
||||
queryParams.deptId = row.id
|
||||
queryParams.deptId = row.departmentCode
|
||||
await getList()
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user