完成form主体部分代码

src/views/mock/index.vue

@@ -4,35 +4,17 @@ import {onMounted} from "vue";
 import {ref} from "vue";
 import {InfoFilled} from "@element-plus/icons-vue";
 
+const mockConfigPost = ref()
 let cinema_items = ref([]);
 const select_ip = ref('')
 
-// let mock_config = ref(
-//     {
-//       // 数据下载
-//       download_film_info: false,
-//       get_cinema_info: false,
-//       get_screen_info: false,
-//       // 数据上报
-//       report_ticket: false,
-//       report_film_schedule: false,
-//       upload_screen_seat_info: false,
-//       // 超时票务审核
-//       get_overtime_ticket_status: false,
-//       // 数据查询
-//       valid_error: false,
-//
-//       data_download_check_all: false,
-//       data_download_indeterminate: false,
-//     }
-// )
 const checkAll = ref(false)
 const isIndeterminate = ref(false)
 const checkedMockConfig = ref([])
 const mockConfigItems = ['download_film_info', 'get_cinema_info', 'get_screen_info', 'report_ticket',
   'report_film_schedule', 'upload_screen_seat_info', 'get_overtime_ticket_status', 'valid_error']
 
-const mockConfig = ref(
+const mockConfig =
     [
       {
         label: '数据下载',
@@ -46,12 +28,23 @@ const mockConfig = ref(
         {key: 'upload_screen_seat_info', name: '座位信息上报接口'}]
     }, {
       label: '超时票务审核',
-      items: [{key: 'get_overtime_ticket_status', name: '超时票务受理情况查询接口'},]
+      items: [{key: 'get_overtime_ticket_status', name: '超时票务查询接口'},]
     }, {
       label: '数据查询',
-      items: [{key: 'valid_error', name: '数据清洗错误查询接口'},]
+      items: [{key: 'valid_error', name: '数据清洗查询接口'},]
+    }
+    ]
+
+const handleCheckAllChange = (val) => {
+  checkedMockConfig.value = val ? mockConfigItems : []
+  isIndeterminate.value = false
+}
+
+const handleCheckedMockChange = (value) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === mockConfigItems.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < mockConfigItems.length
 }
-    ])
 
 async function get_cinema_items() {
   cinema_items = []
@@ -81,10 +74,10 @@ onMounted(
 
 <template>
   <el-form
-      ref="mockConfig"
+      ref="mockConfigPost"
   >
     <el-row justify="start">
-      <el-col :span="5">
+      <el-col :span="4">
         <el-select v-model="select_ip" class="m-2" placeholder="选择要模拟的影院IP">
           <el-option
               v-for="item in cinema_items.value"
@@ -117,7 +110,7 @@ onMounted(
         <el-checkbox
             v-model="checkAll"
             :indeterminate="isIndeterminate"
-            @change=""
+            @change="handleCheckAllChange"
         >
           全选
         </el-checkbox>
@@ -125,14 +118,14 @@ onMounted(
     </el-row>
     <el-checkbox-group
         v-model="checkedMockConfig"
-        @change=""
+        @change="handleCheckedMockChange"
     >
-      <div v-for="(api_items) in mockConfig">
+      <div v-for="api_items in mockConfig">
         <el-divider content-position="left">
           <span class="api_label">{{ api_items.label }}</span>
         </el-divider>
         <el-row justify="start">
-          <el-col :span=24/api_items.items.length v-for="api in api_items">
+          <el-col :span=5 v-for="api in api_items.items">
             <el-checkbox
                 :key="api.key"
                 :label="api.key"
@@ -148,7 +141,7 @@ onMounted(
 
 <style scoped>
 span.api_label {
-  font-size: 18px;
+  font-size: 16px;
 }
 
 div.api_desc {