添加评价数据页面的模拟交互

src/baseComponents/FormDialog.vue

@@ -531,15 +531,15 @@ const handleRemove = ()=>{
 type  ItemType = 
   |'input'|'password'|'textarea'|'number'|'radio'
   |'select'|'multipleSelect' | 'singleSelectSearch' | 'multipleSelectSearch' | 'unionSelect' |'checkbox'|'datePicker'
-  |'dateTimePicker'| 'dateTimePickerNoRange' |'datePickerNoRange' |'url'|'file' | 'switch' | 'imgFile' | 'noDragFile' | 'fileShowList'
+  |'dateTimePicker'| 'dateTimePickerNoRange' |'datePickerNoRange' |'url'|'file' | 'switch' | 'imgFile' | 'noDragFile' | 'fileShowList' | String
 
 
 interface formItemProperty {
   key: String,
   label: String,
   type?:ItemType,
-  limit:Number, // 文件上传限制的数量
-  uploadTips:String,
+  limit?:Number, // 文件上传限制的数量
+  uploadTips?:String,
   acceptType?:[],
   checkAll?:Boolean,
   placeholder?:|String 

src/styles/page.scss

@@ -51,6 +51,7 @@
 .questionnaire_list {
     display: flex;
     align-items: flex-start;
+    align-content: flex-start;
     flex-wrap: wrap;
     gap: 20px;
     list-style: none;

src/views/reviewManagement/ReviewManagementDetail.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="main_container">
       <!-- 右侧主要内容区 -->
-      <div class="page_item content_right">
         <Step1Component></Step1Component>
-      </div>
   </div>
 </template>
 
@@ -20,20 +18,6 @@ import Step1Component from './stepComponent/Step1Component.vue';
 <style lang="scss" scoped>
 .main_container {
   height: 100vh !important;
- 
-  /* 右侧内容区样式 */
-  .content_right {
-    background-color: white;
-    // margin:20px 20px  20px 0;
-
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-
-
-  }
 }
 
 </style>

src/views/reviewManagement/stepComponent/Step1Component.vue

@@ -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>

src/views/reviewManagement/stepComponent/formDialog.ts

@@ -0,0 +1,29 @@
+
+import {ref} from 'vue';
+
+// 配置年级 弹窗 表单项
+export const addGradeFormItemList = ref([
+    {
+        key: 'grade',
+        label: '',
+        type:'checkbox',
+        rules: [],
+        custom:false,
+        style: {},
+        selectList: [],
+    }
+])
+
+
+// 配置科目/选科 弹窗 表单项
+export const addSubjectFormItemList = ref([
+    {
+        key: 'subject',
+        label: '',
+        type:'',
+        rules: [],
+        custom:true,
+        style: {},
+        selectList: [],
+    }
+])