This commit is contained in:
linfeng 2025-03-12 09:48:35 +08:00
parent 02aea6ef8b
commit 2f31b1db29
3 changed files with 90 additions and 21 deletions

View File

@ -1,8 +1,10 @@
import { Menu } from "antd"; import { Menu } from "antd";
import { useNavigate } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
export default function NavigationMenu() { export default function NavigationMenu() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
console.log(location.pathname);
// 导航菜单项配置 // 导航菜单项配置
const menuItems = [ const menuItems = [
{ key: 'home', label: '首页', path: '/' }, { key: 'home', label: '首页', path: '/' },
@ -18,7 +20,9 @@ export default function NavigationMenu() {
theme="dark" theme="dark"
mode="inline" mode="inline"
className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2" className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
defaultSelectedKeys={['home']} defaultSelectedKeys={[
menuItems.find((item) => item.path === location.pathname)?.key,
]}
> >
{menuItems.map((item) => ( {menuItems.map((item) => (
<Menu.Item <Menu.Item

View File

@ -2,14 +2,17 @@ import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { api, useStaff } from "@nice/client"; import { api, useStaff } from "@nice/client";
import { Button, Form, Input, Modal, Select, Table } from "antd"; import { Button, Form, Input, Modal, Select, Table } from "antd";
import { StaffDto } from "@nice/common"; import { StaffDto } from "@nice/common";
import { useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import _ from "lodash";
export default function StaffMessage() { export default function StaffMessage() {
const initialValues = { const initialValues = {
username: "", username: "",
deptId: "", deptId: "",
absent: "是", absent: "是",
position: "",
trainSituation: [{"": ""}],
}; };
const { create, update } = useStaff(); const { create, update } = useStaff();
const [searchName, setSearchName] = useState(""); const [searchName, setSearchName] = useState("");
@ -35,6 +38,11 @@ export default function StaffMessage() {
dataIndex: "deptId", dataIndex: "deptId",
key: "deptId", key: "deptId",
}, },
{
title: "职务",
dataIndex: "position",
key: "position",
},
{ {
title: "在位", title: "在位",
dataIndex: "absent", dataIndex: "absent",
@ -60,6 +68,11 @@ export default function StaffMessage() {
</Select> </Select>
) )
}, },
{
title: "应时",
dataIndex: "time",
key: "time",
},
{ {
title: "操作", title: "操作",
key: "action", key: "action",
@ -92,7 +105,6 @@ export default function StaffMessage() {
const handleOk = async () => { const handleOk = async () => {
const values = await form.getFieldsValue(); const values = await form.getFieldsValue();
const orderValue = values.order ? parseFloat(values.order) : null;
console.log(values.username); console.log(values.username);
try { try {
if (editingRecord && editingRecord.id) { if (editingRecord && editingRecord.id) {
@ -102,12 +114,29 @@ export default function StaffMessage() {
where: { where: {
id: editingRecord.id, id: editingRecord.id,
}, },
data: { data : {
username: values.username, username: values.username,
deptId: values.deptId, deptId: values.deptId,
order: orderValue, position: values.position,
absent: values.absent,
trainSituations: values.trainSituations ? {
upsert: values.trainSituations.map((situation) => ({
where: { id: situation.id || "" },
update: {
mustTrainTime: situation.mustTrainTime,
trainContent: { connect: { id: situation.trainContentId } },
// 其他字段...
},
create: {
trainContent: { connect: { id: situation.trainContentId } },
mustTrainTime: situation.mustTrainTime,
staffId: editingRecord.id,
// 其他必填字段...
}
}))
} : undefined,
updatedAt: new Date() updatedAt: new Date()
} } as any
} }
); );
// console.log(result); // console.log(result);
@ -117,7 +146,6 @@ export default function StaffMessage() {
data: { data: {
username: values.username, username: values.username,
deptId: values.deptId, deptId: values.deptId,
order: orderValue,
createdAt: new Date(), createdAt: new Date(),
showname: values.username, showname: values.username,
} }
@ -136,9 +164,13 @@ export default function StaffMessage() {
setVisible(false); setVisible(false);
}; };
const handleSearch = (e) => { // 添加防抖的搜索处理函数
setSearchName(e.target.value); const handleSearch = useCallback(
}; _.debounce((value: string) => {
setSearchName(value);
}, 500),
[]
);
return ( return (
<div className="p-2 min-h-screen bg-gradient-to-br"> <div className="p-2 min-h-screen bg-gradient-to-br">
@ -147,11 +179,11 @@ export default function StaffMessage() {
<div className="max-w-full mx-auto flex-1 flex flex-col"> {/* 添加flex容器 */} <div className="max-w-full mx-auto flex-1 flex flex-col"> {/* 添加flex容器 */}
{/* 头部区域保持不变... */} {/* 头部区域保持不变... */}
<div className="flex justify-between mb-4 space-x-4 items-center"> <div className="flex justify-between mb-4 space-x-4 items-center">
<div className="text-2xl">XX </div> <div className="text-2xl"></div>
<div className="relative w-1/3"> <div className="relative w-1/3">
<Input <Input
placeholder="输入姓名搜索" placeholder="输入姓名搜索"
onChange={handleSearch} onChange={(e) => handleSearch(e.target.value)}
className="pl-10 w-full border" className="pl-10 w-full border"
/> />
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 " /> <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 " />
@ -175,7 +207,7 @@ export default function StaffMessage() {
key={"username"} key={"username"}
columns={colnums} columns={colnums}
dataSource={staffs} dataSource={staffs}
className="bg-gray-900/50 backdrop-blur-sm border-2 className=" backdrop-blur-sm border-2
[&_.ant-table-tbody>tr>td]:!text-lg [&_.ant-table-tbody>tr>td]:!text-lg
[&_.ant-table-tbody>tr>td]:!py-5 [&_.ant-table-tbody>tr>td]:!py-5
[&_.ant-table-thead>tr>th]:!text-lg [&_.ant-table-thead>tr>th]:!text-lg
@ -184,11 +216,11 @@ export default function StaffMessage() {
tableLayout="fixed" tableLayout="fixed"
pagination={{ pagination={{
position: ["bottomCenter"], position: ["bottomCenter"],
pageSize: 15 pageSize: 12,
}} }}
onRow={(record) => ({ // onRow={(record) => ({
className: "hover:bg-gray-800/50 transition-colors even:bg-gray-800/50 hover:shadow-lg hover:shadow-blue-500/20", // className: "hover:bg-gray-800/50 transition-colors even:bg-gray-800/50 hover:shadow-lg hover:shadow-blue-500/20",
})} // })}
> >
<thead className=""> <thead className="">
<tr> <tr>
@ -229,7 +261,6 @@ export default function StaffMessage() {
visible={visible} visible={visible}
onOk={handleOk} onOk={handleOk}
onCancel={handleCancel} onCancel={handleCancel}
className="[&_.ant-modal-content]:bg-gray-800 [&_.ant-modal-title]:text-gray-100"
> >
<Form <Form
form={form} form={form}
@ -243,12 +274,42 @@ export default function StaffMessage() {
<Input className="rounded-lg" /> <Input className="rounded-lg" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={"order"} name={"deptId"}
label="序号" label="部门"
// labelClassName="text-gray-300" // labelClassName="text-gray-300"
> >
<Input className=" rounded-lg" /> <Input className=" rounded-lg" />
</Form.Item> </Form.Item>
<Form.List name="trainSituations">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<div key={key} className="flex space-x-2">
<Form.Item
{...restField}
name={[name, 'trainContentId']}
label="培训内容"
className="flex-1"
>
<Select placeholder="选择培训内容">
{/* 这里需要从后端获取培训内容选项 */}
</Select>
</Form.Item>
<Form.Item
{...restField}
name={[name, 'mustTrainTime']}
label="需训时长"
className="flex-1"
>
<Input type="number" />
</Form.Item>
<Button onClick={() => remove(name)}></Button>
</div>
))}
<Button onClick={() => add()}></Button>
</>
)}
</Form.List>
</Form> </Form>
</Modal> </Modal>
</div> </div>

View File

@ -51,6 +51,10 @@ export const routes: CustomRouteObject[] = [
path: "/staff", path: "/staff",
element: <StaffMessage></StaffMessage>, element: <StaffMessage></StaffMessage>,
}, },
{
path: "/day",
element: <StaffMessage></StaffMessage>,
},
], ],
}, },