|
|
@@ -0,0 +1,214 @@
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
|
+import { Button, Modal } from 'antd'
|
|
|
+import {
|
|
|
+ APIdelImExcel,
|
|
|
+ APIdownXlsx,
|
|
|
+ APIimExcel,
|
|
|
+ APIlookImExcel,
|
|
|
+ APIsuccExcel
|
|
|
+} from '@/store/action/Bresource/B1overview'
|
|
|
+import { antdSelectType } from '@/utils/dataChange'
|
|
|
+import { downloadFileByUrl } from '@/utils'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+import { B1handeUpFu } from '../data'
|
|
|
+import MyTable from '@/components/MyTable'
|
|
|
+import MyPopconfirm from '@/components/MyPopconfirm'
|
|
|
+import B1res from '../B1res'
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ fId: number
|
|
|
+ kuList: antdSelectType[]
|
|
|
+ isLook: boolean
|
|
|
+}
|
|
|
+
|
|
|
+function B1tab1({ fId, kuList, isLook }: Props) {
|
|
|
+ // 点击下载模版
|
|
|
+ const downXlsxFu = useCallback(async () => {
|
|
|
+ if (fId) {
|
|
|
+ const res = await APIdownXlsx(fId)
|
|
|
+ if (res.code === 0) {
|
|
|
+ let fileName: any = undefined
|
|
|
+ const obj = kuList.find(v => v.value === fId)
|
|
|
+ if (obj) fileName = obj.label
|
|
|
+ downloadFileByUrl(res.data, fileName)
|
|
|
+ }
|
|
|
+ } else MessageFu.warning('资源库表ID错误')
|
|
|
+ }, [fId, kuList])
|
|
|
+
|
|
|
+ const [formData, setFormData] = useState({ pageNum: 1, pageSize: 10 })
|
|
|
+
|
|
|
+ const [tableInfo, setTableInfo] = useState<any>({ list: [], total: 0 })
|
|
|
+
|
|
|
+ const getList = useCallback(async () => {
|
|
|
+ const res = await APIimExcel(formData, fId)
|
|
|
+ if (res.code === 0) {
|
|
|
+ setTableInfo({ list: res.data.records || [], total: res.data.total })
|
|
|
+ }
|
|
|
+ }, [fId, formData])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList()
|
|
|
+ }, [getList])
|
|
|
+
|
|
|
+ const myInput = useRef<HTMLInputElement>(null)
|
|
|
+
|
|
|
+ // 导入规则
|
|
|
+ const [show, setShow] = useState(false)
|
|
|
+
|
|
|
+ const [upFile, setUpFile] = useState<any>({})
|
|
|
+
|
|
|
+ // 上传单个xlsx
|
|
|
+ const handeUpPhoto = useCallback(
|
|
|
+ async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ B1handeUpFu(e, fId, 10, 'xlsx', 'cms/importExcel/uploadExcel', info => {
|
|
|
+ setUpFile({ ...info, myType: '编辑' })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ [fId]
|
|
|
+ )
|
|
|
+
|
|
|
+ // 页码变化
|
|
|
+ const paginationChange = useCallback(
|
|
|
+ (pageNum: number, pageSize: number) => {
|
|
|
+ setFormData({ ...formData, pageNum, pageSize })
|
|
|
+ },
|
|
|
+ [formData]
|
|
|
+ )
|
|
|
+
|
|
|
+ // 点击删除
|
|
|
+ const delTableFu = useCallback(
|
|
|
+ async (id: number) => {
|
|
|
+ const res: any = await APIdelImExcel(id)
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success('删除成功!')
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [getList]
|
|
|
+ )
|
|
|
+
|
|
|
+ // 点击查看
|
|
|
+ const lookFu = useCallback(
|
|
|
+ async (id: number) => {
|
|
|
+ const res = await APIlookImExcel(id, fId)
|
|
|
+ if (res.code === 0) {
|
|
|
+ // 待完善
|
|
|
+ console.log('-------', res)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [fId]
|
|
|
+ )
|
|
|
+
|
|
|
+ const tableLastBtn = useMemo(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ render: (item: any) => (
|
|
|
+ <>
|
|
|
+ <Button size='small' type='text' onClick={() => lookFu(item.id)}>
|
|
|
+ 查看
|
|
|
+ </Button>
|
|
|
+ {isLook ? null : (
|
|
|
+ <MyPopconfirm
|
|
|
+ txtK='删除'
|
|
|
+ onConfirm={() => delTableFu(item.id)}
|
|
|
+ Dom={
|
|
|
+ <Button danger disabled={isLook} size='small' type='text'>
|
|
|
+ 删除记录
|
|
|
+ </Button>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, [delTableFu, isLook, lookFu])
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.B1tab1}>
|
|
|
+ <input
|
|
|
+ id='upInput'
|
|
|
+ type='file'
|
|
|
+ ref={myInput}
|
|
|
+ onChange={handeUpPhoto}
|
|
|
+ multiple
|
|
|
+ accept='.xlsx'
|
|
|
+ style={{ display: 'none' }}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div className='B1IrightTop'>
|
|
|
+ <span>仅支持xlsx格式,文件不得大于10M,单次最多上传100条</span> 
|
|
|
+ <i onClick={() => setShow(true)}>
|
|
|
+ 关于导入规则 <QuestionCircleOutlined rev={undefined} />
|
|
|
+ </i>
|
|
|
+  
|
|
|
+ <Button onClick={downXlsxFu}>下载模版</Button> 
|
|
|
+ <Button disabled={isLook} type='primary' onClick={() => myInput.current?.click()}>
|
|
|
+ 上传资源数据
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <MyTable
|
|
|
+ yHeight={660}
|
|
|
+ classKey='B1tab1'
|
|
|
+ list={tableInfo.list}
|
|
|
+ columnsTemp={[
|
|
|
+ ['txt', '文件名称', 'fileName'],
|
|
|
+ ['txt', '导入数据', 'pcsTotal'],
|
|
|
+ ['txt', '成功数据', 'pcsSuccess'],
|
|
|
+ ['txt', '失败数据', 'pcsError'],
|
|
|
+ ['txt', '导入日期', 'updateTime'],
|
|
|
+ ['txt', '导入用户', 'creatorName']
|
|
|
+ ]}
|
|
|
+ lastBtn={tableLastBtn}
|
|
|
+ pageNum={formData.pageNum}
|
|
|
+ pageSize={formData.pageSize}
|
|
|
+ total={tableInfo.total}
|
|
|
+ onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
|
|
|
+ />
|
|
|
+
|
|
|
+ {show ? (
|
|
|
+ <Modal
|
|
|
+ getContainer={() => document.querySelector('#root')!}
|
|
|
+ wrapClassName={styles.B1t1M}
|
|
|
+ open={true}
|
|
|
+ title='导入规则'
|
|
|
+ footer={
|
|
|
+ [] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <div className='B1t1MRow'>1:下载模板</div>
|
|
|
+ <div className='B1t1MRow'>2:在模板中填入内容,注意必填项</div>
|
|
|
+ <div className='B1t1MRow'>3:上传已填写的模板文件</div>
|
|
|
+ <div className='B1t1MBtn'>
|
|
|
+ <Button onClick={() => setShow(false)}>关闭</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ {/* 上传成功之后 */}
|
|
|
+ {upFile.myType ? (
|
|
|
+ <B1res
|
|
|
+ upFile={upFile}
|
|
|
+ fId={Number(fId)}
|
|
|
+ closeFu={() => setUpFile({})}
|
|
|
+ anewFu={() => myInput.current?.click()}
|
|
|
+ succApi={APIsuccExcel}
|
|
|
+ type='excel'
|
|
|
+ tableArr={[
|
|
|
+ { name: '资源名称', key: 'name' },
|
|
|
+ { name: '责任者', key: 'create_by' }
|
|
|
+ ]}
|
|
|
+ succFu={getList}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const MemoB1tab1 = React.memo(B1tab1)
|
|
|
+
|
|
|
+export default MemoB1tab1
|