| | |
|---|
| | | import React, { useState, useRef, useEffect } from 'react'; |
|---|
| | | import { |
|---|
| | | ProForm, |
|---|
| | | ProFormDigit, |
|---|
| | | ProFormText, |
|---|
| | | ProFormSelect, |
|---|
| | | ProFormTreeSelect, |
|---|
| | | ProFormTextArea, |
|---|
| | | ProFormRadio |
|---|
| | | } from '@ant-design/pro-components'; |
|---|
| | | import { FormattedMessage, useIntl } from '@umijs/max'; |
|---|
| | | import { Form, Modal } from 'antd'; |
|---|
| | | import moment from 'moment'; |
|---|
| | | import Http from '@/utils/http'; |
|---|
| | | |
|---|
| | | const Edit = (props) => { |
|---|
| | | const intl = useIntl(); |
|---|
| | | const [form] = Form.useForm(); |
|---|
| | | const { } = props; |
|---|
| | | |
|---|
| | | useEffect(() => { |
|---|
| | | form.resetFields(); |
|---|
| | | form.setFieldsValue({ |
|---|
| | | ...props.values, |
|---|
| | | roleIds: props.values.userRoleIds |
|---|
| | | }) |
|---|
| | | }, [form, props]) |
|---|
| | | |
|---|
| | | const handleCancel = () => { |
|---|
| | | props.onCancel(); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleOk = () => { |
|---|
| | | form.submit(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handleFinish = async (values) => { |
|---|
| | | props.onSubmit({ ...values }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <> |
|---|
| | | <Modal |
|---|
| | | title={ |
|---|
| | | Object.keys(props.values).length > 0 |
|---|
| | | ? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' }) |
|---|
| | | : intl.formatMessage({ id: 'page.add', defaultMessage: '添加' }) |
|---|
| | | } |
|---|
| | | width={640} |
|---|
| | | forceRender |
|---|
| | | destroyOnClose |
|---|
| | | open={props.open} |
|---|
| | | onCancel={handleCancel} |
|---|
| | | onOk={handleOk} |
|---|
| | | > |
|---|
| | | <ProForm |
|---|
| | | form={form} |
|---|
| | | submitter={false} |
|---|
| | | onFinish={handleFinish} |
|---|
| | | layout="horizontal" |
|---|
| | | grid={true} |
|---|
| | | > |
|---|
| | | <ProFormDigit |
|---|
| | | name="id" |
|---|
| | | disabled |
|---|
| | | hidden={true} |
|---|
| | | /> |
|---|
| | | <ProForm.Group> |
|---|
| | | <ProFormTreeSelect |
|---|
| | | name="deptId" |
|---|
| | | label="所属部门" |
|---|
| | | params={props.treeData} |
|---|
| | | request={async () => { |
|---|
| | | return props.treeData; |
|---|
| | | }} |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | fieldProps={{ |
|---|
| | | treeDefaultExpandedKeys: [0] |
|---|
| | | }} |
|---|
| | | rules={[{ required: true }]} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | name="username" |
|---|
| | | label="登录账号" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | rules={[{ required: true }]} |
|---|
| | | /> |
|---|
| | | </ProForm.Group> |
|---|
| | | <ProForm.Group> |
|---|
| | | <ProFormText |
|---|
| | | name="nickname" |
|---|
| | | label="名称" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | rules={[{ required: true }]} |
|---|
| | | /> |
|---|
| | | <ProFormSelect |
|---|
| | | name="sex" |
|---|
| | | label="性别" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | options={[ |
|---|
| | | { label: '未知', value: 0 }, |
|---|
| | | { label: '男', value: 1 }, |
|---|
| | | { label: '女', value: 2 }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | </ProForm.Group> |
|---|
| | | <ProForm.Group> |
|---|
| | | <ProFormText |
|---|
| | | name="phone" |
|---|
| | | label="手机号" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | placeholder="请输入" |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | pattern: /^1[3456789]\d{9}$/, |
|---|
| | | message: '请输入正确的手机号码!', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | message: '手机号码不能为空!', |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | name="email" |
|---|
| | | label="邮箱" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | type: 'email', |
|---|
| | | message: '请输入正确的邮箱地址!', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | required: false, |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | </ProForm.Group> |
|---|
| | | <ProForm.Group> |
|---|
| | | <ProFormText |
|---|
| | | name="realName" |
|---|
| | | label="真实姓名" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | /> |
|---|
| | | <ProFormText |
|---|
| | | name="idCard" |
|---|
| | | label="身份证号" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | /> |
|---|
| | | </ProForm.Group> |
|---|
| | | <ProForm.Group> |
|---|
| | | <ProFormRadio.Group |
|---|
| | | name="status" |
|---|
| | | label="状态" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | options={[ |
|---|
| | | { label: '正常', value: 1 }, |
|---|
| | | { label: '禁用', value: 0 }, |
|---|
| | | ]} |
|---|
| | | rules={[ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | /> |
|---|
| | | <ProFormSelect |
|---|
| | | name="roleIds" |
|---|
| | | mode="multiple" |
|---|
| | | label="角色" |
|---|
| | | colProps={{ md: 12, xl: 12 }} |
|---|
| | | rules={[{ required: true, type: 'array', message: '角色不能为空!' }]} |
|---|
| | | request={async ({ keyWords }) => { |
|---|
| | | const resp = await Http.doPostForm('api/role/query', { condition: keyWords }); |
|---|
| | | return resp.data; |
|---|
| | | }} |
|---|
| | | /> |
|---|
| | | </ProForm.Group> |
|---|
| | | <ProFormTextArea |
|---|
| | | name="memo" |
|---|
| | | label="备注" |
|---|
| | | colProps={{ md: 24, xl: 24 }} |
|---|
| | | /> |
|---|
| | | </ProForm> |
|---|
| | | </Modal> |
|---|
| | | </> |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default Edit; |
|---|
| | | import React, { useState, useRef, useEffect } from 'react';
|
|---|
| | | import {
|
|---|
| | | ProForm,
|
|---|
| | | ProFormDigit,
|
|---|
| | | ProFormText,
|
|---|
| | | ProFormSelect,
|
|---|
| | | ProFormTreeSelect,
|
|---|
| | | ProFormTextArea,
|
|---|
| | | ProFormRadio
|
|---|
| | | } from '@ant-design/pro-components';
|
|---|
| | | import { FormattedMessage, useIntl } from '@umijs/max';
|
|---|
| | | import { Form, Modal } from 'antd';
|
|---|
| | | import moment from 'moment';
|
|---|
| | | import Http from '@/utils/http';
|
|---|
| | |
|
|---|
| | | const Edit = (props) => {
|
|---|
| | | const intl = useIntl();
|
|---|
| | | const [form] = Form.useForm();
|
|---|
| | | const { } = props;
|
|---|
| | |
|
|---|
| | | useEffect(() => {
|
|---|
| | | form.resetFields();
|
|---|
| | | form.setFieldsValue({
|
|---|
| | | ...props.values,
|
|---|
| | | roleIds: props.values.userRoleIds
|
|---|
| | | })
|
|---|
| | | }, [form, props])
|
|---|
| | |
|
|---|
| | | const handleCancel = () => {
|
|---|
| | | props.onCancel();
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const handleOk = () => {
|
|---|
| | | form.submit();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | const handleFinish = async (values) => {
|
|---|
| | | props.onSubmit({ ...values });
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | return (
|
|---|
| | | <>
|
|---|
| | | <Modal
|
|---|
| | | title={
|
|---|
| | | Object.keys(props.values).length > 0
|
|---|
| | | ? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' })
|
|---|
| | | : intl.formatMessage({ id: 'page.add', defaultMessage: '添加' })
|
|---|
| | | }
|
|---|
| | | width={640}
|
|---|
| | | forceRender
|
|---|
| | | destroyOnClose
|
|---|
| | | open={props.open}
|
|---|
| | | onCancel={handleCancel}
|
|---|
| | | onOk={handleOk}
|
|---|
| | | >
|
|---|
| | | <ProForm
|
|---|
| | | form={form}
|
|---|
| | | submitter={false}
|
|---|
| | | onFinish={handleFinish}
|
|---|
| | | layout="horizontal"
|
|---|
| | | grid={true}
|
|---|
| | | >
|
|---|
| | | <ProFormDigit
|
|---|
| | | name="id"
|
|---|
| | | disabled
|
|---|
| | | hidden={true}
|
|---|
| | | />
|
|---|
| | | <ProForm.Group>
|
|---|
| | | <ProFormTreeSelect
|
|---|
| | | name="deptId"
|
|---|
| | | label="所属部门"
|
|---|
| | | params={props.treeData}
|
|---|
| | | request={async () => {
|
|---|
| | | return props.treeData;
|
|---|
| | | }}
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | fieldProps={{
|
|---|
| | | treeDefaultExpandedKeys: [0]
|
|---|
| | | }}
|
|---|
| | | rules={[{ required: true }]}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | name="username"
|
|---|
| | | label="登录账号"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | rules={[{ required: true }]}
|
|---|
| | | />
|
|---|
| | | </ProForm.Group>
|
|---|
| | | <ProForm.Group>
|
|---|
| | | <ProFormText
|
|---|
| | | name="nickname"
|
|---|
| | | label="名称"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | rules={[{ required: true }]}
|
|---|
| | | />
|
|---|
| | | <ProFormSelect
|
|---|
| | | name="sex"
|
|---|
| | | label="性别"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | options={[
|
|---|
| | | { label: '未知', value: 0 },
|
|---|
| | | { label: '男', value: 1 },
|
|---|
| | | { label: '女', value: 2 },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | </ProForm.Group>
|
|---|
| | | <ProForm.Group>
|
|---|
| | | <ProFormText
|
|---|
| | | name="phone"
|
|---|
| | | label="手机号"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | placeholder="请输入"
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | pattern: /^1[3456789]\d{9}$/,
|
|---|
| | | message: '请输入正确的手机号码!',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | message: '手机号码不能为空!',
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | |
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | name="email"
|
|---|
| | | label="邮箱"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | type: 'email',
|
|---|
| | | message: '请输入正确的邮箱地址!',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | required: false,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | </ProForm.Group>
|
|---|
| | | <ProForm.Group>
|
|---|
| | | <ProFormText
|
|---|
| | | name="realName"
|
|---|
| | | label="真实姓名"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | />
|
|---|
| | | <ProFormText
|
|---|
| | | name="idCard"
|
|---|
| | | label="身份证号"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | />
|
|---|
| | | </ProForm.Group>
|
|---|
| | | <ProForm.Group>
|
|---|
| | | <ProFormRadio.Group
|
|---|
| | | name="status"
|
|---|
| | | label="状态"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | options={[
|
|---|
| | | { label: '正常', value: 1 },
|
|---|
| | | { label: '禁用', value: 0 },
|
|---|
| | | ]}
|
|---|
| | | rules={[
|
|---|
| | | {
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | ]}
|
|---|
| | | />
|
|---|
| | | <ProFormSelect
|
|---|
| | | name="roleIds"
|
|---|
| | | mode="multiple"
|
|---|
| | | label="角色"
|
|---|
| | | colProps={{ md: 12, xl: 12 }}
|
|---|
| | | rules={[{ required: true, type: 'array', message: '角色不能为空!' }]}
|
|---|
| | | request={async ({ keyWords }) => {
|
|---|
| | | const resp = await Http.doPostForm('api/role/query', { condition: keyWords });
|
|---|
| | | return resp.data;
|
|---|
| | | }}
|
|---|
| | | />
|
|---|
| | | </ProForm.Group>
|
|---|
| | | <ProFormTextArea
|
|---|
| | | name="memo"
|
|---|
| | | label="备注"
|
|---|
| | | colProps={{ md: 24, xl: 24 }}
|
|---|
| | | />
|
|---|
| | | </ProForm>
|
|---|
| | | </Modal>
|
|---|
| | | </>
|
|---|
| | | )
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | export default Edit;
|
|---|
