fix: '集成登录界面交互优化'

package.json

@@ -90,9 +90,10 @@
         "@babel/preset-typescript": "^7.12.1",
         "@babel/runtime": "^7.10.5",
         "@esri/calcite-colors": "6.0.3",
+        "@react-pdf/renderer": "^2.3.0",
         "@wisdom-cesium/cesium": "^1.0.78",
         "@wisdom-map/amap": "1.1.0-beta.34",
-        "@wisdom-map/arcgismap": "1.4.0-13",
+        "@wisdom-map/arcgismap": "1.4.0-6",
         "@wisdom-map/basemap": "1.1.0-2",
         "ace-builds": "^1.4.12",
         "antd-img-crop": "^3.13.2",
@@ -120,6 +121,7 @@
         "rc-tween-one": "^3.0.6",
         "react": "16.14.0",
         "react-ace": "^9.2.0",
+        "react-color": "^2.19.3",
         "react-copy-to-clipboard": "^5.0.4",
         "react-dnd": "latest",
         "react-dnd-html5-backend": "latest",
@@ -130,6 +132,7 @@
         "react-intl": "2.8.0",
         "react-json-view": "^1.21.3",
         "react-loader": "^2.4.7",
+        "react-pdf": "^5.7.2",
         "react-redux": "7.0.2",
         "react-resizable": "^1.11.0",
         "react-router-dom": "5.1.0",
@@ -141,7 +144,6 @@
         "sortablejs": "^1.13.0",
         "styled-components": "4.2.0",
         "use-merge-value": "^1.0.2",
-        "react-color": "^2.19.3",
         "voca": "^1.4.0"
     },
     "devDependencies": {

src/pages/platformCenter/integratedLogin/Integrate.jsx

@@ -15,12 +15,20 @@ import {
   Image,
 } from 'antd';
 import { GetIntegratedLogin, DelIntegratedLogin } from '@/services/integratedLogin/api';
-import { EditTwoTone, DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  EditTwoTone,
+  DeleteOutlined,
+  PlusOutlined,
+  SyncOutlined,
+  FilePdfOutlined,
+} from '@ant-design/icons';
 import styles from './integrate.less';
 import AddModal from './AddModal';
 import Master from './Master';
 // import Pdf from './Pdf';
 
+const path = require('path');
+
 const Integrate = () => {
   const [loading, setLoading] = useState(false);
   const [tableData, setTableData] = useState([]);
@@ -66,58 +74,64 @@ const Integrate = () => {
         </span>
       ),
     },
-    {
-      title: '标识',
-      dataIndex: 'SystemClient',
-      key: 'SystemClient',
-      align: 'center',
-      ellipsis: true,
-      render: (text, record) => (
-        <span>
-          <Tooltip placement="top" title={text}>
-            {searchStyle(text)}
-          </Tooltip>
-        </span>
-      ),
-    },
     // {
-    //   title: '内网地址',
-    //   dataIndex: 'IntranetAddress',
-    //   key: 'IntranetAddress',
+    //   title: '标识',
+    //   dataIndex: 'SystemClient',
+    //   key: 'SystemClient',
     //   align: 'center',
-    //   width: 400,
     //   ellipsis: true,
     //   render: (text, record) => (
     //     <span>
     //       <Tooltip placement="top" title={text}>
-    //         {text}
+    //         {searchStyle(text)}
     //       </Tooltip>
     //     </span>
     //   ),
     // },
+    {
+      title: '内网地址',
+      dataIndex: 'IntranetAddress',
+      key: 'IntranetAddress',
+      align: 'center',
+      // width: 400,
+      // ellipsis: true,
+      render: record => {
+        if (record) {
+          return (
+            <Tooltip title={record}>
+              <span style={{ color: '#50aefc', cursor: 'pointer' }}>已配置</span>
+            </Tooltip>
+          );
+        }
+        return <span>未配置</span>;
+      },
+    },
     {
       title: '外网地址',
       dataIndex: 'InternetAddress',
       key: 'InternetAddress',
-      ellipsis: true,
+      // ellipsis: true,
       align: 'center',
-      maxWidth: 600,
-      onCell: () => ({
-        style: {
-          maxWidth: 600,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          cursor: 'pointer',
-        },
-      }),
-      render: (text, record) => (
-        <span>
-          <Tooltip placement="top" title={text}>
-            {text}
-          </Tooltip>
-        </span>
-      ),
+      // maxWidth: 600,
+      // onCell: () => ({
+      //   style: {
+      //     maxWidth: 600,
+      //     overflow: 'hidden',
+      //     whiteSpace: 'nowrap',
+      //     textOverflow: 'ellipsis',
+      //     cursor: 'pointer',
+      //   },
+      // }),
+      render: record => {
+        if (record) {
+          return (
+            <Tooltip title={record}>
+              <span style={{ color: '#50aefc', cursor: 'pointer' }}>已配置</span>
+            </Tooltip>
+          );
+        }
+        return <span>未配置</span>;
+      },
     },
     {
       title: '图标',
@@ -135,13 +149,13 @@ const Integrate = () => {
         }
       },
     },
