cfel-base-components 2.5.25 → 2.5.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.5.25",
+  "version": "2.5.27",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "dayjs": "^1.11.9",
-    "html2canvas": "^1.4.1"
+    "html2canvas": "^1.4.1",
+    "qrcode.react": "^3.1.0"
   }
 }

package/src/components/universal-pages/role/QrCodeModal/index.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react'
+import QRCode from 'qrcode.react'
+
+import { Button, Modal, Form, Input } from 'antd'
+import dayjs from 'dayjs'
+import html2canvas from 'html2canvas'
+
+export default function Index({
+  ModalOpen, //弹框状态
+  editOpenStatus, //关闭弹框
+  editingData //编辑数据
+}: any) {
+  useEffect(() => {
+    if (!ModalOpen) return
+  }, [ModalOpen])
+
+  const closeModel = () => {
+    editOpenStatus(false)
+  }
+
+  const qrcodeFunc = () => {
+    const { tenant, productCode } = (window as any)?.g_config
+    let ts = dayjs(dayjs().format()).valueOf()
+    return `${location?.origin}/h5/sub-registry?tenantId=${tenant?.id}&roleCode=${editingData?.roleCode}&productCode=${productCode}&expire=${ts}`
+  }
+  const onDownload = () => {
+    let img: any = document.getElementById('down')
+    html2canvas(img).then(canvas => {
+      const link = document.createElement('a')
+      link.href = canvas.toDataURL()
+      link.setAttribute('download', `${editingData?.roleName}邀请码.png`)
+      link.style.display = 'none'
+      document.body.appendChild(link)
+      link.click()
+    })
+  }
+
+  return (
+    <Modal
+      title={''}
+      destroyOnClose={true}
+      open={ModalOpen}
+      width={450}
+      onCancel={() => {
+        closeModel()
+      }}
+      footer={null}
+    >
+      <div
+        id='down'
+        style={{
+          width: '400px',
+          textAlign: 'center'
+        }}
+      >
+        <div
+          style={{
+            fontSize: '20px',
+            marginBottom: '10px'
+          }}
+        >
+          {editingData?.roleName}邀请码
+        </div>
+        <div>
+          <QRCode value={qrcodeFunc()} size={200} />
+        </div>
+        <div>
+          有效期截止：
+          {dayjs(dayjs().format()).add(7, 'day').format('YYYY-MM-DD HH:mm:ss')}
+        </div>
+      </div>
+      <div style={{ textAlign: 'center', marginTop: '10px' }}>
+        <Button
+          key='submit'
+          type='primary'
+          onClick={() => {
+            onDownload()
+          }}
+        >
+          下载
+        </Button>
+      </div>
+    </Modal>
+  )
+}

package/src/components/universal-pages/role/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef,useState } from 'react';
 import useTableHooks from "../../../hooks/useTableHooks"
 
 import PageContainer from '../../base-component/PageContainer';
@@ -11,6 +11,7 @@ import { pageRequest, } from "./api"
 
 import { ProFormText, } from '@ant-design/pro-components';
 import { timeFormatter } from '../../../utils';
+import QrCodeModal from './QrCodeModal'
 
 import "./index.scss"
 export interface RoleProps {
@@ -21,6 +22,8 @@ export default function Role({
   historyAction
 }: RoleProps) {
   const searchFormRef: any = useRef()
+  const [qrCodeModalOpen, setQrCodeModalOpen] = useState(false)
+  const [qrCodeModalData, setQrCodeModalData] = useState(null)
 
   useEffect(() => {
     init()
@@ -64,7 +67,7 @@ export default function Role({
     },
     {
       title: '操作',
-      width: 80,
+      width: 140,
       fixed: "right",
       render: (rowdata: any,) => <Space>
         <a onClick={() => {
@@ -72,7 +75,15 @@ export default function Role({
             pathname: `/role-info`,
             search: `?roleCode=${rowdata.roleCode}`,
           });
-        }}>赋予账号</a>
+        }}>赋予账号</a>,
+        <a
+            onClick={() => {
+              setQrCodeModalOpen(true)
+              setQrCodeModalData(rowdata)
+            }}
+          >
+            邀请码
+          </a>
       </Space>
     },
   ];
@@ -140,7 +151,14 @@ export default function Role({
         }}
       />
       <Pagination  {...pagination} />
-
+      <QrCodeModal
+        ModalOpen={qrCodeModalOpen}
+        editOpenStatus={(type: boolean) => {
+          setQrCodeModalOpen(type)
+          setQrCodeModalData(null)
+        }}
+        editingData={qrCodeModalData} //当前数据
+      />
     </PageContainer >
   )
 };