基本页面差不多了

src/components/ec_api/TabArea.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref, reactive, onBeforeMount, onMounted, watch} from "vue";
+import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch} from "vue";
 import {getCurrentInstance} from 'vue'
 import Sortable from "sortablejs";
 import {useStore, mapState} from "vuex";
@@ -25,48 +25,38 @@ const UserApiData = ref({api: {}, base_info: {}, tab: {}})
 // 表格逻辑
 // 多选改变后处理逻辑
 function handleParamsChange(newCheckedResult) {
-  console.log('handleParamsChange', newCheckedResult)
-  console.log('activeTab.value', activeTab.value)
-  console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
-
-
+  // console.log('handleParamsChange', newCheckedResult)
+  // console.log('activeTab.value', activeTab.value)
+  // console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
 }
 
+// 遍历当前标签页下的参数如果勾选则标记is_checked为true
 function handleParamsSelect(val) {
-  console.log('val', val)
   UserApiData.value.api[activeTab.value].params.forEach(param => {
-    console.log(val.indexOf(param))
     param['is_checked'] = val.indexOf(param) >= 0;
   })
 }
 
-// function handleTabChange(val){
-//   console.log('handleTabChange', val)
-// }
-
-// 自动勾选行
+// 自动勾选行 切换标签后检查全部字段，如果字段的is_checked是true则在页面上勾选字段
 function markIsChecked() {
-  console.log('checkRequestSelection')
   if (UserApiData.value.hasOwnProperty('api') || UserApiData.value.api.length > 0) {
-    console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
     UserApiData.value.api[activeTab.value].params.forEach(item => {
-      console.log('item', item)
       if (item['is_checked'] === true) {
-        console.log('ApiTableRef.value', ApiTableRef.value)
         ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, true)
       }
     })
-    // console.log(multipleSelection.value)
   }
 }
 
 // 初始逻辑数据逻辑处理
 function initApiData() {
+  // 更新基础数据
   UserApiData.value['base_info'] = {
     env: store.state.ecApiModule.ec_api_data.env,
     cinema: store.state.ecApiModule.ec_api_data.cinema,
     channel: store.state.ecApiModule.ec_api_data.channel,
   }
+  // 根据store.state.ecApiModule.ec_api_data.api来创建本都数据
   let api_id_array = []
   let api_tab = {}
   if (store.state.ecApiModule.ec_api_data.api) {
@@ -83,21 +73,38 @@ function initApiData() {
         }
       }
     })
+    // 如果删除某接口后同步删除UserApiData中的数据
     Object.values(UserApiData.value['api']).forEach((api) => {
       if (api_id_array.indexOf(api['id']) < 0) {
         delete UserApiData.value['api'][api['id']]
       }
     })
+    // 把生成的接口数据赋给UserApiData
     UserApiData.value.tab = api_tab
+  }
+}
 
+// 添加新字段
+function addNewParams() {
+  UserApiData.value.api[activeTab.value].params.push({
+    id: Date.now(),
+    api_id: activeTab.value,
+    param: '',
+    value: '',
+    is_request: false,
+    is_checked: false,
+    is_preset: false
+  })
 }
+
+function test() {
+  console.log('store.state.ecApiModule.ec_api_data.api', store.state.ecApiModule.ec_api_data.api)
+  console.log('UserApiData.value', UserApiData.value)
+  console.log('activeTab.value', activeTab.value)
 }
 
-// 监测ec_select_api的变化 如果当前选中的标签被取消勾选，则选择剩下标签的第一个
+// 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
 watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
-  console.log('watch')
-  console.log('store.state.ecApiModule.ec_api_data.api', store.state.ecApiModule.ec_api_data.api)
-  console.log('newValue', newValue)
   // 接口数据变化后初始化本地数据
   initApiData()
   // 处理空标签逻辑
@@ -107,17 +114,18 @@ watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
   }
 }, {deep: true})
 
