添加评价账号的批量编辑弹窗

src/baseComponents/FormDialog.vue

@@ -488,11 +488,18 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button class="button_border_gray cancel" @click="closeDialog">取 消</el-button>
-      <slot name="footer_btn" :formRef="formRef"></slot>
-      <slot name="confirm" :formRef="formRef" :formData="formData">
-        <el-button class="button_background" :disabled="props.disabledConfirm" :loading="props.submitLoading" @click="props.disabledConfirm ? '' : formSubmitCheck(formRef)">确 定</el-button>
-      </slot>
+      <div class="footer_bottom">
+        <div class="footer_right">
+          <slot name="footerRight" :formRef="formRef"></slot>
+        </div>
+        <div class="footer_right">
+          <el-button class="button_border_gray cancel" @click="closeDialog">取 消</el-button>
+          <slot name="footer_btn" :formRef="formRef"></slot>
+          <slot name="confirm" :formRef="formRef" :formData="formData">
+            <el-button class="button_background" :disabled="props.disabledConfirm" :loading="props.submitLoading" @click="props.disabledConfirm ? '' : formSubmitCheck(formRef)">确 定</el-button>
+          </slot>
+        </div>
+      </div>
     </template>
 
     <FilePreview  
@@ -1135,6 +1142,13 @@ const HandleFilePreview = (params)=>{
 
 }
 
