126 lines
3.7 KiB
TypeScript
126 lines
3.7 KiB
TypeScript
import {
|
|
ModalForm,
|
|
ProForm,
|
|
ProFormSelect,
|
|
ProFormText,
|
|
ProDescriptions,
|
|
} from '@ant-design/pro-components';
|
|
import { Form } from 'antd';
|
|
import React, { useEffect } from 'react';
|
|
import DictTag from '@/components/DictTag';
|
|
|
|
export type WebsiteFormProps = {
|
|
onCancel: (flag?: boolean, formVals?: unknown) => void;
|
|
onSubmit: (values: API.Website.WebsiteItem) => Promise<void>;
|
|
open: boolean;
|
|
values?: Partial<API.Website.WebsiteItem>;
|
|
mode?: 'view' | 'edit' | 'create';
|
|
isActiveEnum: any;
|
|
};
|
|
|
|
const WebsiteEdit: React.FC<WebsiteFormProps> = (props) => {
|
|
const [form] = Form.useForm<API.Website.WebsiteItem>();
|
|
const { mode = props.values ? 'edit' : 'create', isActiveEnum } = props;
|
|
|
|
useEffect(() => {
|
|
if (props.open) {
|
|
form.resetFields();
|
|
if (props.values) {
|
|
form.setFieldsValue(props.values);
|
|
}
|
|
}
|
|
}, [form, props.values?.websiteId, props.open]);
|
|
|
|
const handleCancel = () => {
|
|
props.onCancel();
|
|
form.resetFields();
|
|
};
|
|
|
|
const handleFinish = async (values: Record<string, any>) => {
|
|
await props.onSubmit(values as API.Website.WebsiteItem);
|
|
};
|
|
|
|
if (mode === 'view') {
|
|
return (
|
|
<ModalForm
|
|
title="网站信息详情"
|
|
open={props.open}
|
|
width={800}
|
|
modalProps={{
|
|
destroyOnClose: true,
|
|
onCancel: () => handleCancel(),
|
|
footer: null,
|
|
}}
|
|
submitter={false}
|
|
>
|
|
<ProDescriptions<API.Website.WebsiteItem> column={2} bordered dataSource={props.values || {}}>
|
|
{/* <ProDescriptions.Item dataIndex="websiteId" label="网站ID" /> */}
|
|
<ProDescriptions.Item dataIndex="websiteName" label="网站名称" />
|
|
<ProDescriptions.Item dataIndex="websiteUrl" label="网站地址" />
|
|
<ProDescriptions.Item dataIndex="websiteOwnerCompany" label="归属单位公司" />
|
|
<ProDescriptions.Item
|
|
dataIndex="isActive"
|
|
label="是否启用"
|
|
render={(text) => <DictTag enums={isActiveEnum} value={text as string} />}
|
|
/>
|
|
</ProDescriptions>
|
|
</ModalForm>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ModalForm<API.Website.WebsiteItem>
|
|
title={mode === 'edit' ? '编辑网站信息' : '新建网站信息'}
|
|
form={form}
|
|
autoFocusFirstInput
|
|
open={props.open}
|
|
modalProps={{
|
|
destroyOnClose: true,
|
|
onCancel: () => handleCancel(),
|
|
}}
|
|
submitTimeout={2000}
|
|
onFinish={handleFinish}
|
|
>
|
|
<ProForm.Group>
|
|
<ProFormText width="md" hidden name="websiteId" />
|
|
<ProFormText
|
|
width="md"
|
|
name="websiteName"
|
|
label="网站名称"
|
|
placeholder="请输入网站名称"
|
|
rules={[{ required: true, message: '请输入网站名称!' }]}
|
|
/>
|
|
<ProFormText
|
|
width="md"
|
|
name="websiteUrl"
|
|
label="网站地址"
|
|
placeholder="请输入网站地址"
|
|
rules={[
|
|
{ required: true, message: '请输入网站地址!' },
|
|
{ type: 'url', message: '请输入有效的网址!' },
|
|
]}
|
|
/>
|
|
</ProForm.Group>
|
|
<ProForm.Group>
|
|
<ProFormText
|
|
width="md"
|
|
name="websiteOwnerCompany"
|
|
label="归属单位公司"
|
|
placeholder="请输入归属单位公司"
|
|
rules={[{ required: true, message: '请输入归属单位公司!' }]}
|
|
/>
|
|
<ProFormSelect
|
|
width="md"
|
|
name="isActive"
|
|
label="是否启用"
|
|
valueEnum={isActiveEnum}
|
|
placeholder="请选择状态"
|
|
rules={[{ required: true, message: '请选择是否启用!' }]}
|
|
/>
|
|
</ProForm.Group>
|
|
</ModalForm>
|
|
);
|
|
};
|
|
|
|
export default WebsiteEdit;
|