86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
|
import {Button, Form} from "antd";
|
||
|
|
import React, {useEffect} from "react";
|
||
|
|
import {
|
||
|
|
ModalForm,
|
||
|
|
ProFormDateTimeRangePicker,
|
||
|
|
ProFormText,
|
||
|
|
ProFormTextArea
|
||
|
|
} from "@ant-design/pro-components";
|
||
|
|
import {TaskScheduleRecordForm, TaskScheduleRecordVO} from "@/components/type/TaskSchedule.d";
|
||
|
|
import {clickRecordAPI} from "@/components/service/ScheduleTask";
|
||
|
|
import dayjs, {UnitTypeShort} from "dayjs";
|
||
|
|
import {onceConsumerRead} from "@/utils/codeToReadName";
|
||
|
|
import {betweenTime} from "@/utils/timeFormatUtil";
|
||
|
|
|
||
|
|
interface ClickRecordProps {
|
||
|
|
taskId: string;
|
||
|
|
taskName: string;
|
||
|
|
onceConsume: string | undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ClickRecord: React.FC<ClickRecordProps> = ({taskId, taskName, onceConsume}) => {
|
||
|
|
const [form] = Form.useForm<TaskScheduleRecordForm>();
|
||
|
|
useEffect(() => {
|
||
|
|
let data = {
|
||
|
|
'recordTimeRange': [onceConsume ? dayjs().subtract(Number(onceConsume.split(",")[0]), onceConsume.split(",")[1] as UnitTypeShort) : dayjs(), dayjs()],
|
||
|
|
'timeDifference': onceConsumerRead(onceConsume),
|
||
|
|
};
|
||
|
|
form.setFieldsValue(data)
|
||
|
|
}, []);
|
||
|
|
return (
|
||
|
|
|
||
|
|
<ModalForm<TaskScheduleRecordForm>
|
||
|
|
title={`${taskName}打卡`}
|
||
|
|
layout="horizontal"
|
||
|
|
trigger={
|
||
|
|
<Button type="primary">
|
||
|
|
打卡记录
|
||
|
|
</Button>}
|
||
|
|
form={form}
|
||
|
|
autoFocusFirstInput
|
||
|
|
modalProps={{
|
||
|
|
// destroyOnClose: true,
|
||
|
|
onCancel: () => console.log('run'),
|
||
|
|
}}
|
||
|
|
onFinish={async (values) => {
|
||
|
|
values.taskId = taskId
|
||
|
|
if (values.recordTimeRange[0]) {
|
||
|
|
values.startDate = new Date(values.recordTimeRange[0])
|
||
|
|
}
|
||
|
|
if (values.recordTimeRange[1]) {
|
||
|
|
values.recordDate = new Date(values.recordTimeRange[1])
|
||
|
|
}
|
||
|
|
await clickRecordAPI(values);
|
||
|
|
return true
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ProFormDateTimeRangePicker name="recordTimeRange" label="记录时间"
|
||
|
|
fieldProps={{
|
||
|
|
showTime: {
|
||
|
|
format: 'HH:mm',
|
||
|
|
},
|
||
|
|
format: "YYYY-MM-DD HH:mm",
|
||
|
|
allowEmpty: [true, false],
|
||
|
|
onChange: (dates) => {
|
||
|
|
console.log({dates})
|
||
|
|
if (dates && dates[0] && dates[1]) {
|
||
|
|
form.setFieldValue("timeDifference", betweenTime(dayjs(dates[1]), dayjs(dates[0])))
|
||
|
|
} else {
|
||
|
|
form.setFieldValue("timeDifference", "")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
placeholder={['开始时间', '结束时间']}
|
||
|
|
allowClear/>
|
||
|
|
|
||
|
|
<ProFormText
|
||
|
|
width="xs"
|
||
|
|
name="timeDifference"
|
||
|
|
label="耗时"
|
||
|
|
readonly={true}
|
||
|
|
/>
|
||
|
|
<ProFormTextArea name="remarks" label="备注"/>
|
||
|
|
</ModalForm>)
|
||
|
|
}
|
||
|
|
export default ClickRecord;
|