upp

src/pages/ZgoodsInfo/GItab2/index.tsx

@@ -20,7 +20,7 @@ function GItab2({ info }: Props) {
   return (
     <div className={styles.GItab2}>
       {/* 待完善sg -等陈磊/伟浩写完库房相关*/}
-      <h2>库存状态：{goodsStatus}</h2>
+      <h2>库存状态（开发中）：{goodsStatus}</h2>
 
       {!info.siteStatus || [1, 2, 5].includes(info.siteStatus) || !info.storageId ? (
         <div className='GImainNone'>当前状态无库存信息</div>

src/pages/ZgoodsInfo/GItab3/index.module.scss

@@ -10,5 +10,8 @@
         }
       }
     }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/ZgoodsInfo/GItab3/index.tsx

@@ -165,7 +165,7 @@ function GItab3({ info, fileList }: Props) {
             >
               下载
             </Button>
-            <Button size='small' type='text'>
+            <Button size='small' type='text' onClick={() => MessageFu.warning('开发中')}>
               设置
             </Button>
             <Button size='small' type='text' onClick={() => setDownLogId(item.id)}>
@@ -205,6 +205,7 @@ function GItab3({ info, fileList }: Props) {
       {/* 表格 */}
       <MyTable
         classKey='GItab3'
+        yHeight={550}
         list={tableObj[btnAc] || []}
         columnsTemp={GI3tableC}
         lastBtn={tableLastBtn}

src/pages/ZgoodsInfo/GItab4/index.module.scss

@@ -1,7 +1,17 @@
 .GItab4 {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
   :global {
+    .GI4top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      & > div {
+        .ant-btn {
+          margin-left: 15px;
+        }
+      }
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

src/pages/ZgoodsInfo/GItab4/index.tsx

@@ -1,43 +1,127 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-function GItab4() {
+import { Button, Input } from 'antd'
+import { E2_APIgetList } from '@/store/action/Eculture/E2story'
+import { Typetable } from '@/pages/Zother/data'
+import MyTable from '@/components/MyTable'
+import { GI4tableC } from '@/utils/tableData'
+
+const baseFormData = {
+  searchKey: '',
+  pageNum: 1,
+  pageSize: 10
+}
+
+type Props = {
+  goodId: number
+}
+
+function GItab4({ goodId }: Props) {
+  const [tableObj, setTableObj] = useState<{ list: Typetable[]; total: number }>({
+    list: [],
+    total: 0
+  })
+
+  const [formData, setFormData] = useState({ ...baseFormData })
+
+  const formDataRef = useRef({ ...baseFormData })
+
   useEffect(() => {
-    console.log('GItab4')
+    formDataRef.current = formData
+  }, [formData])
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [formData])
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(async () => {
+    const params = {
+      ...formDataRef.current,
+      goodId
+    }
+
+    const res = await E2_APIgetList(params, true)
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records || [],
+        total: res.data.total
+      }
+      setTableObj(obj)
+    }
+  }, [goodId])
+
+  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)
   }, [])
 
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
+
   return (
     <div className={styles.GItab4}>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
-      <h1>GItab4</h1>
+      <div className='GI4top'>
+        <div>
+          <Input
+            style={{ width: 300 }}
+            placeholder='请输入故事名称'
+            maxLength={30}
+            value={formData.searchKey}
+            onChange={e => txtChangeFu(e.target.value, 'searchKey')}
+          />
+          <Button type='primary' onClick={clickSearch}>
+            查询
+          </Button>
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+        <Button type='primary'>新增故事</Button>
+      </div>
+
+      <MyTable
+        classKey='GItab4'
+        yHeight={510}
+        list={tableObj.list}
+        columnsTemp={GI4tableC}
+        lastBtn={[]}
+        pageNum={formData.pageNum}
+        pageSize={formData.pageSize}
+        total={tableObj.total}
+        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+        widthSet={{ remark: 800 }}
+      />
     </div>
   )
 }

src/pages/ZgoodsInfo/index.tsx

@@ -70,7 +70,7 @@ function ZgoodsInfo() {
         show: false,
         Dom: <GItab3 info={info} fileList={fileList} />
       },
-      { id: 334, name: '藏品故事', done: false, show: false, Dom: <GItab4 /> },
+      { id: 334, name: '藏品故事', done: false, show: false, Dom: <GItab4 goodId={info.id} /> },
       { id: 335, name: '藏品日志', done: false, show: false, Dom: <GItab5 /> }
     ]
   }, [fileList, info])

src/pages/Zother/GuShi/GuShiMo/index.tsx

@@ -15,8 +15,9 @@ type Props = {
   closeFu: () => void
   succFu: (val: '新增' | '编辑', info: GuShiType) => void
   moduleId: number
+  isLook?: boolean
 }
-function GuShiMo({ guShiInfo, closeFu, succFu, moduleId }: Props) {
+function GuShiMo({ guShiInfo, closeFu, succFu, moduleId, isLook = false }: Props) {
   const [info, setInfo] = useState<GuShiType>({
     id: -1,
     name: '',

src/store/action/Eculture/E2story.ts

@@ -4,16 +4,19 @@ import http from '@/utils/http'
 /**
  * 故事 - 获取分页列表
  */
-export const E2_APIgetList = (data: any): any => {
-  return async (dispatch: AppDispatch) => {
-    const res = await http.post('cms/story/page', data)
-    if (res.code === 0) {
-      const obj = {
-        list: res.data.records,
-        total: res.data.total
-      }
+export const E2_APIgetList = (data: any, res?: boolean): any => {
+  if (res) return http.post('cms/story/page', data)
+  else {
+    return async (dispatch: AppDispatch) => {
+      const res = await http.post('cms/story/page', data)
+      if (res.code === 0) {
+        const obj = {
+          list: res.data.records,
+          total: res.data.total
+        }
 
-      dispatch({ type: 'E2/getList', payload: obj })
+        dispatch({ type: 'E2/getList', payload: obj })
+      }
     }
   }
 }

src/utils/tableData.ts

@@ -185,3 +185,9 @@ export const GI3tableC = [
   ['txtC', '上传人', 'creatorName'],
   ['sizeNum', '文件大小(mb)', 'fileSize', 1024]
 ]
+
+export const GI4tableC = [
+  ['txt', '故事名称', 'name'],
+  ['text', '备注', 'remark', 50],
+  ['txt', '编辑人', 'creatorName']
+]