diff --git a/apps/web/src/app/main/layout/MainLayout.tsx b/apps/web/src/app/main/layout/MainLayout.tsx index 6957b9a..d5e463f 100644 --- a/apps/web/src/app/main/layout/MainLayout.tsx +++ b/apps/web/src/app/main/layout/MainLayout.tsx @@ -1,10 +1,12 @@ -import { Outlet } from "react-router-dom"; + import MainHeader from "./MainHeader"; -import { Content } from "antd/es/layout/layout"; +import { MainProvider } from "./MainProvider"; export default function MainLayout() { return ( <> - + + + ) diff --git a/apps/web/src/app/main/layout/MainProvider.tsx b/apps/web/src/app/main/layout/MainProvider.tsx new file mode 100644 index 0000000..5b4b2a3 --- /dev/null +++ b/apps/web/src/app/main/layout/MainProvider.tsx @@ -0,0 +1,65 @@ +import { Prisma, StaffDto } from "@nice/common"; +import React, { + createContext, + ReactNode, + useContext, + useMemo, + useState, +} from "react"; +// import { useDebounce } from "use-debounce"; +import { Form, FormInstance } from 'antd'; + + +interface MainContextType { + searchValue?: string; + setSearchValue: React.Dispatch>; + formValue?: {[key: string]: any}; + setFormValue: React.Dispatch>; + form: FormInstance; // 新增表单实例 + visible: boolean; + setVisible: React.Dispatch>; + editingRecord?: StaffDto | null; + setEditingRecord: React.Dispatch>; +} + +const MainContext = createContext(null); +interface MainProviderProps { + children: ReactNode; +} + +export function MainProvider({ children }: MainProviderProps) { + const [searchValue, setSearchValue] = useState(""); + const [formValue, setFormValue] = useState<{[key: string]: any}>({}); + const [form] = Form.useForm(); // 添加AntD表单实例 + const [visible, setVisible] = useState(false); + const [editingRecord, setEditingRecord] = useState(null); + return ( + +
setFormValue(all)} + initialValues={formValue} + > + {children} +
+ + ); +} +export const useMainContext = () => { + const context = useContext(MainContext); + if (!context) { + throw new Error("useMainContext must be used within MainProvider"); + } + return context; +}; diff --git a/apps/web/src/app/main/staffpage/page.tsx b/apps/web/src/app/main/staffpage/page.tsx index 901c0d6..8137751 100644 --- a/apps/web/src/app/main/staffpage/page.tsx +++ b/apps/web/src/app/main/staffpage/page.tsx @@ -1,177 +1,38 @@ import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { api, useStaff } from "@nice/client"; import { Button, Form, Input, Modal, Select, Table } from "antd"; -import { StaffDto } from "@nice/common"; +import { StaffDto, trainSituationDetailSelect } from "@nice/common"; import { useCallback, useEffect, useState } from "react"; import toast from "react-hot-toast"; import _ from "lodash"; +import { useMainContext } from "../layout/MainProvider"; +import StaffTable from "./stafftable/page"; +import StaffModal from "./staffmodal/page"; export default function StaffMessage() { - const initialValues = { - username: "", - deptId: "", - absent: "是", - position: "", - trainSituation: [{"": ""}], - }; - const { create, update } = useStaff(); - const [searchName, setSearchName] = useState(""); - const { data: staffs, isLoading } = api.staff.findMany.useQuery({ - where: { - username: { - contains: searchName - } + const {form, formValue, setFormValue, setVisible, setSearchValue} = useMainContext(); + useEffect(()=>{ + setFormValue( + { + username: "", + deptId: "", + absent: false, + position: "", + trainSituations: "", } - }); - console.log(staffs); - const [form] = Form.useForm(); - const [visible, setVisible] = useState(false); - const [editingRecord, setEditingRecord] = useState(null); - const colnums = [ - { - title: "姓名", - dataIndex: "username", - key: "username", - }, - { - title: "部门", - dataIndex: "deptId", - key: "deptId", - }, - { - title: "职务", - dataIndex: "position", - key: "position", - }, - { - title: "在位", - dataIndex: "absent", - key: "absent", - render: (_, record) => ( - - ) - }, - { - title: "应时", - dataIndex: "time", - key: "time", - }, - { - title: "操作", - key: "action", - render: (_, record) => ( - - ), - } - ]; - + ) + },[]) const handleNew = () => { - form.setFieldsValue(initialValues); + form.setFieldsValue(formValue); setVisible(true); } - - useEffect(() => { - if (editingRecord) { - form.setFieldsValue(editingRecord); - console.log(editingRecord); - } - }, [editingRecord]); - - const handleEdit = (record) => { - setEditingRecord(record); - form.setFieldsValue(editingRecord); - setVisible(true); - }; - - const handleOk = async () => { - const values = await form.getFieldsValue(); - console.log(values.username); - try { - if (editingRecord && editingRecord.id) { - // console.log(editingRecord); - const result = await update.mutateAsync( - { - where: { - id: editingRecord.id, - }, - data : { - username: values.username, - deptId: values.deptId, - 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() - } as any - } - ); - // console.log(result); - } else { - await create.mutateAsync( - { - data: { - username: values.username, - deptId: values.deptId, - createdAt: new Date(), - showname: values.username, - } - } - ); - } - toast.success("保存成功"); - setVisible(false); - } catch (error) { - toast.error("保存失败"); - throw error; - } - }; - - const handleCancel = () => { - setVisible(false); - }; - // 添加防抖的搜索处理函数 const handleSearch = useCallback( _.debounce((value: string) => { - setSearchName(value); + setSearchValue(value); }, 500), [] ); - return (
@@ -196,122 +57,8 @@ export default function StaffMessage() { 新建人员
- {/* 表格容器增加flex布局 */} - {isLoading ? ( -
-
-
- ) : ( -
- ({ - // className: "hover:bg-gray-800/50 transition-colors even:bg-gray-800/50 hover:shadow-lg hover:shadow-blue-500/20", - // })} - > - - - {colnums.map((column) => ( - - ))} - - - {/* 移除原有text-gray-300 */} - {staffs?.map((record) => ( - - {colnums.map((column) => ( - - ))} - - ))} - -
- {column.title} -
- {column.render?.(record[column.dataIndex], record) || record[column.dataIndex]} -
-
- )} - - {/* 模态框样式更新 */} - - - - - - - - - - {(fields, { add, remove }) => ( - <> - {fields.map(({ key, name, ...restField }) => ( -
- - - - - - - -
- ))} - - - )} - - - + + diff --git a/apps/web/src/app/main/staffpage/staffmodal/page.tsx b/apps/web/src/app/main/staffpage/staffmodal/page.tsx new file mode 100644 index 0000000..6936dab --- /dev/null +++ b/apps/web/src/app/main/staffpage/staffmodal/page.tsx @@ -0,0 +1,141 @@ +import { useStaff } from "@nice/client"; +import { useMainContext } from "../../layout/MainProvider"; +import toast from "react-hot-toast"; +import { Button, Form, Input, Modal, Select } from "antd"; + +export default function StaffModal() { + + const { form, formValue, setVisible, visible, editingRecord } = useMainContext() + const { create, update } = useStaff(); + const handleOk = async () => { + const values = await form.getFieldsValue(); + console.log(values.username); + try { + if (editingRecord && editingRecord.id) { + const result = await update.mutateAsync( + { + where: { + id: editingRecord.id, + }, + data: { + username: values.username, + deptId: values.deptId, + 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 } }, + // 其他字段... + }, + })) + } : undefined, + updatedAt: new Date() + } as any + } + ); + // console.log(result); + } else { + await create.mutateAsync( + { + data: { + username: values.username, + deptId: values.deptId, + createdAt: new Date(), + showname: values.username, + absent: values.absent, + trainSituations: { + create: values.trainSituations.map((situation) => ({ + trainContent: { connect: { id: situation.trainContentId } }, + mustTrainTime: situation.mustTrainTime, + // 其他必填字段... + })) + } + } + } + ); + } + toast.success("保存成功"); + setVisible(false); + } catch (error) { + toast.error("保存失败"); + throw error; + } + }; + + const handleCancel = () => { + setVisible(false); + }; + return ( + <> + {/* 模态框样式更新 */} + +
+ + + + + + + + + + + {(fields, { add, remove }) => ( + <> + {fields.map(({ key, name, ...restField }) => ( +
+ + + + + + + +
+ ))} + + + )} + +
+ + + ) +} \ No newline at end of file diff --git a/apps/web/src/app/main/staffpage/stafftable/page.tsx b/apps/web/src/app/main/staffpage/stafftable/page.tsx new file mode 100644 index 0000000..e624090 --- /dev/null +++ b/apps/web/src/app/main/staffpage/stafftable/page.tsx @@ -0,0 +1,157 @@ +import { Button, Select, Table } from "antd" +import { StaffDto } from "@nice/common"; +import { useStaff, api } from "@nice/client"; +import { useEffect, useState } from "react"; +import toast from "react-hot-toast"; +import React from "react"; +import { useMainContext } from "../../layout/MainProvider"; + +export default function StaffTable() { + const{form, setVisible,searchValue} = useMainContext() + + const { data: staffs, isLoading } = api.staff.findMany.useQuery({ + where: { + username: { + contains: searchValue + } + } + }); + const { create, update } = useStaff(); + const {editingRecord, setEditingRecord} = useMainContext(); + const colnums = [ + { + title: "姓名", + dataIndex: "username", + key: "username", + }, + { + title: "部门", + dataIndex: "deptId", + key: "deptId", + }, + { + title: "职务", + dataIndex: "position", + key: "position", + }, + { + title: "在位", + dataIndex: "absent", + key: "absent", + render: (_, record) => ( + + ) + }, + { + title: "应时", + dataIndex: "trainSituation", + key: "trainSituation", + }, + { + title: "操作", + key: "action", + render: (_, record) => ( + + ), + } + ]; + useEffect(() => { + if (editingRecord) { + form.setFieldsValue(editingRecord); + console.log(editingRecord); + } + }, [editingRecord]); + const handleEdit = (record) => { + setEditingRecord(record); + form.setFieldsValue(editingRecord); + setVisible(true); + }; + return ( + <> + { + isLoading ? (
加载中...
) : + ( + ({ + onMouseEnter: () => { + const row = document.querySelector(`tr[data-row-key="${record.id}"]`); + if (row) { + row.classList.add("bg-gray-100"); + } + }, + onMouseLeave: () => { + const row = document.querySelector(`tr[data-row-key="${record.id}"]`); + if (row) { + row.classList.remove("bg-gray-100"); + } + }, + })} + > + + + {colnums.map((column) => ( + + ))} + + + + {staffs?.map((record) => ( + + {colnums.map((column) => ( + + ))} + + ))} + +
+ {column.title} +
+ {column.render?.(record[column.dataIndex], record) || record[column.dataIndex]} +
+ ) + } + + ); + + +}