-
-watch(activeTab, (val) => {
-  console.log('watch.activeTab', val)
+// 监测activeTab， 如果切换标签页，则执行自动勾选的函数
+watch(activeTab, () => {
   markIsChecked()
 })
+
+
 /*
 生命周期逻辑
 */
 onBeforeMount(
     () => {
-      console.log('TabArea onBeforeMount')
+      // console.log('TabArea onBeforeMount')
       // 处理请求参数生成本地数据结构
       initApiData()
     }
@@ -125,44 +133,28 @@ onBeforeMount(
 
 // 挂载后
 onMounted(() => {
-  console.log('TabArea onMounted')
+  // console.log('TabArea onMounted')
   // 勾选is_checked选项
   markIsChecked()
   // 处理拖拽
   const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
-  new Sortable(elTabsHeader, {
+  const sortTabs = new Sortable(elTabsHeader, {
     animation: 150,
     ghostClass: 'dragging',
     draggable: '.el-tabs__item',
     onEnd: (evt) => {
+      console.log('evt.newIndex, evt.oldIndex', evt.newIndex, evt.oldIndex)
+      console.log('activeTab.value', activeTab.value)
       store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
     },
   });
 });
-
-// 添加新字段
-function addNewParams() {
-  UserApiData.value.api[activeTab.value].params.push({
-    id: Date.now(),
-    api_id: activeTab.value,
-    param: '',
-    value: '',
-    is_request: false,
-    is_checked: false,
-    is_preset: false
-  })
-}
-
-function test() {
-  console.log('store.state.ecApiModule.ec_api_data.api', store.state.ecApiModule.ec_api_data.api)
-  console.log('UserApiData.value', UserApiData.value)
-}
 </script>
 
 <template>
-  <el-tabs ref="tabsRef" v-model="activeTab">
+  <el-tabs ref="tabsRef" v-model="activeTab" type="border-card">
     <el-tab-pane
-        v-for="api in Object.values(UserApiData.api)"
+        v-for="(api, index) in store.state.ecApiModule.ec_api_data.api"
         :key="api['id']"
         :label="api['description']"
         :name="api['id']"
@@ -202,7 +194,7 @@ function test() {
       <el-row class="BtnRow" style="width: 100%" :gutter="10">
         <el-col :span="2"><span>请求地址：</span></el-col>
         <el-col :span="12">
-          <el-input type="text">1111</el-input>
+          <el-input type="text"></el-input>
         </el-col>
         <el-col :span="2">
           <el-button type="primary" @click="test">发送</el-button>
@@ -210,8 +202,8 @@ function test() {
         <el-col :span="8">
         </el-col>
       </el-row>
-      <!--      <JsonEditorVue class="editor" v-model="json_data" language="zh-CN" @change="handleRunningChange"-->
-      <!--                     style="width: 1200px"/>-->
+            <JsonEditorVue class="editor" v-model="json_data" language="zh-CN" @change="handleRunningChange"
+                           style="width: 1600px"/>
     </el-tab-pane>
   </el-tabs>
 </template>
@@ -224,4 +216,5 @@ function test() {
 .editor {
   margin-top: 20px;
 }
+
 </style>

src/store/index.js

@@ -71,11 +71,8 @@ const ecApiModule = {
             // console.log('state.ec_api_data.api', state.ec_api_data.api)
         },
         handle_sort_ec_select_api: (state, payload) => {
-            // console.log(state.ec_api_data.api)
             const movedTab = state.ec_api_data.api.splice(payload.oldIndex-1, 1)[0];
-            // console.log(state.ec_api_data.api)
-            // console.log('movedTab', movedTab)
-            state.ec_api_data.api.splice(payload.newIndex - 1, 0, toValue(movedTab));
+            state.ec_api_data.api.splice(payload.newIndex-1, 0, movedTab);
         },
         add_ec_api_data: (state, payload) => {
             // console.log('payload', payload)