+.footer_bottom{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
 </style>
 
 <style lang="scss">

src/views/reviewManagement/stepComponent/step4Component/Step4Component.vue

@@ -7,7 +7,7 @@
                 </div>
                 <div class="content_right">
                     <el-button  class="delete_button_border_no_bg" @click="">全部清空</el-button>
-                    <el-button  class="button_border" @click="">批量编辑</el-button>
+                    <el-button  class="button_border" @click="OpenBatchEditForm">批量编辑</el-button>
                     <el-button  class="button_refresh" @click="">批量导出</el-button>
                     <el-button  class="button_refresh" @click="">批量导入</el-button>
                     <el-button  class="button_background" @click="">生成评价码</el-button>
@@ -26,6 +26,48 @@
                 {{ row[`num${item}`] }}
             </template>
         </Table>
+
+        <FormDialog 
+            width="800px"
+            :visible="batchEditFormVisible" :defaultFormData="{}" 
+            title="批量编辑" :submitLoading="batchEditFormLoading"
+            @close="CloseBatchEditForm" 
+            @confirm="SaveBatchEditForm"
+            >
+
+            <template #form_pre>
+                <ul class="grade_form_item">
+                    <li v-for="grade in batchEditGradeList" :key="grade.gradeId">
+                        <div class="grade_name">{{ grade.gradeName }}</div>
+                        <div class="class_list">
+                            <el-checkbox
+                                :model-value="false"
+                                :indeterminate="false"
+                                @change="(val)=>{}"
+                            >
+                                全选
+                            </el-checkbox>
+
+                            <el-checkbox 
+                                v-model="grade.selectedClassList "
+                                v-for="checkItem in grade.classList" 
+                                :key="checkItem.value"
+                                :label="checkItem.label"
+                                :value="checkItem.value"
+                            />
+                        </div>
+                    </li>
+                </ul>
+            </template>
+
+
+            <template #footerRight="{formRef}">
+                <div class="batch_num">
+                    数量：
+                    <el-input  type="number"  v-model="batchAccountNum"   placeholder="请输入"/>
+                </div>
+            </template>
+        </FormDialog>
     
     </div>
 </template>
@@ -36,11 +78,12 @@
 import { ref } from 'vue';
 import Table from '@/baseComponents/Table.vue';
 import {tableColumns} from './table'
+import FormDialog from '@/baseComponents/FormDialog.vue';
 
 const isGenerateByGender = ref(false)  //所有单科统一模版
 
 // 生成 年级/班级 模拟数据
-const generateGradeClassData = () => {
+const generateGradeClassTableData = () => {
   const data = [];
   for (let i = 1; i <= 3; i++) {
     let row: any = {
@@ -95,19 +138,125 @@ const generateGradeClassData = () => {
 }
 
 // 生成模拟数据
-const tableData = ref(generateGradeClassData());
+const tableData = ref(generateGradeClassTableData());
+
 
 
+// * 批量编辑弹窗操作
+const batchEditFormVisible = ref(false)
+const batchEditFormLoading = ref(false)
+const batchAccountNum = ref()
+const CloseBatchEditForm = ()=>{
+    batchEditFormVisible.value = false
+}
+const OpenBatchEditForm = ()=>{
+    batchEditFormVisible.value = true
+}
+const SaveBatchEditForm = (params:any)=>{
+    const {formData,formRef} = params
+    const batchData = batchEditGradeList.value.map(item=>{
+        return {
+            gradeName: item.gradeName,
+            gradeId: item.gradeId,
+            selectedClassList:item.selectedClassList
+        }
+    })
+    console.log('选中的批量数据--',batchData)
+    console.log('选中的批量数据-账号数量-',batchAccountNum)
+    // CloseBatchEditForm()
+}
+
+// 生成批量编辑弹窗模拟数据
+const batchEditGradeList = ref([
+    {
+        gradeName: '七年级',
+        gradeId: '1',
+        classList: [
+            // 第一行 6 个
+            { label: '英语A2班', value: '7_1' },
+            { label: '英语A2班', value: '7_2' },
+            { label: '英语A2班', value: '7_3' },
+            { label: '英语A2班', value: '7_4' },
+            { label: '英语A2班', value: '7_5' },
+            { label: '英语A2班', value: '7_6' },
+            // 第二行 4 个
+            { label: '英语A2班', value: '7_7' },
+            { label: '英语A2班', value: '7_8' },
+            { label: '英语A2班', value: '7_9' },
+            { label: '英语A2班', value: '7_10' }
+        ],
+        selectedClassList:[]
+    },
+    {
+        gradeName: '八年级',
+        gradeId: '2',
+        classList: [
+            // 第一行 6 个
+            { label: '英语A2班', value: '8_1' },
+            { label: '英语A2班', value: '8_2' },
+            { label: '英语A2班', value: '8_3' },
+            { label: '英语A2班', value: '8_4' },
+            { label: '英语A2班', value: '8_5' },
+            { label: '英语A2班', value: '8_6' },
+            // 第二行 4 个
+            { label: '英语A2班', value: '8_7' },
+            { label: '英语A2班', value: '8_8' },
+            { label: '英语A2班', value: '8_9' },
+            { label: '英语A2班', value: '8_10' }
+        ],
+        selectedClassList:[]
+    },
+    {
+        gradeName: '九年级',
+        gradeId: '3',
+        classList: [
+            // 第一行 6 个
+            { label: '英语A2班', value: '9_1' },
+            { label: '英语A2班', value: '9_2' },
+            { label: '英语A2班', value: '9_3' },
+            { label: '英语A2班', value: '9_4' },
+            { label: '英语A2班', value: '9_5' },
+            { label: '英语A2班', value: '9_6' },
+            // 第二行 4 个
+            { label: '英语A2班', value: '9_7' },
+            { label: '英语A2班', value: '9_8' },
+            { label: '英语A2班', value: '9_9' },
+            { label: '英语A2班', value: '9_10' }
+        ],
+        selectedClassList:[]
+    }
+]);
+
 </script>
 
 
 
 <style lang="scss" scoped>
 
-.questionnaire_cell{
-    gap:16px;
-    word-break: keep-all;
+.grade_form_item{
+    display: flex;
+    flex-direction: column;
+    gap:26px;
 
+    .grade_name{
+        font-weight: 600;
+        font-size: 16px;
+        color: #333333;
+        margin-bottom: 10px;
+    }
+    .class_list .el-checkbox{
+        font-weight: 400;
+        font-size: 14px;
+        color: #666666;
+    }
+
+}
+
+.batch_num{
+    // border:solid red 1px;
+    display: flex;
+    align-items: center;
+    word-break: keep-all;
 }
 
 </style>