相机列表-还差查看功能

src/components/UpXlsx.tsx

@@ -0,0 +1,91 @@
+import { API_upFile } from '@/store/action/layout'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { MessageFu } from '@/utils/message'
+import { notification } from 'antd'
+import React, { useCallback, useRef } from 'react'
+import { forwardRef, useImperativeHandle } from 'react'
+
+type Props = {
+  url: string
+  xlsxResInfoFu: () => void
+  ref: any //当前自己的ref，给父组件调用
+}
+
+function UpXlsx({ url, xlsxResInfoFu }: Props, ref: any) {
+  const [api, contextHolder] = notification.useNotification()
+
+  // 点击上传附件按钮
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传附件的处理函数
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        // 校验格式
+        if (!filesInfo.name.endsWith('.xlsx')) return MessageFu.warning('只支持.xlsx格式!')
+
+        // 校验大小
+        if (filesInfo.size > 5 * 1024 * 1024) {
+          e.target.value = ''
+          return MessageFu.warning('最大支持5M!')
+        }
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append('type', 'doc')
+        fd.append('dirCode', 'A1list')
+        fd.append('file', filesInfo)
+        fd.append('isDb', 'false')
+
+        e.target.value = ''
+
+        const res = await API_upFile(fd, url)
+
+        try {
+          if (res.code === 0) {
+            // MessageFu.success('上传成功!')
+            const { msg, error } = res.data
+            api.info({
+              message: msg,
+              description: JSON.stringify(error || ''),
+              duration: 0,
+              placement: 'top'
+            })
+            xlsxResInfoFu()
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [api, url, xlsxResInfoFu]
+  )
+
+  const myInputClickFu = useCallback(() => {
+    myInput.current?.click()
+  }, [])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    myInputClickFu
+  }))
+
+  return (
+    <>
+      {contextHolder}
+      <input
+        id='upInput'
+        type='file'
+        accept='.xlsx'
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+    </>
+  )
+}
+
+export default forwardRef(UpXlsx)

src/pages/A1Camera/index.module.scss

@@ -15,6 +15,9 @@
       }
       .A1topSon2 {
         justify-content: flex-end;
+        .ant-btn {
+          margin-left: 15px;
+        }
       }
     }
 

src/pages/A1Camera/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { Button, Cascader, Input, Popconfirm, Select, Table } from 'antd'
+import { Button, Cascader, Input, notification, Popconfirm, Select, Table } from 'antd'
 import {
   A1addType,
   TableSelectType,
@@ -19,6 +19,7 @@ import { MessageFu } from '@/utils/message'
 import dayjs from 'dayjs'
 import AddCamera from './AddCamera'
 import { mapDataAll2 } from '../C1User/AddUser/city'
+import UpXlsx from '@/components/UpXlsx'
 
 const tableSelectBase: TableSelectType = {
   siteArr: undefined,
@@ -300,6 +301,9 @@ function A1Camera() {
     return obj[openInfo.txt]
   }, [openInfo.txt])
 
+  // 上传xlsx 的ref
+  const upXlsxRef = useRef<any>(null)
+
   // 查看 待完善
   const [lookId, setLookId] = useState(0)
 
@@ -414,15 +418,21 @@ function A1Camera() {
         </div>
 
         <div className='A1topSon A1topSon2'>
-          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button onClick={resetSelectFu}>重置</Button>
           <Button type='primary' onClick={clickSearch}>
             查询
           </Button>
-          &emsp;
           <Button type='primary' onClick={() => setOpenInfo({ id: -1, txt: '新增' })}>
             新增
           </Button>
-          &emsp;
+          <a href='/xlsx/相机列表导入模板.xlsx' download>
+            <Button type='primary'>下载导入模块</Button>
+          </a>
+          <UpXlsx url='cms/camera/upload/excel' ref={upXlsxRef} xlsxResInfoFu={() => getListFu()} />
+          {/* 上传xlsx */}
+          <Button type='primary' onClick={() => upXlsxRef.current?.myInputClickFu()}>
+            导入表格
+          </Button>
           <Button type='primary' onClick={deriveFu}>
             导出表格
           </Button>