完成页面逻辑

package.json

@@ -10,10 +10,13 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/node": "^20.10.4",
     "axios": "^1.6.2",
     "element-plus": "^2.4.3",
+    "json-editor-vue3": "^1.0.9",
     "normalize.css": "^8.0.1",
+    "vite-plugin-commonjs": "^0.10.1",
     "vue": "^3.3.8",
     "vue-router": "^4.0.13",
     "vuex": "^4.0.2"

src/components/mock/api_block.vue

@@ -1,11 +1,45 @@
 <script setup>
+import {ref, toRef} from "vue";
+import JsonEditorVue from 'json-editor-vue3'
+// import {TabsPaneContext} from "element-plus";
+
+const props = defineProps(
+    {
+      json_data: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
+      tabs: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      }
+    }
+)
+const json_data = toRef(props.json_data)
+const tabs = props.tabs
+
+const activeName = ref(``)
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
 
 </script>
 
 <template>
-
+  <el-tabs v-model="activeName" class="api_tabs" @tab-click="handleClick">
+    <el-tab-pane v-for="(tab,index) in tabs" :label="tab.label" :name="tab.name">
+      <JsonEditorVue class="editor" v-model="json_data" language="zh-CN"/>
+    </el-tab-pane>
+  </el-tabs>
+<!--  <JsonEditorVue class="editor" v-model="json_data" language="zh-CN"/>-->
 </template>
 
 <style scoped>
-
+.editor {
+  width: 75%;
+}
 </style>

src/views/mock/index.vue

@@ -1,8 +1,9 @@
 <script setup>
 import {cinema_list} from '@/apis/update.js';
 import {onMounted} from "vue";
-import {ref} from "vue";
+import {ref, computed} from "vue";
 import {InfoFilled} from "@element-plus/icons-vue";
+import JsonEditorVue from "json-editor-vue3";
 
 const mockConfigPost = ref()
 let cinema_items = ref([]);
@@ -14,6 +15,34 @@ 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 tabs_dict = [
+  {label:'影片信息下载', name: 'download_film_info'},
+  {label:'影院信息下载', name: 'get_cinema_info'},
+  {label:'影厅信息下载', name: 'get_screen_info'},
+  {label:'票房数据上报', name: 'report_ticket'},
+  {label:'排片数据上报', name: 'report_film_schedule'},
+  {label:'座位信息上报', name: 'upload_screen_seat_info'},
+  {label:'超时票务查询', name: 'get_overtime_ticket_status'},
+  {label:'数据清洗查询', name: 'valid_error'},
+]
+const tabs_array = computed(()=>{
+  const tabs = []
+  tabs_dict.forEach((tab_item, index) => {
+    if (checkedMockConfig.value.indexOf(tab_item.name) >= 0){
+      tabs.push(tab_item)
+    }
+  })
+  console.log(select_ip.value)
+  return tabs
+})
+
+const activeName = ref('0')
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
+
+
+const json_data = {"a": 1, "b": "c"}
 const mockConfig =
     [
       {
@@ -36,11 +65,21 @@ const mockConfig =
     ]
 
 const handleCheckAllChange = (val) => {
+  if (select_ip.value === '') {
+    alert('请先选择测试影院IP！')
+    checkedMockConfig.value = []
+    return
+  }
   checkedMockConfig.value = val ? mockConfigItems : []
   isIndeterminate.value = false
 }
 
 const handleCheckedMockChange = (value) => {
+  if (select_ip.value === '') {
+    alert('请先选择测试影院IP！')
+    checkedMockConfig.value = []
+    return
+  }
   const checkedCount = value.length
   checkAll.value = checkedCount === mockConfigItems.length
   isIndeterminate.value = checkedCount > 0 && checkedCount < mockConfigItems.length
@@ -64,6 +103,7 @@ async function get_cinema_items() {
   })
 }
 
+
 onMounted(
     async () => {
       await get_cinema_items();
@@ -136,12 +176,29 @@ onMounted(
         </el-row>
       </template>
     </el-checkbox-group>
+    <br>
+    <el-row justify="start">
+      <el-row :span="12">
+        <el-button>开始</el-button>
+        <el-button>停止</el-button>
+      </el-row>
+    </el-row>
+
   </el-form>
+  <br>
+  <div>
+    <el-tabs v-model="activeName" class="api_tabs" @tab-click="handleClick">
+      <el-tab-pane v-for="(tab,index) in tabs_array" :label="tab.label" :name="index.toString()">
+        <JsonEditorVue class="editor" v-model="json_data" language="zh-CN"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+
 </template>
 
 <style scoped>
 span.api_label {
-  font-size: 16px;
+  font-size: 14px;
 }
 
 div.api_desc {
@@ -152,5 +209,4 @@ div.api_desc {
   line-height: 1;
 }
 
-
 </style>

vite.config.js

@@ -4,11 +4,13 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
 import {resolve} from 'path';
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
+        viteCommonjs(),
         AutoImport({resolvers: [ElementPlusResolver()]}),
         Components({resolvers: [ElementPlusResolver()]})
     ],