|
|
@@ -0,0 +1,1866 @@
|
|
|
+<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="删除标志" prop="deleted">
|
|
|
+ <el-input v-model="queryParams.deleted" placeholder="请输入删除标志" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学生ID,关联xg_student_msg.id" prop="studentId">
|
|
|
+ <el-input v-model="queryParams.studentId" placeholder="请输入学生ID,关联xg_student_msg.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="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
|
|
+ <el-option label="有效" value="valid" />
|
|
|
+ <el-option label="失效" value="invalid" />
|
|
|
+ </el-select>
|
|
|
+ </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="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="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="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,关联xg_dorm_campus.id" prop="campusId">
|
|
|
+ <el-input v-model="queryParams.campusId" placeholder="请输入校区ID,关联xg_dorm_campus.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,关联xg_dorm_area.id" prop="areaId">
|
|
|
+ <el-input v-model="queryParams.areaId" placeholder="请输入宿舍区ID,关联xg_dorm_area.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,关联xg_dorm_building.id" prop="buildingId">
|
|
|
+ <el-input v-model="queryParams.buildingId" placeholder="请输入宿舍楼ID,关联xg_dorm_building.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,关联xg_dorm_room.id" prop="roomId">
|
|
|
+ <el-input v-model="queryParams.roomId" placeholder="请输入房间ID,关联xg_dorm_room.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,关联xg_dorm_bed.id" prop="bedId">
|
|
|
+ <el-input v-model="queryParams.bedId" placeholder="请输入床位ID,关联xg_dorm_bed.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="holidayType">
|
|
|
+ <el-select v-model="queryParams.holidayType" placeholder="请选择假期类型" clearable>
|
|
|
+ <el-option v-for="dict in xg_holiday_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="申请留宿开始日期" prop="applyStartDate">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.applyStartDate"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择申请留宿开始日期"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="申请留宿结束日期" prop="applyEndDate">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.applyEndDate"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择申请留宿结束日期"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="留宿原因" prop="stayReason">
|
|
|
+ <el-input v-model="queryParams.stayReason" placeholder="请输入留宿原因" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="留宿原因类型" prop="stayReasonType">
|
|
|
+ <el-select v-model="queryParams.stayReasonType" placeholder="请选择留宿原因类型" clearable>
|
|
|
+ <el-option v-for="dict in xg_stay_reason_type" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学生联系电话" prop="studentPhone">
|
|
|
+ <el-input v-model="queryParams.studentPhone" placeholder="请输入学生联系电话" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="紧急联系人姓名" prop="emergencyContact">
|
|
|
+ <el-input v-model="queryParams.emergencyContact" placeholder="请输入紧急联系人姓名" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="紧急联系人电话" prop="emergencyPhone">
|
|
|
+ <el-input v-model="queryParams.emergencyPhone" placeholder="请输入紧急联系人电话" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="家长同意" prop="parentConsent">
|
|
|
+ <el-select v-model="queryParams.parentConsent" placeholder="请选择家长同意" clearable>
|
|
|
+ <el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </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="扩展字段1" prop="extField1">
|
|
|
+ <el-input v-model="queryParams.extField1" placeholder="请输入扩展字段1" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="扩展字段2" prop="extField2">
|
|
|
+ <el-input v-model="queryParams.extField2" placeholder="请输入扩展字段2" clearable @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="扩展字段3" prop="extField3">
|
|
|
+ <el-input v-model="queryParams.extField3" placeholder="请输入扩展字段3" 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="['holidayStay:holidayStay:add']">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['holidayStay:holidayStay:edit']"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
+ <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['holidayStay:holidayStay:remove']"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-col> -->
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
+ <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['holidayStay:holidayStay: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="holidayStayList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="主键ID" align="center" prop="id" v-if="false" />
|
|
|
+ <el-table-column label="删除标志" align="center" prop="deleted" v-if="false" />
|
|
|
+ <el-table-column label="学生ID,关联xg_student_msg.id" align="center" prop="studentId" v-if="false" />
|
|
|
+ <el-table-column label="学生姓名" align="center" prop="studentName" />
|
|
|
+ <el-table-column label="学号" align="center" prop="studentNo" />
|
|
|
+ <el-table-column label="班级ID" align="center" prop="classId" v-if="false" />
|
|
|
+ <el-table-column label="班级名称" align="center" prop="className" />
|
|
|
+ <el-table-column label="专业ID" align="center" prop="majorId" v-if="false" />
|
|
|
+ <el-table-column label="专业名称" align="center" prop="majorName" />
|
|
|
+ <el-table-column label="学院ID" align="center" prop="collegeId" v-if="false" />
|
|
|
+ <el-table-column label="学院名称" align="center" prop="collegeName" />
|
|
|
+ <el-table-column label="校区ID,关联xg_dorm_campus.id" align="center" prop="campusId" v-if="false" />
|
|
|
+ <el-table-column label="校区" align="center" prop="campusName" />
|
|
|
+ <el-table-column label="宿舍区ID,关联xg_dorm_area.id" align="center" prop="areaId" v-if="false" />
|
|
|
+ <el-table-column label="宿舍区" align="center" prop="areaName" />
|
|
|
+ <el-table-column label="宿舍楼ID,关联xg_dorm_building.id" align="center" prop="buildingId" v-if="false" />
|
|
|
+ <el-table-column label="宿舍楼" align="center" prop="buildingName" />
|
|
|
+ <el-table-column label="房间ID,关联xg_dorm_room.id" align="center" prop="roomId" v-if="false" />
|
|
|
+ <el-table-column label="房间名称" align="center" prop="roomName" />
|
|
|
+ <el-table-column label="床位ID,关联xg_dorm_bed.id" align="center" prop="bedId" v-if="false" />
|
|
|
+ <el-table-column label="床位名称" align="center" prop="bedName" />
|
|
|
+ <el-table-column label="假期类型" align="center" prop="holidayType">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :options="xg_holiday_type" :value="scope.row.holidayType" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="留宿开始日期" align="center" prop="applyStartDate" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ parseTime(scope.row.applyStartDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="留宿结束日期" align="center" prop="applyEndDate" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ parseTime(scope.row.applyEndDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="留宿原因" align="center" prop="stayReason" v-if="false" />
|
|
|
+ <el-table-column label="留宿原因类型" align="center" prop="stayReasonType" v-if="false">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :options="xg_stay_reason_type" :value="scope.row.stayReasonType" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="学生联系电话" align="center" prop="studentPhone" />
|
|
|
+ <el-table-column label="紧急联系人姓名" align="center" prop="emergencyContact" v-if="false" />
|
|
|
+ <el-table-column label="紧急联系人电话" align="center" prop="emergencyPhone" />
|
|
|
+ <el-table-column label="家长同意" align="center" prop="parentConsent" v-if="false">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :options="sys_yesno" :value="scope.row.parentConsent" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="附件OSS文件ID,多个用逗号分隔" align="center" prop="attachmentOssIds" v-if="false" />
|
|
|
+ <el-table-column label="扩展字段1" align="center" prop="extField1" v-if="false" />
|
|
|
+ <el-table-column label="扩展字段2" align="center" prop="extField2" v-if="false" />
|
|
|
+ <el-table-column label="扩展字段3" align="center" prop="extField3" v-if="false" />
|
|
|
+ <el-table-column label="备注信息" align="center" prop="remark" />
|
|
|
+ <el-table-column label="状态" align="center" prop="status" width="90">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag :type="getStatusType(scope.row)" size="small">
|
|
|
+ {{ getStatusText(scope.row) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tooltip content="修改" placement="top">
|
|
|
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['holidayStay:holidayStay:edit']"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ icon="Delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['holidayStay:holidayStay: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="holidayStayFormRef" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 左列:学生基本信息 -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <!-- <el-form-item label="删除标志" prop="deleted">
|
|
|
+ <el-input v-model="form.deleted" placeholder="请输入删除标志" />
|
|
|
+ </el-form-item> -->
|
|
|
+ <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="学生联系电话" prop="studentPhone">
|
|
|
+ <el-input v-model="form.studentPhone" 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="holidayType">
|
|
|
+ <el-select v-model="form.holidayType" placeholder="请选择假期类型" style="width: 100%">
|
|
|
+ <el-option v-for="dict in xg_holiday_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="stayReasonType">
|
|
|
+ <el-select v-model="form.stayReasonType" placeholder="请选择留宿原因类型" style="width: 100%">
|
|
|
+ <el-option v-for="dict in xg_stay_reason_type" :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="applyStartDate">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="form.applyStartDate"
|
|
|
+ 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="12">
|
|
|
+ <el-form-item label="留宿结束日期" prop="applyEndDate">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="form.applyEndDate"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ placeholder="请选择留宿结束日期"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 联系信息 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="紧急联系人姓名" prop="emergencyContact">
|
|
|
+ <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="紧急联系人电话" prop="emergencyPhone">
|
|
|
+ <el-input v-model="form.emergencyPhone" placeholder="请输入紧急联系人电话" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="家长同意" prop="parentConsent">
|
|
|
+ <el-select v-model="form.parentConsent" placeholder="请选择家长同意" style="width: 100%">
|
|
|
+ <el-option v-for="dict in sys_yesno" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 完整宽度的字段 -->
|
|
|
+ <el-form-item label="留宿原因" prop="stayReason">
|
|
|
+ <el-input v-model="form.stayReason" 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="HolidayStay" 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 { useUserStore } from '@/store/modules/user';
|
|
|
+import {
|
|
|
+ listHolidayStay,
|
|
|
+ getHolidayStay,
|
|
|
+ delHolidayStay,
|
|
|
+ addHolidayStay,
|
|
|
+ updateHolidayStay,
|
|
|
+ getStudentOptions,
|
|
|
+ getCampusOptions,
|
|
|
+ getAreaOptions,
|
|
|
+ getBuildingOptions,
|
|
|
+ getRoomOptions,
|
|
|
+ getBedOptions
|
|
|
+} from '@/api/xg/xgss/holidayStay/holidayStay/index-sg';
|
|
|
+import {
|
|
|
+ HolidayStayVO,
|
|
|
+ HolidayStayQuery,
|
|
|
+ HolidayStayForm,
|
|
|
+ StudentOptionVO,
|
|
|
+ StudentOptionQuery,
|
|
|
+ CampusOptionVO,
|
|
|
+ AreaOptionVO,
|
|
|
+ BuildingOptionVO,
|
|
|
+ RoomOptionVO,
|
|
|
+ BedOptionVO
|
|
|
+} from '@/api/xg/xgss/holidayStay/holidayStay/types-sg';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const { xg_holiday_type, xg_stay_reason_type, sys_yesno } = toRefs<any>(proxy?.useDict('xg_holiday_type', 'xg_stay_reason_type', 'sys_yesno'));
|
|
|
+
|
|
|
+// 用户store - 用于获取当前登录用户信息,实现权限控制
|
|
|
+const userStore = useUserStore();
|
|
|
+
|
|
|
+const holidayStayList = ref<HolidayStayVO[]>([]);
|
|
|
+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 holidayStayFormRef = ref<ElFormInstance>();
|
|
|
+
|
|
|
+const dialog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+
|
|
|
+const initFormData: HolidayStayForm = {
|
|
|
+ id: undefined,
|
|
|
+ deleted: undefined,
|
|
|
+ studentId: undefined,
|
|
|
+ studentName: undefined,
|
|
|
+ studentNo: undefined,
|
|
|
+ classId: undefined,
|
|
|
+ className: undefined,
|
|
|
+ majorId: undefined,
|
|
|
+ majorName: undefined,
|
|
|
+ collegeId: undefined,
|
|
|
+ collegeName: undefined,
|
|
|
+ campusId: undefined,
|
|
|
+ campusName: undefined,
|
|
|
+ areaId: undefined,
|
|
|
+ areaName: undefined,
|
|
|
+ buildingId: undefined,
|
|
|
+ buildingName: undefined,
|
|
|
+ roomId: undefined,
|
|
|
+ roomName: undefined,
|
|
|
+ bedId: undefined,
|
|
|
+ bedName: undefined,
|
|
|
+ holidayType: undefined,
|
|
|
+ applyStartDate: new Date().toISOString().slice(0, 19).replace('T', ' '), // 默认当前日期时间
|
|
|
+ applyEndDate: undefined,
|
|
|
+ stayReason: undefined,
|
|
|
+ stayReasonType: 'other', // 默认其他原因
|
|
|
+ studentPhone: undefined,
|
|
|
+ emergencyContact: undefined,
|
|
|
+ emergencyPhone: undefined,
|
|
|
+ parentConsent: '1', // 默认是
|
|
|
+ attachmentOssIds: undefined,
|
|
|
+ extField1: undefined,
|
|
|
+ extField2: undefined,
|
|
|
+ extField3: undefined,
|
|
|
+ remark: undefined
|
|
|
+};
|
|
|
+const data = reactive<PageData<HolidayStayForm, HolidayStayQuery>>({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ deleted: undefined,
|
|
|
+ studentId: undefined,
|
|
|
+ studentName: undefined,
|
|
|
+ studentNo: undefined,
|
|
|
+ classId: undefined,
|
|
|
+ className: undefined,
|
|
|
+ majorId: undefined,
|
|
|
+ majorName: undefined,
|
|
|
+ collegeId: undefined,
|
|
|
+ collegeName: undefined,
|
|
|
+ campusId: undefined,
|
|
|
+ campusName: undefined,
|
|
|
+ areaId: undefined,
|
|
|
+ areaName: undefined,
|
|
|
+ buildingId: undefined,
|
|
|
+ buildingName: undefined,
|
|
|
+ roomId: undefined,
|
|
|
+ roomName: undefined,
|
|
|
+ bedId: undefined,
|
|
|
+ bedName: undefined,
|
|
|
+ holidayType: undefined,
|
|
|
+ applyStartDate: undefined,
|
|
|
+ applyEndDate: undefined,
|
|
|
+ stayReason: undefined,
|
|
|
+ stayReasonType: undefined,
|
|
|
+ studentPhone: undefined,
|
|
|
+ emergencyContact: undefined,
|
|
|
+ emergencyPhone: undefined,
|
|
|
+ parentConsent: undefined,
|
|
|
+ attachmentOssIds: undefined,
|
|
|
+ extField1: undefined,
|
|
|
+ extField2: undefined,
|
|
|
+ extField3: undefined,
|
|
|
+ status: 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' }],
|
|
|
+ applyStartDate: [{ required: true, message: '留宿开始日期不能为空', trigger: 'blur' }],
|
|
|
+ applyEndDate: [{ 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: 'holiday_stay_attachment'
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+/** 查询假期留宿管理列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ // 确保用户信息已加载
|
|
|
+ if (!userStore.userId) {
|
|
|
+ await userStore.getInfo();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理状态过滤逻辑
|
|
|
+ const requestParams = { ...queryParams.value };
|
|
|
+
|
|
|
+ // 添加创建人过滤条件 - 班主任只能看到自己创建的数据
|
|
|
+ requestParams.createBy = userStore.userId;
|
|
|
+
|
|
|
+ // 根据状态设置时间过滤条件
|
|
|
+ if (requestParams.status) {
|
|
|
+ const currentTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
|
|
|
+
|
|
|
+ if (requestParams.status === 'valid') {
|
|
|
+ // 查询有效状态:结束时间大于等于当前时间
|
|
|
+ requestParams.params = {
|
|
|
+ ...requestParams.params,
|
|
|
+ statusType: 'valid',
|
|
|
+ currentTime: currentTime
|
|
|
+ };
|
|
|
+ } else if (requestParams.status === 'invalid') {
|
|
|
+ // 查询失效状态:结束时间小于当前时间
|
|
|
+ requestParams.params = {
|
|
|
+ ...requestParams.params,
|
|
|
+ statusType: 'invalid',
|
|
|
+ currentTime: currentTime
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移除status参数,因为后端不需要这个字段
|
|
|
+ delete requestParams.status;
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await listHolidayStay(requestParams);
|
|
|
+ holidayStayList.value = res.rows;
|
|
|
+ total.value = res.total;
|
|
|
+ loading.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ reset();
|
|
|
+ dialog.visible = false;
|
|
|
+};
|
|
|
+
|
|
|
+/** 表单重置 */
|
|
|
+const reset = () => {
|
|
|
+ form.value = { ...initFormData };
|
|
|
+ holidayStayFormRef.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: HolidayStayVO[]) => {
|
|
|
+ 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?: HolidayStayVO) => {
|
|
|
+ reset();
|
|
|
+ const _id = row?.id || ids.value[0];
|
|
|
+ const res = await getHolidayStay(_id);
|
|
|
+ Object.assign(form.value, res.data);
|
|
|
+
|
|
|
+ // 根据已有数据级联加载宿舍选项
|
|
|
+ await loadCascadeOptionsForUpdate(form.value);
|
|
|
+
|
|
|
+ // 处理附件数据
|
|
|
+ await handleAttachmentData();
|
|
|
+
|
|
|
+ dialog.visible = true;
|
|
|
+ dialog.title = '修改假期留宿管理';
|
|
|
+};
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+const submitForm = () => {
|
|
|
+ holidayStayFormRef.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 updateHolidayStay(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ } else {
|
|
|
+ await addHolidayStay(form.value).finally(() => (buttonLoading.value = false));
|
|
|
+ }
|
|
|
+ proxy?.$modal.msgSuccess('操作成功');
|
|
|
+ dialog.visible = false;
|
|
|
+ await getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+const handleDelete = async (row?: HolidayStayVO) => {
|
|
|
+ const _ids = row?.id || ids.value;
|
|
|
+ await proxy?.$modal.confirm('是否确认删除假期留宿管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
|
|
|
+ await delHolidayStay(_ids);
|
|
|
+ proxy?.$modal.msgSuccess('删除成功');
|
|
|
+ await getList();
|
|
|
+};
|
|
|
+
|
|
|
+/** 导出按钮操作 */
|
|
|
+const handleExport = () => {
|
|
|
+ proxy?.download(
|
|
|
+ 'holidayStay/holidayStay/export',
|
|
|
+ {
|
|
|
+ ...queryParams.value
|
|
|
+ },
|
|
|
+ `holidayStay_${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.studentPhone = 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.studentPhone = selectedStudent.phone;
|
|
|
+
|
|
|
+ // 填充学院、专业、班级信息
|
|
|
+ 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: HolidayStayForm) => {
|
|
|
+ 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 getStatusText = (row: HolidayStayVO) => {
|
|
|
+ if (!row.applyEndDate) {
|
|
|
+ return '未知';
|
|
|
+ }
|
|
|
+
|
|
|
+ const currentTime = new Date();
|
|
|
+ const endTime = new Date(row.applyEndDate);
|
|
|
+
|
|
|
+ return currentTime > endTime ? '失效' : '有效';
|
|
|
+};
|
|
|
+
|
|
|
+/** 获取状态标签类型 */
|
|
|
+const getStatusType = (row: HolidayStayVO) => {
|
|
|
+ if (!row.applyEndDate) {
|
|
|
+ return 'info';
|
|
|
+ }
|
|
|
+
|
|
|
+ const currentTime = new Date();
|
|
|
+ const endTime = new Date(row.applyEndDate);
|
|
|
+
|
|
|
+ return currentTime > endTime ? 'danger' : 'success';
|
|
|
+};
|
|
|
+
|
|
|
+// 文件类型判断
|
|
|
+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
|
|
|
+ .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>
|