第二次优化用户管理界面UI，优化消息平台UI

package.json

@@ -112,10 +112,12 @@
     "react": "16.8.6",
     "react-ace": "^9.2.0",
     "react-dom": "16.8.6",
+    "react-grid-layout": "^1.2.5",
     "react-helmet": "6.0.0-beta",
     "react-html-parser": "^2.0.2",
     "react-intl": "2.8.0",
     "react-json-view": "^1.21.3",
+    "react-loader": "^2.4.7",
     "react-redux": "7.0.2",
     "react-resizable": "^1.11.0",
     "react-router-dom": "5.1.0",

src/components/DraggleLayout/DraggleLayout.jsx

+import React, { useRef, useState } from 'react';
+import useDraggable from '../../pages/userCenter/userManage/UserManage';
+import styles from './DraggleLayout.less';
+
+function DraggleLayout({
+  children, // 两列布局
+  min = 0, // 左侧最小宽度
+  max = Infinity, // 左侧最大宽度
+  containerWidth = 0, // 容器宽度
+  containerHeight = 0, // 容器高度
+  initLeftWidth = 0, // 初始左侧容器宽度
+  handler = null, // 拖拽器
+  onWidthChange = width => width, // 左侧容器高度变化
+}) {
+  const ref = useRef(null);
+
+  const [position, setPosition] = useState({ x: initLeftWidth, y: 0 });
+
+  const [props] = useDraggable(
+    ref,
+    {
+      onMouseMove: ({ x, y }) => {
+        let _x = x;
+        if (_x < min) _x = min;
+        if (_x > max) _x = max;
+        if (onWidthChange) onWidthChange(_x);
+        setPosition({ x: _x, y });
+      },
+    },
+    { overbound: false },
+  );
+  const _handler = handler ? (
+    React.cloneElement(handler, {
+      ...handler.props,
+      style: {
+        ...handler.props.style,
+        pointerEvents: 'none',
+      },
+    })
+  ) : (
+    <span style={{ fontSize: 18, pointerEvents: 'none' }}>》</span>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={styles.root}
+      style={{ width: containerWidth, height: containerHeight }}
+    >
+      <div className={styles.left} style={{ width: position.x }}>
+        {children[0]}
+
+        <div className={styles.handler} {...props}>
+          {_handler}
+        </div>
+      </div>
+      <div
+        className={styles.right}
+        style={{ width: containerWidth - position.x }}
+      >
+        {children[1]}
+      </div>
+    </div>
+  );
+}
+
+export default DraggleLayout;

src/components/DraggleLayout/DraggleLayout.less

