158 lines
5.8 KiB
TypeScript
158 lines
5.8 KiB
TypeScript
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>
|
|
)
|
|
}
|
|
</>
|
|
);
|
|
|
|
|
|
}
|