解决了切换常用场景el-table中ref数据混乱的问题，为组件绑定key后使用v-if来销毁组件，每次切换都换生成新组件

src/components/ec_api/ApiLockBuySelector.vue

@@ -1,13 +1,16 @@
 <script setup>
 import {ref, watch} from 'vue'
 
-// 定义选择项
+// 定义props
-const selectSaleType = ref('ticket')
+const props =defineProps(['type'])
-const selectPayType = ref('cash')
 
 // 定义emits
 const emits = defineEmits(["getSaleType", "getPayType"])
 
+// 定义选择项
+const selectSaleType = props.type === 'goods' ? ref('goods') : ref('ticket')
+const selectPayType = ref('cash')
+
 // 检查售卖类型的变化
 watch( ()=>selectSaleType.value, ()=>{
   emits("getSaleType", selectSaleType.value)
@@ -26,9 +29,9 @@ watch( ()=>selectPayType.value, ()=>{
     <el-col :span="1" style="font-size: 14px; font-weight: bold; color: #919399;" class="col-right">售卖类型</el-col>
     <el-col :span="6" class="col-left">
       <el-radio-group v-model="selectSaleType">
-        <el-radio label="ticket">单影票</el-radio>
+        <el-radio label="ticket" v-if="props['type'] === 'ticket'">单影票</el-radio>
-        <el-radio label="goods">单卖品</el-radio>
+        <el-radio label="goods" v-if="props['type'] === 'goods'">单卖品</el-radio>
-        <el-radio label="all">影票加卖品</el-radio>
+        <el-radio label="all" v-if="props['type'] === 'ticket'">影票加卖品</el-radio>
       </el-radio-group>
     </el-col>
   </el-row>

src/components/ec_api/BasicConfig.vue

@@ -12,6 +12,7 @@ import {ref, reactive, toRefs} from "vue";
 import {onMounted} from "vue";
 import {useStore} from "vuex";
 import {change_cinema_user} from "@/apis/update.js";
+import TabArea from "@/components/ec_api/TabArea.vue";
 
 
 // 注册store
@@ -43,7 +44,7 @@ const SelectApi = ref([])  // 存储选择的接口
 
 // 定义接口组相关变量
 const ApiGroup = ref({})
-const SelectApiGroup = ref([])
+const SelectApiGroup = ref('')
 
 // 定义接口参数
 const ApiParams = ref({})
@@ -71,7 +72,7 @@ function type_on_change() {
   ChannelByType.value = []
   SelectChannel.value = ''
   SelectApiId.value = []
-  SelectApiGroup.value = []
+  SelectApiGroup.value = ''
   // 计算渠道
   Channel.value.forEach(data => {
     if (data.type === SelectType.value && data.env === SelectEnv.value) {
@@ -140,15 +141,22 @@ async function get_api_params_by_type(api_type) {
 // OnChange相关
 // 选择接口组后自动勾选接口
 function api_group_on_change() {
-  SelectApiId.value = JSON.parse(String(SelectApiGroup.value))
+  store.state.ecApiModule.ec_api_data.api = []
+  store.state.ecApiModule.show_tab_area = false
+  store.state.ecApiModule.group_api_id = SelectApiGroup.value
+  ApiGroup.value.forEach(item => {
+    if (String(item['id']) === SelectApiGroup.value) {
+      SelectApiId.value = JSON.parse(item['api_id'])
+    }
+  })
   handle_api_data()
   store_data()
-
+  store.state.ecApiModule.show_tab_area = true
 }
 
 // 修改了接口后，取消选择接口组
 function api_on_change() {
-  SelectApiGroup.value = []
+  SelectApiGroup.value = ''
   handle_api_data()
   store_data()
 }
@@ -281,7 +289,7 @@ onMounted(() => {
               v-for="item in ApiGroup"
               :key="item.group_id"
               :label="item.name"
-              :value="item.api_id"
+              :value="item.group_id"
           >
           </el-option>
         </el-select>

src/components/ec_api/CheckQuan.vue

@@ -26,9 +26,13 @@ const allSelectCardQuan = ref([])
 // 售卖类型
 const selectSaleType = ref('ticket')
 
+// loading状态
+const equan_loading = ref(false)
+
 // 通过接口获取券信息
 async function get_quan() {
   console.log('get_quan')
+  equan_loading.value = true
   await get_ec_api_get_quan(props.cid, cardNum.value).then(
       res => {
         quanArray.value = res.quan
@@ -44,6 +48,7 @@ async function get_quan() {
         console.log(err)
       }
   )
+  equan_loading.value = false
 }
 
 // 点击会员卡券的查询时请求接口获取券信息
@@ -83,6 +88,10 @@ function clear_card_quan() {
   selectCardQuanArray.value = []
   emits('getQuan', selectQuan.value, allSelectCardQuan.value, quan_type.value)
 }
+function refreshQuan() {
+  selectQuan.value = []
+  get_quan()
+}
 
 onBeforeMount(() => {
   get_quan()
@@ -148,10 +157,11 @@ function test() {
           :max-collapse-tags="2"
           style="width: 460px"
       />
+      <el-button @click="refreshQuan">刷新</el-button>
     </el-row>
     <el-row v-if="quan_type==='equan'" style="margin: 20px 0 30px 100px">
       <el-input style="width: 240px; margin-right: 20px" v-model="cardNum"></el-input>
-      <el-button style="margin-right: 20px" @click="get_card_quan">查找</el-button>
+      <el-button style="margin-right: 20px" @click="get_card_quan" :loading="equan_loading">查找</el-button>
       <el-select v-model="selectCardQuan" placeholder="选择卡内赠券"
                  clearable="clearable" style="margin-right: 20px">
         <el-option v-for="item in cardQuanArray" :key="item['card_quan_order_id']" :label="item['label']"

src/components/ec_api/TabArea.vue

@@ -1,5 +1,15 @@
 <script setup>
-import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch, computed} from "vue";
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onBeforeUnmount,
+  onUnmounted,
+  watch,
+  computed
+} from "vue";
 import Sortable from "sortablejs";
 import {useStore, mapState} from "vuex";
 import JsonEditorVue from "json-editor-vue3";
@@ -30,7 +40,7 @@ const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项
 
 
 // 表格相关的定义
-const ApiTableRef = ref(null)  // 表格的Ref
+let ApiTableRef = ref(null)  // 表格的Ref
 // const multipleSelection = ref([])  // checkbox的处理
 
 // 定义变量用于存储接口设置的数据
@@ -318,6 +328,7 @@ function check_params(checked, unchecked) {
       param.is_checked = false
     }
   })
+  get_suggest()
 }
 
 // 获取售卖类型并自动勾选字段
@@ -412,7 +423,10 @@ function get_pay_type(pay_type) {
 function test() {
   console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
   console.log('UserApiData.value', UserApiData.value)
-  // console.log('activeTab.value', activeTab.value)
+  console.log('activeTab.value', activeTab.value)
+  console.log('ApiTableRef.value', ApiTableRef.value)
+  // store.state.ecApiModule.ec_api_data.api = []
+  store.state.ecApiModule.show_tab_area = false
 }
 
 // 计算属性用来处理场次接口获取的数据，并同步给对应的选择模块
@@ -521,7 +535,6 @@ const levelList = computed(() => {
 
 // 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
 watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
-  console.log('watch store.state.ecApiModule.ec_api_data.api')
   // 接口数据变化后初始化本地数据
   initApiData()
   // 处理空标签逻辑
@@ -572,6 +585,7 @@ onMounted(() => {
     ghostClass: 'dragging',
     draggable: '.el-tabs__item',
     onEnd: (evt) => {
+      console.log('sortTabs-onEnd')
       store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
     },
   });
@@ -608,12 +622,15 @@ const ace_options = {
       <CheckQuan v-if="api['path'] === 'seat/check-coupon'" @getQuan="get_quan_detail" @getSaleType="get_sale_type"
                  :cid="UserApiData['base_info']['cinema']"></CheckQuan>
       <ApiLockBuySelector v-if="api['path'] === 'seat/lock-buy'" @getSaleType="get_sale_type"
-                          @getPayType="get_pay_type"></ApiLockBuySelector>
+                          @getPayType="get_pay_type" type="ticket"></ApiLockBuySelector>
+      <ApiLockBuySelector v-if="api['path'] === 'order/buy-goods'" @getSaleType="get_sale_type"
+                          @getPayType="get_pay_type" type="goods"></ApiLockBuySelector>
       <el-table
           ref='ApiTableRef'
           :data="UserApiData.api[api['id']].params"
           @selection-change="handleParamsChange"
           @select="handleParamsSelect"
+          :key="api['id']"
       >
         <el-table-column type="selection" width="50" :selectable="checkboxFilter"/>
         <el-table-column label="字段名" width="200">
@@ -665,13 +682,17 @@ const ace_options = {
       </el-row>
       <v-ace-editor v-model:value="UserApiData.api[api['id']].response" :lang="UserApiData.api[api['id']]['format']"
                     theme="chrome" :options="ace_options" class="vue-ace-editor" :wrap="true" style="width: 1200px"/>
-      <MovieShow v-if="showList.length > 0" :show="showList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/>
+      <MovieShow v-if="showList.length > 0" :show="showList" :data="UserApiData.api[activeTab]"
-      <SeatStatus v-if="seatList.length > 0" :seat="seatList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/>
+                 :base_info="UserApiData.base_info"/>
-      <CinemaGoods v-if="goodsList.length > 0" :goods="goodsList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/>
+      <SeatStatus v-if="seatList.length > 0" :seat="seatList" :data="UserApiData.api[activeTab]"
-      <EcardLevel v-if="levelList.length > 0" :level="levelList" :data="UserApiData.api[activeTab]" :base_info="UserApiData.base_info"/>
+                  :base_info="UserApiData.base_info"/>
+      <CinemaGoods v-if="goodsList.length > 0" :goods="goodsList" :data="UserApiData.api[activeTab]"
+                   :base_info="UserApiData.base_info"/>
+      <EcardLevel v-if="levelList.length > 0" :level="levelList" :data="UserApiData.api[activeTab]"
+                  :base_info="UserApiData.base_info"/>
     </el-tab-pane>
   </el-tabs>
-  <el-backtop :right="100" :bottom="100" :visibility-height="200"/>
+  <el-backtop :right="300" :bottom="100" :visibility-height="100"/>
 </template>
 
 <style scoped>

src/store/index.js

@@ -40,7 +40,9 @@ const ecApiModule = {
     state: {
         ec_api_data: {api:[]},  // 所有api数据
         // ec_select_api: [],  // 默认选中的api
-        first_tab_api_id: 1
+        first_tab_api_id: 1,
+        show_tab_area: true, //是否显示表格区域
+        group_api_id: 0
     },
     getters: {
         ec_api_data_getter: state => {
@@ -53,6 +55,9 @@ const ecApiModule = {
             })
             return select_api_id
         },
+        show_tab_area_getter: state => {
+            return state.ec_api_data.api.length > 0 && state.show_tab_area
+        }
     },
     mutations: {
         change_ec_select_api: (state, payload) => {
@@ -75,7 +80,7 @@ const ecApiModule = {
             state.ec_api_data.api.splice(payload.newIndex-1, 0, movedTab);
         },
         add_ec_api_data: (state, payload) => {
-            // console.log('payload', payload)
+            state.ec_api_data =  {api:[]}
             state.ec_api_data = payload
         }
 

src/views/ec_api/index.vue

@@ -8,7 +8,7 @@ const store = useStore();
 
 <template>
   <BasicConfig></BasicConfig>
-  <TabArea v-if="store.state.ecApiModule.ec_api_data.api.length > 0"></TabArea>
+  <TabArea v-if="store.getters['ecApiModule/show_tab_area_getter']" :key="store.state.ecApiModule.group_api_id"></TabArea>
 </template>
 
 <style scoped>