upp

public/index.html

@@ -4,12 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -40,4 +37,9 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+
+  <script>
+    // 图书影印模块-显示bookId
+    const isBookIdShow = true
+  </script>
 </html>

src/components/ZupTypes/index.tsx

@@ -1,58 +1,52 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import styles from "./index.module.scss";
-import { Button, Checkbox, Input, Modal } from "antd";
-import { forwardRef, useImperativeHandle } from "react";
-import { baseURL } from "@/utils/http";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Checkbox, Input, Modal } from 'antd'
+import { forwardRef, useImperativeHandle } from 'react'
+import { baseURL } from '@/utils/http'
 import {
   PlusOutlined,
   CloseCircleOutlined,
   UploadOutlined,
   CloseOutlined,
   DownloadOutlined,
-  EyeOutlined,
-} from "@ant-design/icons";
-import { MessageFu } from "@/utils/message";
-import { API_upFile } from "@/store/action/layout";
-import { fileDomInitialFu } from "@/utils/domShow";
-import store from "@/store";
-import ImageLazy from "../ImageLazy";
-import classNames from "classnames";
-import MyPopconfirm from "../MyPopconfirm";
+  EyeOutlined
+} from '@ant-design/icons'
+import { MessageFu } from '@/utils/message'
+import { API_upFile } from '@/store/action/layout'
+import { fileDomInitialFu } from '@/utils/domShow'
+import store from '@/store'
+import ImageLazy from '../ImageLazy'
+import classNames from 'classnames'
+import MyPopconfirm from '../MyPopconfirm'
 // import { A2_APIchangeImgName } from "@/store/action/A2exhibition";
 
 export type FileListType = {
-  fileName: string;
-  thumb?: string;
-  filePath: string;
-  id: number;
-  type: "model" | "img" | "audio" | "video";
-  imgName: string;
-};
+  fileName: string
+  thumb?: string
+  filePath: string
+  id: number
+  type: 'model' | 'img' | 'audio' | 'video'
+  imgName: string
+}
 
 type Props = {
-  ref: any; //当前自己的ref，给父组件调用
-  selecFlag: string; //筛选的字符串 模型/图片/音频/视频
-  fileCheck: boolean; //有没有点击过确定
-  dirCode: string; //文件的code码
-  myUrl: string; //请求地址
-  isLook?: boolean; //是不是查看
-  modelSize?: number; //模型文件大小限制
-  imgSize?: number; //图片大小限制
-  imgLength?: number; //图片数量限制
-  audioSize?: number; //音频大小限制
-  videoSize?: number; //视频大小限制
-  videoTit?: string; //视频上传的提示语
-  isTypeShow?: boolean; //默认就选中（只有一个类型的时候）
-  isUpName?: boolean; //是否能修改图片名字
-  lastImgTxt?: string; //加载最后面的上传提示
-  oneIsCover?: boolean; //是否将第一张作为封面
-};
+  ref: any //当前自己的ref，给父组件调用
+  selecFlag: string //筛选的字符串 模型/图片/音频/视频
+  fileCheck: boolean //有没有点击过确定
+  dirCode: string //文件的code码
+  myUrl: string //请求地址
+  isLook?: boolean //是不是查看
+  modelSize?: number //模型文件大小限制
+  imgSize?: number //图片大小限制
+  imgLength?: number //图片数量限制
+  audioSize?: number //音频大小限制
+  videoSize?: number //视频大小限制
+  videoTit?: string //视频上传的提示语
+  isTypeShow?: boolean //默认就选中（只有一个类型的时候）
+  isUpName?: boolean //是否能修改图片名字
+  lastImgTxt?: string //加载最后面的上传提示
+  oneIsCover?: boolean //是否将第一张作为封面
+}
 
 function ZupTypes(
   {
@@ -66,223 +60,213 @@ function ZupTypes(
     imgLength = 9,
     audioSize = 10,
     videoSize = 500,
-    videoTit = "",
+    videoTit = '',
     isTypeShow = false,
     isUpName = false,
-    lastImgTxt = "",
-    oneIsCover = false,
+    lastImgTxt = '',
+    oneIsCover = false
   }: Props,
   ref: any
 ) {
   // 筛选
-  const [typeCheck, setTypeCheck] = useState<string[]>([]);
+  const [typeCheck, setTypeCheck] = useState<string[]>([])
 
   // 筛选数组
   const typeCheckArr = useMemo(() => {
     const arr = [
-      { label: "模型", value: "model" },
-      { label: "图片", value: "img" },
-      { label: "音频", value: "audio" },
-      { label: "视频", value: "video" },
-    ];
+      { label: '模型', value: 'model' },
+      { label: '图片', value: 'img' },
+      { label: '音频', value: 'audio' },
+      { label: '视频', value: 'video' }
+    ]
 
-    const arrRes = arr.filter((v) => selecFlag.includes(v.label));
+    const arrRes = arr.filter(v => selecFlag.includes(v.label))
     if (arrRes.length <= 1 && isTypeShow) {
-      setTypeCheck([arrRes[0].value]);
+      setTypeCheck([arrRes[0].value])
       // 默认就选中（只有一个类型的时候）
     }
 
-    return arrRes;
-  }, [isTypeShow, selecFlag]);
+    return arrRes
+  }, [isTypeShow, selecFlag])
 
   // 上传附件的信息
   const [fileList, setFileList] = useState({
     model: {} as FileListType,
     img: [] as FileListType[],
     audio: {} as FileListType,
-    video: {} as FileListType,
-  });
+    video: {} as FileListType
+  })
 
   // 附件信息的校验，不满足返回 true
   const fileCheckFu = useMemo(() => {
-    let flag = false;
-    if (typeCheck.length === 0) flag = true;
-    if (typeCheck.includes("model") && !fileList.model.id) flag = true;
-    if (typeCheck.includes("img") && fileList.img.length === 0) flag = true;
-    if (typeCheck.includes("audio") && !fileList.audio.id) flag = true;
-    if (typeCheck.includes("video") && !fileList.video.id) flag = true;
-    return flag;
-  }, [fileList, typeCheck]);
+    let flag = false
+    if (typeCheck.length === 0) flag = true
+    if (typeCheck.includes('model') && !fileList.model.id) flag = true
+    if (typeCheck.includes('img') && fileList.img.length === 0) flag = true
+    if (typeCheck.includes('audio') && !fileList.audio.id) flag = true
+    if (typeCheck.includes('video') && !fileList.video.id) flag = true
+    return flag
+  }, [fileList, typeCheck])
 
   // 点击上传附件按钮
