up

src/pages/Dmanage/D1register/data.ts

@@ -1,3 +1,5 @@
+import { selectObj } from '@/utils/dataChange'
+
 export type TypeD1table = {
   auditUserIds: string
   audits: any[]
@@ -45,3 +47,29 @@ export const D1baseFormData = {
   endTime: '',
   status: ''
 }
+
+export const D1search = [
+  {
+    type: 'time',
+    key: ['businessStartTime', 'businessEndTime'],
+    placeholder: ['登记日期开始', '登记日期结束']
+  },
+  {
+    type: 'input',
+    key: 'searchKey',
+    placeholder: '请输入申请编号、发起人、藏品编号或名称',
+    style: { width: 300 }
+  },
+  {
+    type: 'time',
+    key: ['startTime', 'endTime'],
+    placeholder: ['发起日期开始', '发起日期结束']
+  },
+  {
+    type: 'select',
+    key: 'status',
+    placeholder: '申请状态',
+    style: { width: 120 },
+    options: selectObj['订单审批状态']
+  }
+]

src/pages/Dmanage/D1register/index.tsx

@@ -35,7 +35,6 @@ function D1register() {
   }, [formData])
 
   // 时间选择器改变
-
   const timeChange = useCallback(
     (date: any, dateString: any) => {
       let businessStartTime = ''

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

@@ -0,0 +1,31 @@
+.TableListTop {
+  border-radius: 10px;
+  padding: 15px 15px 0;
+  background-color: var(--boxBcaColor);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  :global {
+    .TableListTopll {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 15px;
+      & > div {
+        margin-right: 10px;
+      }
+    }
+    .TableListToprr {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.TableListTable {
+  border-radius: 10px;
+  overflow: hidden;
+  margin-top: 15px;
+  height: calc(100% - 77px);
+  background-color: var(--boxBcaColor);
+}

src/pages/Zother/TableList/index.tsx

@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { useDispatch } from 'react-redux'
+import history from '@/utils/history'
+import { Button, DatePicker, Input, Select } from 'antd'
+import { tableListAuditBtnFu } from '@/utils/authority'
+import MyTable from '@/components/MyTable'
+import dayjs from 'dayjs'
+const { RangePicker } = DatePicker
+
+type Props = {
+  baseFormData: any
+  getListAPI: (data: any) => any
+  pageKey: string
+  tableInfo: any
+  columnsTemp: any
+  yHeight: number
+  searchDom: any[]
+  // 右侧按钮的宽度
+  rightBtnWidth?: 250
+}
+
+function TableList({
+  baseFormData,
+  getListAPI,
+  pageKey,
+  tableInfo,
+  columnsTemp,
+  yHeight,
+  searchDom,
+  rightBtnWidth = 250
+}: Props) {
+  const dispatch = useDispatch()
+
+  const [formData, setFormData] = useState({ ...baseFormData })
+  const formDataRef = useRef({ ...baseFormData })
+
+  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(
+    (dateString: any, key: any) => {
+      let startTime = ''
+      let endTime = ''
+      if (dateString[0] && dateString[1]) {
+        startTime = dateString[0] + ' 00:00:00'
+        endTime = dateString[1] + ' 23:59:59'
+      }
+      setFormData({ ...formData, [key[0]]: startTime, [key[1]]: endTime })
+    },
+    [formData]
+  )
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(() => {
+    dispatch(getListAPI(formDataRef.current))
+  }, [dispatch, getListAPI])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: any) => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setFormData({ ...baseFormData })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [baseFormData])
+
+  // 页码变化
+  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(`/${pageKey}_edit/${key}/${id}`)
+    },
+    [pageKey]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: any) => (
+          <>
+            <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])
+
+  return (
+    <>
+      <div className={styles.TableListTop}>
+        <div className='TableListTopll' style={{ width: `calc(100% - ${rightBtnWidth + 20}px)` }}>
+          {searchDom.map((item, index) => (
+            <div key={index}>
+              {item.type === 'time' ? (
+                <RangePicker
+                  value={
+                    formData[item.key[0]]
+                      ? [dayjs(formData[item.key[0]]), dayjs(formData.item.key[1])]
+                      : null
+                  }
+                  onChange={(_, dateString) => timeChange(dateString, item.key)}
+                  placeholder={item.placeholder}
+                />
+              ) : item.type === 'input' ? (
+                <Input
+                  style={item.style || ''}
+                  placeholder={item.placeholder}
+                  maxLength={item.maxLength || 30}
+                  value={formData[item.key]}
+                  onChange={e => txtChangeFu(e.target.value, item.key)}
+                />
+              ) : item.type === 'select' ? (
+                <Select
+                  allowClear={true}
+                  placeholder={item.placeholder}
+                  style={item.style || ''}
+                  value={formData[item.key] ? formData[item.key] : null}
+                  onChange={e => setFormData({ ...formData, [item.key]: e })}
+                  options={item.options}
+                />
+              ) : null}
+            </div>
+          ))}
+        </div>
+        <div className='TableListToprr' style={{ width: rightBtnWidth + 'px' }}>
+          <Button type='primary' onClick={() => history.push(`/${pageKey}_edit/1/null`)}>
+            发起申请
+          </Button>
+          <Button type='primary' onClick={clickSearch}>
+            查询
+          </Button>
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+      <div className={styles.TableListTable}>
+        <MyTable
+          yHeight={yHeight}
+          list={tableInfo.list}
+          columnsTemp={columnsTemp}
+          lastBtn={tableLastBtn}
+          pageNum={formData.pageNum}
+          pageSize={formData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TableList

src/pages/Zother/UseTable.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-function UseTable() {
-  return (
-    <div>
-      <h1>AAAAA</h1>
-    </div>
-  )
-}
-
-export default UseTable