封装一些通用的

src/pages/Dmanage/D1register/D1edit/index.tsx

@@ -1,60 +1,25 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React from 'react'
 import styles from './index.module.scss'
 import EditTop from '@/pages/Zother/EditTop'
 import EditBtn from '@/pages/Zother/EditBtn'
-import { rowArrTemp, TypeD1table } from '../data'
-import { useParams } from 'react-router-dom'
 import { D1API_obj } from '@/store/action/Dmanage/D1register'
 import { InfoProvider } from '@/pages/Zother/InfoContext'
+import { rowArrTemp } from '@/pages/Zother/data'
 
 const rowArr = rowArrTemp('登记')
 
 function D1edit() {
-  // key:1 新增 2编辑 3审批 4查看
-  const { key, id } = useParams<any>()
-
-  const [info, setInfo] = useState({} as TypeD1table)
-  const setInfoFu = useCallback((info: TypeD1table) => {
-    setInfo(info)
-  }, [])
-
-  // 用于按钮鉴权，只修改一次，减少重构
-  const [btnPow, setBenPow] = useState({} as TypeD1table)
-
-  // 创建订单
-  const createFu = useCallback(async () => {
-    const res = await D1API_obj['创建订单']()
-    if (res.code === 0) {
-      setInfo(res.data)
-      setBenPow(res.data)
-    }
-  }, [])
-
-  // 获取详情
-  const getInfoFu = useCallback(async (id: number) => {
-    const res = await D1API_obj['获取详情'](id)
-    if (res.code === 0) {
-      setInfo(res.data)
-      setBenPow(res.data)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (key === '1') createFu()
-    else getInfoFu(id)
-  }, [createFu, getInfoFu, id, key])
-
   return (
     <InfoProvider>
       <div className={styles.D1edit}>
         <div className='editMain'>
           {/* 顶部 */}
-          <EditTop pageTxt='藏品登记' rowArr={rowArr} info={info} setInfo={setInfoFu} />
+          <EditTop pageTxt='藏品登记' rowArr={rowArr} APIobj={D1API_obj} />
 
           {/* 藏品清单 */}
 
           {/* 底部按钮 */}
-          <EditBtn path='/register' btnPow={btnPow} info={info} />
+          <EditBtn path='/register' APIobj={D1API_obj} />
         </div>
       </div>
     </InfoProvider>

src/pages/Dmanage/D1register/data.ts

@@ -1,116 +0,0 @@
-import { getDictFu, selectObj } from '@/utils/dataChange'
-
-export type TypeD1table = {
-  auditUserIds: string
-  audits: any[]
-  createTime: string
-  creatorId: number
-  creatorName: string
-  currentAuditUserIds: string
-  currentProcessId: number
-  date: string
-  dictIdApply?: any
-  fileIds?: any
-  files: any[]
-  goodIds: string
-  id: number
-  nodeProcessId: number
-  num: string
-  reason: string
-  remark: string
-  snapName?: any
-  snapNum?: any
-  snaps: any[]
-  status: number
-  type: string
-  updateTime: string
-  deptName: string
-}
-export type D1formType = {
-  pageSize: number
-  pageNum: number
-  businessStartTime: string
-  businessEndTime: string
-  searchKey: string
-  startTime: string
-  endTime: string
-  status: string
-}
-
-export const D1baseFormData = {
-  pageSize: 10,
-  pageNum: 1,
-
-  businessStartTime: '',
-  businessEndTime: '',
-  searchKey: '',
-  startTime: '',
-  endTime: '',
-  status: ''
-}
-
-export const D1search = [
-  {
-    type: 'time',
-    key: ['businessStartTime', 'businessEndTime'],
-    placeholder: ['登记日期开始', '登记日期结束']
-  },
-  {
-    type: 'input',
-    key: 'searchKey',
-    placeholder: '请输入申请编号、发起人、藏品编号或名称'
-  },
-  {
-    type: 'time',
-    key: ['startTime', 'endTime'],
-    placeholder: ['发起日期开始', '发起日期结束']
-  },
-  {
-    type: 'select',
-    key: 'status',
-    placeholder: '申请状态',
-    options: selectObj['订单审批状态'],
-    style: { width: 200 }
-  }
-]
-
-// 查看页面顶部字段 通用部分
-export const rowArrTemp = (txt: string) => {
-  return [
-    {
-      name: `藏品${txt}`,
-      type: 'txt'
-    },
-    {
-      name: `${txt}日期`,
-      must: true,
-      key: 'date',
-      type: 'DatePicker'
-    },
-    {
-      name: '申请编号',
-      must: true,
-      key: 'num',
-      type: 'Input',
-      noNull: true //不允许输入空格
-    },
-    {
-      name: '申请类型',
-      key: 'dictIdApply',
-      type: 'Cascader',
-      options: getDictFu(`藏品${txt}`)
-    },
-    {
-      name: '事由说明',
-      full: true,
-      key: 'reason',
-      type: 'TextArea'
-    },
-    {
-      name: '备注',
-      full: true,
-      key: 'remark',
-      type: 'TextArea'
-    }
-  ]
-}

src/pages/Dmanage/D1register/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
-import { D1baseFormData, D1search } from './data'
 import { RootState } from '@/store'
 import { D1tableC } from '@/utils/tableData'
 import { D1_APIgetList } from '@/store/action/Dmanage/D1register'
 import TableList from '@/pages/Zother/TableList'
+import { baseFormData, topSearch } from '@/pages/Zother/data'
+
+const D1search = topSearch('登记')
+
+const D1baseFormData = baseFormData()
 
 function D1register() {
   // 从仓库拿数据

src/pages/Zother/EditBtn/index.tsx

@@ -4,27 +4,34 @@ import { Button } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { backPageFu } from '@/utils/history'
 import { useParams } from 'react-router-dom'
-import { TypeD1table } from '@/pages/Dmanage/D1register/data'
 import { editBtnShowFu, pageSkitFu } from '@/utils/authority'
+import { useInfo } from '../InfoContext'
 
 type Props = {
   path: string
-  info: TypeD1table
-  btnPow: TypeD1table
+  APIobj: any
 }
 
-function EditBtn({ path, info, btnPow }: Props) {
+function EditBtn({ path, APIobj }: Props) {
+  const { info } = useInfo()
+
+  const [btnCan, setBtnCan] = useState({ status: 0, creatorId: 0 })
+
+  useEffect(() => {
+    setBtnCan({ status: info.status, creatorId: info.creatorId })
+  }, [info.status, info.creatorId])
+
   // key:1 新增 2编辑 3审批 4查看
   const { key, id } = useParams<any>()
 
   const [btnPowArr, setBtnPowArr] = useState<string[]>([])
 
   useEffect(() => {
-    if (btnPow.id) {
-      const arr = editBtnShowFu(btnPow)
+    if (btnCan.creatorId) {
+      const arr = editBtnShowFu(btnCan.status, btnCan.creatorId)
       setBtnPowArr(arr)
     }
-  }, [btnPow])
+  }, [btnCan])
 
   // 点击按钮触发事件
   const sonClick = useCallback(

src/pages/Zother/EditTop/index.tsx

@@ -1,12 +1,12 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import styles from './index.module.scss'
 import { selectObj } from '@/utils/dataChange'
 import { useParams } from 'react-router-dom'
-import { TypeD1table } from '@/pages/Dmanage/D1register/data'
 import dayjs from 'dayjs'
 import { Button, Cascader, DatePicker, Input } from 'antd'
 import classNames from 'classnames'
 import TextArea from 'antd/es/input/TextArea'
+import { useInfo } from '../InfoContext'
 
 const pageKeyTxtObj = {
   1: '新增',
@@ -20,15 +20,41 @@ type Props = {
   rowArr: any[]
   // 页面字段
   pageTxt: string
-  // 数据
-  info: TypeD1table
-  // 修改数据
-  setInfo: (info: TypeD1table) => void
+  // api
+  APIobj: any
 }
 
-function EditTop({ rowArr, pageTxt, info, setInfo }: Props) {
-  const { key } = useParams<any>()
+function EditTop({ rowArr, pageTxt, APIobj }: Props) {
+  const { info, setInfoFu } = useInfo()
+
+  const { key, id } = useParams<any>()
   // key:1 新增 2编辑 3审批 4查看
+
+  // 创建订单
+  const createFu = useCallback(async () => {
+    const res = await APIobj['创建订单']()
+    if (res.code === 0) {
+      setInfoFu(res.data)
+    }
+  }, [APIobj, setInfoFu])
+
+  // 获取详情
+  const getInfoFu = useCallback(
+    async (id: number) => {
+      const res = await APIobj['获取详情'](id)
+      if (res.code === 0) {
+        setInfoFu(res.data)
+      }
+    },
+    [APIobj, setInfoFu]
+  )
+
+  useEffect(() => {
+    if (key === '1') createFu()
+    else getInfoFu(id)
+  }, [createFu, getInfoFu, id, key])
+
+  // 页面最上部文字
   const pageKeyTxt = useMemo(() => {
     return Reflect.get(pageKeyTxtObj, key)
   }, [key])
@@ -40,18 +66,18 @@ function EditTop({ rowArr, pageTxt, info, setInfo }: Props) {
       const key = item.key
 
       if (type === 'DatePicker') {
-        setInfo({ ...info, [key]: dayjs(val).format('YYYY-MM-DD') })
+        setInfoFu({ ...info, [key]: dayjs(val).format('YYYY-MM-DD') })
       } else if (['TextArea', 'Input'].includes(type)) {
         const varRes = item.noNull ? val.replace(/\s+/g, '') : val
-        setInfo({
+        setInfoFu({
           ...info,
           [key]: varRes
         })
       } else if (type === 'Cascader') {
-        setInfo({ ...info, dictIdApply: val ? val.join(',') : '' })
+        setInfoFu({ ...info, dictIdApply: val ? val.join(',') : '' })
       }
     },
-    [info, setInfo]
+    [info, setInfoFu]
   )
 
   // 订单申请状态

src/pages/Zother/InfoContext.tsx

@@ -1,9 +1,9 @@
 import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
-import { TypeD1table } from '../Dmanage/D1register/data'
+import { Typetable } from './data'
 
 type InfoContextValue = {
-  info: TypeD1table
-  setInfoFu: (info: TypeD1table) => void
+  info: Typetable
+  setInfoFu: (info: Typetable) => void
 }
 
 type Props = {
@@ -13,9 +13,9 @@ type Props = {
 const InfoContext = createContext<InfoContextValue | undefined>(undefined)
 
 export function InfoProvider({ children }: Props) {
-  const [info, setInfo] = useState({} as TypeD1table)
+  const [info, setInfo] = useState({} as Typetable)
 
-  const setInfoFu = useCallback((newInfo: TypeD1table) => {
+  const setInfoFu = useCallback((newInfo: Typetable) => {
     setInfo(newInfo)
   }, [])
 

src/pages/Zother/data.ts

@@ -0,0 +1,152 @@
+// 通用的一些 数据 和类型
+import { getDictFu, selectObj } from '@/utils/dataChange'
+
+// 列表字段
+export const baseFormData = (can?: { [x: string]: string }) => {
+  const obj: any = {
+    pageSize: 10,
+    pageNum: 1,
+
+    businessStartTime: '',
+    businessEndTime: '',
+    searchKey: '',
+    startTime: '',
+    endTime: '',
+    status: ''
+  }
+  // 修改给后端的字段
+  if (can) {
+    for (const key in can) {
+      if (obj[key] !== undefined) {
+        obj[can[key]] = obj[key]
+        delete obj[key]
+      }
+    }
+  }
+  return obj
+}
+
+// 顶部筛选
+export const topSearch = (txt: string, can?: { [x: number]: string | string[] }) => {
+  const txtObj = {
+    征集: '或线索名称',
+    登记: '、藏品编号或名称'
+  }
+  const txt2Res = Reflect.get(txtObj, txt)
+
+  const canArr = [
+    ['businessStartTime', 'businessEndTime'],
+    'searchKey',
+    ['startTime', 'endTime'],
+    'status'
+  ]
+
+  // 修改给后端的字段
+  if (can) {
+    for (const key in can) {
+      canArr[key] = can[key]
+    }
+  }
+
+  return [
+    {
+      type: 'time',
+      key: canArr[0],
+      placeholder: [`${txt}日期开始`, `${txt}日期结束`]
+    },
+    {
+      type: 'input',
+      key: canArr[1],
+      placeholder: `请输入申请编号、发起人${txt2Res}`
+    },
+    {
+      type: 'time',
+      key: canArr[2],
+      placeholder: ['发起日期开始', '发起日期结束']
+    },
+    {
+      type: 'select',
+      key: canArr[3],
+      placeholder: '申请状态',
+      options: selectObj['订单审批状态'],
+      style: { width: 200 }
+    }
+  ]
+}
+
+// 查看页面顶部字段 通用部分
+export const rowArrTemp = (txt: string, can?: { [x: number]: string }) => {
+  const canArr = ['date', 'num', 'dictIdApply', 'reason', 'remark']
+
+  if (can) {
+    for (const key in can) {
+      canArr[key] = can[key]
+    }
+  }
+
+  return [
+    {
+      name: `藏品${txt}`,
+      type: 'txt'
+    },
+    {
+      name: `${txt}日期`,
+      must: true,
+      key: canArr[0],
+      type: 'DatePicker'
+    },
+    {
+      name: '申请编号',
+      must: true,
+      key: canArr[1],
+      type: 'Input',
+      noNull: true //不允许输入空格
+    },
+    {
+      name: '申请类型',
+      key: canArr[2],
+      type: 'Cascader',
+      options: getDictFu(`藏品${txt}`)
+    },
+    {
+      name: '事由说明',
+      full: true,
+      key: canArr[3],
+      type: 'TextArea'
+    },
+    {
+      name: '备注',
+      full: true,
+      key: canArr[4],
+      type: 'TextArea'
+    }
+  ]
+}
+
+// 列表type
+export type Typetable = {
+  auditUserIds: string
+  audits: any[]
+  createTime: string
+  creatorId: number
+  creatorName: string
+  currentAuditUserIds: string
+  currentProcessId: number
+  date: string
+  dictIdApply?: any
+  fileIds?: any
+  files: any[]
+  goodIds: string
+  id: number
+  nodeProcessId: number
+  num: string
+  reason: string
+  remark: string
+  snapName?: any
+  snapNum?: any
+  snaps: any[]
+  status: number
+  type: string
+  updateTime: string
+  deptName: string
+}

src/store/reducer/Dmanage/D1register.ts

@@ -1,10 +1,10 @@
-import { TypeD1table } from '@/pages/Dmanage/D1register/data'
+import { Typetable } from '@/pages/Zother/data'
 
 // 初始化状态
 const initState = {
   // 列表数据
   tableInfo: {
-    list: [] as TypeD1table[],
+    list: [] as Typetable[],
     total: 0
   }
 }
@@ -12,7 +12,7 @@ const initState = {
 // 定义 action 类型
 type Props = {
   type: 'D1/getList'
-  payload: { list: TypeD1table[]; total: number }
+  payload: { list: Typetable[]; total: number }
 }
 
 // reducer

src/utils/authority.ts

@@ -1,8 +1,8 @@
 import store from '@/store'
 import { MessageFu } from './message'
-import { TypeD1table } from '@/pages/Dmanage/D1register/data'
 import { getTokenInfo } from './storage'
 import history from './history'
+import { Typetable } from '@/pages/Zother/data'
 
 // 看下有没有权限
 export const authorityFu = (id: number, txt: string, fu: () => void) => {
@@ -13,7 +13,7 @@ export const authorityFu = (id: number, txt: string, fu: () => void) => {
 }
 
 // 列表页面的审批按钮是否显示，true为显示
-export const tableListAuditBtnFu = (item: TypeD1table) => {
+export const tableListAuditBtnFu = (item: Typetable) => {
   let flag = false
   const { status, currentAuditUserIds } = item
   // 当前用户id
@@ -27,10 +27,8 @@ export const tableListAuditBtnFu = (item: TypeD1table) => {
 }
 
 // 编辑页面 各个按钮的显示状态
-export const editBtnShowFu = (item: TypeD1table) => {
+export const editBtnShowFu = (status: number, creatorId: number) => {
   const arr: string[] = []
-  //申请单状态     申请人id      当前节点审批人
-  const { status, creatorId } = item
 
   // 当前用户id
   const myId = (getTokenInfo().user || { id: 0 }).id