feat: 锁库增加抽屉详情翻页功能

src/hooks/web/useFlipOver.ts

@@ -1,4 +1,3 @@
-import { useCallback } from 'react'
 import { useEffect } from 'react'
 import { useState, useMemo } from 'react'
 

src/pages/Product/Lock/Lockstore/components/LocksDetail/index.jsx

@@ -1,25 +1,27 @@
 import React, { useState, useEffect } from 'react'
-import { Row, Col } from 'antd'
+import { Row, Col, Tooltip } from 'antd'
 import consts from '@/consts'
 import { apiSoftwareDetail } from '@/services/lock'
 import LockForm from './Form.jsx'
 import LockLowerList from './LowerList'
 import LockTabList from './TabList'
 import { connect } from 'dva'
+import { Down, Up } from '@icon-park/react'
+import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
 const Index = props => {
-  const { dispatch, visible, id = '', shouldUpdate } = props
+  const { dispatch, visible, dataId = '', shouldUpdate, orderIds } = props
   const [state, setState] = useState({
     longle: {},
     log: [],
     total: 0,
     longleLog: []
   })
-  const initData = async () => {
+  const initData = async id => {
     const {
       data: { longle = {}, log = [], longleLog = [] } = { longle: {}, longleLog: [] },
       code = -1
-    } = await apiSoftwareDetail(id)
+    } = await apiSoftwareDetail({ id })
     if (code === consts.RET_CODE.SUCCESS) {
       if (shouldUpdate) {
         dispatch({
@@ -32,19 +34,47 @@ const Index = props => {
   }
   useEffect(() => {
     if (shouldUpdate) {
-      initData()
+      initData(dataId)
     }
   }, [shouldUpdate])
   useEffect(() => {
     if (visible) {
-      initData()
+      initData(dataId)
     }
   }, [visible])
+
+  const { flipFn, flipConsts } = useFlipOver(initData, dataId, orderIds)
+
   return (
     <div>
       <div className="sheet-box">
         <Row>
           <Col span={12} className="sheet-box-left">
+            {orderIds.length ? (
+              <div className="mb-3">
+                <Tooltip title="上一条记录">
+                  <Up
+                    fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                    size="20"
+                    onClick={() => flipFn(FlipOverEnum.UP)}
+                    className={[
+                      flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
+                    ].join(' ')}
+                  />
+                </Tooltip>
+                <Tooltip title="下一条记录">
+                  <Down
+                    fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                    size="20"
+                    onClick={() => flipFn(FlipOverEnum.DOWN)}
+                    className={[
+                      flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                      'ml-1'
+                    ].join(' ')}
+                  />
+                </Tooltip>
+              </div>
+            ) : null}
             <div className="sheet-left-panel pr-4">
               <LockForm longle={state.longle} />
             </div>

src/pages/Product/Lock/Lockstore/index.jsx

@@ -90,7 +90,8 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     data: [],
     totalOld: 0, // 待接收锁总数
     totalNew: 0,
-    id: ''
+    id: '',
+    orderIds: []
   })
 
   // 获取软件锁产品列表
@@ -124,7 +125,7 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
         height: '100vh',
         overflowY: 'hidden'
       },
-      children: <LocksDetail id={id} orderIds={state.orderIds} />
+      children: <LocksDetail dataId={id} orderIds={state.orderIds} />
     })
     toggleDrawer()
   }
@@ -293,7 +294,7 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
             totalNew: 0
           }
         } = await queryLock({ ...params, ...srotOrder, ...filter })
-        setState({ ...state, totalOld, totalNew })
+        setState({ ...state, totalOld, totalNew, orderIds: longle.map(item => item.id) })
         return {
           data: longle,
           success: code === consts.RET_CODE.SUCCESS,

src/services/lock.js

@@ -11,8 +11,7 @@ export async function queryLock(params) {
  * 获得软件锁详情
  * @param {string} id 软件锁记录id
  */
-export async function apiSoftwareDetail(id) {
-  const params = { id }
+export async function apiSoftwareDetail(params) {
   return request('/software/detail', { params })
 }