Explorar el Código

feat(gameEventSchedule): 优化日程表导出功能并调整表格样式

- 将日程表导出从CSV格式改为Excel格式,支持样式导出
- 添加HTML表格模板以保持Excel格式和样式
- 修改表格列对齐方式为居中对齐
- 移除未使用的vue-router导入
- 更新示例数字从1234到12345
- 优化项目类型显示逻辑,使用字典获取标签文本
zhou hace 3 meses
padre
commit
0a7b9e7178

+ 0 - 3
package.json

@@ -22,7 +22,6 @@
   "dependencies": {
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
     "@highlightjs/vue-plugin": "2.1.0",
-    
     "@vueup/vue-quill": "1.2.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "13.1.0",
     "@vueuse/core": "13.1.0",
     "animate.css": "4.1.1",
     "animate.css": "4.1.1",
@@ -38,14 +37,12 @@
     "jsencrypt": "3.3.2",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "pinia": "3.0.2",
-    
     "screenfull": "6.0.2",
     "screenfull": "6.0.2",
     "vue": "3.5.13",
     "vue": "3.5.13",
     "vue-cropper": "1.1.1",
     "vue-cropper": "1.1.1",
     "vue-cropperjs": "^5.0.0",
     "vue-cropperjs": "^5.0.0",
     "vue-i18n": "11.1.3",
     "vue-i18n": "11.1.3",
     "vue-json-pretty": "2.4.0",
     "vue-json-pretty": "2.4.0",
-    
     "vue-router": "4.5.0",
     "vue-router": "4.5.0",
     "vue-types": "6.0.0",
     "vue-types": "6.0.0",
     "vxe-table": "4.13.7"
     "vxe-table": "4.13.7"

+ 2 - 3
src/views/system/gameEvent/components/bibViewerDialog.vue

@@ -85,7 +85,7 @@
             {{ bibForm.eventName }}
             {{ bibForm.eventName }}
           </div>      
           </div>      
 
 
-          <!-- 示例数字 1234 -->
+          <!-- 示例数字 12345 -->
           <div
           <div
             class="draggable-element number-element"
             class="draggable-element number-element"
             :style="{
             :style="{
@@ -101,7 +101,7 @@
             @click="selectedElement = 'number'"
             @click="selectedElement = 'number'"
             :class="{ selected: selectedElement === 'number' }"
             :class="{ selected: selectedElement === 'number' }"
           >
           >
-            1234
+            12345
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
@@ -246,7 +246,6 @@
 
 
 <script setup lang="ts">
 <script setup lang="ts">
 import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
 import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
-import { useRouter } from 'vue-router';
 import { createBibTask } from '@/api/system/gameEvent/task';
 import { createBibTask } from '@/api/system/gameEvent/task';
 import type { UploadInstance } from 'element-plus';
 import type { UploadInstance } from 'element-plus';
 import { parseTime } from '@/utils/ruoyi';
 import { parseTime } from '@/utils/ruoyi';

+ 82 - 32
src/views/system/gameEventSchedule/index.vue

@@ -94,22 +94,22 @@
           <span class="font-bold">日程预览</span>
           <span class="font-bold">日程预览</span>
         </template>
         </template>
 
 
-        <el-table :data="scheduleData" border stripe>
-          <el-table-column label="日期" prop="scheduleDate" />
-          <el-table-column label="时间">
+        <el-table :data="scheduleData" border stripe class="schedule-table">
+          <el-table-column label="日期" prop="scheduleDate" align="center" />
+          <el-table-column label="时间" align="center">
             <template #default="scope"> {{ scope.row.startTime }} - {{ scope.row.endTime }}</template>
             <template #default="scope"> {{ scope.row.startTime }} - {{ scope.row.endTime }}</template>
           </el-table-column>
           </el-table-column>
-          <el-table-column label="项目名称" prop="projectName" />
-          <el-table-column label="项目类型">
+          <el-table-column label="项目名称" prop="projectName" align="center" />
+          <el-table-column label="项目类型" align="center">
             <template #default="scope">
             <template #default="scope">
               <dict-tag :options="game_project_type" :value="scope.row.projectType || ''" />
               <dict-tag :options="game_project_type" :value="scope.row.projectType || ''" />
             </template>
             </template>
           </el-table-column>
           </el-table-column>
           <!-- <el-table-column label="项目组别" prop="groupType" width="120" /> -->
           <!-- <el-table-column label="项目组别" prop="groupType" width="120" /> -->
-          <el-table-column label="比赛场地" prop="location" />
-          <el-table-column label="分组数" prop="groupNum" />
-          <el-table-column label="每组人数" prop="participateNum" />
-          <el-table-column label="操作">
+          <el-table-column label="比赛场地" prop="location" align="center" />
+          <el-table-column label="分组数" prop="groupNum" align="center" />
+          <el-table-column label="每组人数" prop="participateNum" align="center" />
+          <el-table-column label="操作" align="center">
             <template #default="scope">
             <template #default="scope">
               <el-button type="danger" size="small" @click="deleteSchedule(scope.row)" v-hasPermi="['system:gameeventproject:remove']">
               <el-button type="danger" size="small" @click="deleteSchedule(scope.row)" v-hasPermi="['system:gameeventproject:remove']">
                 删除
                 删除
@@ -324,41 +324,91 @@ const deleteSchedule = async (project: GameEventProjectVO) => {
   }
   }
 };
 };
 
 
