feat: 藏品故事开发-编辑

src/pages/Eculture/E2story/E2edit/index.module.scss

@@ -42,6 +42,9 @@
         }
         .Edtop1rr {
           width: calc(100% - 100px);
+          .ant-table-cell {
+            padding: 8px !important;
+          }
           & > div {
             width: 100%;
           }
@@ -56,3 +59,21 @@
     }
   }
 }
+
+.EditBtn {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+  display: flex;
+  justify-content: space-between;
+  :global {
+    .ant-btn {
+      margin-right: 15px;
+    }
+  }
+}

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

@@ -3,14 +3,13 @@ import styles from './index.module.scss'
 import Z3upFilesRef from '@/components/Z3upFilesRef'
 import MyTable from '@/components/MyTable'
 import ZRichTextOne from '@/components/ZRichTextOne'
-import EditBtn from '@/pages/Zother/EditBtn'
-import { E2_APIgetInfo } from '@/store/action/Eculture/E2story'
-import { InfoProvider } from '@/pages/Zother/InfoContext'
+import { MessageFu } from '@/utils/message'
+import { E2_APIgetInfo, E2_APIsave } from '@/store/action/Eculture/E2story'
 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 history, { backPageFu } from '@/utils/history'
 import { useParams } from 'react-router-dom'
 
 function E2edit() {
@@ -19,28 +18,62 @@ function E2edit() {
   const ZRichTextRef = useRef<any>(null)
   const fileRef = useRef<any>(null)
   const { key, id } = useParams<any>()
-  const isLook = useMemo(() => {
-    return ['3', '4'].includes(key)
+  const isEdit = useMemo(() => {
+    return ['4'].includes(key)
   }, [key])
 
   // 获取详情
   const getInfoFu = useCallback(async (id: number) => {
     const res = await E2_APIgetInfo(id)
     if (res.code === 0) {
+      // 设置数据和富文本和附件
       setStoryInfo(res.data)
+      ZRichTextRef.current?.ritxtShowFu(res.data.rtf || '')
+      fileRef.current?.sonSetListFu(res.data.file)
       console.log(res.data)
     }
   }, [])
 
+  // 保存或修改
+  const saveFu = useCallback(async () => {
+    if (!storyInfo.name) return MessageFu.warning('请输入故事标题')
+
+    // 获取附件
+    const { list: flieList } = fileRef.current?.sonResListFu()
+
+    // 获取富文本
+    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }
+    const obj: any = {
+      name: storyInfo.name,
+      remark: storyInfo.remark,
+      id: storyInfo.id > 0 ? storyInfo.id : null,
+      fileIds: flieList.map((v: any) => v.id).join(','),
+      rtf: rtf.val
+    }
+    console.log(obj)
+    const res = await E2_APIsave(obj)
+    if (res.code === 0) {
+      backPageFu('-1')
+    }
+  }, [storyInfo])
+
+  // 初始获取详情
   useEffect(() => {
-    getInfoFu(id)
-  }, [getInfoFu, id, key])
+    if (isEdit) {
+      getInfoFu(id)
+    }
+  }, [getInfoFu, id, isEdit, key])
 
-  // 点击各种操作按钮
+  // table点击各种操作按钮
   const tableBtnFu = useCallback((id: number, key: string) => {
     history.push(`/story_edit/${key}/${id}`)
   }, [])
 
+  // 提交
+  const submitFu = useCallback(() => {
+    saveFu()
+  }, [saveFu])
+
   const tableLastBtn = useMemo(() => {
     return [
       {
@@ -74,8 +107,8 @@ function E2edit() {
                 <Input
                   readOnly={false}
                   placeholder='请输入内容，不超过30个字'
-                  value={storyInfo.title || ''}
-                  onChange={e => setStoryInfo({ ...storyInfo, title: e.target.value })}
+                  value={storyInfo.name || ''}
+                  onChange={e => setStoryInfo({ ...storyInfo, name: e.target.value })}
                   maxLength={30}
                   showCount
                 />
@@ -84,6 +117,9 @@ function E2edit() {
             <div className='Edtop1row Edtop1rowFull'>
               <div className='Edtop1ll'>关联产品 ：</div>
               <div className='Edtop1rr'>
+                <Button type='primary' onClick={() => console.log('添加藏品')}>
+                  添加藏品
+                </Button>
                 <MyTable
                   classKey='storyList'
                   list={storyInfo.goods || []}
@@ -132,6 +168,16 @@ function E2edit() {
             </div>
           </div>
         </div>
+
+        {/* 操作按钮 */}
+        <div className={styles.EditBtn}>
+          <div>
+            <Button type='primary' onClick={() => submitFu()}>
+              提交
+            </Button>
+            <MyPopconfirm txtK='取消' onConfirm={() => backPageFu('-1')} />
+          </div>
+        </div>
       </div>
     </div>
   )