封装外部列表页

src/pages/Dmanage/D1register/data.ts

@@ -57,8 +57,7 @@ export const D1search = [
   {
     type: 'input',
     key: 'searchKey',
-    placeholder: '请输入申请编号、发起人、藏品编号或名称',
-    style: { width: 300 }
+    placeholder: '请输入申请编号、发起人、藏品编号或名称'
   },
   {
     type: 'time',
@@ -69,7 +68,7 @@ export const D1search = [
     type: 'select',
     key: 'status',
     placeholder: '申请状态',
-    style: { width: 120 },
-    options: selectObj['订单审批状态']
+    options: selectObj['订单审批状态'],
+    style: { width: 200 }
   }
 ]

src/pages/Dmanage/D1register/index.module.scss

@@ -1,24 +1,5 @@
-.D1register {
-  :global {
-    .D1top {
-      border-radius: 10px;
-      padding: 15px 15px;
-      background-color: var(--boxBcaColor);
-      display: flex;
-      justify-content: space-between;
-      .D1topll {
-        display: flex;
-        & > div {
-          margin-right: 10px;
-        }
-      }
-    }
-    .tableBox {
-      border-radius: 10px;
-      overflow: hidden;
-      margin-top: 15px;
-      height: calc(100% - 77px);
-      background-color: var(--boxBcaColor);
-    }
-  }
-}
+// .D1register {
+//   :global {
+
+//   }
+// }

src/pages/Dmanage/D1register/index.tsx

@@ -1,129 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React from 'react'
 import styles from './index.module.scss'
-import { useDispatch, useSelector } from 'react-redux'
-import { D1baseFormData, TypeD1table } from './data'
-import { Button, DatePicker, Input, Select } from 'antd'
-import history from '@/utils/history'
-import { tableListAuditBtnFu } from '@/utils/authority'
+import { useSelector } from 'react-redux'
+import { D1baseFormData, D1search } from './data'
+
 import { RootState } from '@/store'
-import dayjs from 'dayjs'
-import { selectObj } from '@/utils/dataChange'
-import MyTable from '@/components/MyTable'
+
 import { D1tableC } from '@/utils/tableData'
 import { D1_APIgetList } from '@/store/action/Dmanage/D1register'
-const { RangePicker } = DatePicker
+import TableList from '@/pages/Zother/TableList'
 
 function D1register() {
-  const dispatch = useDispatch()
-
-  const [formData, setFormData] = useState(D1baseFormData)
-  const formDataRef = useRef(D1baseFormData)
-
-  useEffect(() => {
-    formDataRef.current = formData
-  }, [formData])
-
-  // 点击搜索的 时间戳
-  const [timeKey, setTimeKey] = useState(0)
-
-  // 点击搜索
-  const clickSearch = useCallback(() => {
-    setFormData({ ...formData, pageNum: 1 })
-    setTimeout(() => {
-      setTimeKey(Date.now())
-    }, 50)
-  }, [formData])
-
-  // 时间选择器改变
-  const timeChange = useCallback(
-    (date: any, dateString: any) => {
-      let businessStartTime = ''
-      let businessEndTime = ''
-      if (dateString[0] && dateString[1]) {
-        businessStartTime = dateString[0] + ' 00:00:00'
-        businessEndTime = dateString[1] + ' 23:59:59'
-      }
-      setFormData({ ...formData, businessStartTime, businessEndTime })
-    },
-    [formData]
-  )
-
-  const timeChange2 = useCallback(
-    (date: any, dateString: any) => {
-      let startTime = ''
-      let endTime = ''
-      if (dateString[0] && dateString[1]) {
-        startTime = dateString[0] + ' 00:00:00'
-        endTime = dateString[1] + ' 23:59:59'
-      }
-      setFormData({ ...formData, startTime, endTime })
-    },
-    [formData]
-  )
-
-  // 封装发送请求的函数
-  const getListFu = useCallback(() => {
-    dispatch(D1_APIgetList(formDataRef.current))
-  }, [dispatch])
-
-  useEffect(() => {
-    getListFu()
-  }, [getListFu, timeKey])
-
-  // 输入框的改变
-  const txtChangeFu = useCallback(
-    (txt: string, key: 'searchKey') => {
-      setFormData({
-        ...formData,
-        [key]: txt
-      })
-    },
-    [formData]
-  )
-  // 点击重置
-  const resetSelectFu = useCallback(() => {
-    setFormData(D1baseFormData)
-    setTimeout(() => {
-      setTimeKey(Date.now())
-    }, 50)
-  }, [])
-
-  // 页码变化
-  const paginationChange = useCallback(
-    (pageNum: number, pageSize: number) => {
-      setFormData({ ...formData, pageNum, pageSize })
-      setTimeout(() => {
-        setTimeKey(Date.now())
-      }, 50)
-    },
-    [formData]
-  )
-
-  // 点击各种操作按钮
-  const tableBtnFu = useCallback((id: number, key: string) => {
-    history.push(`register_edit/${key}/${id}`)
-  }, [])
-
-  const tableLastBtn = useMemo(() => {
-    return [
-      {
-        title: '操作',
-        render: (item: TypeD1table) => (
-          <>
-            <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '4')}>
-              查看
-            </Button>
-            {tableListAuditBtnFu(item) ? (
-              <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '3')}>
-                审批
-              </Button>
-            ) : null}
-          </>
-        )
-      }
-    ]
-  }, [tableBtnFu])
-
   // 从仓库拿数据
   const tableInfo = useSelector((state: RootState) => state.D1register.tableInfo)
 
