导出报名表模板

src/views/system/gameEvent/index.vue

@@ -135,6 +135,10 @@
               >
               </el-button>
             </el-tooltip>
+            <!-- 下载模板 -->
+            <el-tooltip content="下载报名信息模板" placement="top">
+              <el-button link type="primary" icon="Download" @click="handleDownloadTemplate(scope.row)"></el-button>
+            </el-tooltip>
             <el-tooltip content="导入报名信息" placement="top">
               <el-button
                 link
@@ -188,6 +192,41 @@
     <el-dialog :title="`赛事 ${currentEventId} 排行榜`" v-model="rankingBoardVisible" width="800px" append-to-body>
       <RankingBoard :eventId="currentEventId" v-if="rankingBoardVisible" />
     </el-dialog>
+    <!-- 用户导入对话框 -->
+    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
+      <el-upload
+        ref="uploadRef"
+        :limit="1"
+        accept=".csv"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <el-icon class="el-icon--upload">
+          <i-ep-upload-filled />
+        </el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="text-center el-upload__tip">
+            <!--            <div class="el-upload__tip">-->
+            <!--              <el-checkbox v-model="upload.updateSupport" />-->
+            <!--              是否更新已经存在的用户数据-->
+            <!--            </div>-->
+            <span>仅允许导入csv格式文件。</span>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -199,7 +238,7 @@ import { ref } from 'vue';
 import RefereeForm from '@/views/system/gameEvent/RefereeForm.vue';
 import RankingBoard from './RankingBoard.vue';
 import { useTagsViewStore } from '@/store/modules/tagsView';
-import { useTagsViewStore } from '@/store/modules/tagsView';
+import { globalHeaders } from '@/utils/request';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -225,11 +264,27 @@ const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const gameEventFormRef = ref<ElFormInstance>();
-
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
+const uploadRef = ref<ElUploadInstance>();
+
+/*** 用户导入参数 */
+const upload = reactive<ImportOption>({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: '',
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: globalHeaders()
+  // 上传的地址
+  // url: import.meta.env.VITE_APP_BASE_API + '/system/enroll/importData'
+});
 
 const initFormData: GameEventForm = {
   eventId: undefined,
@@ -419,12 +474,44 @@ const handleExport = () => {
   );
 };
 
+/* 下载模板 */
+const handleDownloadTemplate = (row: GameEventVO) => {
+  proxy?.download(
+    'system/enroll/importTemplate',
+    {
+      eventId: row.eventId
+    },
+    `event_enroll_template_${new Date().getTime()}.xlsx`
+  );
+};
+
 // 导入报名表逻辑
-const handleImportRegistration = (row: GameEventVO) => {
-  // 处理导入报名信息逻辑
-  console.log('导入报名信息', row);
+const handleImportRegistration = (row) => {
+  upload.url = import.meta.env.VITE_APP_BASE_API + `/system/enroll/importData/${row.eventId}`;
+  upload.title = '报名表导入';
+  upload.open = true;
+};
+/**文件上传中处理 */
+const handleFileUploadProgress = () => {
+  upload.isUploading = true;
 };
 
+/** 文件上传成功处理 */
+const handleFileSuccess = (response: any, file: UploadFile) => {
+  upload.open = false;
+  upload.isUploading = false;
+  uploadRef.value?.handleRemove(file);
+  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
+    dangerouslyUseHTMLString: true
+  });
+  getList();
+};
+
+/** 提交上传文件 */
+function submitFileForm() {
+  uploadRef.value?.submit();
+}
+
 // 添加参赛者操作
 const handleAddParticipant = (row: GameEventVO) => {
   // 跳转到新增或编辑参赛者信息页面，并传递 eventName 参数
@@ -476,7 +563,7 @@ const handleStatusChange = async (row: GameEventVO) => {
     // localStorage.setItem('defaultEventId', row.eventId);
     proxy?.$modal.msgSuccess(text + '成功');
     // 刷新当前标签页
-    await useTagsViewStore().delOthersViews(router.currentRoute.value)
+    await useTagsViewStore().delOthersViews(router.currentRoute.value);
   } catch {
     return;
   } finally {