fix
This commit is contained in:
吴红兵
@@ -1,292 +1,273 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="班级概况"
|
||||
v-model="visible"
|
||||
:close-on-click-modal="false"
|
||||
draggable
|
||||
width="1400px">
|
||||
<div v-loading="loading">
|
||||
<!-- 基本信息 -->
|
||||
<el-descriptions :column="3" border v-if="detailData" class="mb20">
|
||||
<el-descriptions-item label="班号">{{ detailData.classNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级名称">{{ detailData.className || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级规范名称">{{ detailData.classProName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="学院">{{ detailData.deptName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班主任">{{ detailData.teacherRealName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班主任电话">{{ detailData.teacherTel || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="入学年份">{{ detailData.grade || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="入学时间">{{ detailData.enterDate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级状态">
|
||||
<span>{{ detailData.classStatus === '0' ? '正常' : detailData.classStatus === '1' ? '离校' : '-' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="班级人数/原始人数">
|
||||
{{ detailData.stuNum || 0 }}/{{ detailData.preStuNum || 0 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="流失率">
|
||||
<span>{{ detailData.stuLoseRate ? `${detailData.stuLoseRate}%` : '-' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联院">
|
||||
<span>{{ detailData.isUnion === 1 ? '是' : detailData.isUnion === 0 ? '否' : '-' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="门禁规则" :span="3">{{ detailData.ruleName || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-dialog title="班级概况" v-model="visible" :close-on-click-modal="false" draggable width="1400px">
|
||||
<div v-loading="loading">
|
||||
<!-- 基本信息 -->
|
||||
<el-descriptions :column="3" border v-if="detailData" class="mb20">
|
||||
<el-descriptions-item label="班号">{{ detailData.classNo || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级名称">{{ detailData.className || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级规范名称">{{ detailData.classProName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="学院">{{ detailData.deptName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班主任">{{ detailData.teacherRealName || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班主任电话">{{ detailData.teacherTel || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="入学年份">{{ detailData.grade || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="入学时间">{{ detailData.enterDate || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级状态">
|
||||
<span>{{ detailData.classStatus === '0' ? '正常' : detailData.classStatus === '1' ? '离校' : '-' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="班级人数/原始人数"> {{ detailData.stuNum || 0 }}/{{ detailData.preStuNum || 0 }} </el-descriptions-item>
|
||||
<el-descriptions-item label="流失率">
|
||||
<span>{{ detailData.stuLoseRate ? `${detailData.stuLoseRate}%` : '-' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联院">
|
||||
<span>{{ detailData.isUnion === 1 ? '是' : detailData.isUnion === 0 ? '否' : '-' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="门禁规则" :span="3">{{ detailData.ruleName || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 详细信息 - 使用 tabs 展示六个接口的数据 -->
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<el-tab-pane label="班级荣誉" name="honor">
|
||||
<el-table :data="honorList" border style="width: 100%" v-loading="honorLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="title" label="标题" show-overflow-tooltip />
|
||||
<el-table-column prop="author" label="作者" width="120" />
|
||||
<el-table-column prop="createTime" label="更新时间" width="120" />
|
||||
<el-table-column prop="belong" label="归档级别" width="120" />
|
||||
</el-table>
|
||||
<div v-if="honorList.length === 0 && !honorLoading" style="text-align: center; padding: 20px; color: #909399;">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- 详细信息 - 使用 tabs 展示六个接口的数据 -->
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<el-tab-pane label="班级荣誉" name="honor">
|
||||
<el-table :data="honorList" border style="width: 100%" v-loading="honorLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="title" label="标题" show-overflow-tooltip />
|
||||
<el-table-column prop="author" label="作者" width="120" />
|
||||
<el-table-column prop="createTime" label="更新时间" width="120" />
|
||||
<el-table-column prop="belong" label="归档级别" width="120" />
|
||||
</el-table>
|
||||
<div v-if="honorList.length === 0 && !honorLoading" style="text-align: center; padding: 20px; color: #909399">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="班级宣传" name="publicity">
|
||||
<el-table :data="publicityList" border style="width: 100%" v-loading="publicityLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="title" label="标题" show-overflow-tooltip />
|
||||
<el-table-column prop="author" label="作者" width="120" />
|
||||
<el-table-column prop="createTime" label="更新时间" width="120" />
|
||||
<el-table-column prop="belong" label="归档级别" width="120" />
|
||||
<el-table-column prop="website" label="网址" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="publicityList.length === 0 && !publicityLoading" style="text-align: center; padding: 20px; color: #909399;">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="班级宣传" name="publicity">
|
||||
<el-table :data="publicityList" border style="width: 100%" v-loading="publicityLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="title" label="标题" show-overflow-tooltip />
|
||||
<el-table-column prop="author" label="作者" width="120" />
|
||||
<el-table-column prop="createTime" label="更新时间" width="120" />
|
||||
<el-table-column prop="belong" label="归档级别" width="120" />
|
||||
<el-table-column prop="website" label="网址" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="publicityList.length === 0 && !publicityLoading" style="text-align: center; padding: 20px; color: #909399">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="教室分配" name="classroom">
|
||||
<el-table :data="classroomList" border style="width: 100%" v-loading="classroomLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="buildingNo" label="教学楼号" show-overflow-tooltip />
|
||||
<el-table-column prop="roomNo" label="教室号" show-overflow-tooltip />
|
||||
<el-table-column prop="roomName" label="教室名称" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="classroomList.length === 0 && !classroomLoading" style="text-align: center; padding: 20px; color: #909399;">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="教室分配" name="classroom">
|
||||
<el-table :data="classroomList" border style="width: 100%" v-loading="classroomLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="buildingNo" label="教学楼号" show-overflow-tooltip />
|
||||
<el-table-column prop="roomNo" label="教室号" show-overflow-tooltip />
|
||||
<el-table-column prop="roomName" label="教室名称" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="classroomList.length === 0 && !classroomLoading" style="text-align: center; padding: 20px; color: #909399">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="学生数量" name="studentNum">
|
||||
<el-table :data="studentNumList" border style="width: 100%" v-loading="studentNumLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
|
||||
<el-table-column prop="realName" label="姓名" show-overflow-tooltip />
|
||||
<el-table-column prop="sex" label="性别" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.sex === '1' ? '男' : scope.row.sex === '0' ? '女' : '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="studentNumList.length === 0 && !studentNumLoading" style="text-align: center; padding: 20px; color: #909399;">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="学生数量" name="studentNum">
|
||||
<el-table :data="studentNumList" border style="width: 100%" v-loading="studentNumLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
|
||||
<el-table-column prop="realName" label="姓名" show-overflow-tooltip />
|
||||
<el-table-column prop="sex" label="性别" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.sex === '1' ? '男' : scope.row.sex === '0' ? '女' : '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="电话" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="studentNumList.length === 0 && !studentNumLoading" style="text-align: center; padding: 20px; color: #909399">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="宿舍学生" name="dormStudent">
|
||||
<el-table :data="dormStudentList" border style="width: 100%" v-loading="dormStudentLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="buildingNo" label="楼号" show-overflow-tooltip />
|
||||
<el-table-column prop="roomNo" label="宿舍号" show-overflow-tooltip />
|
||||
<el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
|
||||
<el-table-column prop="realName" label="姓名" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="dormStudentList.length === 0 && !dormStudentLoading" style="text-align: center; padding: 20px; color: #909399;">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="宿舍学生" name="dormStudent">
|
||||
<el-table :data="dormStudentList" border style="width: 100%" v-loading="dormStudentLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="buildingNo" label="楼号" show-overflow-tooltip />
|
||||
<el-table-column prop="roomNo" label="宿舍号" show-overflow-tooltip />
|
||||
<el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
|
||||
<el-table-column prop="realName" label="姓名" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div v-if="dormStudentList.length === 0 && !dormStudentLoading" style="text-align: center; padding: 20px; color: #909399">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="惩罚记录" name="punish">
|
||||
<el-table :data="punishList" border style="width: 100%" v-loading="punishLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
|
||||
<el-table-column prop="realName" label="姓名" show-overflow-tooltip />
|
||||
<el-table-column prop="punishType" label="惩罚类型" show-overflow-tooltip />
|
||||
<el-table-column prop="punishReason" label="惩罚原因" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="惩罚时间" width="120" />
|
||||
</el-table>
|
||||
<div v-if="punishList.length === 0 && !punishLoading" style="text-align: center; padding: 20px; color: #909399;">
|
||||
暂无数据
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">关 闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-tab-pane label="惩罚记录" name="punish">
|
||||
<el-table :data="punishList" border style="width: 100%" v-loading="punishLoading">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="stuNo" label="学号" show-overflow-tooltip />
|
||||
<el-table-column prop="realName" label="姓名" show-overflow-tooltip />
|
||||
<el-table-column prop="punishType" label="惩罚类型" show-overflow-tooltip />
|
||||
<el-table-column prop="punishReason" label="惩罚原因" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="惩罚时间" width="120" />
|
||||
</el-table>
|
||||
<div v-if="punishList.length === 0 && !punishLoading" style="text-align: center; padding: 20px; color: #909399">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">关 闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="BasicClassDetail">
|
||||
import { ref } from 'vue'
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { queryClassHonorByClassCode } from '/@/api/stuwork/classhonor'
|
||||
import { queryDataByClassCode } from '/@/api/stuwork/classpublicity'
|
||||
import { getClassRoomByClassCode } from '/@/api/stuwork/teachclassroomassign'
|
||||
import { queryStuNumByClassCode } from '/@/api/basic/basicstudent'
|
||||
import { fearchStuNumByClassCode } from '/@/api/stuwork/dormroomstudent'
|
||||
import { queryPunlishNumByClass } from '/@/api/stuwork/stupunlish'
|
||||
import { ref } from 'vue';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { queryClassHonorByClassCode } from '/@/api/stuwork/classhonor';
|
||||
import { queryDataByClassCode } from '/@/api/stuwork/classpublicity';
|
||||
import { getClassRoomByClassCode } from '/@/api/stuwork/teachclassroomassign';
|
||||
import { queryStuNumByClassCode } from '/@/api/basic/basicstudent';
|
||||
import { fearchStuNumByClassCode } from '/@/api/stuwork/dormroomstudent';
|
||||
import { queryPunlishNumByClass } from '/@/api/stuwork/stupunlish';
|
||||
|
||||
// 定义变量内容
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const detailData = ref<any>(null)
|
||||
const activeTab = ref('honor')
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const detailData = ref<any>(null);
|
||||
const activeTab = ref('honor');
|
||||
|
||||
// 六个接口的数据
|
||||
const honorList = ref<any[]>([])
|
||||
const honorLoading = ref(false)
|
||||
const publicityList = ref<any[]>([])
|
||||
const publicityLoading = ref(false)
|
||||
const classroomList = ref<any[]>([])
|
||||
const classroomLoading = ref(false)
|
||||
const studentNumList = ref<any[]>([])
|
||||
const studentNumLoading = ref(false)
|
||||
const dormStudentList = ref<any[]>([])
|
||||
const dormStudentLoading = ref(false)
|
||||
const punishList = ref<any[]>([])
|
||||
const punishLoading = ref(false)
|
||||
const honorList = ref<any[]>([]);
|
||||
const honorLoading = ref(false);
|
||||
const publicityList = ref<any[]>([]);
|
||||
const publicityLoading = ref(false);
|
||||
const classroomList = ref<any[]>([]);
|
||||
const classroomLoading = ref(false);
|
||||
const studentNumList = ref<any[]>([]);
|
||||
const studentNumLoading = ref(false);
|
||||
const dormStudentList = ref<any[]>([]);
|
||||
const dormStudentLoading = ref(false);
|
||||
const punishList = ref<any[]>([]);
|
||||
const punishLoading = ref(false);
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = async (rowData: any) => {
|
||||
visible.value = true
|
||||
detailData.value = rowData || null
|
||||
|
||||
// 如果有班级代码，加载六个接口的数据
|
||||
if (rowData?.classCode) {
|
||||
await loadAllData(rowData.classCode)
|
||||
}
|
||||
}
|
||||
visible.value = true;
|
||||
detailData.value = rowData || null;
|
||||
|
||||
// 如果有班级代码，加载六个接口的数据
|
||||
if (rowData?.classCode) {
|
||||
await loadAllData(rowData.classCode);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载所有六个接口的数据
|
||||
const loadAllData = async (classCode: string) => {
|
||||
loading.value = true
|
||||
|
||||
// 并行加载所有接口数据
|
||||
await Promise.all([
|
||||
loadHonorData(classCode),
|
||||
loadPublicityData(classCode),
|
||||
loadClassroomData(classCode),
|
||||
loadStudentNumData(classCode),
|
||||
loadDormStudentData(classCode),
|
||||
loadPunishData(classCode),
|
||||
])
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
loading.value = true;
|
||||
|
||||
// 并行加载所有接口数据
|
||||
await Promise.all([
|
||||
loadHonorData(classCode),
|
||||
loadPublicityData(classCode),
|
||||
loadClassroomData(classCode),
|
||||
loadStudentNumData(classCode),
|
||||
loadDormStudentData(classCode),
|
||||
loadPunishData(classCode),
|
||||
]);
|
||||
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 加载班级荣誉数据
|
||||
const loadHonorData = async (classCode: string) => {
|
||||
honorLoading.value = true
|
||||
try {
|
||||
const res = await queryClassHonorByClassCode(classCode)
|
||||
if (res.data) {
|
||||
honorList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取班级荣誉失败', err)
|
||||
honorList.value = []
|
||||
} finally {
|
||||
honorLoading.value = false
|
||||
}
|
||||
}
|
||||
honorLoading.value = true;
|
||||
try {
|
||||
const res = await queryClassHonorByClassCode(classCode);
|
||||
if (res.data) {
|
||||
honorList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取班级荣誉失败', err);
|
||||
honorList.value = [];
|
||||
} finally {
|
||||
honorLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载班级宣传数据
|
||||
const loadPublicityData = async (classCode: string) => {
|
||||
publicityLoading.value = true
|
||||
try {
|
||||
const res = await queryDataByClassCode(classCode)
|
||||
if (res.data) {
|
||||
publicityList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取班级宣传失败', err)
|
||||
publicityList.value = []
|
||||
} finally {
|
||||
publicityLoading.value = false
|
||||
}
|
||||
}
|
||||
publicityLoading.value = true;
|
||||
try {
|
||||
const res = await queryDataByClassCode(classCode);
|
||||
if (res.data) {
|
||||
publicityList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取班级宣传失败', err);
|
||||
publicityList.value = [];
|
||||
} finally {
|
||||
publicityLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载教室分配数据
|
||||
const loadClassroomData = async (classCode: string) => {
|
||||
classroomLoading.value = true
|
||||
try {
|
||||
const res = await getClassRoomByClassCode(classCode)
|
||||
if (res.data) {
|
||||
classroomList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取教室分配失败', err)
|
||||
classroomList.value = []
|
||||
} finally {
|
||||
classroomLoading.value = false
|
||||
}
|
||||
}
|
||||
classroomLoading.value = true;
|
||||
try {
|
||||
const res = await getClassRoomByClassCode(classCode);
|
||||
if (res.data) {
|
||||
classroomList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取教室分配失败', err);
|
||||
classroomList.value = [];
|
||||
} finally {
|
||||
classroomLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载学生数量数据
|
||||
const loadStudentNumData = async (classCode: string) => {
|
||||
studentNumLoading.value = true
|
||||
try {
|
||||
const res = await queryStuNumByClassCode({ classCode })
|
||||
if (res.data) {
|
||||
studentNumList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取学生数量失败', err)
|
||||
studentNumList.value = []
|
||||
} finally {
|
||||
studentNumLoading.value = false
|
||||
}
|
||||
}
|
||||
studentNumLoading.value = true;
|
||||
try {
|
||||
const res = await queryStuNumByClassCode({ classCode });
|
||||
if (res.data) {
|
||||
studentNumList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取学生数量失败', err);
|
||||
studentNumList.value = [];
|
||||
} finally {
|
||||
studentNumLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载宿舍学生数据
|
||||
const loadDormStudentData = async (classCode: string) => {
|
||||
dormStudentLoading.value = true
|
||||
try {
|
||||
const res = await fearchStuNumByClassCode(classCode)
|
||||
if (res.data) {
|
||||
dormStudentList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取宿舍学生失败', err)
|
||||
dormStudentList.value = []
|
||||
} finally {
|
||||
dormStudentLoading.value = false
|
||||
}
|
||||
}
|
||||
dormStudentLoading.value = true;
|
||||
try {
|
||||
const res = await fearchStuNumByClassCode(classCode);
|
||||
if (res.data) {
|
||||
dormStudentList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取宿舍学生失败', err);
|
||||
dormStudentList.value = [];
|
||||
} finally {
|
||||
dormStudentLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 加载惩罚记录数据
|
||||
const loadPunishData = async (classCode: string) => {
|
||||
punishLoading.value = true
|
||||
try {
|
||||
const res = await queryPunlishNumByClass(classCode)
|
||||
if (res.data) {
|
||||
punishList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取惩罚记录失败', err)
|
||||
punishList.value = []
|
||||
} finally {
|
||||
punishLoading.value = false
|
||||
}
|
||||
}
|
||||
punishLoading.value = true;
|
||||
try {
|
||||
const res = await queryPunlishNumByClass(classCode);
|
||||
if (res.data) {
|
||||
punishList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取惩罚记录失败', err);
|
||||
punishList.value = [];
|
||||
} finally {
|
||||
punishLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
openDialog
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,449 +1,373 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="form.id ? '编辑' : '新增'"
|
||||
v-model="visible"
|
||||
:close-on-click-modal="false"
|
||||
draggable
|
||||
width="800px">
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="form"
|
||||
:rules="dataRules"
|
||||
label-width="120px"
|
||||
:validate-on-rule-change="false"
|
||||
v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="入学日期" prop="enterDate">
|
||||
<el-date-picker
|
||||
v-model="form.enterDate"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="800px">
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="120px" :validate-on-rule-change="false" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="入学日期" prop="enterDate">
|
||||
<el-date-picker
|
||||
v-model="form.enterDate"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="专业" prop="majorCode">
|
||||
<el-select
|
||||
v-model="form.majorCode"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in majorList"
|
||||
:key="item.majorCode"
|
||||
:label="item.majorName"
|
||||
:value="item.majorCode">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="专业" prop="majorCode">
|
||||
<el-select v-model="form.majorCode" placeholder="请选择" clearable filterable style="width: 100%">
|
||||
<el-option v-for="item in majorList" :key="item.majorCode" :label="item.majorName" :value="item.majorCode"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="form.deptCode"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.deptCode"
|
||||
:label="item.deptName"
|
||||
:value="item.deptCode">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select v-model="form.deptCode" placeholder="请选择" clearable filterable style="width: 100%">
|
||||
<el-option v-for="item in deptList" :key="item.deptCode" :label="item.deptName" :value="item.deptCode"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班级代码" prop="classCode">
|
||||
<el-input
|
||||
v-model="form.classCode"
|
||||
placeholder="请输入班级代码"
|
||||
clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班级代码" prop="classCode">
|
||||
<el-input v-model="form.classCode" placeholder="请输入班级代码" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班号" prop="classNo">
|
||||
<el-input
|
||||
v-model="form.classNo"
|
||||
placeholder="自动填充班号"
|
||||
:disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班号" prop="classNo">
|
||||
<el-input v-model="form.classNo" placeholder="自动填充班号" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班级名称" prop="className">
|
||||
<el-input
|
||||
v-model="form.className"
|
||||
placeholder="请输入班级名称"
|
||||
clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班级名称" prop="className">
|
||||
<el-input v-model="form.className" placeholder="请输入班级名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班级规范名称" prop="classProName">
|
||||
<el-input
|
||||
v-model="form.classProName"
|
||||
placeholder="自动拼接班级规范名称"
|
||||
:disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班级规范名称" prop="classProName">
|
||||
<el-input v-model="form.classProName" placeholder="自动拼接班级规范名称" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="入学年份" prop="grade">
|
||||
<el-input
|
||||
v-model="form.grade"
|
||||
placeholder="自动填充入学年份"
|
||||
:disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="入学年份" prop="grade">
|
||||
<el-input v-model="form.grade" placeholder="自动填充入学年份" :disabled="true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班主任" prop="teacherNos">
|
||||
<el-select
|
||||
v-model="form.teacherNos"
|
||||
placeholder="请选择班主任"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in teacherList"
|
||||
:key="item.teacherNo"
|
||||
:label="item.realName"
|
||||
:value="item.teacherNo">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="班主任" prop="teacherNos">
|
||||
<el-select v-model="form.teacherNos" placeholder="请选择班主任" clearable filterable style="width: 100%">
|
||||
<el-option v-for="item in teacherList" :key="item.teacherNo" :label="item.realName" :value="item.teacherNo"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="预计招生人数" prop="preStuNum">
|
||||
<el-input-number
|
||||
v-model="form.preStuNum"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
:min="0"
|
||||
placeholder="请输入预计招生人数"
|
||||
style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="预计招生人数" prop="preStuNum">
|
||||
<el-input-number v-model="form.preStuNum" :precision="0" :step="1" :min="0" placeholder="请输入预计招生人数" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入备注"
|
||||
maxlength="500"
|
||||
show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入备注" maxlength="500" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="BasicClassDialog">
|
||||
import { ref, reactive, nextTick, onMounted, watch, computed } from 'vue'
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getDetail, addObj, putObj, getMajorNameList, getDeptList } from '/@/api/basic/basicclass'
|
||||
import { getTeacherBaseList } from '/@/api/professional/professionaluser/teacherbase'
|
||||
import { ref, reactive, nextTick, onMounted, watch, computed } from 'vue';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { getDetail, addObj, putObj, getMajorNameList, getDeptList } from '/@/api/basic/basicclass';
|
||||
import { getTeacherBaseList } from '/@/api/professional/professionaluser/teacherbase';
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const majorList = ref<any[]>([])
|
||||
const deptList = ref<any[]>([])
|
||||
const teacherList = ref<any[]>([])
|
||||
const yearLast = ref('') // 年份后两位
|
||||
const majorName = ref('') // 专业名称
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const majorList = ref<any[]>([]);
|
||||
const deptList = ref<any[]>([]);
|
||||
const teacherList = ref<any[]>([]);
|
||||
const yearLast = ref(''); // 年份后两位
|
||||
const majorName = ref(''); // 专业名称
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
enterDate: '',
|
||||
majorCode: '',
|
||||
deptCode: '',
|
||||
classCode: '',
|
||||
classNo: '',
|
||||
className: '',
|
||||
classProName: '',
|
||||
grade: '',
|
||||
teacherNos: '',
|
||||
preStuNum: 0,
|
||||
remark: ''
|
||||
id: '',
|
||||
enterDate: '',
|
||||
majorCode: '',
|
||||
deptCode: '',
|
||||
classCode: '',
|
||||
classNo: '',
|
||||
className: '',
|
||||
classProName: '',
|
||||
grade: '',
|
||||
teacherNos: '',
|
||||
preStuNum: 0,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
enterDate: [
|
||||
{ required: true, message: '入学日期不能为空', trigger: 'change' }
|
||||
],
|
||||
majorCode: [
|
||||
{ required: true, message: '专业不能为空', trigger: 'change' }
|
||||
],
|
||||
deptCode: [
|
||||
{ required: true, message: '学院不能为空', trigger: 'change' }
|
||||
],
|
||||
classCode: [
|
||||
{ required: true, message: '班级代码不能为空', trigger: 'blur' },
|
||||
{ min: 4, message: '班级代码至少4位（班号取后4位）', trigger: 'blur' }
|
||||
],
|
||||
classNo: [
|
||||
{ required: true, message: '班号不能为空', trigger: 'blur' }
|
||||
],
|
||||
className: [
|
||||
{ required: true, message: '班级名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
classProName: [
|
||||
{ required: true, message: '班级规范名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
grade: [
|
||||
{ required: true, message: '入学年份不能为空', trigger: 'blur' }
|
||||
],
|
||||
teacherNos: [
|
||||
{ required: true, message: '请选择班主任', trigger: 'change' }
|
||||
],
|
||||
preStuNum: [
|
||||
{ required: true, message: '预计招生人数不能为空', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
enterDate: [{ required: true, message: '入学日期不能为空', trigger: 'change' }],
|
||||
majorCode: [{ required: true, message: '专业不能为空', trigger: 'change' }],
|
||||
deptCode: [{ required: true, message: '学院不能为空', trigger: 'change' }],
|
||||
classCode: [
|
||||
{ required: true, message: '班级代码不能为空', trigger: 'blur' },
|
||||
{ min: 4, message: '班级代码至少4位（班号取后4位）', trigger: 'blur' },
|
||||
],
|
||||
classNo: [{ required: true, message: '班号不能为空', trigger: 'blur' }],
|
||||
className: [{ required: true, message: '班级名称不能为空', trigger: 'blur' }],
|
||||
classProName: [{ required: true, message: '班级规范名称不能为空', trigger: 'blur' }],
|
||||
grade: [{ required: true, message: '入学年份不能为空', trigger: 'blur' }],
|
||||
teacherNos: [{ required: true, message: '请选择班主任', trigger: 'change' }],
|
||||
preStuNum: [{ required: true, message: '预计招生人数不能为空', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id?: string) => {
|
||||
visible.value = true
|
||||
|
||||
// 重置表单数据
|
||||
Object.assign(form, {
|
||||
id: '',
|
||||
enterDate: '',
|
||||
majorCode: '',
|
||||
deptCode: '',
|
||||
classCode: '',
|
||||
classNo: '',
|
||||
className: '',
|
||||
classProName: '',
|
||||
grade: '',
|
||||
teacherNos: '',
|
||||
preStuNum: 0,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
// 重置辅助变量
|
||||
yearLast.value = ''
|
||||
majorName.value = ''
|
||||
visible.value = true;
|
||||
|
||||
// 清除表单验证状态，不触发验证
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.clearValidate();
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
// 重置表单数据
|
||||
Object.assign(form, {
|
||||
id: '',
|
||||
enterDate: '',
|
||||
majorCode: '',
|
||||
deptCode: '',
|
||||
classCode: '',
|
||||
classNo: '',
|
||||
className: '',
|
||||
classProName: '',
|
||||
grade: '',
|
||||
teacherNos: '',
|
||||
preStuNum: 0,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
// 获取详情
|
||||
if (id) {
|
||||
form.id = id
|
||||
getBasicClassData(id)
|
||||
} else {
|
||||
// 新增时，确保验证状态已清除
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.clearValidate();
|
||||
});
|
||||
}
|
||||
// 重置辅助变量
|
||||
yearLast.value = '';
|
||||
majorName.value = '';
|
||||
|
||||
// 清除表单验证状态，不触发验证
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.clearValidate();
|
||||
dataFormRef.value?.resetFields();
|
||||
});
|
||||
|
||||
// 获取详情
|
||||
if (id) {
|
||||
form.id = id;
|
||||
getBasicClassData(id);
|
||||
} else {
|
||||
// 新增时，确保验证状态已清除
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.clearValidate();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = async () => {
|
||||
const valid = await dataFormRef.value.validate().catch(() => {});
|
||||
if (!valid) return false;
|
||||
const valid = await dataFormRef.value.validate().catch(() => {});
|
||||
if (!valid) return false;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
// 构建提交数据，将班主任工号放到 teacherNo 字段
|
||||
const submitData = {
|
||||
...form,
|
||||
teacherNo: form.teacherNos // 将 teacherNos 的值赋值给 teacherNo
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await putObj(submitData);
|
||||
useMessage().success('编辑成功');
|
||||
} else {
|
||||
await addObj(submitData);
|
||||
useMessage().success('新增成功');
|
||||
}
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || (form.id ? '编辑失败' : '新增失败'));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
try {
|
||||
loading.value = true;
|
||||
// 构建提交数据，将班主任工号放到 teacherNo 字段
|
||||
const submitData = {
|
||||
...form,
|
||||
teacherNo: form.teacherNos, // 将 teacherNos 的值赋值给 teacherNo
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await putObj(submitData);
|
||||
useMessage().success('编辑成功');
|
||||
} else {
|
||||
await addObj(submitData);
|
||||
useMessage().success('新增成功');
|
||||
}
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || (form.id ? '编辑失败' : '新增失败'));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取详情
|
||||
const getBasicClassData = async (id: string) => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getDetail(id)
|
||||
if (res.data) {
|
||||
Object.assign(form, {
|
||||
id: res.data.id || '',
|
||||
enterDate: res.data.enterDate || '',
|
||||
majorCode: res.data.majorCode || '',
|
||||
deptCode: res.data.deptCode || '',
|
||||
classCode: res.data.classCode || '',
|
||||
classNo: res.data.classNo || '',
|
||||
className: res.data.className || '',
|
||||
classProName: res.data.classProName || '',
|
||||
grade: res.data.grade || '',
|
||||
teacherNos: res.data.teacherNos || '',
|
||||
preStuNum: res.data.preStuNum || 0,
|
||||
remark: res.data.remark || ''
|
||||
})
|
||||
|
||||
// 设置辅助变量（编辑时不自动填充，保持原有数据）
|
||||
if (res.data.enterDate && res.data.enterDate.length >= 4) {
|
||||
yearLast.value = res.data.enterDate.substring(2, 4)
|
||||
}
|
||||
// 确保专业列表已加载后再设置专业名称
|
||||
if (res.data.majorCode && majorList.value.length > 0) {
|
||||
const major = majorList.value.find(item => item.majorCode === res.data.majorCode)
|
||||
if (major) {
|
||||
majorName.value = major.majorName || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取详情失败', err)
|
||||
useMessage().error('获取详情失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
// 数据加载完成后，清除验证状态，避免触发验证
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.clearValidate();
|
||||
});
|
||||
}
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getDetail(id);
|
||||
if (res.data) {
|
||||
Object.assign(form, {
|
||||
id: res.data.id || '',
|
||||
enterDate: res.data.enterDate || '',
|
||||
majorCode: res.data.majorCode || '',
|
||||
deptCode: res.data.deptCode || '',
|
||||
classCode: res.data.classCode || '',
|
||||
classNo: res.data.classNo || '',
|
||||
className: res.data.className || '',
|
||||
classProName: res.data.classProName || '',
|
||||
grade: res.data.grade || '',
|
||||
teacherNos: res.data.teacherNos || '',
|
||||
preStuNum: res.data.preStuNum || 0,
|
||||
remark: res.data.remark || '',
|
||||
});
|
||||
|
||||
// 设置辅助变量（编辑时不自动填充，保持原有数据）
|
||||
if (res.data.enterDate && res.data.enterDate.length >= 4) {
|
||||
yearLast.value = res.data.enterDate.substring(2, 4);
|
||||
}
|
||||
// 确保专业列表已加载后再设置专业名称
|
||||
if (res.data.majorCode && majorList.value.length > 0) {
|
||||
const major = majorList.value.find((item) => item.majorCode === res.data.majorCode);
|
||||
if (major) {
|
||||
majorName.value = major.majorName || '';
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取详情失败', err);
|
||||
useMessage().error('获取详情失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
// 数据加载完成后，清除验证状态，避免触发验证
|
||||
nextTick(() => {
|
||||
dataFormRef.value?.clearValidate();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 获取专业列表
|
||||
const getMajorListData = async () => {
|
||||
try {
|
||||
const res = await getMajorNameList()
|
||||
if (res.data) {
|
||||
majorList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取专业列表失败', err)
|
||||
majorList.value = []
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await getMajorNameList();
|
||||
if (res.data) {
|
||||
majorList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取专业列表失败', err);
|
||||
majorList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取学院列表
|
||||
const getDeptListData = async () => {
|
||||
try {
|
||||
const res = await getDeptList()
|
||||
if (res.data) {
|
||||
deptList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取学院列表失败', err)
|
||||
deptList.value = []
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await getDeptList();
|
||||
if (res.data) {
|
||||
deptList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取学院列表失败', err);
|
||||
deptList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取班主任列表
|
||||
const getTeacherListData = async () => {
|
||||
try {
|
||||
const res = await getTeacherBaseList()
|
||||
if (res.data) {
|
||||
teacherList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取班主任列表失败', err)
|
||||
teacherList.value = []
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await getTeacherBaseList();
|
||||
if (res.data) {
|
||||
teacherList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取班主任列表失败', err);
|
||||
teacherList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 拼接班级规范名称
|
||||
const montageClassProName = () => {
|
||||
// 只在新增模式下自动填充，编辑模式下不覆盖已有数据
|
||||
if (!form.id && yearLast.value && majorName.value) {
|
||||
form.classProName = yearLast.value + majorName.value
|
||||
if (form.classNo) {
|
||||
form.classProName = yearLast.value + majorName.value + '(' + form.classNo + ')'
|
||||
}
|
||||
console.log('classProName', form.classProName)
|
||||
}
|
||||
}
|
||||
// 只在新增模式下自动填充，编辑模式下不覆盖已有数据
|
||||
if (!form.id && yearLast.value && majorName.value) {
|
||||
form.classProName = yearLast.value + majorName.value;
|
||||
if (form.classNo) {
|
||||
form.classProName = yearLast.value + majorName.value + '(' + form.classNo + ')';
|
||||
}
|
||||
console.log('classProName', form.classProName);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听入学日期,取年份后两位
|
||||
watch(() => form.enterDate, (newVal) => {
|
||||
if (newVal && newVal.length >= 4) {
|
||||
console.log('newdate:', newVal)
|
||||
yearLast.value = newVal.substring(2, 4)
|
||||
// 只在新增模式下自动填充入学年份
|
||||
if (!form.id) {
|
||||
form.grade = newVal.substring(0, 4)
|
||||
}
|
||||
montageClassProName()
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => form.enterDate,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.length >= 4) {
|
||||
console.log('newdate:', newVal);
|
||||
yearLast.value = newVal.substring(2, 4);
|
||||
// 只在新增模式下自动填充入学年份
|
||||
if (!form.id) {
|
||||
form.grade = newVal.substring(0, 4);
|
||||
}
|
||||
montageClassProName();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听班级代码,取后四位为班号（班级代码至少4位）
|
||||
watch(() => form.classCode, (newVal) => {
|
||||
if (newVal) {
|
||||
const length = newVal.length
|
||||
if (length >= 4) {
|
||||
// 只在新增模式下自动填充班号，编辑模式下如果班号为空才填充
|
||||
if (!form.id || !form.classNo) {
|
||||
form.classNo = newVal.substring(length - 4, length)
|
||||
montageClassProName()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => form.classCode,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
const length = newVal.length;
|
||||
if (length >= 4) {
|
||||
// 只在新增模式下自动填充班号，编辑模式下如果班号为空才填充
|
||||
if (!form.id || !form.classNo) {
|
||||
form.classNo = newVal.substring(length - 4, length);
|
||||
montageClassProName();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听专业代码变化，获取专业名称
|
||||
watch(() => form.majorCode, (newVal) => {
|
||||
if (newVal) {
|
||||
const major = majorList.value.find(item => item.majorCode === newVal)
|
||||
if (major) {
|
||||
majorName.value = major.majorName || ''
|
||||
montageClassProName()
|
||||
}
|
||||
} else {
|
||||
majorName.value = ''
|
||||
montageClassProName()
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => form.majorCode,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
const major = majorList.value.find((item) => item.majorCode === newVal);
|
||||
if (major) {
|
||||
majorName.value = major.majorName || '';
|
||||
montageClassProName();
|
||||
}
|
||||
} else {
|
||||
majorName.value = '';
|
||||
montageClassProName();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getMajorListData()
|
||||
getDeptListData()
|
||||
getTeacherListData()
|
||||
})
|
||||
getMajorListData();
|
||||
getDeptListData();
|
||||
getTeacherListData();
|
||||
});
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,532 +1,438 @@
|
||||
<template>
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select
|
||||
v-model="searchForm.deptCode"
|
||||
placeholder="请选择学院"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 200px"
|
||||
@change="handleDeptChange">
|
||||
<el-option
|
||||
v-for="item in deptList"
|
||||
:key="item.deptCode"
|
||||
:label="item.deptName"
|
||||
:value="item.deptCode">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="班号" prop="classNo">
|
||||
<el-input
|
||||
v-model="searchForm.classNo"
|
||||
placeholder="请输入班号"
|
||||
clearable
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联院" prop="isUnion">
|
||||
<el-select
|
||||
v-model="searchForm.isUnion"
|
||||
placeholder="请选择联院"
|
||||
clearable
|
||||
style="width: 200px">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流失率" prop="stuLoseRate">
|
||||
<el-input
|
||||
v-model="searchForm.stuLoseRate"
|
||||
placeholder="请输入流失率"
|
||||
clearable
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入学年份" prop="grade">
|
||||
<el-input
|
||||
v-model="searchForm.grade"
|
||||
placeholder="请输入入学年份"
|
||||
clearable
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班主任" prop="teacherRealName">
|
||||
<el-input
|
||||
v-model="searchForm.teacherRealName"
|
||||
placeholder="请输入班主任姓名"
|
||||
clearable
|
||||
style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班级状态" prop="classStatus">
|
||||
<el-select
|
||||
v-model="searchForm.classStatus"
|
||||
placeholder="请选择班级状态"
|
||||
clearable
|
||||
style="width: 200px">
|
||||
<el-option label="正常" value="0" />
|
||||
<el-option label="离校" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<div class="modern-page-container">
|
||||
<div class="page-wrapper">
|
||||
<!-- 搜索表单卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Search /></el-icon>
|
||||
筛选条件
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
|
||||
<el-form-item label="学院" prop="deptCode">
|
||||
<el-select v-model="searchForm.deptCode" placeholder="请选择学院" clearable filterable style="width: 200px" @change="handleDeptChange">
|
||||
<el-option v-for="item in deptList" :key="item.deptCode" :label="item.deptName" :value="item.deptCode"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="班号" prop="classNo">
|
||||
<el-input v-model="searchForm.classNo" placeholder="请输入班号" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联院" prop="isUnion">
|
||||
<el-select v-model="searchForm.isUnion" placeholder="请选择联院" clearable style="width: 200px">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流失率" prop="stuLoseRate">
|
||||
<el-input v-model="searchForm.stuLoseRate" placeholder="请输入流失率" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入学年份" prop="grade">
|
||||
<el-input v-model="searchForm.grade" placeholder="请输入入学年份" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班主任" prop="teacherRealName">
|
||||
<el-input v-model="searchForm.teacherRealName" placeholder="请输入班主任姓名" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班级状态" prop="classStatus">
|
||||
<el-select v-model="searchForm.classStatus" placeholder="请选择班级状态" clearable style="width: 200px">
|
||||
<el-option label="正常" value="0" />
|
||||
<el-option label="离校" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 内容卡片 -->
|
||||
<el-card class="content-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Document /></el-icon>
|
||||
班级列表
|
||||
</span>
|
||||
<div class="header-actions">
|
||||
<el-button
|
||||
icon="FolderAdd"
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog()">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Link"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="handleLinkRule">
|
||||
关联门禁规则
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Download"
|
||||
type="warning"
|
||||
class="ml10"
|
||||
@click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="DocumentAdd"
|
||||
type="info"
|
||||
class="ml10"
|
||||
@click="handleGenerateAssessment">
|
||||
生成考核班级
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
class="ml10"
|
||||
@queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
:columns="tableColumns"
|
||||
v-model="visibleColumns"
|
||||
trigger-type="default"
|
||||
trigger-circle
|
||||
@change="handleColumnChange"
|
||||
@order-change="handleColumnOrderChange"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-tooltip class="item" effect="dark" content="列设置" placement="top">
|
||||
<el-button circle style="margin-left: 0;">
|
||||
<el-icon><Menu /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 内容卡片 -->
|
||||
<el-card class="content-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Document /></el-icon>
|
||||
班级列表
|
||||
</span>
|
||||
<div class="header-actions">
|
||||
<el-button icon="FolderAdd" type="primary" @click="formDialogRef.openDialog()"> 新增 </el-button>
|
||||
<el-button icon="Link" type="success" class="ml10" @click="handleLinkRule"> 关联门禁规则 </el-button>
|
||||
<el-button icon="Download" type="warning" class="ml10" @click="handleExport"> 导出 </el-button>
|
||||
<el-button icon="DocumentAdd" type="info" class="ml10" @click="handleGenerateAssessment"> 生成考核班级 </el-button>
|
||||
<right-toolbar v-model:showSearch="showSearch" class="ml10" @queryTable="getDataList">
|
||||
<TableColumnControl
|
||||
ref="columnControlRef"
|
||||
:columns="tableColumns"
|
||||
v-model="visibleColumns"
|
||||
trigger-type="default"
|
||||
trigger-circle
|
||||
@change="handleColumnChange"
|
||||
@order-change="handleColumnOrderChange"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-tooltip class="item" effect="dark" content="列设置" placement="top">
|
||||
<el-button circle style="margin-left: 0">
|
||||
<el-icon><Menu /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</TableColumnControl>
|
||||
</right-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="sortChangeHandle">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align">
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'stuNum'">
|
||||
<el-tag size="small" type="primary" effect="plain">
|
||||
{{ scope.row.stuNum || 0 }}/{{ scope.row.preStuNum || 0 }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'classStatus'">
|
||||
<StatusTag
|
||||
:value="scope.row.classStatus"
|
||||
:options="[{ label: '正常', value: '0' }, { label: '离校', value: '1' }]"
|
||||
:type-map="{ '0': { type: 'success', effect: 'light' }, '1': { type: 'warning', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'stuLoseRate'">
|
||||
<el-tag size="small" type="danger" effect="plain">
|
||||
{{ scope.row.stuLoseRate ? `${scope.row.stuLoseRate}%` : '0%' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="260">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="View"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(scope.row)">
|
||||
班级概况
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="formDialogRef.openDialog(scope.row.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete([scope.row.id])">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="state.dataList"
|
||||
v-loading="state.loading"
|
||||
stripe
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
class="modern-table"
|
||||
row-key="id"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="sortChangeHandle"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="70" align="center">
|
||||
<template #header>
|
||||
<el-icon><List /></el-icon>
|
||||
</template>
|
||||
<template #default="{ $index }">
|
||||
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="col in visibleColumnsSorted"
|
||||
:key="col.prop"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:width="col.width"
|
||||
:min-width="col.minWidth"
|
||||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||||
:align="col.align"
|
||||
>
|
||||
<template #header>
|
||||
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
|
||||
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
|
||||
</template>
|
||||
<template #default="scope" v-if="col.prop === 'stuNum'">
|
||||
<el-tag size="small" type="primary" effect="plain"> {{ scope.row.stuNum || 0 }}/{{ scope.row.preStuNum || 0 }} </el-tag>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'classStatus'">
|
||||
<StatusTag
|
||||
:value="scope.row.classStatus"
|
||||
:options="[
|
||||
{ label: '正常', value: '0' },
|
||||
{ label: '离校', value: '1' },
|
||||
]"
|
||||
:type-map="{ '0': { type: 'success', effect: 'light' }, '1': { type: 'warning', effect: 'light' } }"
|
||||
/>
|
||||
</template>
|
||||
<template #default="scope" v-else-if="col.prop === 'stuLoseRate'">
|
||||
<el-tag size="small" type="danger" effect="plain">
|
||||
{{ scope.row.stuLoseRate ? `${scope.row.stuLoseRate}%` : '0%' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="260">
|
||||
<template #default="scope">
|
||||
<el-button icon="View" link type="primary" @click="handleViewDetail(scope.row)"> 班级概况 </el-button>
|
||||
<el-button icon="Edit" link type="primary" @click="formDialogRef.openDialog(scope.row.id)"> 编辑 </el-button>
|
||||
<el-button icon="Delete" link type="danger" @click="handleDelete([scope.row.id])"> 删除 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
|
||||
<!-- 班级概况详情 -->
|
||||
<DetailDialog ref="detailDialogRef" />
|
||||
|
||||
<!-- 关联门禁规则对话框 -->
|
||||
<el-dialog
|
||||
title="关联门禁规则"
|
||||
v-model="linkRuleDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
draggable
|
||||
width="600px">
|
||||
<el-form :model="linkRuleForm" label-width="120px">
|
||||
<el-form-item label="选择规则">
|
||||
<el-select
|
||||
v-model="linkRuleForm.ruleId"
|
||||
placeholder="请选择门禁规则"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in ruleList"
|
||||
:key="item.id"
|
||||
:label="item.ruleName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="linkRuleDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmLinkRule" :loading="linkRuleLoading">确 认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!-- 编辑、新增 -->
|
||||
<FormDialog ref="formDialogRef" @refresh="getDataList(false)" />
|
||||
|
||||
<!-- 班级概况详情 -->
|
||||
<DetailDialog ref="detailDialogRef" />
|
||||
|
||||
<!-- 关联门禁规则对话框 -->
|
||||
<el-dialog title="关联门禁规则" v-model="linkRuleDialogVisible" :close-on-click-modal="false" draggable width="600px">
|
||||
<el-form :model="linkRuleForm" label-width="120px">
|
||||
<el-form-item label="选择规则">
|
||||
<el-select v-model="linkRuleForm.ruleId" placeholder="请选择门禁规则" clearable filterable style="width: 100%">
|
||||
<el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName" :value="item.id"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="linkRuleDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmLinkRule" :loading="linkRuleLoading">确 认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="BasicClass">
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { BasicTableProps, useTable } from "/@/hooks/table";
|
||||
import { fetchList, delObj, putObjs, classExportData, getDeptList, getClassListByRole } from "/@/api/basic/basicclass";
|
||||
import { makeExportClassOverviewTask } from "/@/api/stuwork/file";
|
||||
import { useMessage, useMessageBox } from "/@/hooks/message";
|
||||
import { fetchList as getRuleList } from "/@/api/stuwork/entrancerule";
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
|
||||
import { List, OfficeBuilding, Grid, Document, UserFilled, Phone, User, Lock, CircleCheck, TrendCharts, Setting, Menu, Search } from '@element-plus/icons-vue'
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn'
|
||||
import { defineAsyncComponent as defineStatusTag } from 'vue'
|
||||
const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'))
|
||||
import { ref, reactive, defineAsyncComponent, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { BasicTableProps, useTable } from '/@/hooks/table';
|
||||
import { fetchList, delObj, putObjs, classExportData, getDeptList, getClassListByRole } from '/@/api/basic/basicclass';
|
||||
import { makeExportClassOverviewTask } from '/@/api/stuwork/file';
|
||||
import { useMessage, useMessageBox } from '/@/hooks/message';
|
||||
import { fetchList as getRuleList } from '/@/api/stuwork/entrancerule';
|
||||
import TableColumnControl from '/@/components/TableColumnControl/index.vue';
|
||||
import {
|
||||
List,
|
||||
OfficeBuilding,
|
||||
Grid,
|
||||
Document,
|
||||
UserFilled,
|
||||
Phone,
|
||||
User,
|
||||
Lock,
|
||||
CircleCheck,
|
||||
TrendCharts,
|
||||
Setting,
|
||||
Menu,
|
||||
Search,
|
||||
} from '@element-plus/icons-vue';
|
||||
import { useTableColumnControl } from '/@/hooks/tableColumn';
|
||||
import { defineAsyncComponent as defineStatusTag } from 'vue';
|
||||
const StatusTag = defineStatusTag(() => import('/@/components/StatusTag/index.vue'));
|
||||
|
||||
// 引入组件
|
||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||
const DetailDialog = defineAsyncComponent(() => import('./detail.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const route = useRoute()
|
||||
const formDialogRef = ref()
|
||||
const detailDialogRef = ref()
|
||||
const searchFormRef = ref()
|
||||
const columnControlRef = ref()
|
||||
const route = useRoute();
|
||||
const formDialogRef = ref();
|
||||
const detailDialogRef = ref();
|
||||
const searchFormRef = ref();
|
||||
const columnControlRef = ref();
|
||||
// 搜索变量
|
||||
const showSearch = ref(true)
|
||||
const deptList = ref<any[]>([])
|
||||
const classList = ref<any[]>([])
|
||||
const ruleList = ref<any[]>([])
|
||||
const linkRuleDialogVisible = ref(false)
|
||||
const linkRuleLoading = ref(false)
|
||||
const selectedClassCodes = ref<string[]>([])
|
||||
const showSearch = ref(true);
|
||||
const deptList = ref<any[]>([]);
|
||||
const classList = ref<any[]>([]);
|
||||
const ruleList = ref<any[]>([]);
|
||||
const linkRuleDialogVisible = ref(false);
|
||||
const linkRuleLoading = ref(false);
|
||||
const selectedClassCodes = ref<string[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = [
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班号', icon: Grid },
|
||||
{ prop: 'classProName', label: '班级规范名称', icon: Document },
|
||||
{ prop: 'teacherRealName', label: '班主任', icon: UserFilled },
|
||||
{ prop: 'teacherTel', label: '班主任电话号码', icon: Phone },
|
||||
{ prop: 'stuNum', label: '班级人数/原始人数', icon: User },
|
||||
{ prop: 'ruleName', label: '门禁规则', icon: Lock },
|
||||
{ prop: 'classStatus', label: '班级状态', icon: CircleCheck },
|
||||
{ prop: 'stuLoseRate', label: '流失率', icon: TrendCharts }
|
||||
]
|
||||
{ prop: 'deptName', label: '学院', icon: OfficeBuilding },
|
||||
{ prop: 'classNo', label: '班号', icon: Grid },
|
||||
{ prop: 'classProName', label: '班级规范名称', icon: Document },
|
||||
{ prop: 'teacherRealName', label: '班主任', icon: UserFilled },
|
||||
{ prop: 'teacherTel', label: '班主任电话号码', icon: Phone },
|
||||
{ prop: 'stuNum', label: '班级人数/原始人数', icon: User },
|
||||
{ prop: 'ruleName', label: '门禁规则', icon: Lock },
|
||||
{ prop: 'classStatus', label: '班级状态', icon: CircleCheck },
|
||||
{ prop: 'stuLoseRate', label: '流失率', icon: TrendCharts },
|
||||
];
|
||||
|
||||
// 使用表格列控制hook
|
||||
const {
|
||||
visibleColumns,
|
||||
visibleColumnsSorted,
|
||||
checkColumnVisible,
|
||||
handleColumnChange,
|
||||
handleColumnOrderChange
|
||||
} = useTableColumnControl(tableColumns)
|
||||
const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnChange, handleColumnOrderChange } = useTableColumnControl(tableColumns);
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
deptCode: '',
|
||||
classNo: '',
|
||||
isUnion: '',
|
||||
stuLoseRate: '',
|
||||
grade: '',
|
||||
teacherRealName: '',
|
||||
classStatus: ''
|
||||
})
|
||||
deptCode: '',
|
||||
classNo: '',
|
||||
isUnion: '',
|
||||
stuLoseRate: '',
|
||||
grade: '',
|
||||
teacherRealName: '',
|
||||
classStatus: '',
|
||||
});
|
||||
|
||||
// 关联门禁规则表单
|
||||
const linkRuleForm = reactive({
|
||||
ruleId: ''
|
||||
})
|
||||
ruleId: '',
|
||||
});
|
||||
|
||||
// 配置 useTable
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: searchForm,
|
||||
pageList: fetchList,
|
||||
props: {
|
||||
item: 'records',
|
||||
totalCount: 'total'
|
||||
},
|
||||
createdIsNeed: true
|
||||
})
|
||||
queryForm: searchForm,
|
||||
pageList: fetchList,
|
||||
props: {
|
||||
item: 'records',
|
||||
totalCount: 'total',
|
||||
},
|
||||
createdIsNeed: true,
|
||||
});
|
||||
|
||||
// table hook
|
||||
const {
|
||||
getDataList,
|
||||
currentChangeHandle,
|
||||
sizeChangeHandle,
|
||||
sortChangeHandle,
|
||||
tableStyle
|
||||
} = useTable(state)
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);
|
||||
|
||||
// 表格多选
|
||||
const handleSelectionChange = (rows: any[]) => {
|
||||
selectedClassCodes.value = (rows || [])
|
||||
.map((item) => item.classCode)
|
||||
.filter((item) => !!item)
|
||||
}
|
||||
selectedClassCodes.value = (rows || []).map((item) => item.classCode).filter((item) => !!item);
|
||||
};
|
||||
|
||||
// 学院选择变化
|
||||
const handleDeptChange = () => {
|
||||
// 可以根据需要清空班号选择
|
||||
}
|
||||
// 可以根据需要清空班号选择
|
||||
};
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
getDataList()
|
||||
}
|
||||
getDataList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchFormRef.value?.resetFields()
|
||||
searchForm.deptCode = ''
|
||||
searchForm.classNo = ''
|
||||
searchForm.isUnion = ''
|
||||
searchForm.stuLoseRate = ''
|
||||
searchForm.grade = ''
|
||||
searchForm.teacherRealName = ''
|
||||
searchForm.classStatus = ''
|
||||
getDataList()
|
||||
}
|
||||
searchFormRef.value?.resetFields();
|
||||
searchForm.deptCode = '';
|
||||
searchForm.classNo = '';
|
||||
searchForm.isUnion = '';
|
||||
searchForm.stuLoseRate = '';
|
||||
searchForm.grade = '';
|
||||
searchForm.teacherRealName = '';
|
||||
searchForm.classStatus = '';
|
||||
getDataList();
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (ids: string[]) => {
|
||||
try {
|
||||
await useMessageBox().confirm('确定要删除选中的记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await useMessageBox().confirm('确定要删除选中的记录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 根据API文件，delObj接受单个id，需要循环删除
|
||||
for (const id of ids) {
|
||||
await delObj(id)
|
||||
}
|
||||
useMessage().success('删除成功')
|
||||
getDataList()
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '删除失败')
|
||||
}
|
||||
}
|
||||
try {
|
||||
// 根据API文件，delObj接受单个id，需要循环删除
|
||||
for (const id of ids) {
|
||||
await delObj(id);
|
||||
}
|
||||
useMessage().success('删除成功');
|
||||
getDataList();
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 查看班级概况 - 直接使用表格行数据
|
||||
const handleViewDetail = (row: any) => {
|
||||
if (detailDialogRef.value) {
|
||||
detailDialogRef.value.openDialog(row)
|
||||
}
|
||||
}
|
||||
if (detailDialogRef.value) {
|
||||
detailDialogRef.value.openDialog(row);
|
||||
}
|
||||
};
|
||||
|
||||
// 关联门禁规则
|
||||
const handleLinkRule = () => {
|
||||
if (!selectedClassCodes.value.length) {
|
||||
useMessage().warning('请先勾选要关联的班级')
|
||||
return
|
||||
}
|
||||
linkRuleDialogVisible.value = true
|
||||
linkRuleForm.ruleId = ''
|
||||
// 加载规则列表
|
||||
getRuleListData()
|
||||
}
|
||||
if (!selectedClassCodes.value.length) {
|
||||
useMessage().warning('请先勾选要关联的班级');
|
||||
return;
|
||||
}
|
||||
linkRuleDialogVisible.value = true;
|
||||
linkRuleForm.ruleId = '';
|
||||
// 加载规则列表
|
||||
getRuleListData();
|
||||
};
|
||||
|
||||
// 确认关联门禁规则
|
||||
const confirmLinkRule = async () => {
|
||||
if (!selectedClassCodes.value.length) {
|
||||
useMessage().warning('请先勾选要关联的班级')
|
||||
return
|
||||
}
|
||||
if (!linkRuleForm.ruleId) {
|
||||
useMessage().warning('请选择门禁规则')
|
||||
return
|
||||
}
|
||||
if (!selectedClassCodes.value.length) {
|
||||
useMessage().warning('请先勾选要关联的班级');
|
||||
return;
|
||||
}
|
||||
if (!linkRuleForm.ruleId) {
|
||||
useMessage().warning('请选择门禁规则');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
linkRuleLoading.value = true
|
||||
await putObjs({
|
||||
ruleId: linkRuleForm.ruleId,
|
||||
classCodes: selectedClassCodes.value
|
||||
})
|
||||
useMessage().success('关联成功')
|
||||
linkRuleDialogVisible.value = false
|
||||
getDataList()
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '关联失败')
|
||||
} finally {
|
||||
linkRuleLoading.value = false
|
||||
}
|
||||
}
|
||||
try {
|
||||
linkRuleLoading.value = true;
|
||||
await putObjs({
|
||||
ruleId: linkRuleForm.ruleId,
|
||||
classCodes: selectedClassCodes.value,
|
||||
});
|
||||
useMessage().success('关联成功');
|
||||
linkRuleDialogVisible.value = false;
|
||||
getDataList();
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '关联失败');
|
||||
} finally {
|
||||
linkRuleLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
await makeExportClassOverviewTask(searchForm)
|
||||
useMessage().success('导出任务已创建，请在文件管理中下载')
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '导出失败')
|
||||
}
|
||||
}
|
||||
try {
|
||||
await makeExportClassOverviewTask(searchForm);
|
||||
useMessage().success('导出任务已创建，请在文件管理中下载');
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg || '导出失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 生成考核班级（占位，待确认接口）
|
||||
const handleGenerateAssessment = () => {
|
||||
useMessage().warning('生成考核班级功能待确认接口后启用')
|
||||
}
|
||||
useMessage().warning('生成考核班级功能待确认接口后启用');
|
||||
};
|
||||
|
||||
// 获取学院列表
|
||||
const getDeptListData = async () => {
|
||||
try {
|
||||
const res = await getDeptList()
|
||||
if (res.data) {
|
||||
deptList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取学院列表失败', err)
|
||||
deptList.value = []
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await getDeptList();
|
||||
if (res.data) {
|
||||
deptList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取学院列表失败', err);
|
||||
deptList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取班号列表
|
||||
const getClassListData = async () => {
|
||||
try {
|
||||
const res = await getClassListByRole()
|
||||
if (res.data) {
|
||||
classList.value = Array.isArray(res.data) ? res.data : []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取班号列表失败', err)
|
||||
classList.value = []
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await getClassListByRole();
|
||||
if (res.data) {
|
||||
classList.value = Array.isArray(res.data) ? res.data : [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取班号列表失败', err);
|
||||
classList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取门禁规则列表
|
||||
const getRuleListData = async () => {
|
||||
try {
|
||||
const res = await getRuleList({ current: 1, size: 9999 })
|
||||
if (res.data && res.data.records) {
|
||||
ruleList.value = Array.isArray(res.data.records) ? res.data.records : []
|
||||
} else if (Array.isArray(res.data)) {
|
||||
ruleList.value = res.data
|
||||
} else {
|
||||
ruleList.value = []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取门禁规则列表失败', err)
|
||||
ruleList.value = []
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await getRuleList({ current: 1, size: 9999 });
|
||||
if (res.data && res.data.records) {
|
||||
ruleList.value = Array.isArray(res.data.records) ? res.data.records : [];
|
||||
} else if (Array.isArray(res.data)) {
|
||||
ruleList.value = res.data;
|
||||
} else {
|
||||
ruleList.value = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取门禁规则列表失败', err);
|
||||
ruleList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getDeptListData()
|
||||
getClassListData()
|
||||
})
|
||||
getDeptListData();
|
||||
getClassListData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user