fix: '方案管理增加排序'

src/pages/platformCenter/gis/schemeConfig/projectMessage/SortModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 10:47:32
+ * @LastEditTime: 2022-04-19 14:49:15
+ * @LastEditors: leizhe
+ */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-plusplus */
+import React, { useState, useEffect } from 'react';
+import { Modal, notification } from 'antd';
+
+import Sortable from 'sortablejs';
+import styles from './SortModal.less';
+import DragTable from '@/components/DragTable/DragTable';
+import { SortScheme } from '@/services/webConfig/api';
+const SortModal = props => {
+  const { callBackSubmit = () => {}, title, visible, onCancel, sortData } = props;
+  const [orderTable, setOrderTable] = useState([]);
+  const [flowIDs, setFlowIDs] = useState([]);
+
+  const onSumbit = () => {
+    SortScheme({ sortName: flowIDs.toString() }).then(res => {
+      if (res.code === '0') {
+        callBackSubmit();
+        onCancel();
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '调整成功',
+        });
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+
+  // 根据orderTable值改变flowIDs
+  useEffect(() => {
+    let ids = [];
+    orderTable.map(item => {
+      ids.push(item.schemename);
+    });
+    setFlowIDs(ids);
+  }, [orderTable]);
+
+  useEffect(() => {
+    if (visible) {
+      setOrderTable(sortData);
+    }
+  }, [visible]);
+
+  // 拖拽回调函数
+  const dragCallBack = data => {
+    if (data) {
+      setOrderTable(data);
+    }
+  };
+  const columns = [
+    {
+      title: '字段名',
+      dataIndex: 'schemename',
+      width: 150,
+      key: 'schemename',
+    },
+  ];
+  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/gis/schemeConfig/projectMessage/SortModal.less

+.cardContent {
+    height: 30rem;
+    overflow-y: scroll;
+    overflow-x: scroll;
+    width: 100%;
+  }
+  
+  .doctorTable {
+    margin-bottom: 16px;
+  }
\ No newline at end of file

src/pages/platformCenter/gis/schemeConfig/projectMessage/projectMessage.jsx

@@ -8,10 +8,13 @@
 /* eslint-disable indent */
 import { Button, Spin, Empty } from 'antd';
 import React, { useState, useEffect } from 'react';
+import { OrderedListOutlined } from '@ant-design/icons';
 import styles from '../SchemeConfig.less';
 import { GetMaplayerByTerminalType, GettMaplayer } from '@/services/webConfig/api';
 import AddModal from './AddModal';
 import Cards from './components/card';
+import SortModal from './SortModal';
+
 const VectorData = props => {
   const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
   const [tileData, setTileData] = useState([]); // 页面初始化数据
@@ -22,6 +25,7 @@ const VectorData = props => {
   const [type, setType] = useState(''); // 弹窗类型
   const [formObj, setFormObj] = useState({});
   const [keepData, setKeepData] = useState([]);
+  const [sortVisible, setSortVisible] = useState(false);
 
   const onSubmit = prop => {
     setVisible(false);
@@ -36,7 +40,6 @@ const VectorData = props => {
     setVisible(true);
   };
   useEffect(() => {
-    console.log(1212);
     renderTile();
   }, [flag]);
 
@@ -53,13 +56,10 @@ const VectorData = props => {
           if (res.code == '0') {
             let arr = [];
             res.data.general.baseMap.layers.map(i => {
-              console.log(i);
               arr.push(i.servicename);
             });
-            console.log(arr);
             setKeepData(arr);
             let list = [];
-            console.log(resdata.data);
             resdata.data.map((j, index) => {
               let data = [];
               let aa = [];
@@ -71,23 +71,17 @@ const VectorData = props => {
                 }
               });
               list.push(j.schemename);
-              console.log(aa);
-              console.log(data);
               let bb = aa.concat(data);
-              console.log(bb);
               let i = bb.indexOf(j.baseMap[j.defaultBaseMap]);
               resdata.data[index].defaultOldBaseMap = j.baseMap;
               resdata.data[index].baseMap = bb;
               resdata.data[index].defaultBaseMap = i;
             });
-            console.log(list);
             setNameData(list);
-            console.log(resdata.data);
             setTileData(resdata.data);
           }
         });
       } else {
-        console.log(3456);
         setTreeLoading(false);
       }
     });
@@ -95,9 +89,30 @@ const VectorData = props => {
   useEffect(() => {
     setCardFlag(true);
   }, [tileData]);
+
+  const onOK = () => {
+    setFlag(flag + 1);
+  };
+
+  const handleSort = () => {
+    setSortVisible(true);
+  };
+
   return (
     <>
       <div className={styles.tileBtn}>
+        <Button
+          icon={<OrderedListOutlined className={styles.icon} />}
+          onClick={() => {
+            handleSort();
+          }}
+          style={{
+            verticalAlign: 'middle',
+            marginRight: '10px',
+          }}
+        >
+          排序
+        </Button>
         <Button
           type="primary"
           onClick={() => {
@@ -143,6 +158,13 @@ const VectorData = props => {
               keepData={keepData}
               nameData={nameData}
             />
+            <SortModal
+              title="调整顺序"
+              visible={sortVisible}
+              sortData={tileData}
+              onCancel={() => setSortVisible(false)}
+              callBackSubmit={onOK}
+            />
           </div>
         </Spin>
       </div>

src/services/webConfig/api.js

@@ -332,3 +332,5 @@ export const QueryBaseMapItems = param => get(`${PANDA_GIS}/MapLayer/QueryBaseMa
 
 // 通过client获取角色
 export const GetRoleGroups = param => get(`${PUBLISH_SERVICE}/UserCenter/GetRoleGroups`, param);
+
+export const SortScheme = param => get(`${PANDA_GIS}/MapLayer/SortScheme`, param);
\ No newline at end of file