作品管理-上传多张图片

后台管理/src/components/ZupTypes/index.tsx

@@ -200,7 +200,7 @@ function ZupTypes(
             if (fileOneType === 'img')
               setFileList({
                 ...fileList,
-                img: [{ ...res.data, imgName: '未命名' }, ...fileList.img]
+                img: [...fileList.img, { ...res.data, imgName: '未命名' }]
               })
             else setFileList({ ...fileList, [fileOneType]: res.data })
           }
@@ -336,6 +336,7 @@ function ZupTypes(
   // --------------让父组件调用的返回 附件 信息
   const fileComFileResFu = useCallback(() => {
     let coverUrl = ''
+    let coverUrlBig = ''
     const fileIds = []
     if (fileList.model.id && typeCheck.includes('model')) fileIds.push(fileList.model.id)
     if (fileList.audio.id && typeCheck.includes('audio')) fileIds.push(fileList.audio.id)
@@ -347,6 +348,7 @@ function ZupTypes(
           if (oneIsCover && i === 0) {
             // 返回 第一张图的url 作为封面
             coverUrl = v.thumb || v.filePath
+            coverUrlBig = v.filePath || v.thumb!
           }
         }
       })
@@ -355,7 +357,8 @@ function ZupTypes(
       sonType: typeCheck,
       sonFileIds: fileIds,
       sonIsOk: fileCheckFu,
-      coverUrl
+      coverUrl,
+      coverUrlBig
     }
   }, [
     fileCheckFu,
@@ -522,7 +525,7 @@ function ZupTypes(
               <br />
             </>
           ) : null}
-          支持png、jpg的图片格式；最大支持5M；最多支持{imgLength}张。
+          第一张为封面图；支持png、jpg的图片格式；最大支持{imgSize}M；最多支持{imgLength}张。
           {lastImgTxt}
         </div>
       </div>

后台管理/src/pages/A1works/A1add/index.module.scss

@@ -44,8 +44,13 @@
 
         .formRight {
           width: calc(100% - 100px);
+          position: relative;
+          top: -15px;
         }
       }
+      .formRow2 {
+        width: 1600px;
+      }
 
       .A1Ebtn {
         position: absolute;

后台管理/src/pages/A1works/A1add/index.tsx

@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, Form, FormInstance, Input, InputNumber, Select } from 'antd'
 import { MessageFu } from '@/utils/message'
-import { A1_APIsave } from '@/store/action/A1works'
+import { A1_APIgetFileList, A1_APIsave } from '@/store/action/A1works'
 import { A1SelectData, A1tableType } from '../data'
-import ZupOne from '@/components/ZupOne'
 import TextArea from 'antd/es/input/TextArea'
 import MyPopconfirm from '@/components/MyPopconfirm'
+import ZupTypes from '@/components/ZupTypes'
 
 type Props = {
   info: A1tableType
@@ -20,19 +20,28 @@ function A1add({ type, closeFu, addTableFu, upTableFu, info }: Props) {
   // 表单的ref
   const FormBoxRef = useRef<FormInstance>(null)
 
-  // 封面图的ref
-  const ZupThumbRef = useRef<any>(null)
+  // 多张图片的ref
+  const ZupImgsRef = useRef<any>(null)
 
   // 编辑进来获取详情
   const getInfoFu = useCallback(
-    (id: number) => {
+    async (id: number) => {
       FormBoxRef.current?.setFieldsValue(info)
-      // 设置封面图
-      ZupThumbRef.current?.setFileComFileFu({
-        fileName: '',
-        filePath: info.thumbPc,
-        thumb: info.thumb
-      })
+
+      // 拿附件详情
+      // 设置图片
+      const res = await A1_APIgetFileList(info.id)
+
+      if (res.code === 0) {
+        const file = res.data.file || []
+
+        // 传给 附件 组件的
+        const sonInfo = {
+          type: 'img',
+          fileList: file
+        }
+        ZupImgsRef.current?.setFileComFileFu(sonInfo)
+      }
     },
     [info]
   )
@@ -55,15 +64,16 @@ function A1add({ type, closeFu, addTableFu, upTableFu, info }: Props) {
     async (values: any) => {
       setFileCheck(true)
 
-      const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
-      // 没有传 封面图
-      if (!coverUrl1.filePath) return MessageFu.warning('请上传作品图片')
+      // 没有传 图片
+      const { sonFileIds, sonIsOk, coverUrl, coverUrlBig } = ZupImgsRef.current?.fileComFileResFu()
+      if (sonIsOk) return MessageFu.warning('请上传作品图片')
 
       const obj = {
         ...values,
         id: info.id > 0 ? info.id : null,
-        thumb: coverUrl1.thumb || '',
-        thumbPc: coverUrl1.filePath || ''
+        thumb: coverUrl || '',
+        thumbPc: coverUrlBig || '',
+        fileIds: sonFileIds.join(',')
       }
 
       // if (1 + 1 === 2) {
@@ -121,24 +131,23 @@ function A1add({ type, closeFu, addTableFu, upTableFu, info }: Props) {
         </Form.Item>
 
         {/* 封面 */}
-        <div className='formRow'>
+        <div className='formRow formRow2'>
           <div className='formLeft'>
             <span>* </span>
             作品图片：
           </div>
           <div className='formRight'>
-            <ZupOne
-              ref={ZupThumbRef}
+            <ZupTypes
+              ref={ZupImgsRef}
               isLook={false}
               fileCheck={fileCheck}
-              size={10}
+              selecFlag='图片'
+              imgSize={10}
+              imgLength={8}
               dirCode={'A1works'}
               myUrl='cms/work/upload'
-              format={['image/jpeg', 'image/png']}
-              formatTxt='png、jpg和jpeg'
-              checkTxt='请上传作品图片'
-              upTxt='最多1张'
-              myType='thumb'
+              isTypeShow={true}
+              oneIsCover={true}
             />
           </div>
         </div>

后台管理/src/pages/A3relation/A3show/index.tsx

@@ -107,7 +107,7 @@ function A3show({ closeFu }: Props) {
               myUrl='cms/person/upload'
               format={['image/jpeg', 'image/png']}
               formatTxt='png、jpg和jpeg'
-              checkTxt='请上传头像'
+              checkTxt='请上传图片'
               upTxt='最多1张'
               myType='thumb'
             />

后台管理/src/store/action/A1works.ts

@@ -26,11 +26,11 @@ export const A1_APIdel = (id: number) => {
 }
 
 /**
- * 作品管理-获取详情
+ * 作品管理-获取附件列表
  */
-// export const A1_APIgetInfo = (id: number) => {
-//   return http.get(`cms/work/detail/${id}`)
-// }
+export const A1_APIgetFileList = (id: number) => {
+  return http.get(`cms/work/detail/${id}`)
+}
 
 /**
  * 作品管理-新增、编辑