数据导入框架

src/pages/Cledger/C1ledger/C1Import/index.module.scss

@@ -0,0 +1,14 @@
+.C1Import {
+  :global {
+    .TableListToprr {
+      justify-content: space-between !important;
+      .TableListToprrBox {
+        display: flex;
+        gap: 10px;
+      }
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
+  }
+}

src/pages/Cledger/C1ledger/C1Import/index.tsx

@@ -0,0 +1,112 @@
+import React, { useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { selectObj, getDictFu } from '@/utils/dataChange'
+import { openLink } from '@/utils/history'
+import TableList from '@/pages/Zother/TableList'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { API_getGoodsList } from '@/store/action/Cledger/C1ledger'
+import { baseFormData } from '@/pages/Zother/data'
+import { importDataTableC } from '@/utils/tableData'
+import { Button, Radio } from 'antd'
+
+const C1baseFormData = {
+  ...baseFormData,
+  typeDictId: '',
+  ageDictId: '',
+  textureDictId: ''
+}
+
+function C1Import({ onClose }: { onClose: () => void }) {
+  const tableInfo = useSelector((state: RootState) => state.C1ledger.tableInfo)
+  const [isImportData, setIsImportData] = useState(true)
+  // 故事管理/藏品总账定制右侧内容
+  const storyTableListToprr = ({
+    clickSearch,
+    resetSelectFu
+  }: {
+    clickSearch: () => void
+    resetSelectFu: () => void
+  }) => {
+    return (
+      <>
+        <div className='TableListToprrBox'>
+          <Button onClick={onClose}>返回</Button>
+          <Radio.Group>
+            <Button
+              value='importData'
+              type={isImportData ? 'primary' : 'default'}
+              onClick={() => setIsImportData(true)}
+            >
+              导入藏品数据
+            </Button>
+            <Button
+              value='importImage'
+              type={isImportData ? 'default' : 'primary'}
+              onClick={() => setIsImportData(false)}
+            >
+              导入藏品图片
+            </Button>
+          </Radio.Group>
+        </div>
+        <div className='TableListToprrBox'>
+          {isImportData ? (
+            <>
+              <Button type='primary' onClick={() => alert('下载模块')}>
+                下载模块
+              </Button>
+              <Button type='primary' onClick={() => alert('上传藏品数据')}>
+                上传藏品数据
+              </Button>
+            </>
+          ) : (
+            <Button type='primary' onClick={() => alert('上传压缩包(ZIP,RAR格式）')}>
+              上传压缩包（ZIP,RAR格式）
+            </Button>
+          )}
+        </div>
+      </>
+    )
+  }
+
+  // 故事管理/藏品总账定制右侧操作按钮
+  const storyTableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: any) => (
+          <>
+            <Button size='small' type='text' onClick={() => alert('查看')}>
+              查看
+            </Button>
+            <Button size='small' type='text' onClick={() => alert('删除记录')}>
+              删除记录
+            </Button>
+          </>
+        )
+      }
+    ]
+  }, [])
+
+  return (
+    <div className={styles.C1Import}>
+      <TableList
+        baseFormData={C1baseFormData}
+        getListAPI={API_getGoodsList}
+        pageKey='ledger'
+        tableInfo={tableInfo}
+        columnsTemp={importDataTableC}
+        rightBtnWidth={'100%'}
+        leftRowWidth={'20%'}
+        yHeight={592}
+        searchDom={[]}
+        storyTableListToprr={storyTableListToprr}
+        storyTableLastBtn={storyTableLastBtn}
+      />
+    </div>
+  )
+}
+
+const MemoC1Import = React.memo(C1Import)
+
+export default MemoC1Import

src/pages/Cledger/C1ledger/index.tsx

@@ -12,6 +12,7 @@ import { goodsSonTableC } from '@/utils/tableData'
 import { Button, Dropdown, Modal, Radio, Checkbox } from 'antd'
 import { exportExcelFile } from '@/utils/xlsxExport'
 import { CaretDownOutlined } from '@ant-design/icons'
