|
@@ -1,7 +1,16 @@
|
|
|
-import {useEffect,useState} from 'react';
|
|
|
-import { Form, Input, Button, Radio, Select,Steps,DatePicker,InputNumber,TreeSelect,Switch, } from 'antd';
|
|
|
+import {useEffect,useState,useContext} from 'react';
|
|
|
+import { Form, Input, Checkbox, Button, Select,Steps,Tabs ,InputNumber,Space,Switch, } from 'antd';
|
|
|
+import MenuTree from './MenuTree';
|
|
|
import './index.less';
|
|
|
+import OrgContext from './org-context';
|
|
|
+import {message} from "antd/lib/index";
|
|
|
+import apiObj from '@api/index';
|
|
|
+
|
|
|
+const {post,api,xPost} = apiObj;
|
|
|
+
|
|
|
const { Step } = Steps;
|
|
|
+const { TabPane } = Tabs;
|
|
|
+const { Option } = Select;
|
|
|
function AddSubOrg(){
|
|
|
const [current, setCurrent] = useState(0);
|
|
|
const steps = [
|
|
@@ -22,6 +31,9 @@ function AddSubOrg(){
|
|
|
const next = () => {
|
|
|
setCurrent(current + 1);
|
|
|
};
|
|
|
+ const pre = () => {
|
|
|
+ setCurrent(current - 1);
|
|
|
+ };
|
|
|
return (
|
|
|
<div className="add-container">
|
|
|
<Steps current={current} labelPlacement='vertical'>
|
|
@@ -29,42 +41,290 @@ function AddSubOrg(){
|
|
|
<Step key={item.title} title={item.title} />
|
|
|
))}
|
|
|
</Steps>
|
|
|
- <div className="steps-content"><FirstStep /></div>
|
|
|
+ <div className="steps-content">
|
|
|
+ <StepContent current={current}
|
|
|
+ pre={pre}
|
|
|
+ next={next}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-function FirstStep(){
|
|
|
+function StepContent(props){
|
|
|
+ const [form] = Form.useForm();
|
|
|
+ const [treeDatas, setTreeDatas] = useState([]);
|
|
|
+ const [tabDatas, setTabDatas] = useState([]);
|
|
|
+ const [activeTab, setActiveTab] = useState('');
|
|
|
+ const [sysCheckeds, setSysCheckeds] = useState([]);
|
|
|
+ const {orgId,orgName,typeList,save} = useContext(OrgContext);
|
|
|
+ const {current,pre,next} = props;
|
|
|
+ const initialValues={
|
|
|
+ parentId:orgId,
|
|
|
+ parentName:orgName,
|
|
|
+ status:1
|
|
|
+ };
|
|
|
+ const vilidateRules = {
|
|
|
+ required: '${label}不能为空!',
|
|
|
+ types: {
|
|
|
+ email: '${label} is not a valid email!',
|
|
|
+ number: '${label} is not a valid number!',
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ //获取菜单数据
|
|
|
+ function getTreeData(){
|
|
|
+ xPost(api.getUserMenuResourceTree,{type:0}).then((res)=>{
|
|
|
+ if(res.data.code===200){
|
|
|
+ const data = res.data.data;
|
|
|
+ const treeDatas = structureTreeData(data);
|
|
|
+ setTreeDatas(treeDatas);
|
|
|
+ setTabDatas([treeDatas[0]]);
|
|
|
+ setActiveTab(treeDatas[0].key);
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //数据转换为树形结构所需字段
|
|
|
+ function structureTreeData(data){
|
|
|
+ const arr = [];
|
|
|
+ let obj={};
|
|
|
+ data.map((it,i)=>{
|
|
|
+ obj =JSON.stringify(it.children).replace(/softwareMenuId/g,"key").replace(/menuName/g,'title');
|
|
|
+ arr[i]={
|
|
|
+ title:it.softwareName,
|
|
|
+ key:it.softwareId,
|
|
|
+ children:JSON.parse(obj)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setSysCheckeds(arr[0]?[arr[0].key]:[]);
|
|
|
+ //form.setFieldsValue({softwares:[{id:arr[0]?[arr[0].key]:''}]}); //默认选中第一个
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+ useEffect(()=>{
|
|
|
+ getTreeData();
|
|
|
+ },[]);
|
|
|
+ function handlePre(){
|
|
|
+ pre();
|
|
|
+ }
|
|
|
+ function handleNext(){
|
|
|
+ const validateKeys = {
|
|
|
+ 0:['parentId','name','code',['addHospitalUserVO','name'],['addHospitalUserVO','mobilePhone'],'type','orderNo'],
|
|
|
+ 1:[['addHospitalUserVO','username'],['addHospitalUserVO','password'],'confirmPsd'],
|
|
|
+ };
|
|
|
+ form.validateFields(validateKeys[current]).then((res)=>{
|
|
|
+ //console.log(res,form)
|
|
|
+ next(form);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function handleSave(){
|
|
|
+ form.validateFields([['softwares',0,'id'],['softwares',0,'softwareMenuIds'],['softwares',0,'softwareResourceIds']]).then((res)=>{
|
|
|
+ save(form.getFieldsValue())
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ //树形结构选中事件
|
|
|
+ function checkTreeEvent(i,idsArr,sourceIds){
|
|
|
+ console.log(32,i,idsArr,sourceIds,activeTab)
|
|
|
+ const formData=form.getFieldsValue();
|
|
|
+ const arr=formData.softwares;
|
|
|
+ arr[i]={
|
|
|
+ id:activeTab,
|
|
|
+ softwareMenuIds:idsArr,
|
|
|
+ softwareResourceIds:sourceIds
|
|
|
+ };
|
|
|
+ form.setFieldsValue({
|
|
|
+ softwares:arr
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function onTabChange(activeTab){
|
|
|
+ setActiveTab(activeTab)
|
|
|
+ }
|
|
|
+ //状态开关
|
|
|
+ function switchStatus(checked){
|
|
|
+ form.setFieldsValue({
|
|
|
+ status:checked?1:0
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //开放系统勾选事件
|
|
|
+ function softwareChange(checkedValue){
|
|
|
+ let arr = [],item;
|
|
|
+ setSysCheckeds(checkedValue);
|
|
|
+ for(let i=0;i<checkedValue.length;i++){
|
|
|
+ item=treeDatas.find((it)=>it.key===checkedValue[i]);
|
|
|
+ if(item){
|
|
|
+ arr.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTabDatas(arr);
|
|
|
+ }
|
|
|
return (
|
|
|
+ <>
|
|
|
<Form
|
|
|
labelCol={{ span: 6 }}
|
|
|
wrapperCol={{ span: 16 }}
|
|
|
layout="horizontal"
|
|
|
+ validateMessages={vilidateRules}
|
|
|
+ initialValues={initialValues}
|
|
|
+ form={form}
|
|
|
>
|
|
|
- <Form.Item label="上级组织">
|
|
|
- <Input disabled required/>
|
|
|
+ <Form.Item
|
|
|
+ label="上级组织ID"
|
|
|
+ hidden={true}
|
|
|
+ name='parentId'>
|
|
|
+ <Input placeholder='请输入上级组织ID'/>
|
|
|
</Form.Item>
|
|
|
- <Form.Item label="组织名称">
|
|
|
- <Input placeholder='请输入组织名称' required/>
|
|
|
+ <Form.Item
|
|
|
+ label="上级组织"
|
|
|
+ name='parentName'
|
|
|
+ hidden={current!==0}
|
|
|
+ rules={[{ required: true}]}>
|
|
|
+ <Input disabled/>
|
|
|
</Form.Item>
|
|
|
- <Form.Item label="组织编码">
|
|
|
+ <Form.Item
|
|
|
+ label="组织名称"
|
|
|
+ name='name'
|
|
|
+ hidden={current!==0}
|
|
|
+ rules={[{ required: true},({ getFieldValue }) => ({
|
|
|
+ validator(_, value) {
|
|
|
+ if (value.length<51) {
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+ return Promise.reject(new Error('格式错误!'));
|
|
|
+ },
|
|
|
+ }),]}>
|
|
|
+ <Input placeholder='请输入组织名称'/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="组织编码"
|
|
|
+ hidden={current!==0}
|
|
|
+ name='code'>
|
|
|
<Input placeholder='请输入组织编码' />
|
|
|
</Form.Item>
|
|
|
- <Form.Item label="联系人">
|
|
|
+ <Form.Item
|
|
|
+ label="联系人"
|
|
|
+ hidden={current!==0}
|
|
|
+ name={['addHospitalUserVO','name']}>
|
|
|
<Input placeholder='请输入联系人'/>
|
|
|
</Form.Item>
|
|
|
- <Form.Item label="手机号码">
|
|
|
+ <Form.Item
|
|
|
+ label="手机号码"
|
|
|
+ hidden={current!==0}
|
|
|
+ name={['addHospitalUserVO','mobilePhone']}>
|
|
|
<Input placeholder='请输入手机号码'/>
|
|
|
</Form.Item>
|
|
|
- <Form.Item label="类型">
|
|
|
+ <Form.Item
|
|
|
+ label="类型"
|
|
|
+ name='type'
|
|
|
+ hidden={current!==0}
|
|
|
+ rules={[{ required: true }]}>
|
|
|
<Select placeholder='请选择类型'>
|
|
|
- <Select.Option value="demo">Demo</Select.Option>
|
|
|
+ <Option value="">全部</Option>
|
|
|
+ {typeList.map((item)=>{
|
|
|
+ return (
|
|
|
+ <Option value={item.name} key={item.name}>{item.val}</Option>
|
|
|
+ )
|
|
|
+ })}
|
|
|
</Select>
|
|
|
</Form.Item>
|
|
|
- <Form.Item label="排序">
|
|
|
+ <Form.Item
|
|
|
+ label="排序"
|
|
|
+ hidden={current!==0}
|
|
|
+ name='orderNo'>
|
|
|
<InputNumber placeholder='大于0的整数' min={0}/>
|
|
|
</Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="用户名"
|
|
|
+ hidden={current!==1}
|
|
|
+ name={['addHospitalUserVO','username']}
|
|
|
+ rules={[{ required: true}]}>
|
|
|
+ <Input placeholder='请输入用户名'/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="初始密码"
|
|
|
+ type="password"
|
|
|
+ hidden={current!==1}
|
|
|
+ name={['addHospitalUserVO','password']}
|
|
|
+ rules={[{ required: true}]}>
|
|
|
+ <Input placeholder='请输入初始密码'/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="确认密码"
|
|
|
+ type="password"
|
|
|
+ name='confirmPsd'
|
|
|
+ dependencies={['addHospitalUserVO','password']}
|
|
|
+ hidden={current!==1}
|
|
|
+ rules={[{ required: true},({ getFieldValue }) => ({
|
|
|
+ validator(_, value) {
|
|
|
+ if (!value || getFieldValue(['addHospitalUserVO','password']) === value) {
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+ return Promise.reject(new Error('两次密码输入不一致!'));
|
|
|
+ },
|
|
|
+ }),]}>
|
|
|
+ <Input placeholder='请输入确认密码'/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="开放系统"
|
|
|
+ type="password"
|
|
|
+ hidden={current!==2}
|
|
|
+ rules={[{ required: true}]}>
|
|
|
+ <Checkbox.Group value={sysCheckeds} onChange={softwareChange}>
|
|
|
+ {
|
|
|
+ treeDatas.map((it, i) => {
|
|
|
+ return (
|
|
|
+ <Form.Item key={it.key} noStyle>
|
|
|
+ <Checkbox key={i} value={it.key}>{it.title}</Checkbox>
|
|
|
+ </Form.Item>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Checkbox.Group>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="菜单权限"
|
|
|
+ hidden={current!==2}
|
|
|
+ required>
|
|
|
+ <Tabs onChange={onTabChange} type="card">
|
|
|
+ {
|
|
|
+ tabDatas.map((it,i)=>{
|
|
|
+ console.log(0,it,i,tabDatas)
|
|
|
+ return (
|
|
|
+ <TabPane tab={it.title} key={i}>
|
|
|
+ <Form.Item key={i} name={['softwares', i, 'softwareMenuIds']} noStyle>
|
|
|
+ <MenuTree data={it} checkEv={(checkedKeys,sourceIds)=>checkTreeEvent(i,checkedKeys,sourceIds)}/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item key={i+"a"} hidden={true} name={['softwares', i, 'id']} noStyle>
|
|
|
+ <Input/>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item key={i+"b"} hidden={true} name={['softwares', i, 'softwareResourceIds']} noStyle>
|
|
|
+ <Input/>
|
|
|
+ </Form.Item>
|
|
|
+ </TabPane>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </Tabs>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item
|
|
|
+ label="当前状态"
|
|
|
+ hidden={current!==2}>
|
|
|
+ <Space>
|
|
|
+ <Form.Item
|
|
|
+ name='status'
|
|
|
+ noStyle>
|
|
|
+ <Switch checked={form.status} onChange={switchStatus} />
|
|
|
+ </Form.Item>
|
|
|
+ <span>启用</span>
|
|
|
+ </Space>
|
|
|
+ </Form.Item>
|
|
|
</Form>
|
|
|
+ <div className="button-box">
|
|
|
+ {current!==0?<Button onClick={handlePre}>上一步</Button>:null}
|
|
|
+ {current!==2?<Button onClick={handleNext} type='primary'>下一步</Button>:null}
|
|
|
+ {current===2?<Button onClick={handleSave} type='primary'>保存</Button>:null}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
|