完成：

1. Json数据的绑定
2. 完成超时数据的回写

src/apis/mock.js

@@ -11,3 +11,30 @@ export const get_overtime_show_info = (params) => {
         params: req_params
     })
 }
+
+export const get_response_json = (params) => {
+    const req_params = {
+        ip: params['ip'],
+        api: params['api']
+    }
+    console.log(req_params)
+    return request({
+        url: 'api/get_response_json',
+        method: 'get',
+        params: req_params
+    })
+}
+
+export const set_overtime_config = (params) => {
+    const req_params = {
+        ip: params['ip'],
+        show_id: params['show_id'],
+        audit_status: params['audit_status'],
+    }
+    console.log(req_params)
+    return request({
+        url: 'api/set_overtime_config',
+        method: 'get',
+        params: req_params
+    })
+}

src/views/mock/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {cinema_list} from '@/apis/update.js';
-import {get_overtime_show_info} from "@/apis/mock.js";
+import {get_overtime_show_info, get_response_json, set_overtime_config} from "@/apis/mock.js";
 import {onMounted} from "vue";
 import {ref, computed} from "vue";
 import {InfoFilled} from "@element-plus/icons-vue";
@@ -48,7 +48,7 @@ const handleClick = (tab, event) => {
 }
 
 
-const json_data = {"a": 1, "b": "c"}
+// const json_data = {"a": 1, "b": "c"}
 const mockConfig =
     [
       {
@@ -74,6 +74,8 @@ const handleIpChange = () => {
   // 处理超时退票部分
   getOvertimeShowInfo()
   handleOvertimeConfigChange()
+  // 获取接口JSON数据
+  getResponseJson()
   // 处理接口勾选状态
   checkedMockConfig.value = []
   checkAll.value = false
@@ -85,17 +87,22 @@ const handleCheckAllChange = (val) => {
   if (select_ip.value === '') {
     alert('请先选择测试影院IP！')
     checkedMockConfig.value = []
+    checkAll.value = false
+    isIndeterminate.value = false
     return
   }
   console.log(tabs_array.value.length)
   checkedMockConfig.value = val ? mockConfigItems : []
   isIndeterminate.value = false
+  activeName.value = 0
 }
 const handleCheckedMockChange = (value) => {
 
   if (select_ip.value === '') {
     alert('请先选择测试影院IP！')
     checkedMockConfig.value = []
+    checkAll.value = false
+    isIndeterminate.value = false
     return
   }
   console.log(tabs_array.value.length)
@@ -103,6 +110,7 @@ const handleCheckedMockChange = (value) => {
   const checkedCount = value.length
   checkAll.value = checkedCount === mockConfigItems.length
   isIndeterminate.value = checkedCount > 0 && checkedCount < mockConfigItems.length
+  activeName.value = 0
 }
 
 async function get_cinema_items() {
@@ -135,6 +143,7 @@ const sellShowInfo = ref([])
 const refundShowInfo = ref([])
 const auditStatusInfo = ref({})
 
+// 当设置了过场售退类型后更新场次列表
 const handleOvertimeShowTypeChange = () => {
   if (selectedOvertimeShowType.value === 'sell') {
     showInfo.value = sellShowInfo.value
@@ -145,14 +154,27 @@ const handleOvertimeShowTypeChange = () => {
   selectedStatus.value = ''
 }
 
+// 当ip更新后清除数据
 const handleOvertimeConfigChange = () => {
   selectedOvertimeShowType.value = ''
   selectedShowInfo.value = ''
   selectedStatus.value = ''
 }
 
+// 处理选择完全部选项后通知后台存储设置
+const handleOvertimeConfigSave = () => {
+  if (selectedOvertimeShowType.value !== '' && selectedShowInfo.value !== '' && selectedStatus.value !== '') {
+    const params = {ip: select_ip.value, show_id: selectedShowInfo.value, audit_status: selectedStatus.value}
+    set_overtime_config(params).then(res => {
+      console.log(res)
+    }).catch(err => {
+      console.log(err)
+    })
+  }
+}
+
+// 获取过场售退场次和审核的结果数据用于填充select组件
 async function getOvertimeShowInfo() {
-  console.log('getOvertimeShowInfo -- async')
   await get_overtime_show_info({ip: select_ip.value}).then(
       res => {
         sellShowInfo.value = [...res['sell']]
@@ -167,6 +189,123 @@ async function getOvertimeShowInfo() {
 }
 
 
+// 获取Json数据部分逻辑
+// 定义存储Json的对象
+const allJsonData = ref({})
+
+// 获取Json的请求封装
+function getResponseJson() {
+  mockConfigItems.forEach(
+      (api, index) => {
+        const req = {
+          ip: select_ip.value,
+          api: api
+        }
+        if (api === 'download_film_info') {
+          get_response_json(req).then(res => {
+            allJsonData.value.download_film_info = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'get_cinema_info') {
+          get_response_json(req).then(res => {
+            allJsonData.value.get_cinema_info = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'get_screen_info') {
+          get_response_json(req).then(res => {
+            allJsonData.value.get_screen_info = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'report_ticket') {
+          get_response_json(req).then(res => {
+            allJsonData.value.report_ticket = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'report_film_schedule') {
+          get_response_json(req).then(res => {
+            allJsonData.value.report_film_schedule = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'upload_screen_seat_info') {
+          get_response_json(req).then(res => {
+            allJsonData.value.upload_screen_seat_info = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'get_overtime_ticket_status') {
+          req.sessionCode = '11'
+          req.overtimeType = '22'
+          get_response_json(req).then(res => {
+            allJsonData.value.get_overtime_ticket_status = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+        if (api === 'valid_error') {
+          get_response_json(req).then(res => {
+            allJsonData.value.valid_error = res
+          }).catch(err => {
+            console.log(err)
+          })
+        }
+      }
+  )
+}
+
+const checkedItemsOrdered = computed(() => {
+  let temp = []
+  mockConfigItems.forEach(
+      (item) => {
+        if (checkedMockConfig.value.indexOf(item) >= 0) {
+          temp.push(item)
+        }
+      }
+  )
+  return temp
+})
+
+// 计算属性： 用于切换标签时，回填对应的Json数据，支持读写的计算属性
+const json_data = computed(
+    {
+      get() {
+        return allJsonData.value[checkedItemsOrdered.value[activeName.value]]
+      },
+      set(newVal) {
+        allJsonData.value[checkedItemsOrdered.value[activeName.value]] = newVal
+      }
+    }
+)
+
+// 处理开始和停止按键的逻辑
+const startBtn_disable = ref(false)
+const startBtn_loading = ref(false)
+
+const handleStart = () => {
+  console.log(selectedOvertimeShowType.value)
+  console.log(selectedShowInfo.value)
+  console.log(selectedStatus.value)
+  startBtn_disable.value = true
+  startBtn_loading.value = true
+}
+
+const handleEnd = () => {
+  startBtn_disable.value = false
+  startBtn_loading.value = false
+}
+
+
+// Vue生命周期钩子函数
 onMounted(
     async () => {
       await get_cinema_items();
@@ -242,8 +381,8 @@ onMounted(
     <br>
     <el-row justify="start">
       <el-row :span="12">
-        <el-button>开始</el-button>
-        <el-button>停止</el-button>
+        <el-button @click="handleStart" :disabled="startBtn_disable" :loading="startBtn_loading">开始</el-button>
+        <el-button @click="handleEnd">停止</el-button>
       </el-row>
     </el-row>
 
@@ -264,13 +403,15 @@ onMounted(
             </el-col>
             <el-col :span="6">
               <label class="api-label">场次</label>&nbsp
-              <el-select style="width: 75%" v-model="selectedShowInfo" placeholder="请选择">
+              <el-select style="width: 75%" v-model="selectedShowInfo" placeholder="请选择"
+                         @change="handleOvertimeConfigSave">
                 <el-option v-for="show in showInfo" :key="show.id" :label="show.show" :value="show.id"></el-option>
               </el-select>
             </el-col>
             <el-col :span="6">
               <label class="api-label">审核结果</label>&nbsp
-              <el-select style="width: 50%" v-model="selectedStatus" placeholder="请选择">
+              <el-select style="width: 50%" v-model="selectedStatus" placeholder="请选择"
+                         @change="handleOvertimeConfigSave">
                 <el-option v-for="status in auditStatusInfo" :key="status.key" :label="status.status"
                            :value="status.key"></el-option>
               </el-select>