fix: 二维码编辑器支持图片自定义上传

src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.js

 import React, { useState, useImperativeHandle, forwardRef, useMemo, useEffect } from 'react'
 import { Modal, Form, Input, Table, Button, Switch, Upload, Radio, Checkbox, message } from 'antd'
+import { UploadOutlined, FileOutline, ArrowDownOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import QRCode from 'qrcode.react'
 import { GetDeviceQRCodeConfig, EditOrAddDeviceQRCodeConfig } from '@/services/flow/flow'
 import html2canvas from 'html2canvas'
-// import JSZip from 'jszip'
-// import FileSave from 'file-saver'
+
+const downloadFileUrl = '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles'
 
 const QRCodeDesign = (props, ref) => {
 
@@ -20,6 +21,7 @@ const QRCodeDesign = (props, ref) => {
   const [dataSource, setDataSource] = useState([])
   const [parentQRCode, setParentQRCode] = useState({})
   const [isBatch, setIsBatch] = useState(true)
+  const [showList, setShowList] = useState([])
   const [values, setValues] = useState({})
   const [currentRow, setCurrentRow] = useState({})
   const [form] = Form.useForm()
@@ -95,6 +97,69 @@ const QRCodeDesign = (props, ref) => {
     ]
   }, [dataSource])
 
+  const option = {
+    name: 'file',
+    action: `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/UploaderFiles`,
+    listType: 'picture',
+    withCredentials: true,
+    maxCount: 1,
+    showUploadList: {
+      showRemoveIcon: false,
+      showDownloadIcon: true,
+    },
+    beforeUpload(file, fileList) {
+      /** @Tips: 解决提交文件中存在特殊字符的问题 */
+      let _continueUpload = true;
+      let _msg = {
+        type: 'success',
+        content: '上传成功！',
+      };
+      // fileList.forEach(item => {
+      //   let _msgObject = filenameVerification(item);
+      //   if (_msgObject.type === 'error') {
+      //     _continueUpload = false;
+      //     _msg = {
+      //       type: 'error',
+      //       content: '上传失败！文件名不符合规则！',
+      //     };
+      //   }
+      // });
+      _msg.type === 'error' ? message[_msg.type](_msg.content) : ''
+      return _continueUpload;
+    },
+    onChange: ({ file, fileList, event }) => {
+      if (!file.size) {
+        return message.error('上传文件为空，禁止上传！')
+      }
+      // 检验名字，名字不通过不允许显示
+      // if (filenameVerification(file).type === 'error') return false;
+      // 返回的链接在file.response内；不设置url，预览图表不可点击
+      if (file.status === 'done' && file.response.code === 0) {
+        file.url = `${window.origin}${downloadFileUrl}?filePath=${file.response.data}`
+        file.sourcePath = file.response.data;
+        message.success('上传成功！')
+      } else if (file.status === 'done' && file.response.code !== 0) {
+        file.status = 'error';
+        message.error('上传失败！')
+      }
+      if (Array.isArray(fileList)) {
+        setShowList(fileList)
+      } else {
+        setShowList([])
+      }
+      if (file.status === 'done') {
+        console.log('fileList', fileList)
+        setValues({ ...values, LabelLogoUrl: fileList.map(v => v.sourcePath).join(',') })
+      }
+    },
+    // onPreview: async (file) => {
+
+    // },
+    // onRemove: async (file) => {
+    //   console.log('file', file)
+    // },
+  }
+
   const downFile = (row) => {
     let canvas = document.getElementById(row.DeviceCode);
     html2canvas(canvas, {
@@ -129,6 +194,32 @@ const QRCodeDesign = (props, ref) => {
     setShow(true)
   }
 
+  const valueToList = (presetValue) => {
+    let fileList = []
+    if (presetValue) {
+      let list = presetValue ? presetValue.split(',') : []
+      for (let i = 0; i < list.length; i++) {
+        if (list[i]) { // @Tips: 直接过滤掉名字中有异常字符的文件
+          let uid = i + '_' + Math.random()
+          let _obj = {
+            uid: uid,
+            name: list[i].split('\\').reverse()[0],
+            type: 'image/jpeg',
+            status: 'done',
+            url: `${window.origin}${downloadFileUrl}?filePath=${list[i]}`,
+            sourcePath: list[i],
+            originFileObj: { "uid": uid },
+            "response": { "code": 0, "msg": "Ok", "data": list[i], "stackTrace": null },
+            "xhr": {},
+          };
+          _obj.thumbUrl = `${window.origin}${downloadFileUrl}?filePath=${list[i]}`
+          fileList.push(_obj);
+        }
+      }
+    }
+    return fileList
+  }
+
   const getDataSource = async (record) => {
     setLoading(true)
     const { code, data } = await GetDeviceQRCodeConfig({ accountName: record.AccountName, accountTableName: record.AccountTableName })
@@ -143,6 +234,7 @@ const QRCodeDesign = (props, ref) => {
         IsPandaLogo: Boolean(IsPandaLogo),
         LabelLogoUrl: LabelLogoUrl
       }
+      setShowList(valueToList(LabelLogoUrl))
       form?.setFieldsValue(values)
       setValues(values)
     }
@@ -219,8 +311,8 @@ const QRCodeDesign = (props, ref) => {
                 <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/civweb4/assets/images/icon/%E7%86%8A%E7%8C%AB-%E8%93%9D%E8%89%B2.png`} />
               ) : (
                 <img
-                  style={{ width: '100%', height: '100%', display: values.labelLogoUrl ? 'block' : 'none' }}
-                  src={'http://192.168.10.167:8088/civweb4/assets/images/icon/%E7%86%8A%E7%8C%AB-%E8%93%9D%E8%89%B2.png'}
+                  style={{ width: '100%', height: '100%', display: values.LabelLogoUrl ? 'block' : 'none' }}
+                  src={`${window.origin}${downloadFileUrl}?filePath=${values.LabelLogoUrl}`}
                 />
               )
             }
@@ -314,12 +406,24 @@ const QRCodeDesign = (props, ref) => {
                     <Radio value="自动使用系统LOGO">自动使用系统LOGO</Radio>
                   </Radio.Group>
                 </Form.Item>
-                <Upload.Dragger name="files" action="/upload.do" disabled={values.IsSystemLogo === '自动使用系统LOGO'}>
-                  <p className="ant-upload-drag-icon">
+                <Upload.Dragger
+                  {...option}
+                  className="upload-list-inline"
+                  fileList={showList}
+                  accept={['.bmp', '.gif', '.jpeg', '.tiff', '.png', '.svg', '.jpg', '.webp']}
+                  disabled={values.IsSystemLogo === '自动使用系统LOGO'}
+                >
+                  <div>
                     <div className={styles.uploadIcon}></div>
-                  </p>
-                  <div className={styles.uploadBtn}>选择文件</div>
-                  <p className="ant-upload-hint">支持上传文件为:jpg、pdf、ppt</p>
+                    {
+                      !showList.length ? (
+                        <div>
+                          <div className={styles.uploadBtn}>选择文件</div>
+                          <div className="ant-upload-hint">支持上传文件为:jpg、png、svg</div>
+                        </div>
+                      ) : null
+                    }
+                  </div>
                 </Upload.Dragger>
                 <Form.Item label="熊猫LOGO" name="IsPandaLogo" valuePropName="checked">
                   <Switch checkedChildren="启用" unCheckedChildren="禁用" />

src/pages/bsmanager/patrolMaintenance/maintenance/components/QRCodeDesign/index.less

@@ -139,7 +139,7 @@
           border-radius: 3px;
           border: 1px solid #E4ECF4;
           text-align: center;
-          margin: 0 auto;
+          margin: 10px auto;
         }
       }
     }