数据权限

src/components/DataManager/AddData.js

@@ -0,0 +1,234 @@
+import { useEffect, useState, useContext } from 'react';
+import { Form, Input, Button, Steps, Tabs, Space, Switch, Breadcrumb, Radio, TreeSelect, Tree, Tag } from 'antd';
+import './index.less';
+import DataContext from './data-context';
+import apiObj from '@api/index';
+import backIcon from "@images/back.png";
+import DoctorList from "./doctorList"
+const { post, api, xPost } = apiObj;
+const { SHOW_PARENT } = TreeSelect;
+const { Step } = Steps;
+const { TabPane } = Tabs;
+function AddData(props) {
+  const { back } = props;
+  const [value, setValue] = useState('1');
+  const [treeRloe, setTreeRloe] = useState([]);
+  const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
+  const [form] = Form.useForm();
+  const layout = {
+    labelCol: { span: 3 },
+    wrapperCol: { span: 20 },
+  };
+  const treeData = [
+    {
+      title: '0-0',
+      key: '0-0',
+      children: [
+        {
+          title: '0-0-0',
+          key: '0-0-0',
+          children: [
+            {
+              title: '0-0-0-0',
+              key: '0-0-0-0',
+            },
+            {
+              title: '0-0-0-1',
+              key: '0-0-0-1',
+            },
+            {
+              title: '0-0-0-2',
+              key: '0-0-0-2',
+            },
+          ],
+        },
+        {
+          title: '0-0-1',
+          key: '0-0-1',
+          children: [
+            {
+              title: '0-0-1-0',
+              key: '0-0-1-0',
+            },
+            {
+              title: '0-0-1-1',
+              key: '0-0-1-1',
+            },
+            {
+              title: '0-0-1-2',
+              key: '0-0-1-2',
+            },
+          ],
+        },
+        {
+          title: '0-0-2',
+          key: '0-0-2',
+        },
+      ],
+    },
+    {
+      title: '0-1',
+      key: '0-1',
+      children: [
+        {
+          title: '0-1-0-0',
+          key: '0-1-0-0',
+        },
+        {
+          title: '0-1-0-1',
+          key: '0-1-0-1',
+        },
+        {
+          title: '0-1-0-2',
+          key: '0-1-0-2',
+        },
+      ],
+    },
+    {
+      title: '0-2',
+      key: '0-2',
+    },
+  ];
+  const [expandedKeys, setExpandedKeys] = useState(['0-0-0', '0-0-1']);
+  const [checkedKeys, setCheckedKeys] = useState(['0-0-0']);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+
+
+  const onExpand = (expandedKeysValue) => {
+    console.log('onExpand', expandedKeysValue); // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+    // or, you can remove all expanded children keys.
+
+    setExpandedKeys(expandedKeysValue);
+    setAutoExpandParent(false);
+  };
+
+  const onCheck = (checkedKeysValue) => {
+    console.log('onCheck', checkedKeysValue);
+    setCheckedKeys(checkedKeysValue);
+  };
+
+  const onSelect = (selectedKeysValue, info) => {
+    console.log('onSelect', info);
+    setSelectedKeys(selectedKeysValue);
+  };
+  const validateMessages = {
+    required: '${label} is required!',
+    types: {
+      email: '${label} is not a valid email!',
+      number: '${label} is not a valid number!',
+    },
+    number: {
+      range: '${label} must be between ${min} and ${max}',
+    },
+  };
+  const onChange = e => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value)
+  };
+  function callback(key) {
+    console.log(key);
+  }
+  const onFinish = (values: any) => {
+    console.log(values);
+  };
+  function swichChange(val) {
+    form.setFieldsValue({ status: val ? 1 : 0 })
+  }
+  return (
+    <>
+      <Breadcrumb separator="">
+        <Breadcrumb.Item><img className='back-icon' src={backIcon} onClick={back} alt="返回上一页" /></Breadcrumb.Item>
+        <Breadcrumb.Item>组织管理</Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>新增子组织</Breadcrumb.Item>
+      </Breadcrumb>
+      <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
+        <Form.Item name={['user', 'name']} label="数据权限名称" rules={[{ required: true }]}>
+          <Input placeholder="请填写数据权限名称" />
+        </Form.Item>
+        <Form.Item name={['user', 'email']} label="权限范围" rules={[{ type: 'email' }]}>
+          <Tabs defaultActiveKey="1" onChange={callback} >
+            <TabPane tab="AI终末质控系统" key="1">
+              <Radio.Group onChange={onChange} value={value} className="radio">
+                <Space direction="vertical">
+                  <Radio value={1}>全部组织</Radio>
+                  <Radio value={2}>全部科室</Radio>
+                  <Radio value={3}>全部科室除本科室外</Radio>
+                  <Radio value={4}>本科室</Radio>
+                  <Radio value={5}>本医疗组</Radio>
+                  <Radio value={6}>本人</Radio>
+                  <Radio value={7}>自定义</Radio>
+                </Space>
+              </Radio.Group>
+            </TabPane>
+            <TabPane tab="AI终末质控系统" key="2">
+              Content of Tab Pane 2
+            </TabPane>
+          </Tabs>
+        </Form.Item>
+        <Form.Item>
+          {tags.map((tag, index) => {
+            return (
+              <Tag>{tag}</Tag>
+            );
+          }
+          )
+          }
+        </Form.Item>
+
+        <Form.Item
+          name="roles"
+          label="所属角色"
+        >
+          <Tabs defaultActiveKey="1" onChange={callback} >
+            <TabPane tab="AI终末质控系统" key="1">
+              <DoctorList />
+            </TabPane>
+            <TabPane tab="AI终末质控系统" key="2">
+              <Tree
+                checkable
+                onExpand={onExpand}
+                expandedKeys={expandedKeys}
+                autoExpandParent={autoExpandParent}
+                onCheck={onCheck}
+                checkedKeys={checkedKeys}
+                onSelect={onSelect}
+                selectedKeys={selectedKeys}
+                treeData={treeData}
+              />
+            </TabPane>
+          </Tabs>
+        </Form.Item>
+        <Form.Item
+          name="roles"
+          label="所属角色"
+        >
+          <TreeSelect
+            showSearch={false}
+            treeData={treeRloe}
+            treeCheckable
+            showCheckedStrategy={SHOW_PARENT}
+            placeholder="请选择组织"
+            style={{ width: '100%' }}
+          />
+        </Form.Item>
+        <Form.Item
+          name="status"
+          valuePropName="checked"
+          label="当前状态"
+          rules={[{ required: true, message: '请选择状态' }]}
+        >
+          <Switch onChange={swichChange} />
+        </Form.Item>
+        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
+          <Button type="primary" htmlType="submit">
+            Submit
+        </Button>
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default AddData;

src/components/DataManager/data-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+const DataContext = createContext(null);
+
+export default DataContext;

src/components/DataManager/doctorList.js

@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Table, Select, Pagination, Space, TreeSelect, Tag } from 'antd';
+import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import apiObj from '@api/index';
+const { post, api, xPost } = apiObj;
+const { Option } = Select;
+const { SHOW_PARENT } = TreeSelect;
+function DoctorList() {
+  useEffect(() => {
+    getDoctorPage();
+    getHospitalTree()
+  }, []);
+  const [doctorList, setDoctorList] = useState([]);
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [pages, setPages] = useState("1");
+  const [current, setCurrent] = useState("5");
+  const [treeData, setTreeData] = useState([]);
+  const [addHospitalTreeVO, setAddHospitalTreeVO] = useState({
+    depts: [],
+    hospitals: []
+  });
+  const [form] = Form.useForm();
+
+  //获取可看医生列表
+  function getDoctorPage() {
+    const param = {
+      pages: pages,
+      current: current,
+      mobilePhone: phone,
+      name: name,
+      depts: addHospitalTreeVO.depts,
+      hospitals: unique(addHospitalTreeVO.hospitals)
+    }
+    post(api.getDoctorPage, param).then((res) => {
+      if (res.data.code === 200) {
+        const data = res.data.data;
+        setDoctorList(data.records);
+      }
+    })
+  }
+  //获取当前用户组织
+  function getHospitalTree() {
+    post(api.getHospitalTree).then((res) => {
+      if (res.data.code === 200) {
+        const data = res.data.data;
+        let arr = data[0].children ? data[0].children[0].children : []
+        setTreeData(arr)
+      }
+    })
+  }
+  // 处理组织结构数据
+  function organizationData(arr) {
+    let list = []
+    arr.forEach(item => {
+      list.push({
+        children: item.depts,
+        title: item.hospitalName,
+        value: item.parentId + '-' + item.hospitalId
+      })
+      item.depts.forEach(its => {
+        its.value = item.parentId + '-' + item.hospitalId + '-' + its.deptId
+      })
+    })
+    arr = JSON.parse(JSON.stringify(list).replaceAll(/deptName/g, 'title').replaceAll(/deptId/g, 'value'))
+    return arr
+  }
+  // 去重
+  function unique(arr) {
+    return arr.filter(function (item, index, arr) {
+      return arr.indexOf(item, 0) === index;
+    });
+  }
+  const onFinish = (value) => {
+    getDoctorPage(value);
+  };
+  const onReset = () => {
+    form.resetFields();
+    getDoctorPage();
+  };
+  const handleName = (event) => {
+    setName(event.target.value)
+  }
+  const handlePhone = (event) => {
+    setPhone(event.target.value)
+  }
+  
+  const columns = [
+    { title: '姓名', dataIndex: 'name', key: 'index' },
+    { title: '电话号码', dataIndex: 'mobilePhone', key: 'index' },
+    { title: '所属组织', dataIndex: 'hospitalName', key: 'index' },
+  ]
+  const onChange = value => {
+    let addHospitalTreeVO = {
+      depts: [],
+      hospitals: []
+    }
+    value.forEach(it => {
+      let arr = it.split('-')
+      let len = arr.length
+      if (len == 3) {
+        addHospitalTreeVO.depts.push(arr[2])
+      } else {
+        addHospitalTreeVO.hospitals.push(arr[1])
+        organizationData(treeData).forEach(item => {
+          if (item.value.split('-')[1] == arr[1]) {
+            item.children.forEach(its => {
+              addHospitalTreeVO.depts.push(its.value.split('-')[2])
+            })
+          }
+        })
+      }
+    })
+    setAddHospitalTreeVO(addHospitalTreeVO)
+  };
+  function submit(){
+    getDoctorPage()
+  }
+  return (
+    <div className="wrapper">
+      <div className="doctor_header">
+        <div className="doctor_header_left">
+          <div className="left_item">
+            姓名：<Input placeholder="用户名" onChange={e => handleName(e)} style={{ width: 160 }} />
+          </div>
+          <div className="left_item">
+            手机号码：<Input placeholder="用户名" onChange={e => handlePhone(e)} style={{ width: 160 }} />
+          </div>
+          <div className="left_item">
+            所属组织：
+            <TreeSelect
+              showSearch={false}
+              treeData={organizationData(treeData)}
+              onChange={onChange}
+              treeCheckable
+              maxTagCount={1}
+              showCheckedStrategy={SHOW_PARENT}
+              placeholder="请选择组织"
+              style={{ width: 160 }}
+            />
+          </div>
+          <div className="left_item">
+            <Space size="middle">
+              <Button onClick={onReset}>
+                重置
+              </Button>
+              <Button type="primary" onClick={submit}>
+                查询
+              </Button>
+            </Space>
+          </div>
+        </div>
+      </div>
+
+      <div className="table">
+        <div className="table-header">
+          <span className="table-header-title">医生列表</span>
+        </div>
+
+        <Table
+          columns={columns}
+          dataSource={doctorList}
+          rowKey={record => record.id}
+          pagination={{
+            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
+            pageSizeOptions: ['15', '30', '60', '120'],
+            pageSize: 5,
+          }} />
+      </div>
+    </div>
+  )
+}
+
+export default DoctorList;

