From 70ba12e9432a1b5772676020d9e68900f325029f Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Fri, 15 Aug 2025 23:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../xg/xgss/holidayStay/holidayStay/index.vue | 580 +++++++++++++++++-
 1 file changed, 577 insertions(+), 3 deletions(-)

diff --git a/web/src/views/xg/xgss/holidayStay/holidayStay/index.vue b/web/src/views/xg/xgss/holidayStay/holidayStay/index.vue
index fcb6b82e..a5f5b462 100644
--- a/web/src/views/xg/xgss/holidayStay/holidayStay/index.vue
+++ b/web/src/views/xg/xgss/holidayStay/holidayStay/index.vue
@@ -471,8 +471,79 @@
           <el-input v-model="form.stayReason" type="textarea" placeholder="请输入留宿原因" :rows="3" />
         </el-form-item>
 
-        <el-form-item label="附件OSS文件ID" prop="attachmentOssIds">
-          <el-input v-model="form.attachmentOssIds" type="textarea" placeholder="多个文件ID用逗号分隔" :rows="2" />
+        <el-form-item label="上传附件">
+          <div class="attachment-upload-container">
+            <el-upload
+              :file-list="attachmentList"
+              class="upload-demo"
+              drag
+              list-type="picture-card"
+              :on-preview="handleFilePreview"
+              :action="uploadAction"
+              :headers="uploadHeaders"
+              :data="uploadData"
+              :auto-upload="true"
+              :before-upload="handleBeforeUpload"
+              :on-success="handleUploadSuccess"
+              :on-error="handleUploadError"
+              :on-remove="handleRemoveAttachmentConfirm"
+              :on-change="handleFileChange"
+              multiple
+              :limit="15"
+              :show-file-list="true"
+              accept="image/*,video/*,.pdf,.doc,.docx,.txt"
+            >
+              <template #tip>
+                <div class="el-upload__tip">
+                  支持图片、视频、PDF、Word文档等格式，单个文件大小不超过10MB，最多上传15个文件。
+                  <span class="el-upload__tip" v-if="!form.id" style="color: #ff0000">（新增时文件会立即上传，保存留宿申请后自动关联）</span>
+                  <span class="el-upload__tip" v-else style="color: #ff0000">（编辑时文件会立即上传并关联到当前留宿申请）</span>
+                </div>
+              </template>
+
+              <!-- 调整拖拽上传图标与文字在同一行、居中对齐 -->
+              <div class="el-upload-dragger1">
+                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              </div>
+
+              <!-- 自定义文件卡片缩略图（含文件名） -->
+              <template #file="{ file }">
+                <div class="upload-file-card">
+                  <!-- 缩略图区域 -->
+                  <div class="upload-file-thumb">
+                    <image-preview v-if="isImageFile(file) && file.url" :src="getFileOssId(file)" class="upload-thumb-image" :isOssId="true" />
+                    <div v-else class="upload-file-placeholder">
+                      <el-icon><Document /></el-icon>
+                      <span class="file-ext">{{ getFileExt(file.name) }}</span>
+                    </div>
+                    <!-- loading 遮罩只在上传中显示 -->
+                    <div v-if="file.status === 'uploading'" class="upload-file-loading">
+                      <el-icon class="is-loading"><Loading /></el-icon>
+                      <span class="loading-text">上传中...</span>
+                    </div>
+                  </div>
+
+                  <!-- 文件名称 -->
+                  <div class="upload-file-name" :title="file.name">
+                    {{ getShortFileName(file.name) }}
+                  </div>
+
+                  <!-- 操作按钮区域 - 固定在文件名下方 -->
+                  <div class="upload-file-card-actions" v-if="file.status && file.status !== 'ready'">
+                    <el-button-group size="small">
+                      <el-button type="success" @click.stop="handleDownloadAttachment(file)" title="下载" :disabled="file.status !== 'success'">
+                        <el-icon><Download /></el-icon>
+                      </el-button>
+                      <el-button type="danger" @click.stop="handleRemoveAttachmentConfirm(file)" title="删除">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </el-button-group>
+                  </div>
+                </div>
+              </template>
+            </el-upload>
+          </div>
         </el-form-item>
 
         <el-form-item label="备注信息" prop="remark">
@@ -490,7 +561,14 @@
 </template>
 
 <script setup name="HolidayStay" lang="ts">
