lin
This commit is contained in:
parent
2f31b1db29
commit
28aea56c12
|
|
@ -1,10 +1,12 @@
|
||||||
import { Outlet } from "react-router-dom";
|
|
||||||
import MainHeader from "./MainHeader";
|
import MainHeader from "./MainHeader";
|
||||||
import { Content } from "antd/es/layout/layout";
|
import { MainProvider } from "./MainProvider";
|
||||||
export default function MainLayout() {
|
export default function MainLayout() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<MainHeader />
|
<MainProvider>
|
||||||
|
<MainHeader />
|
||||||
|
</MainProvider>
|
||||||
</>
|
</>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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<React.SetStateAction<string>>;
|
||||||
|
formValue?: {[key: string]: any};
|
||||||
|
setFormValue: React.Dispatch<React.SetStateAction<{[key: string]: any}>>;
|
||||||
|
form: FormInstance; // 新增表单实例
|
||||||
|
visible: boolean;
|
||||||
|
setVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
editingRecord?: StaffDto | null;
|
||||||
|
setEditingRecord: React.Dispatch<React.SetStateAction<StaffDto | null>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MainContext = createContext<MainContextType | null>(null);
|
||||||
|
interface MainProviderProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MainProvider({ children }: MainProviderProps) {
|
||||||
|
const [searchValue, setSearchValue] = useState<string>("");
|
||||||
|
const [formValue, setFormValue] = useState<{[key: string]: any}>({});
|
||||||
|
const [form] = Form.useForm(); // 添加AntD表单实例
|
||||||
|
const [visible, setVisible] = useState<boolean>(false);
|
||||||
|
const [editingRecord, setEditingRecord] = useState<StaffDto | null>(null);
|
||||||
|
return (
|
||||||
|
<MainContext.Provider
|
||||||
|
value={{
|
||||||
|
searchValue,
|
||||||
|
setSearchValue,
|
||||||
|
formValue,
|
||||||
|
setFormValue,
|
||||||
|
form, // 暴露表单实例
|
||||||
|
visible,
|
||||||
|
setVisible,
|
||||||
|
editingRecord,
|
||||||
|
setEditingRecord
|
||||||
|
}}>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
onValuesChange={(changed, all) => setFormValue(all)}
|
||||||
|
initialValues={formValue}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Form>
|
||||||
|
</MainContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export const useMainContext = () => {
|
||||||
|
const context = useContext(MainContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useMainContext must be used within MainProvider");
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
@ -1,177 +1,38 @@
|
||||||
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
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, trainSituationDetailSelect } from "@nice/common";
|
||||||
import { useCallback, 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";
|
import _ from "lodash";
|
||||||
|
import { useMainContext } from "../layout/MainProvider";
|
||||||
|
import StaffTable from "./stafftable/page";
|
||||||
|
import StaffModal from "./staffmodal/page";
|
||||||
|
|
||||||
export default function StaffMessage() {
|
export default function StaffMessage() {
|
||||||
const initialValues = {
|
const {form, formValue, setFormValue, setVisible, setSearchValue} = useMainContext();
|
||||||
username: "",
|
useEffect(()=>{
|
||||||
deptId: "",
|
setFormValue(
|
||||||
absent: "是",
|
{
|
||||||
position: "",
|
username: "",
|
||||||
trainSituation: [{"": ""}],
|
deptId: "",
|
||||||
};
|
absent: false,
|
||||||
const { create, update } = useStaff();
|
position: "",
|
||||||
const [searchName, setSearchName] = useState("");
|
trainSituations: "",
|
||||||
const { data: staffs, isLoading } = api.staff.findMany.useQuery({
|
|
||||||
where: {
|
|
||||||
username: {
|
|
||||||
contains: searchName
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
)
|
||||||
console.log(staffs);
|
},[])
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [visible, setVisible] = useState(false);
|
|
||||||
const [editingRecord, setEditingRecord] = useState<StaffDto | null>(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) => (
|
|
||||||
<Select
|
|
||||||
// defaultValue={record.absent ? "是" : "否"}
|
|
||||||
style={{ width: 120 }}
|
|
||||||
onChange={async (value) => {
|
|
||||||
try {
|
|
||||||
await update.mutateAsync({
|
|
||||||
where: { id: record.id },
|
|
||||||
data: { absent: value }
|
|
||||||
});
|
|
||||||
toast.success("状态更新成功");
|
|
||||||
} catch (error) {
|
|
||||||
toast.error("状态更新失败");
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Select.Option value="是">是</Select.Option>
|
|
||||||
<Select.Option value="否">否</Select.Option>
|
|
||||||
</Select>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "应时",
|
|
||||||
dataIndex: "time",
|
|
||||||
key: "time",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
key: "action",
|
|
||||||
render: (_, record) => (
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
key={record.id}
|
|
||||||
onClick={() => handleEdit(record)}>编辑</Button>
|
|
||||||
),
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleNew = () => {
|
const handleNew = () => {
|
||||||
form.setFieldsValue(initialValues);
|
form.setFieldsValue(formValue);
|
||||||
setVisible(true);
|
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(
|
const handleSearch = useCallback(
|
||||||
_.debounce((value: string) => {
|
_.debounce((value: string) => {
|
||||||
setSearchName(value);
|
setSearchValue(value);
|
||||||
}, 500),
|
}, 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">
|
||||||
<Form>
|
<Form>
|
||||||
|
|
@ -196,122 +57,8 @@ export default function StaffMessage() {
|
||||||
新建人员
|
新建人员
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{/* 表格容器增加flex布局 */}
|
<StaffTable></StaffTable>
|
||||||
{isLoading ? (
|
<StaffModal></StaffModal>
|
||||||
<div className="flex justify-center mt-4">
|
|
||||||
<div className="animate-spin rounded-full h-10 w-10 border-4"></div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex-1 min-h-[calc(100vh-200px)]">
|
|
||||||
<Table
|
|
||||||
key={"username"}
|
|
||||||
columns={colnums}
|
|
||||||
dataSource={staffs}
|
|
||||||
className=" backdrop-blur-sm border-2
|
|
||||||
[&_.ant-table-tbody>tr>td]:!text-lg
|
|
||||||
[&_.ant-table-tbody>tr>td]:!py-5
|
|
||||||
[&_.ant-table-thead>tr>th]:!text-lg
|
|
||||||
[&_.ant-table-thead>tr>th]:!py-5
|
|
||||||
h-full"
|
|
||||||
tableLayout="fixed"
|
|
||||||
pagination={{
|
|
||||||
position: ["bottomCenter"],
|
|
||||||
pageSize: 12,
|
|
||||||
}}
|
|
||||||
// onRow={(record) => ({
|
|
||||||
// className: "hover:bg-gray-800/50 transition-colors even:bg-gray-800/50 hover:shadow-lg hover:shadow-blue-500/20",
|
|
||||||
// })}
|
|
||||||
>
|
|
||||||
<thead className="">
|
|
||||||
<tr>
|
|
||||||
{colnums.map((column) => (
|
|
||||||
<th
|
|
||||||
key={column.key}
|
|
||||||
className="px-4 border-b-2" // 简化样式
|
|
||||||
>
|
|
||||||
{column.title}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody> {/* 移除原有text-gray-300 */}
|
|
||||||
{staffs?.map((record) => (
|
|
||||||
<tr
|
|
||||||
key={record.id}
|
|
||||||
className="border-b border-blue-400/10"
|
|
||||||
>
|
|
||||||
{colnums.map((column) => (
|
|
||||||
<td
|
|
||||||
key={column.key}
|
|
||||||
className="px-4 border" // 简化样式
|
|
||||||
>
|
|
||||||
{column.render?.(record[column.dataIndex], record) || record[column.dataIndex]}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 模态框样式更新 */}
|
|
||||||
<Modal
|
|
||||||
title="编辑员工信息"
|
|
||||||
visible={visible}
|
|
||||||
onOk={handleOk}
|
|
||||||
onCancel={handleCancel}
|
|
||||||
>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
initialValues={initialValues}
|
|
||||||
>
|
|
||||||
<Form.Item
|
|
||||||
name={"username"}
|
|
||||||
label="姓名"
|
|
||||||
// labelClassName="text-gray-300"
|
|
||||||
>
|
|
||||||
<Input className="rounded-lg" />
|
|
||||||
</Form.Item>
|
|
||||||
<Form.Item
|
|
||||||
name={"deptId"}
|
|
||||||
label="部门"
|
|
||||||
// labelClassName="text-gray-300"
|
|
||||||
>
|
|
||||||
<Input className=" rounded-lg" />
|
|
||||||
</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>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
{/* 模态框样式更新 */}
|
||||||
|
<Modal
|
||||||
|
title="编辑员工信息"
|
||||||
|
visible={visible}
|
||||||
|
onOk={handleOk}
|
||||||
|
onCancel={handleCancel}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
initialValues={formValue}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
name={"username"}
|
||||||
|
label="姓名"
|
||||||
|
// labelClassName="text-gray-300"
|
||||||
|
>
|
||||||
|
<Input className="rounded-lg" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name={"deptId"}
|
||||||
|
label="部门"
|
||||||
|
// labelClassName="text-gray-300"
|
||||||
|
>
|
||||||
|
<Input className=" rounded-lg" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name={"absent"}
|
||||||
|
label="在位"
|
||||||
|
>
|
||||||
|
<Select className="rounded-lg" >
|
||||||
|
<Select.Option value={true}>否</Select.Option>
|
||||||
|
<Select.Option value={false}>是</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</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>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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) => (
|
||||||
|
<Select
|
||||||
|
// defaultValue={record.absent ? "是" : "否"}
|
||||||
|
style={{ width: 120 }}
|
||||||
|
onChange={async (value) => {
|
||||||
|
try {
|
||||||
|
await update.mutateAsync({
|
||||||
|
where: { id: record.id },
|
||||||
|
data: { absent: value }
|
||||||
|
});
|
||||||
|
toast.success("状态更新成功");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("状态更新失败");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Select.Option value="是">是</Select.Option>
|
||||||
|
<Select.Option value="否">否</Select.Option>
|
||||||
|
</Select>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "应时",
|
||||||
|
dataIndex: "trainSituation",
|
||||||
|
key: "trainSituation",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
key: "action",
|
||||||
|
render: (_, record) => (
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
key={record.id}
|
||||||
|
onClick={() => handleEdit(record)}>编辑</Button>
|
||||||
|
),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
useEffect(() => {
|
||||||
|
if (editingRecord) {
|
||||||
|
form.setFieldsValue(editingRecord);
|
||||||
|
console.log(editingRecord);
|
||||||
|
}
|
||||||
|
}, [editingRecord]);
|
||||||
|
const handleEdit = (record) => {
|
||||||
|
setEditingRecord(record);
|
||||||
|
form.setFieldsValue(editingRecord);
|
||||||
|
setVisible(true);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
isLoading ? (<div>加载中...</div>) :
|
||||||
|
(
|
||||||
|
<Table
|
||||||
|
key={"username"}
|
||||||
|
columns={colnums}
|
||||||
|
dataSource={staffs}
|
||||||
|
className="table-auto w-full border-collapse border border-gray-300"
|
||||||
|
tableLayout="fixed"
|
||||||
|
pagination={{
|
||||||
|
position: ["bottomCenter"],
|
||||||
|
className: "flex justify-center mt-4",
|
||||||
|
pageSize: 12,
|
||||||
|
|
||||||
|
}}
|
||||||
|
onRow={(record) => ({
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<thead className="bg-gray-200">
|
||||||
|
<tr>
|
||||||
|
{colnums.map((column) => (
|
||||||
|
<th
|
||||||
|
key={column.key}
|
||||||
|
className="px-4 py-2 border border-gray-300 text-center font-bold"
|
||||||
|
>
|
||||||
|
{column.title}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{staffs?.map((record) => (
|
||||||
|
<tr
|
||||||
|
key={record.id}
|
||||||
|
className="border border-gray-300"
|
||||||
|
>
|
||||||
|
{colnums.map((column) => (
|
||||||
|
<td
|
||||||
|
key={column.key}
|
||||||
|
className="px-4 py-2 border border-gray-300 text-center"
|
||||||
|
>
|
||||||
|
{column.render?.(record[column.dataIndex], record) || record[column.dataIndex]}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue