fix: 工作台搭建

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.js

@@ -49,7 +49,6 @@ const Group = (props) => {
       }
     },
     hover(item) {
-      console.log('item', item)
       if (item.widget === '通栏布局') {
         swapIndex(props.index, item.index)
         item.index = props.index

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js

@@ -62,8 +62,10 @@ const Container = (props, ref) => {
   const btnsClick = (item) => {
     let index = 0
     if (item.title === '置顶') {
+      moblieRef.current.scrollTop = 0
       index = 0
     } else if (item.title === '置底') {
+      moblieRef.current.scrollTop = (moblieRef.current.scrollHeight - moblieRef.current.clientHeight)
       index = shema?.work.length - 1
     } else if (item.title === '上一项') {
       let ativeIndex = shema?.work?.findIndex(v => v.active) - 1

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/index.js

-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import styles from './index.less'
 import { Form, Modal, Input, message, Button, TreeSelect, Select } from 'antd'
-import { RightOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
+import { RightOutlined, ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { getSchemeList, saveScheme, deleteScheme, roleGroupList } from '@/services/mobileConfig/api'
 import Designer from './components/Designer'
 
@@ -15,6 +15,7 @@ const WorkDesign = (props) => {
 
   const userName = sessionStorage.getItem('userName')
   const [isCardList, setIsCardList] = useState(true)
+  const [tabIndex, setTabIndex] = useState(0)
   const [cardList, setCardList] = useState([])
   const [roleList, setRoleList] = useState([])
   const [visible, setVisible] = useState(false)
@@ -22,6 +23,18 @@ const WorkDesign = (props) => {
   const [currentCard, setCurrentCard] = useState({})
   const [form] = Form.useForm()
 
+  const tabs = useMemo(() => {
+    const getCount = (type) => {
+      return cardList.filter(v => v['类型'] === type).length
+    }
+    return [
+      { label: '全部', value: '全部', count: cardList.length },
+      { label: '运营', value: '运营', count: getCount('运营') },
+      { label: '执行', value: '执行', count: getCount('执行') },
+      { label: '管理', value: '管理', count: getCount('管理') },
+    ]
+  }, [cardList])
+
   const addCard = () => {
     form.setFieldsValue({ '名称': '', '关联角色ID': [], '描述': '', '类型': '' })
     setCurrentCard({})
@@ -145,20 +158,38 @@ const WorkDesign = (props) => {
         ) :
           !isDesign ? (
             <div className={styles.content}>
-              <div className={styles.cardList}>
-                <div className={styles.cardAdd}>
-                  <div className={styles.content}>
-                    <div className={styles.text} onClick={() => addCard()}>
-                      <span className={styles.addIcon}></span>
-                      <span>新建工作台</span>
+              <div className={styles.listHeader}>
+                <div className={styles['h-left']}>
+                  {
+                    tabs.map((v, i) => {
+                      return (
+                        <div
+                          key={v.value}
+                          icon={<PlusOutlined />}
+                          className={styles.tab}
+                          active={`${tabIndex === i}`}
+                          onClick={() => setTabIndex(i)}
+                        >
+                          <span>{v.label}</span>
+                          <span>({v.count + '个'})</span>
+                          <div className={styles.line} style={{ width: tabIndex === i ? '80px' : '0px' }}></div>
                         </div>
+                      )
+                    })
+                  }
+                </div>
+                <div className={styles['h-right']}>
+                  <Button type='primary' icon={<PlusOutlined />} onClick={() => addCard()}>新建</Button>
                 </div>
               </div>
+              <div className={styles.cardList}>
                 {
                   cardList.map(v => {
+                    const type = tabs[tabIndex].value
+                    const isShow = (type === '全部') || (type === v['类型'])
                     return (
-                      <div className={styles.card} key={v.ID}>
-                        <div className={styles['card-type']} type={v['类型'] || '运营'}>{v['类型'] || '运营'}</div>
+                      <div className={styles.card} key={v.ID} style={{ display: isShow ? 'block' : 'none' }}>
+                        <div className={styles['card-type']} type={v['类型']}>{v['类型']}</div>
                         <div className={styles.title}>
                           <div className={styles['title-click']} onClick={() => editCard(v)}>
                             <span className={styles['title-text']}>{v['名称']}</span>
@@ -177,11 +208,11 @@ const WorkDesign = (props) => {
                           </div>
                         </div>
                         <div className={styles.footer}>
-                          <div>
+                          <div style={{ marginTop: '5px' }}>
                             <span className={styles.label}>角色名称：</span>
                             <span>{v['角色名称']}</span>
                           </div>
-                          <div>
+                          <div style={{ marginTop: '5px' }}>
                             <span className={styles.label}>更新时间：</span>
                             <span>{v['更新时间']}</span>
                           </div>

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/index.less

@@ -23,47 +23,54 @@
     width: 100%;
     height: 100%;
     border: 1px solid #dbdbdb;
-    padding: 0 0 0.5% 1.5%;
-    overflow: auto;
-    .cardList {
+    .listHeader {
       display: flex;
-      flex-wrap: wrap;
-      .cardAdd {
-        margin-right: 1.5%;
-        margin-top: 0.5%;
-        width: 18%;
-        border-radius: 5px;
+      align-items: center;
+      justify-content: space-between;
+      height: 50px;
       background: white;
-        padding: 10px;
-        box-shadow: 1px -2px 7px gainsboro;
-        .content {
-          border: 1px dashed #c8c8c8;
+      padding: 0 10px;
+      .h-left {
         display: flex;
-          align-items: center;
-          justify-content: center;
-          .text {
-            transition: all 0.5s;
+        .tab {
+          width: 100px;
+          text-align: center;
+          font-size: 15px;
+          line-height: 50px;
+          font-weight: bold;
+          position: relative;
+          height: 50px;
           &:hover {
             cursor: pointer;
+          }
+          &[active='true'] {
             color: #1890ff;
           }
-            .addIcon {
-              display: inline-block;
-              width: 16px;
-              height: 16px;
-              background: url('@{imgSrc}/添加.png');
-              background-size: 100% 100%;
-              margin: 0 5px;
-              position: relative;
-              top: 2px;
+          .line {
+            height: 2px;
+            background: #1890ff;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 0;
+            transition: all 0.5s;
+            overflow: hidden;
           }
         }
       }
     }
+    .cardList {
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow: auto;
+      padding: 0 0 0.5% 1.5%;
+      display: flex;
+      flex-wrap: wrap;
       .card {
         margin-right: 1.5%;
-        margin-top: 0.5%;
-        width: 18%;
+        margin-top: 1.5%;
+        margin-bottom: 0.5%;
+        width: 23%;
         border-radius: 5px;
         background: white;
         padding: 15px;
@@ -116,7 +123,7 @@
         }
         .img {
           width: 100%;
-          height: 300px;
+          height: 530px;
           transition: all 0.5s ease-in-out;
           position: relative;
           background: url('@{imgSrc}/预览图.jpg');
@@ -129,7 +136,7 @@
             cursor: pointer;
             .imgCenter {
               width: 100%;
-              height: 300px;
+              height: 530px;
             }
           }
           .imgCenter {