shaogen1995 1 mese fa
parent
commit
f9e1a6d8d3

+ 10 - 0
后台管理/src/components/MyTable/index.tsx

@@ -106,6 +106,16 @@ function MyTable({
             />
           </div>
         ),
+        img2: (item: any) => (
+          <div className='tableImgAuto'>
+            <ImageLazy
+              width={60}
+              height={60}
+              src={item[v[2]] || item.thumb2}
+              srcBig={item.thumb2Pc}
+            />
+          </div>
+        ),
         txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || v[4] || isNull,
         text: (item: any) => {
           let tempCom: any = item[v[2]] || isNull

+ 57 - 24
后台管理/src/components/ZupTypes/index.tsx

@@ -46,6 +46,7 @@ type Props = {
   isUpName?: boolean //是否能修改图片名字
   lastImgTxt?: string //加载最后面的上传提示
   oneIsCover?: boolean //是否将第一张作为封面
+  multipleImg?: boolean // 新增参数:是否支持多张图片同时上传
 }
 
 function ZupTypes(
@@ -64,7 +65,8 @@ function ZupTypes(
     isTypeShow = false,
     isUpName = false,
     lastImgTxt = '',
-    oneIsCover = false
+    oneIsCover = false,
+    multipleImg = false
   }: Props,
   ref: any
 ) {
@@ -127,10 +129,24 @@ function ZupTypes(
   // 上传附件的处理函数
   const handeUpPhoto2 = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files) {
-        // 拿到files信息
-        const filesInfo = e.target.files[0]
+      if (!e.target.files || e.target.files.length === 0) return
+
+      // 新增:多选模式下获取所有文件 [2,6](@ref)
+      let files =
+        multipleImg && fileOneType === 'img' ? Array.from(e.target.files) : [e.target.files[0]]
+
+      // 新增:检查图片数量限制 [4](@ref)
+      if (fileOneType === 'img' && multipleImg) {
+        const remainingSlots = imgLength - fileList.img.length
+        if (files.length > remainingSlots) {
+          MessageFu.warning(`最多还能上传${remainingSlots}张图片`)
+          files = files.slice(0, remainingSlots)
+        }
+      }
 
+      // 批量处理文件 [4](@ref)
+      for (const file of files) {
+        // 原有的校验逻辑(格式、大小等)保持不变...
         let anType = ['image/jpeg', 'image/png']
         let anTit1 = '只支持png、jpg格式!'
         let anTit2 = `最大支持${imgSize}M!`
@@ -155,62 +171,78 @@ function ZupTypes(
 
         // 校验格式
         if (fileOneType !== 'model') {
-          if (!anType.includes(filesInfo.type)) {
+          if (!anType.includes(file.type)) {
             e.target.value = ''
             return MessageFu.warning(anTit1)
           }
         } else {
-          if (!filesInfo.name.includes('.4dage')) {
+          if (!file.name.includes('.4dage')) {
             e.target.value = ''
             return MessageFu.warning(anTit1)
           }
         }
 
         // 校验大小
-        if (filesInfo.size > anSize) {
+        if (file.size > anSize) {
           e.target.value = ''
           return MessageFu.warning(anTit2)
         }
-        // 创建FormData对象
+        // 创建FormData
         const fd = new FormData()
-        // 把files添加进FormData对象(‘photo’为后端需要的字段)
         fd.append('type', fileOneType)
         fd.append('dirCode', dirCode)
         fd.append('isDb', 'true')
-
         //初始图片 fileName为:未命名
         if (isUpName) {
           fd.append('isDefaultName', 'false')
         }
 
-        fd.append('file', filesInfo)
+        fd.append('file', file)
 
-        if (fileOneType === 'img' && filesInfo.size > 1 * 1024 * 1024) {
+        if (fileOneType === 'img' && file.size > 1 * 1024 * 1024) {
           // 开启压缩图片
           fd.append('isCompress', 'true')
         }
 
         e.target.value = ''
 
-        const res = await API_upFile(fd, myUrl)
-
         try {
+          const res = await API_upFile(fd, myUrl)
           if (res.code === 0) {
-            MessageFu.success('上传成功!')
-            if (fileOneType === 'img')
-              setFileList({
-                ...fileList,
-                img: [...fileList.img, { ...res.data, imgName: '未命名' }]
-              })
-            else setFileList({ ...fileList, [fileOneType]: res.data })
+            MessageFu.success(
+              `上传成功${files.length > 1 ? `(${files.indexOf(file) + 1}/${files.length})` : ''}`
+            )
+
+            // 更新状态
+            if (fileOneType === 'img') {
+              setFileList(prev => ({
+                ...prev,
+                img: [...prev.img, { ...res.data, imgName: '未命名' }]
+              }))
+            } else {
+              setFileList(prev => ({ ...prev, [fileOneType]: res.data }))
+            }
+            fileDomInitialFu()
           }
-          fileDomInitialFu()
         } catch (error) {
+          // 错误处理
           fileDomInitialFu()
         }
       }
     },
-    [audioSize, dirCode, fileList, fileOneType, imgSize, isUpName, modelSize, myUrl, videoSize]
+    [
+      audioSize,
+      dirCode,
+      fileList.img.length,
+      fileOneType,
+      imgLength,
+      imgSize,
+      isUpName,
+      modelSize,
+      multipleImg,
+      myUrl,
+      videoSize
+    ]
   )
 
   // 附件图片的拖动
@@ -436,6 +468,7 @@ function ZupTypes(
         }
         ref={myInput}
         onChange={e => handeUpPhoto2(e)}
+        multiple={fileOneType === 'img' && multipleImg}
       />
       <div hidden={isTypeShow}>
         <Checkbox.Group
@@ -526,7 +559,7 @@ function ZupTypes(
             </>
           ) : null}
           {oneIsCover ? '第一张为封面图;' : ''} 支持png、jpg的图片格式;最大支持{imgSize}
-          M;最多支持{imgLength}张。
+          M;最多支持{imgLength}张。{multipleImg ? '按住Ctrl可一次性选择多张图片上传' : ''}
           {lastImgTxt}
         </div>
       </div>

+ 2 - 1
后台管理/src/pages/A1record/A1edit/index.module.scss

@@ -16,7 +16,8 @@
     .A1Emain {
       width: calc(100% - 100px);
       height: 620px;
-      overflow: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
       padding-top: 10px;
       .ant-form-item-label {
         width: 81px;

+ 32 - 2
后台管理/src/pages/A1record/A1edit/index.tsx

@@ -33,6 +33,7 @@ function A1edit({ sInfo, closeFu, upTableFu }: Props) {
 
   // 封面图的ref
   const ZupThumbRef = useRef<any>(null)
+  const ZupThumbRef2 = useRef<any>(null)
 
   // 编辑进来获取详情
   const getInfoFu = useCallback(() => {
@@ -52,6 +53,11 @@ function A1edit({ sInfo, closeFu, upTableFu }: Props) {
       filePath: sInfo.thumbPc,
       thumb: sInfo.thumb
     })
+    ZupThumbRef2.current?.setFileComFileFu({
+      fileName: '',
+      filePath: sInfo.thumb2Pc,
+      thumb: sInfo.thumb2
+    })
   }, [sInfo])
 
   useEffect(() => {
@@ -65,6 +71,7 @@ function A1edit({ sInfo, closeFu, upTableFu }: Props) {
   const onFinish = useCallback(
     async (values: any) => {
       const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
+      const coverUrl2 = ZupThumbRef2.current?.fileComFileResFu()
       // 没有传 封面图
       // if (!coverUrl1.filePath) return MessageFu.warning('请上传封面图')
 
@@ -86,7 +93,9 @@ function A1edit({ sInfo, closeFu, upTableFu }: Props) {
         city,
         region,
         thumb: coverUrl1.thumb || '',
-        thumbPc: coverUrl1.filePath || ''
+        thumbPc: coverUrl1.filePath || '',
+        thumb2: coverUrl2.thumb || '',
+        thumb2Pc: coverUrl2.filePath || ''
       }
 
       // if (1 + 1 === 2) {
@@ -188,7 +197,7 @@ function A1edit({ sInfo, closeFu, upTableFu }: Props) {
 
           <div className='A1ERow'>
             <div className='formRow'>
-              <div className='formLeft'>封面图:</div>
+              <div className='formLeft'>封面图1:</div>
               <div className='formRight'>
                 <ZupOne
                   ref={ZupThumbRef}
@@ -225,6 +234,27 @@ function A1edit({ sInfo, closeFu, upTableFu }: Props) {
             </div>
           </div>
 
+          <div className='A1ERow'>
+            <div className='formRow'>
+              <div className='formLeft'>封面图2:</div>
+              <div className='formRight'>
+                <ZupOne
+                  ref={ZupThumbRef2}
+                  isLook={false}
+                  fileCheck={false}
+                  size={5}
+                  dirCode='A1record'
+                  myUrl='cms/bridge/upload'
+                  format={['image/jpeg', 'image/png']}
+                  formatTxt='png、jpg和jpeg'
+                  checkTxt='请上传封面图'
+                  upTxt='最多1张'
+                  myType='thumb'
+                />
+              </div>
+            </div>
+          </div>
+
           {/* 确定和取消按钮 */}
           <Form.Item className='A1EBtn'>
             <Button type='primary' htmlType='submit'>

+ 1 - 1
后台管理/src/pages/A1record/A1look/index.module.scss

@@ -35,7 +35,7 @@
         .A1LrowImg {
           width: 220px;
           display: flex;
-          justify-content: center;
+          justify-content: space-between;
           align-items: center;
         }
         .A1LrowBox {

+ 8 - 2
后台管理/src/pages/A1record/A1look/index.tsx

@@ -111,11 +111,17 @@ function A1look({ sId, closeFu }: Props) {
 
               <div className='A1LrowImg'>
                 <ImageLazy
-                  width={200}
-                  height={200}
+                  width={100}
+                  height={100}
                   src={info.thumb || info.thumbPc}
                   srcBig={info.thumbPc || info.thumb}
                 />
+                <ImageLazy
+                  width={100}
+                  height={100}
+                  src={info.thumb2 || info.thumb2Pc}
+                  srcBig={info.thumb2Pc || info.thumb2}
+                />
               </div>
             </div>
           ) : null}

+ 1 - 0
后台管理/src/pages/A1record/A1tab1introduce/A1T1add/index.tsx

@@ -88,6 +88,7 @@ function A1T1add({ sInfo, closeFu, upSonFu }: Props) {
           <div className='formLeft'>图片:</div>
           <div className='formRight formRight2'>
             <ZupTypes
+              multipleImg={true}
               ref={ZupImgsRef}
               isLook={false}
               fileCheck={false}

+ 1 - 0
后台管理/src/pages/A1record/A1tab1introduce/index.tsx

@@ -53,6 +53,7 @@ function A1tab1introduce({ sInfo, upInfoFu }: Props) {
                 '(空)'
               ) : (
                 <ZupTypes
+                  multipleImg={true}
                   ref={ZupImgsRef}
                   isLook={true}
                   fileCheck={false}

+ 2 - 0
后台管理/src/pages/A1record/data.ts

@@ -16,6 +16,8 @@ export type A1ListType = {
   sort: number
   thumb: string
   thumbPc: string
+  thumb2: string
+  thumb2Pc: string
   type: string
   updateTime: string
   videoIds: string

+ 1 - 1
后台管理/src/pages/A2disease/index.tsx

@@ -54,7 +54,7 @@ function A2disease() {
   // 点击查看
   const lookKK = useCallback((code: string) => {
     window.open(
-      `${envFlag ? 'https://sit-yunnanguqiao.4dage.com' : ''}/scene/index.html/#/?m=${code}`,
+      `${envFlag ? 'https://sit-yunnanguqiao.4dage.com' : ''}/scene/#/?m=${code}`,
       '_blank'
     )
   }, [])

+ 2 - 2
后台管理/src/utils/http.ts

@@ -7,8 +7,8 @@ import { domShowFu } from './domShow'
 
 export const envFlag = process.env.NODE_ENV === 'development'
 
-// const baseUrlTemp = 'https://sit-yunnanguqiao.4dage.com' // 测试环境
-const baseUrlTemp = 'http://192.168.20.61:8105' // 线下环境
+const baseUrlTemp = 'https://sit-yunnanguqiao.4dage.com' // 测试环境
+// const baseUrlTemp = 'http://192.168.20.61:8105' // 线下环境
 
 const baseFlag = baseUrlTemp.includes('https://')
 

+ 2 - 1
后台管理/src/utils/tableData.ts

@@ -16,7 +16,8 @@
 
 export const A1tableC = [
   ['txt', '古桥名称', 'name'],
-  ['img', '封面图', 'thumb'],
+  ['img', '封面图1', 'thumb'],
+  ['img2', '封面图2', 'thumb2'],
   ['txt', '建造年代', 'age'],
   ['txt', '结构形式', 'type'],
   ['txt', '所属乡镇', 'villageName'],