准备调整一波 入馆 入藏 登记 删除的路由乱问题

src/pages/B_enterTibet/B3_4page/index.tsx

@@ -138,13 +138,13 @@ function B34page({ pageSta }: Props) {
 
   // 点击各种操作按钮
   const btnFu = useCallback(
-    (val: TypeB3PageSta, id: number) => {
+    (val: TypeB3PageSta, id: number | string) => {
       const url = Reflect.get(objUrl, pageSta)
 
       const key = Reflect.get(objKey, pageSta)
 
       if (val === '新增') {
-        history.push(`${url}_add/${key}`)
+        history.push(`${url}_add/${key}/null`)
       } else if (val === '编辑') {
         history.push(`${url}_edit/${key}/${id}`)
       } else if (val === '审批') {
@@ -201,7 +201,7 @@ function B34page({ pageSta }: Props) {
         </div>
         <div className='B3toprr'>
           <Button type='primary'>批量导出</Button>&emsp;
-          <Button type='primary' onClick={() => btnFu('新增', 0)}>
+          <Button type='primary' onClick={() => btnFu('新增', 'null')}>
             新增
           </Button>
         </div>

src/pages/D_storeManage/D6putsStor/D6edit/index.module.scss

@@ -0,0 +1,4 @@
+.D6edit {
+  :global {
+  }
+}

src/pages/D_storeManage/D6putsStor/D6edit/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function D6edit() {
+  return (
+    <div className={styles.D6edit}>
+      <h1>D6edit</h1>
+    </div>
+  )
+}
+
+const MemoD6edit = React.memo(D6edit)
+
+export default MemoD6edit

src/pages/D_storeManage/D6putsStor/index.module.scss

@@ -1,4 +1,30 @@
 .D6putsStor {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 15px 24px 0;
   :global {
+    .D4top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      .D4topll {
+        display: flex;
+        & > div {
+          position: relative;
+          margin-right: 15px;
+          display: flex;
+          align-items: center;
+          .ant-input {
+            width: 194px;
+          }
+        }
+      }
+      .ant-select-selection-placeholder {
+        color: black;
+      }
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/D_storeManage/D6putsStor/index.tsx

@@ -1,10 +1,232 @@
-import React 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 { B3_4inputKeyArr, D3InputKeyType } from '@/pages/B_enterTibet/B3_4page'
+import dayjs from 'dayjs'
+import MyTable from '@/components/MyTable'
+import { D6tableC } from '@/utils/tableData'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import history from '@/utils/history'
+import { TypeD4Form } from '../D4impStor/type'
+const { RangePicker } = DatePicker
+
+const baseFormData: TypeD4Form = {
+  pageSize: 10,
+  pageNum: 1,
+  aaaa: '',
+  bbbb: '',
+  cccc: '',
+  dddd: '',
+  startTime: '',
+  endTime: '',
+  eeee: '',
+  ffff: '',
+  gggg: ''
+}
+
+// 没有接入后端 待完善
+
 function D6putsStor() {
+  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(
+    (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(() => {
+    console.log('发送请求', formDataRef.current)
+  }, [])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: D3InputKeyType) => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setFormData(baseFormData)
+    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) => {
+      getListFu()
+    },
+    [getListFu]
+  )
+
+  // 点击操作按钮
+  const tableBtnFu = useCallback((key: string, id: number) => {
+    history.push(`/putsStor_edit/${key}/${id}`)
+  }, [])
+
+  const tableLastBtn = useMemo(() => {
+    //   看状态和账号角色显示按钮 待完善
+    return [
+      {
+        title: '操作',
+        render: (item: any) => {
+          return (
+            <>
+              <Button size='small' type='text' onClick={() => tableBtnFu('2', item.id)}>
+                编辑
+              </Button>
+              <Button size='small' type='text' onClick={() => tableBtnFu('3', item.id)}>
+                审批
+              </Button>
+              <Button size='small' type='text' onClick={() => tableBtnFu('4', item.id)}>
+                查看
+              </Button>
+              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu, tableBtnFu])
+
   return (
     <div className={styles.D6putsStor}>
       <div className='pageTitle'>出库</div>
-      <p>待开发</p>
+
+      <div className='D4top'>
+        <div className='D4topll'>
+          {B3_4inputKeyArr.map(item => (
+            <div key={item.name}>
+              <span>{item.name}：</span>
+              <Input
+                placeholder={`请输入${item.name}`}
+                maxLength={30}
+                value={formData[item.key]}
+                onChange={e => txtChangeFu(e.target.value, item.key)}
+              />
+            </div>
+          ))}
+        </div>
+        <div className='D4toprr'>
+          <Button type='primary'>批量导出</Button>&emsp;
+          <Button type='primary' onClick={() => history.push('/putsStor_edit/1/null')}>
+            新增
+          </Button>
+        </div>
+      </div>
+      <div className='D4top'>
+        <div className='D4topll'>
+          <div>
+            <span>发起日期范围：</span>
+            <RangePicker
+              value={
+                formData.startTime ? [dayjs(formData.startTime), dayjs(formData.endTime)] : null
+              }
+              onChange={timeChange}
+            />
+          </div>
+
+          <div>
+            <span>申请状态：</span>
+            <Select
+              placeholder='请选择'
+              style={{ width: 150 }}
+              value={formData.eeee}
+              onChange={e => setFormData({ ...formData, eeee: e })}
+              options={[{ value: '', label: '全部' }]}
+            />
+          </div>
+
+          <div>
+            <span>选择角色：</span>
+            <Select
+              style={{ width: 150 }}
+              placeholder='请选择'
+              options={[]}
+              fieldNames={{ value: 'id', label: 'roleName' }}
+              value={formData.ffff}
+              onChange={e => setFormData({ ...formData, ffff: e })}
+            />
+          </div>
+
+          <div>
+            <span>出库库房：</span>
+            {/* 拿库房设置的列表 */}
+            <Select
+              placeholder='请选择'
+              style={{ width: 150 }}
+              value={formData.gggg}
+              onChange={e => setFormData({ ...formData, gggg: e })}
+              options={[{ value: '', label: '全部' }]}
+            />
+          </div>
+        </div>
+        <div className='D4toprr'>
+          <Button type='primary' onClick={clickSearch}>
+            查询
+          </Button>
+          &emsp;<Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+
+      {/* 表格 */}
+      <MyTable
+        yHeight={610}
+        list={[{ id: 66 }]}
+        columnsTemp={D6tableC}
+        lastBtn={tableLastBtn}
+        pageNum={formData.pageNum}
+        pageSize={formData.pageSize}
+        total={0}
+        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+      />
     </div>
   )
 }

src/pages/Layout/data.ts

@@ -137,19 +137,19 @@ const tabLeftArr: RouterType = [
         name: '入库',
         path: '/impStor',
         Com: React.lazy(() => import('../D_storeManage/D4impStor'))
-      }
+      },
       // {
       //   id: 450,
       //   name: '移库',
       //   path: '/moveStor',
       //   Com: React.lazy(() => import('../D_storeManage/D5moveStor'))
       // },
-      // {
-      //   id: 460,
-      //   name: '出库',
-      //   path: '/putsStor',
-      //   Com: React.lazy(() => import('../D_storeManage/D6putsStor'))
-      // }
+      {
+        id: 460,
+        name: '出库',
+        path: '/putsStor',
+        Com: React.lazy(() => import('../D_storeManage/D6putsStor'))
+      }
       // {
       //   id: 470,
       //   name: '盘点',
@@ -297,91 +297,98 @@ export const routerSon: RouterTypeRow = [
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3add'))
   },
   {
-    id: 100,
+    id: 7,
     name: '藏品删除-新增',
     path: '/delete_add/:key',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3add'))
   },
   {
-    id: 7,
-    name: '藏品入馆-编辑',
+    id: 8,
+    name: '藏品入馆-新增/编辑/审批/查看',
     path: '/entering_edit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit'))
   },
   {
-    id: 8,
+    id: 9,
     name: '藏品入藏-编辑',
     path: '/enterTibet_edit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit'))
   },
   {
-    id: 9,
+    id: 10,
     name: '藏品登记-编辑',
     path: '/register_edit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit'))
   },
   {
-    id: 101,
+    id: 11,
     name: '藏品删除-编辑',
     path: '/delete_edit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit'))
   },
 
   {
-    id: 10,
+    id: 12,
     name: '藏品入馆-审批',
     path: '/entering_audit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/audit'))
   },
   {
-    id: 11,
+    id: 13,
     name: '藏品入藏-审批',
     path: '/enterTibet_audit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/audit'))
   },
   {
-    id: 12,
+    id: 14,
     name: '藏品登记-审批',
     path: '/register_audit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/audit'))
   },
 
   {
-    id: 102,
+    id: 15,
     name: '藏品删除-审批',
     path: '/delete_audit/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/audit'))
   },
 
   {
-    id: 13,
+    id: 16,
     name: '藏品入馆-查看',
     path: '/entering_look/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/look'))
   },
   {
-    id: 14,
+    id: 17,
     name: '藏品入藏-查看',
     path: '/enterTibet_look/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/look'))
   },
   {
-    id: 15,
+    id: 18,
     name: '藏品登记-查看',
     path: '/register_look/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/look'))
   },
   {
-    id: 103,
+    id: 19,
     name: '藏品删除-查看',
     path: '/delete_look/:key/:id',
     Com: React.lazy(() => import('../B_enterTibet/B3_4page/B3edit/look'))
   },
   // -------------入库-----------------
   {
-    id: 103,
+    id: 20,
     name: '入库-新增/编辑/审批/查看',
     path: '/impStor_edit/:key/:id',
     Com: React.lazy(() => import('../D_storeManage/D4impStor/D4edit'))
+  },
+  // -------------出库-----------------
+  {
+    id: 21,
+    name: '出库-新增/编辑/审批/查看',
+    path: '/putsStor_edit/:key/:id',
+    Com: React.lazy(() => import('../D_storeManage/D6putsStor/D6edit'))
   }
 ]

src/utils/tableData.ts

@@ -98,6 +98,19 @@ export const D4tableC = [
 ]
 
 // 待完善
+export const D6tableC = [
+  ['txt', '申请编号', 'regionName'],
+  ['txt', '业务名称', 'layer1'],
+  ['txt', '出库库房', 'layer2'],
+  ['txt', '是否需要归还', 'layer2'],
+  ['txt', '预计归还日期', 'layer2'],
+  ['txt', '发起部门', 'layer3'],
+  ['txt', '发起人', 'layer3'],
+  ['txt', '发起日期', 'layer3'],
+  ['txt', '申请状态', 'layer3']
+]
+
+// 待完善
 export const D4goodsTableC = [
   ['img', '封面图', 'thumb'],
   ['txt', '藏品编号', 'userName'],