-    {
-      title: '参数',
-      dataIndex: 'AccountParam',
-      key: 'AccountParam',
-      align: 'center',
-      width: 200,
-    },
+    // {
+    //   title: '参数',
+    //   dataIndex: 'AccountParam',
+    //   key: 'AccountParam',
+    //   align: 'center',
+    //   width: 200,
+    // },
     {
       title: '操作',
       key: 'action',
@@ -215,7 +229,7 @@ const Integrate = () => {
     setPickItem(e);
     setLoading(true);
     DelIntegratedLogin({
-      client: e.SystemClient,
+      client: e.SystemName,
     }).then(res => {
       console.log('11111111111ss');
       if (res.code === 0) {
@@ -276,6 +290,7 @@ const Integrate = () => {
   };
 
   const masterStation = () => {
+    setType('');
     setMasterVisible(true);
   };
 
@@ -290,7 +305,7 @@ const Integrate = () => {
           <span>快速搜索：</span>
           <Search
             style={{ width: 260 }}
-            placeholder="请输入名称，标识"
+            placeholder="请输入名称"
             onSearch={submitSearch}
             onChange={e => handleSearch(e)}
             enterButton
@@ -304,12 +319,13 @@ const Integrate = () => {
             onClick={add}
             style={{
               verticalAlign: 'middle',
-              marginLeft: '40px',
+              marginLeft: '20px',
             }}
           >
-            新增
+            网站
           </Button>
         </div>
+
         {/* <Button
           onClick={openPdf}
           style={{
@@ -319,16 +335,21 @@ const Integrate = () => {
         >
           查看说明文档
         </Button> */}
-        <Button
-          type="primary"
-          onClick={masterStation}
-          style={{
-            float: 'right',
-            verticalAlign: 'middle',
-          }}
-        >
-          集成登录网站配置
-        </Button>
+        <div>
+          <Tooltip title="点击查看说明文档">
+            <a
+              style={{ display: 'inline-block', marginTop: '5px', marginRight: '20px' }}
+              target="_blank"
+              href={path.join(__dirname, '/civmanage/熊猫智慧水务第三方系统接入说明文档.pdf')}
+              rel="noopener noreferer"
+            >
+              <FilePdfOutlined style={{ fontSize: '24px' }} />
+            </a>
+          </Tooltip>
+          <Button type="primary" onClick={masterStation}>
+            配置集成网站
+          </Button>
+        </div>
       </div>
       <Spin spinning={loading} tip="loading">
         <div className={styles.table}>
@@ -356,7 +377,7 @@ const Integrate = () => {
         type={type}
         callBackSubmit={onSubmit}
       />
-      <Master visible={masterVisible} onCancel={() => setMasterVisible(false)} />
+      <Master visible={masterVisible} onCancel={() => setMasterVisible(false)} type={type} />
       {/* <Pdf visible={pdfVisible} onCancel={() => setPdfVisible(false)} /> */}
     </div>
   );

src/pages/platformCenter/integratedLogin/Master.jsx

@@ -22,15 +22,10 @@ const colorList = [
     color: '#00B496',
     headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
   },
-  // {
-  //   key: '清澈蓝',
-  //   color: '#1890FF',
-  //   headerColor: '#1890FF',
-  // },
 ];
 
 const Master = props => {
-  const { callBackSubmit = () => {}, visible, onCancel } = props;
+  const { callBackSubmit = () => {}, visible, onCancel, type } = props;
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [imgBed, setImgBed] = useState();
@@ -49,7 +44,7 @@ const Master = props => {
           setIm(res.data.logo);
         } else {
           form.setFieldsValue({
-            primaryColor: '#0087F7',
+            primaryColor: '#1890FF',
           });
         }
       });
@@ -169,7 +164,7 @@ const Master = props => {
 
   return (
     <Modal
-      title="集成登录网站配置"
+      title="配置集成网站"
       style={{ top: '150px' }}
       width="700px"
       destroyOnClose
@@ -279,6 +274,7 @@ const Master = props => {
         imageUrl={im}
         keepImgeUrl={keepImgeUrl}
         callBackSubmit={onOk}
+        type={type}
       />
     </Modal>
   );

src/pages/platformCenter/integratedLogin/PreviewModal.jsx

@@ -12,13 +12,14 @@ const { Panel } = Collapse;
 import { isDev } from '@/utils/tools';
 
 const PreviewModal = props => {
-  const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl } = props;
+  const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
   const [imgData, setImgData] = useState([]);
   const [pickItem, setPickItem] = useState('');
   const [keepItem, setKeepItem] = useState('');
   const [keepGroupName, setKeepGroupName] = useState([]);
 
   useEffect(() => {
+    console.log(type);
     console.log(process.env, 'process.env.PROXY');
     setPickItem('');
     setKeepItem('');
@@ -36,7 +37,11 @@ const PreviewModal = props => {
           let bb = [];
           let aa = [];
           res.data.map((i, a) => {
-            if (i.files.length > 0) {
+            if (i.files.length > 0 && type !== '' && i.groupName !== '网站图标') {
+              bb.push(i);
+              aa.push(i.groupName);
+            }
+            if (i.files.length > 0 && type === '' && i.groupName !== '图标') {
               bb.push(i);
               aa.push(i.groupName);
             }

src/pages/platformCenter/integratedLogin/integrate.less

@@ -18,6 +18,7 @@
     display: inline-block;
     margin-left: 30px;
     margin-bottom: 30px;
+    // width: 80px;
   }
   .imgItem {
     border: 3px solid rgb(24, 144, 255);
@@ -37,8 +38,10 @@
   }
 
   .iconItem {
-    // position: absolute;
-    // margin-left: 70px;
+    // position: relative;
+    // left: 70px;
+    // top: 10px;
+    // font-size: 17px;
     margin-top: -3px;
     font-size: 17px;
     float: right;
@@ -48,6 +51,10 @@
     display: none;
   }
   .iconHidden:hover {
+    // position: relative;
+    // left: 70px;
+    // top: 10px;
+    // font-size: 17px;
     margin-top: -3px;
     font-size: 17px;
     float: right;

src/pages/userCenter/userManage/AddUserModal.jsx

@@ -161,6 +161,7 @@ const AddUserModal = props => {
           name="phone"
           label="手机号码"
           rules={[
+            { required: true },
             {
               pattern: new RegExp(/^1[0-9]{10}$/),
               message: '手机号码以1开头11位',

src/pages/userCenter/userManage/EditUserModal.jsx

@@ -156,6 +156,7 @@ const EditUserModal = props => {
           name="phone"
           label="手机号码"
           rules={[
+            { required: true },
             {
               pattern: new RegExp(/^1[0-9]{10}$/),
               message: '手机号码以1开头11位',

src/pages/userCenter/userManage/UserManage.jsx

@@ -161,11 +161,14 @@ const UserManage = () => {
   const [keepTree, setKeepTree] = useState([]); // 保存所有一级id用于控制只展开一项一级菜单
 
   const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
+  const [expendKeyOrg, setExpendKeyOrg] = useState(''); // 保存默认展开项
   const [menuID, setMenuID] = useState(''); // 选中的树IDs
   const [keepId, setKeepId] = useState('');
   const [flag, setFlag] = useState(1); // 刷新标志
   const userContainer = useRef();
   const flagRef = useRef(1);
+
+  const [searchWordOrg, setSearchWordOrg] = useState('');
   const setRowClassName = record =>
     record.userID === selectColor.userID ? styles.clickRowStyle : '';
   // 用户表列名
@@ -387,6 +390,24 @@ const UserManage = () => {
       }
     });
   }, [saveExtentFlag]);
+
+  useEffect(() => {
+    if (!changeOrgVisible) {
+      setExpendKeyOrg('');
+      setSearchWordOrg('');
+      GetOUTreeNew({ keyword: '' })
+        .then(newres => {
+          if (newres.code === 0) {
+            let res = newres.data;
+            setTreeDataCopy(res);
+          }
+        })
+        .catch(err => {
+          setTreeLoading(false);
+          message.error(err);
+        });
+    }
+  }, [changeOrgVisible]);
   const resizeListener = () => {
     flagRef.current += 1;
     setFlag(flagRef.current);
@@ -408,6 +429,41 @@ const UserManage = () => {
   const handleSearch = e => {
     setSearchWord(e.target.value);
   };
+
+  // 获取搜索框的值
+  const handleSearchOrg = e => {
+    setSearchWordOrg(e.target.value);
+  };
+
+  const submitSearch = () => {
+    GetOUTreeNew({ keyword: searchWordOrg })
+      .then(newres => {
+        if (newres.code === 0) {
+          let res = newres.data;
+          setTreeDataCopy(res);
+          console.log(res);
+          let aa = [];
+          res.map(i => {
+            if (i.children.length > 0) {
+              aa.push(i.id);
+            }
+            console.log(i.id);
+            aa = i.id;
+          });
+          setExpendKeyOrg(aa.toString());
+        } else {
+          notification.error({
+            message: '获取失败',
+            // eslint-disable-next-line no-undef
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        setTreeLoading(false);
+        message.error(err);
+      });
+  };
   // 复选框
   const rowSelection = {
     selectedRowKeys,
@@ -477,7 +533,7 @@ const UserManage = () => {
                   setOrgID(org);
                   setOrgTitle1(org.text);
                   getDescription(org.id);
-                  getMapSetByGroupID(org.id);
+                  // getMapSetByGroupID(org.id);
                   setCurrentSelectOrg1(org.id);
                   setId(org.text);
                   console.log(org);
@@ -1413,7 +1469,7 @@ const UserManage = () => {
   const kee = () => {
     setUserVisible(false);
   };
-  console.log(userContainer.current?.clientHeight, 'userContainer.current.clientHeight');
+
   return (
     <PageContainer className={styles.userManageContainer}>
       <div className={styles.contentContainer}>
@@ -1619,7 +1675,16 @@ const UserManage = () => {
           cancelText="取消"
           width="500px"
         >
-          <span>请选择要更改的目标机构：</span>
+          {/* <span>请选择要更改的目标机构：</span> */}
+          <Search
+            style={{ width: 260, marginBottom: '10px' }}
+            placeholder="请输入机构名称"
+            onSearch={submitSearch}
+            onChange={e => handleSearchOrg(e)}
+            enterButton
+            value={searchWordOrg}
+          />
+
           {changeOrgVisible && treeDataCopy.length > 0 && (
             <Tree
               showIcon="true"
@@ -1632,6 +1697,7 @@ const UserManage = () => {
                 // 切换后选中的节点
                 setCurrentSelectOldOrg(value[0]);
               }}
+              expandedKeys={expendKeyOrg}
               treeData={treeDataCopy.map(t => mapTree1(t))}
             />
           )}
@@ -1687,7 +1753,7 @@ const UserManage = () => {
         >
           <p>将删除多个用户, 是否确认删除？</p>
         </Modal>
-        <MapScopeEditModal
+        {/* <MapScopeEditModal
           title={id}
           mapId={createGuid()}
           visible={editOrgExtentVisible}
@@ -1696,7 +1762,7 @@ const UserManage = () => {
           confirmModal={submitExtent}
           distinct={currentOrgDistinct}
           extent={currentOrgArea}
-        />
+        /> */}
         {/* <AuthModal
           visible={authUserVisible}
           currentUser={currentUser}