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

src/views/museums/museumsdocument/DocumentForm.vue

@@ -1,106 +1,49 @@
+
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
+  <Dialog v-model="dialogVisible" title="上传文件">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="importUrl + '?another=' + 1"
+      :auto-upload="false"
+      :data="data"
+      :disabled="formLoading"
+      :limit="1"
       :on-change="handleFileChange"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
       :on-success="submitFormSuccess"
-      :action="uploadUrl"
-      :http-request="httpRequest"
+      drag
+      :headers="uploadHeaders"
     >
-      <el-form-item label="文件名称" prop="fileName">
-        <el-input v-model="formData.fileName" placeholder="请输入文件名称" />
-      </el-form-item>
-      <el-form-item label="配置编号" prop="configId">
-        <el-input v-model="formData.configId" placeholder="请输入配置编号" />
-      </el-form-item>
-      <el-form-item label="路径" prop="path">
-        <el-input v-model="formData.path" placeholder="请输入路径" />
-      </el-form-item>
-      <el-form-item label="文件 URL" prop="url">
-        <UploadFile v-model="formData.url" />
-      </el-form-item>
-      <el-form-item label="文件大小（字节）" prop="fileSize">
-        <el-input v-model="formData.fileSize" placeholder="请输入文件大小（字节）" />
-      </el-form-item>
-      <el-form-item label="文件类型" prop="fileType">
-        <el-select v-model="formData.fileType" placeholder="请选择文件类型">
-          <el-option label="请选择字典生成" value="" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="上传时间" prop="uploadDate">
-        <el-date-picker
-          v-model="formData.uploadDate"
-          type="date"
-          value-format="x"
-          placeholder="选择上传时间"
-        />
-      </el-form-item>
-      <el-form-item label="上传者" prop="uploadedBy">
-        <el-input v-model="formData.uploadedBy" placeholder="请输入上传者" />
-      </el-form-item>
-    </el-form>
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
+    </el-upload>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitFileForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
-//import { DocumentApi, DocumentVO } from '@/api/museums/museumsdocument'
+<script lang="ts" setup>
 import { useUpload } from '@/components/UploadFile/src/useUpload'
-/** 博物馆文件管理 表单 */
-defineOptions({ name: 'DocumentForm' })
-const fileList = ref([]) // 文件列表
+import {getAccessToken} from "@/utils/auth";
+
+defineOptions({ name: 'InfraFileForm' })
+
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const data = ref({ path: '' })
+
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-// const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const { uploadUrl, httpRequest } = useUpload()
+const formLoading = ref(false) // 表单的加载中
+const fileList = ref([]) // 文件列表
+const data = ref({ path: '' })
 const uploadRef = ref()
