巴林闲侠
2 years ago
1 changed files with 88 additions and 0 deletions
@ -0,0 +1,88 @@ |
|||
import React, { useRef, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Modal, TreeSelect } from 'antd'; |
|||
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; |
|||
|
|||
const DepModal = (props) => { |
|||
const { visible, onVisibleChange, onConfirm, depModalType, depData, data } = props; |
|||
const formRef = useRef(); |
|||
const onFinish = (values) => { |
|||
if (onConfirm) { |
|||
if (depModalType === 'edit') { |
|||
let value = { |
|||
name: values.name, |
|||
depId: data.id |
|||
} |
|||
onConfirm(value) |
|||
} else { |
|||
onConfirm(values); |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Spin spinning={false}> |
|||
<ModalForm |
|||
title={depModalType === 'edit' ? '编辑部门' : '新增部门'} |
|||
visible={visible} |
|||
onVisibleChange={onVisibleChange} |
|||
onFinish={onFinish} |
|||
formRef={formRef} |
|||
destroyOnClose |
|||
initialValues={data || null} |
|||
> |
|||
<ProFormText |
|||
name={['name']} |
|||
width="md" |
|||
label="部门名称" |
|||
required |
|||
maxLength={10} |
|||
placeholder="请输入部门名称" |
|||
fieldProps={{ |
|||
autocomplete: 'new-password' |
|||
}} |
|||
rules={[ |
|||
{ required: true, message: '请输入部门名称' }, { max: 20, message: '请输入10个字以内的名称' } |
|||
]} |
|||
/> |
|||
<ProFormTreeSelect |
|||
name={['dependence']} |
|||
width="md" |
|||
label="上级部门" |
|||
autocomplete='off' |
|||
placeholder="选择上级部门" |
|||
fieldNames={{ |
|||
title: 'name', |
|||
key: 'id', |
|||
children: 'subordinate' |
|||
}} |
|||
request={async () => { |
|||
return depData |
|||
}} |
|||
/> |
|||
</ModalForm> |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { depMessage } = state; |
|||
const pakData = (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)(DepModal); |
Loading…
Reference in new issue