-// 导出日程表
+// 根据字典获取项目类型文本
+const getProjectTypeLabel = (projectType: string) => {
+  const dict = game_project_type.value?.find((item: any) => item.value === projectType);
+  return dict ? dict.label : '未知类型';
+};
+
+// 导出日程表(使用 HTML 表格转 Excel,支持样式)
 const exportSchedule = () => {
 const exportSchedule = () => {
   if (scheduleData.value.length === 0) {
   if (scheduleData.value.length === 0) {
     ElMessage.warning('暂无日程安排数据可导出');
     ElMessage.warning('暂无日程安排数据可导出');
     return;
     return;
   }
   }
 
 
-  // 创建表格数据
-  const headers = ['日期', '时间', '项目名称', '项目类型', '比赛场地', '分组数', '每组人数'];
-  let csvContent = headers.join(',') + '\n';
+  // 构建带样式的 HTML 表格
+  let html = `
+    <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
+    <head>
+      <meta charset="UTF-8">
+      <!--[if gte mso 9]>
+      <xml>
+        <x:ExcelWorkbook>
+          <x:ExcelWorksheets>
+            <x:ExcelWorksheet>
+              <x:Name>日程安排</x:Name>
+              <x:WorksheetOptions>
+                <x:DisplayGridlines/>
+              </x:WorksheetOptions>
+            </x:ExcelWorksheet>
+          </x:ExcelWorksheets>
+        </x:ExcelWorkbook>
+      </xml>
+      <![endif]-->
+      <style>
+        td, th {
+          text-align: center;
+          vertical-align: middle;
+          border: 1px solid #000;
+          padding: 8px;
+        }
+        th {
+          background-color: #E0E0E0;
+          font-weight: bold;
+        }
+      </style>
+    </head>
+    <body>
+      <table>
+        <tr>
+          <th>日期</th>
+          <th>时间</th>
+          <th>项目名称</th>
+          <th>项目类型</th>
+          <th>比赛场地</th>
+          <th>分组数</th>
+          <th>每组人数</th>
+        </tr>
+  `;
 
 
   scheduleData.value.forEach((item) => {
   scheduleData.value.forEach((item) => {
-    const row = [
-      item.scheduleDate,
-      `${item.startTime}-${item.endTime}`,
-      item.projectName,
-      item.projectType === '0' ? '个人' : '团体',
-      // item.groupType,
-      item.location,
-      item.groupNum,
-      item.participateNum
-    ].join(',');
-    csvContent += row + '\n';
+    html += `
+        <tr>
+          <td>${item.scheduleDate || ''}</td>
+          <td>${item.startTime}-${item.endTime}</td>
+          <td>${item.projectName || ''}</td>
+          <td>${getProjectTypeLabel(item.projectType)}</td>
+          <td>${item.location || ''}</td>
+          <td>${item.groupNum || 0}</td>
+          <td>${item.participateNum || 0}</td>
+        </tr>
+    `;
   });
   });
 
 
-  // 创建下载链接
-  const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
+  html += `
+      </table>
+    </body>
+    </html>
+  `;
+
+  // 创建 Blob 并下载
+  const blob = new Blob([html], { type: 'application/vnd.ms-excel;charset=utf-8' });
   const link = document.createElement('a');
   const link = document.createElement('a');
-  const url = URL.createObjectURL(blob);
-  link.setAttribute('href', url);
-  link.setAttribute('download', `赛事日程安排_${defaultEvent.value.eventName}_${parseTime(new Date(), '{y}{m}{d}')}.csv`);
-  link.style.visibility = 'hidden';
-  document.body.appendChild(link);
+  link.href = URL.createObjectURL(blob);
+  link.download = `赛事日程安排_${defaultEvent.value.eventName}_${parseTime(new Date(), '{y}{m}{d}')}.xls`;
   link.click();
   link.click();
-  document.body.removeChild(link);
+  URL.revokeObjectURL(link.href);
 };
 };
 
 
 onMounted(() => {
 onMounted(() => {