cfel-base-components 2.5.23 → 2.5.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.5.23",
+  "version": "2.5.25",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",
@@ -52,6 +52,7 @@
     "antd": "^5.5.2"
   },
   "dependencies": {
-    "dayjs": "^1.11.9"
+    "dayjs": "^1.11.9",
+    "html2canvas": "^1.4.1"
   }
 }

package/src/components/universal-pages/cpcAccount/AddModal/index.tsx

@@ -193,7 +193,7 @@ export default function Index({
             name={key}
             rules={[
               { required: required, message: '请输入' },
-              { pattern: /1[0-9]{10}$/, message: '请输入正确的电话号码' }
+              { pattern: /^1[0-9]{10}$/, message: '请输入正确的电话号码' }
             ]}
           >
             <Input placeholder='请输入' />

package/src/components/universal-pages/cpcRole/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/cpcRole/index.tsx

@@ -5,8 +5,8 @@ import QueryFilter from '../../base-component/QueryFilter';
 import ProTable from '../../base-component/ProTable';
 import Pagination from '../../base-component/Pagination';
 import useTableHooks from "../../../hooks/useTableHooks"
-
 import { timeFormatter, getUrlParams } from '../../../utils';
+
 import { get } from 'lodash'
 import { Space, Button, message, Modal, Popover } from 'antd'
 import { pageRequest, create, remove, update } from './api'
@@ -14,6 +14,7 @@ import { pageRequest, create, remove, update } from './api'
 import { ProFormText } from '@ant-design/pro-components'
 
 import AddModal from './AddModal'
+import QrCodeModal from './QrCodeModal'
 import './index.scss'
 export interface RoleProps {
   historyAction: any
@@ -23,6 +24,9 @@ export default function Role({ historyAction }: RoleProps) {
 
   const [ModalOpen, setModalOpen] = useState(false)
   const [editingData, setEditingData] = useState(null) //编辑数据
+  const [qrCodeModalOpen, setQrCodeModalOpen] = useState(false)
+  const [qrCodeModalData, setQrCodeModalData] = useState(null)
+
   useEffect(() => {
     init()
     execute()
@@ -133,6 +137,14 @@ export default function Role({ historyAction }: RoleProps) {
           >
             配置
           </a>
+          <a
+            onClick={() => {
+              setQrCodeModalOpen(true)
+              setQrCodeModalData(rowdata)
+            }}
+          >
+            邀请码
+          </a>
           {rowdata.source !== 'system' && (
             <a
               onClick={() => {
@@ -250,6 +262,14 @@ export default function Role({ historyAction }: RoleProps) {
         editingData={editingData} //当前数据
         actionFunc={actionFunc} //事件
       />
+      <QrCodeModal
+        ModalOpen={qrCodeModalOpen}
+        editOpenStatus={(type: boolean) => {
+          setQrCodeModalOpen(type)
+          setQrCodeModalData(null)
+        }}
+        editingData={qrCodeModalData} //当前数据
+      />
     </PageContainer>
   )
 }