模态更改

internals/webpack/webpack.base.babel.js

@@ -211,7 +211,7 @@ module.exports = options => ({
     alias: {
       '@': path.resolve(process.cwd(), './src'),
       components: path.resolve(process.cwd(), './src/components'),
-      cesium: path.resolve(process.cwd(), cesiumSource ),
+      cesium: path.resolve(process.cwd(), cesiumSource),
     },
   },
   devtool: options.devtool,

package.json

@@ -101,7 +101,7 @@
     "dragm": "^0.0.5",
     "express": "4.16.4",
     "fontfaceobserver": "2.1.0",
-    "gojs": "^2.1.37",
+    "gojs": "2.1.49",
     "history": "4.9.0",
     "hoist-non-react-statics": "3.3.0",
     "immer": "3.0.0",
@@ -114,6 +114,7 @@
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-ace": "^9.2.0",
+    "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "16.8.6",
     "react-grid-layout": "^1.2.5",
     "react-helmet": "6.0.0-beta",

patches/gojs+2.1.49.patch

 diff --git a/node_modules/gojs/release/go.js b/node_modules/gojs/release/go.js
-index 2c43470..f518a15 100644
+index 2c43470..06cf0ce 100644
 --- a/node_modules/gojs/release/go.js
 +++ b/node_modules/gojs/release/go.js
 @@ -803,7 +803,7 @@ R.prototype.findObjectsNear=R.prototype.Eg;R.prototype.findPartsNear=R.prototype
@@ -7,7 +7,7 @@ index 2c43470..f518a15 100644
  var He=null,vi=new H,Pi=null,Oi=null,Wg=void 0!==x.document,Ei=null,Fi="",Lh=new D(R,"None",0),cj=new D(R,"Uniform",1),dj=new D(R,"UniformToFill",2),Of=new D(R,"CycleAll",10),Sf=new D(R,"CycleNotDirected",11),Uf=new D(R,"CycleNotDirectedFast",12),Vf=new D(R,"CycleNotUndirected",13),Pf=new D(R,"CycleDestinationTree",14),Rf=new D(R,"CycleSourceTree",15),Zh=new D(R,"DocumentScroll",1),ai=new D(R,"InfiniteScroll",2),ui=new D(R,"TreeParentCollapsed",21),Ik=new D(R,"AllParentsCollapsed",22),Jk=new D(R,
  "AnyParentsCollapsed",23),Kk=new E,Lk="2.1.49",Fk="image",Mk=null,ri=!1;
 -function si(){if(Wg){var a=x.document.createElement("canvas"),b=a.getContext("2d"),c=Sa("7ca11abfd022028846");b[c]=Sa("398c3597c01238");for(var d=["5da73c80a36455d5038e4972187c3cae51fd22",ra.Dx+"4ae6247590da4bb21c324ba3a84e385776",rd.xF+"fb236cdfda5de14c134ba1a95a2d4c7cc6f93c1387",L.za],e=1;5>e;e++)b[Sa("7ca11abfd7330390")](Sa(d[e-1]),10,15*e);b[c]=Sa("39f046ebb36e4b");for(c=1;5>c;c++)b[Sa("7ca11abfd7330390")](Sa(d[c-1]),10,15*c);if(4!==d.length||"5"!==d[0][0]||"7"!==d[3][0])rd.prototype.Kd=rd.prototype.Yx;
-+function si(){if(Wg){var a=x.document.createElement("canvas"),b=a.getContext("2d"),c=Sa("7ca11abfd022028846");b[c]=Sa("398c3597c01238");for(var d=["5da73c80a36455d5038e4972187c3cae51fd22",ra.Dx+"4ae6247590da4bb21c324ba3a84e385776",rd.xF+"fb236cdfda5de14c134ba1a95a2d4c7cc6f93c1387",L.za],e=1;5>e;e++)/*b[Sa("7ca11abfd7330390")](Sa(d[e-1]),10,15*e);*/Sa(d[e-1]);b[c]=Sa("39f046ebb36e4b");for(c=1;5>c;c++)/*b[Sa("7ca11abfd7330390")](Sa(d[c-1]),10,15*c);*/Sa(d[c-1]);if(4!==d.length||"5"!==d[0][0]||"7"!==d[3][0])rd.prototype.Kd=rd.prototype.Yx;
++function si(){if(Wg){var a=x.document.createElement("canvas"),b=a.getContext("2d"),c=Sa("7ca11abfd022028846");b[c]=Sa("398c3597c01238");for(var d=["5da73c80a36455d5038e4972187c3cae51fd22",ra.Dx+"4ae6247590da4bb21c324ba3a84e385776",rd.xF+"fb236cdfda5de14c134ba1a95a2d4c7cc6f93c1387",L.za],e=1;5>e;e++)/*b[Sa("7ca11abfd7330390")](Sa(d[e-1]),10,15*e);*/Sa(d[e-1]); b[c]=Sa("39f046ebb36e4b");for(c=1;5>c;c++)/*b[Sa("7ca11abfd7330390")](Sa(d[c-1]),10,15*c);*/Sa(d[c-1]); if(4!==d.length||"5"!==d[0][0]||"7"!==d[3][0])rd.prototype.Kd=rd.prototype.Yx;
  Mk=a}}R.className="Diagram";R.fromDiv=function(a){var b=a;"string"===typeof a&&(b=x.document.getElementById(a));return b instanceof HTMLDivElement&&b.B instanceof R?b.B:null};R.inherit=function(a,b){function c(){}if(Object.getPrototypeOf(a).prototype)throw Error("Used go.Diagram.inherit defining already defined class \n"+a);c.prototype=b.prototype;a.prototype=new c;a.prototype.constructor=a};R.None=Lh;R.Uniform=cj;R.UniformToFill=dj;R.CycleAll=Of;R.CycleNotDirected=Sf;R.CycleNotDirectedFast=Uf;
  R.CycleNotUndirected=Vf;R.CycleDestinationTree=Pf;R.CycleSourceTree=Rf;R.DocumentScroll=Zh;R.InfiniteScroll=ai;R.TreeParentCollapsed=ui;R.AllParentsCollapsed=Ik;R.AnyParentsCollapsed=Jk;function Ci(){this.jz=null;this.l="zz@orderNum";"63ad05bbe23a1786468a4c741b6d2"===this._tk?this.We=this.l=!0:this.We=null}
  function zj(a,b){b.Gb.setTransform(b.Tb,0,0,b.Tb,0,0);if(null===a.We){b="f";var c=x[Sa("76a715b2f73f148a")][Sa("72ba13b5")];a.We=!0;if(Wg){var d=R[Sa("76a115b6ed251eaf4692")];if(d)for(var e=Kk.iterator;e.next();){d=e.value;d=Sa(d).split(Sa("39e9"));if(6>d.length)break;var f=Sa(d[1]).split(".");if("7da71ca0"!==d[4])break;var g=Sa(ra[Sa("6cae19")]).split(".");if(f[0]>g[0]||f[0]===g[0]&&f[1]>=g[1]){f=c[Sa("76ad18b4f73e")];for(g=c[Sa("73a612b6fb191d")](Sa("35e7"))+2;g<f;g++)b+=c[g];f=b[Sa("73a612b6fb191d")](Sa(d[2]));

src/containers/App/index.js

@@ -7,15 +7,30 @@ import Authozed from '@/utils/authority';
 import UserLogin from '@/pages/user/login';
 import UserLayout from '@/layouts/UserLayout';
 import { AUTHORITY, BASENAME } from '@/utils/constants';
+import { Modal } from 'antd';
 import { PictureWallProvider } from '@/components/Upload/context';
 export default appConnector(function App(props) {
   const { routesConfig } = props;
+  const getConfirmation = (msg, callBack) => {
+    Modal.confirm({
+      title: '确认',
+      content: msg,
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        callBack(true);
+      },
+      onCancel() {
+        callBack(false);
+      },
+    });
+  };
   return (
     <>
       <Helmet titleTemplate="%s - 运维平台" defaultTitle="运维平台">
         <meta name="description" content="运维平台" />
       </Helmet>
-      <Router basename={BASENAME}>
+      <Router basename={BASENAME} getUserConfirmation={getConfirmation}>
         <Authozed
           noMatch={
             <UserLayout>

src/pages/dataCenter/dictionary1/AppDic.js

@@ -13,8 +13,18 @@ import {
   message,
 } from 'antd';
 import { get, CITY_SERVICE, PUBLISH_SERVICE } from '@/services';
-import { GetKeyValue, EditKeyValue, DeleteKeyValue, AddKeyValue } from '@/services/dataCenter/api'
-import { EditTwoTone, DeleteOutlined, PlusSquareOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  GetKeyValue,
+  EditKeyValue,
+  DeleteKeyValue,
+  AddKeyValue,
+} from '@/services/dataCenter/api';
+import {
+  EditTwoTone,
+  DeleteOutlined,
+  PlusSquareOutlined,
+  SyncOutlined,
+} from '@ant-design/icons';
 import styles from './AppDic.less';
 
 const AppDic = () => {
@@ -127,26 +137,24 @@ const AppDic = () => {
     //     setLoading(false);
     //     message.error(err);
     //   });
-    GetKeyValue({}).then(
-      resnew => {
-        if (resnew.code == 0) {
-          let res = resnew.data
-          if (res.length > 0) {
-            res.map(item => {
-              item.key = item.id;
-              return item;
-            });
-          }
-          setData(res);
-        } else {
-          notification.error({
-            message: '获取失败',
-            description: res.msg,
+    GetKeyValue({}).then(resnew => {
+      if (resnew.code == 0) {
+        let res = resnew.data;
+        if (res.length > 0) {
+          res.map(item => {
+            item.key = item.id;
+            return item;
           });
         }
-        setLoading(false);
+        setData(res);
+      } else {
+        notification.error({
+          message: '获取失败',
+          description: res.msg,
+        });
       }
-    )
+      setLoading(false);
+    });
   };
   // 提交-添加
   const submitAdd = () => {
@@ -185,24 +193,20 @@ const AppDic = () => {
         key,
         value,
         desc: description,
-      }).then(
-        res => {
-          if (res.code == 0) {
-            setAddVisible(false);
-            getData();
-            notification.success({
-              message: '提交成功',
-            });
-          } else {
-            notification.error({
-              message: '提交失败',
-              description: res.msg,
-            });
-          }
+      }).then(res => {
+        if (res.code == 0) {
+          setAddVisible(false);
+          getData();
+          notification.success({
+            message: '提交成功',
+          });
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.msg,
+          });
         }
-      )
-
-
+      });
     } else {
       notification.error({
         message: '提交失败',
@@ -212,8 +216,7 @@ const AppDic = () => {
   };
   // 提交-重置
   const submitReset = () => {
-    get(`${PUBLISH_SERVICE}/DataManger/ResetKeyValue`, {
-    })
+    get(`${PUBLISH_SERVICE}/DataManger/ResetKeyValue`, {})
       .then(res => {
         if (res.code === 0) {
           getData();
@@ -230,7 +233,6 @@ const AppDic = () => {
       .catch(err => {
         message.error(err);
       });
-
   };
   // 提交-编辑
   const submitEdit = () => {
@@ -271,22 +273,20 @@ const AppDic = () => {
         key,
         value,
         desc: description,
-      }).then(
-        res => {
-          if (res.code == 0) {
-            setEditVisible(false);
-            getData();
-            notification.success({
-              message: '提交成功',
-            });
-          } else {
-            notification.error({
-              message: '提交失败',
-              description: res.msg,
-            });
-          }
+      }).then(res => {
+        if (res.code == 0) {
+          setEditVisible(false);
+          getData();
+          notification.success({
+            message: '提交成功',
+          });
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.msg,
+          });
         }
-      )
+      });
     } else {
       notification.error({
         message: '提交失败',
@@ -317,24 +317,22 @@ const AppDic = () => {
     //   .catch(err => {
     //     message.error(err);
     //   });
-   
+
     DeleteKeyValue({
       key: select.Key,
-    }).then(
-      res => {
-        if (res.code === 0) {
-          getData(select.parentID);
-          notification.success({
-            message: '删除成功',
-          });
-        } else {
-          notification.error({
-            message: '删除失败',
-            description: res.msg,
-          });
-        }
+    }).then(res => {
+      if (res.code === 0) {
+        getData(select.parentID);
+        notification.success({
+          message: '删除成功',
+        });
+      } else {
+        notification.error({
+          message: '删除失败',
+          description: res.msg,
+        });
       }
-    )
+    });
   };
 
   const pagination = {
@@ -343,7 +341,7 @@ const AppDic = () => {
     defaultPageSize: 20,
     showQuickJumper: true,
     showSizeChanger: true,
-  }
+  };
   return (
     <div className={styles.AppDic}>
       <Spin spinning={loading} tip="loading...">
@@ -352,11 +350,11 @@ const AppDic = () => {
             marginBottom: '10px',
             fontSize: '16px',
             height: 'calc(100vh-200px)',
-            display:'flex',
-            alignItems:'center'
+            display: 'flex',
+            alignItems: 'center',
           }}
         >
-          <span >数据字典</span>
+          <span>数据字典</span>
           <Tooltip title="添加">
             <PlusSquareOutlined
               onClick={() => {
@@ -366,8 +364,8 @@ const AppDic = () => {
               style={{
                 color: '#1890FF',
                 fontSize: '20px',
-                marginRight: '22px', 
-                marginLeft: '90%'
+                marginRight: '22px',
+                marginLeft: '90%',
               }}
             />
           </Tooltip>
@@ -385,7 +383,7 @@ const AppDic = () => {
                   fontSize: '20px',
                   verticalAlign: 'text-bottom',
                   marginRight: '30px',
-                  float: 'right'
+                  float: 'right',
                 }}
               />
             </Tooltip>

src/pages/dataCenter/dictionary1/index.js

 /*
- * @Description: 
+ * @Description:
  * @Author: leizhe
  * @Date: 2021-07-13 16:32:28
  * @LastEditTime: 2021-07-13 18:02:49
@@ -28,8 +28,7 @@ const dictionary1 = () => {
         </Tabs>
       </Card>
     </PageContainer>
-    
   );
 };
 
-export default dictionary1;
\ No newline at end of file
+export default dictionary1;

src/pages/database/ManagementDataBase.jsx

@@ -9,6 +9,7 @@ import {
   notification,
   Spin,
 } from 'antd';
+import copy from 'copy-to-clipboard';
 import PageContainer from '@/components/BasePageContainer';
 import styles from './ManagementDataBase.less';
 import {
@@ -177,6 +178,22 @@ const ManagementDataBase = () => {
     // setContent(text);
     setContent(arr);
   };
+  // 复制SQL
+  const copySql = text => {
+    if (copy(text)) {
+      notification.success({
+        message: '提示',
+        duration: 3,
+        description: '复制成功',
+      });
+    } else {
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: '复制失败',
+      });
+    }
+  };
   const autoCheckColumns = [
     {
       title: '表名称',
@@ -212,6 +229,16 @@ const ManagementDataBase = () => {
       key: 'Message',
       ellipsis: true,
     },
+    {
+      title: 'SQL语句',
+      dataIndex: 'DiffSql',
+      key: 'DiffSql',
+      render: text => (
+        <Button size="small" type="primary" onClick={() => copySql(text)}>
+          复制SQL
+        </Button>
+      ),
+    },
   ];
   const logColumns = [
     {

src/pages/log/loginLog/index.js

@@ -27,7 +27,7 @@ const LoginLog = () => {
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
-  const [filteredValue,setFilteredValue] =useState([])
+  const [filteredValue, setFilteredValue] = useState([]);
 
   const columns = [
     // {
@@ -47,7 +47,7 @@ const LoginLog = () => {
       key: 'LoginName',
       filters: LoginNameFilters,
       onFilter: (value, record) => record.LoginName === value,
-      filteredValue
+      filteredValue,
     },
     {
       title: '用户名',
@@ -55,7 +55,7 @@ const LoginLog = () => {
       key: 'ShowName',
       filters: ShowNameFilters,
       onFilter: (value, record) => record.ShowName === value,
-      filteredValue
+      filteredValue,
     },
     {
       title: '系统类型',
@@ -63,7 +63,7 @@ const LoginLog = () => {
       key: 'SystemType',
       filters: SystemTypeFilters,
       onFilter: (value, record) => record.SystemType === value,
-      filteredValue
+      filteredValue,
     },
     // {
     //   title: '终端',
@@ -133,14 +133,14 @@ const LoginLog = () => {
       ),
     );
   };
-  const handleReset = () =>{
-    setStartTime(moment().startOf('week'))
-    setFilteredValue([])
-  }
-  const onChangeInput =(filters) =>{
-    console.log('filters',filters);
-    setFilteredValue(filters.LoginName,filters.ShowName,filters.SystemType)
-  }
+  const handleReset = () => {
+    setStartTime(moment().startOf('week'));
+    setFilteredValue([]);
+  };
+  const onChangeInput = filters => {
+    console.log('filters', filters);
+    setFilteredValue(filters.LoginName, filters.ShowName, filters.SystemType);
+  };
   return (
     <>
       <div className={styles.loginLog}>
@@ -171,7 +171,15 @@ const LoginLog = () => {
             <Button onClick={() => setTime(24 * 7)}>近1周</Button>
             <Button onClick={() => setTime(14 * 24)}>近2周</Button>
             <Button onClick={() => setTime(30 * 24)}>近1月</Button>
-            <Button icon={<SyncOutlined className={styles.icon}/>} onClick={handleReset} style={{ marginLeft: '25px', verticalAlign:'middle', marginTop:'-3px' }}>
+            <Button
+              icon={<SyncOutlined className={styles.icon} />}
+              onClick={handleReset}
+              style={{
+                marginLeft: '25px',
+                verticalAlign: 'middle',
+                marginTop: '-3px',
+              }}
+            >
               重置
             </Button>
           </Col>

src/pages/log/omsLog/index.js

@@ -13,7 +13,7 @@ import {
 } from 'antd';
 import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
 import moment from 'moment';
-import { get,PUBLISH_SERVICE } from '@/services/index';
+import { get, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
 
 const OmsLog = () => {
@@ -23,7 +23,7 @@ const OmsLog = () => {
   const [functionName, setFunctionName] = useState(''); // 接口名称筛选
   const [label, setLabel] = useState(''); // 标签筛选
   const [startTime, setStartTime] = useState(moment().startOf('week')); // 默认值当天0点
-  const [filteredValue,setFilteredValue] =useState([])
+  const [filteredValue, setFilteredValue] = useState([]);
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
@@ -89,7 +89,7 @@ const OmsLog = () => {
       },
     },
   ];
-  
+
   // 在起止时间任意一个变化后获取数据
   useEffect(() => {
     if (startTime && endTime) {
@@ -105,28 +105,27 @@ const OmsLog = () => {
       function: functionName,
       label,
       PageIndex: 1,
-      PageSize: 1000 
+      PageSize: 1000,
     })
       .then(res => {
-        if (res.code===0) {
-            // setData(res.root.filter(item => item.label!=="ServiceInput"&&item.label!=="ServiceReturn"));
-            if (!res.data) {
-              setData([]);
-            } else {
-              const result = res.data.list;
-              setData(
-                result.map((item, index) => {
-                  item.key = index;
-                  return item;
-                }),
-              );
-              console.log(result)
-              // 过滤优先级
+        if (res.code === 0) {
+          // setData(res.root.filter(item => item.label!=="ServiceInput"&&item.label!=="ServiceReturn"));
+          if (!res.data) {
+            setData([]);
+          } else {
+            const result = res.data.list;
+            setData(
+              result.map((item, index) => {
+                item.key = index;
+                return item;
+              }),
+            );
+            console.log(result);
+            // 过滤优先级
             let arr1 = result.map(item => item.Level);
             arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
             setLevelFilters(arr1.map(item => ({ text: item, value: item })));
-            }  
-            
+          }
         } else {
           notification.error({
             message: '数据获取失败',
@@ -157,17 +156,17 @@ const OmsLog = () => {
       ),
     );
   };
-  const handleReset =() =>{
-    setStartTime(moment().startOf('week'))
-    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'))
-    setFunctionName('')
-    setFilteredValue([])
-    setLabel('')
-  }
-  const onChangeInput =(filters)=>{
-    console.log('filters',filters);
-    setFilteredValue(filters.Level)
-  }
+  const handleReset = () => {
+    setStartTime(moment().startOf('week'));
+    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setFunctionName('');
+    setFilteredValue([]);
+    setLabel('');
+  };
+  const onChangeInput = filters => {
+    console.log('filters', filters);
+    setFilteredValue(filters.Level);
+  };
   return (
     <>
       <div className={styles.omsLog}>
@@ -218,12 +217,20 @@ const OmsLog = () => {
             />
             <Button
               type="primary"
-              style={{ marginLeft: '10px'}}
+              style={{ marginLeft: '10px' }}
               onClick={getData}
             >
               查询
             </Button>
-            <Button icon={<SyncOutlined className={styles.icon}/>} onClick={handleReset} style={{ marginLeft: '25px', verticalAlign:'middle', marginTop:'-3px' }}>
+            <Button
+              icon={<SyncOutlined className={styles.icon} />}
+              onClick={handleReset}
+              style={{
+                marginLeft: '25px',
+                verticalAlign: 'middle',
+                marginTop: '-3px',
+              }}
+            >
               重置
             </Button>
           </Col>

src/pages/log/serviceLog/index.js

@@ -251,7 +251,7 @@ const ServiceLog = () => {
     setStartTime(moment().startOf('week'));
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setSearchWord('');
-  }
+  };
   return (
     <>
       <div className={styles.serviceLog}>
@@ -282,7 +282,12 @@ const ServiceLog = () => {
             <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
             <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
             <span style={{ marginLeft: '20px' }}>返回状态：</span>
-            <Select defaultValue='全部' value={logType} onChange={changeStatus} className={styles.sel}>
+            <Select
+              defaultValue="全部"
+              value={logType}
+              onChange={changeStatus}
+              className={styles.sel}
+            >
               <Option value="9999">全部</Option>
               <Option value="0">正常</Option>
               <Option value="-1">异常</Option>
@@ -298,7 +303,15 @@ const ServiceLog = () => {
               enterButton
               value={searchWord}
             />
-            <Button icon={<SyncOutlined className={styles.icon}/>} onClick={handleReset} style={{ marginLeft: '25px', verticalAlign:'middle', marginTop:'-3px' }}>
+            <Button
+              icon={<SyncOutlined className={styles.icon} />}
+              onClick={handleReset}
+              style={{
+                marginLeft: '25px',
+                verticalAlign: 'middle',
+                marginTop: '-3px',
+              }}
+            >
               重置
             </Button>
           </Col>
@@ -306,26 +319,32 @@ const ServiceLog = () => {
         <Spin spinning={loading} tip="loading">
           <Row style={{ background: 'white' }}>
             <Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}>
-              <span style={{ fontSize: '14px', fontWeight: '600' }}>访问量统计</span>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>
+                访问量统计
+              </span>
               <span style={{ paddingLeft: '60%' }}>间隔：</span>
-            <Select
-              defaultValue="每小时"
-              size="small"
-              value={timeInterval}
-              onChange={selectChange}
-              className={styles.sel}
-            >
-              <Option value="1">每分钟</Option>
-              <Option value="2">每5分钟</Option>
-              <Option value="3">每小时</Option>
-              <Option value="4">每天</Option>
-            </Select>
+              <Select
+                defaultValue="每小时"
+                size="small"
+                value={timeInterval}
+                onChange={selectChange}
+                className={styles.sel}
+              >
+                <Option value="1">每分钟</Option>
+                <Option value="2">每5分钟</Option>
+                <Option value="3">每小时</Option>
+                <Option value="4">每天</Option>
+              </Select>
             </Col>
             <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
-              <span style={{ fontSize: '14px', fontWeight: '600' }}>接口调用频次统计</span>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>
+                接口调用频次统计
+              </span>
             </Col>
             <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
-              <span style={{ fontSize: '14px', fontWeight: '600' }}>接口平均耗时统计</span>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>
+                接口平均耗时统计
+              </span>
             </Col>
           </Row>
           <Row className={styles.chart}>
@@ -339,10 +358,15 @@ const ServiceLog = () => {
                 renderer="svg"
                 scale={{
                   Count: { alias: '计数' },
-                  StartTime: { alias: '访问开始时间'}
+                  StartTime: { alias: '访问开始时间' },
                 }}
               >
-                <Axis name="StartTime" label="" title={{ offset: 20 }} className={styles.fontColor} />
+                <Axis
+                  name="StartTime"
+                  label=""
+                  title={{ offset: 20 }}
+                  className={styles.fontColor}
+                />
                 <Axis name="Count" title />
                 <Line shape="smooth" position="StartTime*Count" />
                 <Tooltip shared lock />
@@ -361,7 +385,12 @@ const ServiceLog = () => {
                   Path: { alias: '接口调用频次' },
                 }}
               >
-                <Axis name="Path" label="" title={{ offset: 20 }} className={styles.fontColor}/>
+                <Axis
+                  name="Path"
+                  label=""
+                  title={{ offset: 20 }}
+                  className={styles.fontColor}
+                />
                 <Axis name="Count" title />
                 <Interval position="Path*Count" />
                 <Tooltip shared lock />

src/pages/mobileConfig/addConfig.jsx

@@ -9,7 +9,7 @@ import PicturesWall from '@/components/Upload/index';
 const { Item } = Form;
 const { Option } = Select;
 const AddConfig = props => {
-  const { miniTitle, submitCallback, subType, addCallback } = props;
+  const { miniTitle, submitCallback, subType, addCallback, singleList } = props;
   console.log(subType, 'ubType');
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
@@ -40,6 +40,19 @@ const AddConfig = props => {
   const submit = value => {
     form.validateFields().then(valid => {
       if (valid) {
+        if (
+          singleList.some(
+            item =>
+              item.text === valid.title || item.id.slice(6) === valid.client,
+          )
+        ) {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: '应用名称跟类别不能重复',
+          });
+          return;
+        }
         setLoading(true);
         const obj = { ...form.getFieldsValue() };
         let params = { ...obj, mode: 'single' };

src/pages/mobileConfig/index.js

@@ -262,7 +262,11 @@ const MobileConfigPage = props => {
         }}
         visible={addVisible}
       >
-        <AddConfig addCallback={addCallback} submitCallback={submitCallback} />
+        <AddConfig
+          addCallback={addCallback}
+          submitCallback={submitCallback}
+          singleList={singleList}
+        />
       </Drawer>
     </PageContainer>
   );

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -293,7 +293,7 @@ const MiniMenu = props => {
     //   obj.relatedRoleList = String(roleList) || '';
     // }
     console.log(obj);
-    const parentID = item.menuID ? item.menuID : -1;
+    const parentID = item.menuID ? item.menuID : '-1';
     addMenu({
       _dc: Date.now(),
       parentID,
@@ -431,13 +431,13 @@ const MiniMenu = props => {
 
     dragMenu({
       menuID: obj.id,
-      newParentID: obj.parentId || -1,
+      newParentID: obj.parentId.toString() || '-1',
       menuList: String(arrList) || '',
       _version: 9999,
       _dc: Date.now(),
     }).then(res => {
       console.log(res);
-      if (res.success) {
+      if (res.code === 0) {
         setFlag(flag + 1);
       } else {
         notification.error({

src/pages/platformCenter/bsmanager/maintenance/ModalDrag.js

 /*
- * @Description: 
+ * @Description:
  * @Author: leizhe
  * @Date: 2021-10-09 15:08:18
  * @LastEditTime: 2021-10-11 10:21:35
  * @LastEditors: leizhe
  */
-import React, {PureComponent } from "react";
-import DragM from "dragm";
+import React, { PureComponent } from 'react';
+import DragM from 'dragm';
 
 export default class ModalDrag extends PureComponent {
-    updateTransform = transformStr =>{
-        this.modalDom.style.transform = transformStr;
+  updateTransform = transformStr => {
+    this.modalDom.style.transform = transformStr;
+  };
 
-    };
-    componentDidMount(){ 
-        this.modalDom = document.getElementsByClassName("ant-modal-wrap")[0]
-    }
-    render(){
-        const {title} = this.props;
-        return (
-            <DragM updateTransform={this.updateTransform}>
-                <div>{title}</div>
-            </DragM>
-        )
-    }
-}
\ No newline at end of file
+  componentDidMount() {
+    this.modalDom = document.getElementsByClassName('ant-modal-wrap')[0];
+  }
+
+  render() {
+    const { title } = this.props;
+    return (
+      <DragM updateTransform={this.updateTransform}>
+        <div>{title}</div>
+      </DragM>
+    );
+  }
+}

src/pages/platformCenter/bsmanager/tablemanager/components/Field/index.less

@@ -6,7 +6,7 @@
     max-height: 20rem;
     overflow-y: scroll;
     .ant-card{
-        width: 80%;
+        width: 83%;
         margin-left: 4rem;
     }
     .ant-card-head-title{

src/pages/platformCenter/bsmanager/tablemanager/index.jsx

@@ -216,7 +216,7 @@ const TableManager = (props) => {
                 align: 'center'
             },
             {
-                title: '字段数量',
+                title: '附加字段',
                 dataIndex: 'fieldCount',
                 key: 'fieldCount',
                 align: 'center',
@@ -334,7 +334,7 @@ const TableManager = (props) => {
             align: 'center',
         },
         {
-            title: '字段数量',
+            title: '附加字段',
             dataIndex: 'fieldCount',
             key: 'fieldCount',
             align: 'center',

src/pages/platformCenter/bsmanager/workFlow/flow.jsx

@@ -136,8 +136,9 @@ const Flow = () => {
       dataIndex: 'extendWebPage',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -145,8 +146,9 @@ const Flow = () => {
       dataIndex: 'extendMobilePage',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(默认)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -155,8 +157,9 @@ const Flow = () => {
       align: 'center',
       width: 80,
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -164,8 +167,9 @@ const Flow = () => {
       dataIndex: 'flowEndBehavior',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(不做处理)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -179,8 +183,7 @@ const Flow = () => {
       dataIndex: 'errorNodes',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(无)' ? 'grey' : 'red' }}>{text}</span>
       ),
     },
     {
@@ -188,8 +191,9 @@ const Flow = () => {
       dataIndex: 'interfaceConfig',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(无)' ? 'grey' : '000000D9' }}>
+          {text}
+        </span>
       ),
     },
     {

src/pages/platformCenter/bsmanager/workFlow/flowComponents/Timelimit.jsx

@@ -82,45 +82,30 @@ const Timelimit = props => {
       title: '规则名称',
       dataIndex: 'Name',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '开始节点',
       dataIndex: 'StartNode',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '结束节点',
       dataIndex: 'EndNode',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '默认时限',
       dataIndex: 'TimeLimit',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
     },
     {
       title: '时限指派字段',
-      dataIndex: 'TimeLimitFieldHtml',
+      dataIndex: 'TimeLimitField',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(未配置)' ? 'grey' : '#0000009D' }}>
+          {text}
+        </span>
       ),
     },
     {
@@ -128,8 +113,9 @@ const Timelimit = props => {
       dataIndex: 'TimeoutField',
       align: 'center',
       render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
+        <span style={{ color: text === '(未配置)' ? 'grey' : '#0000009D' }}>
+          {text}
+        </span>
       ),
     },
     {

src/pages/platformCenter/bsmanager/workFlow/flowComponents/timelimitComponents/AddModal.jsx

@@ -230,8 +230,7 @@ const AddModal = props => {
           <Select>
             {timeLimitFlowNodes.map(item => (
               <Option value={item.Name} key={item.ID}>
-                {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: item.Name }} />
+                <span>{item.Name}</span>
               </Option>
             ))}
           </Select>
@@ -244,8 +243,7 @@ const AddModal = props => {
           <Select>
             {timeLimitFlowNodes.map(item => (
               <Option value={item.Name} key={item.ID}>
-                {/* eslint-disable-next-line react/no-danger */}
-                <span dangerouslySetInnerHTML={{ __html: item.Name }} />
+                <span>{item.Name}</span>
               </Option>
             ))}
           </Select>

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.jsx

@@ -93,6 +93,17 @@ const FlowNode = () => {
     }
     setExpandedRowKeys(data);
   };
+  // 表格内文案样式
+  const textStyleOne = (text, record) => {
+    if (record.colorType === 2) {
+      return 'red';
+    }
+    if (text === '(未配置)') {
+      return 'grey';
+    }
+    return '000000D9';
+  };
+
   // 定义展开的表格
   const createUnfoldTable = itemTable => {
     const columns = [
@@ -101,12 +112,15 @@ const FlowNode = () => {
         dataIndex: 'name',
         width: 149,
         align: 'left',
-        render: text => (
+        render: (text, record) => (
           <div
-            style={{ paddingLeft: 60 }}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: text }}
-          />
+            style={{
+              paddingLeft: 60,
+              color: record.colorType === 2 ? 'red' : '#000000D9',
+            }}
+          >
+            {text}
+          </div>
         ),
       },
       {
@@ -114,19 +128,15 @@ const FlowNode = () => {
         dataIndex: 'aliasName',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
-        ),
+        render: text => <span>{text}</span>,
       },
       {
         title: '移交方式',
         dataIndex: 'extendHandover',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: textStyleOne(text, record) }}>{text}</span>
         ),
       },
       {
@@ -134,9 +144,8 @@ const FlowNode = () => {
         dataIndex: 'extendNodeType',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: textStyleOne(text, record) }}>{text}</span>
         ),
       },
       {
@@ -147,10 +156,9 @@ const FlowNode = () => {
         ellipsis: {
           showTitle: true,
         },
-        render: text => (
+        render: (text, record) => (
           <Tooltip placement="topLeft" title={text}>
-            {/* eslint-disable-next-line react/no-danger */}
-            <span dangerouslySetInnerHTML={{ __html: text }} />
+            <span style={{ color: textStyleOne(text, record) }}>{text}</span>
           </Tooltip>
         ),
       },
@@ -159,15 +167,21 @@ const FlowNode = () => {
         dataIndex: 'extendSeeFields',
         align: 'center',
         width: 80,
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
+        ),
       },
       {
         title: '字段',
         dataIndex: 'extendFields',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
 
@@ -176,9 +190,10 @@ const FlowNode = () => {
         dataIndex: 'extendEditableLater',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -186,9 +201,10 @@ const FlowNode = () => {
         dataIndex: 'extendRollbackable',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -196,9 +212,10 @@ const FlowNode = () => {
         dataIndex: 'extendRollbackNode',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -206,9 +223,10 @@ const FlowNode = () => {
         dataIndex: 'tranferable',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {
@@ -216,9 +234,10 @@ const FlowNode = () => {
         dataIndex: 'eventInformation',
         align: 'center',
         width: 80,
-        render: text => (
-          // eslint-disable-next-line react/no-danger
-          <span dangerouslySetInnerHTML={{ __html: text }} />
+        render: (text, record) => (
+          <span style={{ color: record.colorType === 2 ? 'red' : '#000000D9' }}>
+            {text}
+          </span>
         ),
       },
       {

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.less

@@ -28,8 +28,11 @@
 
 // 编辑节点表单
 .formData {
-  height: 32rem;
+  height: calc(100vh - 162px);
   overflow-y: scroll;
+  .ant-radio-wrapper {
+    min-width: 130px;
+  }
   .filedListItem {
     display: flex;
     flex-wrap: nowrap;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/AuxiliaryView.jsx

@@ -85,55 +85,67 @@ const AuxiliaryView = props => {
       title: '前端便签',
       dataIndex: 'WebLabel',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '前端视图',
       dataIndex: 'WebPage',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '前端参数',
       dataIndex: 'WebParam',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '手持标签',
       dataIndex: 'MobileLabel',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '手持视图',
       dataIndex: 'MobilePage',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '手持参数',
       dataIndex: 'MobileParam',
       align: 'center',
-      render: text => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{ __html: text }} />
-      ),
+      render: text => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text}</span>;
+      },
     },
     {
       title: '操作',

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx

@@ -10,7 +10,6 @@ import {
 
 import {
   Form,
-  Modal,
   Input,
   Radio,
   Select,
@@ -18,6 +17,8 @@ import {
   Checkbox,
   Button,
   message,
+  Drawer,
+  Space,
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import Fieldselection from './nodeEditComponents/Fieldselection';
@@ -99,58 +100,47 @@ const NodeEdit = props => {
     loadEventFields({ eventTableName: value.TableName }).then(res => {
       if (res.code === 0) {
         let defaultCheckedList = value[val] ? value[val].split(',') : [];
-        // 处理数据为树形结构
-        let keylist = new Set();
-        let list = new Map();
-        res.data.forEach(item => {
-          keylist.add(item.group);
-          if (keylist.has(item.group)) {
-            let listItem = list.get(item.group);
-            // 存入check得选项，是否全选，选中的选项'
-            if (listItem) {
-              list.set(item.group, {
-                plainOptions: [...listItem.plainOptions, item.fieldName],
-                defaultCheckedList: [],
-              });
-            } else {
-              list.set(item.group, {
-                plainOptions: [item.fieldName],
-                defaultCheckedList: [],
-              });
-            }
-          }
+        // 处理树形结构
+        let checkList = res.data.map(item => {
+          let plainOptions = [];
+          item.root.forEach(ele => {
+            plainOptions = [...plainOptions, ele.fieldName];
+          });
+          return {
+            groupName: item.groupName,
+            plainOptions,
+            defaultCheckedList: [],
+          };
         });
-        let checkList = [...list];
         defaultCheckedList.forEach(item => {
           checkList.forEach(element => {
             // 当前得模块是否有当前字段
-            let indeterminate = element[1].plainOptions.some(
+            let indeterminate = element.plainOptions.some(
               checkName => checkName === item,
             );
             // 处理已选中的字段
             if (indeterminate) {
-              element[1].defaultCheckedList.push(item);
+              element.defaultCheckedList.push(item);
             }
             if (
-              element[1].defaultCheckedList.length > 0 &&
-              element[1].defaultCheckedList.length <
-                element[1].plainOptions.length
+              element.defaultCheckedList.length > 0 &&
+              element.defaultCheckedList.length < element.plainOptions.length
             ) {
-              element[1].indeterminate = true;
+              element.indeterminate = true;
             } else {
-              element[1].indeterminate = false;
+              element.indeterminate = false;
             }
             // 处理是否全选字段
             if (
-              element[1].defaultCheckedList.length ===
-              element[1].plainOptions.length
+              element.defaultCheckedList.length === element.plainOptions.length
             ) {
-              element[1].checkAll = true;
+              element.checkAll = true;
             } else {
-              element[1].checkAll = false;
+              element.checkAll = false;
             }
           });
         });
+        console.log(checkList, 'checkList');
         setFieldList(checkList);
         setTimeout(() => {
           setShowField(true);
@@ -215,14 +205,19 @@ const NodeEdit = props => {
     }
   };
   return (
-    <Modal
+    <Drawer
       title="流程节点配置"
+      width="500px"
+      onClose={handleCancel}
       visible={visible}
-      onOk={onFinish}
-      width="800px"
-      onCancel={handleCancel}
-      maskClosable={false}
-      centered
+      footer={
+        <Space>
+          <Button onClick={handleCancel}>取消</Button>
+          <Button onClick={onFinish} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
     >
       <Form
         form={form}
@@ -329,13 +324,13 @@ const NodeEdit = props => {
             />
           </div>
         </Form.Item>
-        <Form.Item label="查看字段（工程模型）">
+        <Form.Item label="查看字段">
           <div className={styles.filedListItem}>
             <Form.Item
               name="SeeFields"
               style={{ marginBottom: 0, width: '100%' }}
             >
-              <Input placeholder="请选择查看字段" allowClear />
+              <Input placeholder="请选择查看字段（工程模型）" allowClear />
             </Form.Item>
             <Button
               type="dashed"
@@ -379,7 +374,7 @@ const NodeEdit = props => {
         fieldList={fieldList}
         onSubumit={val => setFiled(val)}
       />
-    </Modal>
+    </Drawer>
   );
 };
 export default NodeEdit;

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx

@@ -19,7 +19,7 @@ const Fieldselection = props => {
       return;
     }
     checkList.forEach(element => {
-      arr = [...arr, ...element[1].defaultCheckedList];
+      arr = [...arr, ...element.defaultCheckedList];
     });
     setSelectList(arr);
     // 初始化拖拽
@@ -35,11 +35,11 @@ const Fieldselection = props => {
   const onChange = (list, index) => {
     setCheckList(value => {
       const chooseList = JSON.parse(JSON.stringify(value));
-      chooseList[index][1].defaultCheckedList = list;
-      chooseList[index][1].indeterminate =
-        !!list.length && list.length < chooseList[index][1].plainOptions.length;
-      chooseList[index][1].checkAll =
-        list.length === chooseList[index][1].plainOptions.length;
+      chooseList[index].defaultCheckedList = list;
+      chooseList[index].indeterminate =
+        !!list.length && list.length < chooseList[index].plainOptions.length;
+      chooseList[index].checkAll =
+        list.length === chooseList[index].plainOptions.length;
       return chooseList;
     });
   };
@@ -47,11 +47,11 @@ const Fieldselection = props => {
   const onCheckAllChange = (e, index) => {
     setCheckList(value => {
       const chooseList = JSON.parse(JSON.stringify(value));
-      chooseList[index][1].defaultCheckedList = e.target.checked
-        ? chooseList[index][1].plainOptions
+      chooseList[index].defaultCheckedList = e.target.checked
+        ? chooseList[index].plainOptions
         : [];
-      chooseList[index][1].indeterminate = false;
-      chooseList[index][1].checkAll = e.target.checked;
+      chooseList[index].indeterminate = false;
+      chooseList[index].checkAll = e.target.checked;
       return chooseList;
     });
   };
@@ -98,19 +98,21 @@ const Fieldselection = props => {
               <div className={styles.cardBox} key={index}>
                 <div className={styles.title}>
                   <Divider orientation="left" className={styles.cardDivider}>
-                    <span style={{ marginRight: '10px' }}>{item[0]}</span>
+                    <span style={{ marginRight: '10px' }}>
+                      {item.groupName}
+                    </span>
                     <Checkbox
-                      indeterminate={item[1].indeterminate}
+                      indeterminate={item.indeterminate}
                       onChange={e => onCheckAllChange(e, index)}
-                      checked={item[1].checkAll}
+                      checked={item.checkAll}
                     />
                   </Divider>
                 </div>
                 <div className={styles.filedList}>
                   <CheckboxGroup
                     key={index}
-                    options={item[1].plainOptions}
-                    value={item[1].defaultCheckedList}
+                    options={item.plainOptions}
+                    value={item.defaultCheckedList}
                     onChange={list => onChange(list, index)}
                   />
                 </div>

src/pages/platformCenter/bsmanager/workflowEdit/Workflow.jsx

@@ -37,6 +37,7 @@ const Workflow = () => {
   const [editIndex, setEditIndex] = useState(); // 编辑流程组得索引
   const [treeVisible, setTreeVisible] = useState(true);
   const [chartLoading, setChartLoading] = useState(false); // 流程图的loading
+  const [canSelect, setCanSelect] = useState(true); // 是否可以切换树
   const [visible, setVisible] = useState({
     FlowModal: false,
     FlowGroupModal: false,
@@ -129,8 +130,8 @@ const Workflow = () => {
     showModal('FlowGroupModal', true);
     setModalType('add');
   };
-  // 点击节点树触发
-  const onSelect = (prop, treeNode) => {
+  // 选择节点
+  const chooseNode = (prop, treeNode) => {
     if (!treeNode || treeNode.node.children) {
       setCurrentSelectId(treeId);
       return;
@@ -146,6 +147,7 @@ const Workflow = () => {
         if (res.code === 0) {
           setFlowData(res.data);
         } else {
+          setFlowData({ Nodes: [], Lines: [] });
           notification.error({
             title: '提示',
             duration: 3,
@@ -157,6 +159,27 @@ const Workflow = () => {
       setCurrentSelectId(treeId);
     }
   };
+  // 点击节点树触发
+  const onSelect = (prop, treeNode) => {
+    // 如果没有保存弹是否保存弹窗
+    if (!canSelect) {
+      confirm({
+        title: '流程未保存确定要切换吗？',
+        icon: <ExclamationCircleOutlined />,
+        content: '',
+        okText: '是',
+        okType: 'danger',
+        cancelText: '否',
+        onOk() {
+          setCanSelect(true);
+          chooseNode(prop, treeNode);
+        },
+        onCancel() {},
+      });
+    } else {
+      chooseNode(prop, treeNode);
+    }
+  };
   // 处理树数据
   const mapTree = (val, index) => {
     const obj = { ...val };
@@ -222,6 +245,10 @@ const Workflow = () => {
     // 选中当前选中的节点
     onSelect();
   };
+  // 数据改变后的回调函数
+  const leaveCallBack = val => {
+    setCanSelect(!val);
+  };
   return (
     <PageContainer>
       <div className={styles.flowContainer}>
@@ -273,6 +300,7 @@ const Workflow = () => {
               flowData={flowData}
               flowID={currentSelectId}
               chartLoading={chartLoading}
+              leaveCallBack={leaveCallBack}
             />
           ) : (
             <Empty

src/pages/platformCenter/bsmanager/workflowEdit/workFlowComponents/FlowChart.jsx

@@ -3,6 +3,7 @@ import { Button, Modal, notification, Spin } from 'antd';
 import { SaveNodeChange, GetFlowNode } from '@/services/platform/workflow';
 
 import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Prompt } from 'react-router-dom';
 import * as go from 'gojs';
 import styles from '../workflow.less';
 import NodeModal from './flowChartComponents/NodeModal';
@@ -10,7 +11,7 @@ import imgUrl from '@/assets/images/icons/closeBlue.png';
 const { confirm } = Modal;
 let diagram = null;
 const FlowChart = props => {
-  const { flowData, flowID, chartLoading } = props;
+  const { flowData, flowID, chartLoading, leaveCallBack } = props;
   const [visible, setVisible] = useState(false);
   const [editMsg, setEditMsg] = useState({}); // 编辑节点的信息
   const [modalType, setModalType] = useState(''); // 存入弹窗是编辑还是新增
@@ -20,10 +21,12 @@ const FlowChart = props => {
   const [deleteLine, setDeleteLine] = useState(); // 删除的线id
   const [deleteNode, setDeleteNode] = useState(); // 删除的节点id
   const [AddNodes, setAddNodes] = useState([]); // 新增数组
+  const [initFlowData, setInitFlowData] = useState({}); // 初始数据，用来比对是否有修改流程图
   const [currentFlowData, setCurrentFlowData] = useState({
     Nodes: [],
     Lines: [],
   }); // 组件内得流程图数据
+  const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
   const objGo = go.GraphObject.make;
   // 监听删除，给删除数组里添加删除id
   useEffect(() => {
@@ -36,6 +39,7 @@ const FlowChart = props => {
       setDeleteNodes([...DeleteNodes, deleteNode]);
     }
   }, [deleteNode]);
+  // 初始化
   useEffect(() => {
     // 初始化流程图
     init();
@@ -73,6 +77,7 @@ const FlowChart = props => {
       setDeleteNode('');
       setDeleteLine('');
       setCurrentFlowData(JSON.parse(JSON.stringify(flowData)));
+      setShowLeaveTip(false);
     }
   }, [flowData]);
   // 存入在树形流程中选择得流程数据
@@ -81,13 +86,30 @@ const FlowChart = props => {
     if (currentFlowData.Nodes.length === 0) {
       nodeDataArray = [];
     } else {
-      nodeDataArray = currentFlowData.Nodes.map(item => {
+      // 处理老数据，让老数据可以正常展示
+      nodeDataArray = currentFlowData.Nodes.map((item, index) => {
         let obj;
         obj = item;
         obj.key = item.NodeId;
+        if (obj.points === '') {
+          if (obj.NodeType === '1') {
+            obj.points = `${(index * 200).toString()}" 100"`;
+          } else {
+            obj.points = `${(index * 200).toString()}" -22"`;
+          }
+        }
         return obj;
       });
     }
+    // 保存初始数据
+    setInitFlowData(
+      JSON.parse(
+        JSON.stringify({
+          Nodes: nodeDataArray,
+          Lines: currentFlowData.Lines,
+        }),
+      ),
+    );
     diagram.model = go.Model.fromJson({
       linkFromPortIdProperty: 'fromPort', // 所需信息：
       linkToPortIdProperty: 'toPort', // 标识数据属性名称
@@ -112,6 +134,8 @@ const FlowChart = props => {
   };
   // 删除节点
   const delNode = () => {
+    setShowLeaveTip(true);
+    leaveCallBack(true);
     diagram.commandHandler.deleteSelection();
   };
   // 流程图初始化
@@ -303,12 +327,30 @@ const FlowChart = props => {
       nodeData.roleList = roleList;
       diagram.model.updateTargetBindings(nodeData);
     }
+    // 关闭时进行数据比对看数据是否改变
+    let diagramObj = JSON.parse(diagram.model.toJson());
+    let stageJson = {
+      Nodes: diagramObj.nodeDataArray,
+      Lines: diagramObj.linkDataArray,
+    };
+    if (
+      JSON.stringify(stageJson.Nodes) === JSON.stringify(initFlowData.Nodes)
+    ) {
+      setShowLeaveTip(false);
+      leaveCallBack(false);
+    } else {
+      leaveCallBack(true);
+      setShowLeaveTip(true);
+    }
     setVisible(false);
   };
   // 获取保存后的流程数据
   const getFlowData = () => {
     GetFlowNode({ flowID }).then(res => {
       if (res.code === 0) {
+        // 保存后离开不用提醒要修改数据了
+        setShowLeaveTip(false);
+        leaveCallBack(false);
         setCurrentFlowData(res.data);
       } else {
         notification.error({
@@ -355,9 +397,15 @@ const FlowChart = props => {
   };
   return (
     <>
+      <Prompt
+        message="编辑的内容还未保存，确定要离开该页面吗?"
+        when={showLeaveTip}
+      />
       <div className={styles.buttonList}>
         <Button onClick={() => addNode()}>添加节点</Button>
-        <Button onClick={() => saveFlow()}>保存</Button>
+        <Button type="primary" onClick={() => saveFlow()}>
+          保存
+        </Button>
       </div>
       <Spin spinning={chartLoading}>
         <div

src/pages/platformCenter/bsmanager/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx

@@ -13,7 +13,7 @@ import {
   Popconfirm,
   message,
 } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditTwoTone } from '@ant-design/icons';
 import RoalChoose from './nodeModalComponents/RoalChoose';
 const { Option } = Select;
 
@@ -21,6 +21,8 @@ const NodeModal = props => {
   const { onSubumit, handleCancel, visible, modalType, editMsg } = props;
   const [form] = Form.useForm();
   const [showRoal, setShowRoal] = useState(false); // 是否显示选择角色用户弹窗
+  const [isEdit, setIsEdit] = useState(); // 是编辑角色还是添加角色
+  const [chooseUser, setChooseUser] = useState(); // 当前编辑角色或者机构的默认承办人
   const [nodeMsg, setNodeMsg] = useState({
     NodeName: '',
     NodeType: '',
@@ -58,8 +60,8 @@ const NodeModal = props => {
     setNodeMsg({ ...nodeMsg, roleList });
   };
   // 添加用户
-  const addUser = obj => {
-    if (obj.roleId === '') {
+  const addUser = (obj, treeLength) => {
+    if (obj.roleId === '' || obj.roleName === '' || treeLength === 0) {
       notification.error({
         message: '提示',
         duration: 3,
@@ -68,7 +70,10 @@ const NodeModal = props => {
       return;
     }
     // 如果已经有角色就提示
-    if (nodeMsg.roleList.some(item => item.roleId === obj.roleId)) {
+    if (
+      nodeMsg.roleList.some(item => item.roleId === obj.roleId) &&
+      isEdit === 'add'
+    ) {
       notification.error({
         message: '提示',
         duration: 3,
@@ -76,9 +81,27 @@ const NodeModal = props => {
       });
       return;
     }
+    // 编辑角色覆盖原有
+    let chooseIndex = nodeMsg.roleList.findIndex(
+      item => item.roleId === obj.roleId,
+    );
+    let newList;
+    if (chooseIndex === -1) {
+      // 添加表格
+      setNodeMsg({ ...nodeMsg, roleList: [...nodeMsg.roleList, obj] });
+    } else {
+      newList = [...nodeMsg.roleList];
+      newList[chooseIndex] = obj;
+      // 修改表格
+      setNodeMsg({ ...nodeMsg, roleList: [...newList] });
+    }
     setShowRoal(false);
-    // 添加表格
-    setNodeMsg({ ...nodeMsg, roleList: [...nodeMsg.roleList, obj] });
+  };
+  // 编辑默认承办人
+  const toEdit = record => {
+    setIsEdit('edit');
+    setChooseUser(record);
+    setShowRoal(true);
   };
   // 定义表格
   const columns = [
@@ -86,6 +109,14 @@ const NodeModal = props => {
       title: '机构(角色)名称',
       dataIndex: 'roleName',
       align: 'center',
+      ellipsis: {
+        showTitle: false,
+      },
+      render: text => (
+        <Tooltip placement="topLeft" title={text}>
+          {text}
+        </Tooltip>
+      ),
     },
     {
       title: '默认承办人',
@@ -120,6 +151,12 @@ const NodeModal = props => {
                 />
               </Popconfirm>
             </Tooltip>
+            <Tooltip title="修改默认承办人">
+              <EditTwoTone
+                onClick={() => toEdit(record)}
+                style={{ fontSize: '16px', color: '#1890FF' }}
+              />
+            </Tooltip>
           </Space>
         </>
       ),
@@ -196,7 +233,9 @@ const NodeModal = props => {
           style={{ marginBottom: '10px' }}
           onClick={() => {
             setShowRoal(true);
+            setIsEdit('add');
           }}
+          type="primary"
         >
           添加
         </Button>
@@ -207,11 +246,18 @@ const NodeModal = props => {
           bordered
           size="small"
           scroll={{ y: 'calc(100vh - 550px)' }}
+          onRow={record => ({
+            onDoubleClick: () => {
+              toEdit(record);
+            },
+          })}
           pagination={false}
         />
       </Drawer>
       <RoalChoose
         visible={showRoal}
+        modalType={isEdit}
+        chooseUser={chooseUser}
         handleCancel={() => setShowRoal(false)}
         onSubumit={addUser}
       />

src/pages/platformCenter/bsmanager/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RoalChoose.jsx

@@ -9,15 +9,19 @@ import {
   Pagination,
   Spin,
   Divider,
+  notification,
+  Empty,
+  Tabs,
 } from 'antd';
 import Tree from '@/components/ExpendableTree';
 import { UserOutlined } from '@ant-design/icons';
 import styles from '../../../workflow.less';
 
 const CheckboxGroup = Checkbox.Group;
+const { TabPane } = Tabs;
 
 const RoalChoose = props => {
-  const { onSubumit, handleCancel, visible } = props;
+  const { onSubumit, handleCancel, visible, modalType, chooseUser } = props;
   const [form] = Form.useForm();
   const [currentSelectId, setCurrentSelectId] = useState(''); // 当前选择节点Id
   const [currentRoalName, setCurrentRoalName] = useState(''); // 当前选择节点名称
@@ -28,35 +32,82 @@ const RoalChoose = props => {
   const [checkAll, setCheckAll] = useState(false); // 全选框全选样式
   const [total, setTotal] = useState(); // 角色人员条数
   const [loading, setLoading] = useState(false); // 加载时的loading
+  const [userList, setUserList] = useState([]); // 编辑选中的用户信息
   const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [roleType, setRoleType] = useState('2'); // 角色类型
   // 初始化
   useEffect(() => {
     form.resetFields();
     if (visible) {
-      setCurrentSelectId('');
+      setCurrentPage(1);
+      if (modalType === 'edit') {
+        console.log(chooseUser);
+        setRoleType(chooseUser.type.toString());
+        form.setFieldsValue({ roleName: chooseUser.roleName });
+        setUserList(chooseUser.defaultUserId);
+        getData('', 1, pageSize, chooseUser.roleId, chooseUser.type);
+      } else {
+        getData('', 1, pageSize, 0, 2);
+        setRoleType('2');
+      }
+    } else {
+      setUserList([]);
+      setTreeData([]);
       setPlainOptions([]);
       setCheckedList([]);
       setIndeterminate(false);
       setCheckAll(false);
-      setCurrentPage(1);
-      getData('', 0);
-    } else {
-      setTreeData([]);
     }
   }, [visible]);
-  // 获取表单回显
-  const getData = (roleName, pageIndex, pageSize) => {
+  // 默认选中第一个
+  useEffect(() => {
+    if (treeData.length > 0) {
+      setCurrentSelectId(treeData[0].id);
+      setCurrentRoalName(treeData[0].name);
+      let options = treeData[0].userList.map(item => ({
+        label: item.name,
+        value: item.id,
+      }));
+      setPlainOptions(options);
+    }
+  }, [treeData]);
+  // 对默认选中的进行处理
+  useEffect(() => {
+    if (userList.length > 0 && modalType === 'edit') {
+      onChange(userList);
+    } else {
+      setCheckedList([]);
+      setIndeterminate(false);
+      setCheckAll(false);
+    }
+  }, [plainOptions]);
+
+  // 获取左侧树回显
+  const getData = (roleName, pageIndex, pageSizes, roleId, Type) => {
     roleName = roleName || '';
     setLoading(true);
-    GetRoleUser({ roleName, pageIndex, pageSize }).then(res => {
+    GetRoleUser({
+      roleName,
+      pageIndex,
+      pageSize: pageSizes,
+      roleId,
+      Type: Number(Type),
+    }).then(res => {
       setLoading(false);
       if (res.code === 0) {
         setTreeData(res.data.data);
         setTotal(res.data.count);
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
       }
     });
   };
-  // 提交表单
+  // 查询角色
   const onFinish = () => {
     form.validateFields().then(validate => {
       if (validate) {
@@ -66,7 +117,7 @@ const RoalChoose = props => {
         setIndeterminate(false);
         setCheckAll(false);
         setCurrentPage(1);
-        getData(validate.roleName, 1);
+        getData(validate.roleName, 1, pageSize, 0, roleType);
       }
     });
   };
@@ -76,6 +127,7 @@ const RoalChoose = props => {
     return {
       title: obj.name,
       key: obj.id,
+      disabled: modalType === 'edit' && obj.name !== chooseUser.roleName,
       userList: obj.userList,
     };
   };
@@ -84,20 +136,17 @@ const RoalChoose = props => {
     setCurrentRoalName(e.node.title);
     if (selectedKeys[0]) {
       // 选择后对复选框的用户进行重新赋值
-      let userList = [...e.node.userList];
-      let options = userList.map(item => ({
+      let userLists = [...e.node.userList];
+      let options = userLists.map(item => ({
         label: item.name,
         value: item.id,
       }));
       setCurrentSelectId(selectedKeys[0]);
       setPlainOptions(options);
-      setCheckedList([]);
-      setIndeterminate(false);
-      setCheckAll(false);
     }
   };
   // 监听分页
-  const paginationChange = (page, pageSize) => {
+  const paginationChange = (page, pageSizes) => {
     // 分页时清空复选框
     setCurrentSelectId('');
     setPlainOptions([]);
@@ -105,8 +154,9 @@ const RoalChoose = props => {
     setIndeterminate(false);
     setCheckAll(false);
     setCurrentPage(page);
+    setPageSize(pageSizes);
     let roleName = form.getFieldValue('roleName');
-    getData(roleName, page, pageSize);
+    getData(roleName, page, pageSizes, 0, roleType);
   };
   // 复选框全选监听
   const onCheckAllChange = e => {
@@ -121,6 +171,19 @@ const RoalChoose = props => {
     setIndeterminate(!!list.length && list.length < plainOptions.length);
     setCheckAll(list.length === plainOptions.length);
   };
+  // tab栏切换回调
+  const tabCallback = val => {
+    if (val === roleType) {
+      return;
+    }
+    setRoleType(val);
+    setPlainOptions([]);
+    setCheckedList([]);
+    setIndeterminate(false);
+    setCheckAll(false);
+    setCurrentPage(1);
+    getData(form.getFieldValue('roleName'), 1, pageSize, 0, val);
+  };
   // 保存选择的角色列表
   const onSave = () => {
     // 默认承办人字符串拼接
@@ -142,9 +205,26 @@ const RoalChoose = props => {
       roleId: currentSelectId,
       defaultUserId: checkedList,
       defauletUserName: DeafaultUserName,
+      type: Number(roleType),
     };
-    onSubumit(obj);
+    onSubumit(obj, treeData.length);
   };
+  // 角色列表样式
+  const roleDom = () =>
+    treeData.length > 0 ? (
+      <Tree
+        blockNode
+        autoExpandParent
+        onSelect={onSelect}
+        selectedKeys={[currentSelectId]}
+        treeData={treeData.map(item => mapTree(item))}
+      />
+    ) : (
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description="未有查找到角色"
+      />
+    );
   return (
     <Modal
       title="角色用户列表"
@@ -164,12 +244,17 @@ const RoalChoose = props => {
               <Form.Item name="roleName">
                 <Input
                   prefix={<UserOutlined className="site-form-item-icon" />}
-                  placeholder="RoleName"
+                  placeholder="请输入机构或角色名称"
+                  disabled={modalType === 'edit'}
                   allowClear
                 />
               </Form.Item>
               <Form.Item>
-                <Button type="primary" htmlType="submit">
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  disabled={modalType === 'edit'}
+                >
                   搜索
                 </Button>
               </Form.Item>
@@ -178,17 +263,22 @@ const RoalChoose = props => {
           {/* 角色树 */}
           <Spin spinning={loading}>
             <div className={styles.treeContent}>
-              <span style={{ marginLeft: '28px', fontWeight: 700 }}>
-                角色列表
-              </span>
-              <Divider style={{ margin: '10px 0' }} />
-              <Tree
-                blockNode
-                autoExpandParent
-                onSelect={onSelect}
-                selectedKeys={[currentSelectId]}
-                treeData={treeData.map(item => mapTree(item))}
-              />
+              <Tabs activeKey={roleType} onChange={tabCallback}>
+                <TabPane
+                  tab="角色列表"
+                  key="2"
+                  disabled={modalType === 'edit' && chooseUser.type === 1}
+                >
+                  {roleDom()}
+                </TabPane>
+                <TabPane
+                  tab="机构列表"
+                  key="1"
+                  disabled={modalType === 'edit' && chooseUser.type === 2}
+                >
+                  {roleDom()}
+                </TabPane>
+              </Tabs>
             </div>
           </Spin>
           {/* 分页 */}
@@ -215,11 +305,18 @@ const RoalChoose = props => {
             </Checkbox>
             <Divider style={{ margin: '10px 0' }} />
             <div className={styles.checkContent}>
-              <CheckboxGroup
-                options={plainOptions}
-                value={checkedList}
-                onChange={onChange}
-              />
+              {plainOptions.length > 0 ? (
+                <CheckboxGroup
+                  options={plainOptions}
+                  value={checkedList}
+                  onChange={onChange}
+                />
+              ) : (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description="未有查找到用户"
+                />
+              )}
             </div>
           </div>
         </div>

src/pages/platformCenter/bsmanager/workflowEdit/workflow.less

@@ -109,13 +109,17 @@
       width: 100%;
       height: 370px;
       margin: 10px 0 10px 0;
-      padding: 20px 20px 20px 20px;
+      padding: 8px 20px 20px 20px;
       box-sizing: border-box;
       border: 1px solid #ccc;
       .ant-tree-list-holder {
         height: 285px;
       }
     }
+    .footer {
+      position: relative;
+      z-index: 999;
+    }
   }
   .userContent {
     width: 50%;