staff_data/apps/web/src/app/main/staffpage/page.tsx

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 { useEffect, useState } from "react";
import toast from "react-hot-toast";

export default function StaffMessage() {
  const initialValues = {
    username: "",
    deptId: "",
    absent: "是",
  };
  const { create, update } = useStaff();
  const [searchName, setSearchName] = useState("");
  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: "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: "操作",
      key: "action",
      render: (_, record) => (
        <Button
          type="primary"
          key={record.id}
          onClick={() => handleEdit(record)}>编辑</Button>
      ),
    }
  ];

  const handleNew = () => {
    form.setFieldsValue(initialValues);
    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();
    const orderValue = values.order ? parseFloat(values.order) : null;
    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,
              order: orderValue,
              updatedAt: new Date()
            }
          }
        );
        // console.log(result);
      } else {
        await create.mutateAsync(
          {
            data: {
              username: values.username,
              deptId: values.deptId,
              order: orderValue,
              createdAt: new Date(),
              showname: values.username,
            }
          }
        );
      }
      toast.success("保存成功");
      setVisible(false);
    } catch (error) {
      toast.error("保存失败");
      throw error;
    }
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleSearch = (e) => {
    setSearchName(e.target.value);
  };

  return (
    <div className="p-2 min-h-screen bg-gradient-to-br">
      <Form>
        <div className="p-4 h-full 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="text-2xl">XX 公司人员信息表</div>
              <div className="relative w-1/3">
                <Input
                  placeholder="输入姓名搜索"
                  onChange={handleSearch}
                  className="pl-10 w-full border"
                />
                <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 " />
              </div>
              <Button
                type="primary"
                onClick={handleNew}
                className=" font-bold py-2 px-4 rounded"
              >
                新建人员
              </Button>
            </div>
            {/* 表格容器增加flex布局 */}
            {isLoading ? (
              <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="bg-gray-900/50 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: 15
                  }}
                  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}
              className="[&_.ant-modal-content]:bg-gray-800 [&_.ant-modal-title]:text-gray-100"
            >
              <Form
                form={form}
                initialValues={initialValues}
              >
                <Form.Item
                  name={"username"}
                  label="姓名"
                // labelClassName="text-gray-300"
                >
                  <Input className="rounded-lg" />
                </Form.Item>
                <Form.Item
                  name={"order"}
                  label="序号"
                // labelClassName="text-gray-300"
                >
                  <Input className=" rounded-lg" />
                </Form.Item>
              </Form>
            </Modal>
          </div>
        </div>
      </Form>
    </div>
  );
}