fix: '集成登录功能界面优化，新增拖拽'

src/pages/platformCenter/integratedLogin/AddModal.jsx

@@ -369,6 +369,7 @@ const AddModal = props => {
                     alt="singleFile"
                     style={{
                       width: '90%',
+                      backgroundColor: '#2881a1',
                     }}
                   />
                 ) : (

src/pages/platformCenter/integratedLogin/Integrate.jsx

@@ -11,18 +11,23 @@ import {
   notification,
   Image,
 } from 'antd';
-import { GetIntegratedLogin, DelIntegratedLogin } from '@/services/integratedLogin/api';
+import {
+  GetIntegratedLogin,
+  DelIntegratedLogin,
+  SetIntegratedloginSettingSort,
+} from '@/services/integratedLogin/api';
 import {
   EditTwoTone,
   DeleteOutlined,
   PlusOutlined,
   SyncOutlined,
   FilePdfOutlined,
+  OrderedListOutlined,
 } from '@ant-design/icons';
 import styles from './integrate.less';
 import AddModal from './AddModal';
 import Master from './Master';
-// import Pdf from './Pdf';
+import SortModal from './SortModal';
 
 const path = require('path');
 
@@ -36,8 +41,8 @@ const Integrate = () => {
   const [pickItem, setPickItem] = useState('');
   const [type, setType] = useState('');
   const [masterVisible, setMasterVisible] = useState(false);
-  // const [pdfVisible, setPdfVisible] = useState(false);
   const [keepSystemName, setKeepSystemName] = useState([]);
+  const [sortVisible, setSortVisible] = useState(false);
 
   const { Search } = Input;
 
@@ -67,7 +72,13 @@ const Integrate = () => {
       width: 200,
       render: (text, record) => {
         if (text) {
-          return <Image src={window.location.origin + `/${text}`} height="50px" />;
+          return (
+            <Image
+              src={window.location.origin + `/${text}`}
+              height="50px"
+              style={{ backgroundColor: '#2881a1' }}
+            />
+          );
         }
       },
     },
@@ -304,9 +315,14 @@ const Integrate = () => {
     setMasterVisible(true);
   };
 
-  // const openPdf = () => {
-  //   setPdfVisible(true);
-  // };
+  const sort = () => {
+    setSortVisible(true);
+  };
+
+  const onOK = () => {
+    setSortVisible(false);
+    setFlag(flag + 1);
+  };
 
   return (
     <div className={styles.Integrate}>
@@ -334,17 +350,17 @@ const Integrate = () => {
           >
             网站
           </Button>
+          <Button
+            icon={<OrderedListOutlined className={styles.icon} />}
+            onClick={sort}
+            style={{
+              marginLeft: '20px',
+              verticalAlign: 'middle',
+            }}
+          >
+            <span style={{ marginTop: '-3px' }}>调序</span>
+          </Button>
         </div>
-
-        {/* <Button
-          onClick={openPdf}
-          style={{
-            float: 'right',
-            verticalAlign: 'middle',
-          }}
-        >
-          查看说明文档
-        </Button> */}
         <div>
           <Tooltip title="点击查看说明文档">
             <a
@@ -366,7 +382,7 @@ const Integrate = () => {
           <Table
             size="small"
             bordered
-            rowKey={record => record.Id}
+            rowKey={record => record.SystemName}
             columns={columns}
             dataSource={tableData}
             scroll={{ y: 'calc(100vh - 200px)', x: 'max-content' }}
@@ -389,7 +405,13 @@ const Integrate = () => {
         keepSystemName={keepSystemName}
       />
       <Master visible={masterVisible} onCancel={() => setMasterVisible(false)} type={type} />
-      {/* <Pdf visible={pdfVisible} onCancel={() => setPdfVisible(false)} /> */}
+      <SortModal
+        title="调整顺序"
+        visible={sortVisible}
+        sortData={tableData}
+        onCancel={() => setSortVisible(false)}
+        callBackSubmit={onOK}
+      />
     </div>
   );
 };

src/pages/platformCenter/integratedLogin/Master.jsx

@@ -12,15 +12,25 @@ import PreviewModal from './PreviewModal';
 const { Item } = Form;
 const { Option } = Select;
 const colorList = [
+  {
+    key: '科技蓝新',
+    color: '#2262B2',
+    // headerColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
+  },
+  {
+    key: '环保绿新',
+    color: '#00A295',
+    // headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
+  },
   {
     key: '科技蓝',
     color: '#1890FF',
-    headerColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
+    // headerColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
   },
   {
     key: '环保绿',
     color: '#00B496',
-    headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
+    // headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
   },
 ];
 
@@ -39,7 +49,14 @@ const Master = props => {
       GetIntegratedloginSetting().then(res => {
         if (res.code === 0) {
           console.log(res.data);
-          form.setFieldsValue(res.data);
+          let aa = res.data.title.split('<br/>');
+          form.setFieldsValue({
+            logo: res.data.logo,
+            primaryColor: res.data.primaryColor,
+            subtitle: res.data.subtitle,
+            title: aa[0],
+            titlebr: aa[1],
+          });
           setImageUrl(window.location.origin + `/${res.data.logo}`);
           setIm(res.data.logo);
         } else {
@@ -64,9 +81,15 @@ const Master = props => {
       if (obj.logo.file) {
         obj.logo = obj.logo.file.response.data;
       }
+      if (obj.titlebr) {
+        obj.title = `${obj.title}<br/>${obj.titlebr}`;
+      }
       if (validate) {
         AddIntegratedloginSetting({
-          ...obj,
+          logo: obj.logo,
+          primaryColor: obj.primaryColor,
+          subtitle: obj.subtitle,
+          title: obj.title,
         })
           .then(res => {
             if (res.code === 0) {
@@ -177,18 +200,28 @@ const Master = props => {
       getContainer={false}
     >
       <Form form={form} {...layout}>
-        <Item
-          label="标题"
-          name="title"
-          rules={[
-            {
-              required: true,
-              message: '标题为必填项',
-            },
-          ]}
-        >
-          <Input placeholder="请输入标题" autoComplete="off" />
-        </Item>
+        <Row>
+          <Col span={12}>
+            <Item
+              labelCol={{ span: 8 }}
+              label="标题"
+              name="title"
+              rules={[
+                {
+                  required: true,
+                  message: '标题为必填项',
+                },
+              ]}
+            >
+              <Input placeholder="请输入标题" autoComplete="off" />
+            </Item>
+          </Col>
+          <Col span={11}>
+            <Item labelCol={{ span: 7 }} label="换行标题" name="titlebr">
+              <Input placeholder="仅新主题适用" autoComplete="off" style={{ width: '87%' }} />
+            </Item>
+          </Col>
+        </Row>
         <Item
           label="副标题"
           name="subtitle"
@@ -230,6 +263,7 @@ const Master = props => {
                     alt="singleFile"
                     style={{
                       width: '90%',
+                      backgroundColor: '#2881a1',
                     }}
                   />
                 ) : (
@@ -246,20 +280,20 @@ const Master = props => {
             </Item>
           </Col>
         </Row>
-        <Item name="primaryColor" label="主题色">
+        <Item name="primaryColor" label="主题">
           <Select placeholder="请选择颜色">
             {colorList.map(item => (
               <Option value={item.color} key={item.color}>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <div
+                  {/* <div
                     style={{
                       height: '10px',
                       width: '10px',
                       background: item.color,
                       marginRight: '5px',
                     }}
-                  />
-                  {`${item.key}（${item.color}）`}
+                  /> */}
+                  {`${item.key}`}
                 </div>
               </Option>
             ))}

src/pages/platformCenter/integratedLogin/PreviewModal.jsx

@@ -6,10 +6,10 @@ import React, { useState, useEffect } from 'react';
 import { Modal, Collapse, notification } from 'antd';
 import { GetIntegratedloginIcon } from '@/services/integratedLogin/api';
 import { CheckCircleTwoTone } from '@ant-design/icons';
-import styles from './integrate.less';
 import classnames from 'classnames';
+import styles from './integrate.less';
+
 const { Panel } = Collapse;
-import { isDev } from '@/utils/tools';
 
 const PreviewModal = props => {
   const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
@@ -41,7 +41,7 @@ const PreviewModal = props => {
               bb.push(i);
               aa.push(i.groupName);
             }
-            if (i.files.length > 0 && type === '' && i.groupName !== '图标') {
+            if (i.files.length > 0 && type === '' && i.groupName === '网站图标') {
               bb.push(i);
               aa.push(i.groupName);
             }

src/pages/platformCenter/integratedLogin/SortModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 10:47:32
+ * @LastEditTime: 2022-07-20 14:16:47
+ * @LastEditors: leizhe
+ */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-plusplus */
+import React, { useState, useEffect } from 'react';
+import { Modal, notification } from 'antd';
+import { SetIntegratedloginSettingSort } from '@/services/integratedLogin/api';
+
+import Sortable from 'sortablejs';
+import styles from './integrate.less';
+import DragTable from '@/components/DragTable/DragTable';
+const SortModal = props => {
+  const { callBackSubmit = () => {}, title, visible, onCancel, sortData } = props;
+  const [orderTable, setOrderTable] = useState([]);
+  const [flowIDs, setFlowIDs] = useState([]);
+
+  const onSumbit = () => {
+    SetIntegratedloginSettingSort({ names: flowIDs }).then(res => {
+      if (res.code === 0) {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '调整成功',
+        });
+        callBackSubmit();
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+    // console.log(flowIDs);
+    // callBackSubmit({ str: flowIDs });
+  };
+
+  // 根据orderTable值改变flowIDs
+  useEffect(() => {
+    let ids = [];
+    orderTable.map(item => {
+      ids.push(item.SystemName);
+    });
+    console.log(ids);
+    setFlowIDs(ids);
+  }, [orderTable]);
+
+  useEffect(() => {
+    console.log(sortData);
+    if (visible) {
+      setOrderTable(sortData);
+    }
+  }, [visible]);
+
+  // 拖拽回调函数
+  const dragCallBack = data => {
+    console.log(data);
+    if (data) {
+      setOrderTable(data);
+    }
+  };
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'SystemName',
+      width: 150,
+      key: 'SystemName',
+    },
+  ];
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={onSumbit}
+      okText="确认"
+      cancelText="取消"
+    >
+      <div
+        className={styles.cardContent}
+        style={{ width: '26rem', marginLeft: '24px', maxHeight: '400px', overflow: 'auto' }}
+      >
+        <div className={styles.doctorTable}>
+          <DragTable
+            bordered
+            style={{ marginBottom: '10px' }}
+            rowKey={record => record.id}
+            columns={columns}
+            dataSource={orderTable}
+            showHeader={false}
+            pagination={false}
+            size="small"
+            dragCallBack={dragCallBack}
+            ItemTypes="flowOrder"
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default SortModal;

src/pages/platformCenter/integratedLogin/integrate.less

@@ -14,6 +14,15 @@
       align-items: center;
     }
   }
+  .cardContent {
+    height: 30rem;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    width: 100%;
+  }
+  .doctorTable {
+    margin-bottom: 16px;
+  }
   .divItem {
     display: inline-block;
     margin-left: 30px;
@@ -25,10 +34,12 @@
     box-sizing: border-box;
     border-radius: 5px;
     display: inline-block;
+    background-color: #2881a1;
   }
   .imgHidden {
     border: none;
     display: inline-block;
+    background-color: #2881a1;
   }
   .imgHidden:hover {
     border: 3px solid rgb(24, 144, 255);

src/services/integratedLogin/api.js

@@ -2,7 +2,7 @@
  * @Description:
  * @Author: leizhe
  * @Date: 2022-06-09 10:01:10
- * @LastEditTime: 2022-07-05 10:26:56
+ * @LastEditTime: 2022-07-19 18:38:45
  * @LastEditors: leizhe
  */
 import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
@@ -19,6 +19,10 @@ export const EditIntegratedLogin = param => post(`${PUBLISH_SERVICE}/EditIntegra
 // 集成登录删除
 export const DelIntegratedLogin = param => get(`${PUBLISH_SERVICE}/DelIntegratedLogin`, param);
 
+// 集成登录排序
+export const SetIntegratedloginSettingSort = param =>
+  post(`${PUBLISH_SERVICE}/SetIntegratedloginSettingSort`, param);
+
 // 集成登录-获取集成登录项目下的默认图标
 export const GetIntegratedloginIcon = param =>
   get(`${PUBLISH_SERVICE}/GetIntegratedloginIcon`, param);