新增弹窗

src/components/OrgManager/AddSubOrg.js

@@ -0,0 +1,71 @@
+import {useEffect,useState} from 'react';
+import { Form, Input, Button, Radio, Select,Steps,DatePicker,InputNumber,TreeSelect,Switch, } from 'antd';
+import './index.less';
+const { Step } = Steps;
+function AddSubOrg(){
+    const [current, setCurrent] = useState(0);
+    const steps = [
+        {
+            title: '基础信息',
+            content: 'First-content',
+        },
+        {
+            title: '设置管理员',
+            content: 'Second-content',
+        },
+        {
+            title: '分配权限',
+            content: 'Last-content',
+        },
+    ];
+
+    const next = () => {
+        setCurrent(current + 1);
+    };
+    return (
+        <div className="add-container">
+            <Steps current={current} labelPlacement='vertical'>
+                {steps.map(item => (
+                    <Step key={item.title} title={item.title} />
+                ))}
+            </Steps>
+            <div className="steps-content"><FirstStep /></div>
+        </div>
+    )
+}
+
+function FirstStep(){
+    return (
+        <Form
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 16 }}
+            layout="horizontal"
+        >
+            <Form.Item label="上级组织">
+                <Input disabled required/>
+            </Form.Item>
+            <Form.Item label="组织名称">
+                <Input placeholder='请输入组织名称' required/>
+            </Form.Item>
+            <Form.Item label="组织编码">
+                <Input placeholder='请输入组织编码' />
+            </Form.Item>
+            <Form.Item label="联系人">
+                <Input  placeholder='请输入联系人'/>
+            </Form.Item>
+            <Form.Item label="手机号码">
+                <Input  placeholder='请输入手机号码'/>
+            </Form.Item>
+            <Form.Item label="类型">
+                <Select placeholder='请选择类型'>
+                    <Select.Option value="demo">Demo</Select.Option>
+                </Select>
+            </Form.Item>
+            <Form.Item label="排序">
+                <InputNumber placeholder='大于0的整数' min={0}/>
+            </Form.Item>
+        </Form>
+    )
+}
+
+export default AddSubOrg;

src/components/OrgManager/index.js

@@ -1,7 +1,8 @@
 import {useEffect,useState} from 'react';
 import { useDispatch,useSelector } from 'react-redux'
-import { Table,Modal, message, Menu, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { Table,Modal, message, Menu, Breadcrumb, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
+import { DownOutlined,PlusOutlined } from '@ant-design/icons';
+import AddSubOrg from './AddSubOrg';
 import './index.less';
 import apiObj from '@api/index';
 import utils from '@utils/index';
@@ -18,6 +19,7 @@ function OrgManager(){
     const [dataSource, setDataSource] = useState([]);
     const [typeList,setTypeList] = useState([]);
     const [visible,setVisible] = useState(false);
+    const [addVisible,setAddVisible] = useState(false);
     const [confirmLoading, setConfirmLoading] = useState(false);
     //弹窗类型：1删除 2有子组织删除 3有用户删除 4禁用 5有子组织禁用 6有用户禁用 7重置密码
     const [modalType,setModalType] = useState(1);
@@ -114,6 +116,10 @@ function OrgManager(){
     function handleCancel(){
         setVisible(false);
     }
+    //新增子组织弹窗
+    function showAddModal(){
+        setAddVisible(true);
+    }
     //表格渲染
     function RenderTable(){
         const columns = [
@@ -223,8 +229,15 @@ function OrgManager(){
                     </Row>
                 </Form>
             </div>
-
-            <RenderTable />
+            <div className="table">
+                <div className="table-header">
+                    <Breadcrumb>
+                        <Breadcrumb.Item>组织管理</Breadcrumb.Item>
+                    </Breadcrumb>
+                    <Button type="primary" icon={<PlusOutlined />} onClick={e => showAddModal('新增子组织', true)}>新增子组织</Button>
+                </div>
+                <RenderTable />
+            </div>
             <Modal
                 title="提示"
                 okText='确定'
@@ -237,6 +250,18 @@ function OrgManager(){
             >
                 <p>{tipText[modalType]}</p>
             </Modal>
+            <Modal
+                title="提示"
+                okText='确定'
+                cancelText='取消'
+                width={690}
+                visible={addVisible}
+                onOk={handleOk}
+                confirmLoading={confirmLoading}
+                onCancel={handleCancel}
+            >
+                <AddSubOrg />
+            </Modal>
         </div>
     )
 }

src/components/OrgManager/index.less

@@ -9,4 +9,21 @@
   background: @table-th-color;
   color: @text-color;
   border-bottom: 1px #D8D8D8 solid;
+}
+.ant-steps-item-title{
+  font-size: 14px;
+}
+.steps-content{
+  margin-top:40px ;
+}
+
+.table-header{
+  display: flex;
+  justify-content: space-between;
+  padding: 24px 0;
+  .ant-breadcrumb-link{
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+  }
 }