src/components/DataManager/index.js

@@ -1,24 +1,36 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Table, Select, Pagination, Space, Modal,Row,Col } from 'antd';
+import { Form, Input, Button, Table, Select, Pagination, Space, Modal, message, Row, Col } from 'antd';
 import { DownOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 // import NormalPlayer from './testComponent/testComponent'
 import '@common/common.less';
 import apiObj from '@api/index';
-const { post, api } = apiObj;
+import DataContext from './data-context';
+import AddData from './AddData';
+
+const { post, api, xPost } = apiObj;
 const { Option } = Select;
-function UserManager() {
+function DataManager() {
   useEffect(() => {
     getDataAuthPage();
   }, []);
   const [userList, setUserList] = useState([]);
   const [title, setTitle] = useState("");
+  const [id, setId] = useState("");
   const [visible, setVisible] = useState(false);
-  const ChildrenChange = (val) => {//这个val就是子组件传来的
-    setVisible(false);
-  }
-  const showModal = (name, type) => {
+  const [modalType, setModalType] = useState("");
+  const [msvisible, setMsvisible] = useState(false);
+  const [type, setType] = useState("");
+  const [addVisible, setaddVisible] = useState("false");
+  const [form] = Form.useForm();
+  const tipText = {
+    1: '确定要删除该数据权限？',
+    2: '禁用后该用户将无法登录，确定要禁用该用户?',
+  };
+
+  const showModal = (name, type, flag) => {
     setVisible(type);
     setTitle(name);
+    setType(flag)
   }
   function getDataAuthPage(param = {}) {
     //const param = filterData;
@@ -29,19 +41,22 @@ function UserManager() {
       }
     })
   }
-  const disableUser = (userId, status) => {
+  //禁用启用
+  const disableAuth = (id, status) => {
     let params = {
-      userId: userId,
+      id: id,
       status: status
     }
-    post(api.disableUser, params).then((res) => {
+    xPost(api.disableAuth, params).then((res) => {
       if (res.data.code === 200) {
-        const data = res.data.data;
-        setUserList(data.records);
+        getDataAuthPage();
+        setMsvisible(false);
+        message.success((status ? '启用' : '禁用') + "成功");
+      } else {
+        message.warning(res.data.msg || '操作失败');
       }
     })
   };
-  const [form] = Form.useForm();
 
   const onFinish = (value) => {
     getDataAuthPage(value);
@@ -50,61 +65,76 @@ function UserManager() {
     form.resetFields();
     getDataAuthPage();
   };
-
-  function confirm() {
-    Modal.confirm({
-      title: '提示',
-      icon: <ExclamationCircleOutlined />,
-      content: 'Bla bla ...',
-      okText: '确认',
-      cancelText: '取消',
-      onOk() {
-        console.log('OK');
-      },
-      onCancel() {
-        console.log('Cancel');
-      },
-    });
-  }
+  const messageBox = (type, id) => {
+    setMsvisible(true)
+    setId(id)
+    setModalType(type)
+  };
   const columns = [
-    { title: '数据权限名称', dataIndex: 'key' },
-    { title: '所属角色', dataIndex: 'key' },
+    { title: '数据权限名称', dataIndex: 'name', key: 'index' },
+    { title: '所属角色', dataIndex: 'roleName', key: 'index' },
     {
-      title: '状态', dataIndex: 'key', render: (text, record) => (
+      title: '状态', dataIndex: 'status', key: 'status', render: (text, record) => (
         <Space size="middle">
-          {record.age == 1 ? (
-            <a>查看</a>
-          ) : (
-              <a >修改</a>
-            )}
+          {record.status == 1 ?
+            <span className="Enable">启用</span>
+            :
+            <span className="Disable">禁用</span>
+          }
         </Space>
       )
     },
     {
       title: '操作', dataIndex: 'key', render: (text, record) => (
         <Space size="middle">
-          <a>修改</a>
-          <a onClick={e => showModal('修改用户', true)} >禁用</a>
-          <a onClick={e => showModal('修改用户', true)} >删除</a>
+          <a onClick={e => showModal('查看用户', true, 3)}>修改</a>
+          {record.status === '1' ? (<a onClick={() => messageBox(2, record.id)}>禁用</a>) : (<a onClick={() => disableAuth(record.id, 1)}>启用</a>)}
+          <a onClick={e => showModal('修改用户', true, 1)} >删除</a>
         </Space>
       )
     }
   ]
-
-  const data = [];
-  for (let i = 0; i < 100; i++) {
-    data.push({
-      key: i,
-      name: 'John Brown',
-      age: i + 1,
-      street: 'Lake Park',
-      building: 'C',
-      number: 2035,
-      companyAddress: 'Lake Street 42',
-      companyName: 'SoftLake Co',
-      gender: 'M',
+  function showAddData() {
+    setaddVisible(true)
+  }
+  //保存
+  function addSubOrg(formData) {
+    console.log('保存参数：', formData);
+    const param = formData;
+    post(api.addHospital, param).then((res) => {
+      if (res.data.code === 200) {
+        // getTableData();
+        // setAddVisible(false);
+        message.success("添加成功");
+      } else {
+        message.warning(res.data.msg || '操作失败');
+      }
+    }).catch(() => {
+      message.error("接口出错");
     });
   }
+  //提示框确认事件
+  function handleOk() {
+    if (modalType == 2) {
+      disableAuth(id, 0)
+    } else if (modalType == 2) {
+      disableAuth(id, 0)
+    }
+  }
+  //提示框取消
+  function handleCancel() {
+    setMsvisible(false);
+  }
+  function goBack() {
+    setaddVisible(false)
+  }
+  if (addVisible) {
+    return (
+      <DataContext.Provider value={{ save: addSubOrg }}>
+        <AddData back={goBack} />
+      </DataContext.Provider>
+    )
+  }
   return (
     <div className="wrapper">
         <div className="filter-box">
@@ -161,7 +191,7 @@ function UserManager() {
 
         <Table
           columns={columns}
-          dataSource={data}
+          dataSource={userList}
           pagination={{
             showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
             pageSizeOptions: ['15', '30', '60', '120'],
@@ -176,4 +206,4 @@ function UserManager() {
   )
 }
 
-export default UserManager;
+export default DataManager;

src/components/DataManager/index.less

@@ -0,0 +1,18 @@
+.radio{
+  margin: 13px 20px;
+}
+.doctor_header{
+ padding: 17px 0 0 20px;
+ .doctor_header_left{
+   display: flex;
+    .left_item{
+      margin-right: 44px;
+    }
+  }
+}
+.table-header{
+  padding:16px 0 6px 0!important;
+  .table-header-title{
+    font-size: 16px;
+  }
+}

src/components/UserManager/user-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+const UserContext = createContext(null);
+
+export default UserContext;