chore: 班级新增批量导入

src/modules/admin/class/api.ts

@@ -70,3 +70,9 @@ export function relationClassSem(data?: { class_id: string; semesters_id: string
   return httpRequest.post('/api/resource/v1/learning/class/add-semesters', data)
 }
 
+// // 导入学生
+export function importClass(data: { file: any }) {
+  return httpRequest.post('/api/resource/v1/learning/class/import', data, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}

src/modules/admin/class/components/ImportClass.vue

+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { UploadFilled } from '@element-plus/icons-vue'
+import { splitStrLast } from '@/utils/util'
+import { importClass } from '../api'
+const emit = defineEmits<Emits>()
+const upload = ref()
+const fileList = ref([]) // 文件列表
+
+defineProps({
+  isShowImportDialog: {
+    type: Boolean
+  }
+})
+interface Emits {
+  (e: 'update:isShowImportDialog', isShowImportDialog: boolean): void
+  (e: 'create'): void
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:isShowImportDialog', false)
+}
+
+const beforeUpload = (file: any) => {
+  const suffix = splitStrLast(file.name, '.')
+  if (!['xlsx', 'xls'].includes(suffix)) {
+    ElMessage.warning('只能上传excel文件')
+    return false
+  } else {
+    return true
+  }
+}
+const fetchFileUpload = (option: any) => {
+  return new Promise(() => {
+    importClass({ file: option.file }).then(() => {
+      ElMessage.success('导入数据成功')
+      emit('update:isShowImportDialog', false)
+      emit('create')
+    })
+  })
+}
+
+const handleSubmitUpload = () => {
+  upload.value.submit()
+}
+</script>
+<template>
+  <el-dialog :model-value="isShowImportDialog" draggable :before-close="handleCancel" title="批量导入班级" width="30%">
+    <el-upload
+      style="text-align: center"
+      class="file-import"
+      ref="upload"
+      action="#"
+      accept=".xls,.xlsx"
+      drag
+      :auto-upload="false"
+      :file-list="fileList"
+      :limit="1"
+      :before-upload="beforeUpload"
+      :http-request="fetchFileUpload">
+      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+      <div class="el-upload__text">将文件拖至此处，点击上传</div>
+    </el-upload>
+    <div style="margin-bottom: 10px; text-align: center">
+      导入模板下载：<a href="https://webapp-pub.ezijing.com/center_resource/班级导入模板.xlsx" download="班级模板"
+        ><el-link type="primary">班级模板.xlsx</el-link></a
+      >
+    </div>
+
+    <template #footer>
+      <span>
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmitUpload">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>

src/modules/admin/class/views/List.vue

@@ -7,6 +7,8 @@ import ClassStudents from '../components/ClassStudents.vue'
 import RelatedTerm from '../components/RelatedTerm.vue'
 import { useUserStore } from '@/stores/user'
 import { getClassList, updateClass } from '../api'
+import ImportClass from '../components/ImportClass.vue'
+
 const departmentList: any = useProjectList('', '79806610719731712').departmentList
 
 // 判断当前用户是不是超级管理员
@@ -73,13 +75,18 @@ const handleChangeStatus = (row: any) => {
     const params: any = Object.assign({}, row)
     updateClass(params).then(() => {
       ElMessage.success('更新班级成功')
-      handleFresh()
+      handleRefresh()
     })
   }
 }
-const handleFresh = () => {
+const handleRefresh = () => {
   appList.value.refetch()
 }
+const isShowImportDialog = ref(false)
+// 批量导入
+const handleImport = () => {
+  isShowImportDialog.value = true
+}
 </script>
 
 <template>
@@ -88,9 +95,11 @@ const handleFresh = () => {
       <el-button type="primary" round @click="handleAddClass" v-permission="'v1-learning-class-create'"
         >新增班级</el-button
       >
+      <el-button type="primary" round @click="handleImport">批量导入</el-button>
+
       <template v-if="isAdmin" #filter-department="{ params }">
         <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属部门/学校：</div>
-        <el-select @change="handleFresh" clearable v-model="params.organ_id" placeholder="请选择所属部门/学校">
+        <el-select @change="handleRefresh" clearable v-model="params.organ_id" placeholder="请选择所属部门/学校">
           <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </template>
@@ -103,8 +112,7 @@ const handleFresh = () => {
           inline-prompt
           style="--el-switch-on-color: #aa1941"
           @change="handleChangeStatus(row)"
-          :disabled="!isAdmin"
-        ></el-switch>
+          :disabled="!isAdmin"></el-switch>
       </template>
       <template #table-operate="{ row }">
         <el-space>
@@ -130,8 +138,9 @@ const handleFresh = () => {
     :title="title"
     :id="id"
     :isEdit="isEdit"
-    @create="handleFresh"
-  />
+    @create="handleRefresh" />
   <ClassStudents v-model:isShowClassStuDialog="isShowClassStuDialog" v-if="isShowClassStuDialog === true" :id="id" />
   <RelatedTerm v-model:isRelatingDialog="isRelatingDialog" v-if="isRelatingDialog === true" :id="id" />
+  <!-- 导入学生 -->
+  <ImportClass v-if="isShowImportDialog" v-model:isShowImportDialog="isShowImportDialog" @create="handleRefresh" />
 </template>

src/modules/admin/student/components/ImportStudent.vue

 <script lang="ts" setup>
 import { ElMessage } from 'element-plus'
+import { UploadFilled } from '@element-plus/icons-vue'
 import { splitStrLast } from '@/utils/util'
 import { importStudent } from '../api'
 const emit = defineEmits<Emits>()