Merge branch 'dev' of http://git.ycjcjy.com/ubpa/pc-admin into dev

src/components/QRCode/index.jsx

@@ -47,6 +47,13 @@ export default forwardRef((props, ref) => {
           resolve()
         }).catch(reject)
       })
+    },
+    getCanvas: () => {
+      return new Promise((resolve, reject) => {
+        html2canvas(rootRef.current).then((canvas) => {
+          resolve(canvas)
+        }).catch(reject)
+      })
     }
   }), [fileName])
 

src/components/QRCode/style.less

@@ -11,7 +11,7 @@
   }
 
   h3 {
-    font-size: 18px;
+    font-size: 24px;
     font-weight: bold;
     line-height: 3em;
   }

src/pages/org/org/Edit/components/BasicPage.jsx

@@ -1,10 +1,9 @@
 import { Form, Input, Button } from 'antd';
-import QRCode from '@/components/QRCode'
 import { history } from 'umi';
 import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react'
 import { useModel } from 'umi'
 import { getDetail, saveOrg, updateOrg } from '@/services/org';
-
+import QRCode from './QRCode'
 
 export default (props) => {
   const { id } = props;
@@ -13,13 +12,8 @@ export default (props) => {
   const [form] = Form.useForm();
   const [formData, setFormData] = useState()
   const [loading, setLoading] = useState(false)
-  const qrcodeRef = useRef()
+
   const qrcodeText = useMemo(() => initialState.report_url + '#resume-work-form?org=' + id, [id, initialState.report_url])
-  const downloadQrcode = useCallback(() => {
-    if (qrcodeRef.current) {
-      qrcodeRef.current.download();
-    }
-  }, [])
 
   const onFinish = (values) => {
     setLoading(true)
@@ -76,19 +70,14 @@ export default (props) => {
           <Input type='number' min='0' />
         </Form.Item>
         {
-          id && <Form.Item label=' ' colon={false} wrapperCol={{ offset: 3 }}>
-            <QRCode ref={qrcodeRef} border width={200} content={qrcodeText} title={formData?.orgName} fileName={formData?.orgName} />
+          id && <Form.Item label='申报二维码' >
+            <QRCode text={qrcodeText} title={formData?.orgName} />
           </Form.Item>
         }
         <Form.Item label=' ' colon={false} >
           <Button type="primary" htmlType="submit" loading={loading}>
             保存
           </Button>
-          {id &&
-            <Button style={{ marginLeft: '32px' }} onClick={downloadQrcode} >
-              下载二维码
-            </Button>
-          }
           <Button style={{ marginLeft: '32px' }} onClick={() => { history.go(-1); }} >返回</Button>
         </Form.Item>
       </Form>

src/pages/org/org/Edit/components/QRCode.jsx

@@ -0,0 +1,41 @@
+import React, { useRef } from 'react'
+import { Popover, Button } from 'antd';
+import { QrcodeOutlined } from '@ant-design/icons';
+import QRCode from '@/components/QRCode'
+
+const style = {
+  display: 'flex',
+  alignItem: 'center'
+}
+
+export default (props) => {
+  const { text, title } = props
+
+  const qrcodeRef = useRef()
+  const download = () => {
+    if (qrcodeRef.current) {
+      qrcodeRef.current.getCanvas().then((canvas) => {
+        const imageData = canvas.toDataURL('image/png', .8);
+        const link = document.createElement('a');
+        link.download = `${title}.png`
+        link.href = imageData
+        link.click()
+      });
+    }
+  }
+
+  const content = (
+    <QRCode ref={qrcodeRef} border content={text} title={title} />
+  )
+
+  return (
+    <div style={style}>
+      {/* 这个 div 主要用于下载 */}
+      <div style={{ zIndex: -1, position: 'fixed', top: '-500vh' }}>{content}</div>
+      <Popover content={content} placement="right">
+        <QrcodeOutlined style={{ fontSize: '32px' }} />
+      </Popover>
+      <Button style={{ marginLeft: '16px' }} onClick={download} type='link'>下载</Button>
+    </div>
+  )
+}