@@ -131,75 +17,15 @@ function D1register() {
     <div className={styles.D1register}>
       <div className='pageTitle'>藏品登记</div>
 
-      <div className='D1top'>
-        <div className='D1topll'>
-          <div>
-            <RangePicker
-              value={
-                formData.businessStartTime
-                  ? [dayjs(formData.businessStartTime), dayjs(formData.businessEndTime)]
-                  : null
-              }
-              onChange={timeChange}
-              placeholder={['登记日期开始', '登记日期结束']}
-            />
-          </div>
-
-          <div>
-            <Input
-              style={{ width: 300 }}
-              placeholder='请输入申请编号、发起人、藏品编号或名称'
-              maxLength={30}
-              value={formData.searchKey}
-              onChange={e => txtChangeFu(e.target.value, 'searchKey')}
-            />
-          </div>
-
-          <div>
-            <RangePicker
-              value={
-                formData.startTime ? [dayjs(formData.startTime), dayjs(formData.endTime)] : null
-              }
-              onChange={timeChange2}
-              placeholder={['发起日期开始', '发起日期结束']}
-            />
-          </div>
-          <div>
-            <Select
-              allowClear={true}
-              placeholder='申请状态'
-              style={{ width: 120 }}
-              value={formData.status ? formData.status : null}
-              onChange={e => setFormData({ ...formData, status: e })}
-              options={selectObj['订单审批状态']}
-            />
-          </div>
-        </div>
-        <div className='D1toprr'>
-          <Button type='primary' onClick={() => history.push(`/register_edit/1/null`)}>
-            发起申请
-          </Button>
-          &emsp;
-          <Button type='primary' onClick={clickSearch}>
-            查询
-          </Button>
-          &emsp;<Button onClick={resetSelectFu}>重置</Button>
-        </div>
-      </div>
-
-      {/* 表格主体 */}
-      <div className='tableBox'>
-        <MyTable
-          yHeight={585}
-          list={tableInfo.list}
-          columnsTemp={D1tableC}
-          lastBtn={tableLastBtn}
-          pageNum={formData.pageNum}
-          pageSize={formData.pageSize}
-          total={tableInfo.total}
-          onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
-        />
-      </div>
+      <TableList
+        baseFormData={D1baseFormData}
+        getListAPI={D1_APIgetList}
+        pageKey='register'
+        tableInfo={tableInfo}
+        columnsTemp={D1tableC}
+        yHeight={585}
+        searchDom={D1search}
+      />
     </div>
   )
 }

src/pages/Zother/TableList/index.module.scss

@@ -12,12 +12,20 @@
       margin-bottom: 15px;
       & > div {
         margin-right: 10px;
+        flex: 1;
+        & > div {
+          width: 100%;
+        }
+        & > input {
+          width: 100%;
+        }
       }
     }
     .TableListToprr {
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 15px;
+      justify-content: space-between;
     }
   }
 }

src/pages/Zother/TableList/index.tsx

@@ -33,6 +33,7 @@ function TableList({
   const dispatch = useDispatch()
 
   const [formData, setFormData] = useState({ ...baseFormData })
+
   const formDataRef = useRef({ ...baseFormData })
 
   useEffect(() => {
@@ -59,6 +60,7 @@ function TableList({
         startTime = dateString[0] + ' 00:00:00'
         endTime = dateString[1] + ' 23:59:59'
       }
+
       setFormData({ ...formData, [key[0]]: startTime, [key[1]]: endTime })
     },
     [formData]
@@ -140,7 +142,7 @@ function TableList({
                 <RangePicker
                   value={
                     formData[item.key[0]]
-                      ? [dayjs(formData[item.key[0]]), dayjs(formData.item.key[1])]
+                      ? [dayjs(formData[item.key[0]]), dayjs(formData[item.key[1]])]
                       : null
                   }
                   onChange={(_, dateString) => timeChange(dateString, item.key)}