|
|
@ -26,11 +26,11 @@ export default function AdminDepartments() { |
|
|
<div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2"> |
|
|
<div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2"> |
|
|
<div className="items-center flex gap-x-4"> |
|
|
<div className="items-center flex gap-x-4"> |
|
|
<p className="text-lg leading-6 font-bold text-theme-text-primary"> |
|
|
<p className="text-lg leading-6 font-bold text-theme-text-primary"> |
|
|
部门管理 |
|
|
|
|
|
|
|
|
组织机构管理 |
|
|
</p> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<p className="text-xs leading-[18px] font-base text-theme-text-secondary"> |
|
|
<p className="text-xs leading-[18px] font-base text-theme-text-secondary"> |
|
|
管理所有部门及其层级结构。删除部门将同时删除其子部门。 |
|
|
|
|
|
|
|
|
管理所有组织机构及其层级结构。删除组织机构将同时删除其子组织机构。 |
|
|
</p> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div className="w-full justify-end flex"> |
|
|
<div className="w-full justify-end flex"> |
|
|
@ -38,7 +38,7 @@ export default function AdminDepartments() { |
|
|
onClick={openModal} |
|
|
onClick={openModal} |
|
|
className="mt-3 mr-0 mb-4 md:-mb-6 z-10" |
|
|
className="mt-3 mr-0 mb-4 md:-mb-6 z-10" |
|
|
> |
|
|
> |
|
|
<FolderOpen className="h-4 w-4" weight="bold" /> 添加部门 |
|
|
|
|
|
|
|
|
<FolderOpen className="h-4 w-4" weight="bold" /> 添加组织机构 |
|
|
</CTAButton> |
|
|
</CTAButton> |
|
|
</div> |
|
|
</div> |
|
|
<div className="overflow-x-auto"> |
|
|
<div className="overflow-x-auto"> |
|
|
@ -62,7 +62,7 @@ function DepartmentsContainer() { |
|
|
async function fetchDepartments() { |
|
|
async function fetchDepartments() { |
|
|
const _departments = await Admin.depts(); |
|
|
const _departments = await Admin.depts(); |
|
|
console.log(1111,_departments); |
|
|
console.log(1111,_departments); |
|
|
setDepartments(buildTree(_departments)); // 将部门列表转换为树状结构 |
|
|
|
|
|
|
|
|
setDepartments(buildTree(_departments)); // 将组织机构列表转换为树状结构 |
|
|
setLoading(false); |
|
|
setLoading(false); |
|
|
} |
|
|
} |
|
|
fetchDepartments(); |
|
|
fetchDepartments(); |
|
|
@ -87,7 +87,7 @@ function DepartmentsContainer() { |
|
|
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b"> |
|
|
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b"> |
|
|
<tr> |
|
|
<tr> |
|
|
<th scope="col" className="px-6 py-3 rounded-tl-lg"> |
|
|
<th scope="col" className="px-6 py-3 rounded-tl-lg"> |
|
|
部门名称 |
|
|
|
|
|
|
|
|
组织机构名称 |
|
|
</th> |
|
|
</th> |
|
|
<th scope="col" className="px-6 py-3"> |
|
|
<th scope="col" className="px-6 py-3"> |
|
|
排序 |
|
|
排序 |
|
|
@ -126,10 +126,18 @@ function DepartmentRow({ dept }) { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleSuccess = () => { |
|
|
const handleSuccess = () => { |
|
|
// 刷新部门数据 |
|
|
|
|
|
|
|
|
// 刷新组织机构数据 |
|
|
window.location.reload(); // 或者调用父组件的刷新方法 |
|
|
window.location.reload(); // 或者调用父组件的刷新方法 |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleDelete = async (deptId) => { |
|
|
|
|
|
const confirmDelete = window.confirm("确定要删除该组织机构吗?"); |
|
|
|
|
|
if (confirmDelete) { |
|
|
|
|
|
await Admin.deleteDept(deptId); // 调用删除 API |
|
|
|
|
|
window.location.reload(); // 或者调用父组件的刷新方法 |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<tr className="border-b border-white/10"> |
|
|
<tr className="border-b border-white/10"> |
|
|
@ -199,32 +207,32 @@ function DepartmentRow({ dept }) { |
|
|
function NewDepartmentModal({ closeModal }) { |
|
|
function NewDepartmentModal({ closeModal }) { |
|
|
const [formData, setFormData] = useState({ |
|
|
const [formData, setFormData] = useState({ |
|
|
deptName: "", |
|
|
deptName: "", |
|
|
parentId: null, // 上级部门 ID |
|
|
|
|
|
|
|
|
parentId: null, // 上级组织机构 ID |
|
|
orderNum: 0, |
|
|
orderNum: 0, |
|
|
status: 0, |
|
|
status: 0, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const [departments, setDepartments] = useState([]); // 部门数据 |
|
|
|
|
|
|
|
|
const [departments, setDepartments] = useState([]); // 组织机构数据 |
|
|
const [treeData, setTreeData] = useState([]); // 树状结构数据 |
|
|
const [treeData, setTreeData] = useState([]); // 树状结构数据 |
|
|
|
|
|
|
|
|
// 获取部门数据并转换为树状结构 |
|
|
|
|
|
|
|
|
// 获取组织机构数据并转换为树状结构 |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
async function fetchDepartments() { |
|
|
async function fetchDepartments() { |
|
|
const _departments = await Admin.depts(); |
|
|
const _departments = await Admin.depts(); |
|
|
setDepartments(_departments); |
|
|
setDepartments(_departments); |
|
|
setTreeData(buildTree(_departments)); // 将部门数据转换为树状结构 |
|
|
|
|
|
|
|
|
setTreeData(buildTree(_departments)); // 将组织机构数据转换为树状结构 |
|
|
} |
|
|
} |
|
|
fetchDepartments(); |
|
|
fetchDepartments(); |
|
|
}, []); |
|
|
}, []); |
|
|
|
|
|
|
|
|
// 将部门数据转换为树状结构 |
|
|
|
|
|
|
|
|
// 将组织机构数据转换为树状结构 |
|
|
function buildTree(depts, parentId = 0) { |
|
|
function buildTree(depts, parentId = 0) { |
|
|
return depts |
|
|
return depts |
|
|
.filter((dept) => dept.parentId === parentId) |
|
|
.filter((dept) => dept.parentId === parentId) |
|
|
.map((dept) => ({ |
|
|
.map((dept) => ({ |
|
|
title: dept.deptName, // 显示部门名称 |
|
|
|
|
|
value: dept.deptId, // 部门 ID |
|
|
|
|
|
children: buildTree(depts, dept.deptId), // 递归查找子部门 |
|
|
|
|
|
|
|
|
title: dept.deptName, // 显示组织机构名称 |
|
|
|
|
|
value: dept.deptId, // 组织机构 ID |
|
|
|
|
|
children: buildTree(depts, dept.deptId), // 递归查找子组织机构 |
|
|
})); |
|
|
})); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -237,30 +245,30 @@ function NewDepartmentModal({ closeModal }) { |
|
|
return ( |
|
|
return ( |
|
|
<div className="p-6"> |
|
|
<div className="p-6"> |
|
|
<h2 className="text-lg font-bold text-theme-text-primary mb-4"> |
|
|
<h2 className="text-lg font-bold text-theme-text-primary mb-4"> |
|
|
添加部门 |
|
|
|
|
|
|
|
|
添加组织机构 |
|
|
</h2> |
|
|
</h2> |
|
|
<div className="flex flex-col gap-y-4"> |
|
|
<div className="flex flex-col gap-y-4"> |
|
|
{/* 上级部门选择器 */} |
|
|
|
|
|
|
|
|
{/* 上级组织机构选择器 */} |
|
|
<div> |
|
|
<div> |
|
|
<label className="text-sm font-medium text-theme-text-secondary block mb-2"> |
|
|
<label className="text-sm font-medium text-theme-text-secondary block mb-2"> |
|
|
上级部门 |
|
|
|
|
|
|
|
|
上级组织机构 |
|
|
</label> |
|
|
</label> |
|
|
<TreeSelect |
|
|
<TreeSelect |
|
|
treeData={treeData} // 树状数据 |
|
|
treeData={treeData} // 树状数据 |
|
|
value={formData.parentId} // 选中的部门 ID |
|
|
|
|
|
|
|
|
value={formData.parentId} // 选中的组织机构 ID |
|
|
onChange={(value) => |
|
|
onChange={(value) => |
|
|
setFormData({ ...formData, parentId: value }) |
|
|
setFormData({ ...formData, parentId: value }) |
|
|
} |
|
|
} |
|
|
placeholder="请选择上级部门" |
|
|
|
|
|
|
|
|
placeholder="请选择上级组织机构" |
|
|
className="w-full" |
|
|
className="w-full" |
|
|
dropdownStyle={{ maxHeight: 400, overflow: "auto" }} |
|
|
dropdownStyle={{ maxHeight: 400, overflow: "auto" }} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
{/* 部门名称输入框 */} |
|
|
|
|
|
|
|
|
{/* 组织机构名称输入框 */} |
|
|
<input |
|
|
<input |
|
|
type="text" |
|
|
type="text" |
|
|
placeholder="部门名称" |
|
|
|
|
|
|
|
|
placeholder="组织机构名称" |
|
|
value={formData.deptName} |
|
|
value={formData.deptName} |
|
|
onChange={(e) => |
|
|
onChange={(e) => |
|
|
setFormData({ ...formData, deptName: e.target.value }) |
|
|
setFormData({ ...formData, deptName: e.target.value }) |
|
|
@ -328,34 +336,34 @@ function EditDepartmentModal({ dept, closeModal, onSuccess }) { |
|
|
return depts |
|
|
return depts |
|
|
.filter((dept) => dept.parentId === parentId) |
|
|
.filter((dept) => dept.parentId === parentId) |
|
|
.map((dept) => ({ |
|
|
.map((dept) => ({ |
|
|
title: dept.deptName, // 确保 title 是部门名称 |
|
|
|
|
|
value: dept.deptId, // 部门 ID |
|
|
|
|
|
children: buildTree(depts, dept.deptId), // 递归处理子部门 |
|
|
|
|
|
|
|
|
title: dept.deptName, // 确保 title 是组织机构名称 |
|
|
|
|
|
value: dept.deptId, // 组织机构 ID |
|
|
|
|
|
children: buildTree(depts, dept.deptId), // 递归处理子组织机构 |
|
|
})); |
|
|
})); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className="p-6"> |
|
|
<div className="p-6"> |
|
|
<h2 className="text-lg font-bold text-theme-text-primary mb-4"> |
|
|
<h2 className="text-lg font-bold text-theme-text-primary mb-4"> |
|
|
编辑部门 |
|
|
|
|
|
|
|
|
编辑组织机构 |
|
|
</h2> |
|
|
</h2> |
|
|
<div className="flex flex-col gap-y-4"> |
|
|
<div className="flex flex-col gap-y-4"> |
|
|
<div> |
|
|
<div> |
|
|
<label className="text-sm font-medium text-theme-text-secondary block mb-2"> |
|
|
<label className="text-sm font-medium text-theme-text-secondary block mb-2"> |
|
|
上级部门 |
|
|
|
|
|
|
|
|
上级组织机构 |
|
|
</label> |
|
|
</label> |
|
|
<TreeSelect |
|
|
<TreeSelect |
|
|
treeData={treeData} |
|
|
treeData={treeData} |
|
|
value={formData.parentId} |
|
|
value={formData.parentId} |
|
|
onChange={(value) => setFormData({ ...formData, parentId: value })} |
|
|
onChange={(value) => setFormData({ ...formData, parentId: value })} |
|
|
placeholder="请选择上级部门" |
|
|
|
|
|
|
|
|
placeholder="请选择上级组织机构" |
|
|
className="w-full" |
|
|
className="w-full" |
|
|
dropdownStyle={{ maxHeight: 400, overflow: "auto" }} |
|
|
dropdownStyle={{ maxHeight: 400, overflow: "auto" }} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<input |
|
|
<input |
|
|
type="text" |
|
|
type="text" |
|
|
placeholder="部门名称" |
|
|
|
|
|
|
|
|
placeholder="组织机构名称" |
|
|
value={formData.deptName} |
|
|
value={formData.deptName} |
|
|
onChange={(e) => setFormData({ ...formData, deptName: e.target.value })} |
|
|
onChange={(e) => setFormData({ ...formData, deptName: e.target.value })} |
|
|
className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" |
|
|
className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" |
|
|
@ -381,7 +389,7 @@ function EditDepartmentModal({ dept, closeModal, onSuccess }) { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 将部门列表转换为树状结构 |
|
|
|
|
|
|
|
|
// 将组织机构列表转换为树状结构 |
|
|
function buildTree(departments, parentId = 0) { |
|
|
function buildTree(departments, parentId = 0) { |
|
|
return departments |
|
|
return departments |
|
|
.filter((dept) => dept.parentId === parentId) |
|
|
.filter((dept) => dept.parentId === parentId) |
|
|
|