-const formData = ref({
-  id: undefined,
-  fileName: undefined,
-  configId: undefined,
-  path: undefined,
-  url: undefined,
-  fileSize: undefined,
-  fileType: undefined,
-  uploadDate: undefined,
-  uploadedBy: undefined
-})
-const formRules = reactive({
-  fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
-  path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
-  url: [{ required: true, message: '文件 URL不能为空', trigger: 'blur' }],
-  fileSize: [{ required: true, message: '文件大小（字节）不能为空', trigger: 'blur' }],
-  uploadedBy: [{ required: true, message: '上传者不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 打开弹窗 */
-// const open = async (type: string, id?: number) => {
-//   dialogVisible.value = true
-//   dialogTitle.value = t('action.' + type)
-//   formType.value = type
-//   resetForm()
-//   // 修改时，设置数据
-//   if (id) {
-//     formLoading.value = true
-//     try {
-//       formData.value = await DocumentApi.getDocument(id)
-//     } finally {
-//       formLoading.value = false
-//     }
-//   }
-// }
 
+const { uploadUrl, httpRequest } = useUpload()
+const importUrl =
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/museums-upload'
 
 /** 打开弹窗 */
 const open = async () => {
@@ -109,19 +52,22 @@ const open = async () => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-
 /** 处理上传的文件发生变化 */
 const handleFileChange = (file) => {
   data.value.path = file.name
 }
-
+const uploadHeaders = ref() // 上传 Header 头
 /** 提交表单 */
-const submitForm = () => {
+const submitFileForm = () => {
   if (fileList.value.length == 0) {
     message.error('请上传文件')
     return
   }
-  unref(uploadRef)?.submit()
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
 }
 
 /** 文件上传成功处理 */
@@ -136,43 +82,21 @@ const submitFormSuccess = () => {
   emit('success')
 }
 
-// /** 提交表单 */
-// const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-// const submitForm = async () => {
-//   // 校验表单
-//   await formRef.value.validate()
-//   // 提交请求
-//   formLoading.value = true
-//   try {
-//     const data = formData.value as unknown as DocumentVO
-//     if (formType.value === 'create') {
-//       await DocumentApi.createDocument(data)
-//       message.success(t('common.createSuccess'))
-//     } else {
-//       await DocumentApi.updateDocument(data)
-//       message.success(t('common.updateSuccess'))
-//     }
-//     dialogVisible.value = false
-//     // 发送操作成功的事件
-//     emit('success')
-//   } finally {
-//     formLoading.value = false
-//   }
-// }
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
 
 /** 重置表单 */
 const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    fileName: undefined,
-    configId: undefined,
-    path: undefined,
-    url: undefined,
-    fileSize: undefined,
-    fileType: undefined,
-    uploadDate: undefined,
-    uploadedBy: undefined
-  }
-  formRef.value?.resetFields()
+  // 重置上传状态和文件
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
 }
 </script>

src/views/museums/museumsdocument/index.vue

@@ -112,14 +112,28 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="序号" align="center" prop="id" />
-      <el-table-column label="文件名称" align="center" prop="fileName" />
+    <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="80px"/>
+      <el-table-column label="文件名称" align="center" prop="name" />
 <!--      <el-table-column label="配置编号" align="center" prop="configId" />-->
-      <el-table-column label="路径" align="center" prop="path" />
+<!--      <el-table-column label="路径" align="center" prop="path" />-->
       <el-table-column label="文件 URL" align="center" prop="url" />
-      <el-table-column label="文件大小" align="center" prop="fileSize" />
-      <el-table-column label="文件类型" align="center" prop="fileType" />
+      <el-table-column
+        label="文件大小"
+        align="center"
+        prop="size"
+        width="100"
+        :formatter="fileSizeFormatter"
+      />
+      <el-table-column label="文件类型" align="center" prop="type" width="180px" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
       <el-table-column label="文件内容" align="center" prop="url" >
         <template #default="{ row }">
           <el-image
@@ -152,23 +166,17 @@
 <!--        width="180px"-->
 <!--      />-->
 <!--      <el-table-column label="上传者" align="center" prop="uploadedBy" />-->
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center" min-width="120px">
+
+      <el-table-column label="操作" align="center" >
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['museums:document:update']"
-          >
-            编辑
-          </el-button>
+<!--          <el-button-->
+<!--            link-->
+<!--            type="primary"-->
+<!--            @click="openForm('update', scope.row.id)"-->
+<!--            v-hasPermi="['museums:document:update']"-->
+<!--          >-->
+<!--            编辑-->
+<!--          </el-button>-->
           <el-button
             link
             type="danger"
@@ -199,7 +207,11 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DocumentApi, DocumentVO } from '@/api/museums/museumsdocument'
 import DocumentForm from './DocumentForm.vue'
-
+import {fileSizeFormatter} from "@/utils";
+import { useRoute} from 'vue-router';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import {ref} from "vue";
 /** 博物馆文件管理 列表 */
 defineOptions({ name: 'MuseumsDocument' })
 
@@ -224,7 +236,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-
+const selectedPhotos = ref<any[]>([]) // 选中的文件
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -269,6 +281,12 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+
+/** 处理选中变化 */
+const handleSelectionChange = (selection: any[]) => {
+  selectedPhotos.value = selection
+  console.log("selectedPhotos.value",selectedPhotos.value)
+}
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -276,14 +294,31 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await DocumentApi.exportDocument(queryParams)
-    download.excel(data, '博物馆文件管理.xls')
+
+    if (selectedPhotos.value.length === 0) {
+      message.warning('请勾选要导出的文件')
+      return
+    }
+
+    const zip = new JSZip();
+    const promises = selectedPhotos.value.map(async (photo) => {
+      console.log("photo",photo)
+      const response = await fetch(photo.url);
+      const blob = await response.blob();
+      const extension = photo.url.split('.').pop() // 获取文件扩展名
+      zip.file(`${photo.id}.${extension}`, blob)
+    });
+
+    await Promise.all(promises);
+
+    const content = await zip.generateAsync({ type: 'blob' });
+    saveAs(content, '选中的文件.zip');
   } catch {
+    message.error('导出失败')
   } finally {
     exportLoading.value = false
   }
 }
-
 /** 初始化 **/
 onMounted(() => {
   getList()

src/views/museums/photogroup/ImageImportForm .vue

@@ -68,7 +68,7 @@
 import { useUpload } from "@/components/UploadFile/src/useUpload";
 import { getAccessToken } from "@/utils/auth";
 const importUrl =
-  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/photosmanage/photo-group/create'
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/photosmanage/photo-group/import-package'
 defineOptions({ name: 'imageImportForm' })
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题

src/views/museums/photogroup/PhotosIndex.vue

@@ -127,7 +127,6 @@
           >
             删除
           </el-button>
-
         </template>
       </el-table-column>
     </el-table>
@@ -233,7 +232,7 @@ const handleExport = async () => {
     exportLoading.value = true
 
     if (selectedPhotos.value.length === 0) {
-      message.warning('请选择要导出的照片')
+      message.warning('请勾选要导出的照片')
       return
     }
 
@@ -241,7 +240,8 @@ const handleExport = async () => {
     const promises = selectedPhotos.value.map(async (photo) => {
       const response = await fetch(photo.photoUrl);
       const blob = await response.blob();
-      zip.file(`${photo.id}.jpg`, blob);
+      const extension = photo.photoUrl.split('.').pop() // 获取文件扩展名
+      zip.file(`${photo.id}.${extension}`, blob)
     });
 
     await Promise.all(promises);
@@ -259,7 +259,8 @@ const handleDownload = async (photoUrl: string) => {
   try {
     const response = await fetch(photoUrl)
     const blob = await response.blob()
-    saveAs(blob, '照片.jpg')
+    const extension = photoUrl.split('.').pop() // 获取文件扩展名
+    saveAs(blob, `照片.${extension}`)
   } catch {
     message.error('下载失败')
   }