From eaaa4286e58ab4e1fbaba28b90b592b19b4c3025 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Fri, 19 Jul 2024 17:57:26 +0800
Subject: [PATCH] =?UTF-8?q?BasicConfig=E7=9B=B8=E5=85=B3=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=B7=B2=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/ec_api.js                     |   9 ++
 src/components/ec_api/BasicConfig.vue  | 101 ++++++++++-----
 src/components/ec_api/TabArea.vue      | 171 +++++++++++++++++++++++--
 src/components/update/CinemaUpdate.vue |  44 +++----
 src/components/update/Tips.vue         |   6 +-
 src/request/config.js                  |   4 +-
 src/store/index.js                     |  70 +++++++++-
 src/views/ec_api/index.vue             |   3 +
 src/views/update/index.vue             |   2 +-
 9 files changed, 330 insertions(+), 80 deletions(-)

diff --git a/src/apis/ec_api.js b/src/apis/ec_api.js
index f951588..48100eb 100644
--- a/src/apis/ec_api.js
+++ b/src/apis/ec_api.js
@@ -43,6 +43,15 @@ export const get_ec_api_api_params = (api_id) => {
         }
     })
 }
+export const get_ec_api_api_params_by_type = (api_type) => {
+    return request({
+        url: 'ec/get_params_by_type',
+        method: 'get',
+        params: {
+            type: api_type
+        }
+    })
+}
 
 export const get_ec_api_api_group = (api_type) => {
     return request({
diff --git a/src/components/ec_api/BasicConfig.vue b/src/components/ec_api/BasicConfig.vue
index 62f79aa..a007e4d 100644
--- a/src/components/ec_api/BasicConfig.vue
+++ b/src/components/ec_api/BasicConfig.vue
@@ -4,9 +4,11 @@ import {
   get_ec_api_cinema,
   get_ec_api_channel,
   get_ec_api_api,
-  get_ec_api_api_group, get_ec_api_api_params
+  get_ec_api_api_group,
+  get_ec_api_api_params,
+  get_ec_api_api_params_by_type
 } from "@/apis/ec_api.js";
-import {ref} from "vue";
+import {ref, reactive, toRefs} from "vue";
 import {onMounted} from "vue";
 import {useStore} from "vuex";
 import {change_cinema_user} from "@/apis/update.js";
@@ -35,13 +37,19 @@ let ChannelByType = []
 const SelectChannel = ref('')
 
 // 定义接口相关变量
-const Api = ref({})
-const SelectApi = ref([])
+const Api = ref([])  // 存储接口数据
+const SelectApiId = ref([])  // 存储选择的接口
+const SelectApi = ref([])  // 存储选择的接口
 
 // 定义接口组相关变量
 const ApiGroup = ref({})
 const SelectApiGroup = ref([])
 
+// 定义接口参数
+const ApiParams = ref({})
+const SelectApiParams = ref({})
+
+
 // 通过环境计算影院
 function env_on_change() {
   // 初始化值
@@ -62,7 +70,7 @@ function type_on_change() {
   // 重置数据
   ChannelByType = []
   SelectChannel.value = ''
-  SelectApi.value = []
+  SelectApiId.value = []
   SelectApiGroup.value = []
   // 计算渠道
   Channel.value.forEach(data => {
@@ -74,6 +82,8 @@ function type_on_change() {
   get_api_group_by_type(SelectType.value)
   // 获取接口数据
   get_api_by_type(SelectType.value)
+  // 获取接口参数
+  get_api_params_by_type(SelectType.value)
 }
 
 // 获取接口
@@ -90,49 +100,71 @@ async function get_api_group_by_type(api_type) {
   })
 }
 
+// 获取 接口参数
+async function get_api_params_by_type(api_type) {
+  await get_ec_api_api_params_by_type(api_type).then(res => {
+    ApiParams.value = res
+  })
+}
+
 // OnChange相关
 // 选择接口组后自动勾选接口
 function api_group_on_change() {
-  SelectApi.value = JSON.parse(String(SelectApiGroup.value))
-  get_api_params(SelectApi.value)
+  SelectApiId.value = JSON.parse(String(SelectApiGroup.value))
+  handle_api_data()
+  store_data()
+
 }
 
 // 修改了接口后，取消选择接口组
 function api_on_change() {
   SelectApiGroup.value = []
-  get_api_params(SelectApi.value)
+  handle_api_data()
+  store_data()
+}
+
+function handle_api_data() {
+  // 生成被选择的api的数组
+  SelectApiId.value.forEach(api_id => {
+    Api.value.forEach(api => {
+      if (api.id === api_id) {
+        SelectApi.value.push(api)
+      }
+    })
+  })
+  // 生成被选择的api参数对象
+  SelectApiId.value.forEach(api_id => {
+    if (ApiParams.value.hasOwnProperty(api_id)) {
+      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)
 }
 
-function get_api_params(api_id_array) {
-  // 生成共享数据
+// 生成共享数据
+function store_data() {
   let select_data = ref({
     env: SelectEnv.value,
     cinema: SelectCinema.value,
     channel: SelectChannel.value,
-    api: SelectApi.value
-  })
-  // 处理接口，过滤调选择的接口
-  let api_data = ref([])
-  Api.value.forEach(api => {
-    if (SelectApi.value.indexOf(api.id) >= 0){
-      api_data.value.push(api)
-    }
+    select_api_id: SelectApiId.value,
+    api: SelectApi.value,
+    api_params: SelectApiParams.value
   })
-  store.state.ec_select_api = api_data.value
-  select_data.value["api_data"] = api_data.value
-  // 处理接口参数数据
-  let api_params_data = ref([])
-  api_id_array.forEach(api_id => {
-    get_ec_api_api_params(api_id).then(res => {
-      api_params_data.value.push({[api_id]: res})
-    })
-  })
-  console.log('api_params_data', api_params_data.value)
-  select_data.value["api_params_data"] = api_params_data.value
-  console.log(select_data.value)
-  store.state.ec_api_data = select_data.value
+  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)
+  console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
 }
 
+
 onMounted(() => {
   // 获取环境
   get_ec_api_env().then(res => {
@@ -142,7 +174,6 @@ onMounted(() => {
         EnvArray.push({name: data.name, code: data.code})
       }
     })
-    console.log('Env_array', EnvArray)
   });
 
   // 获取影院
@@ -154,9 +185,9 @@ onMounted(() => {
   get_ec_api_channel().then(res => {
     Channel.value = res
   })
-
 })
 
+
 </script>
 
 <template>
@@ -236,12 +267,12 @@ onMounted(() => {
       <el-col :span="6">
         <label class="name-label">接口：</label>
 
-        <el-select v-model="SelectApi" placeholder="请选择" style="width: 240px" size="default" multiple collapse-tags
+        <el-select v-model="SelectApiId" placeholder="请选择" style="width: 240px" size="default" multiple collapse-tags
                    collapse-tags-tooltip :clearable="true" @change="api_on_change">
           <el-option
               v-for="item in Api"
               :key="item.id"
-              :label="item.desc"
+              :label="item.description"
               :value="item.id"
           >
           </el-option>
diff --git a/src/components/ec_api/TabArea.vue b/src/components/ec_api/TabArea.vue
index a7ed4b4..3415fcf 100644
--- a/src/components/ec_api/TabArea.vue
+++ b/src/components/ec_api/TabArea.vue
@@ -1,49 +1,198 @@
 <script setup>
-import {ref, onMounted} from "vue";
+import {ref, reactive, onMounted, watch} from "vue";
+import {getCurrentInstance} from 'vue'
 import Sortable from "sortablejs";
-import {useStore} from "vuex";
+import {useStore, mapState} from "vuex";
+import {nextTick} from "vue";
+import JsonEditorVue from "json-editor-vue3";
 
 
 // 注册store
 const store = useStore()
 
-const tabsRef = ref(null);
+// 标签相关的定义
+const tabsRef = ref(null);  // tabs的Ref
+const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡
 
-const select_data = store.state.ec_api_data
 
-const tabs = ref([]);
+// 表格相关的定义
+const ApiTableRef = ref(null)  // 表格的Ref
+const multipleSelection = ref([])  // checkbox的处理
 
+// 定义变量用于存储接口设置的数据
+const UserApiData = ref({})
 
+// 表格逻辑
+// 多选改变后处理逻辑
+function handleSelectionChange(val) {
+  multipleSelection.value = val
+}
+
+
+// 自动勾选行
+function markIsRequestSelection() {
+  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 => {
+      console.log('item', item)
+      if (item['is_checked'] === true) {
+        ApiTableRef.value[0].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,
+  }
+  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({
+          '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)]
+        })
+      }
+    })
+  }
+  console.log('UserApiData', UserApiData.value)
+}
+
+// 监测ec_select_api的变化 如果当前选中的标签被取消勾选，则选择剩下标签的第一个
+watch(store.state.ecApiModule.ec_select_api, (oldValue, newValue) => {
+  let tempId = 1
+  if (newValue.length > 0) {
+    tempId = newValue[0].id
+  }
+  newValue.forEach(item => {
+    if (item.id === activeTab.value) {
+      tempId = activeTab.value
+    }
+  })
+  activeTab.value = tempId
+
+  // 处理请求参数生成本地数据结构
+  initApiData()
+}, {deep: true})
+/*
+生命周期逻辑
+*/
+// 挂载后
 onMounted(() => {
+  console.log('TabArea onMounted')
   // 处理拖拽
   const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
   new Sortable(elTabsHeader, {
     animation: 150,
     ghostClass: 'dragging',
     draggable: '.el-tabs__item',
-    onEnd: ({ oldIndex, newIndex }) => {
-      const movedTab = tabs.value.splice(oldIndex-1, 1)[0];
-      tabs.value.splice(newIndex-1, 0, movedTab);
+    onEnd: (evt) => {
+      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({
+    param: '',
+    value: '',
+    is_request: false,
+    is_checked: false
+  })
+}
 </script>
 
 <template>
-  <el-tabs ref="tabsRef">
+  <el-tabs ref="tabsRef" v-model="activeTab">
     <el-tab-pane
-        v-for="tab in store.state.ec_select_api"
+        v-for="(tab,index) in store.getters['ecApiModule/ec_select_api_getter']"
         :key="tab.id"
         :label="tab.desc"
         :name="tab.id"
     >
-      {{ tab.desc }}
+      <el-table
+          ref='ApiTableRef'
+          :data="store.state.ecApiModule.ec_api_data.api_params_data[tab.id]"
+          @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50"/>
+        <el-table-column label="字段名" width="120">
+          <template v-slot="scope">
+            <span v-if="scope.row.param">{{ scope.row.param }}</span>
+            <span v-else><el-input type="text" placeholder="输入字段名" v-model="scope.row.param"></el-input></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="字段值" width="800">
+          <template v-slot="scope">
+            <el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1"
+                      v-if="scope.row.value === 'json' && scope.row.param === 'format'" disabled></el-input>
+            <el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1" v-else></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="必选" width="80">
+          <template v-slot="scope">
+            <span>{{ scope.row.is_request ? '是' : '否' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="desc" label="描述" show-overflow-tooltip/>
+      </el-table>
+      <el-row class="BtnRow" style="width: 100%">
+        <el-col :span="2">
+          <el-button type="primary" @click="addNewParams">添加新字段</el-button>
+        </el-col>
+      </el-row>
+      <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-col>
+        <el-col :span="2">
+          <el-button type="primary">发送</el-button>
+        </el-col>
+        <el-col :span="8">
+        </el-col>
+      </el-row>
+      <!--      <JsonEditorVue class="editor" v-model="json_data" language="zh-CN" @change="handleRunningChange"-->
+      <!--                     style="width: 1200px"/>-->
     </el-tab-pane>
   </el-tabs>
 </template>
 
 <style scoped>
+.BtnRow {
+  margin-top: 10px;
+}
 
+.editor {
+  margin-top: 20px;
+}
 </style>
diff --git a/src/components/update/CinemaUpdate.vue b/src/components/update/CinemaUpdate.vue
index ae45533..c4d4ded 100644
--- a/src/components/update/CinemaUpdate.vue
+++ b/src/components/update/CinemaUpdate.vue
@@ -29,7 +29,7 @@ let showStatusTips = ref(false)
 
 //
 const handleShowStatusTips = () => {
-  if (store.state.update_status[props.ip]) {
+  if (store.state.updateModule.update_status[props.ip]) {
     showStatusTips.value = true
   }
 }
@@ -119,7 +119,7 @@ const stopWsGetStatus = function () {
 }
 
 const handleWsOpen = () => {
-  if (store.state.update_status[props.ip] === true) {
+  if (store.state.updateModule.update_status[props.ip] === true) {
     createWs()
     wsGetStatus()
   } else {
@@ -127,14 +127,14 @@ const handleWsOpen = () => {
   }
 }
 // const handleWsClose = () => {
-//   if (store.state.update_status[props.ip] === false) {
+//   if (store.state.updateModule.update_status[props.ip] === false) {
 //     ws.send(JSON.stringify({"msg": "finish"}))
 //     wsClose()
 //   }
 // }
 
 const handleWsClear = (ip) => {
-  if (store.state.update_status[ip] === false) {
+  if (store.state.updateModule.update_status[ip] === false) {
     wsSend(JSON.stringify({"finish": ip}))
     updateStatus.value = {}
   }
@@ -257,10 +257,10 @@ const handleUpdateAlter = () => {
 // region 处理按键文案
 let updateBtn = ref("更新")
 const handleBtnName = (ip) => {
-  if (store.state.update_status[ip] === false) {
+  if (store.state.updateModule.update_status[ip] === false) {
     updateBtn.value = "更新"
   }
-  if (store.state.update_status[ip] === true) {
+  if (store.state.updateModule.update_status[ip] === true) {
     updateBtn.value = "更新中"
   }
 }
@@ -270,32 +270,32 @@ const handleBtnName = (ip) => {
 const disableAll = ref(false)
 
 const handleDisable = (ip) => {
-  disableAll.value = store.state.update_status[ip] === true;
+  disableAll.value = store.state.updateModule.update_status[ip] === true;
 }
 // endregion
 
 // region 更新状态
 const changUpdateStatus = (ip) => {
-  store.commit("change_update_status", ip)
+  store.commit("updateModule/change_update_status", ip)
 }
 // endregion
 
 // region opened事件对应的功能
 // 定义方法用于在加载过程中将ip对应的状态存入全局store中
 const addUpdateStatus = () => {
-  if (!store.state.update_status.hasOwnProperty(props.ip)) {
+  if (!store.state.updateModule.update_status.hasOwnProperty(props.ip)) {
     let data = {
       "ip": props.ip,
       "status": false  // 更新中是true 更新是false
     }
-    store.commit("add_update_status", data)
+    store.commit("updateModule/add_update_status", data)
   }
 }
 
 const getCurrentConfig = () => {
-  if (store.state.update_config.hasOwnProperty(props.ip)) {
-    selectedVersion.value = store.state.update_config[props.ip].version
-    checkedCmd.value = store.state.update_config[props.ip].selected
+  if (store.state.updateModule.update_config.hasOwnProperty(props.ip)) {
+    selectedVersion.value = store.state.updateModule.update_config[props.ip].version
+    checkedCmd.value = store.state.updateModule.update_config[props.ip].selected
   } else {
     selectedVersion.value = ''
   }
@@ -317,7 +317,7 @@ const handleClose = () => {
   handleWsClear(props.ip)
   // handleWsClose()
   showStatusTips.value = false
-  store.state.update_dialog_show = false
+  store.state.updateModule.update_dialog_show = false
 }
 // endregion
 
@@ -327,12 +327,12 @@ const checkedCmd = ref([])
 
 // 处理点击事件
 const handleRep = (ip) => {
-  console.log(store.state.update_status[ip])
+  console.log(store.state.updateModule.update_status[ip])
   changUpdateStatus(ip)  // 更新状态
   handleBtnName(props.ip)  // 变更按键文案
   handleDisable(props.ip)  // 启用全部状态
   handleShowStatusTips()
-  console.log(store.state.update_status[ip])
+  console.log(store.state.updateModule.update_status[ip])
 }
 
 const handleUpdate = async () => {
@@ -354,7 +354,7 @@ const handleUpdate = async () => {
     "ip": props.ip,
     "config": {'version': selectedVersion.value, 'selected': checkedCmd.value}
   }
-  store.commit("add_update_cine", data)
+  store.commit("updateModule/add_update_cine", data)
 
   // 处理提交数据的结构
   let cmd_array = []
@@ -373,18 +373,18 @@ const handleUpdate = async () => {
     // 处理成功逻辑
     if (res_data["result"] === "success") {
       handleRep(res_ip)
-      store.commit("clear_update_status", res_ip)  // 清除临时状态
+      store.commit("updateModule/clear_update_status", res_ip)  // 清除临时状态
     }
     if (res_data["result"] === "fail") {
       alert(res_ip + ' 升级失败：' + res_data["msg"])
       handleRep(res_ip)
-      store.commit("clear_update_status", res_ip)  // 清除临时状态
+      store.commit("updateModule/clear_update_status", res_ip)  // 清除临时状态
     }
     stopWsGetStatus() // 停止获取ws更新状态
   }).catch(err => {
     const ip = err.config.params.ip
     handleRep(ip)
-    store.commit("clear_update_status", ip)  // 清除临时状态
+    store.commit("updateModule/clear_update_status", ip)  // 清除临时状态
     stopWsGetStatus() // 停止获取ws更新状态
     alert(ip + " 升级失败，请重试！")
   })
@@ -395,7 +395,7 @@ const handleUpdate = async () => {
 
 
 <template>
-  <el-dialog v-model="store.state.update_dialog_show" title="更新影院" :modal="true" width="720px"
+  <el-dialog v-model="store.state.updateModule.update_dialog_show" title="更新影院" :modal="true" width="720px"
              :close-on-click-modal="false" @opened="handleOpened" @close="handleClose">
     <div><span class="update">更新单机：</span><span class="ip">{{ ip }}</span><span>目标版本：</span>
 
@@ -493,4 +493,4 @@ const handleUpdate = async () => {
   margin-left: 10px;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/update/Tips.vue b/src/components/update/Tips.vue
index 9f5fe5b..105ba74 100644
--- a/src/components/update/Tips.vue
+++ b/src/components/update/Tips.vue
@@ -26,6 +26,7 @@ const props = defineProps({
       :width=props.width
       trigger="hover"
       :content=props.content
+      :popper-style="props.content.length > 600 ? 'height: 200px; overflow: auto;' : ''"
   >
     <template #reference>
       <el-icon>
@@ -35,6 +36,5 @@ const props = defineProps({
   </el-popover>
 </template>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style>
+</style>
diff --git a/src/request/config.js b/src/request/config.js
index df95055..46210e6 100644
--- a/src/request/config.js
+++ b/src/request/config.js
@@ -1,10 +1,10 @@
 export default {
     // method: 'get',
     // baseURL: 'http://172.16.1.63:8000',
-    baseURL: 'http://172.16.1.114:8000',
+    baseURL: 'http://172.16.1.168:8000',
     // baseURL: 'http://127.0.0.1:8000',
     // baseWS: 'ws://172.16.1.63:8000',
-    baseWS: 'ws://172.16.1.114:8000',
+    baseWS: 'ws://172.16.1.168:8000',
     // baseWS: 'ws://127.0.0.1:8000',
     headers: {
         'Content-Type': 'application/json;charset=UTF-8',
diff --git a/src/store/index.js b/src/store/index.js
index a6c5124..4424e4b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,19 +1,18 @@
 import {createStore} from 'vuex';
+import {toValue} from 'vue'
 
-export default createStore({
-    modules: {},
+const updateModule = {
+    namespaced: true,
     state: {
         update_dialog_show: false,
         update_config: {},
         update_status: {},
-        ec_api_data: {},
-        ec_select_api: []
     },
-    getters: {
+    getter: {
         dialog_change: state => {
             state.update_dialog_show = !state.update_dialog_show
             return state.update_dialog_show
-        }
+        },
     },
     mutations: {
         add_update_cine: (state, payload) => {
@@ -31,7 +30,66 @@ export default createStore({
             if (state.update_status[ip]) {
                 delete state.update_status[ip]
             }
+        },
+    },
+    actions: {},
+}
+
+const ecApiModule = {
+    namespaced: true,
+    state: {
+        ec_api_data: {},  // 所有api数据
+        ec_select_api: [],  // 默认选中的api
+        first_tab_api_id: 1
+    },
+    getters: {
+        ec_api_data_getter: state => {
+            return state.ec_api_data
+        },
+        ec_select_api_getter: state => {
+            return state.ec_select_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)
+            payload.forEach((item) => {
+                if (state.ec_select_api.indexOf(item) === -1) {
+                    state.ec_select_api.push(item)
+                }
+            })
+            state.ec_select_api.forEach((item) => {
+                if (payload.indexOf(item) === -1) {
+                    state.ec_select_api.splice(state.ec_select_api.indexOf(item), 1)
+                }
+            })
+            // console.log('state.ec_select_api', state.ec_select_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('movedTab', movedTab)
+            state.ec_select_api.splice(payload.newIndex - 1, 0, toValue(movedTab));
+        },
+        add_ec_api_data: (state, payload) => {
+            // console.log('payload', payload)
+            state.ec_api_data = payload
+        }
+
+    },
     actions: {},
+}
+
+export default createStore({
+    modules: {
+        updateModule,
+        ecApiModule,
+    },
 })
diff --git a/src/views/ec_api/index.vue b/src/views/ec_api/index.vue
index 2c8df9e..a7adfc4 100644
--- a/src/views/ec_api/index.vue
+++ b/src/views/ec_api/index.vue
@@ -1,6 +1,9 @@
 <script setup>
 import BasicConfig from "@/components/ec_api/BasicConfig.vue";
 import TabArea from "@/components/ec_api/TabArea.vue";
+import {useStore} from "vuex";
+
+const store = useStore();
 </script>
 
 <template>
diff --git a/src/views/update/index.vue b/src/views/update/index.vue
index 6f4d9b8..b6e5aec 100644
--- a/src/views/update/index.vue
+++ b/src/views/update/index.vue
@@ -158,7 +158,7 @@ const update_ip = ref('')
 const ver_id = ref(0)
 
 const changeDialogStatus = (ip, ver) => {
-  store.state.update_dialog_show = true
+  store.state.updateModule.update_dialog_show = true
   update_ip.value = ip
   ver_id.value = ver
 }