| import { CloseCircleOutlined } from '@ant-design/icons'; |
| import { Card, Col, Popover, Row, message } from 'antd'; |
| import { useState } from 'react'; |
| import ProForm, { |
| ProFormDateRangePicker, |
| ProFormSelect, |
| ProFormText, |
| ProFormTimePicker, |
| } from '@ant-design/pro-form'; |
| import { EditableProTable } from '@ant-design/pro-table'; |
| import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; |
| import { fakeSubmitForm } from './service'; |
| import styles from './style.less'; |
| const fieldLabels = { |
| name: '仓库名', |
| url: '仓库域名', |
| owner: '仓库管理员', |
| approver: '审批人', |
| dateRange: '生效日期', |
| type: '仓库类型', |
| name2: '任务名', |
| url2: '任务描述', |
| owner2: '执行人', |
| approver2: '责任人', |
| dateRange2: '生效日期', |
| type2: '任务类型', |
| }; |
| const tableData = [ |
| { |
| key: '1', |
| workId: '00001', |
| name: 'John Brown', |
| department: 'New York No. 1 Lake Park', |
| }, |
| { |
| key: '2', |
| workId: '00002', |
| name: 'Jim Green', |
| department: 'London No. 1 Lake Park', |
| }, |
| { |
| key: '3', |
| workId: '00003', |
| name: 'Joe Black', |
| department: 'Sidney No. 1 Lake Park', |
| }, |
| ]; |
| |
| const AdvancedForm = () => { |
| const [error, setError] = useState([]); |
| |
| const getErrorInfo = (errors) => { |
| const errorCount = errors.filter((item) => item.errors.length > 0).length; |
| |
| if (!errors || errorCount === 0) { |
| return null; |
| } |
| |
| const scrollToField = (fieldKey) => { |
| const labelNode = document.querySelector(`label[for="${fieldKey}"]`); |
| |
| if (labelNode) { |
| labelNode.scrollIntoView(true); |
| } |
| }; |
| |
| const errorList = errors.map((err) => { |
| if (!err || err.errors.length === 0) { |
| return null; |
| } |
| |
| const key = err.name[0]; |
| return ( |
| <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}> |
| <CloseCircleOutlined className={styles.errorIcon} /> |
| <div className={styles.errorMessage}>{err.errors[0]}</div> |
| <div className={styles.errorField}>{fieldLabels[key]}</div> |
| </li> |
| ); |
| }); |
| return ( |
| <span className={styles.errorIcon}> |
| <Popover |
| title="表单校验信息" |
| content={errorList} |
| overlayClassName={styles.errorPopover} |
| trigger="click" |
| getPopupContainer={(trigger) => { |
| if (trigger && trigger.parentNode) { |
| return trigger.parentNode; |
| } |
| |
| return trigger; |
| }} |
| > |
| <CloseCircleOutlined /> |
| </Popover> |
| {errorCount} |
| </span> |
| ); |
| }; |
| |
| const onFinish = async (values) => { |
| setError([]); |
| |
| try { |
| await fakeSubmitForm(values); |
| message.success('提交成功'); |
| } catch { |
| // console.log |
| } |
| }; |
| |
| const onFinishFailed = (errorInfo) => { |
| setError(errorInfo.errorFields); |
| }; |
| |
| const columns = [ |
| { |
| title: '成员姓名', |
| dataIndex: 'name', |
| key: 'name', |
| width: '20%', |
| }, |
| { |
| title: '工号', |
| dataIndex: 'workId', |
| key: 'workId', |
| width: '20%', |
| }, |
| { |
| title: '所属部门', |
| dataIndex: 'department', |
| key: 'department', |
| width: '40%', |
| }, |
| { |
| title: '操作', |
| key: 'action', |
| valueType: 'option', |
| render: (_, record, index, action) => { |
| return [ |
| <a |
| key="eidit" |
| onClick={() => { |
| action?.startEditable(record.key); |
| }} |
| > |
| 编辑 |
| </a>, |
| ]; |
| }, |
| }, |
| ]; |
| return ( |
| <ProForm |
| layout="vertical" |
| hideRequiredMark |
| submitter={{ |
| render: (props, dom) => { |
| return ( |
| <FooterToolbar> |
| {getErrorInfo(error)} |
| {dom} |
| </FooterToolbar> |
| ); |
| }, |
| }} |
| initialValues={{ |
| members: tableData, |
| }} |
| onFinish={onFinish} |
| onFinishFailed={onFinishFailed} |
| > |
| <PageContainer content="高级表单常见于一次性输入和提交大批量数据的场景。"> |
| <Card title="仓库管理" className={styles.card} bordered={false}> |
| <Row gutter={16}> |
| <Col lg={6} md={12} sm={24}> |
| <ProFormText |
| label={fieldLabels.name} |
| name="name" |
| rules={[ |
| { |
| required: true, |
| message: '请输入仓库名称', |
| }, |
| ]} |
| placeholder="请输入仓库名称" |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 6, |
| offset: 2, |
| }} |
| lg={{ |
| span: 8, |
| }} |
| md={{ |
| span: 12, |
| }} |
| sm={24} |
| > |
| <ProFormText |
| label={fieldLabels.url} |
| name="url" |
| rules={[ |
| { |
| required: true, |
| message: '请选择', |
| }, |
| ]} |
| fieldProps={{ |
| style: { |
| width: '100%', |
| }, |
| addonBefore: 'http://', |
| addonAfter: '.com', |
| }} |
| placeholder="请输入" |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 8, |
| offset: 2, |
| }} |
| lg={{ |
| span: 10, |
| }} |
| md={{ |
| span: 24, |
| }} |
| sm={24} |
| > |
| <ProFormSelect |
| label={fieldLabels.owner} |
| name="owner" |
| rules={[ |
| { |
| required: true, |
| message: '请选择管理员', |
| }, |
| ]} |
| options={[ |
| { |
| label: '付晓晓', |
| value: 'xiao', |
| }, |
| { |
| label: '周毛毛', |
| value: 'mao', |
| }, |
| ]} |
| placeholder="请选择管理员" |
| /> |
| </Col> |
| </Row> |
| <Row gutter={16}> |
| <Col lg={6} md={12} sm={24}> |
| <ProFormSelect |
| label={fieldLabels.approver} |
| name="approver" |
| rules={[ |
| { |
| required: true, |
| message: '请选择审批员', |
| }, |
| ]} |
| options={[ |
| { |
| label: '付晓晓', |
| value: 'xiao', |
| }, |
| { |
| label: '周毛毛', |
| value: 'mao', |
| }, |
| ]} |
| placeholder="请选择审批员" |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 6, |
| offset: 2, |
| }} |
| lg={{ |
| span: 8, |
| }} |
| md={{ |
| span: 12, |
| }} |
| sm={24} |
| > |
| <ProFormDateRangePicker |
| label={fieldLabels.dateRange} |
| name="dateRange" |
| fieldProps={{ |
| style: { |
| width: '100%', |
| }, |
| }} |
| rules={[ |
| { |
| required: true, |
| message: '请选择生效日期', |
| }, |
| ]} |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 8, |
| offset: 2, |
| }} |
| lg={{ |
| span: 10, |
| }} |
| md={{ |
| span: 24, |
| }} |
| sm={24} |
| > |
| <ProFormSelect |
| label={fieldLabels.type} |
| name="type" |
| rules={[ |
| { |
| required: true, |
| message: '请选择仓库类型', |
| }, |
| ]} |
| options={[ |
| { |
| label: '私密', |
| value: 'private', |
| }, |
| { |
| label: '公开', |
| value: 'public', |
| }, |
| ]} |
| placeholder="请选择仓库类型" |
| /> |
| </Col> |
| </Row> |
| </Card> |
| <Card title="任务管理" className={styles.card} bordered={false}> |
| <Row gutter={16}> |
| <Col lg={6} md={12} sm={24}> |
| <ProFormText |
| label={fieldLabels.name2} |
| name="name2" |
| rules={[ |
| { |
| required: true, |
| message: '请输入', |
| }, |
| ]} |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 6, |
| offset: 2, |
| }} |
| lg={{ |
| span: 8, |
| }} |
| md={{ |
| span: 12, |
| }} |
| sm={24} |
| > |
| <ProFormText |
| label={fieldLabels.url2} |
| name="url2" |
| rules={[ |
| { |
| required: true, |
| message: '请选择', |
| }, |
| ]} |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 8, |
| offset: 2, |
| }} |
| lg={{ |
| span: 10, |
| }} |
| md={{ |
| span: 24, |
| }} |
| sm={24} |
| > |
| <ProFormSelect |
| label={fieldLabels.owner2} |
| name="owner2" |
| rules={[ |
| { |
| required: true, |
| message: '请选择管理员', |
| }, |
| ]} |
| options={[ |
| { |
| label: '付晓晓', |
| value: 'xiao', |
| }, |
| { |
| label: '周毛毛', |
| value: 'mao', |
| }, |
| ]} |
| /> |
| </Col> |
| </Row> |
| <Row gutter={16}> |
| <Col lg={6} md={12} sm={24}> |
| <ProFormSelect |
| label={fieldLabels.approver2} |
| name="approver2" |
| rules={[ |
| { |
| required: true, |
| message: '请选择审批员', |
| }, |
| ]} |
| options={[ |
| { |
| label: '付晓晓', |
| value: 'xiao', |
| }, |
| { |
| label: '周毛毛', |
| value: 'mao', |
| }, |
| ]} |
| placeholder="请选择审批员" |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 6, |
| offset: 2, |
| }} |
| lg={{ |
| span: 8, |
| }} |
| md={{ |
| span: 12, |
| }} |
| sm={24} |
| > |
| <ProFormTimePicker |
| label={fieldLabels.dateRange2} |
| name="dateRange2" |
| rules={[ |
| { |
| required: true, |
| message: '请输入', |
| }, |
| ]} |
| placeholder="提醒时间" |
| fieldProps={{ |
| style: { |
| width: '100%', |
| }, |
| }} |
| /> |
| </Col> |
| <Col |
| xl={{ |
| span: 8, |
| offset: 2, |
| }} |
| lg={{ |
| span: 10, |
| }} |
| md={{ |
| span: 24, |
| }} |
| sm={24} |
| > |
| <ProFormSelect |
| label={fieldLabels.type2} |
| name="type2" |
| rules={[ |
| { |
| required: true, |
| message: '请选择仓库类型', |
| }, |
| ]} |
| options={[ |
| { |
| label: '私密', |
| value: 'private', |
| }, |
| { |
| label: '公开', |
| value: 'public', |
| }, |
| ]} |
| placeholder="请选择仓库类型" |
| /> |
| </Col> |
| </Row> |
| </Card> |
| <Card title="成员管理" bordered={false}> |
| <ProForm.Item name="members"> |
| <EditableProTable |
| recordCreatorProps={{ |
| record: () => { |
| return { |
| key: `0${Date.now()}`, |
| }; |
| }, |
| }} |
| columns={columns} |
| rowKey="key" |
| /> |
| </ProForm.Item> |
| </Card> |
| </PageContainer> |
| </ProForm> |
| ); |
| }; |
| |
| export default AdvancedForm; |
