|
|
@@ -0,0 +1,1695 @@
|
|
|
+<template>
|
|
|
+ <div class="p-2">
|
|
|
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
+ <div v-show="showSearch" class="mb-[10px]">
|
|
|
+ <el-card shadow="hover">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
|
+ <!-- <el-form-item label="学生ID" prop="studentId">
|
|
|
+ <el-input v-model="queryParams.studentId" placeholder="请输入学生ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="学生姓名" prop="studentName">
|
|
|
+ <el-input v-model="queryParams.studentName" placeholder="请输入学生姓名" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="学号" prop="studentNo">
|
|
|
+ <el-input v-model="queryParams.studentNo" placeholder="请输入学号" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学院ID" prop="collegeId">
|
|
|
+ <el-input v-model="queryParams.collegeId" placeholder="请输入学院ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学院名称" prop="collegeName">
|
|
|
+ <el-input v-model="queryParams.collegeName" placeholder="请输入学院名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="专业ID" prop="majorId">
|
|
|
+ <el-input v-model="queryParams.majorId" placeholder="请输入专业ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="专业名称" prop="majorName">
|
|
|
+ <el-input v-model="queryParams.majorName" placeholder="请输入专业名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级ID" prop="classId">
|
|
|
+ <el-input v-model="queryParams.classId" placeholder="请输入班级ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级名称" prop="className">
|
|
|
+ <el-input v-model="queryParams.className" placeholder="请输入班级名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="校区ID" prop="campusId">
|
|
|
+ <el-input v-model="queryParams.campusId" placeholder="请输入校区ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="校区名称" prop="campusName">
|
|
|
+ <el-input v-model="queryParams.campusName" placeholder="请输入校区名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="宿舍区域ID" prop="areaId">
|
|
|
+ <el-input v-model="queryParams.areaId" placeholder="请输入宿舍区域ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="宿舍区域名称" prop="areaName">
|
|
|
+ <el-input v-model="queryParams.areaName" placeholder="请输入宿舍区域名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="宿舍楼ID" prop="buildingId">
|
|
|
+ <el-input v-model="queryParams.buildingId" placeholder="请输入宿舍楼ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="宿舍楼名称" prop="buildingName">
|
|
|
+ <el-input v-model="queryParams.buildingName" placeholder="请输入宿舍楼名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="宿舍房间ID" prop="roomId">
|
|
|
+ <el-input v-model="queryParams.roomId" placeholder="请输入宿舍房间ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="房间名称" prop="roomName">
|
|
|
+ <el-input v-model="queryParams.roomName" placeholder="请输入房间名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="床位ID" prop="bedId">
|
|
|
+ <el-input v-model="queryParams.bedId" placeholder="请输入床位ID" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="床位名称" prop="bedName">
|
|
|
+ <el-input v-model="queryParams.bedName" placeholder="请输入床位名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="违纪类型" prop="violationType">
|
|
|
+ <el-select v-model="queryParams.violationType" placeholder="请选择违纪类型" clearable>
|
|
|
+ <el-option v-for="dict in dorm_violation_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="违纪等级:1轻微 2一般 3严重 4特别严重" prop="violationLevel">
|
|
|
+ <el-select v-model="queryParams.violationLevel" placeholder="请选择违纪等级:1轻微 2一般 3严重 4特别严重" clearable>
|
|
|
+ <el-option v-for="dict in dorm_violation_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="违纪发生时间" prop="violationTime">
|
|
|
+ <el-date-picker clearable v-model="queryParams.violationTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择违纪发生时间" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="违纪行为描述" prop="violationDescription">
|
|
|
+ <el-input v-model="queryParams.violationDescription" placeholder="请输入违纪行为描述" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="涉及其他学生id" prop="involvedStudents">
|
|
|
+ <el-input v-model="queryParams.involvedStudents" placeholder="请输入涉及其他学生id" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件OSS ID列表" prop="attachmentOssIds">
|
|
|
+ <el-input v-model="queryParams.attachmentOssIds" placeholder="请输入附件OSS ID列表" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="删除标志" prop="deleted">
|
|
|
+ <el-input v-model="queryParams.deleted" placeholder="请输入删除标志" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <el-card shadow="never">
|
|
|
+ <template #header>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['dormViolation:dormViolation:add']">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['dormViolation:dormViolation:edit']"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="Delete"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete()"
|
|
|
+ v-hasPermi="['dormViolation:dormViolation:remove']"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['dormViolation:dormViolation:export']">导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" border :data="dormViolationList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="违纪记录ID" align="center" prop="id" v-if="true" />
|
|
|
+ <el-table-column label="学生ID" align="center" prop="studentId" />
|
|
|
+ <el-table-column label="学生姓名" align="center" prop="studentName" />
|
|
|
+ <el-table-column label="学号" align="center" prop="studentNo" />
|
|
|
+ <el-table-column label="学院ID" align="center" prop="collegeId" />
|
|
|
+ <el-table-column label="学院名称" align="center" prop="collegeName" />
|
|
|
+ <el-table-column label="专业ID" align="center" prop="majorId" />
|
|
|
+ <el-table-column label="专业名称" align="center" prop="majorName" />
|
|
|
+ <el-table-column label="班级ID" align="center" prop="classId" />
|
|
|
+ <el-table-column label="班级名称" align="center" prop="className" />
|
|
|
+ <el-table-column label="校区ID" align="center" prop="campusId" />
|
|
|
+ <el-table-column label="校区名称" align="center" prop="campusName" />
|
|
|
+ <el-table-column label="宿舍区域ID" align="center" prop="areaId" />
|
|
|
+ <el-table-column label="宿舍区域名称" align="center" prop="areaName" />
|
|
|
+ <el-table-column label="宿舍楼ID" align="center" prop="buildingId" />
|
|
|
+ <el-table-column label="宿舍楼名称" align="center" prop="buildingName" />
|
|
|
+ <el-table-column label="宿舍房间ID" align="center" prop="roomId" />
|
|
|
+ <el-table-column label="房间名称" align="center" prop="roomName" />
|
|
|
+ <el-table-column label="床位ID" align="center" prop="bedId" />
|
|
|
+ <el-table-column label="床位名称" align="center" prop="bedName" />
|
|
|
+ <el-table-column label="违纪类型" align="center" prop="violationType">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :options="dorm_violation_type" :value="scope.row.violationType" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="违纪等级:1轻微 2一般 3严重 4特别严重" align="center" prop="violationLevel">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :options="dorm_violation_level" :value="scope.row.violationLevel" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="违纪发生时间" align="center" prop="violationTime" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ parseTime(scope.row.violationTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="违纪行为描述" align="center" prop="violationDescription" />
|
|
|
+ <el-table-column label="涉及其他学生id" align="center" prop="involvedStudents" />
|
|
|
+ <el-table-column label="附件OSS ID列表" align="center" prop="attachmentOssIds" />
|
|
|
+ <el-table-column label="删除标志" align="center" prop="deleted" />
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tooltip content="修改" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ icon="Edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['dormViolation:dormViolation:edit']"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ icon="Delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['dormViolation:dormViolation:remove']"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
+ </el-card>
|
|
|
+ <!-- 添加或修改宿舍违纪记录对话框 -->
|
|
|
+ <el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px" append-to-body>
|
|
|
+ <el-form ref="dormViolationFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 左列:学生基本信息 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="学生ID" prop="studentId" v-if="false">
|
|
|
+ <el-input v-model="form.studentId" placeholder="请输入学生ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学生选择" prop="studentId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.studentId"
|
|
|
+ placeholder="请输入学号或姓名搜索学生"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ :remote-method="remoteSearchStudents"
|
|
|
+ :loading="studentLoading"
|
|
|
+ clearable
|
|
|
+ @change="handleStudentChange"
|
|
|
+ style="width: 100%"
|
|
|
+ @visible-change="handleStudentSelectVisibleChange"
|
|
|
+ popper-class="student-select-dropdown"
|
|
|
+ >
|
|
|
+ <el-option v-for="student in studentOptions" :key="student.id" :label="`${student.name} (${student.studentNo})`" :value="student.id">
|
|
|
+ <div class="student-option">
|
|
|
+ <div class="student-main">
|
|
|
+ <span class="student-name">{{ student.name }}</span>
|
|
|
+ <span class="student-no">{{ student.studentNo }}</span>
|
|
|
+ <span class="student-gender">{{ student.gender === '0' ? '男' : '女' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="student-info" v-if="student.collegeName || student.majorName || student.className">
|
|
|
+ <span v-if="student.collegeName && student.collegeName.trim()" class="info-item">{{ student.collegeName }}</span>
|
|
|
+ <span v-if="student.majorName && student.majorName.trim()" class="info-item">{{ student.majorName }}</span>
|
|
|
+ <span v-if="student.className && student.className.trim()" class="info-item">{{ student.className }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学生姓名" prop="studentName">
|
|
|
+ <el-input v-model="form.studentName" placeholder="选择学生后自动填充" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学号" prop="studentNo" v-if="false">
|
|
|
+ <el-input v-model="form.studentNo" placeholder="请输入学号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学院ID" prop="collegeId" v-if="false">
|
|
|
+ <el-input v-model="form.collegeId" placeholder="请输入学院ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学院名称" prop="collegeName">
|
|
|
+ <el-input v-model="form.collegeName" placeholder="选择学生后自动填充" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="专业ID" prop="majorId" v-if="false">
|
|
|
+ <el-input v-model="form.majorId" placeholder="请输入专业ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="专业名称" prop="majorName">
|
|
|
+ <el-input v-model="form.majorName" placeholder="选择学生后自动填充" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级ID" prop="classId" v-if="false">
|
|
|
+ <el-input v-model="form.classId" placeholder="请输入班级ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级名称" prop="className">
|
|
|
+ <el-input v-model="form.className" placeholder="选择学生后自动填充" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 右列:宿舍信息 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="校区ID" prop="campusId" v-if="false">
|
|
|
+ <el-input v-model="form.campusId" placeholder="请输入校区ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <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-form-item label="宿舍区ID" prop="areaId" v-if="false">
|
|
|
+ <el-input v-model="form.areaId" placeholder="请输入宿舍区ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <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-form-item label="宿舍楼ID" prop="buildingId" v-if="false">
|
|
|
+ <el-input v-model="form.buildingId" placeholder="请输入宿舍楼ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <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-form-item label="房间ID" prop="roomId" v-if="false">
|
|
|
+ <el-input v-model="form.roomId" placeholder="请输入房间ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <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-form-item label="床位ID" prop="bedId" v-if="false">
|
|
|
+ <el-input v-model="form.bedId" placeholder="请输入床位ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="床位名称" prop="bedId">
|
|
|
+ <el-select
|
|
|
+ v-model="form.bedId"
|
|
|
+ placeholder="请选择床位"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ :loading="dormLoading"
|
|
|
+ @change="handleBedChange"
|
|
|
+ style="width: 100%"
|
|
|
+ :disabled="!form.roomId"
|
|
|
+ >
|
|
|
+ <el-option v-for="bed in bedOptions" :key="bed.id" :label="bed.bedName" :value="bed.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 违纪信息 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="违纪类型" prop="violationType">
|
|
|
+ <el-select v-model="form.violationType" placeholder="请选择违纪类型" style="width: 100%">
|
|
|
+ <el-option v-for="dict in dorm_violation_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="违纪等级" prop="violationLevel">
|
|
|
+ <el-select v-model="form.violationLevel" placeholder="请选择违纪等级" style="width: 100%">
|
|
|
+ <el-option v-for="dict in dorm_violation_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="12">
|
|
|
+ <el-form-item label="违纪发生时间" prop="violationTime">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="form.violationTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择违纪发生时间"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="涉及其他学生" prop="involvedStudents">
|
|
|
+ <el-input v-model="form.involvedStudents" placeholder="请输入涉及其他学生ID" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 完整宽度的字段 -->
|
|
|
+ <el-form-item label="违纪行为描述" prop="violationDescription">
|
|
|
+ <el-input v-model="form.violationDescription" type="textarea" placeholder="请输入违纪行为描述" :rows="3" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <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-form-item label="备注信息" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" placeholder="请输入备注信息" :rows="3" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="DormViolation" lang="ts">
|
|
|
+import { ref, reactive, toRefs, onMounted, getCurrentInstance, ComponentInternalInstance, computed } 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 {
|
|
|
+ listDormViolation,
|
|
|
+ getDormViolation,
|
|
|
+ delDormViolation,
|
|
|
+ addDormViolation,
|
|
|
+ updateDormViolation,
|
|
|
+ getStudentOptions,
|
|
|
+ getCampusOptions,
|
|
|
+ getAreaOptions,
|
|
|
+ getBuildingOptions,
|
|
|
+ getRoomOptions,
|
|
|
+ getBedOptions
|
|
|
+} from '@/api/xg/xgss/dormViolation/dormViolation';
|
|
|
+import {
|
|
|
+ DormViolationVO,
|
|
|
+ DormViolationQuery,
|
|
|
+ DormViolationForm,
|
|
|
+ StudentOptionVO,
|
|
|
+ StudentOptionQuery,
|
|
|
+ CampusOptionVO,
|
|
|
+ AreaOptionVO,
|
|
|
+ BuildingOptionVO,
|
|
|
+ RoomOptionVO,
|
|
|
+ BedOptionVO
|
|
|
+} from '@/api/xg/xgss/dormViolation/dormViolation/types';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const { dorm_violation_level, dorm_violation_type } = toRefs<any>(proxy?.useDict('dorm_violation_level', 'dorm_violation_type'));
|
|
|
+
|
|
|
+const dormViolationList = ref<DormViolationVO[]>([]);
|
|
|
+const buttonLoading = ref(false);
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const ids = ref<Array<string | number>>([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+// 学生选择器相关状态
|
|
|
+const studentOptions = ref<StudentOptionVO[]>([]);
|
|
|
+const studentLoading = ref(false);
|
|
|
+const studentSelectVisible = ref(false);
|
|
|
+
|
|
|
+// 宿舍级联选择器相关状态
|
|
|
+const campusOptions = ref<CampusOptionVO[]>([]);
|
|
|
+const areaOptions = ref<AreaOptionVO[]>([]);
|
|
|
+const buildingOptions = ref<BuildingOptionVO[]>([]);
|
|
|
+const roomOptions = ref<RoomOptionVO[]>([]);
|
|
|
+const bedOptions = ref<BedOptionVO[]>([]);
|
|
|
+const dormLoading = ref(false);
|
|
|
+
|
|
|
+// 附件上传相关状态
|
|
|
+const attachmentList = ref<any[]>([]);
|
|
|
+
|
|
|
+const queryFormRef = ref<ElFormInstance>();
|
|
|
+const dormViolationFormRef = ref<ElFormInstance>();
|
|
|
+
|
|
|
+const dialog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+
|
|
|
+const initFormData: DormViolationForm = {
|
|
|
+ id: undefined,
|
|
|
+ studentId: undefined,
|
|
|
+ studentName: undefined,
|
|
|
+ studentNo: undefined,
|
|
|
+ collegeId: undefined,
|
|
|
+ collegeName: undefined,
|
|
|
+ majorId: undefined,
|
|
|
+ majorName: undefined,
|
|
|
+ classId: undefined,
|
|
|
+ className: undefined,
|
|
|
+ campusId: undefined,
|
|
|
+ campusName: undefined,
|
|
|
+ areaId: undefined,
|
|
|
+ areaName: undefined,
|
|
|
+ buildingId: undefined,
|
|
|
+ buildingName: undefined,
|
|
|
+ roomId: undefined,
|
|
|
+ roomName: undefined,
|
|
|
+ bedId: undefined,
|
|
|
+ bedName: undefined,
|
|
|
+ violationType: undefined,
|
|
|
+ violationLevel: undefined,
|
|
|
+ violationTime: undefined,
|
|
|
+ violationDescription: undefined,
|
|
|
+ involvedStudents: undefined,
|
|
|
+ attachmentOssIds: undefined,
|
|
|
+ deleted: undefined,
|
|
|
+ remark: undefined
|
|
|
+};
|
|
|
+const data = reactive<PageData<DormViolationForm, DormViolationQuery>>({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ studentId: undefined,
|
|
|
+ studentName: undefined,
|
|
|
+ studentNo: undefined,
|
|
|
+ collegeId: undefined,
|
|
|
+ collegeName: undefined,
|
|
|
+ majorId: undefined,
|
|
|
+ majorName: undefined,
|
|
|
+ classId: undefined,
|
|
|
+ className: undefined,
|
|
|
+ campusId: undefined,
|
|
|
+ campusName: undefined,
|
|
|
+ areaId: undefined,
|
|
|
+ areaName: undefined,
|
|
|
+ buildingId: undefined,
|
|
|
+ buildingName: undefined,
|
|
|
+ roomId: undefined,
|
|
|
+ roomName: undefined,
|
|
|
+ bedId: undefined,
|
|
|
+ bedName: undefined,
|
|
|
+ violationType: undefined,
|
|
|
+ violationLevel: undefined,
|
|
|
+ violationTime: undefined,
|
|
|
+ violationDescription: undefined,
|
|
|
+ involvedStudents: undefined,
|
|
|
+ attachmentOssIds: undefined,
|
|
|
+ deleted: undefined,
|
|
|
+ params: {}
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ id: [{ required: true, message: '违纪记录ID不能为空', trigger: 'blur' }],
|
|
|
+ studentId: [{ required: true, message: '学生ID不能为空', trigger: 'blur' }],
|
|
|
+ studentName: [{ required: true, message: '学生姓名不能为空', trigger: 'blur' }],
|
|
|
+ studentNo: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
|
|
|
+ buildingId: [{ required: true, message: '宿舍楼ID不能为空', trigger: 'blur' }],
|
|
|
+ buildingName: [{ required: true, message: '宿舍楼名称不能为空', trigger: 'blur' }],
|
|
|
+ roomId: [{ required: true, message: '宿舍房间ID不能为空', trigger: 'blur' }],
|
|
|
+ roomName: [{ required: true, message: '房间名称不能为空', trigger: 'blur' }],
|
|
|
+ violationType: [{ required: true, message: '违纪类型不能为空', trigger: 'change' }],
|
|
|
+ violationLevel: [{ required: true, message: '违纪等级:1轻微 2一般 3严重 4特别严重不能为空', trigger: 'change' }],
|
|
|
+ violationTime: [{ required: true, message: '违纪发生时间不能为空', trigger: 'blur' }],
|
|
|
+ violationDescription: [{ required: true, message: '违纪行为描述不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const { queryParams, form, rules } = toRefs(data);
|
|
|
+
|
|
|
+// 上传相关配置
|
|
|
+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_violation_attachment'
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+/** 查询宿舍违纪记录列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ const res = await listDormViolation(queryParams.value);
|
|
|
+ dormViolationList.value = res.rows;
|
|
|
+ total.value = res.total;
|
|
|
+ loading.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ reset();
|
|
|
+ dialog.visible = false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 表单重置 */
|
|
|
+const reset = () => {
|
|
|
+ form.value = { ...initFormData };
|
|
|
+ dormViolationFormRef.value?.resetFields();
|
|
|
+
|
|
|
+ // 清空宿舍级联选项
|
|
|
+ areaOptions.value = [];
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+ bedOptions.value = [];
|
|
|
+
|
|
|
+ // 清空附件列表
|
|
|
+ attachmentList.value = [];
|
|
|
+};
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+const resetQuery = () => {
|
|
|
+ queryFormRef.value?.resetFields();
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+
|
|
|
+/** 多选框选中数据 */
|
|
|
+const handleSelectionChange = (selection: DormViolationVO[]) => {
|
|
|
+ ids.value = selection.map((item) => item.id);
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+const handleAdd = () => {
|
|
|
+ reset();
|
|
|
+ dialog.visible = true;
|
|
|
+ dialog.title = '添加宿舍违纪记录';
|
|
|
+};
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+const handleUpdate = async (row?: DormViolationVO) => {
|
|
|
+ reset();
|
|
|
+ const _id = row?.id || ids.value[0];
|
|
|
+ const res = await getDormViolation(_id);
|
|
|
+ Object.assign(form.value, res.data);
|
|
|
+
|
|
|
+ // 根据已有数据级联加载宿舍选项
|
|
|
+ await loadCascadeOptionsForUpdate(form.value);
|
|
|
+
|
|
|
+ // 处理附件数据
|
|
|
+ await handleAttachmentData();
|
|
|
+
|
|
|
+ dialog.visible = true;
|
|
|
+ dialog.title = '修改宿舍违纪记录';
|
|
|
+};
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+const submitForm = () => {
|
|
|
+ dormViolationFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+
|
|
|
+ // 处理附件数据
|
|
|
+ const attachmentOssIds = attachmentList.value.filter((file: any) => file.status === 'success' && file.ossId).map((file: any) => file.ossId);
|
|
|
+
|
|
|
+ // 将附件ID添加到表单数据中,处理成逗号分隔的字符串
|
|
|
+ form.value.attachmentOssIds = attachmentOssIds.join(',');
|
|
|
+
|
|
|
+ if (form.value.id) {
|
|
|
+ await updateDormViolation(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ } else {
|
|
|
+ await addDormViolation(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ }
|
|
|
+ proxy?.$modal.msgSuccess('操作成功');
|
|
|
+ dialog.visible = false;
|
|
|
+ await getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+const handleDelete = async (row?: DormViolationVO) => {
|
|
|
+ const _ids = row?.id || ids.value;
|
|
|
+ await proxy?.$modal.confirm('是否确认删除宿舍违纪记录编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
|
|
|
+ await delDormViolation(_ids);
|
|
|
+ proxy?.$modal.msgSuccess('删除成功');
|
|
|
+ await getList();
|
|
|
+};
|
|
|
+
|
|
|
+/** 导出按钮操作 */
|
|
|
+const handleExport = () => {
|
|
|
+ proxy?.download(
|
|
|
+ 'dormViolation/dormViolation/export',
|
|
|
+ {
|
|
|
+ ...queryParams.value
|
|
|
+ },
|
|
|
+ `dormViolation_${new Date().getTime()}.xlsx`
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+/** 远程搜索学生 */
|
|
|
+const remoteSearchStudents = async (query: string) => {
|
|
|
+ studentLoading.value = true;
|
|
|
+ try {
|
|
|
+ const params: StudentOptionQuery = {
|
|
|
+ keyword: query.trim(),
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20
|
|
|
+ };
|
|
|
+ const res = await getStudentOptions(params);
|
|
|
+ console.log('学生搜索响应:', res);
|
|
|
+ studentOptions.value = res.rows || [];
|
|
|
+
|
|
|
+ // 调试:检查第一个学生的数据
|
|
|
+ if (studentOptions.value.length > 0) {
|
|
|
+ const firstStudent = studentOptions.value[0];
|
|
|
+ console.log('第一个学生数据:', {
|
|
|
+ name: firstStudent.name,
|
|
|
+ studentNo: firstStudent.studentNo,
|
|
|
+ collegeName: firstStudent.collegeName,
|
|
|
+ majorName: firstStudent.majorName,
|
|
|
+ className: firstStudent.className
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('搜索学生失败:', error);
|
|
|
+ studentOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ studentLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 学生选择器可见性变化处理 */
|
|
|
+const handleStudentSelectVisibleChange = async (visible: boolean) => {
|
|
|
+ studentSelectVisible.value = visible;
|
|
|
+
|
|
|
+ // 当下拉框打开且没有数据时,加载初始数据
|
|
|
+ if (visible && studentOptions.value.length === 0) {
|
|
|
+ await loadInitialStudents();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载初始学生数据 */
|
|
|
+const loadInitialStudents = async () => {
|
|
|
+ studentLoading.value = true;
|
|
|
+ try {
|
|
|
+ const params: StudentOptionQuery = {
|
|
|
+ keyword: '', // 空关键词获取初始数据
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20
|
|
|
+ };
|
|
|
+ const res = await getStudentOptions(params);
|
|
|
+ console.log('初始学生数据响应:', res);
|
|
|
+ studentOptions.value = res.rows || [];
|
|
|
+
|
|
|
+ // 调试:检查第一个学生的数据
|
|
|
+ if (studentOptions.value.length > 0) {
|
|
|
+ const firstStudent = studentOptions.value[0];
|
|
|
+ console.log('初始数据第一个学生:', {
|
|
|
+ name: firstStudent.name,
|
|
|
+ studentNo: firstStudent.studentNo,
|
|
|
+ collegeName: firstStudent.collegeName,
|
|
|
+ majorName: firstStudent.majorName,
|
|
|
+ className: firstStudent.className
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载初始学生数据失败:', error);
|
|
|
+ studentOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ studentLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 学生选择处理 */
|
|
|
+const handleStudentChange = async (studentId: string | number) => {
|
|
|
+ if (!studentId) {
|
|
|
+ // 清空学生相关信息
|
|
|
+ form.value.studentName = undefined;
|
|
|
+ form.value.studentNo = undefined;
|
|
|
+ form.value.collegeName = undefined;
|
|
|
+ form.value.majorName = undefined;
|
|
|
+ form.value.className = undefined;
|
|
|
+
|
|
|
+ // 清空宿舍信息及选项
|
|
|
+ form.value.campusId = undefined;
|
|
|
+ form.value.campusName = undefined;
|
|
|
+ form.value.areaId = undefined;
|
|
|
+ form.value.areaName = undefined;
|
|
|
+ form.value.buildingId = undefined;
|
|
|
+ form.value.buildingName = undefined;
|
|
|
+ form.value.roomId = undefined;
|
|
|
+ form.value.roomName = undefined;
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+
|
|
|
+ areaOptions.value = [];
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+ bedOptions.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const selectedStudent = studentOptions.value.find((student) => student.id === studentId);
|
|
|
+ if (selectedStudent) {
|
|
|
+ // 填充学生基本信息
|
|
|
+ form.value.studentId = selectedStudent.id;
|
|
|
+ form.value.studentName = selectedStudent.name;
|
|
|
+ form.value.studentNo = selectedStudent.studentNo;
|
|
|
+
|
|
|
+ // 填充学院、专业、班级信息
|
|
|
+ form.value.collegeId = selectedStudent.collegeId;
|
|
|
+ form.value.collegeName = selectedStudent.collegeName;
|
|
|
+ form.value.majorId = selectedStudent.majorId;
|
|
|
+ form.value.majorName = selectedStudent.majorName;
|
|
|
+ form.value.classId = selectedStudent.classId;
|
|
|
+ form.value.className = selectedStudent.className;
|
|
|
+
|
|
|
+ // 填充宿舍信息并级联加载选项
|
|
|
+ if (selectedStudent.dormInfo) {
|
|
|
+ // 填充宿舍信息
|
|
|
+ form.value.campusId = selectedStudent.dormInfo.campusId;
|
|
|
+ form.value.campusName = selectedStudent.dormInfo.campusName;
|
|
|
+ form.value.areaId = selectedStudent.dormInfo.areaId;
|
|
|
+ form.value.areaName = selectedStudent.dormInfo.areaName;
|
|
|
+ form.value.buildingId = selectedStudent.dormInfo.buildingId;
|
|
|
+ form.value.buildingName = selectedStudent.dormInfo.buildingName;
|
|
|
+ form.value.roomId = selectedStudent.dormInfo.roomId;
|
|
|
+ form.value.roomName = selectedStudent.dormInfo.roomName;
|
|
|
+ form.value.bedId = selectedStudent.dormInfo.bedId;
|
|
|
+ form.value.bedName = selectedStudent.dormInfo.bedName;
|
|
|
+
|
|
|
+ // 级联加载对应的选项
|
|
|
+ try {
|
|
|
+ if (selectedStudent.dormInfo.campusId) {
|
|
|
+ await loadAreaOptions(selectedStudent.dormInfo.campusId);
|
|
|
+
|
|
|
+ if (selectedStudent.dormInfo.areaId) {
|
|
|
+ await loadBuildingOptions(selectedStudent.dormInfo.areaId);
|
|
|
+
|
|
|
+ if (selectedStudent.dormInfo.buildingId) {
|
|
|
+ await loadRoomOptions(selectedStudent.dormInfo.buildingId);
|
|
|
+
|
|
|
+ if (selectedStudent.dormInfo.roomId) {
|
|
|
+ await loadBedOptions(selectedStudent.dormInfo.roomId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('级联加载宿舍选项失败:', error);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果宿舍信息为空,清空宿舍相关字段
|
|
|
+ form.value.campusId = undefined;
|
|
|
+ form.value.campusName = undefined;
|
|
|
+ form.value.areaId = undefined;
|
|
|
+ form.value.areaName = undefined;
|
|
|
+ form.value.buildingId = undefined;
|
|
|
+ form.value.buildingName = undefined;
|
|
|
+ form.value.roomId = undefined;
|
|
|
+ form.value.roomName = undefined;
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+
|
|
|
+ areaOptions.value = [];
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+ bedOptions.value = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载校区选项 */
|
|
|
+const loadCampusOptions = async () => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await getCampusOptions();
|
|
|
+ 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.value.areaId = undefined;
|
|
|
+ form.value.areaName = undefined;
|
|
|
+ form.value.buildingId = undefined;
|
|
|
+ form.value.buildingName = undefined;
|
|
|
+ form.value.roomId = undefined;
|
|
|
+ form.value.roomName = undefined;
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+
|
|
|
+ areaOptions.value = [];
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+ bedOptions.value = [];
|
|
|
+
|
|
|
+ if (campusId) {
|
|
|
+ // 设置校区名称
|
|
|
+ const selectedCampus = campusOptions.value.find((campus) => campus.id === campusId);
|
|
|
+ if (selectedCampus) {
|
|
|
+ form.value.campusId = campusId;
|
|
|
+ form.value.campusName = selectedCampus.campusName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载宿舍区选项
|
|
|
+ await loadAreaOptions(campusId);
|
|
|
+ } else {
|
|
|
+ form.value.campusId = undefined;
|
|
|
+ form.value.campusName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载宿舍区选项 */
|
|
|
+const loadAreaOptions = async (campusId: string | number) => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await getAreaOptions(campusId);
|
|
|
+ areaOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载宿舍区选项失败:', error);
|
|
|
+ areaOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 宿舍区选择变化处理 */
|
|
|
+const handleAreaChange = async (areaId: string | number) => {
|
|
|
+ // 清空下级选项
|
|
|
+ form.value.buildingId = undefined;
|
|
|
+ form.value.buildingName = undefined;
|
|
|
+ form.value.roomId = undefined;
|
|
|
+ form.value.roomName = undefined;
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+
|
|
|
+ buildingOptions.value = [];
|
|
|
+ roomOptions.value = [];
|
|
|
+ bedOptions.value = [];
|
|
|
+
|
|
|
+ if (areaId) {
|
|
|
+ // 设置宿舍区名称
|
|
|
+ const selectedArea = areaOptions.value.find((area) => area.id === areaId);
|
|
|
+ if (selectedArea) {
|
|
|
+ form.value.areaId = areaId;
|
|
|
+ form.value.areaName = selectedArea.areaName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载宿舍楼选项
|
|
|
+ await loadBuildingOptions(areaId);
|
|
|
+ } else {
|
|
|
+ form.value.areaId = undefined;
|
|
|
+ form.value.areaName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载宿舍楼选项 */
|
|
|
+const loadBuildingOptions = async (areaId: string | number) => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await getBuildingOptions(areaId);
|
|
|
+ buildingOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载宿舍楼选项失败:', error);
|
|
|
+ buildingOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 宿舍楼选择变化处理 */
|
|
|
+const handleBuildingChange = async (buildingId: string | number) => {
|
|
|
+ // 清空下级选项
|
|
|
+ form.value.roomId = undefined;
|
|
|
+ form.value.roomName = undefined;
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+
|
|
|
+ roomOptions.value = [];
|
|
|
+ bedOptions.value = [];
|
|
|
+
|
|
|
+ if (buildingId) {
|
|
|
+ // 设置宿舍楼名称
|
|
|
+ const selectedBuilding = buildingOptions.value.find((building) => building.id === buildingId);
|
|
|
+ if (selectedBuilding) {
|
|
|
+ form.value.buildingId = buildingId;
|
|
|
+ form.value.buildingName = selectedBuilding.buildingName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载房间选项
|
|
|
+ await loadRoomOptions(buildingId);
|
|
|
+ } else {
|
|
|
+ form.value.buildingId = undefined;
|
|
|
+ form.value.buildingName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载房间选项 */
|
|
|
+const loadRoomOptions = async (buildingId: string | number) => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await getRoomOptions(buildingId);
|
|
|
+ roomOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载房间选项失败:', error);
|
|
|
+ roomOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 房间选择变化处理 */
|
|
|
+const handleRoomChange = async (roomId: string | number) => {
|
|
|
+ // 清空下级选项
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+
|
|
|
+ bedOptions.value = [];
|
|
|
+
|
|
|
+ if (roomId) {
|
|
|
+ // 设置房间名称
|
|
|
+ const selectedRoom = roomOptions.value.find((room) => room.id === roomId);
|
|
|
+ if (selectedRoom) {
|
|
|
+ form.value.roomId = roomId;
|
|
|
+ form.value.roomName = selectedRoom.roomName;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载床位选项
|
|
|
+ await loadBedOptions(roomId);
|
|
|
+ } else {
|
|
|
+ form.value.roomId = undefined;
|
|
|
+ form.value.roomName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 加载床位选项 */
|
|
|
+const loadBedOptions = async (roomId: string | number) => {
|
|
|
+ try {
|
|
|
+ dormLoading.value = true;
|
|
|
+ const res = await getBedOptions(roomId);
|
|
|
+ bedOptions.value = res.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载床位选项失败:', error);
|
|
|
+ bedOptions.value = [];
|
|
|
+ } finally {
|
|
|
+ dormLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 床位选择变化处理 */
|
|
|
+const handleBedChange = (bedId: string | number) => {
|
|
|
+ if (bedId) {
|
|
|
+ // 设置床位名称
|
|
|
+ const selectedBed = bedOptions.value.find((bed) => bed.id === bedId);
|
|
|
+ if (selectedBed) {
|
|
|
+ form.value.bedId = bedId;
|
|
|
+ form.value.bedName = selectedBed.bedName;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ form.value.bedId = undefined;
|
|
|
+ form.value.bedName = undefined;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 修改时级联加载宿舍选项数据 */
|
|
|
+const loadCascadeOptionsForUpdate = async (formData: DormViolationForm) => {
|
|
|
+ try {
|
|
|
+ // 如果有校区ID,加载宿舍区选项
|
|
|
+ if (formData.campusId) {
|
|
|
+ await loadAreaOptions(formData.campusId);
|
|
|
+
|
|
|
+ // 如果有宿舍区ID,加载宿舍楼选项
|
|
|
+ if (formData.areaId) {
|
|
|
+ await loadBuildingOptions(formData.areaId);
|
|
|
+
|
|
|
+ // 如果有宿舍楼ID,加载房间选项
|
|
|
+ if (formData.buildingId) {
|
|
|
+ await loadRoomOptions(formData.buildingId);
|
|
|
+
|
|
|
+ // 如果有房间ID,加载床位选项
|
|
|
+ if (formData.roomId) {
|
|
|
+ await loadBedOptions(formData.roomId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('修改时级联加载宿舍选项失败:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 文件类型判断
|
|
|
+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;
|
|
|
+ }
|
|
|
+ // 如果是已有的附件,使用文件的ossId
|
|
|
+ else if (file.ossId) {
|
|
|
+ downloadUrl = file.ossId;
|
|
|
+ }
|
|
|
+ // 如果是本地文件,直接使用raw文件
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 对于服务器文件,使用fetch获取内容强制下载
|
|
|
+ try {
|
|
|
+ const loading = ElLoading.service({
|
|
|
+ text: '正在下载文件...',
|
|
|
+ target: document.body
|
|
|
+ });
|
|
|
+
|
|
|
+ const response = await request({
|
|
|
+ url: '/resource/oss/download/' + downloadUrl,
|
|
|
+ method: 'get',
|
|
|
+ responseType: 'blob',
|
|
|
+ timeout: 300000 // 300秒超时
|
|
|
+ });
|
|
|
+
|
|
|
+ // 验证响应数据
|
|
|
+ if (!response) {
|
|
|
+ throw new Error('响应数据为空');
|
|
|
+ }
|
|
|
+ console.log('response', response);
|
|
|
+
|
|
|
+ // 检查response的结构,判断是直接的Blob还是包含data属性的响应对象
|
|
|
+ let blobData: Blob;
|
|
|
+ if (response instanceof Blob) {
|
|
|
+ // 如果response本身就是Blob对象
|
|
|
+ blobData = response;
|
|
|
+ } else if (response.data instanceof Blob) {
|
|
|
+ // 如果response.data是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 {
|
|
|
+ // 如果有附件ID,则获取附件信息
|
|
|
+ if (form.value.attachmentOssIds && form.value.attachmentOssIds.toString().trim()) {
|
|
|
+ console.log('开始处理附件数据:', form.value.attachmentOssIds);
|
|
|
+
|
|
|
+ // 将逗号分隔的字符串转换为数组
|
|
|
+ const ossIdsArray = form.value.attachmentOssIds
|
|
|
+ .toString()
|
|
|
+ .split(',')
|
|
|
+ .map((id) => id.trim())
|
|
|
+ .filter((id) => id);
|
|
|
+
|
|
|
+ // 调用接口获取附件信息
|
|
|
+ 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 = [];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('没有附件数据,清空附件列表');
|
|
|
+ attachmentList.value = [];
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('处理附件数据失败:', error);
|
|
|
+ ElMessage.error('获取附件信息失败,请稍后重试');
|
|
|
+ attachmentList.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+ // 加载校区选项
|
|
|
+ loadCampusOptions();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.student-option {
|
|
|
+ padding: 2px 0;
|
|
|
+ min-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.student-main {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ margin-bottom: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.student-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.student-no {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #606266;
|
|
|
+ /* background: #f5f7fa; */
|
|
|
+ padding: 0px 3px;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.student-gender {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.student-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #909399;
|
|
|
+ margin-top: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item:not(:last-child)::after {
|
|
|
+ content: '·';
|
|
|
+ margin-left: 6px;
|
|
|
+ color: #c0c4cc;
|
|
|
+}
|
|
|
+
|
|
|
+/* 全局样式,确保下拉选项正确显示 */
|
|
|
+:global(.student-select-dropdown .el-select-dropdown__item) {
|
|
|
+ height: auto !important;
|
|
|
+ min-height: 32px !important;
|
|
|
+ padding: 4px 12px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 附件上传容器样式 */
|
|
|
+.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;
|
|
|
+ /* background: rgba(255, 255, 255, 0.9); */
|
|
|
+ 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;
|
|
|
+}
|
|
|
+</style>
|