fix: 样式优化

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

@@ -10,6 +10,7 @@
   padding: 7px;
   &[active='true'] {
     border: 2px solid #001bff;
+    margin-bottom: 30px;
   }
   .title {
     display: flex;

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, TreeSelect, Switch, Modal } from 'antd'
+import { Input, Form, TreeSelect, Switch, Modal, Space, Button } from 'antd'
 import { GlobalStore } from '../index'
 import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api'
 import {
@@ -12,7 +12,11 @@ import {
   MobileOutlined,
   DeleteOutlined,
   PictureOutlined,
+  PlusOutlined,
+  MinusCircleOutlined,
 } from '@ant-design/icons'
+import { getImageBases } from '@/services/common/api'
+import PicturesWall from '@/components/Upload/index'
 
 const { TreeNode } = TreeSelect
 
@@ -27,8 +31,11 @@ const Right = () => {
   const { shema, setShema } = useContext(GlobalStore)
   const { active } = shema
   const [form] = Form.useForm()
+  const [paramForm] = Form.useForm()
   const [moblieList, setMoblieList] = useState([])
   const [iconShow, setIconShow] = useState()
+  const [iconList] = useState([])
+  const [paramShow, setParamShow] = useState(false)
 
   const name = useMemo(() => {
     let name = ''
@@ -101,6 +108,7 @@ const Right = () => {
     if (code === 0) {
       let array = (data[0].children.length > 0 && [...data[0].children]) || [];
       let list = [];
+      console.log('array', array)
       array.map((i, j) => {
         let aa = [];
         i.children.map(k => {
@@ -137,6 +145,9 @@ const Right = () => {
       }
       return <TreeNode value={org.pageUrl || org.menuID} title={org.text} icon={<MobileOutlined />} disabled />;
     }
+    if (!haveChildren && org?.product === 'flutter') {
+      return null
+    }
     return haveChildren ? (
       <TreeNode
         value={org.pageUrl || org.menuID}
@@ -164,12 +175,41 @@ const Right = () => {
 
   const getData = () => {
     getAppList()
+    getIconList()
+  }
+
+  const getIconList = async () => {
+    const { code, data } = await getImageBases('icon,appWorkSpace')
+    if (code === 0) {
+      console.log('data', data)
+      // setI
+    }
   }
 
   const iconShowChange = () => {
     setIconShow(true)
   }
 
+  const paramShowChange = () => {
+    let field = []
+    let array = card?.param?.split('&') || []
+    array.forEach(v => {
+      field.push({ key: v.split('=')[0], value: v.split('=')[1] })
+    })
+    paramForm.setFieldsValue({ field })
+    setParamShow(true)
+  }
+
+  const paramOk = () => {
+    const { field } = paramForm.getFieldsValue()
+    let value = ''
+    field.forEach(v => {
+      value = value ? (value + `&${v.key}=${v.value}`) : `${v.key}=${v.value}`
+    })
+    cardSettingOther(value, 'param')
+    setParamShow(false)
+  }
+
   useEffect(() => {
     getData()
     //初始增加一个供水主题
@@ -219,7 +259,7 @@ const Right = () => {
               </div>
             </div>
           ) : (
-            <div style={{ padding: '10px' }}>
+            <div className={styles.cardSetting}>
               <Form form={form} layout='vertical'>
                 <Form.Item label="卡片名称" name="name">
                   <Input value={card.name} onChange={(e) => cardSetting(e, 'name')} />
@@ -229,6 +269,21 @@ const Right = () => {
                 </Form.Item>
                 <Form.Item label="卡片图标" name="icon">
                   <Input value={card.icon} onChange={(e) => cardSetting(e, 'icon')} />
+                  {/* {
+                    card.icon ? (
+                      <img style={{ width: '60px', height: '60px' }} src={card.icon}></img>
+                    ) : (
+                      <div className={styles['card-icon']} onClick={() => setIconShow(true)}>
+                        <PlusOutlined />
+                      </div>
+                    )
+                  } */}
+                  {/* <PicturesWall
+                    picType="androidMenu"
+                    style={{ width: '100%' }}
+                    value={['CityTemp\\图库\\20230525\\a6dd0b38-661b-4311-9241-4cf829f1d58d.png']}
+                    onChange={value => console.log('value', value)}
+                  /> */}
                 </Form.Item>
                 <Form.Item label="功能跳转" name="url">
                   <TreeSelect
@@ -247,7 +302,7 @@ const Right = () => {
                   </TreeSelect>
                 </Form.Item>
                 <Form.Item label="卡片参数" name="param">
-                  <Input value={card.param} onChange={(e) => cardSetting(e, 'param')} />
+                  <Input value={card.param} onClick={paramShowChange} />
                 </Form.Item>
               </Form>
             </div>
@@ -261,6 +316,76 @@ const Right = () => {
       >
 
       </Modal>
+      <Modal
+        title={'参数配置'}
+        visible={paramShow}
+        onCancel={() => setParamShow(false)}
+        onOk={paramOk}
+      >
+        <Form name="dynamic_form_nest_item" form={paramForm} autoComplete="off">
+          <Form.List name="field" label='字段映射'>
+            {(value, { add, remove }) => (
+              <>
+                {value.map(({ key, name, ...restField }, index) => (
+                  <Space
+                    key={key}
+                    style={{
+                      display: 'flex',
+                      marginBottom: '5px',
+                      justifyContent: 'center',
+                      position: 'relative',
+                      left: '-11px',
+                    }}
+                    align="baseline"
+                  >
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'key']}
+                      rules={[
+                        {
+                          required: true,
+                          message: '参数名必填',
+                        },
+                        {
+                          validator: (rules, value, callback) => {
+                            const { field } = paramForm.getFieldsValue()
+                            let keys = Array.from(new Set([...field.map(v => v.key)]))
+                            if (keys.length !== field.length) {
+                              return Promise.reject('参数名不能重复！')
+                            }
+                            return Promise.resolve()
+                          }
+                        }
+                      ]}
+                    >
+                      <Input placeholder='请输入参数名' />
+                    </Form.Item>
+                    <div className={styles.centerImg}></div>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'value']}
+                      rules={[
+                        {
+                          required: true,
+                          message: '参数值必填',
+                        },
+                      ]}
+                    >
+                      <Input placeholder='请输入参数值' />
+                    </Form.Item>
+                    <MinusCircleOutlined onClick={() => remove(name)} />
+                  </Space>
+                ))}
+                <Form.Item style={{ padding: '0 10px' }}>
+                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                    添加参数
+                  </Button>
+                </Form.Item>
+              </>
+            )}
+          </Form.List>
+        </Form>
+      </Modal>
     </div>
   )
 

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

@@ -78,5 +78,31 @@
         }
       }
     }
+    .cardSetting {
+      padding: 10px;
+      .card-icon {
+        width: 60px;
+        height: 60px;
+        border: 1px solid #d5d5d5;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:hover {
+          cursor: pointer;
+          border-color: #1890ff;
+          color: #1890ff;
+        }
+      }
+    }
   }
+}
+
+.centerImg {
+  width: 24px;
+  height: 24px;
+  background: url('@{imgSrc}/值映射.png');
+  background-size: 100% 100%;
+  position: relative;
+  top: 7px;
 }
\ No newline at end of file

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

@@ -2,7 +2,7 @@ import React, { useState, createContext, useRef } from 'react'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import QRcode from 'qrcode.react'
 import { Button, Popover, message } from 'antd'
-import { EyeOutlined } from '@ant-design/icons'
+import { EyeOutlined, LeftOutlined } from '@ant-design/icons'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import styles from './index.less'
 import Left from './Left'
@@ -88,23 +88,31 @@ const Designer = (props) => {
       >
         <div className={styles.designer}>
           <div className={styles.top}>
-            <Button style={{ marginRight: '10px' }} onClick={goBack}>返回</Button>
-            <Popover
-              trigger="click"
-              content={
-                <div>
-                  <QRcode value={`${window.origin}/civ_mobile/product/water/monitor/workbench?env=dev`} />
-                </div>
-              }
-            >
-              <Button icon={<EyeOutlined />} style={{ marginRight: '10px' }} onClick={preview}>预览</Button>
-            </Popover>
-            <Button type="primary" onClick={saveDesgin}>保存</Button>
+            <div className={styles['top-left']}>
+              <div className={styles['l-icon']}></div>
+              <div className={styles['l-text']}>工作台搭建</div>
+            </div>
+            <div className={styles['top-right']}>
+              <Button style={{ marginRight: '10px' }} icon={<span className={styles.goBack}></span>} onClick={goBack}>返回</Button>
+              <Popover
+                trigger="click"
+                content={
+                  <div>
+                    <QRcode value={`${window.origin}/civ_mobile/product/water/monitor/workbench?env=dev`} />
+                  </div>
+                }
+              >
+                <Button icon={<EyeOutlined />} style={{ marginRight: '10px', background: '#00AF88', color: 'white' }} onClick={preview}>预览</Button>
+              </Popover>
+              <Button type="primary" icon={<span className={styles.saveDesgin}></span>} onClick={saveDesgin}>发布</Button>
+            </div>
           </div>
           <div className={styles.bottom}>
-            <Left></Left>
-            <Container ref={containerRef}></Container>
-            <Right></Right>
+            <div className={styles['b-content']}>
+              <Left></Left>
+              <Container ref={containerRef}></Container>
+              <Right></Right>
+            </div>
           </div>
         </div>
       </GlobalStore.Provider>

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

+@imgSrc: '@/assets/images/mobileConfig/WorkDesign';
 .designer {
   width: 100%;
   height: 100%;
-  padding: 10px;
   .top {
     width: 100%;
     height: 40px;
+    background: white;
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    padding: 0 10px;
+    .top-left {
+      display: flex;
+      .l-icon {
+        width: 25px;
+        height: 29px;
+        background: url('@{imgSrc}/工作台图标.png');
+        background-size: 100% 100%;
+      }
+      .l-text {
+        font-size: 19px;
+        color: black;
+        font-weight: 700;
+        padding-left: 7px;
+      }
+    }
+    .top-right {
+      .saveDesgin {
+        position: relative;
+        top: 2px;
+        left: -6px;
+        display: inline-block;
+        width: 16px;
+        height: 15px;
+        background: url('@{imgSrc}/发布.png');
+        background-size: 100% 100%;
+      }
+      .goBack {
+        position: relative;
+        top: 2px;
+        left: -6px;
+        display: inline-block;
+        width: 8px;
+        height: 14px;
+        background: url('@{imgSrc}/返回.png');
+        background-size: 100% 100%;
+      }
+    }
   }
   .bottom {
     width: 100%;
     height: calc(100% - 40px);
-    display: flex;
+    padding: 10px;
+    .b-content {
+      display: flex;
+      width: 100%;
+      height: 100%;
+    }
   }
 }
\ No newline at end of file

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

@@ -53,6 +53,8 @@ const WorkDesign = (props) => {
       setCardList(data)
       if (data.length) {
         setIsCardList(false)
+      } else {
+        setIsCardList(true)
       }
     }
   }
@@ -200,7 +202,7 @@ const WorkDesign = (props) => {
                           {v['路径'] ? <img style={{ width: '100%' }} src={`${origin}/PandaOMS/OMS/FileCenter/DownloadFiles?module=图库&filePath=${v['路径']}`}></img> : null}
                           <div className={styles.imgCenter}>
                             <div>
-                              <Button type="primary" onClick={() => toDesign(v)}>编辑</Button>
+                              <Button type="primary" onClick={() => toDesign(v)}>设计</Button>
                             </div>
                             <div style={{ marginTop: '10px' }}>
                               <Button type="primary" danger onClick={() => deleteDesgin(v)}>删除</Button>