修改评价数据页面的操作权限控制和修改评价任务时的表单禁选控制

src/assets/icon/AddIcon.vue

@@ -1,5 +1,5 @@
 <template>
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg :width="iconSize" :height="iconSize" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="7" y="1" width="1.8" height="14" rx="0.9" 
             fill="var(--icon-color)"/>
         <rect x="15" y="7" width="1.8" height="14" rx="0.9" transform="rotate(90 15 7)"
@@ -7,9 +7,21 @@
     </svg>
 </template>
 
+<script setup lang="ts">
+
+
+const props  = defineProps({
+    iconSize:{
+        type:Number,
+        default:16
+    }
+
+})
+
+</script>
 
 <style lang="scss" scoped>
 svg{
-    --icon-color : #2E64FA;   
+    --icon-color : #2E64FA;
 }
 </style>

src/store/index.ts

@@ -29,6 +29,10 @@ interface HorizontalMenuItem {
   isFinishEvaluationProgress:boolean, //评价进度是否完成
   isFinsihGenerateAnalysis:boolean,  //生成分析是否完成
 
+  isAllowDeleteOrEdit:boolean,  //任务是否允许修改或删除
+
+
+
 }
 // 定义 RootState 接口（可扩展）
 interface RootState {
@@ -113,6 +117,9 @@ const store = createStore<RootState>({
           isFinishParameterSetting:Boolean(res.data.paramSetupStatus),
           isFinishEvaluationProgress:Boolean(res.data.evaluationProgressStatus),
           isFinsihGenerateAnalysis:Boolean(res.data.analysisStatus),
+          isAllowDeleteOrEdit:!Boolean(res.data.status),   // status  0 可以  1 不可以
+
+
         }
         commit('updateEvaluationManageStepData',newData)
       }

src/views/reviewManagement/ReviewManagement.vue

@@ -296,7 +296,7 @@ const GoToQuestionnaireReviewDetail = (row)=>{
 }
 
 //4. 新增/修改问卷任务
-const formDialogTitle = ref('创建评价')
+const formDialogTitle = ref('')
 const formSubmitLoading = ref(false)
 const formDialogVisible = ref(false)
 const defaultFormData = ref({  //表单默认值
@@ -323,6 +323,7 @@ const UpdataFormDialogItmHideList = (hideKeys:string[])=>{
     })
 }
 // 更新 新增/修改 状态下，评价方式切换 所展示的 不同表单信息
+ //type :评价方式，0-线上匿名，1-线下答卷，2-线上导入，3-线上实名
 const UpdataEditOrAddFormHideOfDifferReviewType = (id,type)=>{
     switch(Number(type)){
             case 0:
@@ -346,6 +347,27 @@ const UpdataEditOrAddFormHideOfDifferReviewType = (id,type)=>{
             }
         }
 }
+
+
+// 更新表单的禁选项
+const UpdateFormDialogItmDisabledList = (disabledKeys:string[])=>{
+    formDialogItmList.value = formDialogItmList.value.map(item=>{
+        if(disabledKeys.includes(item.key)){
+            return {
+                ...item,
+                disabled:true
+            }
+        }else{
+            return {
+                ...item,
+                disabled:false
+            }
+        }
+    })
+
+}
+
+
 // 切换问卷评价表单内容 _需要根据条件清空开始时间和结束时间
 // 同时要判断 当前是 新增 还是 修改
 const HandleFormItmChange = (params)=>{
@@ -359,11 +381,15 @@ const HandleFormItmChange = (params)=>{
 const OpenQuestionnaireDialog = async (row?:any)=>{
     formDialogVisible.value = true
     if(row.id){
+        formDialogTitle.value = '修改评价'
         // 修改
         defaultFormData.value = row
         // 要判断表单的显隐藏
         UpdataEditOrAddFormHideOfDifferReviewType(row.id, row.evaluationType);
+        // row.status :  0 可以删除/修改 ；1 不可以 删除/修改 
+        UpdateFormDialogItmDisabledList(row.status ?  ['evaluationType'] : [])
     }else{
+        formDialogTitle.value = '创建评价'
         // 新增
         let gradeListOption = []
         let res = await getGradeListApi()
@@ -391,7 +417,8 @@ const OpenQuestionnaireDialog = async (row?:any)=>{
                 }
             })
         }
-        UpdataFormDialogItmHideList([''])
+        UpdataFormDialogItmHideList([])
+        UpdateFormDialogItmDisabledList([])
     }
 }
 

src/views/reviewManagement/stepComponent/evaluationDataComponent/EvaluationDataComponent.vue

@@ -5,14 +5,15 @@
         <div class="search_content">
           <div class="content_left">
             <!-- 线上匿名 展示; 线下答卷 隐藏 -->
-            <el-checkbox v-if="store.state.evaluationManageStepData.evaluationType === 0 " v-model="store.state.evaluationManageStepData.isHeadTeacherInvolved" >班主任参与评价</el-checkbox>
+            <el-checkbox :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit" v-if="store.state.evaluationManageStepData.evaluationType === 0 " v-model="store.state.evaluationManageStepData.isHeadTeacherInvolved" >班主任参与评价</el-checkbox>
           </div>
           <div class="content_right">
-            <el-button  class="button_border button_img_prefix"  @click="OpenAddGradeForm">
-              <img :src="addIcon" alt="">
+            <el-button  :class="[store.state.evaluationManageStepData.isAllowDeleteOrEdit ? 'button_border' : 'is-disabled','button_img_prefix']"  
+                    @click="store.state.evaluationManageStepData.isAllowDeleteOrEdit ?  OpenAddGradeForm() : ''">
+              <AddIcon :iconSize="14" :style="{'--icon-color':store.state.evaluationManageStepData.isAllowDeleteOrEdit ? '#2E64FA' : '#C0C4CC'}"></AddIcon>
               新增年级
             </el-button>
