心理健康导入

src/api/stuwork/stucare.ts

@@ -72,3 +72,31 @@ export const updateResult = (data: any) => {
   });
 };
 
+/**
+ * 导入心理健康数据
+ * @param file
+ */
+export const importExcel = (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  return request({
+    url: '/stuwork/stucare/import',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};
+
+/**
+ * 下载导入模板
+ */
+export const downloadTemplate = () => {
+  return request({
+    url: '/stuwork/stucare/importTemplate',
+    method: 'get',
+    responseType: 'blob'
+  });
+};
+

src/views/stuwork/stucare/index.vue

@@ -107,6 +107,13 @@
                 @click="formDialogRef.openDialog()">
                 新增
               </el-button>
+              <el-button
+                icon="Upload"
+                type="success"
+                class="ml10"
+                @click="handleImport">
+                导入
+              </el-button>
               <right-toolbar  
                 v-model:showSearch="showSearch" 
                 class="ml10"
@@ -230,6 +237,46 @@
 
     <!-- 处理结果对话框 -->
     <result-dialog ref="resultDialogRef" @refresh="getDataList" />
+
+    <!-- 导入对话框 -->
+    <el-dialog
+      title="导入心理健康数据"
+      v-model="importDialogVisible"
+      :width="500"
+      :close-on-click-modal="false"
+      draggable>
+      <div style="margin-bottom: 15px;">
+        <el-button
+          icon="Download"
+          type="success"
+          @click="handleDownloadTemplate">
+          下载模板
+        </el-button>
+      </div>
+      <el-upload
+        ref="uploadRef"
+        :auto-upload="false"
+        :on-change="handleFileChange"
+        :limit="1"
+        accept=".xlsx,.xls"
+        drag>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          将文件拖到此处，或<em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            只能上传 xlsx/xls 文件
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="importDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleImportSubmit" :disabled="!importFile || importLoading">确 认</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -237,7 +284,7 @@
 import { reactive, ref, onMounted, computed, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObj } from "/@/api/stuwork/stucare";
+import { fetchList, delObj, importExcel, downloadTemplate } from "/@/api/stuwork/stucare";
 import { getDeptList } from "/@/api/basic/basicclass";
 import { queryAllSchoolYear } from "/@/api/basic/basicyear";
 import { getClassListByRole } from "/@/api/basic/basicclass";
@@ -246,7 +293,7 @@ import { useMessage, useMessageBox } from "/@/hooks/message";
 import TableColumnControl from '/@/components/TableColumnControl/index.vue'
 import FormDialog from './form.vue'
 import ResultDialog from './result.vue'
-import { List, Calendar, Clock, OfficeBuilding, Grid, Avatar, UserFilled, Phone, Star, Warning, CircleCheck, Setting, Menu, Search, Document } from '@element-plus/icons-vue'
+import { List, Calendar, Clock, OfficeBuilding, Grid, Avatar, UserFilled, Phone, Star, Warning, CircleCheck, Setting, Menu, Search, Document, UploadFilled } from '@element-plus/icons-vue'
 import { useTableColumnControl } from '/@/hooks/tableColumn'
 
 
@@ -256,12 +303,16 @@ const formDialogRef = ref()
 const resultDialogRef = ref()
 const searchFormRef = ref()
 const columnControlRef = ref<any>()
+const uploadRef = ref()
 const showSearch = ref(true)
 const schoolYearList = ref<any[]>([])
 const schoolTermList = ref<any[]>([])
 const deptList = ref<any[]>([])
 const classList = ref<any[]>([])
 const careTypeList = ref<any[]>([])
+const importDialogVisible = ref(false)
+const importFile = ref<File | null>(null)
+const importLoading = ref(false)
 
 // 表格列配置
 const tableColumns = [
@@ -457,6 +508,57 @@ const getCareTypeDict = async () => {
   }
 }
 
+// 导入
+const handleImport = () => {
+  importDialogVisible.value = true
+  importFile.value = null
+  uploadRef.value?.clearFiles()
+}
+
+// 下载模板
+const handleDownloadTemplate = async () => {
+  try {
+    const res = await downloadTemplate()
+    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = '心理健康导入模板.xlsx'
+    document.body.appendChild(link)
+    link.click()
+    window.URL.revokeObjectURL(url)
+    document.body.removeChild(link)
+    useMessage().success('模板下载成功')
+  } catch (error) {
+    useMessage().error('模板下载失败')
+  }
+}
+
+// 文件变化
+const handleFileChange = (file: any) => {
+  importFile.value = file.raw
+}
+
+// 提交导入
+const handleImportSubmit = async () => {
+  if (!importFile.value) {
+    useMessage().warning('请选择要导入的文件')
+    return
+  }
+
+  importLoading.value = true
+  try {
+    await importExcel(importFile.value)
+    useMessage().success('导入成功')
+    importDialogVisible.value = false
+    getDataList()
+  } catch (err: any) {
+    useMessage().error(err.msg || '导入失败')
+  } finally {
+    importLoading.value = false
+  }
+}
+
 // 初始化
 onMounted(() => {
   getSchoolYearList()