fix: 工作台搭建优化

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

-import React, { useRef, useContext } from 'react'
+import React, { useState, useRef, useContext, useEffect, useCallback } from 'react'
 import styles from './index.less'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../../index'
+import { message } from 'antd'
 
 const Group = (props) => {
 
   const { shema, setShema } = useContext(GlobalStore)
   const ref = useRef(null)
 
-  const [, drop] = useDrop(() => {
-    return {
-      accept: 'card',
-      drop(card) {
-        setShema(shema => {
-          let array = []
-          shema?.work?.forEach(v => {
-            let children = [...v.children]
-            if (props.id === v.id) {
-              children = [...v.children, card]
-            }
-            array.push({ ...v, children: children })
+  const swapIndex = useCallback((index1, index2) => {
+    const cardList = shema.work
+    const tmp = cardList[index1];
+    cardList[index1] = cardList[index2];
+    cardList[index2] = tmp;
+    setShema({ ...shema, work: cardList })
+  }, [shema.work])
+
+  const [, drag] = useDrag({
+    type: 'card',
+    item: {
+      id: props.id,
+      index: props.index,
+      widget: props.widget,
+    },
+  })
+
+  const [, drop] = useDrop({
+    accept: 'card',
+    drop(item) {
+      if (item.widget !== '通栏布局') {
+        const isHave = props.children.some(v => v.widget === item.widget)
+        if (isHave) {
+          message.info({ type: 'info', content: '同一个分组不允许组件重复!' })
+        } else {
+          setShema(shema => {
+            let array = []
+            shema?.work?.forEach(v => {
+              let children = [...v.children]
+              if (props.id === v.id) {
+                children = [...v.children, item]
+              }
+              array.push({ ...v, children: children })
+            })
+            return { ...shema, work: array }
           })
-          return { ...shema, work: array }
-        })
+        }
+      }
+    },
+    hover(item) {
+      console.log('item', item)
+      if (item.widget === '通栏布局') {
+        swapIndex(props.index, item.index)
+        item.index = props.index
       }
     }
   })
 
-  drop(ref)
+  useEffect(() => {
+    drag(ref)
+    drop(ref)
+  }, [])
 
   const groupClick = (e, item) => {
     e.stopPropagation()

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

@@ -42,7 +42,7 @@ const Container = (props) => {
           <div className={styles.moblieCenter} name={shema.theme}>
             <div style={{ padding: '10px' }}>
               {
-                shema?.work?.map(v => <Group key={v.id} {...v} />)
+                shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
               }
             </div>
           </div>

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

 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .container {
-  width: calc(100% - 620px);
+  width: calc(100% - 660px);
   height: 100%;
   background: white;
   margin: 0 10px;

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

 import React, { useState, useRef, useContext } from 'react'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../index'
+import { CaretRightOutlined } from '@ant-design/icons'
 import styles from './index.less'
 
 const getNanoid = (len = 10) => {
@@ -49,8 +50,6 @@ const Group = (props) => {
   )
 }
 
-
-//111
 const Card = (props) => {
 
   const ref = useRef(null)
@@ -81,6 +80,26 @@ const Card = (props) => {
   )
 }
 
+//卡片分组
+const CardGroup = (props) => {
+
+  const [shrink, setShrink] = useState(false)
+
+  return (
+    <div className={styles.cardGroup}>
+      <div className={styles['g-top']} onClick={() => setShrink(!shrink)}>
+        <CaretRightOutlined style={{ transition: '0.5s all', transform: !shrink ? 'rotate(90deg)' : '' }} />
+        <span>{props.title}</span>
+        <span>{`(${props.count})`}</span>
+      </div>
+      <div className={styles['g-cards']} style={{ height: shrink ? '0px' : 'unset' }}>
+        {props.children}
+      </div>
+    </div>
+  )
+
+}
+
 const Left = () => {
 
   return (
@@ -96,22 +115,27 @@ const Left = () => {
         <div className={styles.item}>
           <div className={styles['g-title']}>卡片组件</div>
           <div className={styles['g-content']}>
-            <div>运营总览</div>
-            <Card name={'运营总览'} widget={'OVERVIEW'}></Card>
-            <div>水厂</div>
-            <Card name={'水厂总览'} widget={'WATER_OVERVIEW'}></Card>
-            <Card name={'供水量曲线'} widget={'WATER_CHART'}></Card>
-            <div>管网</div>
-            <Card name={'管网监控'} widget={'PIPEMONITORING'}></Card>
-            <Card name={'管网采集'} widget={'PIPEGATHER'}></Card>
-            <Card name={'管网巡检'} widget={'PIPEINSPECTION'}></Card>
-            <Card name={'维修工单'} widget={'MAINTENANCEORDER'}></Card>
-            <div>二供</div>
-            <Card name={'二供总览'} widget={'OPERATIONAL_OVERVIEW'}></Card>
-            <Card name={'泵房运行状态'} widget={'PUMP_STATUS'}></Card>
-            <Card name={'泵房维修保养'} widget={'PUMP_MAINTAIN'}></Card>
-            <div>营收</div>
-            <Card name={'营收总览'} widget={'REVENUE_OVERVIEW'}></Card>
+            <CardGroup title={'运营总览'} count={1}>
+              <Card name={'运营总览'} widget={'OVERVIEW'}></Card>
+            </CardGroup>
+            <CardGroup title={'水厂'} count={2}>
+              <Card name={'水厂总览'} widget={'WATER_OVERVIEW'}></Card>
+              <Card name={'供水量曲线'} widget={'WATER_CHART'}></Card>
+            </CardGroup>
+            <CardGroup title={'管网'} count={4}>
+              <Card name={'管网监控'} widget={'PIPEMONITORING'}></Card>
+              <Card name={'管网采集'} widget={'PIPEGATHER'}></Card>
+              <Card name={'管网巡检'} widget={'PIPEINSPECTION'}></Card>
+              <Card name={'维修工单'} widget={'MAINTENANCEORDER'}></Card>
+            </CardGroup>
+            <CardGroup title={'二供'} count={4}>
+              <Card name={'二供总览'} widget={'OPERATIONAL_OVERVIEW'}></Card>
+              <Card name={'泵房运行状态'} widget={'PUMP_STATUS'}></Card>
+              <Card name={'泵房维修保养'} widget={'PUMP_MAINTAIN'}></Card>
+            </CardGroup>
+            <CardGroup title={'营收'} count={1}>
+              <Card name={'营收总览'} widget={'REVENUE_OVERVIEW'}></Card>
+            </CardGroup>
           </div>
         </div>
       </div>

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less

 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .left {
-  width: 300px;
+  width: 320px;
   height: 100%;
   background: white;
   .header {
@@ -97,4 +97,19 @@
       }
     }
   }
+}
+
+.cardGroup {
+  padding-left: 10px;
+  font-size: 14px;
+  .g-top {
+    display: inline;
+    &:hover {
+      cursor: pointer;
+      color: #1890ff;
+    }
+  }
+  .g-cards {
+    overflow: hidden;
+  }
 }
\ No newline at end of file

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.less

 @imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .right {
-  width: 300px;
+  width: 320px;
   height: 100%;
   background: white;
   .header {

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

@@ -9,11 +9,15 @@ import Right from './Right'
 
 export const GlobalStore = createContext(null)
 
+const initShema = {
+  work: [],
+  active: true,
+  type: '运营组件',
+}
 const Designer = (props) => {
 
   const { currentCard, } = props
-  const [shema, setShema] = useState(currentCard['卡片结构'] ? { ...JSON.parse(currentCard['卡片结构']) } : { work: [], active: true })
-
+  const [shema, setShema] = useState(currentCard['卡片结构'] ? { ...JSON.parse(currentCard['卡片结构']) } : initShema)
 
   const goBack = () => {
     props?.goBack?.()

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

 import React, { useEffect, useState } from 'react'
 import styles from './index.less'
 import { Form, Modal, Input, message, Button, TreeSelect } from 'antd'
+import { RightOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
 import { getSchemeList, saveScheme, deleteScheme, roleGroupList } from '@/services/mobileConfig/api'
 import Designer from './components/Designer'
 
 const WorkDesign = (props) => {
 
   const userName = sessionStorage.getItem('userName')
+  const [isCardList, setIsCardList] = useState(true)
   const [cardList, setCardList] = useState([])
   const [roleList, setRoleList] = useState([])
   const [visible, setVisible] = useState(false)
@@ -15,6 +17,7 @@ const WorkDesign = (props) => {
   const [form] = Form.useForm()
 
   const addCard = () => {
+    form.setFieldsValue({ '名称': '', '关联角色ID': [], '描述': '' })
     setCurrentCard({})
     setVisible(true)
   }
@@ -29,6 +32,9 @@ const WorkDesign = (props) => {
     const { code, data } = await getSchemeList()
     if (code === 0) {
       setCardList(data)
+      if (data.length) {
+        setIsCardList(false)
+      }
     }
   }
 
@@ -45,6 +51,7 @@ const WorkDesign = (props) => {
         if (v.roleList) {
           v.roleID = v.visibleTitle
           v.roleName = v.visibleTitle
+          v.disabled = true
         }
         v.roleList = v.roleList || []
       })
@@ -78,13 +85,27 @@ const WorkDesign = (props) => {
   }
 
   const deleteDesgin = async (item) => {
-    const { code, data, msg } = await deleteScheme({ ID: item.ID })
-    if (code === 0) {
-      getCardList()
-      message.success({ content: '删除成功!' })
-    } else {
-      message.error({ content: msg })
-    }
+    Modal.confirm({
+      title: '是否确定删除该工作方案?',
+      icon: <ExclamationCircleOutlined />,
+      centered: true,
+      onOk() {
+        return new Promise(async (resolve, reject) => {
+          const { code, data, msg } = await deleteScheme({ ID: item.ID })
+          if (code === 0) {
+            resolve()
+            getCardList()
+            message.success({ content: '删除成功!' })
+          } else {
+            reject()
+            message.error({ content: msg })
+          }
+        })
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    })
   }
 
   const saveDesgin = async (card) => {
@@ -108,58 +129,72 @@ const WorkDesign = (props) => {
   return (
     <div className={styles.workDesign}>
       {
-        !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>
+        isCardList ? (
+          <div className={styles.workBg}>
+            <div className={styles['b-text']}>
+              <span onClick={() => addCard()}>开始搭建工作台</span>
+              <RightOutlined style={{ position: 'relative', top: '1px', marginLeft: '5px' }} />
+            </div>
+          </div>
+        ) :
+          !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>
                   </div>
                 </div>
-              </div>
-              {
-                cardList.map(v => {
-                  return (
-                    <div className={styles.card} key={v.ID}>
-                      <div className={styles.title} onClick={() => editCard(v)}>{v['名称']}</div>
-                      <div className={styles.img}>
-                        <div className={styles.imgCenter}>
-                          <div>
-                            <Button type="primary" onClick={() => toDesign(v)}>编辑</Button>
-                          </div>
-                          <div style={{ marginTop: '10px' }}>
-                            <Button type="primary" danger onClick={() => deleteDesgin(v)}>删除</Button>
+                {
+                  cardList.map(v => {
+                    return (
+                      <div className={styles.card} key={v.ID}>
+                        <div className={styles['card-type']} type={v?.scheme?.type || '运营组件'}>{v?.scheme?.type || '运营组件'}</div>
+                        <div className={styles.title}>
+                          <div className={styles['title-click']} onClick={() => editCard(v)}>
+                            <span className={styles['title-text']}>{v['名称']}</span>
+                            <span className={styles['title-icon']}></span>
                           </div>
                         </div>
-                      </div>
-                      <div className={styles.footer}>
-                        <div>
-                          <span className={styles.label}>角色名称：</span>
-                          <span>{v['角色名称']}</span>
+                        <div className={styles.img}>
+                          <div className={styles.imgCenter}>
+                            <div>
+                              <Button type="primary" onClick={() => toDesign(v)}>编辑</Button>
+                            </div>
+                            <div style={{ marginTop: '10px' }}>
+                              <Button type="primary" danger onClick={() => deleteDesgin(v)}>删除</Button>
+                            </div>
+                          </div>
                         </div>
-                        <div>
-                          <span className={styles.label}>更新时间：</span>
-                          <span>{v['更新时间']}</span>
+                        <div className={styles.footer}>
+                          <div>
+                            <span className={styles.label}>角色名称：</span>
+                            <span>{v['角色名称']}</span>
+                          </div>
+                          <div>
+                            <span className={styles.label}>更新时间：</span>
+                            <span>{v['更新时间']}</span>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  )
-                })
-              }
+                    )
+                  })
+                }
+              </div>
             </div>
-          </div>
-        ) : (
-          <Designer
-            currentCard={currentCard}
-            goBack={goBack}
-            saveDesgin={saveDesgin}
-          />
-        )
+          ) : (
+            <Designer
+              currentCard={currentCard}
+              goBack={goBack}
+              saveDesgin={saveDesgin}
+            />
+          )
       }
       <Modal
-        title={'创建工作台'}
+        title={currentCard.ID ? '编辑工作台' : '创建工作台'}
         visible={visible}
         onCancel={() => setVisible(false)}
         onOk={onOk}
@@ -168,6 +203,7 @@ const WorkDesign = (props) => {
         <Form
           layout="vertical"
           form={form}
+          initialValues={{ '名称': '', '关联角色ID': '', '描述': '' }}
         >
           <Form.Item
             label={'工作台名称'}
@@ -191,6 +227,13 @@ const WorkDesign = (props) => {
             >
             </TreeSelect>
           </Form.Item>
+          {/* <Form.Item
+            label={'组件类型'}
+            name={'类型'}
+            rules={[{ required: true }]}
+          >
+            <Input />
+          </Form.Item> */}
           <Form.Item
             label={'工作台描述'}
             name={'描述'}
@@ -199,7 +242,7 @@ const WorkDesign = (props) => {
           </Form.Item>
         </Form>
       </Modal>
-    </div>
+    </div >
   )
 
 }

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

@@ -3,18 +3,35 @@
   width: 100%;
   height: 100%;
   background: #efefef;
+  .workBg {
+    width: 100%;
+    height: 100%;
+    background: url('@{imgSrc}/新建工作台初始页.png');
+    background-size: 100% 100%;
+    .b-text {
+      text-align: center;
+      padding: 7.5% 2% 0 0;
+      font-size: 20px;
+      font-weight: 700;
+      color: #0082F0;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
   .content {
     width: 100%;
     height: 100%;
     border: 1px solid #dbdbdb;
-    padding: 0 0 0.5% 0.5%;
+    padding: 0 0 0.5% 1.5%;
+    overflow: auto;
     .cardList {
       display: flex;
       flex-wrap: wrap;
       .cardAdd {
-        margin-right: 0.55%;
+        margin-right: 1.5%;
         margin-top: 0.5%;
-        width: 13.8%;
+        width: 18%;
         border-radius: 5px;
         background: white;
         padding: 10px;
@@ -44,24 +61,51 @@
         }
       }
       .card {
-        margin-right: 0.55%;
+        margin-right: 1.5%;
         margin-top: 0.5%;
-        width: 13.7%;
+        width: 18%;
         border-radius: 5px;
         background: white;
-        padding: 10px;
+        padding: 15px;
         box-shadow: 1px -2px 7px gainsboro;
+        position: relative;
+        .card-type {
+          position: absolute;
+          right: -12px;
+          top: 16px;
+          width: 80px;
+          height: 36px;
+          background: url('@{imgSrc}/运营组件.png');
+          background-size: 100% 100%;
+          color: white;
+          padding-left: 10px;
+        }
         .title {
           font-size: 12px;
           font-weight: 700;
-          &:hover {
-            cursor: pointer;
-            color: #1890ff;
+          .title-click {
+            display: inline-block;
+            &:hover {
+              cursor: pointer;
+              color: #1890ff;
+            }
+            .title-text {
+              font-size: 16px;
+            }
+            .title-icon {
+              display: inline-block;
+              margin-left: 5px;
+              width: 14px;
+              height: 14px;
+              background: url('@{imgSrc}/编辑.png');
+              background-size: 100% 100%;
+            }
           }
+          .card-type {}
         }
         .img {
           width: 100%;
-          height: 200px;
+          height: 300px;
           transition: all 0.5s ease-in-out;
           position: relative;
           background: url('@{imgSrc}/预览图.jpg');
@@ -73,7 +117,7 @@
             cursor: pointer;
             .imgCenter {
               width: 100%;
-              height: 200px;
+              height: 300px;
             }
           }
           .imgCenter {