import {
|
ProForm,
|
ProFormSelect,
|
ProFormSwitch,
|
ProFormText,
|
ProFormTextArea,
|
} from '@ant-design/pro-components';
|
import { Divider, Form, Modal } from 'antd';
|
import { forwardRef, useImperativeHandle, useState } from 'react';
|
import { getNotPageList } from '../../role/service';
|
|
const AddEditDetail = ({ visible, onSave, onUpdate, onCancel }, ref) => {
|
const [form] = Form.useForm();
|
const [editData, setEditData] = useState({});
|
const formItemLayout = {
|
labelCol: { span: 5 },
|
};
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data) => {
|
form.resetFields();
|
form.setFieldsValue(data);
|
setEditData(data);
|
},
|
clean: () => {
|
form.resetFields();
|
},
|
};
|
});
|
|
const requestRoleList = async () => {
|
const res = await getNotPageList();
|
if (res?.code === 200) {
|
return res.data.map((item) => ({
|
label: item.roleName,
|
value: item.roleId,
|
}));
|
}
|
return [];
|
};
|
|
const okHandle = () => {
|
form.validateFields().then((values) => {
|
if (editData.userId) {
|
values.userId = editData.userId;
|
onUpdate(values);
|
} else {
|
onSave(values);
|
}
|
});
|
};
|
|
return (
|
<Modal
|
getContainer={false}
|
width="30%"
|
centered
|
destroyOnHidden
|
title={editData.userId ? '编辑人员' : '添加人员'}
|
open={visible}
|
onCancel={() => {
|
onCancel(false);
|
form.resetFields();
|
}}
|
onOk={okHandle}
|
>
|
<ProForm submitter={false} layout="horizontal" {...formItemLayout} form={form}>
|
<ProFormText
|
name="nickName"
|
label="姓名"
|
placeholder="请输入"
|
width={240}
|
rules={[{ required: true, message: '请输入姓名' }]}
|
/>
|
<ProFormText
|
name="phonenumber"
|
label="联系电话"
|
width={240}
|
placeholder="请输入"
|
rules={[
|
{ required: true, message: '请输入联系电话' },
|
{
|
validator: (_, value) => {
|
if (!value) return Promise.resolve();
|
const input = String(value).trim();
|
const mobilePattern = /^1[3-9]\d{9}$/; // 中国大陆手机
|
const landlinePattern = /^(0\d{2,3}-?)?\d{7,8}(-\d{1,4})?$/; // 座机，支持区号与分机
|
return mobilePattern.test(input) || landlinePattern.test(input)
|
? Promise.resolve()
|
: Promise.reject(new Error('请输入正确的联系电话（手机或座机）'));
|
},
|
},
|
]}
|
/>
|
<ProFormText
|
name="userName"
|
label="登录账号"
|
width={240}
|
disabled={editData.userId}
|
placeholder="请输入"
|
rules={[{ required: true, message: '请输入登录账号' }]}
|
addonAfter={<span style={{ color: 'red' }}>账号不可重复</span>}
|
/>
|
<Divider />
|
<ProFormSelect
|
name="roleId"
|
label="角色"
|
request={requestRoleList}
|
width={240}
|
placeholder="请选择角色"
|
rules={[{ required: true, message: '请选择角色' }]}
|
/>
|
<ProFormSwitch
|
name="status"
|
label="登录状态"
|
rules={[{ required: true, message: '请选择登录状态' }]}
|
/>
|
<ProFormTextArea name="remark" label="备注" width={240} placeholder="请输入" />
|
</ProForm>
|
</Modal>
|
);
|
};
|
|
export default forwardRef(AddEditDetail);
|