+.root {
+    position: relative;
+    display: flex;
+    margin: 24px auto;
+    .left {
+      height: 100%;
+      position: relative;
+      .handler {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: 100%;
+  
+        user-select: none;
+        color: #fff;
+        text-align: center;
+        cursor: ew-resize;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+    .right {
+      height: 100%;
+    }
+  }
+  
\ No newline at end of file

src/components/DraggleLayout/index.js

+/*
+ * @Description: 
+ * @Author: leizhe
+ * @Date: 2021-06-30 11:10:44
+ * @LastEditTime: 2021-06-30 11:36:53
+ * @LastEditors: leizhe
+ */
+import DraggleLayout from './DraggleLayout';
+
+export default DraggleLayout;

src/pages/platformCenter/messageManage/templateManage/TemplateManage.jsx

@@ -7,9 +7,10 @@ import {
     Button,
     Select,
     Popconfirm,
-    message
+    message,
+    Tooltip
 } from 'antd';
-import { PlusCircleOutlined } from '@ant-design/icons';
+import { PlusCircleOutlined, EditTwoTone, DeleteOutlined} from '@ant-design/icons';
 
 const { Search } = Input;
 const { Option } = Select;
@@ -69,62 +70,75 @@ const TemplateManage = () => {
             title: '编号',
             dataIndex: 'Id',
             key: 'Id',
+            align:'center',
+            width:80,
             render: text => <a>{text}</a>,
         },
         {
             title: '模板名称',
             dataIndex: 'name',
             key: 'name',
+            align:'center',
         },
         {
             title: '模板类型',
             dataIndex: 'type',
             key: 'type',
+            align:'center',
         },
         {
             title: '第三方模板名称',
             dataIndex: 'third_name',
             key: 'third_name',
+            align:'center',
         },
         {
             title: '第三方模版编号',
             dataIndex: 'third_id',
             key: 'third_id',
+            align:'center',
         },
         {
             title: '模板参数',
             dataIndex: 'template_params',
             key: 'template_params',
+            align:'center',
         },
         {
             title: '模板参数说明',
             dataIndex: 'desc',
             key: 'desc',
+            align:'center',
         },
         {
             title: '解析参数',
             dataIndex: 'analysis_params',
             key: 'analysis_params',
+            align:'center',
         },
         {
             title: '操作',
             dataIndex: 'action',
             key: 'action',
-            width: 250,
+            align:'center',
+            width: 150,
             ellipsis: true,
             render: (text, record) => (
                 <Space>
-                    <Button
+                    <Tooltip title="编辑">
+                    <EditTwoTone
                         type="primary"
                         size="small"
                         onClick={() => {
                             changeDesc(record);
                         }}
-                    >
-                        编辑
-                </Button>
+                        style={{ fontSize: '16px' }}
+                    />
+                    </Tooltip>
+                    <Tooltip title="删除">
                     <div onClick={e => e.stopPropagation()}>
                         <Popconfirm
+                            placement="bottomRight"
                             title="是否删除该模板？"
                             okText="确认"
                             cancelText="取消"
@@ -132,11 +146,10 @@ const TemplateManage = () => {
                                 delTemplate(record);
                             }}
                         >
-                            <Button size="small" danger>
-                                删除
-                    </Button>
+                            <DeleteOutlined danger style={{ fontSize: '16px', color: '#e86060' }}/>
                         </Popconfirm>
                     </div>
+                    </Tooltip>
                 </Space>
             ),
         },
@@ -242,7 +255,7 @@ const TemplateManage = () => {
             <div className={styles.operate_bar}>
                 <div className={styles.template_type}>
                     <div className={styles.title}>模板类型</div>
-                    <Select placeholder="请选择是否!" defaultValue="全部" onChange={handleSelectType}>
+                    <Select placeholder="请选择是否!" defaultValue="全部" style={{ width: "150px" }} onChange={handleSelectType} className={styles.select}>
                         <Option value="全部">全部</Option>
                         <Option value="公众号">公众号</Option>
                         <Option value="短信">短信</Option>
@@ -263,7 +276,7 @@ const TemplateManage = () => {
                 </div>
                 <Button type="primary" onClick={handleReset}>重置</Button>
 
-                <Button type="primary" style={{ marginLeft: "10px" }} icon={<PlusCircleOutlined />} onClick={AddTemplate}>新增</Button>
+                <Button type="primary" style={{ marginLeft: "10px"}} icon={<PlusCircleOutlined style={{ verticalAlign:"middle"}}/>} onClick={AddTemplate}><span style={{ marginTop:"-3px"}}>新增</span></Button>
 
             </div>
             <div className={styles.list_view}>

src/pages/platformCenter/messageManage/templateManage/TemplateManage.less

@@ -18,8 +18,8 @@
             justify-content: flex-start;
             align-items: center; 
             .title{
-                margin-left: 5px;
-                margin-right: 5px;
+                margin-left: 10px;
+                margin-right: 10px;
             } 
         }
         .fast_search{
@@ -41,4 +41,12 @@
         background-color: white;
        overflow-y: scroll;
     }
+    .button, html [type="button"], [type="reset"], [type="submit"] {
+        -webkit-appearance: button;
+        display: flex;
+        align-items: center;
+    }
+    .ant-col ant-form-item-control{
+        margin-top: 0;
+    }
 }
\ No newline at end of file

src/pages/userCenter/siteManageV2/siteManage.jsx

@@ -494,7 +494,7 @@ const SiteManageV2 = () => {
                             autoExpandParent
                             selectedKeys={[currentStation]}
                             onSelect={onSelect}
-                            height={treeData.length && treeData.length > 30 ? treeData.length * 14 : 900}
+                            height={treeData.length && treeData.length > 30 ? treeData.length * 14 : 780}
                             treeData={treeData.map(t => mapTree(t))}
                         />
                     )}

src/pages/userCenter/userManage/AddUserModal.jsx

@@ -117,7 +117,7 @@ const AddUserModal = props => {
           label="账户密码"
           rules={[{ 
             pattern: /^[^\s]*$/,
-            message: '不能为空' }
+            message: '不能为空' },
           ]}
         >
           <Input placeholder="请输入账户密码,至少6位" />

