Merge branch 'master' of https://g.civnet.cn:8443/ReactWeb5/maintenance

src/pages/platformCenter/integratedLogin/AddModal.jsx

@@ -5,6 +5,7 @@
 import React, { useState, useEffect } from 'react';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
+import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api';
 import {
   Form,
   Modal,
@@ -27,10 +28,12 @@ import {
   EditIntegratedLogin,
   GetIntegratedloginSetting,
 } from '@/services/integratedLogin/api';
+import RMSComponents from '@/components/RolePmSite/index';
 import { DownLoadFiles } from '@/services/common/api';
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
 import { get, PUBLISH_SERVICE } from '@/services';
 import PreviewModal from './PreviewModal';
+import CryptoJS from 'crypto-js';
 const { Item } = Form;
 const modules = {
   toolbar: [
@@ -49,6 +52,7 @@ const AddModal = props => {
   const [loading, setLoading] = useState(false);
   const [radio, setRadio] = useState();
   const [radio1, setRadio1] = useState();
+  const [identity, setIdentity] = useState(0);
   const [flag, setFlag] = useState(1);
   const [form] = Form.useForm();
   const [imageUrl, setImageUrl] = useState();
@@ -59,16 +63,28 @@ const AddModal = props => {
   const [optionslist, setOptionsList] = useState([]);
   const [keepLength, setKeeplength] = useState('');
   const [fileList, setFileList] = useState([]);
+  const [isVisibleRoles, setIsVisibleRoles] = useState(false);
+  const [groupName, setGroupName] = useState('角色');
+  const [chooseGroupName, setChooseGroupName] = useState(['角色']);
+  const [checkedList1, setCheckedList1] = useState([]); // 最新选择数据
+  const [keepFiled, setKeepFiled] = useState([]);
+  const [pick, setPick] = useState(''); // 复选框数据填入项
+  const [keepIds, setKeepIds] = useState(null);
+  const [account, setAccount] = useState(0);
+  const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
+  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');
 
   const { Option } = Select;
 
   useEffect(() => {
     if (visible) {
+      getRole();
       getMap();
       if (type === 'edit') {
         setRadio(pickItem.target != 0);
         setRadio1(pickItem.isMaster);
-        console.log(pickItem);
+        setIdentity(pickItem.siteType);
+        setAccount(pickItem.accountType);
         form.setFieldsValue({
           accountParamKey: pickItem.AccountParamKey,
           accountParamValue: pickItem.AccountParamValue === 1 ? '熊猫ticket' : '熊猫token',
@@ -77,11 +93,16 @@ const AddModal = props => {
           systemClient: pickItem.SystemClient,
           systemName: pickItem.SystemName,
           iconUrl: pickItem.iconUrl,
+          siteType: pickItem.siteType,
           subtitle: pickItem.Subtitle,
+          accountType: pickItem.accountType,
           target: pickItem.target != 0,
           isMaster: pickItem.isMaster,
           images: pickItem.images,
           siteDescription: pickItem.siteDescription,
+          serviceUrl: pickItem.serviceUrl,
+          fixedPssword: pickItem.fixedPssword && Decrypt(pickItem.fixedPssword),
+          fixedUserName: pickItem.fixedUserName,
         });
         if (pickItem.images && pickItem.images.length > 0) {
           let arr = [];
@@ -128,12 +149,16 @@ const AddModal = props => {
       } else {
         setRadio(0);
         setRadio1(false);
+        setIdentity(0);
+        setAccount(0);
         form.setFieldsValue({
           accountParamValue: '熊猫ticket',
           target: 0,
           isMaster: false,
           mapSetting: '',
           coordinate: '',
+          siteType: 0,
+          accountType: 0,
         });
       }
     } else {
@@ -147,6 +172,75 @@ const AddModal = props => {
     }
   }, [visible]);
 
+  // 解密
+  const Decrypt = word => {
+    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+    return decryptedStr.toString();
+  };
+
+  // 加密
+  const Encrypt = word => {
+    let srcs = CryptoJS.enc.Utf8.parse(word);
+    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString().toUpperCase();
+  };
+
+  const getRole = () => {
+    CM_Event_LoadDepartmentAndRoles().then(res => {
+      if (res.msg === 'Ok') {
+        setKeepFiled(groupArr(res.data, 'groupType'));
+        let aa = groupArr(res.data, 'groupType');
+        if (type === 'edit' && pickItem.roles) {
+          let data = pickItem.roles;
+          let newData = [];
+          data.forEach(item => {
+            newData.push(aa.角色.find(i => i.value == item).label);
+          });
+          form.setFieldsValue({ roles: newData.toString() });
+        }
+      }
+    });
+  };
+
+  const pickFiled1 = fileds => {
+    if (form.getFieldValue(fileds)) {
+      setCheckedList1(form.getFieldValue(fileds).split(','));
+      setPick(fileds);
+      setIsVisibleRoles(true);
+    } else {
+      setCheckedList1([]);
+      setPick(fileds);
+      setIsVisibleRoles(true);
+    }
+  };
+
+  const groupArr = (initialArr, name) => {
+    let list = {};
+    initialArr.data.map(i => {
+      let ar = [];
+      i.root.map(j => {
+        let ss = {};
+        ss.label = j.Name;
+        ss.value = j.ID.toString();
+        ar.push(ss);
+        // console.log(ss);
+      });
+      list[i.groupType] = ar;
+    });
+    return list;
+  };
+
   const getMap = () => {
     GetIntegratedloginSetting().then(res => {
       if (res.data.displayMode == '地图') {
@@ -246,14 +340,20 @@ const AddModal = props => {
   };
   // 提交
   const onSubmit = () => {
-    // console.log(form.getFieldsValue().siteDescription);
-    // console.log(form.getFieldsValue().siteDescription.textContent);
     form.validateFields().then(validate => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
-        console.log(obj.siteDescription);
-        if (obj.internetAddress || obj.intranetAddress) {
+        if (identity === 0) {
+          if (!obj.internetAddress && !obj.intranetAddress) {
+            notification.warning({
+              message: '提示',
+              duration: 3,
+              description: '内网地址或外网地址必须填写一项',
+            });
+            return;
+          }
+        }
         if (obj.accountParamValue == '熊猫ticket') {
           obj.accountParamValue = 1;
         } else if (obj.accountParamValue == '熊猫token') {
@@ -292,14 +392,19 @@ const AddModal = props => {
             intranetAddress: obj.intranetAddress,
             accountParam: bb,
             iconUrl: obj.iconUrl,
-              accountType: 'Panda',
+            accountType: account,
             isHide: false,
             target: radio ? 1 : 0,
             isMaster: obj.isMaster,
             images: dataList,
             mapSetting: obj.mapSetting,
+            siteType: obj.siteType,
             coordinate: data,
+            serviceUrl: obj.serviceUrl,
             siteDescription: obj.siteDescription,
+            fixedUserName: obj.fixedUserName,
+            fixedPssword: Encrypt(obj.fixedPssword),
+            roles: keepIds,
           })
             .then(res => {
               if (res.code === 0) {
@@ -331,15 +436,20 @@ const AddModal = props => {
             intranetAddress: obj.intranetAddress,
             accountParam: bb,
             iconUrl: obj.iconUrl,
-              accountType: 'Panda',
+            accountType: account,
             target: radio ? 1 : 0,
             isMaster: obj.isMaster,
             images: dataList,
+            siteType: obj.siteType,
             clients: pickItem.clients,
             isHide: pickItem.isHide,
             mapSetting: obj.mapSetting,
             coordinate: data,
+            serviceUrl: obj.serviceUrl,
             siteDescription: obj.siteDescription,
+            fixedUserName: obj.fixedUserName,
+            fixedPssword: Encrypt(obj.fixedPssword),
+            roles: keepIds === null ? pickItem.roles : keepIds,
           })
             .then(res => {
               if (res.code === 0) {
@@ -364,13 +474,6 @@ const AddModal = props => {
               setLoading(false);
             });
         }
-        } else {
-          notification.warning({
-            message: '提示',
-            duration: 3,
-            description: '内网地址或外网地址必须填写一项',
-          });
-        }
       }
     });
   };
@@ -530,6 +633,23 @@ const AddModal = props => {
     // editor 文本框对象，可以调用函数获取content, delta值
   };
 
+  const onChangeIdentity = e => {
+    setIdentity(e.target.value);
+  };
+
+  const onChangeAccount = e => {
+    setAccount(e.target.value);
+  };
+
+  const onOK = prop => {
+    setIsVisibleRoles(false);
+    let inputText = {};
+    inputText[prop.pickItem] = prop.str;
+    setCheckedList1(prop.stt);
+    setKeepIds(prop.ids);
+    form.setFieldsValue(inputText);
+  };
+
   return (
     <Modal
       title={type === 'add' ? '新增子站' : '编辑子站'}
@@ -592,6 +712,114 @@ const AddModal = props => {
             <Input allowClear style={{ width: '100%' }} placeholder="请输入名称" />
           </Item>
         )}
+        <Item label="角色选择" name="roles">
+          <div style={{ display: 'flex' }}>
+            <Item name="roles" style={{ marginBottom: 0, width: '100%' }}>
+              <Input placeholder="请选择执行角色" />
+            </Item>
+            <Button
+              type="dashed"
+              onClick={() => pickFiled1('roles')}
+              icon={<PlusOutlined style={{ marginTop: '5px' }} />}
+              style={{ marginLeft: '10px', width: '70px' }}
+            />
+          </div>
+        </Item>
+        <Item label="新标签" name="target">
+          <Switch checkedChildren="是" unCheckedChildren="否" checked={radio} onChange={onChange} />
+        </Item>
+        <Row>
+          <Col span={10}>
+            <Item
+              label="图标"
+              name="iconUrl"
+              style={{ height: '112px' }}
+              labelCol={{ span: 10 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择图标',
+                },
+              ]}
+            >
+              <Upload
+                name="singleFile"
+                listType="picture-card"
+                showUploadList={false}
+                beforeUpload={beforeUpload}
+                action={`${window.location.origin}${PUBLISH_SERVICE}/UploadSingleFile`}
+                onChange={handleChange}
+              >
+                {imageUrl ? (
+                  <img
+                    src={imageUrl}
+                    alt="singleFile"
+                    style={{
+                      width: '90%',
+                      backgroundColor: '#2881a1',
+                    }}
+                  />
+                ) : (
+                  uploadButton
+                )}
+              </Upload>
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item>
+              <Button type="primary" onClick={pictruePreview} style={{ marginTop: '33px' }}>
+                从图片库中选择
+              </Button>
+            </Item>
+          </Col>
+        </Row>
+        <Item label="身份验证" name="siteType">
+          <Radio.Group onChange={onChangeIdentity} value={identity}>
+            <Radio value={0}>被动</Radio>
+            <Radio value={1}>主动</Radio>
+          </Radio.Group>
+        </Item>
+
+        {identity === 1 && (
+          <>
+            <Item
+              label="运维服务地址"
+              name="serviceUrl"
+              rules={[{ required: true, message: '请输入参数' }]}
+            >
+              <Input placeholder="请输入运维服务地址" allowClear />
+            </Item>
+            <Item label="登陆账号" name="accountType">
+              <Radio.Group onChange={onChangeAccount} value={account}>
+                <Radio value={0}>当前帐号</Radio>
+                <Radio value={1}>固定账号</Radio>
+              </Radio.Group>
+            </Item>
+          </>
+        )}
+        {account === 1 && identity === 1 && (
+          <Row>
+            <Col span={12}>
+              <Item
+                labelCol={{ span: 8 }}
+                label="账号"
+                name="fixedUserName"
+                rules={[{ required: true, message: '请输入账号' }]}
+              >
+                <Input allowClear placeholder="请输入账号名" />
+              </Item>
+            </Col>
+            <Col span={10}>
+              <Item label="密码" labelCol={{ span: 7 }} name="fixedPssword">
+                <Input allowClear placeholder="请输入密码" type="password" />
+              </Item>
+            </Col>
+          </Row>
+        )}
+        {identity === 1 ? (
+          <></>
+        ) : (
+          <>
             <Item
               label="内网地址"
               name="intranetAddress"
@@ -666,7 +894,6 @@ const AddModal = props => {
             >
               <AutoComplete placeholder="建议使用公网IP或域名" options={options} allowClear />
             </Item>
-
             <Row>
               <Col span={12}>
                 <Item
@@ -687,58 +914,9 @@ const AddModal = props => {
                 </Item>
               </Col>
             </Row>
-        <Item label="新标签" name="target">
-          <Switch checkedChildren="是" unCheckedChildren="否" checked={radio} onChange={onChange} />
-          {/* <Radio.Group onChange={onChange} value={radio}>
-            <Radio value={0}>否</Radio>
-            <Radio value={1}>是</Radio>
-          </Radio.Group> */}
-        </Item>
-        <Row>
-          <Col span={10}>
-            <Item
-              label="图标"
-              name="iconUrl"
-              style={{ height: '112px' }}
-              labelCol={{ span: 10 }}
-              rules={[
-                {
-                  required: true,
-                  message: '请选择图标',
-                },
-              ]}
-            >
-              <Upload
-                name="singleFile"
-                listType="picture-card"
-                showUploadList={false}
-                beforeUpload={beforeUpload}
-                action={`${window.location.origin}${PUBLISH_SERVICE}/UploadSingleFile`}
-                onChange={handleChange}
-              >
-                {imageUrl ? (
-                  <img
-                    src={imageUrl}
-                    alt="singleFile"
-                    style={{
-                      width: '90%',
-                      backgroundColor: '#2881a1',
-                    }}
-                  />
-                ) : (
-                  uploadButton
+          </>
         )}
-              </Upload>
-            </Item>
-          </Col>
-          <Col span={12}>
-            <Item>
-              <Button type="primary" onClick={pictruePreview} style={{ marginTop: '33px' }}>
-                从图片库中选择
-              </Button>
-            </Item>
-          </Col>
-        </Row>
+
         {show == 1 ? (
           <>
             <Item
@@ -836,6 +1014,17 @@ const AddModal = props => {
         type={type}
         callBackSubmit={onOk}
       />
+      <RMSComponents
+        visible={isVisibleRoles}
+        onCancel={() => setIsVisibleRoles(false)}
+        callBackSubmit={onOK}
+        newCheckedList={checkedList1} // 单选框中的值
+        pickItem={pick}
+        groupName={groupName} // 打开组件展示的分组名，用来首次获取数据
+        chooseGroupName={chooseGroupName} // 可选分组名
+        keepFiled={keepFiled}
+        dataType="name"
+      />
     </Modal>
   );
 };

src/pages/platformCenter/integratedLogin/Integrate.jsx

@@ -120,61 +120,73 @@ const Integrate = () => {
     //     </span>
     //   ),
     // },
+    // {
+    //   title: '外网地址',
+    //   dataIndex: 'InternetAddress',
+    //   key: 'InternetAddress',
+    //   align: 'center',
+    //   render: record => {
+    //     if (record) {
+    //       return (
+    //         <Tooltip title={record}>
+    //           <span style={{ color: '#50aefc', cursor: 'pointer' }}>已配置</span>
+    //         </Tooltip>
+    //       );
+    //     }
+    //     return <span>未配置</span>;
+    //   },
+    // },
+    // {
+    //   title: '内网地址',
+    //   dataIndex: 'IntranetAddress',
+    //   key: 'IntranetAddress',
+    //   align: 'center',
+    //   render: record => {
+    //     if (record) {
+    //       return (
+    //         <Tooltip title={record}>
+    //           <span style={{ color: '#50aefc', cursor: 'pointer' }}>已配置</span>
+    //         </Tooltip>
+    //       );
+    //     }
+    //     return <span>未配置</span>;
+    //   },
+    // },
+    // {
+    //   title: '账号参数',
+    //   dataIndex: 'AccountParamKey',
+    //   key: 'AccountParamKey',
+    //   align: 'center',
+    //   render: (text, record) => (
+    //     <span>
+    //       <Tooltip placement="top" title={text}>
+    //         {text}
+    //       </Tooltip>
+    //     </span>
+    //   ),
+    // },
+    // {
+    //   title: '账号值',
+    //   dataIndex: 'AccountParamValue',
+    //   key: 'AccountParamValue',
+    //   align: 'center',
+    //   render: record => {
+    //     if (record === 1) {
+    //       return <span>熊猫ticket</span>;
+    //     }
+    //     return <span>熊猫token</span>;
+    //   },
+    // },
     {
-      title: '外网地址',
-      dataIndex: 'InternetAddress',
-      key: 'InternetAddress',
-      align: 'center',
-      render: record => {
-        if (record) {
-          return (
-            <Tooltip title={record}>
-              <span style={{ color: '#50aefc', cursor: 'pointer' }}>已配置</span>
-            </Tooltip>
-          );
-        }
-        return <span>未配置</span>;
-      },
-    },
-    {
-      title: '内网地址',
-      dataIndex: 'IntranetAddress',
-      key: 'IntranetAddress',
-      align: 'center',
-      render: record => {
-        if (record) {
-          return (
-            <Tooltip title={record}>
-              <span style={{ color: '#50aefc', cursor: 'pointer' }}>已配置</span>
-            </Tooltip>
-          );
-        }
-        return <span>未配置</span>;
-      },
-    },
-    {
-      title: '账号参数',
-      dataIndex: 'AccountParamKey',
-      key: 'AccountParamKey',
-      align: 'center',
-      render: (text, record) => (
-        <span>
-          <Tooltip placement="top" title={text}>
-            {text}
-          </Tooltip>
-        </span>
-      ),
-    },
-    {
-      title: '账号值',
-      dataIndex: 'AccountParamValue',
-      key: 'AccountParamValue',
+      title: '身份验证',
+      dataIndex: 'siteType',
+      key: 'siteType',
       align: 'center',
       render: record => {
-        if (record === 1) {
-          return <span>熊猫ticket</span>;
+        if (record === 0) {
+          return <Tag color="success">被动</Tag>;
         }
-        return <span>熊猫token</span>;
+        return <Tag color="processing">主动</Tag>;
       },
     },
     {