78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
|
import { Button, Form, Input, DatePicker } from "antd";
|
|
import { useCallback, useEffect } from "react";
|
|
import _ from "lodash";
|
|
import { useMainContext } from "../layout/MainProvider";
|
|
import DailyTable from "./DailyTable";
|
|
import DailyModal from "./DailyModal";
|
|
import dayjs from "dayjs";
|
|
|
|
export default function DailyReport() {
|
|
const { form, formValue, setFormValue, setVisible, setSearchValue, editingRecord } = useMainContext();
|
|
|
|
useEffect(() => {
|
|
setFormValue({
|
|
staffId: "",
|
|
trainContentId: "",
|
|
content: "",
|
|
isPresent: true,
|
|
date: dayjs().format('YYYY-MM-DD')
|
|
});
|
|
}, []);
|
|
|
|
const handleNew = () => {
|
|
form.setFieldsValue(formValue);
|
|
setVisible(true);
|
|
};
|
|
|
|
const handleSearch = useCallback(
|
|
_.debounce((value: string) => {
|
|
setSearchValue(value);
|
|
}, 500),
|
|
[]
|
|
);
|
|
|
|
const handleDateChange = (date) => {
|
|
if (!date) return;
|
|
// 更新当前选择的日期
|
|
const newFormValue = { ...formValue, date: date.format('YYYY-MM-DD') };
|
|
setFormValue(newFormValue);
|
|
};
|
|
|
|
return (
|
|
<div className="p-2 min-h-screen bg-gradient-to-br">
|
|
<Form>
|
|
<div className="p-4 h-full flex flex-col">
|
|
<div className="max-w-full mx-auto flex-1 flex flex-col">
|
|
<div className="flex justify-between mb-4 space-x-4 items-center">
|
|
<div className="text-2xl">每日训练填报</div>
|
|
<DatePicker
|
|
defaultValue={dayjs()}
|
|
onChange={handleDateChange}
|
|
allowClear={false}
|
|
className="w-40"
|
|
/>
|
|
<div className="relative w-1/3">
|
|
<Input
|
|
placeholder="输入姓名搜索"
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
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>
|
|
<DailyTable></DailyTable>
|
|
<DailyModal></DailyModal>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
);
|
|
} |