-  const myInput = useRef<HTMLInputElement>(null);
+  const myInput = useRef<HTMLInputElement>(null)
 
-  const [fileOneType, setFileOneType] = useState("");
+  const [fileOneType, setFileOneType] = useState('')
 
   useEffect(() => {
-    if (fileOneType) myInput.current?.click();
-  }, [fileOneType]);
+    if (fileOneType) myInput.current?.click()
+  }, [fileOneType])
 
   const upFileFu = useCallback((type: string) => {
-    setFileOneType("");
+    setFileOneType('')
     window.setTimeout(() => {
-      setFileOneType(type);
-    }, 100);
-  }, []);
+      setFileOneType(type)
+    }, 100)
+  }, [])
 
   // 上传附件的处理函数
   const handeUpPhoto2 = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       if (e.target.files) {
         // 拿到files信息
-        const filesInfo = e.target.files[0];
-
-        let anType = ["image/jpeg", "image/png"];
-        let anTit1 = "只支持png、jpg格式!";
-        let anTit2 = `最大支持${imgSize}M!`;
-        let anSize = imgSize * 1024 * 1024;
-
-        if (fileOneType === "audio") {
-          anType = ["audio/mpeg"];
-          anTit1 = "只支持mp3格式!";
-          anTit2 = `最大支持${audioSize}M!`;
-          anSize = audioSize * 1024 * 1024;
-        } else if (fileOneType === "video") {
-          anType = ["video/mp4"];
-          anTit1 = "只支持mp4格式!";
-          anTit2 = `最大支持${videoSize}M!`;
-          anSize = videoSize * 1024 * 1024;
-        } else if (fileOneType === "model") {
-          anType = [""];
-          anTit1 = "只支持4dage格式!";
-          anTit2 = `最大支持${modelSize}M!`;
-          anSize = modelSize * 1024 * 1024;
+        const filesInfo = e.target.files[0]
+
+        let anType = ['image/jpeg', 'image/png']
+        let anTit1 = '只支持png、jpg格式!'
+        let anTit2 = `最大支持${imgSize}M!`
+        let anSize = imgSize * 1024 * 1024
+
+        if (fileOneType === 'audio') {
+          anType = ['audio/mpeg']
+          anTit1 = '只支持mp3格式!'
+          anTit2 = `最大支持${audioSize}M!`
+          anSize = audioSize * 1024 * 1024
+        } else if (fileOneType === 'video') {
+          anType = ['video/mp4']
+          anTit1 = '只支持mp4格式!'
+          anTit2 = `最大支持${videoSize}M!`
+          anSize = videoSize * 1024 * 1024
+        } else if (fileOneType === 'model') {
+          anType = ['']
+          anTit1 = '只支持4dage格式!'
+          anTit2 = `最大支持${modelSize}M!`
+          anSize = modelSize * 1024 * 1024
         }
 
         // 校验格式
-        if (fileOneType !== "model") {
+        if (fileOneType !== 'model') {
           if (!anType.includes(filesInfo.type)) {
-            e.target.value = "";
-            return MessageFu.warning(anTit1);
+            e.target.value = ''
+            return MessageFu.warning(anTit1)
           }
         } else {
-          if (!filesInfo.name.includes(".4dage")) {
-            e.target.value = "";
-            return MessageFu.warning(anTit1);
+          if (!filesInfo.name.includes('.4dage')) {
+            e.target.value = ''
+            return MessageFu.warning(anTit1)
           }
         }
 
         // 校验大小
         if (filesInfo.size > anSize) {
-          e.target.value = "";
-          return MessageFu.warning(anTit2);
+          e.target.value = ''
+          return MessageFu.warning(anTit2)
         }
         // 创建FormData对象
-        const fd = new FormData();
+        const fd = new FormData()
         // 把files添加进FormData对象（‘photo’为后端需要的字段）
-        fd.append("type", fileOneType);
-        fd.append("dirCode", dirCode);
-        fd.append("isDb", "true");
+        fd.append('type', fileOneType)
+        fd.append('dirCode', dirCode)
+        fd.append('isDb', 'true')
 
         //初始图片 fileName为：未命名
         if (isUpName) {
-          fd.append("isDefaultName", "false");
+          fd.append('isDefaultName', 'false')
         }
 
-        fd.append("file", filesInfo);
+        fd.append('file', filesInfo)
 
-        if (fileOneType === "img" && filesInfo.size > 1 * 1024 * 1024) {
+        if (fileOneType === 'img' && filesInfo.size > 1 * 1024 * 1024) {
           // 开启压缩图片
-          fd.append("isCompress", "true");
+          fd.append('isCompress', 'true')
         }
 
-        e.target.value = "";
+        e.target.value = ''
 
-        const res = await API_upFile(fd, myUrl);
+        const res = await API_upFile(fd, myUrl)
 
         try {
           if (res.code === 0) {
-            MessageFu.success("上传成功!");
-            if (fileOneType === "img")
+            MessageFu.success('上传成功!')
+            if (fileOneType === 'img')
               setFileList({
                 ...fileList,
-                img: [{ ...res.data, imgName: "未命名" }, ...fileList.img],
-              });
-            else setFileList({ ...fileList, [fileOneType]: res.data });
+                img: [...fileList.img, { ...res.data, imgName: '未命名' }]
+              })
+            else setFileList({ ...fileList, [fileOneType]: res.data })
           }
-          fileDomInitialFu();
+          fileDomInitialFu()
         } catch (error) {
-          fileDomInitialFu();
+          fileDomInitialFu()
         }
       }
     },
-    [
-      audioSize,
-      dirCode,
-      fileList,
-      fileOneType,
-      imgSize,
-      isUpName,
-      modelSize,
-      myUrl,
-      videoSize,
-    ]
-  );
+    [audioSize, dirCode, fileList, fileOneType, imgSize, isUpName, modelSize, myUrl, videoSize]
+  )
 
   // 附件图片的拖动