+import C1Import from './C1Import'
 
 const C1topSearch = [
   {
@@ -208,6 +209,7 @@ function C1ledger() {
   const [allData, setAllData] = useState([])
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [availableYears, setAvailableYears] = useState<any>([])
+  const [isImportOpen, setIsImportOpen] = useState(false)
   const showModal = async () => {
     setIsModalOpen(true)
     const res = await API_getGoodsListAll()
@@ -291,7 +293,7 @@ function C1ledger() {
             <CaretDownOutlined />
           </Button>
         </Dropdown>
-        <Button type='primary' onClick={() => console.log(123)}>
+        <Button type='primary' onClick={() => setIsImportOpen(true)}>
           数据导入
         </Button>
         <Button type='primary' onClick={showModal}>
@@ -328,20 +330,23 @@ function C1ledger() {
   return (
     <div className={styles.C1ledger}>
       <div className='pageTitle'>藏品总账</div>
-
-      <TableList
-        baseFormData={C1baseFormData}
-        getListAPI={API_getGoodsList}
-        pageKey='ledger'
-        tableInfo={tableInfo}
-        columnsTemp={columnsTempAdd}
-        rightBtnWidth={360}
-        leftRowWidth={'20%'}
-        yHeight={592}
-        searchDom={C1topSearch}
-        storyTableListToprr={storyTableListToprr}
-        storyTableLastBtn={storyTableLastBtn}
-      />
+      {!isImportOpen ? (
+        <TableList
+          baseFormData={C1baseFormData}
+          getListAPI={API_getGoodsList}
+          pageKey='ledger'
+          tableInfo={tableInfo}
+          columnsTemp={columnsTempAdd}
+          rightBtnWidth={360}
+          leftRowWidth={'20%'}
+          yHeight={592}
+          searchDom={C1topSearch}
+          storyTableListToprr={storyTableListToprr}
+          storyTableLastBtn={storyTableLastBtn}
+        />
+      ) : (
+        <C1Import onClose={() => setIsImportOpen(false)} />
+      )}
     </div>
   )
 }

src/pages/Cledger/C3goodsInfo/index.tsx

@@ -122,7 +122,7 @@ function C3goodsInfo() {
 
   return (
     <div className={styles.C3goodsInfo}>
-      <div className='pageTitle'>藏品总账</div>
+      <div className='pageTitle'>藏品信息</div>
 
       <TableList
         baseFormData={C1baseFormData}

src/pages/Zother/TableList/index.tsx

@@ -25,7 +25,7 @@ type Props = {
   yHeight: number
   searchDom: any[]
   // 右侧按钮的宽度
-  rightBtnWidth?: number
+  rightBtnWidth?: number | string
   // 左侧每个输入框盒子的宽度
   leftRowWidth?: string
   // 故事管理/藏品总账定制右侧内容
@@ -176,7 +176,14 @@ const TableList = forwardRef<any, Props>(function TableList(props, ref) {
   return (
     <>
       <div className={styles.TableListTop}>
-        <div className='TableListTopll' style={{ width: `calc(100% - ${rightBtnWidth + 20}px)` }}>
+        <div
+          className='TableListTopll'
+          style={{
+            width: `calc(100% - ${
+              typeof rightBtnWidth === 'string' ? rightBtnWidth : `${rightBtnWidth + 20}px`
+            })`
+          }}
+        >
           {searchDom.map((item, index) => (
             <div key={index} style={{ width: leftRowWidth }}>
               {item.type === 'time' ? (
@@ -220,7 +227,10 @@ const TableList = forwardRef<any, Props>(function TableList(props, ref) {
             </div>
           ))}
         </div>
-        <div className='TableListToprr' style={{ width: rightBtnWidth + 'px' }}>
+        <div
+          className='TableListToprr'
+          style={{ width: typeof rightBtnWidth === 'string' ? rightBtnWidth : `${rightBtnWidth}px` }}
+        >
           {storyTableListToprr ? (
             storyTableListToprr({ clickSearch, resetSelectFu })
           ) : (

src/utils/tableData.ts

@@ -212,3 +212,14 @@ export const checkTableC = [
   ['txt', '发起日期', 'date'],
   ['select', '申请状态', 'status', selectObj['藏品入库申请状态']]
 ]
+
+// 导入藏品数据/图片
+export const importDataTableC = [
+  ['txt', '文件名称', 'name'],
+  ['txt', '导入数据', 'thumb'],
+  ['txt', '成功数据', 'joinNum'],
+  ['txt', '失败数据', 'joinName'],
+  ['dateRes', '导入日期', 'createTime'],
+  ['txt', '导入用户', 'creatorName'],
+  ['txt', '导入结果', 'fileSize']
+]