-            <el-button  class="button_background" @click="SaveEvaluationData">完成</el-button>
+            <el-button  :class="[store.state.evaluationManageStepData.isAllowDeleteOrEdit ? 'button_background' : 'is-disabled']" @click="store.state.evaluationManageStepData.isAllowDeleteOrEdit ? SaveEvaluationData() : ''">完成</el-button>
           </div>
         </div>
       </div>
@@ -34,16 +35,18 @@
 
                   <!-- 线上匿名 展示; 线下答卷 隐藏 -->
                   <template  v-if="store.state.evaluationManageStepData.evaluationType === 0 ">
-                    <el-checkbox v-model="gradeOpt.selectionStatus" >选科</el-checkbox>
+                    <el-checkbox :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit" v-model="gradeOpt.selectionStatus" >选科</el-checkbox>
                     <div class="selection_params" v-if="gradeOpt.selectionStatus">
                       <span class="param_text">一共&nbsp;&nbsp;</span>
                       <el-input type="number" 
+                        :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit"
                         :max="gradeOpt.subjectCount" :min="1" 
                         v-model="gradeOpt.selectionCount"
                         @blur="HandleInputBlur(gradeOpt.subjectCount,gradeOpt,'selectionCount')">
                       </el-input>
                       <span class="param_text">&nbsp;&nbsp;科，需要选择&nbsp;&nbsp;</span>
                       <el-input type="number" 
+                        :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit"
                         :max="gradeOpt.subjectCount" :min="1"  
                         v-model="gradeOpt.needCount" 
                         @blur="HandleInputBlur(gradeOpt.selectionCount,gradeOpt,'needCount')">
@@ -54,7 +57,8 @@
 
                 </div>
                 <div class="content_right table_row_option">
-                  <span class="button_delete" @click="HandleDeleteOpen(gradeOpt,'grade')"> 删除</span>
+                  <span :class="[store.state.evaluationManageStepData.isAllowDeleteOrEdit ?  'button_delete' : 'editor_disable']" 
+                    @click="store.state.evaluationManageStepData.isAllowDeleteOrEdit ? HandleDeleteOpen(gradeOpt,'grade') : ''"> 删除</span>
                 </div>
               </div>
             </div>
@@ -76,11 +80,14 @@
                 <div class="tag_list">
                   <div class="tag_itm" v-for="tag in gradeOpt.subjectData" :key="tag">
                     {{ tag.name }}
-                    <component @click="HandleDeleteOpen(tag,'subject')" :is="DeleteIcon" 
-                        :style="{'--icon-color':'#2E64FA'}"></component>
+                    <component v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit" 
+                        @click="HandleDeleteOpen(tag,'subject')" 
+                        :is="DeleteIcon" :style="{'--icon-color':'#2E64FA'}">
+                      </component>
                   </div>
 
-                  <el-button class="button_border  button_img_prefix"
+                  <el-button v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit" 
+                    class="button_border  button_img_prefix"
                     @click="OpenAddSubjectForm(gradeOpt,'subject')">
                     <img :src="addIcon" alt="">
                     新增
@@ -99,11 +106,14 @@
                 <div class="tag_list">
                   <div class="tag_itm" v-for="tag in gradeOpt.selectSubjectData" :key="tag">
                     {{ tag.name }}
-                    <component @click="HandleDeleteOpen(tag,'selectedSubject')" :is="DeleteIcon" 
-                          :style="{'--icon-color':'#2E64FA'}"></component>
+                    <component v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit" 
+                        @click="HandleDeleteOpen(tag,'selectedSubject')" 
+                        :is="DeleteIcon"  :style="{'--icon-color':'#2E64FA'}">
+                    </component>
                   </div>
                   
-                  <el-button class="button_border  button_img_prefix"
+                  <el-button v-if="store.state.evaluationManageStepData.isAllowDeleteOrEdit"  
+                    class="button_border  button_img_prefix"
                     @click="OpenAddSubjectForm(gradeOpt,'selectedSubject')">
                     <img :src="addIcon" alt="" style="color:red">
                     新增
@@ -118,7 +128,7 @@
                 :rules="[]"
               >
                 <el-checkbox 
-                  v-if="gradeOpt?.classData?.length > 0"
+                  v-if="gradeOpt?.classData?.length > 0 && store.state.evaluationManageStepData.isAllowDeleteOrEdit "
                   :indeterminate="gradeOpt?.selectedClassData?.length > 0  && gradeOpt?.selectedClassData?.length < gradeOpt?.classData?.length" 
                   style="margin-right: 20px;"
                   :model-value="(gradeOpt?.selectedClassData?.length == gradeOpt?.classData?.length)"
@@ -126,6 +136,7 @@
                 >全选</el-checkbox>
 
                 <el-checkbox-group  
+                  :disabled="!store.state.evaluationManageStepData.isAllowDeleteOrEdit"
                   class="check_group_list"
                   v-model="gradeOpt.selectedClassData"
                 >
@@ -263,6 +274,7 @@ import { ElMessage } from 'element-plus';
 import router from '@/router';
 
 import addIcon from '@/assets/icon/add.svg'
+import AddIcon from '@/assets/icon/AddIcon.vue';
 import DeleteIcon from '@/assets/icon/DeleteIcon.vue'
 
 interface subjectOrClassDataItm {
@@ -854,11 +866,13 @@ onMounted(async() => {
   }
 
   .button_img_prefix {
-    >span{
+    :deep(>span){
+      // border:solid red 1px;
+      display: flex;
+      gap:4px;
       img{
         width: 14px !important;
         height: 14px !important;
-        margin-right: 4px;
       }
     }
   }