|
|
@@ -0,0 +1,1778 @@
|
|
|
+<template>
|
|
|
+ <el-dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" append-to-body @close="handleClose">
|
|
|
+ <el-form ref="dormHygieneCheckFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <!-- 第一行:检查标题、校区名称、宿舍区名称 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="检查标题" prop="checkTitle">
|
|
|
+ <el-input v-model="form.checkTitle" placeholder="请输入检查标题" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="校区名称" prop="campusId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.campusId"
|
|
|
+ placeholder="请选择校区"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :loading="dormLoading"
|
|
|
+ @change="handleCampusChange"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option v-for="campus in campusOptions" :key="campus.id" :label="campus.campusName" :value="campus.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="宿舍区名称" prop="areaId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.areaId"
|
|
|
+ placeholder="请选择宿舍区"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :loading="dormLoading"
|
|
|
+ @change="handleAreaChange"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="!form.campusId"
|
|
|
+ >
|
|
|
+ <el-option v-for="area in areaOptions" :key="area.id" :label="area.areaName" :value="area.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第二行:宿舍楼名称、房间名称、宿舍总分 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="宿舍楼名称" prop="buildingId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.buildingId"
|
|
|
+ placeholder="请选择宿舍楼"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :loading="dormLoading"
|
|
|
+ @change="handleBuildingChange"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="!form.areaId"
|
|
|
+ >
|
|
|
+ <el-option v-for="building in buildingOptions" :key="building.id" :label="building.buildingName" :value="building.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="房间名称" prop="roomId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.roomId"
|
|
|
+ placeholder="请选择房间"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :loading="dormLoading"
|
|
|
+ @change="handleRoomChange"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="!form.buildingId"
|
|
|
+ >
|
|
|
+ <el-option v-for="room in roomOptions" :key="room.id" :label="room.roomName" :value="room.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="宿舍总分" prop="totalScore">
|
|
|
+ <el-input
|
|
|
+ v-model="form.totalScore"
|
|
|
+ placeholder="请输入宿舍总分(0-100分)"
|
|
|
+ type="number"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ :step="0.01"
|
|
|
+ @input="handleTotalScoreChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第三行:卫生等级、检查类型、检查级别 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="卫生等级" prop="hygieneGrade">
|
|
|
+ <el-select v-model="form.hygieneGrade" placeholder="请选择卫生等级" style="width: 100%" @change="handleHygieneGradeChange">
|
|
|
+ <el-option v-for="dict in xg_dorm_hygiene_grade" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="检查类型" prop="checkType">
|
|
|
+ <el-select v-model="form.checkType" placeholder="请选择检查类型" style="width: 100%">
|
|
|
+ <el-option v-for="dict in xg_dorm_hygiene_check_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="检查级别" prop="checkLevel">
|
|
|
+ <el-select v-model="form.checkLevel" placeholder="请选择检查级别" style="width: 100%">
|
|
|
+ <el-option v-for="dict in xg_dorm_hygiene_check_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第四行:检查员姓名、检查日期 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="检查员姓名" prop="checkerName">
|
|
|
+ <el-select
|
|
|
+ v-model="form.checkerName"
|
|
|
+ placeholder="请选择检查员"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ :remote-method="handleCheckerSearch"
|
|
|
+ :loading="checkerLoading"
|
|
|
+ @change="handleCheckerChange"
|
|
|
+ @clear="handleCheckerClear"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="checker in checkerOptions"
|
|
|
+ :key="checker.userId"
|
|
|
+ :label="`${checker.nickName || checker.userName} (${checker.userName})`"
|
|
|
+ :value="checker.nickName || checker.userName"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="检查日期" prop="checkDate">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="form.checkDate"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择检查日期"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" v-if="false">
|
|
|
+ <el-form-item label="检查员ID" prop="checkerId">
|
|
|
+ <el-input v-model="form.checkerId" placeholder="检查员ID" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 房间学生信息列表 - 三列布局 -->
|
|
|
+ <el-row :gutter="20" v-if="form.roomId && roomStudents.length > 0">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="房间学生信息">
|
|
|
+ <div class="room-students-container">
|
|
|
+ <div class="room-students-table-wrapper">
|
|
|
+ <el-table :data="roomStudents" stripe size="small" table-layout="auto">
|
|
|
+ <!-- 学生个人得分 -->
|
|
|
+ <el-table-column label="个人得分" width="120" fixed="left">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.student_score"
|
|
|
+ placeholder="0-100分"
|
|
|
+ size="small"
|
|
|
+ type="number"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ :step="0.01"
|
|
|
+ @change="handleStudentScoreChange(scope.row)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 出勤状态 -->
|
|
|
+ <el-table-column label="出勤状态" width="120" fixed="left">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-select
|
|
|
+ v-model="scope.row.attendance_status"
|
|
|
+ placeholder="请选择"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="handleAttendanceStatusChange(scope.row)"
|
|
|
+ >
|
|
|
+ <el-option v-for="dict in xg_student_attendance_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 学生评级 -->
|
|
|
+ <el-table-column label="学生评级" width="120" fixed="left">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-select
|
|
|
+ v-model="scope.row.student_grade"
|
|
|
+ placeholder="请选择"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%"
|
|
|
+ @change="handleStudentGradeChange(scope.row)"
|
|
|
+ >
|
|
|
+ <el-option v-for="dict in xg_dorm_hygiene_grade" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="bedName" label="床位" width="80" />
|
|
|
+ <el-table-column prop="studentName" label="学生姓名" width="100" />
|
|
|
+ <el-table-column prop="studentNo" label="学号" width="120" />
|
|
|
+ <el-table-column prop="gender" label="性别" width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="scope.row.gender === '0'" type="primary" size="small">男</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.gender === '1'" class="female-tag" size="small">女</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="collegeName" label="学院名称" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="majorName" label="专业名称" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="className" label="班级名称" min-width="120" show-overflow-tooltip />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 房间学生信息为空时的提示 -->
|
|
|
+ <el-row :gutter="20" v-if="form.roomId && roomStudents.length === 0 && !roomStudentsLoading">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="房间学生信息">
|
|
|
+ <div class="room-students-empty">
|
|
|
+ <el-empty description="该房间暂无学生入住" :image-size="60" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 房间学生信息加载中 -->
|
|
|
+ <el-row :gutter="20" v-if="form.roomId && roomStudentsLoading">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="房间学生信息">
|
|
|
+ <div class="room-students-loading">
|
|
|
+ <el-skeleton :rows="3" animated />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-form-item label="上传附件">
|
|
|
+ <div class="attachment-upload-container">
|
|
|
+ <el-upload
|
|
|
+ :file-list="attachmentList"
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handleFilePreview"
|
|
|
+ :action="uploadAction"
|
|
|
+ :headers="uploadHeaders"
|
|
|
+ :data="uploadData"
|
|
|
+ :auto-upload="true"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :on-success="handleUploadSuccess"
|
|
|
+ :on-error="handleUploadError"
|
|
|
+ :on-remove="handleRemoveAttachmentConfirm"
|
|
|
+ :on-change="handleFileChange"
|
|
|
+ multiple
|
|
|
+ :limit="15"
|
|
|
+ :show-file-list="true"
|
|
|
+ accept="image/*,video/*,.pdf,.doc,.docx,.txt"
|
|
|
+ >
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 支持图片、视频、PDF、Word文档等格式,单个文件大小不超过10MB,最多上传15个文件。
|
|
|
+ <span class="el-upload__tip" v-if="!form.id" style="color: #ff0000">(新增时文件会立即上传,保存卫生检查记录后自动关联)</span>
|
|
|
+ <span class="el-upload__tip" v-else style="color: #ff0000">(编辑时文件会立即上传并关联到当前卫生检查记录)</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 调整拖拽上传图标与文字在同一行、居中对齐 -->
|
|
|
+ <div class="el-upload-dragger1">
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 自定义文件卡片缩略图(含文件名) -->
|
|
|
+ <template #file="{ file }">
|
|
|
+ <div class="upload-file-card">
|
|
|
+ <!-- 缩略图区域 -->
|
|
|
+ <div class="upload-file-thumb">
|
|
|
+ <image-preview v-if="isImageFile(file) && file.url" :src="getFileOssId(file)" class="upload-thumb-image" :isOssId="true" />
|
|
|
+ <div v-else class="upload-file-placeholder">
|
|
|
+ <el-icon><Document /></el-icon>
|
|
|
+ <span class="file-ext">{{ getFileExt(file.name) }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- loading 遮罩只在上传中显示 -->
|
|
|
+ <div v-if="file.status === 'uploading'" class="upload-file-loading">
|
|
|
+ <el-icon class="is-loading"><Loading /></el-icon>
|
|
|
+ <span class="loading-text">上传中...</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 文件名称 -->
|
|
|
+ <div class="upload-file-name" :title="file.name">
|
|
|
+ {{ getShortFileName(file.name) }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 操作按钮区域 - 固定在文件名下方 -->
|
|
|
+ <div class="upload-file-card-actions" v-if="file.status && file.status !== 'ready'">
|
|
|
+ <el-button-group size="small">
|
|
|
+ <el-button type="success" @click.stop="handleDownloadAttachment(file)" title="下载" :disabled="file.status !== 'success'">
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" @click.stop="handleRemoveAttachmentConfirm(file)" title="删除">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="检查总结" prop="checkSummary">
|
|
|
+ <el-input v-model="form.checkSummary" type="textarea" placeholder="请输入内容" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="整改建议" prop="improvementSuggestions">
|
|
|
+ <el-input v-model="form.improvementSuggestions" type="textarea" placeholder="请输入内容" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="检查备注" prop="checkRemarks">
|
|
|
+ <el-input v-model="form.checkRemarks" type="textarea" placeholder="请输入内容" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 隐藏字段 -->
|
|
|
+ <el-form-item label="房间编号" prop="roomCode" v-if="false">
|
|
|
+ <el-input v-model="form.roomCode" placeholder="请输入房间编号" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="handleClose">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, toRefs, computed, watch, getCurrentInstance, ComponentInternalInstance, onUnmounted } from 'vue';
|
|
|
+import ElMessage from 'element-plus/es/components/message/index';
|
|
|
+import ElMessageBox from 'element-plus/es/components/message-box/index';
|
|
|
+import ElLoading from 'element-plus/es/components/loading/index';
|
|
|
+import { UploadFilled, Document, Loading, Download, Delete } from '@element-plus/icons-vue';
|
|
|
+import { getToken } from '@/utils/auth';
|
|
|
+import ImagePreview from '@/components/ImagePreview/index.vue';
|
|
|
+import request from '@/utils/request';
|
|
|
+import { DormHygieneCheckForm, DormHygieneCheckCompleteForm } from '@/api/xg/xgss/dormHygieneCheck/dormHygieneCheck/types';
|
|
|
+// 暂时注释掉用户信息获取,避免linter错误
|
|
|
+// import { getInfo } from '@/api/login';
|
|
|
+
|
|
|
+// 获取当前用户信息的辅助函数
|
|
|
+const getCurrentUserInfo = () => {
|
|
|
+ // 暂时返回默认值,避免linter错误
|
|
|
+ // 实际项目中可以通过API调用获取用户信息
|
|
|
+ return {
|
|
|
+ userId: undefined,
|
|
|
+ userName: undefined
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 实际可用的用户信息获取函数
|
|
|
+const fetchCurrentUserInfo = async () => {
|
|
|
+ try {
|
|
|
+ const response = await request({
|
|
|
+ url: '/system/user/getInfo',
|
|
|
+ method: 'get'
|
|
|
+ });
|
|
|
+
|
|
|
+ if (response.code === 200 && response.data && response.data.user) {
|
|
|
+ const user = response.data.user;
|
|
|
+ return {
|
|
|
+ userId: user.userId,
|
|
|
+ userName: user.nickName || user.userName
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.warn('获取用户信息失败:', error);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ userId: undefined,
|
|
|
+ userName: undefined
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 宿舍级联选择相关类型定义
|
|
|
+interface CampusOptionVO {
|
|
|
+ id: string | number;
|
|
|
+ campusName: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface AreaOptionVO {
|
|
|
+ id: string | number;
|
|
|
+ areaName: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface BuildingOptionVO {
|
|
|
+ id: string | number;
|
|
|
+ buildingName: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface RoomOptionVO {
|
|
|
+ id: string | number;
|
|
|
+ roomName: string;
|
|
|
+ roomCode?: string;
|
|
|
+}
|
|
|
+
|
|
|
+// 定义组件属性
|
|
|
+interface Props {
|
|
|
+ visible: boolean;
|
|
|
+ title: string;
|
|
|
+ formData: DormHygieneCheckForm;
|
|
|
+}
|
|
|
+
|
|
|
+// 定义组件事件
|
|
|
+interface Emits {
|
|
|
+ (e: 'update:visible', value: boolean): void;
|
|
|
+ (e: 'submit', formData: DormHygieneCheckForm): void;
|
|
|
+ (e: 'close'): void;
|
|
|
+}
|
|
|
+
|
|
|
+const props = defineProps<Props>();
|
|
|
+const emit = defineEmits<Emits>();
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+
|
|
|
+// 响应式数据
|
|
|
+const buttonLoading = ref(false);
|
|
|
+const attachmentList = ref<any[]>([]);
|
|
|
+const dormHygieneCheckFormRef = ref();
|
|
|
+
|
|
|
+// 宿舍级联选择器相关状态
|
|
|
+const campusOptions = ref<CampusOptionVO[]>([]);
|
|
|
+const areaOptions = ref<AreaOptionVO[]>([]);
|
|
|
+const buildingOptions = ref<BuildingOptionVO[]>([]);
|
|
|
+const roomOptions = ref<RoomOptionVO[]>([]);
|
|
|
+const dormLoading = ref(false);
|
|
|
+
|
|
|
+// 检查员选择相关状态
|
|
|
+const checkerOptions = ref<any[]>([]);
|
|
|
+const checkerLoading = ref(false);
|
|
|
+const checkerSearchKeyword = ref('');
|
|
|
+const checkerSearchTimer = ref<number | null>(null);
|
|
|
+
|
|
|
+// 房间学生信息相关状态
|
|
|
+const roomStudents = ref<any[]>([]);
|
|
|
+const roomStudentsLoading = ref(false);
|
|
|
+
|
|
|
+// 缓存机制,避免重复请求
|
|
|
+const dormCache = ref<Map<string, any[]>>(new Map());
|
|
|
+const cacheExpireTime = 5 * 60 * 1000; // 5分钟缓存过期
|
|
|
+const cacheTimestamps = ref<Map<string, number>>(new Map());
|
|
|
+
|
|
|
+// 缓存工具函数
|
|
|
+const getCachedData = (key: string) => {
|
|
|
+ const timestamp = cacheTimestamps.value.get(key);
|
|
|
+ if (timestamp && Date.now() - timestamp < cacheExpireTime) {
|
|
|
+ return dormCache.value.get(key);
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+};
|
|
|
+
|
|
|
+const setCachedData = (key: string, data: any[]) => {
|
|
|
+ dormCache.value.set(key, data);
|
|
|
+ cacheTimestamps.value.set(key, Date.now());
|
|
|
+};
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const initFormData: DormHygieneCheckForm = {
|
|
|
+ id: undefined,
|
|
|
+ deleted: undefined,
|
|
|
+ checkTitle: undefined,
|
|
|
+ checkDate: new Date().toISOString().slice(0, 19).replace('T', ' '), // 默认当前时间
|
|
|
+ checkerId: undefined, // 将在组件挂载时通过API获取当前登录用户ID
|
|
|
+ checkerName: undefined, // 将在组件挂载时通过API获取当前登录用户姓名
|
|
|
+ checkType: '1', // 默认 1 - 日常检查
|
|
|
+ checkLevel: '1', // 默认 1 - 宿管员检查
|
|
|
+ roomId: undefined,
|
|
|
+ roomCode: undefined,
|
|
|
+ roomName: undefined,
|
|
|
+ buildingId: undefined,
|
|
|
+ buildingName: undefined,
|
|
|
+ areaId: undefined,
|
|
|
+ areaName: undefined,
|
|
|
+ campusId: undefined,
|
|
|
+ campusName: undefined,
|
|
|
+ totalScore: undefined,
|
|
|
+ hygieneGrade: 'A', // 默认 A - 优秀
|
|
|
+ attachmentIds: undefined,
|
|
|
+ checkSummary: undefined,
|
|
|
+ improvementSuggestions: undefined,
|
|
|
+ checkRemarks: undefined
|
|
|
+};
|
|
|
+
|
|
|
+const form = reactive<DormHygieneCheckForm>({ ...initFormData });
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const rules = reactive<any>({
|
|
|
+ id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
|
|
+ checkTitle: [{ required: true, message: '检查标题不能为空', trigger: 'blur' }],
|
|
|
+ checkDate: [{ required: true, message: '检查日期不能为空', trigger: 'blur' }],
|
|
|
+ checkerId: [{ required: true, message: '请先选择检查员', trigger: 'change' }],
|
|
|
+ checkerName: [{ required: true, message: '请选择检查员', trigger: 'change' }],
|
|
|
+ roomId: [{ required: true, message: '宿舍房间ID,关联xg_dorm_room.id不能为空', trigger: 'blur' }],
|
|
|
+ roomCode: [{ required: true, message: '房间编号不能为空', trigger: 'blur' }],
|
|
|
+ roomName: [{ required: true, message: '房间名称不能为空', trigger: 'blur' }],
|
|
|
+ buildingId: [{ required: true, message: '宿舍楼ID,关联xg_dorm_building.id不能为空', trigger: 'blur' }],
|
|
|
+ buildingName: [{ required: true, message: '宿舍楼名称不能为空', trigger: 'blur' }],
|
|
|
+ totalScore: [
|
|
|
+ { required: false, message: '宿舍总分不能为空', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: any, callback: (error?: string | Error) => void) => {
|
|
|
+ if (value !== null && value !== undefined && value !== '') {
|
|
|
+ const score = parseFloat(value.toString());
|
|
|
+ if (isNaN(score) || score < 0 || score > 100) {
|
|
|
+ callback(new Error('宿舍总分必须在0-100分之间'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+// 计算属性
|
|
|
+const dialogVisible = computed({
|
|
|
+ get: () => props.visible,
|
|
|
+ set: (value) => emit('update:visible', value)
|
|
|
+});
|
|
|
+
|
|
|
+const dialogTitle = computed(() => props.title);
|
|
|
+
|
|
|
+// 使用proxy.useDict()获取字典数据,与主页面保持一致
|
|
|
+const { xg_dorm_hygiene_check_level, xg_dorm_hygiene_check_type, xg_dorm_hygiene_grade, xg_student_attendance_status } = toRefs<any>(
|
|
|
+ proxy?.useDict('xg_dorm_hygiene_check_level', 'xg_dorm_hygiene_check_type', 'xg_dorm_hygiene_grade', 'xg_student_attendance_status')
|
|
|
+);
|
|
|
+
|
|
|
+// 计算属性:检查字典数据是否已加载
|
|
|
+const dictDataLoaded = computed(() => {
|
|
|
+ return (
|
|
|
+ xg_dorm_hygiene_check_type.value.length > 0 &&
|
|
|
+ xg_dorm_hygiene_check_level.value.length > 0 &&
|
|
|
+ xg_dorm_hygiene_grade.value.length > 0 &&
|
|
|
+ xg_student_attendance_status.value.length > 0
|
|
|
+ );
|
|
|
+});
|
|
|
+
|
|
|
+// 上传相关配置
|
|
|
+const uploadAction = computed(() => {
|
|
|
+ return import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
|
|
|
+});
|
|
|
+
|
|
|
+const uploadHeaders = computed(() => {
|
|
|
+ return {
|
|
|
+ 'Authorization': `Bearer ${getToken() || ''}`,
|
|
|
+ 'clientid': import.meta.env.VITE_APP_CLIENT_ID || 'e5cd7e4891bf95d1d19206ce24a7b32e'
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+const uploadData = computed(() => {
|
|
|
+ return {
|
|
|
+ bizType: 'dorm_hygiene_check_attachment'
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+// 监听表单数据变化
|
|
|
+watch(
|
|
|
+ () => props.formData,
|
|
|
+ (newData) => {
|
|
|
+ // 设置默认值
|
|
|
+ const defaultData = { ...initFormData };
|
|
|
+
|
|
|
+ // 如果是新增(没有id),设置默认值
|
|
|
+ if (!newData.id) {
|
|
|
+ // 检查日期默认值
|
|
|
+ if (!newData.checkDate) {
|
|
|
+ defaultData.checkDate = new Date().toISOString().slice(0, 19).replace('T', ' ');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查类型默认值
|
|
|
+ if (!newData.checkType) {
|
|
|
+ defaultData.checkType = '1'; // 1 - 日常检查
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查级别默认值
|
|
|
+ if (!newData.checkLevel) {
|
|
|
+ defaultData.checkLevel = '1'; // 1 - 宿管员检查
|
|
|
+ }
|
|
|
+
|
|
|
+ // 卫生等级默认值
|
|
|
+ if (!newData.hygieneGrade) {
|
|
|
+ defaultData.hygieneGrade = 'A'; // A - 优秀
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查员信息默认值
|
|
|
+ if (!newData.checkerId) {
|
|
|
+ // 异步获取当前登录用户ID
|
|
|
+ fetchCurrentUserInfo().then((userInfo) => {
|
|
|
+ if (userInfo.userId) {
|
|
|
+ form.checkerId = userInfo.userId;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!newData.checkerName) {
|
|
|
+ // 异步获取当前登录用户姓名
|
|
|
+ fetchCurrentUserInfo().then((userInfo) => {
|
|
|
+ if (userInfo.userName) {
|
|
|
+ form.checkerName = userInfo.userName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ Object.assign(form, { ...defaultData, ...newData });
|
|
|
+
|
|
|
+ if (newData.id) {
|
|
|
+ handleAttachmentData();
|
|
|
+ // 编辑时级联加载宿舍选项
|
|
|
+ loadCascadeOptionsForUpdate(form);
|
|
|
+ // 编辑时加载检查员选项
|
|
|
+ loadCheckerOptions();
|
|
|
+ // 编辑时加载房间学生信息
|
|
|
+ loadRoomStudents();
|
|
|
+ } else {
|
|
|
+ attachmentList.value = [];
|
|
|
+ roomStudents.value = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { deep: true, immediate: true }
|
|
|
+);
|
|
|
+
|
|
|
+// 方法定义
|
|
|
+const handleClose = () => {
|
|
|
+ emit('close');
|
|
|
+ resetForm();
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = () => {
|
|
|
+ const resetData = { ...initFormData };
|
|
|
+ resetData.checkDate = new Date().toISOString().slice(0, 19).replace('T', ' '); // 重置时使用当前时间
|
|
|
+ Object.assign(form, resetData);
|
|
|
+
|
|
|
+ // 异步获取并设置当前登录用户信息
|
|
|
+ fetchCurrentUserInfo().then((userInfo) => {
|
|
|
+ if (userInfo.userId) {
|
|
|
+ form.checkerId = userInfo.userId;
|
|
|
+ }
|
|
|
+ if (userInfo.userName) {
|
|
|
+ form.checkerName = userInfo.userName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dormHygieneCheckFormRef.value?.resetFields();
|
|
|
+ attachmentList.value = [];
|
|
|
+ roomStudents.value = [];
|
|
|
+
|
|
|
+ // 清空宿舍级联选项
|
|
|
+ areaOptions.value = [];
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+
|
|
|
+ // 重新加载检查员选项
|
|
|
+ loadCheckerOptions();
|
|
|
+};
|
|
|
+
|
|
|
+const submitForm = () => {
|
|
|
+ dormHygieneCheckFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 处理附件数据
|
|
|
+ const attachmentOssIds = attachmentList.value.filter((file: any) => file.status === 'success' && file.ossId).map((file: any) => file.ossId);
|
|
|
+ form.attachmentIds = attachmentOssIds.join(',');
|
|
|
+
|
|
|
+ // 处理学生信息数据,转换为符合API接口的格式
|
|
|
+ const studentData = roomStudents.value.map((student: any) => ({
|
|
|
+ studentId: student.studentId,
|
|
|
+ studentName: student.studentName,
|
|
|
+ studentNo: student.studentNo,
|
|
|
+ className: student.className,
|
|
|
+ majorName: student.majorName,
|
|
|
+ collegeName: student.collegeName,
|
|
|
+ bedId: student.bedId,
|
|
|
+ bedCode: student.bedName, // 使用bedName作为bedCode
|
|
|
+ studentScore: student.student_score, // 转换为驼峰命名
|
|
|
+ attendanceStatus: student.attendance_status, // 转换为驼峰命名
|
|
|
+ studentGrade: student.student_grade, // 转换为驼峰命名
|
|
|
+ isResponsiblePerson: student.isResponsiblePerson || 0,
|
|
|
+ scoreRemarks: student.scoreRemarks || '',
|
|
|
+ improvementNotes: student.improvementNotes || ''
|
|
|
+ }));
|
|
|
+
|
|
|
+ // 构建完整的提交数据
|
|
|
+ const submitData: DormHygieneCheckCompleteForm = {
|
|
|
+ ...form,
|
|
|
+ studentData: studentData
|
|
|
+ };
|
|
|
+
|
|
|
+ emit('submit', submitData);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('提交表单时发生错误:', error);
|
|
|
+ ElMessage.error('提交失败,请稍后重试');
|
|
|
+ } finally {
|
|
|
+ buttonLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 宿舍级联选择相关方法
|
|
|
+/** 加载校区选项 */
|
|
|
+const loadCampusOptions = async () => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await request({
|
|
|
+ url: '/xqxx/dormCampus/list',
|
|
|
+ method: 'get'
|
|
|
+ });
|
|
|
+ campusOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载校区选项失败:', error);
|
|
|
+ campusOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 校区选择变化处理 */
|
|
|
+const handleCampusChange = async (campusId: string | number) => {
|
|
|
+ console.log('校区选择变化处理', campusId);
|
|
|
+ // 清空下级选项
|
|
|
+ form.areaId = undefined;
|
|
|
+ form.areaName = undefined;
|
|
|
+ form.buildingId = undefined;
|
|
|
+ form.buildingName = undefined;
|
|
|
+ form.roomId = undefined;
|
|
|
+ form.roomName = undefined;
|
|
|
+
|
|
|
+ areaOptions.value = [];
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+
|
|
|
+ if (campusId) {
|
|
|
+ // 设置校区名称
|
|
|
+ const selectedCampus = campusOptions.value.find((campus) => campus.id === campusId);
|
|
|
+ if (selectedCampus) {
|
|
|
+ form.campusId = campusId;
|
|
|
+ form.campusName = selectedCampus.campusName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载宿舍区选项
|
|
|
+ await loadAreaOptions(campusId);
|
|
|
+ } else {
|
|
|
+ form.campusId = undefined;
|
|
|
+ form.campusName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载宿舍区选项 */
|
|
|
+const loadAreaOptions = async (campusId: string | number) => {
|
|
|
+ try {
|
|
|
+ const cacheKey = `area_${campusId}`;
|
|
|
+ const cachedData = getCachedData(cacheKey);
|
|
|
+
|
|
|
+ if (cachedData) {
|
|
|
+ areaOptions.value = cachedData;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await request({
|
|
|
+ url: '/ssqxx/dormArea/list',
|
|
|
+ method: 'get',
|
|
|
+ params: { campusId }
|
|
|
+ });
|
|
|
+ const data = res.rows || [];
|
|
|
+ areaOptions.value = data;
|
|
|
+ setCachedData(cacheKey, data);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载宿舍区选项失败:', error);
|
|
|
+ areaOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 宿舍区选择变化处理 */
|
|
|
+const handleAreaChange = async (areaId: string | number) => {
|
|
|
+ // 清空下级选项
|
|
|
+ form.buildingId = undefined;
|
|
|
+ form.buildingName = undefined;
|
|
|
+ form.roomId = undefined;
|
|
|
+ form.roomName = undefined;
|
|
|
+
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+
|
|
|
+ if (areaId) {
|
|
|
+ // 设置宿舍区名称
|
|
|
+ const selectedArea = areaOptions.value.find((area) => area.id === areaId);
|
|
|
+ if (selectedArea) {
|
|
|
+ form.areaId = areaId;
|
|
|
+ form.areaName = selectedArea.areaName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载宿舍楼选项
|
|
|
+ await loadBuildingOptions(areaId);
|
|
|
+ } else {
|
|
|
+ form.areaId = undefined;
|
|
|
+ form.areaName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载宿舍楼选项 */
|
|
|
+const loadBuildingOptions = async (areaId: string | number) => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await request({
|
|
|
+ url: '/sslxx/dormBuilding/list',
|
|
|
+ method: 'get',
|
|
|
+ params: { areaId }
|
|
|
+ });
|
|
|
+ buildingOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载宿舍楼选项失败:', error);
|
|
|
+ buildingOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 宿舍楼选择变化处理 */
|
|
|
+const handleBuildingChange = async (buildingId: string | number) => {
|
|
|
+ // 清空下级选项
|
|
|
+ form.roomId = undefined;
|
|
|
+ form.roomName = undefined;
|
|
|
+
|
|
|
+ roomOptions.value = [];
|
|
|
+
|
|
|
+ if (buildingId) {
|
|
|
+ // 设置宿舍楼名称
|
|
|
+ const selectedBuilding = buildingOptions.value.find((building) => building.id === buildingId);
|
|
|
+ if (selectedBuilding) {
|
|
|
+ form.buildingId = buildingId;
|
|
|
+ form.buildingName = selectedBuilding.buildingName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载房间选项
|
|
|
+ await loadRoomOptions(buildingId);
|
|
|
+ } else {
|
|
|
+ form.buildingId = undefined;
|
|
|
+ form.buildingName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载房间选项 */
|
|
|
+const loadRoomOptions = async (buildingId: string | number) => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await request({
|
|
|
+ url: '/xgss/dormRoom/list',
|
|
|
+ method: 'get',
|
|
|
+ params: { buildingId }
|
|
|
+ });
|
|
|
+ roomOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载房间选项失败:', error);
|
|
|
+ roomOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 房间选择变化处理 */
|
|
|
+const handleRoomChange = async (roomId: string | number) => {
|
|
|
+ if (roomId) {
|
|
|
+ // 设置房间名称
|
|
|
+ const selectedRoom = roomOptions.value.find((room) => room.id === roomId);
|
|
|
+ if (selectedRoom) {
|
|
|
+ form.roomId = roomId;
|
|
|
+ form.roomName = selectedRoom.roomName;
|
|
|
+ // 设置房间编号(如果有的话)
|
|
|
+ form.roomCode = (selectedRoom as any).roomCode || selectedRoom.roomName;
|
|
|
+ }
|
|
|
+ // 加载房间学生信息
|
|
|
+ await loadRoomStudents();
|
|
|
+ } else {
|
|
|
+ form.roomId = undefined;
|
|
|
+ form.roomName = undefined;
|
|
|
+ form.roomCode = undefined;
|
|
|
+ roomStudents.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载检查员选项 */
|
|
|
+const loadCheckerOptions = async (searchKeyword?: string) => {
|
|
|
+ try {
|
|
|
+ checkerLoading.value = true;
|
|
|
+ const params: any = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 50,
|
|
|
+ status: '0' // 只查询正常状态的用户
|
|
|
+ };
|
|
|
+
|
|
|
+ // 如果有搜索关键词,设置查询条件
|
|
|
+ if (searchKeyword && searchKeyword.trim()) {
|
|
|
+ if (/^\d+$/.test(searchKeyword.trim())) {
|
|
|
+ // 如果是纯数字,按工号查询
|
|
|
+ params.phonenumber = searchKeyword.trim();
|
|
|
+ } else {
|
|
|
+ // 否则按姓名查询(支持模糊搜索)
|
|
|
+ params.nickName = searchKeyword.trim();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await request({
|
|
|
+ url: '/system/user/list',
|
|
|
+ method: 'get',
|
|
|
+ params
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.code === 200 && res.rows) {
|
|
|
+ checkerOptions.value = res.rows;
|
|
|
+ } else {
|
|
|
+ checkerOptions.value = [];
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载检查员选项失败:', error);
|
|
|
+ checkerOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ checkerLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 检查员选择变化处理 */
|
|
|
+const handleCheckerChange = (checkerName: string) => {
|
|
|
+ if (checkerName) {
|
|
|
+ // 根据选择的检查员姓名找到对应的用户信息
|
|
|
+ const selectedChecker = checkerOptions.value.find((checker) => (checker.nickName || checker.userName) === checkerName);
|
|
|
+
|
|
|
+ if (selectedChecker) {
|
|
|
+ form.checkerId = selectedChecker.userId;
|
|
|
+ form.checkerName = selectedChecker.nickName || selectedChecker.userName;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 清空选择
|
|
|
+ form.checkerId = undefined;
|
|
|
+ form.checkerName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 检查员远程搜索处理(带防抖) */
|
|
|
+const handleCheckerSearch = (query: string) => {
|
|
|
+ checkerSearchKeyword.value = query;
|
|
|
+
|
|
|
+ // 清除之前的定时器
|
|
|
+ if (checkerSearchTimer.value) {
|
|
|
+ clearTimeout(checkerSearchTimer.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置新的定时器,300ms后执行搜索
|
|
|
+ checkerSearchTimer.value = window.setTimeout(() => {
|
|
|
+ if (query && query.trim()) {
|
|
|
+ // 有搜索关键词时重新加载数据
|
|
|
+ loadCheckerOptions(query);
|
|
|
+ } else {
|
|
|
+ // 清空搜索时加载所有数据
|
|
|
+ loadCheckerOptions();
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+};
|
|
|
+
|
|
|
+/** 检查员清空处理 */
|
|
|
+const handleCheckerClear = () => {
|
|
|
+ // 清除定时器
|
|
|
+ if (checkerSearchTimer.value) {
|
|
|
+ clearTimeout(checkerSearchTimer.value);
|
|
|
+ checkerSearchTimer.value = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ form.checkerId = undefined;
|
|
|
+ form.checkerName = undefined;
|
|
|
+ checkerSearchKeyword.value = '';
|
|
|
+ // 清空后重新加载所有检查员选项
|
|
|
+ loadCheckerOptions();
|
|
|
+};
|
|
|
+
|
|
|
+/** 修改时级联加载宿舍选项数据 */
|
|
|
+const loadCascadeOptionsForUpdate = async (formData: DormHygieneCheckForm) => {
|
|
|
+ try {
|
|
|
+ // 并行加载所有需要的宿舍选项,提升性能
|
|
|
+ const loadTasks = [];
|
|
|
+
|
|
|
+ // 如果有校区ID,加载宿舍区选项
|
|
|
+ if (formData.campusId) {
|
|
|
+ loadTasks.push(loadAreaOptions(formData.campusId));
|
|
|
+
|
|
|
+ // 如果有宿舍区ID,加载宿舍楼选项
|
|
|
+ if (formData.areaId) {
|
|
|
+ loadTasks.push(loadBuildingOptions(formData.areaId));
|
|
|
+
|
|
|
+ // 如果有宿舍楼ID,加载房间选项
|
|
|
+ if (formData.buildingId) {
|
|
|
+ loadTasks.push(loadRoomOptions(formData.buildingId));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 并行执行所有加载任务
|
|
|
+ if (loadTasks.length > 0) {
|
|
|
+ await Promise.all(loadTasks);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('修改时级联加载宿舍选项失败:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 加载房间学生信息
|
|
|
+const loadRoomStudents = async () => {
|
|
|
+ if (!form.roomId) {
|
|
|
+ roomStudents.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ roomStudentsLoading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await request({
|
|
|
+ url: '/dormBedStudent/dormBedStudent/getRoomStudents',
|
|
|
+ method: 'get',
|
|
|
+ params: { roomId: form.roomId }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ // 为每个学生设置默认值
|
|
|
+ roomStudents.value = res.data.map((student: any) => ({
|
|
|
+ ...student,
|
|
|
+ student_score: student.student_score || null, // 个人得分,默认为空
|
|
|
+ attendance_status: student.attendance_status || '1', // 出勤状态,默认1-在寝
|
|
|
+ student_grade: student.student_grade || 'A' // 学生评级,默认A-优秀
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ roomStudents.value = [];
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载房间学生信息失败:', error);
|
|
|
+ roomStudents.value = [];
|
|
|
+ } finally {
|
|
|
+ roomStudentsLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 文件类型判断
|
|
|
+const isImageFile = (file: any) => {
|
|
|
+ const imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
|
|
|
+ return imageTypes.includes(file.raw?.type) || (file.url && /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name));
|
|
|
+};
|
|
|
+
|
|
|
+// 获取文件OSS ID的辅助函数
|
|
|
+const getFileOssId = (file: any) => {
|
|
|
+ return file.ossId || '';
|
|
|
+};
|
|
|
+
|
|
|
+// 获取文件扩展名
|
|
|
+const getFileExt = (fileName: string) => {
|
|
|
+ const ext = fileName.split('.').pop()?.toUpperCase();
|
|
|
+ return ext || 'FILE';
|
|
|
+};
|
|
|
+
|
|
|
+// 获取缩写的文件名(保留后缀)
|
|
|
+const getShortFileName = (fileName: string) => {
|
|
|
+ if (!fileName) return '';
|
|
|
+
|
|
|
+ const lastDotIndex = fileName.lastIndexOf('.');
|
|
|
+ if (lastDotIndex === -1) {
|
|
|
+ return fileName.length > 12 ? fileName.substring(0, 12) + '...' : fileName;
|
|
|
+ }
|
|
|
+
|
|
|
+ const name = fileName.substring(0, lastDotIndex);
|
|
|
+ const ext = fileName.substring(lastDotIndex);
|
|
|
+
|
|
|
+ if (name.length <= 8) {
|
|
|
+ return fileName;
|
|
|
+ }
|
|
|
+
|
|
|
+ return name.substring(0, 8) + '...' + ext;
|
|
|
+};
|
|
|
+
|
|
|
+// 文件预览
|
|
|
+const handleFilePreview = (file: any) => {
|
|
|
+ if (isImageFile(file)) {
|
|
|
+ window.open(file.url);
|
|
|
+ } else {
|
|
|
+ handleDownloadAttachment(file);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 文件上传前检查
|
|
|
+const handleBeforeUpload = (file: any) => {
|
|
|
+ const isValidType = /\.(jpg|jpeg|png|gif|bmp|webp|pdf|doc|docx|txt|mp4|avi|mov)$/i.test(file.name);
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10;
|
|
|
+
|
|
|
+ if (!isValidType) {
|
|
|
+ ElMessage.error('上传文件格式不正确!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt10M) {
|
|
|
+ ElMessage.error('上传文件大小不能超过 10MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+// 文件上传成功
|
|
|
+const handleUploadSuccess = (response: any, file: any) => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ file.url = response.data.url;
|
|
|
+ file.ossId = response.data.ossId;
|
|
|
+ ElMessage.success('文件上传成功');
|
|
|
+ } else {
|
|
|
+ ElMessage.error(response.msg || '文件上传失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 文件上传失败
|
|
|
+const handleUploadError = (error: any, file: any) => {
|
|
|
+ console.error('文件上传失败:', error);
|
|
|
+ ElMessage.error('文件上传失败');
|
|
|
+};
|
|
|
+
|
|
|
+// 文件变更
|
|
|
+const handleFileChange = (file: any, fileList: any) => {
|
|
|
+ console.log('文件变更:', file, fileList);
|
|
|
+ attachmentList.value = fileList;
|
|
|
+};
|
|
|
+
|
|
|
+// 删除附件确认
|
|
|
+const handleRemoveAttachmentConfirm = (file: any) => {
|
|
|
+ ElMessageBox.confirm('确定要删除这个文件吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ handleRemoveAttachment(file);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // 取消删除
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 删除附件
|
|
|
+const handleRemoveAttachment = (file: any) => {
|
|
|
+ const index = attachmentList.value.findIndex((item: any) => item.uid === file.uid);
|
|
|
+ if (index > -1) {
|
|
|
+ attachmentList.value.splice(index, 1);
|
|
|
+ ElMessage.success('文件删除成功');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 下载附件
|
|
|
+const handleDownloadAttachment = async (file: any) => {
|
|
|
+ let downloadUrl = '';
|
|
|
+ let fileName = file.name || 'attachment';
|
|
|
+
|
|
|
+ if (file.response && file.response.data && file.response.data.filePath) {
|
|
|
+ downloadUrl = file.response.data.filePath;
|
|
|
+ fileName = file.response.data.fileName || fileName;
|
|
|
+ } else if (file.ossId) {
|
|
|
+ downloadUrl = file.ossId;
|
|
|
+ } else if (file.raw) {
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = URL.createObjectURL(file.raw);
|
|
|
+ link.download = fileName;
|
|
|
+ link.style.display = 'none';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ URL.revokeObjectURL(link.href);
|
|
|
+ console.log('下载本地文件:', fileName);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!downloadUrl) {
|
|
|
+ ElMessage.error('无法获取文件下载地址');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const loading = ElLoading.service({
|
|
|
+ text: '正在下载文件...',
|
|
|
+ target: document.body
|
|
|
+ });
|
|
|
+
|
|
|
+ const response = await request({
|
|
|
+ url: '/resource/oss/download/' + downloadUrl,
|
|
|
+ method: 'get',
|
|
|
+ responseType: 'blob',
|
|
|
+ timeout: 300000
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!response) {
|
|
|
+ throw new Error('响应数据为空');
|
|
|
+ }
|
|
|
+
|
|
|
+ let blobData: Blob;
|
|
|
+ if (response instanceof Blob) {
|
|
|
+ blobData = response;
|
|
|
+ } else if (response.data instanceof Blob) {
|
|
|
+ blobData = response.data;
|
|
|
+ } else {
|
|
|
+ throw new Error('无效的响应数据格式');
|
|
|
+ }
|
|
|
+
|
|
|
+ const url = window.URL.createObjectURL(blobData);
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+ link.download = fileName;
|
|
|
+ link.style.display = 'none';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+ loading?.close();
|
|
|
+ console.log('下载服务器文件成功:', fileName);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('下载文件失败:', error);
|
|
|
+ ElMessage.error('下载文件失败,请稍后重试');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 处理附件数据
|
|
|
+const handleAttachmentData = async () => {
|
|
|
+ try {
|
|
|
+ if (!form.attachmentIds || !form.attachmentIds.toString().trim()) {
|
|
|
+ console.log('没有附件数据,清空附件列表');
|
|
|
+ attachmentList.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('开始处理附件数据:', form.attachmentIds);
|
|
|
+
|
|
|
+ const ossIdsArray = form.attachmentIds
|
|
|
+ .toString()
|
|
|
+ .split(',')
|
|
|
+ .map((id) => id.trim())
|
|
|
+ .filter((id) => id);
|
|
|
+
|
|
|
+ if (ossIdsArray.length === 0) {
|
|
|
+ attachmentList.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const response = await request({
|
|
|
+ url: `/resource/oss/listByIds/${ossIdsArray.join(',')}`,
|
|
|
+ method: 'get'
|
|
|
+ });
|
|
|
+
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
+ console.log('获取到的附件信息:', response.data);
|
|
|
+
|
|
|
+ const attachmentFiles = response.data.map((item: any, index: number) => ({
|
|
|
+ uid: `existing_${index}_${Date.now()}`,
|
|
|
+ name: item.originalName || `附件${index + 1}`,
|
|
|
+ url: item.url,
|
|
|
+ ossId: item.ossId,
|
|
|
+ status: 'success',
|
|
|
+ response: {
|
|
|
+ code: 200,
|
|
|
+ data: {
|
|
|
+ url: item.url,
|
|
|
+ ossId: item.ossId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }));
|
|
|
+
|
|
|
+ attachmentList.value = attachmentFiles;
|
|
|
+ console.log('设置附件列表成功:', attachmentList.value);
|
|
|
+ } else {
|
|
|
+ console.warn('获取附件信息失败:', response.msg);
|
|
|
+ attachmentList.value = [];
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('处理附件数据失败:', error);
|
|
|
+ attachmentList.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 组件挂载时加载校区选项
|
|
|
+const initCampusOptions = async () => {
|
|
|
+ await loadCampusOptions();
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化检查员选项
|
|
|
+const initCheckerOptions = async () => {
|
|
|
+ await loadCheckerOptions();
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化用户信息
|
|
|
+const initUserInfo = async () => {
|
|
|
+ try {
|
|
|
+ const userInfo = await fetchCurrentUserInfo();
|
|
|
+ if (userInfo.userId && userInfo.userName) {
|
|
|
+ // 如果表单中没有设置检查员信息,则使用当前用户信息
|
|
|
+ if (!form.checkerId) {
|
|
|
+ form.checkerId = userInfo.userId;
|
|
|
+ }
|
|
|
+ if (!form.checkerName) {
|
|
|
+ form.checkerName = userInfo.userName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.warn('初始化用户信息失败:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 处理学生个人得分变化
|
|
|
+const handleStudentScoreChange = (student: any) => {
|
|
|
+ console.log('学生个人得分变化:', student.studentName, student.student_score);
|
|
|
+
|
|
|
+ // 验证个人得分范围
|
|
|
+ if (student.student_score !== null && student.student_score !== undefined && student.student_score !== '') {
|
|
|
+ const score = parseFloat(student.student_score.toString());
|
|
|
+ if (isNaN(score) || score < 0 || score > 100) {
|
|
|
+ ElMessage.warning('个人得分必须在0-100分之间');
|
|
|
+ student.student_score = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 处理出勤状态变化
|
|
|
+const handleAttendanceStatusChange = (student: any) => {
|
|
|
+ console.log('出勤状态变化:', student.studentName, student.attendance_status);
|
|
|
+
|
|
|
+ // 获取出勤状态的标签显示
|
|
|
+ const statusDict = xg_student_attendance_status.value.find((dict: any) => dict.value === student.attendance_status);
|
|
|
+ const statusLabel = statusDict ? statusDict.label : student.attendance_status;
|
|
|
+
|
|
|
+ console.log('出勤状态标签:', statusLabel);
|
|
|
+};
|
|
|
+
|
|
|
+// 处理学生评级变化
|
|
|
+const handleStudentGradeChange = (student: any) => {
|
|
|
+ console.log('学生评级变化:', student.studentName, student.student_grade);
|
|
|
+
|
|
|
+ // 获取学生评级的标签显示
|
|
|
+ const gradeDict = xg_dorm_hygiene_grade.value.find((dict: any) => dict.value === student.student_grade);
|
|
|
+ const gradeLabel = gradeDict ? gradeDict.label : student.student_grade;
|
|
|
+
|
|
|
+ console.log('学生评级标签:', gradeLabel);
|
|
|
+};
|
|
|
+
|
|
|
+// 处理宿舍总分变化 - 自动填写学生个人得分
|
|
|
+const handleTotalScoreChange = () => {
|
|
|
+ // 验证宿舍总分范围
|
|
|
+ if (form.totalScore !== null && form.totalScore !== undefined && form.totalScore !== '' && form.totalScore !== 0) {
|
|
|
+ const score = parseFloat(form.totalScore.toString());
|
|
|
+ if (isNaN(score) || score < 0 || score > 100) {
|
|
|
+ ElMessage.warning('宿舍总分必须在0-100分之间');
|
|
|
+ form.totalScore = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果分数有效且有学生,自动为所有学生设置相同的个人得分
|
|
|
+ if (roomStudents.value.length > 0) {
|
|
|
+ roomStudents.value.forEach((student: any) => {
|
|
|
+ student.student_score = score;
|
|
|
+ });
|
|
|
+ ElMessage.success(`已自动为${roomStudents.value.length}名学生设置个人得分:${score}分`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 处理卫生等级变化 - 自动填写学生评级
|
|
|
+const handleHygieneGradeChange = () => {
|
|
|
+ if (form.hygieneGrade && roomStudents.value.length > 0) {
|
|
|
+ // 自动为所有学生设置相同的评级
|
|
|
+ roomStudents.value.forEach((student: any) => {
|
|
|
+ student.student_grade = form.hygieneGrade;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取卫生等级的标签显示
|
|
|
+ const gradeDict = xg_dorm_hygiene_grade.value.find((dict: any) => dict.value === form.hygieneGrade);
|
|
|
+ const gradeLabel = gradeDict ? gradeDict.label : form.hygieneGrade;
|
|
|
+
|
|
|
+ ElMessage.success(`已自动为${roomStudents.value.length}名学生设置评级:${gradeLabel}`);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 组件卸载时清理定时器
|
|
|
+onUnmounted(() => {
|
|
|
+ if (checkerSearchTimer.value) {
|
|
|
+ clearTimeout(checkerSearchTimer.value);
|
|
|
+ checkerSearchTimer.value = null;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 在组件挂载时初始化
|
|
|
+initCampusOptions();
|
|
|
+initCheckerOptions();
|
|
|
+initUserInfo();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 附件上传容器样式 */
|
|
|
+.attachment-upload-container {
|
|
|
+ width: 100%;
|
|
|
+ max-height: calc(100vh - 650px);
|
|
|
+ min-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 8px;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #fafafa;
|
|
|
+}
|
|
|
+
|
|
|
+/* 附件上传区域内容样式 */
|
|
|
+.attachment-upload-container .upload-demo {
|
|
|
+ padding: 12px;
|
|
|
+ min-height: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.attachment-upload-container .upload-demo .el-upload {
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.attachment-upload-container .upload-demo .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.attachment-upload-container .upload-demo .el-upload__tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000000;
|
|
|
+ margin-top: 7px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 调整拖拽上传图标与文字在同一行、居中对齐 */
|
|
|
+.attachment-upload-container .upload-demo .el-upload-dragger1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 15px;
|
|
|
+ padding: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.attachment-upload-container .upload-demo .el-upload-dragger1 .el-icon--upload {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 文件卡片占位封面样式 */
|
|
|
+.attachment-upload-container .upload-demo .upload-file-placeholder {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.attachment-upload-container .upload-demo .upload-file-placeholder .el-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.attachment-upload-container .upload-demo .upload-file-placeholder .file-ext {
|
|
|
+ font-size: 12px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 让附件卡片一行展示 5 个 */
|
|
|
+.attachment-upload-container :deep(.el-upload-list--picture-card) {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
+ gap: 9px;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保卡片宽度自适应 */
|
|
|
+.attachment-upload-container :deep(.el-upload-list--picture-card) .el-upload-list__item {
|
|
|
+ margin: 0;
|
|
|
+ height: 180px !important;
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-upload-dragger) {
|
|
|
+ border: 0px !important;
|
|
|
+ padding: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-upload-dragger) .el-upload-dragger1 {
|
|
|
+ border: 0px !important;
|
|
|
+ padding: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 文件卡片样式 */
|
|
|
+.upload-file-card {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-card:hover {
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-thumb {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 110px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-thumb-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-loading {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-text {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-name {
|
|
|
+ padding: 6px 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #303133;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: #fafafa;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ line-height: 1.2;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ word-break: break-all;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-card-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 8px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ transition: all 0.3s;
|
|
|
+ height: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-card-actions .el-button-group {
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-card-actions .el-button {
|
|
|
+ padding: 4px 8px;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 2px;
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-card-actions .el-button:hover {
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-file-card-actions .el-button.is-disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 房间学生信息列表样式 */
|
|
|
+.room-students-container {
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f9fafc;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* 房间学生信息表格包装器 - 智能横向滚动 */
|
|
|
+.room-students-table-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 设置表格宽度,让表格根据内容自适应 */
|
|
|
+.room-students-table-wrapper .el-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 强制显示横向滚动条 */
|
|
|
+.room-students-table-wrapper {
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #c1c1c1 #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-empty {
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-loading {
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 女性标签样式 - 与SelectiveAllocationDialog保持一致 */
|
|
|
+.female-tag {
|
|
|
+ background-color: rgba(255, 105, 180, 0.1) !important;
|
|
|
+ color: #ff69b4 !important;
|
|
|
+ border-color: rgba(255, 105, 180, 0.1) !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 学生信息表格样式优化 */
|
|
|
+.room-students-container .el-table {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-container .el-table .el-input {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-container .el-table .el-select {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-container .el-table .el-input__inner {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-container .el-table .el-select .el-input__inner {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 固定列样式优化 */
|
|
|
+.room-students-table-wrapper .el-table .el-table__fixed-left {
|
|
|
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-table-wrapper .el-table .el-table__fixed-left::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 1px;
|
|
|
+ background-color: #e4e7ed;
|
|
|
+}
|
|
|
+
|
|
|
+/* 横向滚动条样式优化 - Webkit浏览器 */
|
|
|
+.room-students-table-wrapper::-webkit-scrollbar {
|
|
|
+ height: 12px;
|
|
|
+ width: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-table-wrapper::-webkit-scrollbar-track {
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-table-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ background: #c1c1c1;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 2px solid #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-table-wrapper::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #a8a8a8;
|
|
|
+}
|
|
|
+
|
|
|
+.room-students-table-wrapper::-webkit-scrollbar-corner {
|
|
|
+ background: #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 横向滚动条样式优化 - Firefox浏览器 */
|
|
|
+.room-students-table-wrapper {
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #c1c1c1 #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确保滚动条始终可见 */
|
|
|
+.room-students-table-wrapper:hover {
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+
|
|
|
+/* 优化表格在容器中的显示 */
|
|
|
+.room-students-table-wrapper .el-table {
|
|
|
+ table-layout: auto;
|
|
|
+}
|
|
|
+
|
|
|
+/* 当表格内容较少时,避免出现过多空白 */
|
|
|
+.room-students-table-wrapper .el-table .el-table__body-wrapper {
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+</style>
|