fix: 工作台搭建优化

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

-import React, { useRef, useContext } from 'react'
+import React, { useRef, useContext, useState, useEffect } from 'react'
 import styles from './index.less'
-import { DownOutlined } from '@ant-design/icons'
+import { DownOutlined, VerticalAlignTopOutlined, UpOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../index'
 import Group from './Group'
 import moment from 'moment'
+import { getSiteTree } from '@/services/siteManage/api';
+
+const btns = [
+  { title: '置顶', icon: <VerticalAlignTopOutlined /> },
+  { title: '上一项', icon: <UpOutlined /> },
+  { title: '下一项', icon: <DownOutlined /> },
+  { title: '置底', icon: <VerticalAlignBottomOutlined /> },
+]
 
 const Container = (props) => {
 
   const currentDate = moment().format('YYYY-MM-DD')
   const ref = useRef(null)
+  const [currentSite, setCurrentSite] = useState('永吉水务有限公司')
   const { shema, setShema } = useContext(GlobalStore)
 
   const [, drop] = useDrop(() => {
@@ -31,10 +40,43 @@ const Container = (props) => {
     setShema({ ...shema, work: array, active: true })
   }
 
+  const getSite = async () => {
+    const { code, data } = await getSiteTree({ node: -1 })
+    if (code === 0) {
+      setCurrentSite(data?.list?.[0].text)
+    }
+  }
+
+  const getData = () => {
+    getSite()
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  const btnsClick = (item) => {
+    let index = 0
+    if (item.title === '置顶') {
+      index = 0
+    } else if (item.title === '置底') {
+      index = shema?.work.length - 1
+    } else if (item.title === '上一项') {
+      let ativeIndex = shema?.work?.findIndex(v => v.active) - 1
+      index = ativeIndex >= 0 ? ativeIndex : 0
+    } else if (item.title === '下一项') {
+      let ativeIndex = shema?.work?.findIndex(v => v.active) + 1
+      index = ativeIndex < (shema?.work.length - 1) ? ativeIndex : shema?.work.length - 1
+    }
+    let array = []
+    shema?.work.forEach((v, i) => {
+      array.push({ ...v, active: index === i, children: v.children.map(s => ({ ...s, active: false })) })
+    })
+    setShema({ ...shema, work: array, active: false })
+  }
+
   return (
-    <div
-      className={styles.container}
-    >
+    <div className={styles.container}>
       <div className={styles.content}>
         <div
           ref={ref}
@@ -46,7 +88,7 @@ const Container = (props) => {
             <div className={styles['m-info']}>
               <div className={styles['i-company']}>
                 <span className={styles['c-address']}></span>
-                <span>永吉水务有限公司</span>
+                <span>{currentSite}</span>
                 <DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
               </div>
               <div className={styles['i-date']}>
@@ -62,6 +104,15 @@ const Container = (props) => {
             </div>
           </div>
         </div>
+        <div className={styles['c-btns']}>
+          {
+            btns.map(v => {
+              return (
+                <div key={v.title} className={styles['c-btn']} onClick={() => btnsClick(v)}>{v.icon}</div>
+              )
+            })
+          }
+        </div>
       </div>
     </div>
   )

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

@@ -17,6 +17,27 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+    .c-btns {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      .c-btn {
+        border-radius: 50%;
+        background: white;
+        width: 30px;
+        height: 30px;
+        margin-bottom: 10px;
+        font-size: 15px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:hover {
+          cursor: pointer;
+          color: #1985FF;
+        }
+      }
+    }
     .moblie {
       width: 330px;
       overflow: auto;

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

-import React, { useState, useRef, useContext } from 'react'
+import React, { useState, useRef, useContext, useMemo } from 'react'
+import { Checkbox, Row, Col } from 'antd'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
-import { GlobalStore } from '../index'
 import { CaretRightOutlined } from '@ant-design/icons'
 import styles from './index.less'
 
+const cardTypes = ['管理', '执行', '运营']
+
+const cards = [
+  {
+    title: '运营总览',
+    count: 1,
+    children: [
+      { name: '运营总览', widget: 'OVERVIEW', type: '运营' }
+    ]
+  },
+  {
+    title: '水厂',
+    count: 2,
+    children: [
+      { name: '水厂总览', widget: 'WATER_OVERVIEW', type: '运营' },
+      { name: '供水量曲线', widget: 'WATER_CHART', type: '运营' },
+    ]
+  },
+  {
+    title: '管网',
+    count: 4,
+    children: [
+      { name: '管网监控', widget: 'PIPEMONITORING', type: '运营' },
+      { name: '管网采集', widget: 'PIPEGATHER', type: '运营' },
+      { name: '管网巡检', widget: 'PIPEINSPECTION', type: '运营' },
+      { name: '维修工单', widget: 'MAINTENANCEORDER', type: '运营' },
+    ]
+  },
+  {
+    title: '二供',
+    count: 3,
+    children: [
+      { name: '二供总览', widget: 'OPERATIONAL_OVERVIEW', type: '运营' },
+      { name: '泵房运行状态', widget: 'PUMP_STATUS', type: '运营' },
+      { name: '泵房维修保养', widget: 'PUMP_MAINTAIN', type: '运营' },
+    ]
+  },
+  {
+    title: '营收',
+    count: 1,
+    children: [
+      { name: '营收总览', widget: 'REVENUE_OVERVIEW', type: '运营' },
+    ]
+  }
+]
+
 const getNanoid = (len = 10) => {
   var orgStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   let returnStr = "";
@@ -51,7 +97,7 @@ const Group = (props) => {
 }
 
 const Card = (props) => {
-
+  console.log('pprops', props)
   const ref = useRef(null)
   const id = getNanoid()
 
@@ -71,11 +117,9 @@ const Card = (props) => {
       ref={ref}
       className={styles.card}
     >
-      <div
-        className={styles.cardBox}
-        widget={props.widget}
-      >
-      </div>
+      <div className={styles.cardType} type={props.type}>{props.type + '组件'}</div>
+      <div className={styles.cardBox} widget={props.widget}></div>
+      <div className={styles.swiper}>{props.name}</div>
     </div>
   )
 }
@@ -102,6 +146,23 @@ const CardGroup = (props) => {
 
 const Left = () => {
 
+  const [cardType, setCardType] = useState(cardTypes)
+
+  const cardsFilter = useMemo(() => {
+    let array = []
+    cards.forEach(v => {
+      let children = v.children.filter(s => cardType.includes(s.type))
+      if (children.length) {
+        array.push({ ...v, children })
+      }
+    })
+    return array
+  }, [cards, cardType])
+
+  const cardTypeChange = (value) => {
+    setCardType(value)
+  }
+
   return (
     <div className={styles.left}>
       <div className={styles.header}>组件库</div>
@@ -113,29 +174,38 @@ const Left = () => {
           </div>
         </div>
         <div className={styles.item}>
-          <div className={styles['g-title']}>卡片组件</div>
+          <div className={styles['g-title']} style={{ paddingBottom: '0' }}>卡片组件</div>
+          <div className={styles['g-checks']}>
+            <Checkbox.Group
+              style={{ width: '100%' }}
+              value={cardType}
+              onChange={cardTypeChange}
+            >
+              <Row>
+                {
+                  cardTypes.map(v => {
+                    return (
+                      <Col key={v} span={8} style={{ display: 'flex', justifyContent: 'center' }}>
+                        <Checkbox value={v}>{v}</Checkbox>
+                      </Col>
+                    )
+                  })
+                }
+              </Row>
+            </Checkbox.Group>
+          </div>
           <div className={styles['g-content']}>
-            <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>
+            {
+              cardsFilter.map(v => {
+                return (
+                  <CardGroup key={v.title} {...v}>
+                    {
+                      v.children.map(s => <Card key={s.name} {...s}></Card>)
+                    }
                   </CardGroup>
+                )
+              })
+            }
           </div>
         </div>
       </div>

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

@@ -19,6 +19,10 @@
         font-size: 14px;
         font-weight: 700;
       }
+      .g-checks {
+        padding: 9px 0;
+        background: linear-gradient(to top, #F3F3F3, #FFFFFF);
+      }
       .g-content {
         padding: 0 10px;
         .group {
@@ -33,9 +37,10 @@
     .card {
       width: 100%;
       border-radius: 4px;
-      background: #E4E4E4;
+      background: #f4f4f4;
       margin-top: 7px;
       padding: 10px;
+      position: relative;
       .cardBox {
         width: 100%;
         height: 100%;
@@ -95,6 +100,44 @@
           background-size: 100% 100%;
         }
       }
+      &:hover {
+        .swiper {
+          height: 25px;
+        }
+      }
+      .cardType {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: white;
+        padding: 2px 5px;
+        &[type='管理'] {
+          border-radius: 4px;
+          background: #2291ee;
+        }
+        &[type='执行'] {
+          border-radius: 4px;
+          background: #9079FF;
+        }
+        &[type='运营'] {
+          border-radius: 4px;
+          background: #26BB9A;
+        }
+      }
+      .swiper {
+        overflow: hidden;
+        position: absolute;
+        transition: all 0.5s;
+        color: white;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        height: 0;
+        line-height: 25px;
+        border-radius: 0 0 4px 4px;
+        background: rgba(0, 0, 0, 0.3);
+      }
     }
   }
 }
@@ -102,6 +145,7 @@
 .cardGroup {
   padding-left: 10px;
   font-size: 14px;
+  margin-top: 3px;
   .g-top {
     display: inline;
     &:hover {

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

 import React, { useState, useContext, useMemo, useEffect } from 'react'
 import styles from './index.less'
-import { Input, Form } from 'antd'
+import { Input, Form, TreeSelect, Switch, Modal } from 'antd'
 import { GlobalStore } from '../index'
+import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api'
+import {
+  UsergroupDeleteOutlined,
+  IdcardOutlined,
+  DesktopOutlined,
+  FolderFilled,
+  FileOutlined,
+  MobileOutlined,
+  DeleteOutlined,
+  PictureOutlined,
+} from '@ant-design/icons'
+
+const { TreeNode } = TreeSelect
 
 const themes = [
   { name: '供水主题背景' },
@@ -14,6 +27,8 @@ const Right = () => {
   const { shema, setShema } = useContext(GlobalStore)
   const { active } = shema
   const [form] = Form.useForm()
+  const [moblieList, setMoblieList] = useState([])
+  const [iconShow, setIconShow] = useState()
 
   const name = useMemo(() => {
     let name = ''
@@ -73,6 +88,92 @@ const Right = () => {
     setShema({ ...shema, work: array })
   }
 
+  const cardSettingOther = (value, attr) => {
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, children: v.children.map(v => ({ ...v, [attr]: v.active ? value : v[[attr]] })) })
+    })
+    setShema({ ...shema, work: array })
+  }
+
+  const getAppList = async () => {
+    const { code, data } = await getMiniAppModuleTree({ userMode: 'super', })
+    if (code === 0) {
+      let array = (data[0].children.length > 0 && [...data[0].children]) || [];
+      let list = [];
+      array.map((i, j) => {
+        let aa = [];
+        i.children.map(k => {
+          if (k.text === '菜单管理') {
+            aa = k.children;
+          }
+        });
+        let a = {};
+        a.value = `praent${j}`;
+        a.text = i.text;
+        a.children = aa;
+        a.menuID = `praent${j}`;
+        a.key = `praent${j}`;
+        list.push(a);
+      })
+      setMoblieList(list)
+    }
+  }
+
+  const mapTreeMoblie = (org) => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    if (org.key) {
+      if (haveChildren) {
+        return (
+          <TreeNode
+            value={org.pageUrl || org.menuID}
+            title={org.text}
+            icon={org.key ? <MobileOutlined /> : <FolderFilled />}
+            disabled
+          >
+            {org.children.map(item => mapTreeMoblie(item))}
+          </TreeNode>
+        );
+      }
+      return <TreeNode value={org.pageUrl || org.menuID} title={org.text} icon={<MobileOutlined />} disabled />;
+    }
+    return haveChildren ? (
+      <TreeNode
+        value={org.pageUrl || org.menuID}
+        title={org.text}
+        icon={org.key ? <MobileOutlined /> : <FolderFilled />}
+        disabled
+      >
+        {org.children.map(item => mapTreeMoblie(item))}
+      </TreeNode>
+    ) : (
+      <TreeNode
+        value={org.pageUrl || org.menuID}
+        title={org.text}
+        icon={
+          org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo' ? (
+            <FolderFilled />
+          ) : (
+            <FileOutlined style={{ color: '#1890ff' }} />
+          )
+        }
+        disabled={org.menuType == 'MiniAppMenuGroup' || org.menuType == 'MiniAppMenuGroupTwo'}
+      />
+    )
+  }
+
+  const getData = () => {
+    getAppList()
+  }
+
+  const iconShowChange = () => {
+    setIconShow(true)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
   return (
     <div className={styles.right}>
       <div className={styles.header}>{active ? '页面配置' : '组件配置'}</div>
@@ -119,11 +220,27 @@ const Right = () => {
                 <Form.Item label="卡片名称" name="name">
                   <Input value={card.name} onChange={(e) => cardSetting(e, 'name')} />
                 </Form.Item>
+                <Form.Item label="卡片名称是否显示" name="nameShow" valuePropName='checked'>
+                  <Switch checked={card.nameShow} onChange={check => cardSettingOther(check, 'nameShow')} />
+                </Form.Item>
                 <Form.Item label="卡片图标" name="icon">
                   <Input value={card.icon} onChange={(e) => cardSetting(e, 'icon')} />
                 </Form.Item>
                 <Form.Item label="功能跳转" name="url">
-                  <Input.TextArea value={card.url} onChange={(e) => cardSetting(e, 'url')} />
+                  <TreeSelect
+                    showSearch
+                    treeNodeFilterProp="title"
+                    style={{ width: '97%' }}
+                    value={card.url}
+                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                    placeholder="请选择功能路径"
+                    allowClear
+                    treeDefaultExpandAll
+                    treeIcon
+                    onChange={(value) => cardSettingOther(value, 'url')}
+                  >
+                    {moblieList.map(i => mapTreeMoblie(i))}
+                  </TreeSelect>
                 </Form.Item>
                 <Form.Item label="卡片参数" name="param">
                   <Input value={card.param} onChange={(e) => cardSetting(e, 'param')} />
@@ -133,6 +250,13 @@ const Right = () => {
           )
         }
       </div>
+      <Modal
+        title={'卡片图标'}
+        visible={iconShow}
+        onCancel={() => setIconShow(false)}
+      >
+
+      </Modal>
     </div>
   )