Merge branch 'master' of http://gogs.gisvg.com/YDM/museums-ui

Signed-off-by: wwj <2760333092@qq.com>

package.json

@@ -49,8 +49,10 @@
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.8.0",
     "fast-xml-parser": "^4.3.2",
+    "file-saver": "^2.0.5",
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
+    "jszip": "^3.10.1",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "markmap-common": "^0.16.0",

src/api/museums/photos/index.ts

@@ -12,7 +12,7 @@ export interface PhotosVO {
 export const PhotosApi = {
   // 查询博物馆照片分页
   getPhotosPage: async (params: any) => {
-    return await request.get({ url: `/photosmanage/photos/photos`, params })
+    return await request.get({ url: `/photosmanage/photos/page`, params })
   },
 
   // 查询博物馆照片详情

src/views/museums/photogroup/PhotosForm.vue

@@ -12,7 +12,7 @@
 <!--        <el-input v-model="formData.groupId" placeholder="请输入照片组表id" />-->
 <!--      </el-form-item>-->
       <el-form-item label="照片" prop="photoUrl">
-        <UploadImg v-model="formData.photoUrl" />
+        <UploadImgs v-model="formData.photoUrl" :limit="10"/>
       </el-form-item>
 <!--      <el-form-item label="上传时间" prop="createdAt">-->
 <!--        <el-date-picker-->
@@ -39,7 +39,6 @@ defineOptions({ name: 'PhotosForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const loading = ref(true) // 列表的加载中
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -47,12 +46,12 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   groupId: undefined,
-  photoUrl: undefined,
+  photoUrl: [],
   createdAt: undefined
 })
 const formRules = reactive({
   groupId: [{ required: true, message: '照片组表id不能为空', trigger: 'blur' }],
-  photoUrl: [{ required: true, message: '照片存储路径不能为空', trigger: 'blur' }]
+  photoUrl: [{ required: true, message: '请等待照片上传成功', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const zpid=ref()
@@ -77,27 +76,26 @@ const submitForm = async () => {
     formData.value.groupId=zpid.value
     const data = formData.value as unknown as PhotosVO
     console.log('zpid.value',zpid.value,'data',data)
-    if (formType.value === 'create') {
       await PhotosApi.createPhotos(data)
+    console.log('data1',data)
       message.success(t('common.createSuccess'))
-    } else {
-      await PhotosApi.updatePhotos(data)
-      message.success(t('common.updateSuccess'))
-    }
+      console.log('data2',data)
     dialogVisible.value = false
+    console.log('dialogVisible',dialogVisible.value)
     // 发送操作成功的事件
     emit('success')
+  }  catch (error) {
+    console.error('提交失败', error)
   } finally {
     formLoading.value = false
   }
 }
-
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
     groupId: undefined,
-    photoUrl: undefined,
+    photoUrl: [],
     createdAt: undefined
   }
   formRef.value?.resetFields()

src/views/museums/photogroup/PhotosIndex.vue

@@ -56,7 +56,7 @@
           @click="openForm('create',zuid)"
           v-hasPermi="['museums:photos:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon icon="ep:plus" class="mr-5px" /> 新增照片
         </el-button>
 
         <el-button
@@ -66,7 +66,7 @@
           :loading="exportLoading"
           v-hasPermi="['museums:photos:export']"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon icon="ep:download" class="mr-5px" /> 批量导出照片
         </el-button>
       </el-form-item>
     </el-form>
@@ -75,8 +75,9 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="序号" align="center" prop="id" />
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"  @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="id" align="center" prop="id" width="55" />
 <!--      <el-table-column label="照片id" align="center" prop="groupId" />-->
       <el-table-column label="照片" align="center" prop="photoUrl" >
         <template #default="{ row }">
@@ -94,30 +95,7 @@
           />
         </template>
       </el-table-column>
-<!--      <el-table-column label="照片" align="center" prop="url" width="110px">-->
-<!--&lt;!&ndash;        #default="{ row }"->-->
-<!--          <el-image-->
-<!--&lt;!&ndash;            v-if="scope.row.photoUrl"&ndash;&gt;-->
-<!--            class="h-80px w-80px"-->
-<!--            lazy-->
-<!--            :src="scope.row.photoUrl"-->
-<!--            :preview-src-list="[scope.row.photoUrl]"-->
-<!--            preview-teleported-->
-<!--            fit="cover"-->
-<!--          />-->
-<!--&lt;!&ndash;          <el-link&ndash;&gt;-->
-<!--            v-else-if="url.includes('pdf')"-->
-<!--            type="primary"-->
-<!--            :href="url"-->
-<!--            :underline="false"-->
-<!--            target="_blank"-->
-<!--          >预览</el-link-->
-<!--          >-->
-<!--          <el-link v-else type="primary" download :href="url" :underline="false" target="_blank"-->
-<!--          >下载</el-link-->
-<!--          >-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+
       <el-table-column
         label="上传时间"
         align="center"
@@ -134,14 +112,13 @@
       />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
-<!--          <el-button-->
-<!--            link-->
-<!--            type="primary"-->
-<!--            @click="openForm('update', scope.row.id)"-->
-<!--            v-hasPermi="['museums:photos:update']"-->
-<!--          >-->
-<!--            编辑-->
-<!--          </el-button>-->
+          <el-button
+            link
+            type="success"
+            @click="handleDownload(scope.row.photoUrl)"
+          >
+            下载
+          </el-button>
           <el-button
             link
             type="danger"
@@ -150,6 +127,7 @@
           >
             删除
           </el-button>
+
         </template>
       </el-table-column>
     </el-table>
@@ -173,8 +151,9 @@ import download from '@/utils/download'
 import { PhotosApi, } from '@/api/museums/photos'
 import PhotosForm from './PhotosForm.vue'
 import {ref} from "vue";
-import SpecimenImportForm from "@/views/museums/specimeninfo/SpecimenImportForm.vue";
-
+import { useRoute} from 'vue-router';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
 /** 博物馆照片 列表 */
 defineOptions({ name: 'Photos' })
 const {query} = useRoute() // 查询参数
@@ -196,19 +175,19 @@ const zuid =ref( queryParams.groupId)
 
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const selectedPhotos = ref<any[]>([]) // 选中的照片
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
     const data = await PhotosApi.getPhotosPage(queryParams)
-    list.value = data
-    //total.value = data.total
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
 }
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -241,7 +220,10 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-
+/** 处理选中变化 */
+const handleSelectionChange = (selection: any[]) => {
+  selectedPhotos.value = selection
+}
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -249,13 +231,39 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await PhotosApi.exportPhotos(queryParams)
-    download.excel(data, '博物馆照片.xls')
+
+    if (selectedPhotos.value.length === 0) {
+      message.warning('请选择要导出的照片')
+      return
+    }
+
+    const zip = new JSZip();
+    const promises = selectedPhotos.value.map(async (photo) => {
+      const response = await fetch(photo.photoUrl);
+      const blob = await response.blob();
+      zip.file(`${photo.id}.jpg`, blob);
+    });
+
+    await Promise.all(promises);
+
+    const content = await zip.generateAsync({ type: 'blob' });
+    saveAs(content, '选中的照片.zip');
   } catch {
+    message.error('导出失败')
   } finally {
     exportLoading.value = false
   }
 }
+/** 下载图片 */
+const handleDownload = async (photoUrl: string) => {
+  try {
+    const response = await fetch(photoUrl)
+    const blob = await response.blob()
+    saveAs(blob, '照片.jpg')
+  } catch {
+    message.error('下载失败')
+  }
+}
 
 /** 初始化 **/
 onMounted(() => {