-import { ref, reactive, toRefs, onMounted, getCurrentInstance, ComponentInternalInstance } from 'vue';
+import { ref, reactive, toRefs, onMounted, getCurrentInstance, ComponentInternalInstance, computed } from 'vue';
+import ElMessage from 'element-plus/es/components/message/index';
+import ElMessageBox from 'element-plus/es/components/message-box/index';
+import ElLoading from 'element-plus/es/components/loading/index';
+import { UploadFilled, Document, Loading, Download, Delete } from '@element-plus/icons-vue';
+import { getToken } from '@/utils/auth';
+import ImagePreview from '@/components/ImagePreview/index.vue';
+import request from '@/utils/request';
 import {
   listHolidayStay,
   getHolidayStay,
@@ -542,6 +620,9 @@ const roomOptions = ref<RoomOptionVO[]>([]);
 const bedOptions = ref<BedOptionVO[]>([]);
 const dormLoading = ref(false);
 
+// 附件上传相关状态
+const attachmentList = ref<any[]>([]);
+
 const queryFormRef = ref<ElFormInstance>();
 const holidayStayFormRef = ref<ElFormInstance>();
 
@@ -645,6 +726,24 @@ const data = reactive<PageData<HolidayStayForm, HolidayStayQuery>>({
 
 const { queryParams, form, rules } = toRefs(data);
 
+// 上传相关配置
+const uploadAction = computed(() => {
+  return import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
+});
+
+const uploadHeaders = computed(() => {
+  return {
+    'Authorization': `Bearer ${getToken() || ''}`,
+    'clientid': import.meta.env.VITE_APP_CLIENT_ID || 'e5cd7e4891bf95d1d19206ce24a7b32e'
+  };
+});
+
+const uploadData = computed(() => {
+  return {
+    bizType: 'holiday_stay_attachment'
+  };
+});
+
 /** 查询假期留宿管理列表 */
 const getList = async () => {
   loading.value = true;
@@ -670,6 +769,9 @@ const reset = () => {
   buildingOptions.value = [];
   roomOptions.value = [];
   bedOptions.value = [];
+
+  // 清空附件列表
+  attachmentList.value = [];
 };
 
 /** 搜索按钮操作 */
@@ -708,6 +810,9 @@ const handleUpdate = async (row?: HolidayStayVO) => {
   // 根据已有数据级联加载宿舍选项
   await loadCascadeOptionsForUpdate(form.value);
 
+  // 处理附件数据
+  await handleAttachmentData();
+
   dialog.visible = true;
   dialog.title = '修改假期留宿管理';
 };
@@ -717,6 +822,13 @@ const submitForm = () => {
   holidayStayFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
+
+      // 处理附件数据
+      const attachmentOssIds = attachmentList.value.filter((file: any) => file.status === 'success' && file.ossId).map((file: any) => file.ossId);
+
+      // 将附件ID添加到表单数据中，处理成逗号分隔的字符串
+      form.value.attachmentOssIds = attachmentOssIds.join(',');
+
       if (form.value.id) {
         await updateHolidayStay(form.value).finally(() => (buttonLoading.value = false));
       } else {
@@ -1153,6 +1265,258 @@ const loadCascadeOptionsForUpdate = async (formData: HolidayStayForm) => {
   }
 };
 
+// 文件类型判断
+const isImageFile = (file: any) => {
+  const imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
+  return imageTypes.includes(file.raw?.type) || (file.url && /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name));
+};
+
+// 获取文件OSS ID的辅助函数
+const getFileOssId = (file: any) => {
+  return file.ossId || '';
+};
+
+// 获取文件扩展名
+const getFileExt = (fileName: string) => {
+  const ext = fileName.split('.').pop()?.toUpperCase();
+  return ext || 'FILE';
+};
+
+// 获取缩写的文件名（保留后缀）
+const getShortFileName = (fileName: string) => {
+  if (!fileName) return '';
+
+  const lastDotIndex = fileName.lastIndexOf('.');
+  if (lastDotIndex === -1) {
+    // 没有后缀的文件名
+    return fileName.length > 12 ? fileName.substring(0, 12) + '...' : fileName;
+  }
+
+  const name = fileName.substring(0, lastDotIndex);
+  const ext = fileName.substring(lastDotIndex); // 包含点号的后缀
+
+  if (name.length <= 8) {
+    return fileName; // 文件名较短，直接返回
+  }
+
+  // 文件名较长，缩写中间部分，保留后缀
+  return name.substring(0, 8) + '...' + ext;
+};
+
+// 文件预览
+const handleFilePreview = (file: any) => {
+  if (isImageFile(file)) {
+    // 图片预览
+    window.open(file.url);
+  } else {
+    // 其他文件下载
+    handleDownloadAttachment(file);
+  }
+};
+
+// 文件上传前检查
+const handleBeforeUpload = (file: any) => {
+  const isValidType = /\.(jpg|jpeg|png|gif|bmp|webp|pdf|doc|docx|txt|mp4|avi|mov)$/i.test(file.name);
+  const isLt10M = file.size / 1024 / 1024 < 10;
+
+  if (!isValidType) {
+    ElMessage.error('上传文件格式不正确！');
+    return false;
+  }
+  if (!isLt10M) {
+    ElMessage.error('上传文件大小不能超过 10MB!');
+    return false;
+  }
+  return true;
+};
+
+// 文件上传成功
+const handleUploadSuccess = (response: any, file: any) => {
+  if (response.code === 200) {
+    file.url = response.data.url;
+    file.ossId = response.data.ossId;
+    ElMessage.success('文件上传成功');
+  } else {
+    ElMessage.error(response.msg || '文件上传失败');
+  }
+};
+
+// 文件上传失败
+const handleUploadError = (error: any, file: any) => {
+  console.error('文件上传失败:', error);
+  ElMessage.error('文件上传失败');
+};
+
+// 文件变更
+const handleFileChange = (file: any, fileList: any) => {
+  console.log('文件变更:', file, fileList);
+  attachmentList.value = fileList;
+};
+
+// 删除附件确认
+const handleRemoveAttachmentConfirm = (file: any) => {
+  ElMessageBox.confirm('确定要删除这个文件吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      handleRemoveAttachment(file);
+    })
+    .catch(() => {
+      // 取消删除
+    });
+};
+
+// 删除附件
+const handleRemoveAttachment = (file: any) => {
+  const index = attachmentList.value.findIndex((item: any) => item.uid === file.uid);
+  if (index > -1) {
+    attachmentList.value.splice(index, 1);
+    ElMessage.success('文件删除成功');
+  }
+};
+
+// 下载附件
+const handleDownloadAttachment = async (file: any) => {
+  let downloadUrl = '';
+  let fileName = file.name || 'attachment';
+
+  // 如果文件已经上传成功，使用服务器返回的路径
+  if (file.response && file.response.data && file.response.data.filePath) {
+    downloadUrl = file.response.data.filePath;
+    fileName = file.response.data.fileName || fileName;
+  }
+  // 如果是已有的附件，使用文件的ossId
+  else if (file.ossId) {
+    downloadUrl = file.ossId;
+  }
+  // 如果是本地文件，直接使用raw文件
+  else if (file.raw) {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(file.raw);
+    link.download = fileName;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+    console.log('下载本地文件:', fileName);
+    return;
+  }
+
+  if (!downloadUrl) {
+    ElMessage.error('无法获取文件下载地址');
+    return;
+  }
+
+  // 对于服务器文件，使用fetch获取内容强制下载
+  try {
+    const loading = ElLoading.service({
+      text: '正在下载文件...',
+      target: document.body
+    });
+
+    const response = await request({
+      url: '/resource/oss/download/' + downloadUrl,
+      method: 'get',
+      responseType: 'blob',
+      timeout: 300000 // 300秒超时
+    });
+
+    // 验证响应数据
+    if (!response) {
+      throw new Error('响应数据为空');
+    }
+    console.log('response', response);
+
+    // 检查response的结构，判断是直接的Blob还是包含data属性的响应对象
+    let blobData: Blob;
+    if (response instanceof Blob) {
+      // 如果response本身就是Blob对象
+      blobData = response;
+    } else if (response.data instanceof Blob) {
+      // 如果response.data是Blob对象
+      blobData = response.data;
+    } else {
+      throw new Error('无效的响应数据格式');
+    }
+
+    const url = window.URL.createObjectURL(blobData);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    window.URL.revokeObjectURL(url);
+    loading?.close();
+    console.log('下载服务器文件成功:', fileName);
+  } catch (error) {
+    console.error('下载文件失败:', error);
+    ElMessage.error('下载文件失败，请稍后重试');
+  }
+};
+
+// 处理附件数据
+const handleAttachmentData = async () => {
+  try {
+    // 如果有附件ID，则获取附件信息
+    if (form.value.attachmentOssIds && form.value.attachmentOssIds.toString().trim()) {
+      console.log('开始处理附件数据:', form.value.attachmentOssIds);
+
+      // 将逗号分隔的字符串转换为数组
+      const ossIdsArray = form.value.attachmentOssIds
+        .split(',')
+        .map((id) => id.trim())
+        .filter((id) => id);
+
+      // 调用接口获取附件信息
+      const response = await request({
+        url: `/resource/oss/listByIds/${ossIdsArray.join(',')}`,
+        method: 'get'
+      });
+
+      if (response.code === 200 && response.data) {
+        console.log('获取到的附件信息:', response.data);
+
+        // 将附件信息转换为上传组件需要的格式
+        const attachmentFiles = response.data.map((item: any, index: number) => ({
+          uid: `existing_${index}_${Date.now()}`,
+          name: item.originalName || `附件${index + 1}`,
+          url: item.url,
+          ossId: item.ossId,
+          status: 'success', // 标记为已上传成功
+          response: {
+            code: 200,
+            data: {
+              url: item.url,
+              ossId: item.ossId
+            }
+          }
+        }));
+
+        // 设置附件列表
+        attachmentList.value = attachmentFiles;
+        console.log('设置附件列表成功:', attachmentList.value);
+      } else {
+        console.warn('获取附件信息失败:', response.msg);
+        attachmentList.value = [];
+      }
+    } else {
+      console.log('没有附件数据，清空附件列表');
+      attachmentList.value = [];
+    }
+  } catch (error) {
+    console.error('处理附件数据失败:', error);
+    ElMessage.error('获取附件信息失败，请稍后重试');
+    attachmentList.value = [];
+  }
+};
+
 onMounted(() => {
   getList();
   // 加载校区选项
@@ -1217,4 +1581,214 @@ onMounted(() => {
   min-height: 32px !important;
   padding: 4px 12px !important;
 }
+
+/* 附件上传容器样式 */
+.attachment-upload-container {
+  width: 100%;
+  max-height: calc(100vh - 650px);
+  min-height: 200px;
+  overflow-y: auto;
+  padding-right: 8px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background: #fafafa;
+}
+
+/* 附件上传区域内容样式 */
+.attachment-upload-container .upload-demo {
+  padding: 12px;
+  min-height: 180px;
+}
+
+.attachment-upload-container .upload-demo .el-upload {
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
+
+.attachment-upload-container .upload-demo .el-upload:hover {
+  border-color: #409eff;
+}
+
+.attachment-upload-container .upload-demo .el-upload__tip {
+  font-size: 12px;
+  color: #000000;
+  margin-top: 7px;
+}
+
+/* 调整拖拽上传图标与文字在同一行、居中对齐 */
+.attachment-upload-container .upload-demo .el-upload-dragger1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  padding: 0px !important;
+}
+
+.attachment-upload-container .upload-demo .el-upload-dragger1 .el-icon--upload {
+  margin: 0;
+  padding: 0px !important;
+}
+
+/* 文件卡片占位封面样式 */
+.attachment-upload-container .upload-demo .upload-file-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 14px;
+}
+
+.attachment-upload-container .upload-demo .upload-file-placeholder .el-icon {
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+
+.attachment-upload-container .upload-demo .upload-file-placeholder .file-ext {
+  font-size: 12px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+/* 让附件卡片一行展示 5 个 */
+.attachment-upload-container :deep(.el-upload-list--picture-card) {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 9px;
+  margin-top: 12px;
+  padding-bottom: 16px;
+}
+
+/* 确保卡片宽度自适应 */
+.attachment-upload-container :deep(.el-upload-list--picture-card) .el-upload-list__item {
+  margin: 0;
+  height: 180px !important;
+  width: 100% !important;
+}
+
+:deep(.el-upload-dragger) {
+  border: 0px !important;
+  padding: 0px !important;
+}
+
+:deep(.el-upload-dragger) .el-upload-dragger1 {
+  border: 0px !important;
+  padding: 0px !important;
+}
+
+/* 文件卡片样式 */
+.upload-file-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.upload-file-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.upload-file-thumb {
+  position: relative;
+  width: 100%;
+  height: 110px;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.upload-thumb-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.upload-file-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* background: rgba(255, 255, 255, 0.9); */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.loading-text {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.upload-file-name {
+  padding: 6px 8px;
+  font-size: 11px;
+  color: #303133;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: #fafafa;
+  border-top: 1px solid #f0f0f0;
+  line-height: 1.2;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+.upload-file-card-actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 8px;
+  background: #fafafa;
+  border-top: 1px solid #f0f0f0;
+  transition: all 0.3s;
+  height: 38px;
+}
+
+.upload-file-card-actions .el-button-group {
+  background: transparent;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.upload-file-card-actions .el-button {
+  padding: 4px 8px;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+  font-size: 12px;
+  margin: 0 2px;
+  border-radius: 3px;
+  transition: all 0.3s;
+}
+
+.upload-file-card-actions .el-button:hover {
+  background: #f5f5f5;
+  border-color: #409eff;
+}
+
+.upload-file-card-actions .el-button.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f5f5f5;
+}
 </style>