|
|
@@ -0,0 +1,557 @@
|
|
|
+<template>
|
|
|
+ <div class="page_item step_1_content">
|
|
|
+ <!-- 顶部操作栏 -->
|
|
|
+ <div class="page_search">
|
|
|
+ <div class="search_content">
|
|
|
+ <div class="content_left">
|
|
|
+ <el-checkbox v-model="is_head_teacher_involved" >班主任参与评价</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="content_right">
|
|
|
+ <el-button class="button_border" @click="OpenAddGradeForm">新增年级</el-button>
|
|
|
+ <el-button class="button_background">完成</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="page_jg_20" style="flex-shrink: 0;"></div>
|
|
|
+
|
|
|
+ <!-- 年级列表配置 -->
|
|
|
+ <div class="option_container">
|
|
|
+ <div class="grade_list_option" v-for="(gradeOpt) in gradeOptions" :key="gradeOpt.id">
|
|
|
+
|
|
|
+ <!-- 年级头部 -->
|
|
|
+ <div class="page_item grade_list_header" >
|
|
|
+ <div class="page_search">
|
|
|
+ <div class="search_content">
|
|
|
+ <div class="content_left">
|
|
|
+ <div class="grade_title">
|
|
|
+ {{ gradeOpt.gradeName }} (共{{ gradeOpt.subjectCount }}科)
|
|
|
+ </div>
|
|
|
+ <el-checkbox v-model="gradeOpt.isSelectSubject" >选科</el-checkbox>
|
|
|
+
|
|
|
+ <div class="selection_params" v-if="gradeOpt.isSelectSubject">
|
|
|
+ <span class="param_text">一共 </span>
|
|
|
+ <el-input type="number" v-model="gradeOpt.selectionCount"></el-input>
|
|
|
+ <span class="param_text"> 科，需要选择 </span>
|
|
|
+ <el-input type="number" v-model="gradeOpt.needCount"></el-input>
|
|
|
+ <span class="param_text"> 科</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="content_right table_row_option">
|
|
|
+ <span class="button_delete" @click="HandleDeleteOpen(gradeOpt)"> 删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 年级内容 -->
|
|
|
+ <div class="page_item grade_list_content">
|
|
|
+ <el-form
|
|
|
+ :inline="false"
|
|
|
+ :model="gradeOpt"
|
|
|
+ ref="formRef"
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- 科目 -->
|
|
|
+ <el-form-item
|
|
|
+ label="科目:"
|
|
|
+ prop="subjectData"
|
|
|
+ :rules="[]"
|
|
|
+ >
|
|
|
+ <div class="tag_list">
|
|
|
+ <el-tag
|
|
|
+ v-for="tag in gradeOpt.subjectData"
|
|
|
+ :key="tag"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="HandleDeleteOpen(tag)"
|
|
|
+ >
|
|
|
+ {{ tag.name }}
|
|
|
+ </el-tag>
|
|
|
+
|
|
|
+ <el-button class="button_border"
|
|
|
+ @click="OpenAddSubjectForm">
|
|
|
+ + 新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 选科 -->
|
|
|
+ <el-form-item
|
|
|
+ label="选科:"
|
|
|
+ prop="selectSubjectData"
|
|
|
+ :rules="[]"
|
|
|
+ >
|
|
|
+ <div class="tag_list">
|
|
|
+ <el-tag
|
|
|
+ v-for="tag in gradeOpt.selectSubjectData"
|
|
|
+ :key="tag"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="HandleDeleteOpen(tag)"
|
|
|
+ >
|
|
|
+ {{ tag.name }}
|
|
|
+ </el-tag>
|
|
|
+
|
|
|
+ <el-button class="button_border"
|
|
|
+ @click="OpenAddSubjectForm">
|
|
|
+ + 新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 班级 -->
|
|
|
+ <el-form-item
|
|
|
+ label="班级:"
|
|
|
+ prop="classData"
|
|
|
+ :rules="[]"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ v-if="gradeOpt?.classData?.length > 0"
|
|
|
+ :indeterminate="gradeOpt?.selectedClassData?.length > 0 && gradeOpt?.selectedClassData?.length < gradeOpt?.classData?.length"
|
|
|
+ style="margin-right: 20px;"
|
|
|
+ :model-value="(gradeOpt?.selectedClassData?.length == gradeOpt?.classData?.length)"
|
|
|
+ @change="(val)=>handleSelectAllClassOrNot(val,gradeOpt)"
|
|
|
+ >全选</el-checkbox>
|
|
|
+
|
|
|
+ <el-checkbox-group
|
|
|
+ class="check_group_list"
|
|
|
+ v-model="gradeOpt.selectedClassData"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ v-for="checkItem in gradeOpt.classData"
|
|
|
+ :key="checkItem.id"
|
|
|
+ :label="checkItem.name"
|
|
|
+ :value="checkItem.id"
|
|
|
+ />
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 新增年级弹窗 -->
|
|
|
+ <FormDialog
|
|
|
+ :submitLoading="addGradeDialogLoading"
|
|
|
+ title="选择年级"
|
|
|
+ :defaultFormData="{}"
|
|
|
+ :formItemList="addGradeFormItemList"
|
|
|
+ :visible="addGradeDialogVisible"
|
|
|
+ @close="CloseAddGradeForm"
|
|
|
+ @confirm="CloseAddGradeForm"
|
|
|
+ >
|
|
|
+ </FormDialog>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 配置科目/选科 弹窗 -->
|
|
|
+ <FormDialog
|
|
|
+ class="subject_add_form_dialog"
|
|
|
+ width="420px"
|
|
|
+ :submitLoading="addSubjectDialogLoading"
|
|
|
+ :title="subjectTitle"
|
|
|
+ :defaultFormData="{}"
|
|
|
+ :formItemList="addSubjectFormItemList"
|
|
|
+ :visible="addSubjectDialogVisible"
|
|
|
+ @close="CloseAddSubjectForm"
|
|
|
+ @confirm="CloseAddSubjectForm"
|
|
|
+ >
|
|
|
+ <template #subject>
|
|
|
+ <div class="subject_option_container">
|
|
|
+ <div class="subject_all_list">
|
|
|
+ <div class="description">
|
|
|
+ <span class="subject_desc">可选科目</span>
|
|
|
+ <span class="operation">新增科目</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tree">
|
|
|
+ <TreeList
|
|
|
+ :defaultTreeData="[]"
|
|
|
+ :showCheckBox="true">
|
|
|
+ </TreeList>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="subject_selected_list">
|
|
|
+ <div class="description">
|
|
|
+ <span class="subject_desc">已选科目</span>
|
|
|
+ </div>
|
|
|
+ <div class="tree">
|
|
|
+ <TreeList
|
|
|
+ :defaultTreeData="[]"
|
|
|
+ :showCheckBox="true">
|
|
|
+ </TreeList>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </FormDialog>
|
|
|
+
|
|
|
+ <!-- 删除确认弹窗 -->
|
|
|
+ <Dialog
|
|
|
+ :submit-loading="deleteDialogLoading"
|
|
|
+ :visible="deleteDialogVisible"
|
|
|
+ @close="HandleDeleteClose"
|
|
|
+ @confirm="HandleDeleteConfirm"></Dialog>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref,onMounted } from 'vue';
|
|
|
+
|
|
|
+import FormDialog from '@/baseComponents/FormDialog.vue';
|
|
|
+import TreeList from '@/baseComponents/TreeList.vue';
|
|
|
+import {addGradeFormItemList, addSubjectFormItemList} from './formDialog'
|
|
|
+import Dialog from '@/baseComponents/Dialog.vue';
|
|
|
+
|
|
|
+import {getEvaluationDataDetailApi} from '@/api/step1Component.ts'
|
|
|
+
|
|
|
+
|
|
|
+// 新增年级弹窗操作
|
|
|
+const addGradeDialogVisible = ref(false);
|
|
|
+const addGradeDialogLoading = ref(false);
|
|
|
+// 打开新增年级弹窗
|
|
|
+const OpenAddGradeForm = () => {
|
|
|
+ console.log('点击了新增年级');
|
|
|
+ addGradeDialogVisible.value = true
|
|
|
+};
|
|
|
+// 关闭新增年级弹窗
|
|
|
+const CloseAddGradeForm = () => {
|
|
|
+ addGradeDialogVisible.value = false
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+// 配置科目/选科 弹窗操作
|
|
|
+const addSubjectDialogVisible = ref(false);
|
|
|
+const addSubjectDialogLoading = ref(false);
|
|
|
+const subjectTitle = ref('配置科目/选科');
|
|
|
+// 打开配置科目/选科 弹窗
|
|
|
+const OpenAddSubjectForm = () => {
|
|
|
+ console.log('点击了配置科目/选科');
|
|
|
+ addSubjectDialogVisible.value = true
|
|
|
+};
|
|
|
+// 关闭配置科目/选科 弹窗
|
|
|
+const CloseAddSubjectForm = () => {
|
|
|
+ addSubjectDialogVisible.value = false
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 全局控制
|
|
|
+const is_head_teacher_involved = ref(false);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 模拟年级配置列表数据
|
|
|
+const gradeOptions = ref([
|
|
|
+ {
|
|
|
+ id:'1',
|
|
|
+ gradeId: 'grade_7',
|
|
|
+ gradeName: '七年级',
|
|
|
+ subjectCount: '未定',
|
|
|
+ isSelectSubject: false,
|
|
|
+
|
|
|
+ // 选课总数
|
|
|
+ selectionCount: 0,
|
|
|
+ // 需要选择科目数
|
|
|
+ needCount: 0,
|
|
|
+
|
|
|
+ subjectData: [
|
|
|
+ { id: 'subject_1', name: '语文' },
|
|
|
+ { id: 'subject_2', name: '数学' },
|
|
|
+ ],
|
|
|
+ selectSubjectData: [
|
|
|
+ { id: 'subject_1', name: '语文' },
|
|
|
+ ],
|
|
|
+ classData: [
|
|
|
+ {
|
|
|
+ id: 'class_1',
|
|
|
+ name: '一班',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'class_2',
|
|
|
+ name: '二班',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectedClassData: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'2',
|
|
|
+ gradeId: 'grade_8',
|
|
|
+ gradeName: '八年级',
|
|
|
+ subjectCount: 6,
|
|
|
+ isSelectSubject: true,
|
|
|
+
|
|
|
+ // 选课总数
|
|
|
+ selectionCount: 6,
|
|
|
+ // 需要选择科目数
|
|
|
+ needCount: 2,
|
|
|
+
|
|
|
+ subjectData: [
|
|
|
+ { id: 'subject_1', name: '语文' },
|
|
|
+ { id: 'subject_2', name: '数学' },
|
|
|
+ { id: 'subject_3', name: '英语' },
|
|
|
+ ],
|
|
|
+ selectSubjectData: [
|
|
|
+ { id: 'subject_1', name: '语文' },
|
|
|
+ { id: 'subject_2', name: '数学' },
|
|
|
+ ],
|
|
|
+ classData: [
|
|
|
+ {
|
|
|
+ id: 'class_1',
|
|
|
+ name: '一班',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'class_2',
|
|
|
+ name: '二班',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ selectedClassData: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'3',
|
|
|
+ gradeId: 'grade_9',
|
|
|
+ gradeName: '九年级',
|
|
|
+ subjectCount: 7,
|
|
|
+ isSelectSubject: true,
|
|
|
+
|
|
|
+ selectionCount: 0,
|
|
|
+ needCount: 0,
|
|
|
+
|
|
|
+ subjectData: [],
|
|
|
+ selectSubjectData: [],
|
|
|
+ classData: [],
|
|
|
+ selectedClassData: [],
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ "id": 0,
|
|
|
+
|
|
|
+ "evaluationId": 0, //主id
|
|
|
+ "gradeCode": 0,
|
|
|
+ "gradeId": 0,
|
|
|
+ "gradeName": "",
|
|
|
+ subjectCount:"",
|
|
|
+
|
|
|
+
|
|
|
+ "selectionStatus": 0,
|
|
|
+ "selectionCount": 0,
|
|
|
+ "needCount": 0,
|
|
|
+ "sort": 0,
|
|
|
+ "classData": [
|
|
|
+ {
|
|
|
+ "id": 0,
|
|
|
+ "dataType": 0,
|
|
|
+ "detailType": 0,
|
|
|
+ "code": 0,
|
|
|
+ "idCode": "",
|
|
|
+ "name": "",
|
|
|
+ "sort": 0,
|
|
|
+ "evaluationSubjectId": 0,
|
|
|
+ "selectStatus": 0,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "subjectData": [
|
|
|
+ {
|
|
|
+ "id": 0,
|
|
|
+ "dataType": 0,
|
|
|
+ "detailType": 0,
|
|
|
+ "code": 0,
|
|
|
+ "name": "",
|
|
|
+ "sort": 0,
|
|
|
+ "selectStatus": 0,
|
|
|
+ "choiceStatus": 0,
|
|
|
+ "teacherSubjectStatus": 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "selectSubjectData": [
|
|
|
+ {
|
|
|
+ "id": 0,
|
|
|
+ "dataType": 0,
|
|
|
+ "detailType": 0,
|
|
|
+ "code": 0,
|
|
|
+ "name": "",
|
|
|
+ "sort": 0,
|
|
|
+ "selectStatus": 0,
|
|
|
+ "choiceStatus": 0,
|
|
|
+ "teacherSubjectStatus": 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+
|
|
|
+// 处理班级的全选和全不选
|
|
|
+const handleSelectAllClassOrNot = (selectedValue: any[], gradeOption: any) => {
|
|
|
+ console.log('选中的值:', selectedValue);
|
|
|
+ if(selectedValue){
|
|
|
+ // 全选
|
|
|
+ gradeOption.selectedClassData = gradeOption.classData.map(item => item.id);
|
|
|
+ }else{
|
|
|
+ // 取消全选
|
|
|
+ gradeOption.selectedClassData = []
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+// 删除弹窗处理逻辑
|
|
|
+const deleteDialogVisible = ref(false);
|
|
|
+const deleteDialogLoading = ref(false);
|
|
|
+const currentEditRow = ref(null); // 当前编辑的行数据
|
|
|
+// 删除弹窗 确认逻辑
|
|
|
+const HandleDeleteConfirm = () => {
|
|
|
+ console.log('确认删除');
|
|
|
+ // 在这里处理删除确认的逻辑
|
|
|
+ HandleDeleteClose()
|
|
|
+};
|
|
|
+// 关闭 删除弹窗
|
|
|
+const HandleDeleteClose = () => {
|
|
|
+ console.log('关闭删除弹窗');
|
|
|
+ // 在这里处理关闭删除弹窗的逻辑
|
|
|
+ deleteDialogVisible.value = false;
|
|
|
+};
|
|
|
+// 打开 删除弹窗
|
|
|
+const HandleDeleteOpen = (row: any) => {
|
|
|
+ console.log('打开删除弹窗');
|
|
|
+ // 在这里处理打开删除弹窗的逻辑
|
|
|
+ deleteDialogVisible.value = true;
|
|
|
+ currentEditRow.value = row;
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ console.log('组件挂载完成');
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* 右侧内容区样式 */
|
|
|
+.step_1_content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .option_container{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:20px;
|
|
|
+
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .grade_list_option{
|
|
|
+ .grade_list_header{
|
|
|
+ padding:16px;
|
|
|
+ border:solid #E4E7ED 1px;
|
|
|
+ border-bottom:none;
|
|
|
+ border-radius:10px 10px 0 0;
|
|
|
+ .search_content{
|
|
|
+ .content_left{
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .selection_params{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .grade_list_content{
|
|
|
+ border:solid #E4E7ED 1px;
|
|
|
+ border-radius:0 0 10px 10px;
|
|
|
+
|
|
|
+ .tag_list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ :deep(.el-tag){
|
|
|
+ border:solid #2E64FA 1px;
|
|
|
+ background-color: white;
|
|
|
+ color:#2E64FA;
|
|
|
+ font-size: 14px;
|
|
|
+ padding:0px 12px;
|
|
|
+ height:36px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .button-new-tag{
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ color:#2E64FA;
|
|
|
+ border:none;
|
|
|
+ height: 28px;
|
|
|
+ padding:0 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .subject_option_container{
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ width: 100%;
|
|
|
+ color:#333333;
|
|
|
+
|
|
|
+
|
|
|
+ .subject_all_list,
|
|
|
+ .subject_selected_list{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ >div.description{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .subject_desc{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .operation{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2E64FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >.tree{
|
|
|
+ border:solid #E4E7ED 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.subject_add_form_dialog{
|
|
|
+ :deep(.el-dialog){
|
|
|
+ .el-dialog__body{
|
|
|
+ padding: 20px;
|
|
|
+ .el-form .el-form-item{
|
|
|
+ margin: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lm