fix: 增加工作台搭建

src/pages/productCenter/mobileConfig/index.jsx

@@ -4,6 +4,7 @@ import ProCard from '@ant-design/pro-card';
 import PageContainer from '@/components/BasePageContainer';
 import SevenParams from './menuconfig/SevenParams';
 import VersionPublish from './menuconfig/VersionPublish';
+import WorkDesign from './menuconfig/WorkDesign';
 import { getMiniAppModuleTree, deleteWebsite, deleteMiniMenu } from '@/services/mobileConfig/api';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import SiteConfig from './SiteConfig';
@@ -193,6 +194,11 @@ const MobileConfigPage = props => {
             {activeKey === tabArr[3].key && tabArr[3].component}
           </TabPane>
         )} */}
+        {showConfig && subType !== 'add' && (
+          <TabPane tab={tabArr[4].title} key={tabArr[4].key}>
+            {activeKey === tabArr[4].key && tabArr[4].component}
+          </TabPane>
+        )}
       </Tabs>
       {/* </Spin> */}
     </Card>
@@ -228,11 +234,16 @@ const MobileConfigPage = props => {
       key: '2',
       component: <SevenParams />,
     },
-    // {
-    //   title: '版本包配置',
-    //   key: '3',
-    //   component: <VersionPublish clientName={clientName} />,
-    // },
+    {
+      title: '版本包配置',
+      key: '3',
+      component: <VersionPublish clientName={clientName} />,
+    },
+    {
+      title: '工作台搭建',
+      key: '4',
+      component: <WorkDesign />,
+    },
   ];
   return (
     <PageContainer>

src/pages/productCenter/mobileConfig/index.less

@@ -2,6 +2,7 @@
   height: 100%;
   .ant-card-body {
     height: 100%;
+    padding: 10px;
   }
   .ant-tabs {
     height: 100%;

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

+import React, { useRef, useContext } from 'react'
+import styles from './index.less'
+import { useDrag, useDrop, DndProvider } from 'react-dnd'
+import { GlobalStore } from '../../index'
+
+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 })
+          })
+          return { ...shema, work: array }
+        })
+      }
+    }
+  })
+
+  drop(ref)
+
+  const groupClick = (e, item) => {
+    e.stopPropagation()
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, active: item.id === v.id, children: v.children.map(v => ({ ...v, active: false })) })
+    })
+    setShema({ ...shema, work: array, active: false })
+  }
+
+  const deleteGroup = (e, item) => {
+    e.stopPropagation()
+    let array = []
+    shema?.work.forEach(v => {
+      if (item.id !== v.id) {
+        array.push({ ...v, active: false })
+      }
+    })
+    setShema({ ...shema, work: array, active: true })
+  }
+
+  const deleteCrad = (e, card) => {
+    e.stopPropagation()
+    let array = []
+    shema?.work.forEach(v => {
+      let children = []
+      v.children.forEach(s => {
+        if (s.id !== card.id) {
+          children.push({ ...s })
+        }
+      })
+      array.push({ ...v, active: false, children })
+    })
+    setShema({ ...shema, work: array, active: false })
+  }
+
+  const cardClick = (e, card) => {
+    e.stopPropagation()
+    let array = []
+    shema?.work.forEach(v => {
+      let children = []
+      v.children.forEach(s => {
+        children.push({ ...s, active: s.id === card.id })
+      })
+      array.push({ ...v, active: false, children })
+    })
+    setShema({ ...shema, work: array, active: false })
+  }
+
+  return (
+    <div
+      className={styles.group}
+      onClick={(e) => groupClick(e, props)}
+      active={`${props.active}`}
+      ref={ref}
+    >
+      {
+        props.active && <span className={styles.deleted} onClick={(e) => deleteGroup(e, props)}>删除</span>
+      }
+      {
+        props.name && (
+          <div className={styles.title}>
+            <div className={styles['t-bg']}></div>
+            <div className={styles['t-text']}>{props.name}</div>
+          </div>
+        )
+      }
+      {
+        props.children.map(v => {
+          return (
+            <div
+              key={v.id}
+              className={styles.card}
+              widget={v.widget}
+              onClick={(e) => cardClick(e, v)}
+              active={`${v.active}`}
+            >
+              {
+                v.active && <span className={styles.deleted} onClick={(e) => deleteCrad(e, v)}>删除</span>
+              }
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+
+}
+
+export default Group
\ No newline at end of file

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

+@imgSrc: '@/assets/images/mobileConfig/WorkDesign';
+.group {
+  margin-top: 10px;
+  background: #FFFFFF;
+  border-radius: 5px;
+  width: 100%;
+  min-height: 100px;
+  box-sizing: border-box;
+  position: relative;
+  padding: 7px;
+  &[active='true'] {
+    border: 2px solid #001bff;
+  }
+  .title {
+    display: flex;
+    align-items: center;
+    .t-bg {
+      width: 4px;
+      height: 16px;
+      border-radius: 3px;
+      background: #1985FF;
+    }
+    .t-text {
+      margin-left: 5px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+  .deleted {
+    background: #1985FF;
+    color: white;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0 7px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  .card {
+    width: 100%;
+    margin-top: 7px;
+    position: relative;
+    border-radius: 4px;
+    overflow: hidden;
+    &[active='true'] {
+      border: 2px solid #001bff;
+    }
+    &[widget='OVERVIEW'] {
+      height: 50px;
+      background: url('@{imgSrc}/card1.png');
+      background-size: 100% 100%;
+    }
+    &[widget='WATER_OVERVIEW'] {
+      height: 100px;
+      background: url('@{imgSrc}/card2.png');
+      background-size: 100% 100%;
+    }
+    &[widget='WATER_CHART'] {
+      height: 130px;
+      background: url('@{imgSrc}/card3.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPEMONITORING'] {
+      height: 200px;
+      background: url('@{imgSrc}/card4.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPEGATHER'] {
+      height: 80px;
+      background: url('@{imgSrc}/card5.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PIPEINSPECTION'] {
+      height: 160px;
+      background: url('@{imgSrc}/card6.png');
+      background-size: 100% 100%;
+    }
+    &[widget='MAINTENANCEORDER'] {
+      height: 290px;
+      background: url('@{imgSrc}/card7.png');
+      background-size: 100% 100%;
+    }
+    &[widget='OPERATIONAL_OVERVIEW'] {
+      height: 110px;
+      background: url('@{imgSrc}/card8.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PUMP_STATUS'] {
+      height: 120px;
+      background: url('@{imgSrc}/card9.png');
+      background-size: 100% 100%;
+    }
+    &[widget='PUMP_MAINTAIN'] {
+      height: 130px;
+      background: url('@{imgSrc}/card10.png');
+      background-size: 100% 100%;
+    }
+    &[widget='REVENUE_OVERVIEW'] {
+      height: 120px;
+      background: url('@{imgSrc}/card11.png');
+      background-size: 100% 100%;
+    }
+  }
+}
\ No newline at end of file

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

+import React, { useRef, useContext } from 'react'
+import styles from './index.less'
+import { useDrag, useDrop, DndProvider } from 'react-dnd'
+import { GlobalStore } from '../index'
+import Group from './Group'
+
+const Container = (props) => {
+
+  const ref = useRef(null)
+  const { shema, setShema } = useContext(GlobalStore)
+
+  const [, drop] = useDrop(() => {
+    return {
+      accept: 'box',
+      drop(box) {
+        setShema(boxs => ({ ...boxs, work: [...boxs.work, box] }))
+      }
+    }
+  })
+
+  drop(ref)
+
+  const pageClick = () => {
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, active: false, children: v.children.map(s => ({ ...s, active: false })) })
+    })
+    setShema({ ...shema, work: array, active: true })
+  }
+
+  return (
+    <div
+      className={styles.container}
+    >
+      <div className={styles.content}>
+        <div
+          ref={ref}
+          className={styles.moblie}
+          onClick={() => pageClick()}
+          active={`${shema.active}`}
+        >
+          <div className={styles.moblieCenter} name={shema.theme}>
+            <div style={{ padding: '10px' }}>
+              {
+                shema?.work?.map(v => <Group key={v.id} {...v} />)
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+}
+
+export default Container
\ No newline at end of file

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

+@imgSrc: '@/assets/images/mobileConfig/WorkDesign';
+.container {
+  width: calc(100% - 620px);
+  height: 100%;
+  background: white;
+  margin: 0 10px;
+  padding: 10px;
+  .btns {
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    background: #f1f1f1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .moblie {
+      width: 330px;
+      overflow: auto;
+      background: #f7f7f7;
+      border: 1px solid #e4e1e1;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      .moblieCenter {
+        padding-top: 110px;
+        height: 650px;
+        &[name='供水主题背景'] {
+          background: url('@{imgSrc}/供水主题背景预览.png');
+          background-size: 100% 100%;
+        }
+      }
+      &[active='true'] {
+        border: 2px solid #001bff;
+      }
+    }
+  }
+}
\ No newline at end of file

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 styles from './index.less'
+
+const Group = (props) => {
+
+  const id = new Date().getTime()
+  const ref = useRef(null)
+
+  const [{ dragging }, drag, dragPreview] = useDrag({
+    type: 'box',
+    item: {
+      id: id,
+      name: '通栏布局',
+      widget: '通栏布局',
+      children: []
+    },
+    collect(monitor) {
+      return {
+        dragging: monitor.isDragging()
+      }
+    }
+  });
+
+  drag(ref)
+
+  const boxClick = () => {
+    props?.boxClick?.()
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={styles.group}
+      style={{ border: dragging ? '2px solid #001bff' : '' }}
+      onClick={() => boxClick()}
+    >
+    </div>
+  )
+}
+
+
+//111
+const Card = (props) => {
+
+  const ref = useRef(null)
+  const id = new Date().getTime()
+
+  const [{ dragging }, drag] = useDrag({
+    type: 'card',
+    item: {
+      id: id,
+      name: props.name,
+      widget: props.widget,
+    },
+  })
+
+  drag(ref)
+
+  return (
+    <div
+      ref={ref}
+      className={styles.card}
+    >
+      <div
+        className={styles.cardBox}
+        widget={props.widget}
+      >
+      </div>
+    </div>
+  )
+}
+
+const Left = () => {
+
+  return (
+    <div className={styles.left}>
+      <div className={styles.header}>组件库</div>
+      <div className={styles['l-content']}>
+        <div className={styles.item}>
+          <div className={styles['g-title']}>布局</div>
+          <div className={styles['g-content']}>
+            <Group></Group>
+          </div>
+        </div>
+        <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+}
+
+export default Left
\ No newline at end of file

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

+@imgSrc: '@/assets/images/mobileConfig/WorkDesign';
+.left {
+  width: 300px;
+  height: 100%;
+  background: white;
+  .header {
+    padding-left: 10px;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #dbdbdb;
+  }
+  .l-content {
+    height: calc(100% - 40px);
+    overflow: auto;
+    padding-bottom: 10px;
+    .item {
+      .g-title {
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .g-content {
+        padding: 0 10px;
+        .group {
+          width: 140px;
+          height: 80px;
+          border-radius: 4px;
+          background: url('@{imgSrc}/单栏布局.png');
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .card {
+      width: 100%;
+      border-radius: 4px;
+      background: #E4E4E4;
+      margin-top: 7px;
+      padding: 10px;
+      .cardBox {
+        width: 100%;
+        height: 100%;
+        &[widget='OVERVIEW'] {
+          height: 50px;
+          background: url('@{imgSrc}/card1.png');
+          background-size: 100% 100%;
+        }
+        &[widget='WATER_OVERVIEW'] {
+          height: 100px;
+          background: url('@{imgSrc}/card2.png');
+          background-size: 100% 100%;
+        }
+        &[widget='WATER_CHART'] {
+          height: 130px;
+          background: url('@{imgSrc}/card3.png');
+          background-size: 100% 100%;
+        }
+        &[widget='PIPEMONITORING'] {
+          height: 200px;
+          background: url('@{imgSrc}/card4.png');
+          background-size: 100% 100%;
+        }
+        &[widget='PIPEGATHER'] {
+          height: 80px;
+          background: url('@{imgSrc}/card5.png');
+          background-size: 100% 100%;
+        }
+        &[widget='PIPEINSPECTION'] {
+          height: 160px;
+          background: url('@{imgSrc}/card6.png');
+          background-size: 100% 100%;
+        }
+        &[widget='MAINTENANCEORDER'] {
+          height: 290px;
+          background: url('@{imgSrc}/card7.png');
+          background-size: 100% 100%;
+        }
+        &[widget='OPERATIONAL_OVERVIEW'] {
+          height: 110px;
+          background: url('@{imgSrc}/card8.png');
+          background-size: 100% 100%;
+        }
+        &[widget='PUMP_STATUS'] {
+          height: 120px;
+          background: url('@{imgSrc}/card9.png');
+          background-size: 100% 100%;
+        }
+        &[widget='PUMP_MAINTAIN'] {
+          height: 130px;
+          background: url('@{imgSrc}/card10.png');
+          background-size: 100% 100%;
+        }
+        &[widget='REVENUE_OVERVIEW'] {
+          height: 120px;
+          background: url('@{imgSrc}/card11.png');
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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 { GlobalStore } from '../index'
+
+const themes = [
+  { name: '供水主题背景' },
+  { name: '排水通用背景' },
+  { name: '农饮水主题背景' },
+]
+
+const Right = () => {
+
+  const { shema, setShema } = useContext(GlobalStore)
+  const { active } = shema
+  const [form] = Form.useForm()
+
+  const name = useMemo(() => {
+    let name = ''
+    shema?.work.forEach(v => {
+      if (v.active) {
+        name = v.name
+      }
+    })
+    return name
+  }, [shema])
+
+  const groupActive = useMemo(() => {
+    let Active = false
+    shema?.work.forEach(v => {
+      if (v.active) {
+        Active = true
+      }
+    })
+    return Active
+  }, [shema])
+
+  const card = useMemo(() => {
+    let card = {}
+    shema?.work.forEach(v => {
+      v.children.forEach(s => {
+        if (s.active) {
+          card = { ...s }
+        }
+      })
+    })
+    return card
+  }, [shema])
+
+  useEffect(() => {
+    form?.setFieldsValue?.({ ...card })
+  }, [card])
+
+  const changeThemes = (v) => {
+    setShema({ ...shema, theme: v.name })
+  }
+
+  const groupChange = (e) => {
+    e.persist()
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, name: v.active ? e.target.value : v.name })
+    })
+    setShema({ ...shema, work: array })
+  }
+
+  const cardSetting = (e, attr) => {
+    e.persist()
+    let array = []
+    shema?.work.forEach(v => {
+      array.push({ ...v, children: v.children.map(v => ({ ...v, [attr]: v.active ? e.target.value : v[attr] })) })
+    })
+    setShema({ ...shema, work: array })
+  }
+
+  return (
+    <div className={styles.right}>
+      <div className={styles.header}>{active ? '页面配置' : '组件配置'}</div>
+      <div className={styles.pageSetting} style={{ display: active ? 'block' : 'none' }}>
+        <div className={styles.group}>
+          <div className={styles['g-title']}>主题色设置</div>
+          <div className={styles['g-content']}>
+            {
+              themes.map(v => {
+                return (
+                  <div
+                    className={styles['c-center']}
+                    onClick={() => changeThemes(v)}
+                    key={v.name}
+                  >
+                    <div className={styles['c-img']} ative={`${v.name === shema.theme}`} name={v.name}></div>
+                    <div className={styles['c-text']} ative={`${v.name === shema.theme}`}>{v.name}</div>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+      </div>
+      <div className={styles.comSetting} style={{ display: !active ? 'block' : 'none' }}>
+        {
+          groupActive ? (
+            <div className={styles.group}>
+              <div className={styles['g-title']}>分组设置</div>
+              <div className={styles['g-content']}>
+                <div className={styles['c-item']}>
+                  <div>
+                    分组名称：
+                  </div>
+                  <div>
+                    <Input value={name} onChange={groupChange} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div style={{ padding: '10px' }}>
+              <Form form={form} layout='vertical'>
+                <Form.Item label="卡片名称" name="name">
+                  <Input value={card.name} onChange={(e) => cardSetting(e, 'name')} />
+                </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')} />
+                </Form.Item>
+                <Form.Item label="卡片参数" name="param">
+                  <Input value={card.param} onChange={(e) => cardSetting(e, 'param')} />
+                </Form.Item>
+              </Form>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+
+}
+
+export default Right
\ 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;
+  height: 100%;
+  background: white;
+  .header {
+    padding-left: 10px;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #dbdbdb;
+  }
+  .pageSetting {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow: auto;
+    .group {
+      .g-title {
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .g-content {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 0 20px;
+        .c-center {
+          .c-img {
+            width: 120px;
+            height: 120px;
+            border-radius: 5px;
+            overflow: hidden;
+            &:hover {
+              cursor: pointer;
+            }
+            &[ative='true'] {
+              border: 2px solid #1890ff;
+            }
+            &[name='供水主题背景'] {
+              background: url('@{imgSrc}/供水主题背景.png');
+              background-size: 100% 100%;
+            }
+            &[name='排水通用背景'] {
+              background: url('@{imgSrc}/排水通用背景.png');
+              background-size: 100% 100%;
+            }
+            &[name='农饮水主题背景'] {
+              background: url('@{imgSrc}/农饮水主题背景.png');
+              background-size: 100% 100%;
+            }
+          }
+          .c-text {
+            text-align: center;
+            &[ative='true'] {
+              color: #1890ff;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+  .comSetting {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow: auto;
+    .group {
+      .g-title {
+        padding: 10px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .g-content {
+        padding: 0 20px;
+        .c-item {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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

+import React, { useState, createContext } from 'react'
+import { useDrag, useDrop, DndProvider } from 'react-dnd'
+import { Button } from 'antd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import styles from './index.less'
+import Left from './Left'
+import Container from './Container'
+import Right from './Right'
+
+export const GlobalStore = createContext(null)
+
+const Designer = (props) => {
+
+  const { currentCard, } = props
+  const [shema, setShema] = useState(currentCard['卡片结构'] ? { ...JSON.parse(currentCard['卡片结构']) } : { work: [], active: true })
+
+
+  const goBack = () => {
+    props?.goBack?.()
+  }
+
+  const saveDesgin = () => {
+    console.log('shema', shema)
+    props?.saveDesgin?.({ ...currentCard, '卡片结构': JSON.stringify(shema), })
+  }
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <GlobalStore.Provider
+        value={{ shema, setShema }}
+      >
+        <div className={styles.designer}>
+          <div className={styles.top}>
+            <Button style={{ marginRight: '10px' }} onClick={goBack}>返回</Button>
+            <Button type="primary" onClick={saveDesgin}>保存</Button>
+          </div>
+          <div className={styles.bottom}>
+            <Left></Left>
+            <Container></Container>
+            <Right></Right>
+          </div>
+        </div>
+      </GlobalStore.Provider>
+    </DndProvider>
+  )
+
+}
+
+export default Designer
\ No newline at end of file

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

+.designer {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  .top {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .bottom {
+    width: 100%;
+    height: calc(100% - 40px);
+    display: flex;
+  }
+}
\ No newline at end of file

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 { getSchemeList, saveScheme, deleteScheme, roleGroupList } from '@/services/mobileConfig/api'
+import Designer from './components/Designer'
+
+const WorkDesign = (props) => {
+
+  const userName = sessionStorage.getItem('userName')
+  const [cardList, setCardList] = useState([])
+  const [roleList, setRoleList] = useState([])
+  const [visible, setVisible] = useState(false)
+  const [isDesign, setIsDesign] = useState(false)
+  const [currentCard, setCurrentCard] = useState({})
+  const [form] = Form.useForm()
+
+  const addCard = () => {
+    setCurrentCard({})
+    setVisible(true)
+  }
+
+  const editCard = (item) => {
+    setCurrentCard(item)
+    form.setFieldsValue({ '名称': item['名称'], '描述': item['描述'], '关联角色ID': item.roleInfo.map(v => `${v['角色ID']}`) })
+    setVisible(true)
+  }
+
+  const getCardList = async () => {
+    const { code, data } = await getSchemeList()
+    if (code === 0) {
+      setCardList(data)
+    }
+  }
+
+  const getRoleList = async () => {
+    const { code, data } = await roleGroupList({ userID: 1 })
+    if (code === 0) {
+      let array = []
+      data?.roleList?.forEach(v => {
+        if (v.visibleValue === 'miniapp') {
+          array = [...v.child, ...v.roleList]
+        }
+      })
+      array.forEach(v => {
+        if (v.roleList) {
+          v.roleID = v.visibleTitle
+          v.roleName = v.visibleTitle
+        }
+        v.roleList = v.roleList || []
+      })
+      setRoleList(array)
+    }
+  }
+
+  const getData = () => {
+    getCardList()
+    getRoleList()
+  }
+
+  const onOk = async () => {
+    const validate = await form.validateFields()
+    if (validate) {
+      const values = form.getFieldsValue()
+      const { code, data, msg } = await saveScheme({ ID: currentCard.ID || 0, ...values, '关联角色ID': values['关联角色ID'].join(','), '创建人': userName })
+      if (code === 0) {
+        getCardList()
+        message.info({ type: 'success', content: '添加成功！' })
+        setVisible(false)
+      } else {
+        message.info({ type: 'fail', content: msg })
+      }
+    }
+  }
+
+  const toDesign = (item) => {
+    setIsDesign(true)
+    setCurrentCard(item)
+  }
+
+  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 })
+    }
+  }
+
+  const saveDesgin = async (card) => {
+    const { code, data, msg } = await saveScheme(card)
+    if (code === 0) {
+      message.info({ type: 'success', content: '保存成功!' })
+    } else {
+      message.info({ type: 'fail', content: msg })
+    }
+  }
+
+  const goBack = () => {
+    setIsDesign(false)
+    getCardList()
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  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>
+                  </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>
+                          </div>
+                        </div>
+                      </div>
+                      <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>
+        ) : (
+          <Designer
+            currentCard={currentCard}
+            goBack={goBack}
+            saveDesgin={saveDesgin}
+          />
+        )
+      }
+      <Modal
+        title={'创建工作台'}
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onOk={onOk}
+        centered
+      >
+        <Form
+          layout="vertical"
+          form={form}
+        >
+          <Form.Item
+            label={'工作台名称'}
+            name={'名称'}
+            rules={[{ required: true }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={'关联角色'}
+            name={'关联角色ID'}
+            rules={[{ required: true }]}
+          >
+            <TreeSelect
+              multiple
+              style={{ width: '100%' }}
+              placeholder='请选择角色'
+              allowClear
+              fieldNames={{ label: 'roleName', value: 'roleID', children: 'roleList' }}
+              treeData={roleList}
+            >
+            </TreeSelect>
+          </Form.Item>
+          <Form.Item
+            label={'工作台描述'}
+            name={'描述'}
+          >
+            <Input.TextArea allowClear showCount />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+
+}
+
+export default WorkDesign
\ No newline at end of file

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

+@imgSrc: '@/assets/images/mobileConfig/WorkDesign';
+.workDesign {
+  width: 100%;
+  height: 100%;
+  background: #efefef;
+  .content {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #dbdbdb;
+    padding: 0 0 0.5% 0.5%;
+    .cardList {
+      display: flex;
+      flex-wrap: wrap;
+      .cardAdd {
+        margin-right: 0.55%;
+        margin-top: 0.5%;
+        width: 13.8%;
+        border-radius: 5px;
+        background: white;
+        padding: 10px;
+        box-shadow: 1px -2px 7px gainsboro;
+        .content {
+          border: 1px dashed #c8c8c8;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .text {
+            transition: all 0.5s;
+            &:hover {
+              cursor: pointer;
+              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;
+            }
+          }
+        }
+      }
+      .card {
+        margin-right: 0.55%;
+        margin-top: 0.5%;
+        width: 13.7%;
+        border-radius: 5px;
+        background: white;
+        padding: 10px;
+        box-shadow: 1px -2px 7px gainsboro;
+        .title {
+          font-size: 12px;
+          font-weight: 700;
+          &:hover {
+            cursor: pointer;
+            color: #1890ff;
+          }
+        }
+        .img {
+          width: 100%;
+          height: 200px;
+          transition: all 0.5s ease-in-out;
+          position: relative;
+          background: url('@{imgSrc}/预览图.jpg');
+          background-size: 100%;
+          margin-top: 5px;
+          margin-bottom: 5px;
+          border-radius: 4px;
+          &:hover {
+            cursor: pointer;
+            .imgCenter {
+              width: 100%;
+              height: 200px;
+            }
+          }
+          .imgCenter {
+            position: absolute;
+            overflow: hidden;
+            transition: all 0.3s;
+            transform-origin: center;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            justify-content: center;
+            width: 0;
+            height: 0;
+            background: rgba(5, 5, 5, 0.6);
+          }
+        }
+        .footer {
+          .label {
+            color: #aaa;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/services/mobileConfig/api.js

@@ -102,3 +102,15 @@ export const deleteMiniMenu = params =>
 
 // 获取移动应用上传APK信息
 export const getMobileFiles = params => get(`${PUBLISH_SERVICE}/FileCenter/GetMobileFiles`, params);
+
+//工作台方案列表接口
+export const getSchemeList = parmas => get(`${PUBLISH_SERVICE}/WebSite/AppWorkSpace_GetSchemeList`, parmas);
+
+//获取角色列表
+export const roleGroupList = parmas => get(`${PUBLISH_SERVICE}/UserCenter/RoleGroupList`, parmas);
+
+//保存工作台方案
+export const saveScheme = parmas => post(`${PUBLISH_SERVICE}/WebSite/AppWorkSpace_SaveScheme`, parmas);
+
+//删除方案
+export const deleteScheme = parmas => post(`${PUBLISH_SERVICE}/WebSite/AppWorkSpace_DeleteScheme`, parmas);