feat: 藏品故事开发-编辑

src/pages/Eculture/E2story/E2edit/index.tsx

@@ -1,64 +1,139 @@
-import React from 'react'
+import React, { useMemo, useRef, useCallback, useState, useEffect } from 'react'
 import styles from './index.module.scss'
-import EditTop from '@/pages/Zother/EditTop'
+import Z3upFilesRef from '@/components/Z3upFilesRef'
+import MyTable from '@/components/MyTable'
+import ZRichTextOne from '@/components/ZRichTextOne'
 import EditBtn from '@/pages/Zother/EditBtn'
-import { D1API_obj } from '@/store/action/Dmanage/D1register'
+import { E2_APIgetInfo } from '@/store/action/Eculture/E2story'
 import { InfoProvider } from '@/pages/Zother/InfoContext'
-import { rowArrTemp } from '@/pages/Zother/data'
-import SonGoodsList from '@/pages/Zother/SonGoodsList'
+import TextArea from 'antd/es/input/TextArea'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { storyAndGoodsTableC } from '@/utils/tableData'
 import { Button, Input } from 'antd'
+import history from '@/utils/history'
+import { useParams } from 'react-router-dom'
 
 function E2edit() {
+  const [storyInfo, setStoryInfo] = useState({} as any)
+  // const [storyGoodsInfo, setStoryGoodsInfo] = useState([] as any[])
+  const ZRichTextRef = useRef<any>(null)
+  const fileRef = useRef<any>(null)
+  const { key, id } = useParams<any>()
+  const isLook = useMemo(() => {
+    return ['3', '4'].includes(key)
+  }, [key])
+
+  // 获取详情
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await E2_APIgetInfo(id)
+    if (res.code === 0) {
+      setStoryInfo(res.data)
+      console.log(res.data)
+    }
+  }, [])
+
+  useEffect(() => {
+    getInfoFu(id)
+  }, [getInfoFu, id, key])
+
+  // 点击各种操作按钮
+  const tableBtnFu = useCallback((id: number, key: string) => {
+    history.push(`/story_edit/${key}/${id}`)
+  }, [])
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: any) => (
+          <>
+            <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '4')}>
+              查看
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => tableBtnFu(item.id, '2')} />
+          </>
+        )
+      }
+    ]
+  }, [tableBtnFu])
   return (
-    <InfoProvider>
-      <div className={styles.D1edit} id='editBox'>
-        <div className='editMain'>
-          <div className={styles.EditTop}>
-            <div className='pageTitle'>藏品故事-新增</div>
-            <div className='EdTit'>
-              <div>藏品故事</div>
+    <div className={styles.D1edit} id='editBox'>
+      <div className='editMain'>
+        <div className={styles.EditTop}>
+          <div className='pageTitle'>藏品故事-新增</div>
+          <div className='EdTit'>
+            <div>藏品故事</div>
+          </div>
+          <div className='Edtop1'>
+            <div className='Edtop1row'>
+              <div className='Edtop1ll'>
+                <span>* </span>
+                故事标题 ：
+              </div>
+              <div className='Edtop1rr'>
+                <Input
+                  readOnly={false}
+                  placeholder='请输入内容，不超过30个字'
+                  value={storyInfo.title || ''}
+                  onChange={e => setStoryInfo({ ...storyInfo, title: e.target.value })}
+                  maxLength={30}
+                  showCount
+                />
+              </div>
+            </div>
+            <div className='Edtop1row Edtop1rowFull'>
+              <div className='Edtop1ll'>关联产品 ：</div>
+              <div className='Edtop1rr'>
+                <MyTable
+                  classKey='storyList'
+                  list={storyInfo.goods || []}
+                  columnsTemp={storyAndGoodsTableC}
+                  pagingInfo={false}
+                  lastBtn={tableLastBtn}
+                />
+              </div>
             </div>
-            <div className='Edtop1'>
-              <div className='Edtop1row'>
-                <div className='Edtop1ll'>
-                  <span>* </span>
-                  故事标题 ：
-                </div>
-                <div className='Edtop1rr'>
-                  <Input
-                    readOnly={false}
-                    placeholder='请输入内容，不超过30个字'
-                    value={1}
-                    onChange={e => console.log(e.target.value)}
-                    maxLength={30}
-                    showCount
-                  />
-                </div>
+            <div className='Edtop1row Edtop1rowFull'>
+              <div className='Edtop1ll'>故事正文 ：</div>
+              <div className='Edtop1rr'>
+                <ZRichTextOne
+                  moduleId={1}
+                  dirCode='guShiText'
+                  check={false}
+                  myUrl='cms/story/upload'
+                  isLook={false}
+                  ref={ZRichTextRef}
+                />
               </div>
-              <div className='Edtop1row Edtop1rowFull'>
-                <div className='Edtop1ll'>关联产品 ：</div>
-                <div className='Edtop1rr'>
-                  <Button type='primary'>添加藏品</Button>
-                </div>
+            </div>
+            <div className='Edtop1row'>
+              <div className='Edtop1ll'>备注 ：</div>
+              <div className='Edtop1rr'>
+                <TextArea
+                  readOnly={false}
+                  placeholder='请输入内容，不超过500个字'
+                  value={storyInfo.remark || ''}
+                  onChange={e => setStoryInfo({ ...storyInfo, remark: e.target.value })}
+                  maxLength={500}
+                  showCount
+                />
               </div>
-              <div className='Edtop1rowFull'>
-                <div className='Edtop1rr'>
-                  <SonGoodsList
-                    fileUpInfo={{
-                      myUrl: 'cms/order/register/son/upload',
-                      dirCode: 'registerGoods'
-                    }}
-                  />
-                </div>
+            </div>
+            <div className='Edtop1row Edtop1rowFull'>
+              <div className='Edtop1ll'>上传附件 ：</div>
+              <div className='Edtop1rr'>
+                <Z3upFilesRef
+                  ref={fileRef}
+                  moduleId={1}
+                  dirCode='guShiTextFile'
+                  myUrl='cms/story/upload'
+                />
               </div>
             </div>
           </div>
-
-          {/* 底部按钮 */}
-          <EditBtn path='/register' APIobj={D1API_obj} />
         </div>
       </div>
-    </InfoProvider>
+    </div>
   )
 }
 

