add dutyinfo page
This commit is contained in:
Dawn1Ocean
@@ -1,33 +1,71 @@
|
||||
import { getDutyInfo } from '@/services/api';
|
||||
import { getDutyInfo, updateDutyInfo } from '@/services/api';
|
||||
import {
|
||||
EditableProTable,
|
||||
PageContainer,
|
||||
ProColumns,
|
||||
ProForm,
|
||||
ProFormDateTimeRangePicker,
|
||||
ProFormDateTimePicker,
|
||||
ProFormDependency,
|
||||
ProFormDigit,
|
||||
ProFormRadio,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Card, Col, Row, Space, message } from 'antd';
|
||||
import { Card, message } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Info } from './info';
|
||||
|
||||
const waitTime = (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, time);
|
||||
});
|
||||
type Shift = {
|
||||
id: React.Key;
|
||||
title: string;
|
||||
place: string;
|
||||
range: string[];
|
||||
};
|
||||
|
||||
const columns: ProColumns<Shift>[] = [
|
||||
{
|
||||
title: '值班名称',
|
||||
dataIndex: 'title',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: '值班地点',
|
||||
dataIndex: 'place',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: '值班时间',
|
||||
dataIndex: 'range',
|
||||
valueType: 'dateTimeRange',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
width: '10%',
|
||||
},
|
||||
];
|
||||
|
||||
const DutyInfo: React.FC = () => {
|
||||
const [dutyInfo, setDutyInfo] = useState<Info>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
|
||||
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => []);
|
||||
|
||||
useEffect(() => {
|
||||
getDutyInfo()
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
setDutyInfo(res.data);
|
||||
const data = res.data;
|
||||
console.log(data);
|
||||
setDutyInfo({
|
||||
dutyStatus:
|
||||
data.currentDuty === 'off' ? 'pause' : data.isNormalDuty ? 'others' : 'normal',
|
||||
inDutyCnt: data.inDutyCnt,
|
||||
otherDutyTime: data.otherDutyTime,
|
||||
offDutyReason: data.offDutyReason,
|
||||
dutyRecoverTime: data.dutyRecoverTime,
|
||||
});
|
||||
setEditableRowKeys(data.otherDutyTime.map((item) => item.id));
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -37,90 +75,122 @@ const DutyInfo: React.FC = () => {
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
// const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
|
||||
// defaultData.map((item) => item.id),
|
||||
// );
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
{contextHolder}
|
||||
<Card>
|
||||
{!loading && (
|
||||
<ProForm<Info>
|
||||
submitter={{
|
||||
render: (props, doms) => {
|
||||
return (
|
||||
<Row>
|
||||
<Col span={14} offset={4}>
|
||||
<Space>{doms}</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
},
|
||||
}}
|
||||
onFinish={async (values) => {
|
||||
await waitTime(2000);
|
||||
console.log(values);
|
||||
message.success('提交成功');
|
||||
}}
|
||||
initialValues={dutyInfo}
|
||||
>
|
||||
<ProFormRadio.Group
|
||||
style={{
|
||||
margin: 16,
|
||||
}}
|
||||
/>
|
||||
<ProFormDigit
|
||||
label="值班人数"
|
||||
name="inDutyCnt"
|
||||
placeholder="请输入值班人数"
|
||||
width="sm"
|
||||
min={0}
|
||||
max={10}
|
||||
/>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="offDutyReason"
|
||||
label="暂停值班原因"
|
||||
placeholder="请输入暂停值班的原因"
|
||||
/>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="place"
|
||||
label="其他值班地点"
|
||||
placeholder="请输入特殊值班地点"
|
||||
/>
|
||||
<ProFormText
|
||||
name="dutyRecoverTime"
|
||||
width="md"
|
||||
label="值班恢复时间"
|
||||
placeholder="请输入值班恢复的时间"
|
||||
/>
|
||||
<ProForm.Item label="值班时间" name="dataSource" trigger="onValuesChange">
|
||||
{/* <EditableProTable<DataSourceType>
|
||||
rowKey="id"
|
||||
toolBarRender={false}
|
||||
columns={columns}
|
||||
recordCreatorProps={{
|
||||
newRecordType: 'dataSource',
|
||||
position: 'top',
|
||||
record: () => ({
|
||||
id: Date.now(),
|
||||
addonBefore: 'ccccccc',
|
||||
decs: 'testdesc',
|
||||
}),
|
||||
}}
|
||||
editable={{
|
||||
type: 'multiple',
|
||||
editableKeys,
|
||||
onChange: setEditableRowKeys,
|
||||
actionRender: (row, _, dom) => {
|
||||
return [dom.delete];
|
||||
<ProForm<Info>
|
||||
submitter={{
|
||||
resetButtonProps: { style: { display: 'none' } },
|
||||
submitButtonProps: {
|
||||
style: { width: '31%' },
|
||||
},
|
||||
render: (_, doms) => {
|
||||
return <div style={{ textAlign: 'center' }}>{doms}</div>;
|
||||
},
|
||||
}}
|
||||
/> */}
|
||||
</ProForm.Item>
|
||||
<ProFormDateTimeRangePicker name="dateTimeRange" label="值班时间" />
|
||||
</ProForm>
|
||||
onFinish={updateDutyInfo}
|
||||
initialValues={dutyInfo}
|
||||
>
|
||||
<div style={{ justifyContent: 'center', display: 'flex' }}>
|
||||
<ProFormRadio.Group
|
||||
name="dutyStatus"
|
||||
label="值班状态"
|
||||
options={[
|
||||
{
|
||||
label: '正常值班',
|
||||
value: 'normal',
|
||||
},
|
||||
{
|
||||
label: '特殊值班',
|
||||
value: 'others',
|
||||
},
|
||||
{
|
||||
label: '值班暂停',
|
||||
value: 'pause',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ justifyContent: 'center', display: 'flex' }}>
|
||||
<ProFormDependency name={['dutyStatus']}>
|
||||
{({ dutyStatus }) => {
|
||||
if (dutyStatus === 'pause') {
|
||||
return (
|
||||
<div>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="offDutyReason"
|
||||
label="值班暂停原因"
|
||||
placeholder="请输入暂停值班的原因"
|
||||
/>
|
||||
<ProFormDateTimePicker
|
||||
name="dutyRecoverTime"
|
||||
width="md"
|
||||
label="值班恢复时间"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ProFormDigit
|
||||
label="当前值班人数"
|
||||
name="inDutyCnt"
|
||||
placeholder="请输入值班人数"
|
||||
width="md"
|
||||
min={0}
|
||||
max={10}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</div>
|
||||
<ProFormDependency name={['dutyStatus']}>
|
||||
{({ dutyStatus }) => {
|
||||
if (dutyStatus === 'others') {
|
||||
return (
|
||||
<div style={{ justifyContent: 'center', display: 'flex' }}>
|
||||
<ProForm.Item
|
||||
label="其他值班班次"
|
||||
name="dataSource"
|
||||
initialValue={dutyInfo?.otherDutyTime}
|
||||
trigger="onValuesChange"
|
||||
style={{ width: '80%' }}
|
||||
>
|
||||
<EditableProTable<Shift>
|
||||
rowKey="id"
|
||||
toolBarRender={false}
|
||||
columns={columns}
|
||||
recordCreatorProps={{
|
||||
newRecordType: 'dataSource',
|
||||
position: 'bottom',
|
||||
creatorButtonText: '新建一个值班班次',
|
||||
style: { width: '100%', margin: 'auto', marginTop: '2%' },
|
||||
record: () => ({
|
||||
id: Date.now(),
|
||||
title: '',
|
||||
place: '',
|
||||
range: [],
|
||||
}),
|
||||
}}
|
||||
editable={{
|
||||
type: 'multiple',
|
||||
editableKeys,
|
||||
onChange: setEditableRowKeys,
|
||||
actionRender: (row, _, dom) => {
|
||||
return [dom.delete];
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</ProForm>
|
||||
)}
|
||||
</Card>
|
||||
</PageContainer>
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
export type Shift = {
|
||||
name: string;
|
||||
id: React.Key;
|
||||
title: string;
|
||||
place: string;
|
||||
range: string[];
|
||||
};
|
||||
|
||||
export type Info = {
|
||||
export type ServerInfo = {
|
||||
isNormalDuty: boolean;
|
||||
inDutyCnt: number;
|
||||
currentDuty: string;
|
||||
place: string;
|
||||
otherDutyTime: Shift[];
|
||||
offDutyReason: string;
|
||||
dutyRecoverTime: string;
|
||||
}
|
||||
|
||||
export type Info = {
|
||||
dutyStatus: string;
|
||||
inDutyCnt: number;
|
||||
otherDutyTime: Shift[];
|
||||
offDutyReason: string;
|
||||
dutyRecoverTime: string;
|
||||
|
||||
Reference in New Issue
Block a user