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/AddModal.jsx

@@ -13,6 +13,8 @@ import {
   Row,
   Col,
   Image,
+  Select,
+  AutoComplete,
 } from 'antd';
 import { AddIntegratedLogin, EditIntegratedLogin } from '@/services/integratedLogin/api';
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
@@ -31,12 +33,15 @@ const AddModal = props => {
   const [previewModal, setPreviewModal] = useState(false);
   const [keepImgeUrl, setKeepImgeUrl] = useState('');
 
+  const { Option } = Select;
+
   useEffect(() => {
     if (visible) {
       if (type === 'edit') {
-        console.log(pickItem);
+        console.log(pickItem.AccountParam[0]);
         form.setFieldsValue({
-          accountParam: pickItem.AccountParam,
+          accountParamKey: pickItem.AccountParam[0].key,
+          accountParamValue: pickItem.AccountParam[0].value === 1 ? '熊猫ticket' : '熊猫token',
           internetAddress: pickItem.InternetAddress,
           intranetAddress: pickItem.IntranetAddress,
           systemClient: pickItem.SystemClient,
@@ -60,7 +65,7 @@ const AddModal = props => {
           setIm('');
         }
       } else {
-        // form.setFieldsValue({ method: 'Get' });
+        form.setFieldsValue({ accountParamValue: '熊猫ticket' });
       }
     } else {
       setImageUrl('');
@@ -76,12 +81,27 @@ const AddModal = props => {
         setLoading(true);
         let obj = form.getFieldsValue();
         console.log(obj);
+        if (obj.internetAddress || obj.intranetAddress) {
+          if (obj.accountParamValue == '熊猫ticket') {
+            obj.accountParamValue = 1;
+          } else if (obj.accountParamValue == '熊猫token') {
+            obj.accountParamValue = 2;
+          }
+          let aa = { key: obj.accountParamKey, value: obj.accountParamValue };
+          console.log(aa);
+          let bb = [];
+          bb.push(aa);
           if (obj.iconUrl.file) {
             obj.iconUrl = obj.iconUrl.file.response.data;
           }
           if (type === 'add') {
             AddIntegratedLogin({
-            ...obj,
+              systemName: obj.systemName,
+              subtitle: obj.subtitle,
+              internetAddress: obj.internetAddress,
+              intranetAddress: obj.intranetAddress,
+              accountParam: bb,
+              iconUrl: obj.iconUrl,
               accountType: 'Panda',
             })
               .then(res => {
@@ -108,9 +128,13 @@ const AddModal = props => {
               });
           } else {
             EditIntegratedLogin({
-            ...obj,
+              systemName: obj.systemName,
+              subtitle: obj.subtitle,
+              internetAddress: obj.internetAddress,
+              intranetAddress: obj.intranetAddress,
+              accountParam: bb,
+              iconUrl: obj.iconUrl,
               accountType: 'Panda',
-            id: pickItem.ID,
             })
               .then(res => {
                 if (res.code === 0) {
@@ -135,6 +159,13 @@ const AddModal = props => {
                 setLoading(false);
               });
           }
+        } else {
+          notification.warning({
+            message: '提示',
+            duration: 3,
+            description: '内网地址或外网地址必须填写一项',
+          });
+        }
       }
     });
   };
@@ -219,6 +250,20 @@ const AddModal = props => {
     }
   };
 
+  const inputType = value => {
+    console.log(value);
+    if (value) {
+      form.setFieldsValue({ internetAddress: value });
+    }
+  };
+  const options = [
+    {
+      value: 'http://{IP:端口}/civbase/user/noscret/?client={client}',
+    },
+    {
+      value: 'http://{IP:端口}/web4/?client={client}',
+    },
+  ];
   return (
     <Modal
       title={type === 'add' ? '新增集成网站' : '编辑集成网站'}
@@ -230,50 +275,49 @@ const AddModal = props => {
       okText="确认"
       {...props}
       onOk={() => onSubmit()}
-      confirmLoading={loading}
       forceRender={true}
       getContainer={false}
     >
       <Form form={form} {...layout}>
-        <Item label="标题" name="systemName" rules={[{ required: true, message: '请输入名称' }]}>
+        {type === 'edit' ? (
+          <Item label="名称" name="systemName" rules={[{ required: true, message: '请输入名称' }]}>
+            <Input allowClear style={{ width: '100%' }} placeholder="请输入名称" disabled />
+          </Item>
+        ) : (
+          <Item label="名称" name="systemName" rules={[{ required: true, message: '请输入名称' }]}>
             <Input allowClear style={{ width: '100%' }} placeholder="请输入名称" />
           </Item>
+        )}
+
         <Item label="副标题" name="subtitle" rules={[{ required: true, message: '请输入副标题' }]}>
           <Input allowClear placeholder="建议使用英文" />
         </Item>
-        <Item label="标识" name="systemClient" rules={[{ required: true, message: '请输入标识' }]}>
-          <Input allowClear placeholder="请输入标识" />
-        </Item>
-        <Item
-          label="外网地址"
-          name="internetAddress"
-          rules={[{ required: true, message: '请输入外网地址' }]}
-        >
-          <Input
-            allowClear
-            placeholder="示例：http://192.168.12.116:8500/civbase/user/noscret?client=city"
-          />
+        <Item label="外网地址" name="internetAddress">
+          <AutoComplete placeholder="建议使用公网IP或域名" options={options} />
         </Item>
         <Item label="内网地址" name="intranetAddress">
-          <Input allowClear />
+          <AutoComplete placeholder="建议使用局域网IP" options={options} />
         </Item>
-        {/* <Item label="请求方式" name="method">
-          <Radio.Group onChange={onChange2} value={radio2}>
-            <Radio value="Get">Get</Radio>
-            <Radio value="Post">Post</Radio>
-          </Radio.Group>
-        </Item> */}
+        <Row>
+          <Col span={12}>
             <Item
+              labelCol={{ span: 8 }}
               label="账号参数"
-          name="accountParam"
+              name="accountParamKey"
               rules={[{ required: true, message: '请输入参数' }]}
             >
               <Input allowClear />
-          {/* <Radio.Group onChange={onChange} value={radio}>
-            <Radio value={0}>使用熊猫身份</Radio>
-            <Radio value={1}>使用令牌</Radio>
-          </Radio.Group> */}
             </Item>
+          </Col>
+          <Col span={10}>
+            <Item label="账号值" labelCol={{ span: 7 }} name="accountParamValue">
+              <Select placeholder="请选择值">
+                <Option value="1">熊猫ticket</Option>
+                <Option value="2">熊猫token</Option>
+              </Select>
+            </Item>
+          </Col>
+        </Row>
         <Row>
           <Col span={10}>
             <Item
@@ -288,7 +332,6 @@ const AddModal = props => {
                 },
               ]}
             >
-              {/* <Image width="90%" src={imageUrl} /> */}
               <Upload
                 name="singleFile"
                 listType="picture-card"
@@ -319,13 +362,6 @@ const AddModal = props => {
             </Item>
           </Col>
         </Row>
-        {/* <Item
-          label="单点登陆地址"
-          name="loginUrl"
-          rules={[{ required: true, message: '请输入单点登录地址' }]}
-        >
-          <Input allowClear />
-        </Item> */}
       </Form>
       <PreviewModal
         visible={previewModal}
@@ -334,6 +370,7 @@ const AddModal = props => {
         }}
         imageUrl={im}
         keepImgeUrl={keepImgeUrl}
+        type={type}
         callBackSubmit={onOk}
       />
     </Modal>

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}
+      // 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>
-        </span>
-      ),
+          );
+        }
+        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,17 +335,22 @@ const Integrate = () => {
         >
           查看说明文档
         </Button> */}
-        <Button
-          type="primary"
-          onClick={masterStation}
-          style={{
-            float: 'right',
-            verticalAlign: 'middle',
-          }}
+        <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}>
           <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}