藏品征集base

src/pages/B_enterTibet/B1collect/data.ts

@@ -0,0 +1,30 @@
+export type B1formType = {
+  pageSize: number
+  pageNum: number
+  num: string
+  xxxx1: string
+  xxxx2: string
+  deptName: string
+  userName: string
+  startTime: string
+  endTime: string
+  status: string
+  userType: string
+}
+
+export type B1InputKeyType = keyof B1formType
+
+export const B1baseFormData: B1formType = {
+  pageSize: 10,
+  pageNum: 1,
+
+  num: '',
+  xxxx1: '',
+  xxxx2: '',
+  deptName: '',
+  userName: '',
+  startTime: '',
+  endTime: '',
+  status: '',
+  userType: ''
+}

src/pages/B_enterTibet/B1collect/index.tsx

@@ -1,17 +1,189 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, DatePicker, Input, Select } from 'antd'
 import { MessageFu } from '@/utils/message'
-import history from '@/utils/history'
+import history, { btnFlagFu } from '@/utils/history'
 import { selectObj } from '@/utils/select'
 import MyTable from '@/components/MyTable'
-import { B1TableC } from '@/utils/tableData'
+import { B1TableC, statusObj } from '@/utils/tableData'
+import { useDispatch, useSelector } from 'react-redux'
+import { B1baseFormData, B1InputKeyType } from './data'
+import { B1_APIdel, B1_APIgetList } from '@/store/action/B1collect'
+import { FourTableType } from '../B3_4page/type'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { RootState } from '@/store'
+import dayjs from 'dayjs'
+import ExportJsonExcel from 'js-export-excel'
 const { RangePicker } = DatePicker
 
 // 待完善 静态页面
 function B1collect() {
-  const deriveFu = useCallback(() => {
-    MessageFu.warning('开发中')
+  const dispatch = useDispatch()
+  const [formData, setFormData] = useState(B1baseFormData)
+  const formDataRef = useRef(B1baseFormData)
+  const formDataOldRef = useRef(B1baseFormData)
+
+  useEffect(() => {
+    formDataRef.current = formData
+  }, [formData])
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [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(() => {
+    formDataOldRef.current = { ...formDataRef.current }
+    dispatch(B1_APIgetList(formDataRef.current))
+  }, [dispatch])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: B1InputKeyType) => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setFormData(B1baseFormData)
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [])
+
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await B1_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  // 点击各种操作按钮
+  const tableBtnFu = useCallback((id: number, key: string) => {
+    history.push(`/collect_edit/${key}/${id}`)
+  }, [])
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: FourTableType) => {
+          let obj = btnFlagFu(item)
+          return !Object.values(obj).some(Boolean) ? (
+            '-'
+          ) : (
+            <>
+              {obj['编辑'] ? (
+                <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '2')}>
+                  编辑
+                </Button>
+              ) : null}
+
+              {obj['审批'] ? (
+                <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '3')}>
+                  审批
+                </Button>
+              ) : null}
+              {obj['查看'] ? (
+                <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '4')}>
+                  查看
+                </Button>
+              ) : null}
+
+              {obj['删除'] ? (
+                <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+              ) : null}
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu, tableBtnFu])
+
+  // 从仓库拿数据
+  const tableInfo = useSelector((state: RootState) => state.B1collect.tableInfo)
+
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    const name = '藏品征集' + dayjs(new Date()).format('YYYY-MM-DD HH:mm')
+
+    const res = await B1_APIgetList(
+      {
+        ...formDataOldRef.current,
+        pageNum: 1,
+        pageSize: 99999
+      },
+      true
+    )
+
+    if (res.code === 0) {
+      if (res.data.records.length <= 0) return MessageFu.warning('当前搜索条件没有数据!')
+
+      const option = {
+        fileName: name,
+        datas: [
+          {
+            sheetData: res.data.records.map((v: FourTableType) => ({
+              ...v,
+              status: statusObj[v.status as 1]
+            })),
+            sheetName: name,
+            sheetFilter: ['num', 'date', 'deptName', 'creatorName', 'createTime', 'status'],
+            sheetHeader: ['业务单号', '征集日期', '发起部门', '发送人', '发起日期', '申请状态'],
+            columnWidths: [10, 10, 10, 10, 10, 10]
+          }
+        ]
+      }
+
+      const toExcel = new ExportJsonExcel(option) //new
+      toExcel.saveExcel() //保存
+    }
   }, [])
 
   return (

src/utils/tableData.ts

@@ -41,14 +41,24 @@ selectObj['业务类型'].forEach(v => {
   businessTypeObj[v.value] = v.label
 })
 
+// 申请状态
+export const statusObj = {
+  1: '草稿',
+  6: '待提交',
+  2: '待审批',
+  3: '审批不通过',
+  4: '已完成',
+  5: '待盘点'
+}
+
 // 藏品征集 待完善
 export const B1TableC = [
   ['txt', '业务单号', 'num'],
-  ['txt', '征集日期', 'type'],
-  ['txt', '发起部门', 'creatorName'],
-  ['txt', '发起人', 'createTime'],
+  ['txt', '征集日期', 'date'],
+  ['txt', '发起部门', 'deptName'],
+  ['txt', '发起人', 'creatorName'],
   ['txt', '发起日期', 'createTime'],
-  ['txt', '申请状态', 'createTime']
+  ['txtChange', '申请状态', 'status', statusObj]
 ]
 
 // 藏品征集里面的藏品清单 待完善
@@ -99,15 +109,6 @@ export const D1GtableC = [
   ['txt', '库位说明', 'description']
 ]
 
-// 申请状态
-export const statusObj = {
-  1: '草稿',
-  6: '待提交',
-  2: '待审批',
-  3: '审批不通过',
-  4: '已完成',
-  5: '待盘点'
-}
 export const B3tableC = [
   ['txt', '业务单号', 'num'],
   ['txt', '申请名称', 'name'],