|
|
|
@ -61,7 +61,7 @@ function DepartmentsContainer() { |
|
|
|
useEffect(() => { |
|
|
|
async function fetchDepartments() { |
|
|
|
const _departments = await Admin.depts(); |
|
|
|
console.log(1111,_departments); |
|
|
|
console.log(1111, _departments); |
|
|
|
setDepartments(buildTree(_departments)); // 将组织机构列表转换为树状结构 |
|
|
|
setLoading(false); |
|
|
|
} |
|
|
|
@ -85,28 +85,28 @@ function DepartmentsContainer() { |
|
|
|
return ( |
|
|
|
<table className="w-full text-sm text-left rounded-lg min-w-[640px] border-spacing-0"> |
|
|
|
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b"> |
|
|
|
<tr> |
|
|
|
<th scope="col" className="px-6 py-3 rounded-tl-lg"> |
|
|
|
组织机构名称 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3"> |
|
|
|
排序 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3"> |
|
|
|
状态 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3"> |
|
|
|
创建时间 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3 rounded-tr-lg"> |
|
|
|
操作 |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<th scope="col" className="px-6 py-3 rounded-tl-lg"> |
|
|
|
组织机构名称 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3"> |
|
|
|
排序 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3"> |
|
|
|
状态 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3"> |
|
|
|
创建时间 |
|
|
|
</th> |
|
|
|
<th scope="col" className="px-6 py-3 rounded-tr-lg"> |
|
|
|
操作 |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
{departments.map((dept) => ( |
|
|
|
<DepartmentRow key={dept.deptId} dept={dept} /> |
|
|
|
))} |
|
|
|
{departments.map((dept) => ( |
|
|
|
<DepartmentRow key={dept.deptId} dept={dept} /> |
|
|
|
))} |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
); |
|
|
|
@ -160,11 +160,10 @@ function DepartmentRow({ dept }) { |
|
|
|
<td className="px-6 py-4 text-theme-text-secondary">{dept.orderNum}</td> |
|
|
|
<td className="px-6 py-4"> |
|
|
|
<span |
|
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${ |
|
|
|
dept.status === 0 |
|
|
|
? "bg-green-100 text-green-800" |
|
|
|
: "bg-red-100 text-red-800" |
|
|
|
}`} |
|
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${dept.status === 0 |
|
|
|
? "bg-green-100 text-green-800" |
|
|
|
: "bg-red-100 text-red-800" |
|
|
|
}`} |
|
|
|
> |
|
|
|
{dept.status === 0 ? "启用" : "停用"} |
|
|
|
</span> |
|
|
|
@ -239,71 +238,122 @@ function NewDepartmentModal({ closeModal }) { |
|
|
|
// 处理表单提交 |
|
|
|
const handleSubmit = async () => { |
|
|
|
await Admin.addDepts(formData); |
|
|
|
closeModal() |
|
|
|
window.location.reload(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 取消 |
|
|
|
const handleCancel = () => { |
|
|
|
closeModal(); |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="p-6"> |
|
|
|
<h2 className="text-lg font-bold text-theme-text-primary mb-4"> |
|
|
|
<div className="p-6 bg-white w-[20%] rounded-lg shadow-sm border border-gray-100"> |
|
|
|
<h2 className="text-xl font-semibold text-gray-800 mb-6"> |
|
|
|
添加组织机构 |
|
|
|
</h2> |
|
|
|
<div className="flex flex-col gap-y-4"> |
|
|
|
|
|
|
|
<div className="flex flex-col gap-y-5"> |
|
|
|
{/* 上级组织机构选择器 */} |
|
|
|
<div> |
|
|
|
<label className="text-sm font-medium text-theme-text-secondary block mb-2"> |
|
|
|
<div className="space-y-1"> |
|
|
|
<label className="text-sm font-medium text-gray-600 block mb-1"> |
|
|
|
上级组织机构 |
|
|
|
</label> |
|
|
|
<TreeSelect |
|
|
|
treeData={treeData} // 树状数据 |
|
|
|
value={formData.parentId} // 选中的组织机构 ID |
|
|
|
onChange={(value) => |
|
|
|
setFormData({ ...formData, parentId: value }) |
|
|
|
} |
|
|
|
treeData={treeData} |
|
|
|
value={formData.parentId} |
|
|
|
onChange={(value) => setFormData({ ...formData, parentId: value })} |
|
|
|
placeholder="请选择上级组织机构" |
|
|
|
className="w-full" |
|
|
|
dropdownStyle={{ maxHeight: 400, overflow: "auto" }} |
|
|
|
className="w-full rounded-md border-gray-300 hover:border-blue-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500" |
|
|
|
dropdownStyle={{ |
|
|
|
maxHeight: 400, |
|
|
|
overflow: "auto", |
|
|
|
borderRadius: "6px", |
|
|
|
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)" |
|
|
|
}} |
|
|
|
dropdownClassName="bg-white border border-gray-200" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 组织机构名称输入框 */} |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
placeholder="组织机构名称" |
|
|
|
value={formData.deptName} |
|
|
|
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" |
|
|
|
/> |
|
|
|
{/* 输入框组 */} |
|
|
|
<div className="space-y-5"> |
|
|
|
<div className="space-y-1"> |
|
|
|
<label className="text-sm font-medium text-gray-600 block mb-1 font-bold"> |
|
|
|
组织机构名称 |
|
|
|
</label> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
placeholder="请输入名称" |
|
|
|
value={formData.deptName} |
|
|
|
onChange={(e) => setFormData({ ...formData, deptName: e.target.value })} |
|
|
|
className="w-[100%] border border-[#D9D9D9] rounded-md hover:border-blue-400 focus:border-blue-500 pt-[5px] pb-[5px] pl-[10px] text-[14px]" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 排序输入框 */} |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
placeholder="排序" |
|
|
|
value={formData.orderNum} |
|
|
|
onChange={(e) => |
|
|
|
setFormData({ ...formData, orderNum: Number(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" |
|
|
|
/> |
|
|
|
<div className="space-y-1"> |
|
|
|
<label className="text-sm font-medium text-gray-600 block mb-1"> |
|
|
|
排序 |
|
|
|
</label> |
|
|
|
<input |
|
|
|
type="number" |
|
|
|
placeholder="请输入排序号" |
|
|
|
value={formData.orderNum} |
|
|
|
onChange={(e) => setFormData({ ...formData, orderNum: Number(e.target.value) })} |
|
|
|
className="w-[100%] border border-[#D9D9D9] rounded-md hover:border-blue-400 focus:border-blue-500 pt-[5px] pb-[5px] pl-[10px] text-[14px]" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 状态选择器 */} |
|
|
|
<select |
|
|
|
value={formData.status} |
|
|
|
onChange={(e) => |
|
|
|
setFormData({ ...formData, status: Number(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" |
|
|
|
> |
|
|
|
<option value={0}>启用</option> |
|
|
|
<option value={1}>停用</option> |
|
|
|
</select> |
|
|
|
<div className="space-y-1"> |
|
|
|
<label className="text-sm font-medium text-gray-600 block mb-1"> |
|
|
|
状态 |
|
|
|
</label> |
|
|
|
<select |
|
|
|
value={formData.status} |
|
|
|
onChange={(e) => setFormData({ ...formData, status: Number(e.target.value) })} |
|
|
|
className="w-[100%] border border-[#D9D9D9] rounded-md hover:border-blue-400 focus:border-blue-500 pt-[5px] pb-[5px] pl-[10px] text-[14px]" |
|
|
|
> |
|
|
|
<option value={0}>启用</option> |
|
|
|
<option value={1}>停用</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 保存按钮 */} |
|
|
|
<CTAButton onClick={handleSubmit}>保存</CTAButton> |
|
|
|
<div className="flex w-[100%]"> |
|
|
|
{/* 保存按钮 */} |
|
|
|
<CTAButton |
|
|
|
onClick={handleSubmit} |
|
|
|
className="w-[200px] mt-4 py-2.5 px-5 text-base font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors shadow-sm" |
|
|
|
> |
|
|
|
保存 |
|
|
|
</CTAButton> |
|
|
|
|
|
|
|
{/* 取消按钮 */} |
|
|
|
<CTAButton |
|
|
|
onClick={handleCancel} |
|
|
|
className="w-[200px] ml-[50px] mt-4 py-2.5 px-5 text-base font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors shadow-sm" |
|
|
|
> |
|
|
|
取消 |
|
|
|
</CTAButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
|
|
|
|
// 通用输入样式 (可添加到全局CSS) |
|
|
|
// .form-input { |
|
|
|
// @apply w-full px-3 py-2 border border-gray-300 rounded-md |
|
|
|
// text-gray-700 text-sm placeholder-gray-400 |
|
|
|
// focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 |
|
|
|
// transition-all; |
|
|
|
// } |
|
|
|
|
|
|
|
// 在样式文件中添加（或使用 tailwind @apply）： |
|
|
|
// .input-field { |
|
|
|
// @apply w-full px-4 py-2.5 bg-theme-settings-input-bg border border-theme-border rounded-lg |
|
|
|
// text-theme-text-primary text-sm placeholder-theme-settings-input-placeholder |
|
|
|
// focus:ring-2 focus:ring-primary-500 focus:border-transparent |
|
|
|
// transition-all outline-none; |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
function EditDepartmentModal({ dept, closeModal, onSuccess }) { |
|
|
|
@ -327,7 +377,7 @@ function EditDepartmentModal({ dept, closeModal, onSuccess }) { |
|
|
|
}, []); |
|
|
|
|
|
|
|
const handleSubmit = async () => { |
|
|
|
await Admin.updateDept(dept.deptId,formData); // 调用更新 API |
|
|
|
await Admin.updateDept(dept.deptId, formData); // 调用更新 API |
|
|
|
onSuccess(); // 通知父组件刷新数据 |
|
|
|
closeModal(); |
|
|
|
}; |
|
|
|
|
談蓝色
10 months ago