参赛队伍导入

src/views/system/gameTeam/index.vue

@@ -26,16 +26,23 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:gameTeam:add']">新增</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:gameTeam:add']">新增 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:gameTeam:edit']">修改</el-button>
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:gameTeam:edit']"
+              >修改
+            </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:gameTeam:remove']">删除</el-button>
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:gameTeam:remove']"
+              >删除
+            </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:gameTeam:export']">导出</el-button>
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:gameTeam:export']">导出 </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:gameTeam:import']"> 导入 </el-button>
           </el-col>
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
@@ -110,12 +117,50 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
+      <el-upload
+        ref="uploadRef"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :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>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+          </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>
 
 <script setup name="GameTeam" lang="ts">
 import { listGameTeam, getGameTeam, delGameTeam, addGameTeam, updateGameTeam } from '@/api/system/gameTeam';
 import { GameTeamVO, GameTeamQuery, GameTeamForm } from '@/api/system/gameTeam/types';
+import { globalHeaders } from '@/utils/request';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -130,12 +175,28 @@ const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const gameTeamFormRef = ref<ElFormInstance>();
+const uploadRef = ref<ElUploadInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
 
+/*** 用户导入参数 */
+const upload = reactive<ImportOption>({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: '',
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: globalHeaders(),
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + '/system/gameTeam/import'
+});
 const initFormData: GameTeamForm = {
   eventId: undefined,
   teamName: undefined,
@@ -148,9 +209,9 @@ const initFormData: GameTeamForm = {
   teamDescribe: undefined,
   status: undefined,
   remark: undefined
-}
+};
 const data = reactive<PageData<GameTeamForm, GameTeamQuery>>({
-  form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -164,13 +225,10 @@ const data = reactive<PageData<GameTeamForm, GameTeamQuery>>({
     numberRange: undefined,
     teamDescribe: undefined,
     status: undefined,
-    params: {
-    }
+    params: {}
   },
   rules: {
-    teamCode: [
-      { required: true, message: "队伍编号不能为空", trigger: "blur" }
-    ],
+    teamCode: [{ required: true, message: '队伍编号不能为空', trigger: 'blur' }],
     // leader: [
     //   { required: true, message: "领队不能为空", trigger: "blur" }
     // ],
@@ -186,9 +244,7 @@ const data = reactive<PageData<GameTeamForm, GameTeamQuery>>({
     // numberRange: [
     //   { required: true, message: "号码段不能为空", trigger: "blur" }
     // ],
-    teamDescribe: [
-      { required: true, message: "团队描述不能为空", trigger: "blur" }
-    ],
+    teamDescribe: [{ required: true, message: '团队描述不能为空', trigger: 'blur' }]
     // status: [
     //   { required: true, message: "状态不能为空", trigger: "change" }
     // ],
@@ -204,55 +260,55 @@ const getList = async () => {
   gameTeamList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 /** 表单重置 */
 const reset = () => {
-  form.value = {...initFormData};
+  form.value = { ...initFormData };
   gameTeamFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: GameTeamVO[]) => {
-  ids.value = selection.map(item => item.teamId);
+  ids.value = selection.map((item) => item.teamId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加参赛队伍";
-}
+  dialog.title = '添加参赛队伍';
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: GameTeamVO) => {
   reset();
-  const _teamId = row?.teamId || ids.value[0]
+  const _teamId = row?.teamId || ids.value[0];
   const res = await getGameTeam(_teamId);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改参赛队伍";
-}
+  dialog.title = '修改参赛队伍';
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -260,33 +316,69 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.teamId) {
-        await updateGameTeam(form.value).finally(() =>  buttonLoading.value = false);
+        await updateGameTeam(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addGameTeam(form.value).finally(() =>  buttonLoading.value = false);
+        await addGameTeam(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: GameTeamVO) => {
   const _teamIds = row?.teamId || ids.value;
-  await proxy?.$modal.confirm('是否确认删除参赛队伍编号为"' + _teamIds + '"的数据项？').finally(() => loading.value = false);
+  await proxy?.$modal.confirm('是否确认删除参赛队伍编号为"' + _teamIds + '"的数据项？').finally(() => (loading.value = false));
   await delGameTeam(_teamIds);
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
   await getList();
-}
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download('system/gameTeam/export', {
-    ...queryParams.value
-  }, `gameTeam_${new Date().getTime()}.xlsx`)
+  proxy?.download(
+    'system/gameTeam/export',
+    {
+      ...queryParams.value
+    },
+    `gameTeam_${new Date().getTime()}.xlsx`
+  );
+};
+
+/** 导入按钮操作 */
+const handleImport = () => {
+  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 importTemplate = () => {
+  proxy?.download('system/gameTeam/importTemplate', {}, `game_event_template_${new Date().getTime()}.xlsx`);
+};
+
 onMounted(() => {
   getList();
 });