src/pages/userCenter/userManage/AuthModal.jsx

 import React, { useEffect, useState } from 'react'
-import { Modal, Form, Input, notification, message, Radio, Checkbox } from 'antd';
+import { Modal, Form, Input, notification, message, Radio, Checkbox, Space} from 'antd';
 import { AddUserAuthSetting, GetUserAuthSet, } from '@/services/database/api'
 import SiteModal from '@/components/Modal/SiteModa';
 
@@ -60,11 +60,13 @@ const AuthModal = props => {
                         label="数据权限"
                         name="operate_type"
                     >
+                        
                         <Radio.Group
                             defaultValue={selectValue}
                             options={plainOptions}
                             onChange={onTypeChange}
                         />
+                        
                     </Item>
                 </Form>
             </div>

src/pages/userCenter/userManage/UserManage.js

@@ -14,6 +14,8 @@ import {
   Dropdown,
   Menu,
   Popconfirm,
+  Form,
+  Radio,
 } from 'antd';
 import {
   UserOutlined,
@@ -65,6 +67,7 @@ import {
   JumpToAnotherOUNew,
   DeleteUserNew,
 } from '@/services/userCenter/userManage/api';
+import { AddUserAuthSetting, GetUserAuthSet, } from '@/services/database/api'
 import Tree from '@/components/ExpendableTree';
 import classnames from 'classnames';
 import AddUserModal from './AddUserModal';
@@ -78,10 +81,16 @@ import MapScopeEditModal from '@/components/MapScope';
 import AuthModal from './AuthModal';
 import styles from './UserManage.less';
 import { createGuid } from '@/utils/transformUtil';
+import DraggleLayout from 'components/DraggleLayout';
 
 const UserManage = () => {
   const { TreeNode } = Tree;
 
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  const [selectValue,setSelctValue] = useState(1)//用户鉴权
+
+  const [width, setWidth] = useState(50);
   const [treeLoading, setTreeLoading] = useState(false);
   const [tableLoading, setTableLoading] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -144,6 +153,7 @@ const UserManage = () => {
       title: '登录名',
       dataIndex: 'loginName',
       key: 'loginName',
+      width: 150,
       // fixed: 'left',
       render: item => (
         <div
@@ -159,6 +169,7 @@ const UserManage = () => {
       title: '用户姓名',
       dataIndex: 'userName',
       key: 'userName',
+      width: 150,
       render: item => (
         <div
           ref={r => {
@@ -173,7 +184,7 @@ const UserManage = () => {
       title: '所在机构',
       dataIndex: 'OUName',
       key: 'OUName',
-      width: 230,
+      width: 150,
       ellipsis: true,
       filters: orgFilters,
       onFilter: (value, record) => record.OUName === value,
@@ -270,7 +281,7 @@ const UserManage = () => {
           {(record.state == 0 || record.state == null) && (
             <>
         
-             {     console.log(record.state,'record.state')}
+             {/* {     console.log(record.state,'record.state')} */}
               <Tooltip title="冻结用户">
                 <Popconfirm
                   placement="bottomRight"
@@ -321,10 +332,39 @@ const UserManage = () => {
             </>
           )}
           <Tooltip title="用户鉴权">
+          <Popconfirm
+              placement="bottomRight"
+              title={
+                <div style={{ width: '130px' }}>
+                <Form form={form}>
+                    <Item
+                        
+                    >
+                        <Radio.Group
+                            defaultValue={selectValue}
+                            onChange={onTypeChange}
+                        >
+                          <Space direction="vertical">
+                             <Radio value={0}>访客</Radio>
+                             <Radio value={1}>普通用户</Radio>
+                             <Radio value={2}>管理员</Radio>
+                             <Radio value={3}>超级管理员</Radio>
+                          </Space>
+                        </Radio.Group>
+                        
+                    </Item>
+                </Form>
+            </div>
+              }
+              
+              okText="确认"
+              cancelText="取消"
+              onConfirm={() => authUser(record)}
+            >
             <LockOutlined
-              onClick={() => authUser(record)}
               style={{ fontSize: '16px', color: '#1890ff' }}
             />
+            </Popconfirm>
           </Tooltip>
           <Tooltip title="删除用户">
             <Popconfirm
@@ -382,13 +422,13 @@ const UserManage = () => {
           <span className={styles.titleText}>{org.text}</span>
           <span className={styles.tip}>
             <Tooltip title="" className={styles.fs}>
-              <Dropdown style={{ position: 'relative', zIndex: '99', width: '5rem' }} onClick={changeUsers} overlay={orgButtonMenu} disabled={currentOrgOperate}>
+              <Dropdown overlay={orgButtonMenu} disabled={currentOrgOperate}>
                 <PlusOutlined style={{ marginLeft: 20 }} />
               </Dropdown>
             </Tooltip>
 
             <Dropdown overlay={orgButtonMenu1} disabled={currentOrgOperate}>
-              <EllipsisOutlined style={{ marginLeft: 20 }} />
+              <EllipsisOutlined style={{ marginLeft: 10 ,fontSize: '20px'}} />
             </Dropdown>
           </span>
         </div>
@@ -398,9 +438,7 @@ const UserManage = () => {
       children: haveChildren ? org.children.map(i => mapTree(i)) : [],
     };
   };
-  const changeUsers = (e) => {
-    e.stopPropagation();
-  }
+
   // 重新渲染树
   const updateTrees = () => {
     setTreeLoading(true);
@@ -489,7 +527,6 @@ const UserManage = () => {
       groupID: props[0],
     }).then(res => {
       if (res.code === 0) {
-        console.log(res.data.MapRange);
         setCurrentOrgArea(res.data.MapRange);
         setCurrentOrgDistinct(res.data.AreeName);
       }
@@ -705,11 +742,37 @@ const UserManage = () => {
         message.error(err);
       });
   };
+
   // 用户鉴权
+  useEffect(() => {
+    currentUser.userID 
+    GetUserAuthSet({
+        UserId: currentUser.userID
+    }).then(
+        res => {
+            if(res.code == 0){
+                setSelctValue(res.data)
+                console.log(selectValue);
+                console.log(res.data);
+            }
+        }
+    )
+}, [currentUser])
+const onTypeChange = (value) => {
+    console.log(value);
+    setSelctValue(value)
+}
   const authUser = record => {
     setCurrentUser(record);
-    setAuthUserVisible(true);
+    AddUserAuthSetting({userId:currentUser.userID}).then(
+      res =>{
+          if(res.code == 0){
+              message.info("提交成功")
+          }
+      }
+  )
   };
+
   // 查找用户
   const submitSearchUser = () => {
     // getUserByKey(searchWord)
@@ -1051,6 +1114,10 @@ const UserManage = () => {
         message.error(err);
       });
   };
+
+  const handleReset = () => {
+    updateTrees();
+}
   // 更改机构范围
   const submitExtent = (extent, areaName) => {
     if (extent) {
@@ -1128,8 +1195,7 @@ const UserManage = () => {
             <div>
               <span
                 style={{
-                  margin: '0px 120px 0px 4px',
-                  fontSize: '17px ',
+                  fontSize: '15px ',
                   fontWeight: 'bold',
                 }}
               >
@@ -1140,12 +1206,13 @@ const UserManage = () => {
                   onClick={() => addOrg()}
                   style={{
                     color: '#1890FF',
-                    fontSize: '35px',
+                    fontSize: '25px',
                     verticalAlign: 'middle',
+                    float:'right'
                   }}
                 />
               </Tooltip>
-              <hr style={{ width: '80%', color: '#eeecec' }} />
+              <hr style={{ width: '100%', color: '#eeecec' }} />
               {treeData.length > 0 && (
                 <Tree
                   showIcon="true"
@@ -1156,6 +1223,7 @@ const UserManage = () => {
                   // defaultExpandAll
                   selectedKeys={[currentSelectOrg]}
                   onSelect={onSelect}
+                  height={treeData.length && treeData.length > 30 ? treeData.length * 13 : 1000}
                   treeData={treeData.map(t => mapTree(t))}
                 />
               )}
@@ -1174,6 +1242,7 @@ const UserManage = () => {
             </div>
           </Card>
         </Spin>
+        
         {/* 右侧用户表 */}
         <div
           className={classnames({
@@ -1199,7 +1268,7 @@ const UserManage = () => {
                 value={searchWord}
               />
 
-              <Button icon={<SyncOutlined />}>重置</Button>
+              <Button icon={<SyncOutlined /> } onClick={handleReset}>重置</Button>
 
               <Dropdown overlay={userButtonMenu} disabled={multiOperate}>
                 <Button type={multiOperateButtonType}>
@@ -1232,7 +1301,9 @@ const UserManage = () => {
               showSizeChanger: true,
             }}
           />
-        </div>
+           </div>
+         
+
         {/* Modal弹框 */}
         {/* 添加用户 */}
         <AddUserModal
@@ -1352,7 +1423,7 @@ const UserManage = () => {
             {+currentUser.state ? '激活' : '冻结'}？
           </p>
         </Modal> */}
-        {/* 删除用户 */}
+        {/* 多选删除用户 */}
         <Modal
           title="确认删除用户"
           visible={deleteUserVisible}
@@ -1377,13 +1448,55 @@ const UserManage = () => {
           distinct={currentOrgDistinct}
           extent={currentOrgArea}
         />
-        <AuthModal
+        {/* <AuthModal
           visible={authUserVisible}
           currentUser={currentUser}
           onCancel={() => setAuthUserVisible(false)}
-        />
+        /> */}
       </div>
     </PageContainer>
+    // <DraggleLayout
+    //     containerWidth={550}
+    //     containerHeight={220}
+    //     min={50}
+    //     max={500}
+    //     initLeftWidth={100}
+    //     onWidthChange={w => setWidth(w)}
+    //     handler={
+    //       <div
+    //         style={{
+    //           width: 4,
+    //           height: '100%',
+    //           background: 'rgb(77, 81, 100)',
+    //         }}
+    //       />
+    //     }
+    //   >
+    //     <div
+    //       style={{
+    //         backgroundColor: `rgb(36, 205, 208)`,
+    //         color: `#fff`,
+    //         height: '100%',
+    //         display: 'flex',
+    //         alignItems: 'center',
+    //         justifyContent: 'center',
+    //       }}
+    //     >
+    //       left
+    //     </div>
+    //     <div
+    //       style={{
+    //         backgroundColor: `rgb(116, 140, 253)`,
+    //         color: `#fff`,
+    //         height: '100%',
+    //         display: 'flex',
+    //         alignItems: 'center',
+    //         justifyContent: 'center',
+    //       }}
+    //     >
+    //       right
+    //     </div>
+    //   </DraggleLayout>
   );
 };
 

src/pages/userCenter/userManage/UserManage.less

-
 :global{
     ::-webkit-scrollbar {
         height: 6px;//x轴滚动条粗细
@@ -20,6 +19,7 @@
         background: white;//滚动槽背景色
         border-radius: 10px;//滚动条边框半径设置
     }
+   
     .ant-tree-node-content-wrapper{
         width:100%;
         overflow: hidden !important;
@@ -108,7 +108,7 @@
         position: relative;
         .orgContainer{
             height: calc(100vh - 74px);
-            width: 260px;
+            width: 340px;
             left: 0;
             top: 0;
             overflow-x: hidden;
@@ -133,7 +133,7 @@
                 position: absolute;
                 font-size: 18px;
                 color: #1890FF!important;
-                top: 45%;
+                top: 50%;
                 right: 2px;
                 transform: translate(0%,-50%);
                 z-index: 1;
@@ -250,9 +250,9 @@
     margin-bottom: 0;
     margin-left: 15px;
 }
-.ant-form-horizontal .ant-form-item-control {
-    margin-left: 10px;
-}
+// .ant-form-horizontal .ant-form-item-control {
+//     margin-left: 10px;
+// }
 .title{
     display: flex;
     align-items: center;
@@ -267,11 +267,56 @@
   }
   .title:hover{
     .tip{
-    position: relative;
-      z-index: 99;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       width: 100%;
     }
-  }
\ No newline at end of file
+  }
+  .titleText{
+    width: 12rem;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+  }
+  .ant-popover-inner {
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.788);
+    
+  }
+  .ant-popover-inner-content {
+    padding: 10px 10px;
+}
+.ant-popover-message {
+    position: relative;
+    padding: 0px 0 0px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+}
+.ant-popover-message {
+    padding: 0px 0 0px;
+}
+.ant-popover-message-title {
+    padding-left: 20px;
+}
+.ant-form-item {
+    vertical-align: top;
+}
+.ant-form-item-label > label {
+    align-items:middle;
+}
+.ant-radio-group {
+    margin: 8px;
+}
+.ant-popover-message > .anticon { 
+    top: 7.0005px
+}
+// .ant-tree {
+//     overflow-y: scroll;
+//     height: calc(100vh - 150px);
+// }
+
+.anticon svg {
+    margin-top: -3px;
+}
+