src/pages/Eculture/E2story/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useMemo, useCallback } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import { E2_APIgetList } from '@/store/action/Eculture/E2story'
 import TableList from '@/pages/Zother/TableList'
 import { baseFormData } from '@/pages/Zother/data'
+import MyPopconfirm from '@/components/MyPopconfirm'
 import { storyTableC } from '@/utils/tableData'
 import { Button } from 'antd'
 import history from '@/utils/history'
@@ -37,6 +38,7 @@ function D1register() {
   // 从仓库拿数据
   const tableInfo = useSelector((state: RootState) => state.E2story.tableInfo)
 
+  // 故事管理定制右侧内容
   const storyTableListToprr = ({
     clickSearch,
     resetSelectFu
@@ -59,6 +61,30 @@ function D1register() {
       </>
     )
   }
+  // 故事管理定制右侧操作按钮
+  // 点击各种操作按钮
+  const tableBtnFu = useCallback((id: number, key: string) => {
+    history.push(`/story_edit/${key}/${id}`)
+  }, [])
+
+  const storyTableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: any) => (
+          <>
+            <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '4')}>
+              查看
+            </Button>
+            <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '2')}>
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => console.log('del')} />
+          </>
+        )
+      }
+    ]
+  }, [tableBtnFu])
 
   return (
     <div className={styles.E2story}>
@@ -74,6 +100,7 @@ function D1register() {
         yHeight={585}
         searchDom={E2topSearch}
         storyTableListToprr={storyTableListToprr}
+        storyTableLastBtn={storyTableLastBtn}
       />
     </div>
   )

src/pages/Zother/TableList/index.tsx

@@ -22,6 +22,8 @@ type Props = {
   leftRowWidth?: string
   // 故事管理定制右侧内容
   storyTableListToprr?: (props: any) => React.ReactNode
+  // 故事管理定制操作栏
+  storyTableLastBtn?: any
 }
 
 function TableList({
@@ -34,6 +36,8 @@ function TableList({
   searchDom,
   rightBtnWidth = 250,
   leftRowWidth = '25%',
+  // 故事管理定制操作栏
+  storyTableLastBtn,
   storyTableListToprr
 }: Props) {
   const dispatch = useDispatch()
@@ -196,7 +200,7 @@ function TableList({
           yHeight={yHeight}
           list={tableInfo.list}
           columnsTemp={columnsTemp}
-          lastBtn={tableLastBtn}
+          lastBtn={storyTableLastBtn ? storyTableLastBtn : tableLastBtn}
           pageNum={formData.pageNum}
           pageSize={formData.pageSize}
           total={tableInfo.total}

src/store/action/Eculture/E2story.ts

@@ -28,7 +28,7 @@ export const E2_APIdel = (id: string) => {
 /**
  * 故事 - 获取详情
  */
-export const E2_APIgetInfo = (id: string) => {
+export const E2_APIgetInfo = (id: number) => {
   return http.get(`cms/story/detail/${id}`)
 }
 

src/utils/tableData.ts

@@ -107,11 +107,18 @@ export const I8tableC = [
   ['txt', '操作事件', 'description']
 ]
 
-// 故事gl
+// 故事管理
 export const storyTableC = [
-  ['txt', '故事标题', 'description'],
-  ['txt', '关联藏品', 'goodsNum'],
-  ['txt', '藏品标签', 'tagDictId'],
+  ['txt', '故事标题', 'name'],
+  ['txt', '关联藏品', 'goodName'],
+  ['txt', '藏品标签', 'tagName'],
   ['txt', '录入人', 'creatorName'],
   ['txt', '录入日期', 'createTime']
 ]
+// 故事管理里面的添加藏品
+export const storyAndGoodsTableC = [
+  ['txt', '藏品登记号', 'num'],
+  ['txt', '封面', 'thumb'],
+  ['txt', '藏品标签', 'tagName'],
+  ['txt', '藏品名称', 'name']
+]