修复页面切换后回填参数的逻辑错误

src/components/ec_api/BasicConfig.vue

@@ -19,21 +19,21 @@ const store = useStore()
 
 // 定义环境相关变量
 const Env = ref({})
-const EnvArray = []
+const EnvArray = ref([])
 const SelectEnv = ref('')
 
 // 定义影院相关变量
 const Cinema = ref({})
-let CinemaByEnv = []
+let CinemaByEnv = ref([])
 const SelectCinema = ref('')
 
 // 定义接口类型
-const ApiType = [{name: "非会员", value: "nonmember"}, {name: "会员", value: "member"}]
+const ApiType = ref([{name: "非会员", value: "nonmember"}, {name: "会员", value: "member"}])
 const SelectType = ref('')
 
 // 定义渠道相关变量
 const Channel = ref({})
-let ChannelByType = []
+let ChannelByType = ref([])
 const SelectChannel = ref('')
 
 // 定义接口相关变量
@@ -53,14 +53,14 @@ const SelectApiParams = ref({})
 // 通过环境计算影院
 function env_on_change() {
   // 初始化值
-  CinemaByEnv = []
+  CinemaByEnv.value = []
   SelectCinema.value = ''
   SelectType.value = ''
   SelectChannel.value = ''
   // 处理计算逻辑
   Cinema.value.forEach(data => {
     if (data.env === SelectEnv.value) {
-      CinemaByEnv.push(data)
+      CinemaByEnv.value.push(data)
     }
   })
 }
@@ -68,14 +68,14 @@ function env_on_change() {
 // 通过类型和环境计算渠道
 function type_on_change() {
   // 重置数据
-  ChannelByType = []
+  ChannelByType.value = []
   SelectChannel.value = ''
   SelectApiId.value = []
   SelectApiGroup.value = []
   // 计算渠道
   Channel.value.forEach(data => {
     if (data.type === SelectType.value && data.env === SelectEnv.value) {
-      ChannelByType.push(data)
+      ChannelByType.value.push(data)
     }
   })
   // 获取接口组数据
@@ -90,6 +90,32 @@ function basic_info_change() {
   store_data()
 }
 
+// 获取环境
+async function get_api_env() {
+  await get_ec_api_env().then(res => {
+    Env.value = res
+    Env.value.forEach(data => {
+      if (!EnvArray.value.some(item => item.name === data.name)) {
+        EnvArray.value.push({name: data.name, code: data.code})
+      }
+    })
+  });
+}
+
+// 获取影院
+async function get_api_cinema() {
+  get_ec_api_cinema().then(res => {
+    Cinema.value = res
+  })
+}
+
+// 获取渠道
+async function get_api_channel() {
+  await get_ec_api_channel().then(res => {
+    Channel.value = res
+  })
+}
+
 // 获取接口
 async function get_api_by_type(api_type) {
   await get_ec_api_api(api_type).then(res => {
@@ -153,37 +179,51 @@ function store_data() {
     cinema: SelectCinema.value,
     channel: SelectChannel.value,
     select_api_id: SelectApiId.value,
+    type: SelectType.value,
+    api_group: SelectApiGroup.value,
+    cinema_env: CinemaByEnv.value,
+    channel_type: ChannelByType.value,
+    select_api: SelectApi.value,
     api: SelectApi.value,
     api_params: SelectApiParams.value
   })
-  console.log('select_data.value', select_data.value)
   // 写入store
   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)
 }
 
+// 切换回接口测试页面需要重新加载
+function restore_data() {
+  SelectEnv.value = store.state.ecApiModule.ec_api_data.env
+  SelectCinema.value = store.state.ecApiModule.ec_api_data.cinema
+  SelectType.value = store.state.ecApiModule.ec_api_data.type
+  SelectChannel.value = store.state.ecApiModule.ec_api_data.channel
+  SelectApiGroup.value = store.state.ecApiModule.ec_api_data.api_group
+  SelectApiId.value = store.state.ecApiModule.ec_api_data.select_api_id
+  CinemaByEnv.value = store.state.ecApiModule.ec_api_data.cinema_env
+  ChannelByType.value = store.state.ecApiModule.ec_api_data.channel_type
+  SelectApi.value = store.state.ecApiModule.ec_api_data.select_api ? store.state.ecApiModule.ec_api_data.select_api : []
+}
 
 onMounted(() => {
+  console.log('onMounted BasicConfig')
+  SelectType.value = store.state.ecApiModule.ec_api_data.type
   // 获取环境
-  get_ec_api_env().then(res => {
-    Env.value = res
-    Env.value.forEach(data => {
-      if (!EnvArray.some(item => item.name === data.name)) {
-        EnvArray.push({name: data.name, code: data.code})
-      }
-    })
-  });
-
+  get_api_env()
   // 获取影院
-  get_ec_api_cinema().then(res => {
-    Cinema.value = res
-  })
-
+  get_api_cinema()
   // 获取渠道
-  get_ec_api_channel().then(res => {
-    Channel.value = res
-  })
+  get_api_channel()
+  // 获取接口组数据
+  get_api_group_by_type(SelectType.value)
+  // 获取接口数据
+  get_api_by_type(SelectType.value)
+  // 获取接口参数
+  get_api_params_by_type(SelectType.value)
+
+  // 恢复数据
+  restore_data()
+  console.log('BasicConfig onMounted store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
 })
 
 
@@ -207,7 +247,8 @@ onMounted(() => {
       </el-col>
       <el-col :span="5">
         <label class="name-label">影院：</label>
-        <el-select v-model="SelectCinema" placeholder="请选择" style="width: 160px" size="default" @change="basic_info_change">
+        <el-select v-model="SelectCinema" placeholder="请选择" style="width: 160px" size="default"
+                   @change="basic_info_change">
           <el-option
               v-for="item in CinemaByEnv"
               :key="item.id"
@@ -232,7 +273,8 @@ onMounted(() => {
       </el-col>
       <el-col :span="5">
         <label class="name-label">渠道：</label>
-        <el-select v-model="SelectChannel" placeholder="请选择" style="width: 160px" size="default" @change="basic_info_change">
+        <el-select v-model="SelectChannel" placeholder="请选择" style="width: 160px" size="default"
+                   @change="basic_info_change">
           <el-option
               v-for="item in ChannelByType"
               :key="item.id"