-  const [dragImg, setDragImg] = useState<any>(null);
+  const [dragImg, setDragImg] = useState<any>(null)
 
   const handleDragOver = useCallback(
     (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
-      if (isLook) return;
-      e.dataTransfer.dropEffect = "move";
+      if (isLook) return
+      e.dataTransfer.dropEffect = 'move'
     },
     [isLook]
-  );
+  )
 
   const handleDragEnter = useCallback(
     (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
-      if (isLook) return;
-
-      e.dataTransfer.effectAllowed = "move";
-      if (item === dragImg) return;
-      const newItems = [...fileList.img]; //拷贝一份数据进行交换操作。
-      const src = newItems.indexOf(dragImg); //获取数组下标
-      const dst = newItems.indexOf(item);
-      newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
-      setFileList({ ...fileList, img: newItems });
+      if (isLook) return
+
+      e.dataTransfer.effectAllowed = 'move'
+      if (item === dragImg) return
+      const newItems = [...fileList.img] //拷贝一份数据进行交换操作。
+      const src = newItems.indexOf(dragImg) //获取数组下标
+      const dst = newItems.indexOf(item)
+      newItems.splice(dst, 0, ...newItems.splice(src, 1)) //交换位置
+      setFileList({ ...fileList, img: newItems })
     },
     [dragImg, fileList, isLook]
-  );
+  )
 
   // 删除某一张图片
   const delImgListFu = useCallback(
     (id: number) => {
-      const newItems = fileList.img.filter((v) => v.id !== id);
-      setFileList({ ...fileList, img: newItems });
+      const newItems = fileList.img.filter(v => v.id !== id)
+      setFileList({ ...fileList, img: newItems })
     },
     [fileList]
-  );
+  )
 
   // 模型 音频 视频 的 dom
   const resOneDivDom = useCallback(
-    (type: "model" | "audio" | "video") => {
+    (type: 'model' | 'audio' | 'video') => {
       const dom = (
-        <div className="ZTbox" hidden={!typeCheck.includes(type)}>
-          <div className="ZTbox1">
+        <div className='ZTbox' hidden={!typeCheck.includes(type)}>
+          <div className='ZTbox1'>
             <span> </span>
-            {type === "model" ? "模型" : type === "audio" ? "音频" : "视频"}：
+            {type === 'model' ? '模型' : type === 'audio' ? '音频' : '视频'}：
           </div>
           {fileList[type].id ? (
-            <div className="ZTbox2">
-              <div className="ZTbox2Name">{fileList[type].fileName}</div>
+            <div className='ZTbox2'>
+              <div className='ZTbox2Name'>{fileList[type].fileName}</div>
 
               <div
-                className="ZTbox2Look"
+                className='ZTbox2Look'
                 onClick={() =>
                   store.dispatch({
-                    type: "layout/lookDom",
-                    payload: { src: fileList[type].filePath, type },
+                    type: 'layout/lookDom',
+                    payload: { src: fileList[type].filePath, type }
                   })
                 }
               >
@@ -292,97 +276,87 @@ function ZupTypes(
               <a
                 href={baseURL + fileList[type].filePath}
                 download
-                target="_blank"
-                className="ZTbox2Down"
-                rel="noreferrer"
+                target='_blank'
+                className='ZTbox2Down'
+                rel='noreferrer'
               >
                 <DownloadOutlined rev={undefined} />
               </a>
 
               <MyPopconfirm
-                txtK="删除"
-                onConfirm={() =>
-                  setFileList({ ...fileList, [type]: {} as FileListType })
-                }
-                Dom={
-                  <CloseCircleOutlined className="ZTbox2X" rev={undefined} />
-                }
+                txtK='删除'
+                onConfirm={() => setFileList({ ...fileList, [type]: {} as FileListType })}
+                Dom={<CloseCircleOutlined className='ZTbox2X' rev={undefined} />}
               />
             </div>
           ) : (
             <>
-              <Button
-                onClick={() => upFileFu(type)}
-                icon={<UploadOutlined rev={undefined} />}
-              >
+              <Button onClick={() => upFileFu(type)} icon={<UploadOutlined rev={undefined} />}>
                 上传
               </Button>
 
-              <div className="ZTboxTit">
-                {type === "model"
+              <div className='ZTboxTit'>
+                {type === 'model'
                   ? `仅支持4dage格式的模型文件，大小不能超过${modelSize}M。`
-                  : type === "audio"
+                  : type === 'audio'
                   ? `仅支持mp3格式的音频文件，大小不得超过${audioSize}MB。`
                   : `仅支持mp4格式的视频文件，大小不得超过${videoSize}MB。${videoTit}`}
               </div>
             </>
           )}
         </div>
-      );
-      return dom;
+      )
+      return dom
     },
     [audioSize, fileList, modelSize, typeCheck, upFileFu, videoSize, videoTit]
-  );
+  )
 
   // ------------让父组件调用的 回显
   const setFileComFileFu = useCallback((info: any) => {
-    if (info.type) setTypeCheck(info.type.split(","));
+    if (info.type) setTypeCheck(info.type.split(','))
 
     if (info.fileList && info.fileList.length) {
-      const data: FileListType[] = info.fileList;
+      const data: FileListType[] = info.fileList
       const obj = {
         model: {} as FileListType,
         img: [] as FileListType[],
         audio: {} as FileListType,
-        video: {} as FileListType,
-      };
-
-      data.forEach((v) => {
-        if (v.type === "img") {
-          obj.img.push({ ...v, imgName: v.fileName });
-        } else obj[v.type!] = v;
-      });
-      setFileList(obj);
+        video: {} as FileListType
+      }
+
+      data.forEach(v => {
+        if (v.type === 'img') {
+          obj.img.push({ ...v, imgName: v.fileName })
+        } else obj[v.type!] = v
+      })
+      setFileList(obj)
     }
-  }, []);
+  }, [])
 
   // --------------让父组件调用的返回 附件 信息
   const fileComFileResFu = useCallback(() => {
-    let coverUrl = "";
-    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);
-    if (fileList.video.id && typeCheck.includes("video"))
-      fileIds.push(fileList.video.id);
-    if (typeCheck.includes("img")) {
+    let coverUrl = ''
+    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)
+    if (fileList.video.id && typeCheck.includes('video')) fileIds.push(fileList.video.id)
+    if (typeCheck.includes('img')) {
       fileList.img.forEach((v, i) => {
         if (v.id) {
-          fileIds.push(v.id);
+          fileIds.push(v.id)
           if (oneIsCover && i === 0) {
             // 返回 第一张图的url 作为封面
-            coverUrl = v.thumb || v.filePath;
+            coverUrl = v.thumb || v.filePath
           }
         }
-      });
+      })
     }
     return {
       sonType: typeCheck,
       sonFileIds: fileIds,
       sonIsOk: fileCheckFu,
-      coverUrl,
-    };
+      coverUrl
+    }
   }, [
     fileCheckFu,
     fileList.audio.id,
@@ -390,45 +364,43 @@ function ZupTypes(
     fileList.model.id,
     fileList.video.id,
     oneIsCover,
-    typeCheck,
-  ]);
+    typeCheck
+  ])
 
   // 可以让父组件调用子组件的方法
   useImperativeHandle(ref, () => ({
     setFileComFileFu,
-    fileComFileResFu,
-  }));
+    fileComFileResFu
+  }))
 
   // 修改图片名称
   const [isNameChange, setIsNameChange] = useState({
     id: 0,
-    oldName: "",
-    newName: "",
-  });
+    oldName: '',
+    newName: ''
+  })
 
   // 关闭弹窗
   const isNameChangeXFu = useCallback(() => {
-    setIsNameChange({ id: 0, oldName: "", newName: "" });
-  }, []);
+    setIsNameChange({ id: 0, oldName: '', newName: '' })
+  }, [])
 
   // 点击图片名字-出来弹窗
   const isNameChangeFu = useCallback(
     (item: FileListType) => {
-      if (isLook) return;
-      setIsNameChange({ id: item.id, oldName: item.imgName, newName: "" });
+      if (isLook) return
+      setIsNameChange({ id: item.id, oldName: item.imgName, newName: '' })
     },
     [isLook]
-  );
+  )
 
   // 修改完这点击 确定修改
   const isNameChangeOkFu = useCallback(async () => {
     // if (!isNameChange.newName) return MessageFu.warning("图片名不能为空!");
-
     // const res = await A2_APIchangeImgName({
     //   id: isNameChange.id,
     //   fileName: isNameChange.newName,
     // });
-
     // if (res.code === 0) {
     //   MessageFu.success("修改图片名成功!");
     //   setFileList({
@@ -440,130 +412,108 @@ function ZupTypes(
     //   });
     //   isNameChangeXFu();
     // }
-  }, []);
+  }, [])
   //
 
   return (
-    <div
-      className={classNames(styles.ZupTypes, isLook ? styles.ZupTypesLook : "")}
-    >
+    <div className={classNames(styles.ZupTypes, isLook ? styles.ZupTypesLook : '')}>
       <input
-        id="upInput"
-        type="file"
+        id='upInput'
+        type='file'
         accept={
-          fileOneType === "img"
-            ? ".png,.jpg,.jpeg"
-            : fileOneType === "audio"
-            ? ".mp3"
-            : fileOneType === "model"
-            ? ".4dage"
-            : ".mp4"
+          fileOneType === 'img'
+            ? '.png,.jpg,.jpeg'
+            : fileOneType === 'audio'
+            ? '.mp3'
+            : fileOneType === 'model'
+            ? '.4dage'
+            : '.mp4'
         }
         ref={myInput}
-        onChange={(e) => handeUpPhoto2(e)}
+        onChange={e => handeUpPhoto2(e)}
       />
       <div hidden={isTypeShow}>
         <Checkbox.Group
           options={typeCheckArr}
           value={typeCheck}
-          onChange={(e) => setTypeCheck(e as string[])}
+          onChange={e => setTypeCheck(e as string[])}
         />
       </div>
 
       {/* -----------模型 */}
-      {resOneDivDom("model")}
+      {resOneDivDom('model')}
 
       {/* -----------图片 */}
-      <div className="ZTboxImgMain" hidden={!typeCheck.includes("img")}>
-        <div className="ZTboxImgBox">
-          <div className="ZTbox1" hidden={isTypeShow}>
+      <div className='ZTboxImgMain' hidden={!typeCheck.includes('img')}>
+        <div className='ZTboxImgBox'>
+          <div className='ZTbox1' hidden={isTypeShow}>
             <span> </span> 图片：
           </div>
 
-          <div
-            className="ZTbox1Img"
-            style={{ width: isTypeShow ? "100%" : "" }}
-          >
+          <div className='ZTbox1Img' style={{ width: isTypeShow ? '100%' : '' }}>
             <div
-              hidden={
-                (!!fileList.img.length && fileList.img.length >= imgLength) ||
-                isLook
-              }
-              className="ZTbox1ImgIcon"
-              onClick={() => upFileFu("img")}
+              hidden={(!!fileList.img.length && fileList.img.length >= imgLength) || isLook}
+              className='ZTbox1ImgIcon'
+              onClick={() => upFileFu('img')}
             >
               <PlusOutlined rev={undefined} />
             </div>
             {fileList.img.map((v, i) => (
               <div
-                className="ZTbox1ImgRow"
+                className='ZTbox1ImgRow'
                 key={v.id}
-                draggable="true"
+                draggable='true'
                 onDragStart={() => setDragImg(v)}
-                onDragOver={(e) => handleDragOver(e, v)}
-                onDragEnter={(e) => handleDragEnter(e, v)}
+                onDragOver={e => handleDragOver(e, v)}
+                onDragEnter={e => handleDragEnter(e, v)}
                 onDragEnd={() => setDragImg(null)}
               >
                 {v.thumb || v.filePath ? (
-                  <ImageLazy
-                    noLook={true}
-                    width={100}
-                    height={100}
-                    src={v.thumb || v.filePath}
-                  />
+                  <ImageLazy noLook={true} width={100} height={100} src={v.thumb || v.filePath} />
                 ) : null}
 
-                {oneIsCover && i === 0 ? (
-                  <div className="ZTbox1ImgRowCover">封面</div>
-                ) : null}
+                {oneIsCover && i === 0 ? <div className='ZTbox1ImgRowCover'>封面</div> : null}
 
                 {/* 修改图片名字 */}
                 {isUpName ? (
                   <div
                     title={v.imgName}
-                    className="ZTbox1ImgRowName"
+                    className='ZTbox1ImgRowName'
                     onClick={() => isNameChangeFu(v)}
                   >
                     {v.imgName}
                   </div>
                 ) : null}
 
-                <div className="ZTbox1ImgRowIcon">
+                <div className='ZTbox1ImgRowIcon'>
                   <EyeOutlined
                     onClick={() =>
                       store.dispatch({
-                        type: "layout/lookBigImg",
+                        type: 'layout/lookBigImg',
                         payload: {
                           url: baseURL + v.filePath,
-                          show: true,
-                        },
+                          show: true
+                        }
                       })
                     }
                     rev={undefined}
                   />
-                  <a
-                    href={baseURL + v.filePath}
-                    download
-                    target="_blank"
-                    rel="noreferrer"
-                  >
+                  <a href={baseURL + v.filePath} download target='_blank' rel='noreferrer'>
                     <DownloadOutlined rev={undefined} />
                   </a>
                 </div>
 
                 <MyPopconfirm
-                  txtK="删除"
+                  txtK='删除'
                   onConfirm={() => delImgListFu(v.id!)}
-                  Dom={
-                    <CloseOutlined className="ZTbox1ImgRowX" rev={undefined} />
-                  }
+                  Dom={<CloseOutlined className='ZTbox1ImgRowX' rev={undefined} />}
                 />
               </div>
             ))}
           </div>
         </div>
 
