|
|
@@ -22,14 +22,24 @@
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="班级类型:" prop="classType" v-if="showClassType">
|
|
|
- <el-radio-group v-model="formData.classType" >
|
|
|
+ <el-radio-group v-model="formData.classType" @change="HandleClassTypeChange">
|
|
|
<el-radio :value="subject.value" v-for="subject in classTypeList" :key="subject.value">{{subject.label}}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="选择班级:" prop="checkClassList">
|
|
|
- <el-checkbox-group v-model="formData.checkClassList">
|
|
|
- <el-checkbox :label="item.className" :value="item.classIdCode" v-for="item in classList" :key="item.classIdCode" :disabled="item.cancelFlag==0?true:false"/>
|
|
|
- </el-checkbox-group>
|
|
|
+ <div class="class_select_wrapper">
|
|
|
+ <div class="class_select_all" v-if="classList.length > 0">
|
|
|
+ <el-checkbox
|
|
|
+ :model-value="checkAll"
|
|
|
+ :indeterminate="isIndeterminate"
|
|
|
+ @change="HandleCheckAllChange"
|
|
|
+ >全选</el-checkbox>
|
|
|
+ <span class="selected_count">已选 {{ formData.checkClassList.length }} / {{ classList.length }} 个班级</span>
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-model="formData.checkClassList">
|
|
|
+ <el-checkbox :label="item.className" :value="item.classIdCode" v-for="item in classList" :key="item.classIdCode" :disabled="item.cancelFlag==0?true:false"/>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
@@ -134,7 +144,7 @@ const formData = reactive({
|
|
|
courseCode:'',//科目code
|
|
|
courseName:'',//科目名称
|
|
|
classType:0,//0 行政班 1 教学班
|
|
|
- checkClassList:[],//班级列表
|
|
|
+ checkClassList:[] as any[],//班级列表
|
|
|
})
|
|
|
|
|
|
// 重置表单
|
|
|
@@ -361,6 +371,45 @@ const HandleCourseChange=()=>{
|
|
|
formData.classType=0;
|
|
|
}
|
|
|
|
|
|
+// 可选班级(排除禁用项 cancelFlag==0,禁用班级不可被勾选/取消)
|
|
|
+const selectableClassList = computed(() => {
|
|
|
+ return classList.value.filter((item: any) => item.cancelFlag != 0)
|
|
|
+})
|
|
|
+
|
|
|
+// 班级全选状态:所有可选班级都已被选中
|
|
|
+const checkAll = computed(() => {
|
|
|
+ if (selectableClassList.value.length === 0) return false
|
|
|
+ const checked = formData.checkClassList as any[]
|
|
|
+ return selectableClassList.value.every((item: any) => checked.includes(item.classIdCode))
|
|
|
+})
|
|
|
+
|
|
|
+// 班级半选状态:选中了部分可选班级
|
|
|
+const isIndeterminate = computed(() => {
|
|
|
+ const checked = formData.checkClassList as any[]
|
|
|
+ const checkedCount = selectableClassList.value.filter((item: any) =>
|
|
|
+ checked.includes(item.classIdCode)
|
|
|
+ ).length
|
|
|
+ return checkedCount > 0 && checkedCount < selectableClassList.value.length
|
|
|
+})
|
|
|
+
|
|
|
+// 全选 / 取消全选
|
|
|
+const HandleCheckAllChange = (val: any) => {
|
|
|
+ const selectableIds = selectableClassList.value.map((item: any) => item.classIdCode)
|
|
|
+ const checked = formData.checkClassList as any[]
|
|
|
+ if (val) {
|
|
|
+ // 全选:合并所有可选班级(禁用班级保持原有选中状态)
|
|
|
+ formData.checkClassList = Array.from(new Set([...checked, ...selectableIds]))
|
|
|
+ } else {
|
|
|
+ // 取消全选:仅移除可选班级,保留禁用班级
|
|
|
+ formData.checkClassList = checked.filter((id: any) => !selectableIds.includes(id))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 切换班级类型:清空已选班级,保证全选状态与当前班级列表一致
|
|
|
+const HandleClassTypeChange = () => {
|
|
|
+ formData.checkClassList = []
|
|
|
+}
|
|
|
+
|
|
|
//获取选择的班级list
|
|
|
const classDetailDTOS = computed(() => {
|
|
|
if (!Array.isArray(formData.checkClassList) || !Array.isArray(classList.value)) return []
|
|
|
@@ -441,7 +490,23 @@ const HandleSubmit = async () => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.exam-form {
|
|
|
+.exam_form {
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
+.class_select_wrapper {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.class_select_all {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid var(--el-border-color-lighter);
|
|
|
+
|
|
|
+ .selected_count {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|