127 lines
4.0 KiB
TypeScript
127 lines
4.0 KiB
TypeScript
|
import { PlusOutlined } from '@ant-design/icons';
|
||
|
|
import {
|
||
|
|
ModalForm,
|
||
|
|
ProForm,
|
||
|
|
ProFormDateRangePicker,
|
||
|
|
ProFormSelect,
|
||
|
|
ProFormText,
|
||
|
|
} from '@ant-design/pro-components';
|
||
|
|
import { Button, Form, message } from 'antd';
|
||
|
|
import React from "react";
|
||
|
|
import {DetailFormProps} from "@/app/ui/task/project/DetailForm";
|
||
|
|
import {OPERATION_BUTTON_TYPE} from "@/app/lib/task/project/data";
|
||
|
|
|
||
|
|
const waitTime = (time: number = 100) => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
resolve(true);
|
||
|
|
}, time);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
export type DetailModelFormProps={
|
||
|
|
itemId?: number,
|
||
|
|
pPid?:number,
|
||
|
|
operationId: number,
|
||
|
|
description:string,
|
||
|
|
handleCancel?: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
|
||
|
|
const [form] = Form.useForm<{ name: string; company: string }>();
|
||
|
|
return (
|
||
|
|
<ModalForm<{
|
||
|
|
name: string;
|
||
|
|
company: string;
|
||
|
|
}>
|
||
|
|
title={
|
||
|
|
props.operationId === OPERATION_BUTTON_TYPE.DETAIL ? "任务详情":
|
||
|
|
props.operationId === OPERATION_BUTTON_TYPE.ADD?"添加任务":
|
||
|
|
props.operationId === OPERATION_BUTTON_TYPE.ADD?"修改任务":''
|
||
|
|
}
|
||
|
|
trigger={
|
||
|
|
<Button type="primary">
|
||
|
|
<PlusOutlined />
|
||
|
|
{props.description}
|
||
|
|
</Button>
|
||
|
|
}
|
||
|
|
form={form}
|
||
|
|
autoFocusFirstInput
|
||
|
|
modalProps={{
|
||
|
|
destroyOnClose: true,
|
||
|
|
onCancel: () => console.log('run'),
|
||
|
|
}}
|
||
|
|
submitTimeout={2000}
|
||
|
|
onFinish={async (values) => {
|
||
|
|
await waitTime(2000);
|
||
|
|
console.log(values.name);
|
||
|
|
message.success('提交成功');
|
||
|
|
return true;
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ProForm.Group>
|
||
|
|
<ProFormText
|
||
|
|
width="md"
|
||
|
|
name="name"
|
||
|
|
label="签约客户名称"
|
||
|
|
tooltip="最长为 24 位"
|
||
|
|
placeholder="请输入名称"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<ProFormText
|
||
|
|
width="md"
|
||
|
|
name="company"
|
||
|
|
label="我方公司名称"
|
||
|
|
placeholder="请输入名称"
|
||
|
|
/>
|
||
|
|
</ProForm.Group>
|
||
|
|
<ProForm.Group>
|
||
|
|
<ProFormText
|
||
|
|
width="md"
|
||
|
|
name="contract"
|
||
|
|
label="合同名称"
|
||
|
|
placeholder="请输入名称"
|
||
|
|
/>
|
||
|
|
<ProFormDateRangePicker name="contractTime" label="合同生效时间" />
|
||
|
|
</ProForm.Group>
|
||
|
|
<ProForm.Group>
|
||
|
|
<ProFormSelect
|
||
|
|
request={async () => [
|
||
|
|
{
|
||
|
|
value: 'chapter',
|
||
|
|
label: '盖章后生效',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
width="xs"
|
||
|
|
name="useMode"
|
||
|
|
label="合同约定生效方式"
|
||
|
|
/>
|
||
|
|
<ProFormSelect
|
||
|
|
width="xs"
|
||
|
|
options={[
|
||
|
|
{
|
||
|
|
value: 'time',
|
||
|
|
label: '履行完终止',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
name="unusedMode"
|
||
|
|
label="合同约定失效效方式"
|
||
|
|
/>
|
||
|
|
</ProForm.Group>
|
||
|
|
<ProFormText width="sm" name="id" label="主合同编号" />
|
||
|
|
<ProFormText
|
||
|
|
name="project"
|
||
|
|
disabled
|
||
|
|
label="项目名称"
|
||
|
|
initialValue="xxxx项目"
|
||
|
|
/>
|
||
|
|
<ProFormText
|
||
|
|
width="xs"
|
||
|
|
name="mangerName"
|
||
|
|
disabled
|
||
|
|
label="商务经理"
|
||
|
|
initialValue="启途"
|
||
|
|
/>
|
||
|
|
</ModalForm>
|
||
|
|
);
|
||
|
|
};
|