-        <div className="ZTboxTit" hidden={isLook}>
+        <div className='ZTboxTit' hidden={isLook}>
           {fileList.img.length && fileList.img.length >= 2 ? (
             <>
               按住鼠标可拖动图片调整顺序。
@@ -576,18 +526,13 @@ function ZupTypes(
       </div>
 
       {/* -----------音频 */}
-      {resOneDivDom("audio")}
+      {resOneDivDom('audio')}
 
       {/* -----------视频 */}
-      {resOneDivDom("video")}
+      {resOneDivDom('video')}
 
       {/* 最后的提示 */}
-      <div
-        className={classNames(
-          "ZcheckTxt",
-          fileCheck && fileCheckFu ? "ZcheckTxtAc" : ""
-        )}
-      >
+      <div className={classNames('ZcheckTxt', fileCheck && fileCheckFu ? 'ZcheckTxtAc' : '')}>
         请最少上传一张图片!
       </div>
 
@@ -596,45 +541,45 @@ function ZupTypes(
         <Modal
           wrapClassName={styles.ZupTypesMo}
           open={true}
-          title="修改展品图片名称"
+          title='修改展品图片名称'
           footer={
             [] // 设置footer为空，去掉 取消 确定默认按钮
           }
         >
           <br />
-          <div className="ZupTypesMoRow">
+          <div className='ZupTypesMoRow'>
             <strong>当前名：</strong>
             {isNameChange.oldName}
           </div>
-          <div className="ZupTypesMoRow">
+          <div className='ZupTypesMoRow'>
             <br />
             <strong>修改为：</strong>
             <Input
               style={{ width: 400 }}
-              placeholder="请输入图片名"
+              placeholder='请输入图片名'
               maxLength={50}
               showCount
               value={isNameChange.newName}
-              onChange={(e) => {
+              onChange={e => {
                 setIsNameChange({
                   ...isNameChange,
-                  newName: e.target.value.replace(/\s+/g, ""),
-                });
+                  newName: e.target.value.replace(/\s+/g, '')
+                })
               }}
             />
           </div>
 
-          <div className="ZupTypesMoBtn">
+          <div className='ZupTypesMoBtn'>
             <Button onClick={isNameChangeXFu}>取消</Button>
             &emsp;
-            <Button type="primary" onClick={isNameChangeOkFu}>
+            <Button type='primary' onClick={isNameChangeOkFu}>
               修改
             </Button>
           </div>
         </Modal>
       ) : null}
     </div>
-  );
+  )
 }
 
