You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
8.8 KiB
222 lines
8.8 KiB
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Spin, Card, Modal, TreeSelect, message } from 'antd';
|
|
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect ,ProFormSelect} from '@ant-design/pro-form';
|
|
|
|
const UserModal = (props) => {
|
|
const { visible, modalType, depData, onVisibleChange, onConfirm, editData ,tableList} = props
|
|
const reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
|
|
const onFinish = (values) => {
|
|
if (onConfirm) {
|
|
onConfirm(values);
|
|
}
|
|
}
|
|
const mobile = (value) => {
|
|
if (reg_tel.test(value)) {
|
|
return
|
|
}
|
|
return message('请输入姓名')
|
|
}
|
|
return (
|
|
<Spin spinning={false}>
|
|
<ModalForm
|
|
title={modalType == 'edit' ? '编辑用户' : '新建用户'}
|
|
visible={visible}
|
|
onVisibleChange={onVisibleChange}
|
|
onFinish={onFinish}
|
|
destroyOnClose
|
|
initialValues={
|
|
modalType == 'edit' ?
|
|
{
|
|
contract: editData
|
|
} :
|
|
{
|
|
contract: {
|
|
enable: true
|
|
}
|
|
}
|
|
}
|
|
>
|
|
<ProForm.Group>
|
|
<ProFormText
|
|
name={['contract', 'name']}
|
|
maxLength={24}
|
|
width="md"
|
|
label="姓名"
|
|
required
|
|
placeholder="请输入姓名"
|
|
rules={[{ required: true, message: '请输入姓名' }]}
|
|
/>
|
|
<ProFormText
|
|
name={['contract', 'phone']}
|
|
width="md"
|
|
label="用户名(手机号)"
|
|
required
|
|
fieldProps={{
|
|
maxLength: 11,
|
|
}}
|
|
getValueFromEvent={(event) => {
|
|
return event.target.value.replace(/\D/g, '')
|
|
}}
|
|
placeholder="请输入用户名(手机号)"
|
|
rules={[
|
|
{ required: true, valueType: Number, max: 11 }, { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: "请输入正确的手机号" }
|
|
]}
|
|
/>
|
|
</ProForm.Group>
|
|
<ProForm.Group>
|
|
<ProFormTreeSelect
|
|
name={['contract', 'departmentId']}
|
|
placeholder="请选择所属部门"
|
|
width="md"
|
|
label="所属部门"
|
|
required
|
|
fieldNames={{
|
|
title: 'name',
|
|
key: 'id',
|
|
children: 'subordinate'
|
|
}}
|
|
onSelect={(selectedKeys, { selected, selectedNodes }) => {
|
|
if (selected) {
|
|
setDepSelectedKeys(selectedKeys)
|
|
setDepSelected(selectedNodes[0].name || "")
|
|
dispatch(getDepUser(selectedKeys[0]))
|
|
}
|
|
}}
|
|
fieldProps={{
|
|
fieldNames: {
|
|
label: 'title',
|
|
},
|
|
treeDefaultExpandAll: false,
|
|
}}
|
|
rules={[{ required: true, message: '请选择所属部门' }]}
|
|
request={async () => {
|
|
console.log(depData);
|
|
return depData
|
|
}}
|
|
expandedKeys={["title"]}
|
|
/>
|
|
< ProFormText
|
|
name={['contract', 'post']}
|
|
width="md"
|
|
label="职位"
|
|
// required
|
|
placeholder="请输入职位"
|
|
/>
|
|
</ProForm.Group>
|
|
<ProForm.Group>
|
|
{/* <ProFormTreeSelect
|
|
name={['contract', 'structure']}
|
|
placeholder="请选择结构物"
|
|
width="md"
|
|
mode="multiple"
|
|
label="关注结构物"
|
|
required
|
|
// fieldNames={{
|
|
// title: 'name',
|
|
// key: 'id',
|
|
// children: 'subordinate'
|
|
// }}
|
|
onSelect={(selectedKeys, { selected, selectedNodes }) => {
|
|
|
|
}}
|
|
fieldProps={{
|
|
mode: 'multiple',
|
|
fieldNames: {
|
|
label: 'title',
|
|
},
|
|
treeDefaultExpandAll: false,
|
|
}}
|
|
rules={[{ required: true, message: '请选择结构物' }]}
|
|
request={async () => {
|
|
console.log(tableList);
|
|
const opts = tableList?.map(i=>({title:i.name,value:i.id}))
|
|
return opts
|
|
}}
|
|
expandedKeys={["title"]}
|
|
/> */}
|
|
<ProFormSelect
|
|
width="md"
|
|
label="关注结构物"
|
|
name={['contract', 'structure']}
|
|
mode="multiple"
|
|
// fieldProps={{//这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法
|
|
// onChange:(val) => handleChange(val),
|
|
// }}
|
|
request={async () => {
|
|
console.log(tableList);
|
|
const opts = tableList?.map(i=>({label:i.name,value:i.id}))
|
|
return opts
|
|
}}
|
|
placeholder="请选择结构物"
|
|
rules={[{ required: true, message: '结构物不能为空' }]}
|
|
/>
|
|
|
|
<ProFormText
|
|
name={['contract', 'email']}
|
|
width="md"
|
|
label="邮箱"
|
|
// required
|
|
placeholder="请输入邮箱"
|
|
rules={[
|
|
// { required: true, message: '请输入邮箱' },
|
|
{ type: 'email', message: '请输入正确格式的邮箱' },
|
|
]}
|
|
/>
|
|
</ProForm.Group>
|
|
<ProForm.Group>
|
|
|
|
{modalType == 'edit' ? null : <ProFormText.Password
|
|
name={['contract', 'password']}
|
|
width="md"
|
|
label="密码"
|
|
required
|
|
placeholder="请输入密码"
|
|
fieldProps={{
|
|
autocomplete: 'new-password'
|
|
}}
|
|
rules={[
|
|
{ required: true, message: '请填写密码' },
|
|
{ min: 6, message: '请填写至少6位密码' },
|
|
]}
|
|
/>}
|
|
</ProForm.Group>
|
|
|
|
<ProForm.Group>
|
|
<ProFormSwitch
|
|
name={['contract', 'enable']}
|
|
width="md"
|
|
label="是否启用"
|
|
placeholder="请选择"
|
|
// defaultChecked
|
|
valuePropName="checked"
|
|
/>
|
|
</ProForm.Group>
|
|
</ModalForm>
|
|
</Spin>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { depMessage } = state;
|
|
|
|
const pakData = (dep) => {
|
|
// console.log(dep);
|
|
return dep.map((d) => {
|
|
return {
|
|
title: d.name,
|
|
value: d.id,
|
|
// key: d.id,
|
|
children: pakData(d.subordinate)
|
|
}
|
|
})
|
|
}
|
|
let depData = pakData(depMessage.data || [])
|
|
|
|
return {
|
|
loading: depMessage.isRequesting,
|
|
depData,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(UserModal);
|