From 2987a25871c9c3d0580158d5a96b2aa02fbe0346 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Tue, 23 Jul 2024 15:05:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=A5=BD=E5=83=8F=E8=83=BD?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ec_api/BasicConfig.vue |  10 +--
 src/components/ec_api/TabArea.vue     | 118 +++++++++++++++-----------
 src/store/index.js                    |  31 +++----
 src/views/ec_api/index.vue            |   2 +-
 4 files changed, 84 insertions(+), 77 deletions(-)

diff --git a/src/components/ec_api/BasicConfig.vue b/src/components/ec_api/BasicConfig.vue
index a007e4d..ef74244 100644
--- a/src/components/ec_api/BasicConfig.vue
+++ b/src/components/ec_api/BasicConfig.vue
@@ -125,6 +125,7 @@ function api_on_change() {
 
 function handle_api_data() {
   // 生成被选择的api的数组
+  SelectApi.value = []
   SelectApiId.value.forEach(api_id => {
     Api.value.forEach(api => {
       if (api.id === api_id) {
@@ -138,13 +139,6 @@ function handle_api_data() {
       SelectApiParams.value[api_id] = ApiParams.value[api_id]
     }
   })
-
-
-  console.log('Api.value', Api.value)
-  console.log('SelectApiId.value', SelectApiId.value)
-  console.log('SelectApi.value', SelectApi.value)
-  console.log('ApiParams.value', ApiParams.value)
-  console.log('SelectApiParams.value', SelectApiParams.value)
 }
 
 // 生成共享数据
@@ -159,8 +153,8 @@ function store_data() {
   })
   console.log('select_data.value', select_data.value)
   // 写入store
-  store.commit('ecApiModule/change_ec_select_api', SelectApiId.value)
   store.commit('ecApiModule/add_ec_api_data', select_data.value)
+  store.commit('ecApiModule/change_ec_select_api', SelectApi.value)
   console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
 }
 
diff --git a/src/components/ec_api/TabArea.vue b/src/components/ec_api/TabArea.vue
index 3415fcf..925c9dd 100644
--- a/src/components/ec_api/TabArea.vue
+++ b/src/components/ec_api/TabArea.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, reactive, onMounted, watch} from "vue";
+import {ref, reactive, onBeforeMount, onMounted, watch} from "vue";
 import {getCurrentInstance} from 'vue'
 import Sortable from "sortablejs";
 import {useStore, mapState} from "vuex";
@@ -12,35 +12,51 @@ const store = useStore()
 
 // 标签相关的定义
 const tabsRef = ref(null);  // tabs的Ref
-const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡
+const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡，存储的是api_id
 
 
 // 表格相关的定义
 const ApiTableRef = ref(null)  // 表格的Ref
-const multipleSelection = ref([])  // checkbox的处理
+// const multipleSelection = ref([])  // checkbox的处理
 
 // 定义变量用于存储接口设置的数据
-const UserApiData = ref({})
+const UserApiData = ref({api: {}, base_info: {}})
 
 // 表格逻辑
 // 多选改变后处理逻辑
-function handleSelectionChange(val) {
-  multipleSelection.value = val
+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])
+
+
+}
+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(){
+//   // 标记勾选项
+//   markIsRequestSelection()
+// }
 
 // 自动勾选行
-function markIsRequestSelection() {
+function markIsChecked() {
   console.log('checkRequestSelection')
-  if (store.state.ecApiModule.ec_api_data.api_params_data) {
-    store.state.ecApiModule.ec_api_data.api_params_data[activeTab.value].forEach(item => {
+  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) {
-        ApiTableRef.value[0].toggleRowSelection(item, true)
+        console.log('ApiTableRef.value', ApiTableRef.value)
+        ApiTableRef.value[activeTab.value - 1].toggleRowSelection(item, true)
       }
     })
-    console.log(multipleSelection.value)
-
+    // console.log(multipleSelection.value)
   }
 }
 
@@ -51,35 +67,27 @@ function initApiData() {
     cinema: store.state.ecApiModule.ec_api_data.cinema,
     channel: store.state.ecApiModule.ec_api_data.channel,
   }
-  if (store.state.ecApiModule.ec_api_data.api_data) {
-    const params = mapState(store.state.ecApiModule.ec_api_data.api_params_data)
-    console.log(params[1])
-    store.state.ecApiModule.ec_api_data.api_data.forEach(item => {
-      if (UserApiData.value.hasOwnProperty('api') === false) {
-        UserApiData.value['api'] = [{
-          'id': item.id,
-          'desc': item.desc,
-          'path': item.path,
-          'type': item.type,
-          'param': store.state.ecApiModule.ec_api_data.api_params_data[String(item.id)]
-        }]
-      }
-      if (UserApiData.value['api'].filter(api => api.id === item.id).length === 0) {
-        UserApiData.value['api'].push({
+  if (store.state.ecApiModule.ec_api_data.api) {
+    store.state.ecApiModule.ec_api_data.api.forEach(item => {
+      if (!UserApiData.value['api'].hasOwnProperty(item.id)) {
+        UserApiData.value['api'][item.id] = {
           'id': item.id,
-          'desc': item.desc,
+          'description': item.description,
           'path': item.path,
           'type': item.type,
-          'param': store.state.ecApiModule.ec_api_data.api_params_data[String(item.id)]
-        })
+          'params': store.state.ecApiModule.ec_api_data.api_params[item.id]
+        }
       }
     })
   }
-  console.log('UserApiData', UserApiData.value)
+  console.log('initApiData.UserApiData', UserApiData.value)
 }
 
 // 监测ec_select_api的变化 如果当前选中的标签被取消勾选，则选择剩下标签的第一个
-watch(store.state.ecApiModule.ec_select_api, (oldValue, newValue) => {
+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)
+  initApiData()
   let tempId = 1
   if (newValue.length > 0) {
     tempId = newValue[0].id
@@ -91,15 +99,30 @@ watch(store.state.ecApiModule.ec_select_api, (oldValue, newValue) => {
   })
   activeTab.value = tempId
 
-  // 处理请求参数生成本地数据结构
-  initApiData()
+
 }, {deep: true})
+
+
+watch(activeTab, (val) => {
+  console.log('watch.activeTab', val)
+  markIsChecked()
+})
 /*
 生命周期逻辑
 */
+onBeforeMount(
+    () => {
+      console.log('TabArea onBeforeMount')
+      // 处理请求参数生成本地数据结构
+      initApiData()
+    }
+)
+
 // 挂载后
 onMounted(() => {
   console.log('TabArea onMounted')
+  // 勾选is_checked选项
+  markIsChecked()
   // 处理拖拽
   const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
   new Sortable(elTabsHeader, {
@@ -110,19 +133,13 @@ onMounted(() => {
       store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
     },
   });
-
-  // initApiData()
-
-  // console.log('UserApiData', UserApiData.value)
-  //
-  // nextTick(() => {
-  //   checkRequestSelection()
-  // })
 });
 
 // 添加新字段
 function addNewParams() {
-  store.state.ecApiModule.ec_api_data.api_params_data[activeTab.value].push({
+  UserApiData.value.api[activeTab.value].params.push({
+    id: Date.now(),
+    api_id: activeTab.value,
     param: '',
     value: '',
     is_request: false,
@@ -134,15 +151,16 @@ function addNewParams() {
 <template>
   <el-tabs ref="tabsRef" v-model="activeTab">
     <el-tab-pane
-        v-for="(tab,index) in store.getters['ecApiModule/ec_select_api_getter']"
-        :key="tab.id"
-        :label="tab.desc"
-        :name="tab.id"
+        v-for="api in Object.values(UserApiData.api)"
+        :key="api['id']"
+        :label="api['description']"
+        :name="api['id']"
     >
       <el-table
           ref='ApiTableRef'
-          :data="store.state.ecApiModule.ec_api_data.api_params_data[tab.id]"
-          @selection-change="handleSelectionChange"
+          :data="UserApiData.api[api['id']].params"
+          @selection-change="handleParamsChange"
+          @select="handleParamsSelect"
       >
         <el-table-column type="selection" width="50"/>
         <el-table-column label="字段名" width="120">
@@ -163,7 +181,7 @@ function addNewParams() {
             <span>{{ scope.row.is_request ? '是' : '否' }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="desc" label="描述" show-overflow-tooltip/>
+        <el-table-column prop="description" label="描述" show-overflow-tooltip/>
       </el-table>
       <el-row class="BtnRow" style="width: 100%">
         <el-col :span="2">
diff --git a/src/store/index.js b/src/store/index.js
index 4424e4b..ec13bd5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -38,8 +38,8 @@ const updateModule = {
 const ecApiModule = {
     namespaced: true,
     state: {
-        ec_api_data: {},  // 所有api数据
-        ec_select_api: [],  // 默认选中的api
+        ec_api_data: {api:[]},  // 所有api数据
+        // ec_select_api: [],  // 默认选中的api
         first_tab_api_id: 1
     },
     getters: {
@@ -47,36 +47,31 @@ const ecApiModule = {
             return state.ec_api_data
         },
         ec_select_api_getter: state => {
-            return state.ec_select_api
+            return state.ec_api_data.api
         },
-        ec_select_api_params_getter: state => {
-            return state.ec_select_api_params
-        },
-        ec_select_api_params_getter_by_id: (state, id) => {
-            return state.ec_select_api_params[id]
-        }
     },
     mutations: {
         change_ec_select_api: (state, payload) => {
             // console.log('payload', payload)
+            // console.log('state.ec_api_data.api', state.ec_api_data.api)
             payload.forEach((item) => {
-                if (state.ec_select_api.indexOf(item) === -1) {
-                    state.ec_select_api.push(item)
+                if (state.ec_api_data.api.indexOf(item) === -1) {
+                    state.ec_api_data.api.push(item)
                 }
             })
-            state.ec_select_api.forEach((item) => {
+            state.ec_api_data.api.forEach((item) => {
                 if (payload.indexOf(item) === -1) {
-                    state.ec_select_api.splice(state.ec_select_api.indexOf(item), 1)
+                    state.ec_api_data.api.splice(state.ec_api_data.api.indexOf(item), 1)
                 }
             })
-            // console.log('state.ec_select_api', state.ec_select_api)
+            // console.log('state.ec_api_data.api', state.ec_api_data.api)
         },
         handle_sort_ec_select_api: (state, payload) => {
-            // console.log(state.ec_select_api)
-            const movedTab = state.ec_select_api.splice(payload.oldIndex - 1, 1)[0];
-            // console.log(state.ec_select_api)
+            // 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_select_api.splice(payload.newIndex - 1, 0, toValue(movedTab));
+            state.ec_api_data.api.splice(payload.newIndex - 1, 0, toValue(movedTab));
         },
         add_ec_api_data: (state, payload) => {
             // console.log('payload', payload)
diff --git a/src/views/ec_api/index.vue b/src/views/ec_api/index.vue
index a7adfc4..9dfe1dc 100644
--- a/src/views/ec_api/index.vue
+++ b/src/views/ec_api/index.vue
@@ -8,7 +8,7 @@ const store = useStore();
 
 <template>
   <BasicConfig></BasicConfig>
-  <TabArea></TabArea>
+  <TabArea v-if="store.state.ecApiModule.ec_api_data.api.length > 0"></TabArea>
 </template>
 
 <style scoped>