fix: 增加卡片图标切换

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

@@ -34,7 +34,8 @@ const Right = () => {
   const [paramForm] = Form.useForm()
   const [moblieList, setMoblieList] = useState([])
   const [iconShow, setIconShow] = useState()
-  const [iconList] = useState([])
+  const [iconList, setIconList] = useState([])
+  const [currentIcon, setCurrentIcon] = useState('')
   const [paramShow, setParamShow] = useState(false)
 
   const name = useMemo(() => {
@@ -179,10 +180,15 @@ const Right = () => {
   }
 
   const getIconList = async () => {
-    const { code, data } = await getImageBases('icon,appWorkSpace')
+    const { code, data } = await getImageBases('appWorkSpace')
     if (code === 0) {
-      console.log('data', data)
-      // setI
+      let array = []
+      data.forEach(v => {
+        if (v.moduleName === 'appWorkSpace') {
+          array = v.fileUrls
+        }
+      })
+      setIconList(array)
     }
   }
 
@@ -268,22 +274,24 @@ const Right = () => {
                   <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')} />
-                  {/* {
+                  {
                     card.icon ? (
-                      <img style={{ width: '60px', height: '60px' }} src={card.icon}></img>
+                      <div className={styles['card-img']}>
+                        <img
+                          onClick={() => {
+                            setCurrentIcon(card.icon)
+                            setIconShow(true)
+                          }}
+                          style={{ width: '100%', height: '100%' }}
+                          src={`${origin}/civweb4/${card.icon}`}
+                        />
+                      </div>
                     ) : (
                       <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
@@ -313,8 +321,26 @@ const Right = () => {
         title={'卡片图标'}
         visible={iconShow}
         onCancel={() => setIconShow(false)}
+        onOk={() => {
+          cardSettingOther(currentIcon, 'icon')
+          setIconShow(false)
+        }}
       >
-
+        <div className={styles.iconBox}>
+          {
+            iconList.map(v => {
+              return (
+                <div
+                  className={styles.iconItem}
+                  active={`${currentIcon === v}`}
+                  onClick={() => setCurrentIcon(v)}
+                >
+                  <img style={{ width: '100%', height: '100%' }} src={`${origin}/civweb4/${v}`}></img>
+                </div>
+              )
+            })
+          }
+        </div>
       </Modal>
       <Modal
         title={'参数配置'}

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

@@ -94,6 +94,13 @@
           color: #1890ff;
         }
       }
+      .card-img {
+        width: 60px;
+        height: 60px;
+        &:hover {
+          cursor: pointer;
+        }
+      }
     }
   }
 }
@@ -105,4 +112,31 @@
   background-size: 100% 100%;
   position: relative;
   top: 7px;
+}
+
+.iconBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .iconItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 70px;
+    font-size: 50px;
+    margin: 10px;
+    padding: 10px;
+    &:hover {
+      cursor: pointer;
+    }
+    &[active='true'] {
+      transition: all 0.3s ease;
+      border: 1px solid #4096ff;
+      border-radius: 5px;
+      color: white;
+      transform: scale(1.1);
+    }
+  }
 }
\ No newline at end of file