-export default forwardRef(ZupTypes);
+export default forwardRef(ZupTypes)

src/pages/A1manage/A1add/index.tsx

@@ -236,7 +236,7 @@ function A1add({
             <Input
               readOnly={editInfo.txt === '查看'}
               placeholder='请输入内容'
-              maxLength={20}
+              maxLength={50}
               showCount
             />
           </Form.Item>

src/types/declaration.d.ts

@@ -1,8 +1,9 @@
-declare module "history";
-declare module "*.scss";
-declare module "*.png";
-declare module "*.jpg";
-declare module "*.gif";
-declare module "*.svg";
-declare module "js-export-excel";
-declare module 'braft-utils';
+declare module 'history'
+declare module '*.scss'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.gif'
+declare module '*.svg'
+declare module 'js-export-excel'
+declare module 'braft-utils'
+declare const isBookIdShow: boolean

src/utils/tableData.ts

@@ -14,7 +14,7 @@
 //     ["text", "创建日期",'description', 50,A],
 //   ];
 
-export const A1tableC = [
+const A1tableCTemp = [
   ['txt', '书名', 'name'],
   ['img', '封面', 'thumb'],
   ['txt', '作者', 'author'],
@@ -27,6 +27,8 @@ export const A1tableC = [
   ['txt', '编辑时间', 'updateTime']
 ]
 
+export const A1tableC = isBookIdShow ? [['txt', 'bookId', 'id'], ...A1tableCTemp] : A1tableCTemp
+
 export const A1tableCimp = [
   ['txt', '书名', 'name'],
   ['img', '封面(png、jpg)', 'thumb', `<span class='tabx'>(待填入)</span>`],