fix: '巡检反馈新增业务划分'

src/pages/bsmanager/patrolMaintenance/patrolFeedback/AddModal.jsx

@@ -78,6 +78,10 @@ const AddModal = props => {
       if (type === 'edit') {
         CM_Feedback_QueryPatrolFeedback({ id: formObj.id }).then(res => {
           form.setFieldsValue({ ...res.data });
+          console.log(res.data);
+          if (!res.data.businessGroup) {
+            form.setFieldsValue({ businessGroup: '区域巡检' });
+          }
           let aa = JSON.parse(res.data.mappingFields);
           getGetTaskSyncField(aa); // 获取字段名数据
 
@@ -86,6 +90,7 @@ const AddModal = props => {
           getRoles();
         });
       } else {
+        form.setFieldsValue({ businessGroup: '区域巡检' });
         getGetTaskSyncField();
         getFeedbackTable();
         getRoles();
@@ -675,6 +680,18 @@ const AddModal = props => {
               <Input placeholder="巡检对象名称不可重复" />
             </Item>
           </Col>
+          <Col span={23}>
+            <Item label="业务划分" name="businessGroup" labelCol={{ span: 4 }}>
+              <Select placeholder="请选择业务划分" showSearch>
+                <Option key="区域巡检" value="区域巡检">
+                  区域巡检
+                </Option>
+                <Option key="DMA巡检" value="DMA巡检">
+                  DMA巡检
+                </Option>
+              </Select>
+            </Item>
+          </Col>
           <Col span={23}>
             <Item label="分组" name="groupType" labelCol={{ span: 4 }}>
               <Input placeholder="请输入分组名称" />

src/pages/bsmanager/patrolMaintenance/patrolFeedback/patrolFeedback.jsx

 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
-import { Space, Table, Popconfirm, Tooltip, Button, notification } from 'antd';
+import { Space, Table, Popconfirm, Tooltip, Button, notification, Spin, Card } from 'antd';
 import {
   CM_Feedback_LoadPatrolFeedbacks,
   CM_Feedback_RemovePatrolFeedback,
 } from '@/services/PatrolFeedback/api';
-import { EditTwoTone, DeleteOutlined, PlusOutlined, OrderedListOutlined } from '@ant-design/icons';
+import {
+  EditTwoTone,
+  DeleteOutlined,
+  PlusOutlined,
+  OrderedListOutlined,
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+} from '@ant-design/icons';
+import classnames from 'classnames';
 import styles from './patrolFeedback.less';
 import AddModal from './AddModal';
 import SortModal from './SortModal';
@@ -22,6 +30,10 @@ const patrolFeedback = () => {
   const [keepTableData, setKeepTableData] = useState([]);
   const [sortVisible, setSortVisible] = useState(false);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置
+  const [groupName, setGroupName] = useState(['区域巡检', 'DMA巡检']);
+  const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
+  const [pickItem, setPickItem] = useState('区域巡检');
+  const [hoverItemIndex, setHoverItemIndex] = useState('');
 
   const columns = [
     {
@@ -156,7 +168,31 @@ const patrolFeedback = () => {
       setTreeLoading(false);
       if (res.code === 0) {
         console.log(res.data.list);
-        setTableData(res.data.list);
+        let data = {};
+        if (res.data.list.length > 0) {
+          let area = [];
+          let dma = [];
+          let other = [];
+          res.data.list.map(i => {
+            if (i.businessGroup === '区域巡检') {
+              area.push(i);
+            } else if (i.businessGroup === 'DMA巡检') {
+              dma.push(i);
+            } else {
+              other.push(i);
+            }
+          });
+          data.区域巡检 = area;
+          data.DMA巡检 = dma;
+          data.未分组 = other;
+          if (other.length > 0) {
+            setGroupName(['区域巡检', 'DMA巡检', '未分组']);
+          }
+        }
+        console.log(data);
+        console.log(data['区域巡检']);
+        console.log(data.区域巡检);
+        setTableData(data);
         let list = [];
         res.data.list.map(i => {
           list.push(i.layerName);
@@ -244,72 +280,155 @@ const patrolFeedback = () => {
   return (
     <div className={styles.PatrolFeedbackContainer}>
       <div className={styles.contentContainers}>
-        <div style={{ height: '50px', backgroundColor: 'white' }}>
-          <span style={{ float: 'right', marginRight: '10px' }}>
-            <Button
-              icon={<PlusOutlined className={styles.icon} />}
-              onClick={add}
-              type="primary"
-              style={{
-                marginLeft: '30px',
-                verticalAlign: 'middle',
-                marginTop: '10px',
-              }}
-            >
-              <span style={{ marginTop: '-2px' }}>新增</span>
-            </Button>
-            <Button
-              icon={<OrderedListOutlined className={styles.icon} />}
-              onClick={sort}
-              style={{
-                marginLeft: '30px',
-                verticalAlign: 'middle',
-                marginTop: '10px',
-              }}
-            >
-              <span style={{ marginTop: '-2px' }}>调序</span>
-            </Button>
-            <Button
-              icon={<DeleteOutlined className={styles.icon} />}
-              style={{
-                marginLeft: '30px',
-                verticalAlign: 'middle',
-                marginTop: '10px',
-              }}
-              onClick={de}
-              disabled={!hasSelected}
-            >
-              <span style={{ marginTop: '-2px' }}>批量删除</span>
-            </Button>
-          </span>
-        </div>
-        <Table
-          // rowClassName={setRowClassName}
-          rowSelection={{
-            type: 'checkbox',
-            ...rowSelection,
-          }}
-          size="small"
-          rowKey={record => record.id}
-          bordered
-          loading={treeLoading}
-          onRow={record => ({
-            onDoubleClick: event => {
-              event.stopPropagation();
-              editEventType(record);
-            }, // 双击
+        {/* 左侧事件树 */}
+        <Spin spinning={treeLoading} tip="loading...">
+          <Card
+            className={classnames({
+              [styles.orgContainer]: true,
+              [styles.orgContainerHide]: !treeVisible,
+            })}
+          >
+            <div style={{ height: '100%', display: treeVisible ? 'block' : 'none' }}>
+              <span
+                style={{
+                  fontSize: '15px ',
+                  fontWeight: 'bold',
+                  marginLeft: '14px',
+                }}
+              >
+                业务划分
+              </span>
+              <hr style={{ width: '100%', color: '#eeecec' }} />
+              <div
+                style={{
+                  height: 'calc(100% - 60px)',
+                  overflowY: 'scroll',
+                }}
+              >
+                {groupName.length > 0 &&
+                  groupName.map((item, index) => (
+                    <div
+                      className={classnames({
+                        [styles.listItem]: true,
+                        [styles.pickItem]: item === pickItem,
+                        [styles.listHover]: item !== pickItem && item === hoverItemIndex,
+                      })}
+                      onClick={e => {
+                        setPickItem(item);
+                      }}
+                      onMouseEnter={() => {
+                        setHoverItemIndex(item);
+                      }}
+                      onMouseLeave={() => {
+                        setHoverItemIndex('');
+                      }}
+                      key={index}
+                    >
+                      <div
+                        style={{
+                          width: '130px',
+                          overflow: 'hidden',
+                          whiteSpace: 'nowrap',
+                          textOverflow: 'ellipsis',
+                        }}
+                      >
+                        <Tooltip placement="top" title={item}>
+                          {item}
+                        </Tooltip>
+                      </div>
+                      （{tableData[item] ? tableData[item].length : ''}）
+                    </div>
+                  ))}
+              </div>
+            </div>
+            <div className={styles.switcher}>
+              {treeVisible && (
+                <Tooltip title="隐藏业务划分列表">
+                  <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
+                </Tooltip>
+              )}
+              {!treeVisible && (
+                <Tooltip title="显示业务划分列表">
+                  <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
+                </Tooltip>
+              )}
+            </div>
+          </Card>
+        </Spin>
+        {/* 右侧 */}
+        <div
+          className={classnames({
+            [styles.userContainer]: true,
+            [styles.userContainerHide]: !treeVisible,
           })}
-          columns={columns}
-          dataSource={tableData}
-          scroll={{ y: 'calc(100% - 205px)', x: 'max-content' }}
-          pagination={{
-            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-            pageSizeOptions: [10, 20, 50, 100],
-            defaultPageSize: 20,
-            showQuickJumper: true,
-            showSizeChanger: true,
-          }}
-        />
+        >
+          <div style={{ height: '50px', backgroundColor: 'white' }}>
+            <span style={{ float: 'right', marginRight: '10px' }}>
+              <Button
+                icon={<PlusOutlined className={styles.icon} />}
+                onClick={add}
+                type="primary"
+                style={{
+                  marginLeft: '30px',
+                  verticalAlign: 'middle',
+                  marginTop: '10px',
+                }}
+              >
+                <span style={{ marginTop: '-2px' }}>新增</span>
+              </Button>
+              <Button
+                icon={<OrderedListOutlined className={styles.icon} />}
+                onClick={sort}
+                style={{
+                  marginLeft: '30px',
+                  verticalAlign: 'middle',
+                  marginTop: '10px',
+                }}
+              >
+                <span style={{ marginTop: '-2px' }}>调序</span>
+              </Button>
+              <Button
+                icon={<DeleteOutlined className={styles.icon} />}
+                style={{
+                  marginLeft: '30px',
+                  verticalAlign: 'middle',
+                  marginTop: '10px',
+                }}
+                onClick={de}
+                disabled={!hasSelected}
+              >
+                <span style={{ marginTop: '-2px' }}>批量删除</span>
+              </Button>
+            </span>
+          </div>
+          <Table
+            // rowClassName={setRowClassName}
+            rowSelection={{
+              type: 'checkbox',
+              ...rowSelection,
+            }}
+            size="small"
+            rowKey={record => record.id}
+            bordered
+            loading={treeLoading}
+            onRow={record => ({
+              onDoubleClick: event => {
+                event.stopPropagation();
+                editEventType(record);
+              }, // 双击
+            })}
+            columns={columns}
+            dataSource={tableData[pickItem]}
+            scroll={{ y: 'calc(100% - 205px)', x: 'max-content' }}
+            pagination={{
+              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+              pageSizeOptions: [10, 20, 50, 100],
+              defaultPageSize: 20,
+              showQuickJumper: true,
+              showSizeChanger: true,
+            }}
+          />
+        </div>
         {/* 添加事件 */}
         <AddModal
           visible={addVisible}

src/pages/bsmanager/patrolMaintenance/patrolFeedback/patrolFeedback.less

@@ -3,6 +3,9 @@
 
   .contentContainers {
     height: 100%;
+    display: flex;
+    width: 100%;
+    position: relative;
 
     .ant-table-wrapper {
       height: calc(100% - 100px);
@@ -14,6 +17,154 @@
     .ant-pagination {
       padding: 10px;
     }
+    .pickItem {
+      background-color: #aed8fa;
+    }
+  
+    .listHover {
+      background-color: #f5f6f9;
+    }
+
+    .listItem {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      font-weight: 400;
+      color: #414e65;
+      cursor: pointer;
+      line-height: 28px;
+      align-items: center;
+      padding: 8px 14px;
+    }
+
+    .orgContainer {
+      // height: calc(100vh - 74px);
+      height: 100%;
+      width: 250px;
+      left: 0;
+      top: 0;
+      margin-right: 10px;
+      position: relative;
+      transition-property: width, left;
+      transition-duration: 0.5s;
+      white-space: nowrap;
+
+      .ant-card-body {
+        height: 100%;
+      }
+
+      .ant-tree {
+        padding-top: 6px;
+
+        .ant-tree-switcher {
+          line-height: 1;
+          margin-right: 0px !important;
+          color: #1890ff;
+
+          .ant-tree-switcher-line-icon {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .switcher {
+        display: block;
+        position: absolute;
+        font-size: 18px;
+        color: #1890ff !important;
+        top: 50%;
+        right: 2px;
+        transform: translate(0%, -50%);
+        z-index: 1;
+      }
+    }
+
+    .orgContainerHide {
+      // transform: translateX(-230px);
+      left: 0px;
+      top: 0;
+      width: 26px;
+    }
+
+    .userContainer {
+      height: 100%;
+      z-index: 999;
+      min-width: 800px;
+      background: white;
+      width: 100%;
+      position: relative;
+      transition: width 0.5s;
+
+      .title {
+        margin: 16px 0 10px 16px;
+        display: inline-block;
+        width: 270px;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .ant-table-pagination {
+        padding-right: 12px;
+        background: white;
+        margin: 1px 0;
+        padding: 8px;
+        padding-right: 20px;
+      }
+
+      .ant-btn {
+        margin: 0px 10px;
+
+        .ant-btn-primary {
+          background: #50aefc;
+        }
+      }
+
+      .ant-input-search-button {
+        margin-left: 0px !important;
+      }
+
+      .ant-table-thead tr th {
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.85);
+        background-color: #f6f9fe;
+      }
+
+      .ant-table-cell {
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .ant-table-wrapper {
+        height: calc(100% - 50px);
+
+        .ant-table {
+          height: calc(100% - 45px);
+
+          .ant-table-container {
+            height: 100%;
+          }
+        }
+      }
+
+      // .ant-table-body {
+      //   height: calc(100vh - 210px);
+      //   border-right: white;
+      //   overflow: auto !important;
+      // }
+
+      .clickRowStyle {
+        background: #cfe7fd;
+      }
+
+      .ant-pagination {
+        z-index: 999;
+        border-top: 1px solid #f0eded;
+      }
+    }
   }