基本功能，发送请求和展示结果已完成

4 months ago · 16ac0df5b6
parent adbe61b2e9
commit 16ac0df5b6
3 changed files with 139 additions and 16 deletions
--- a/src/apis/ec_api.js
+++ b/src/apis/ec_api.js
@ -62,3 +62,30 @@ export const get_ec_api_api_group = (api_type) => {
        }
    })
 }
+
+export const get_ec_api_request_url = (req_data) => {
+    return request({
+        url: 'ec/get_url',
+        method: 'post',
+        data:{
+            env: req_data.env,
+            member_type: req_data.type,
+            api: req_data.api,
+            params: req_data.params
+        }
+    })
+}
+
+export const ec_api_send_request = (req_data) => {
+    return request({
+        url: 'ec/send_request',
+        method: 'post',
+        data:{
+            env: req_data.env,
+            member_type: req_data.type,
+            api: req_data.api,
+            params: req_data.params
+        }
+    })
+}
+
--- a/src/components/ec_api/BasicConfig.vue
+++ b/src/components/ec_api/BasicConfig.vue
@ -86,6 +86,10 @@ function type_on_change() {
  get_api_params_by_type(SelectType.value)
 }

+function basic_info_change() {
+  store_data()
+}
+
 // 获取接口
 async function get_api_by_type(api_type) {
  await get_ec_api_api(api_type).then(res => {
@ -203,7 +207,7 @@ onMounted(() => {
      </el-col>
      <el-col :span="5">
        <label class="name-label">影院：</label>
-        <el-select v-model="SelectCinema" placeholder="请选择" style="width: 160px" size="default">
+        <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"
@ -228,7 +232,7 @@ onMounted(() => {
      </el-col>
      <el-col :span="5">
        <label class="name-label">渠道：</label>
-        <el-select v-model="SelectChannel" placeholder="请选择" style="width: 160px" size="default">
+        <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"
--- a/src/components/ec_api/TabArea.vue
+++ b/src/components/ec_api/TabArea.vue
@ -1,10 +1,10 @@
 <script setup>
-import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch} from "vue";
-import {getCurrentInstance} from 'vue'
+import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch, watchEffect} from "vue";
 import Sortable from "sortablejs";
 import {useStore, mapState} from "vuex";
-import {nextTick} from "vue";
 import JsonEditorVue from "json-editor-vue3";
+import {ec_api_send_request, get_ec_api_request_url} from "@/apis/ec_api.js";
+import {Refresh} from "@element-plus/icons-vue";


 // 注册store
@ -48,6 +48,12 @@ function markIsChecked() {
  }
 }

+// 过滤生成url的必须参数，必须包含'format', 'pid', '_sig'否则后端会报错
+function checkboxFilter(row) {
+  const special_params = ['format', 'pid', '_sig']
+  return special_params.indexOf(row.param) < 0;
+}
+
 // 初始逻辑数据逻辑处理
 function initApiData() {
  // 更新基础数据
@ -69,6 +75,9 @@ function initApiData() {
          'description': item.description,
          'path': item.path,
          'type': item.type,
+          'url': '',
+          'response': {},
+          'sig': '',
          'params': store.state.ecApiModule.ec_api_data.api_params[item.id]
        }
      }
@ -79,6 +88,20 @@ function initApiData() {
        delete UserApiData.value['api'][api['id']]
      }
    })
+    // 处理cid和pid
+    Object.keys(UserApiData.value['api']).forEach(api_id => {
+      UserApiData.value['api'][api_id]['params'].forEach(
+          param_item => {
+            if (param_item['param'] === 'cid') {
+              param_item['value'] = UserApiData.value['base_info']['cinema']
+            }
+            if (param_item['param'] === 'pid') {
+              param_item['value'] = UserApiData.value['base_info']['channel']
+            }
+          }
+      )
+    })
+
    // 把生成的接口数据赋给UserApiData
    UserApiData.value.tab = api_tab
  }
@ -97,14 +120,58 @@ function addNewParams() {
  })
 }

+// 准备获取url和发送请求需要的参数
+function handle_request_data() {
+  let data = {}
+  let req_data = {}
+  UserApiData.value.api[activeTab.value]['params'].forEach(
+      p => {
+        if (p['param'] !== '_sig' && p['is_checked'] === true) {
+          req_data[p['param']] = p['value']
+        }
+      }
+  )
+  data['env'] = UserApiData.value.base_info['env']
+  data['type'] = UserApiData.value.api[activeTab.value]['type']
+  data['api'] = UserApiData.value.api[activeTab.value]['path']
+  data['params'] = JSON.stringify(req_data)
+  return data
+}
+
+// 生成请求的url，用于页面展示
+function handle_request_url() {
+  const data = handle_request_data()
+  get_ec_api_request_url(data).then(res => {
+    console.log('handle_update_url', res)
+    UserApiData.value.api[activeTab.value]['url'] = res['url']
+    UserApiData.value.api[activeTab.value]['params'].forEach(p => {
+      if (p['param'] === '_sig') {
+        p['value'] = res['sig']
+      }
+    })
+  }).catch(err => console.log(err))
+}
+
+// 发送api请求
+function send_request() {
+  const data = handle_request_data()
+  ec_api_send_request(data).then(res => {
+        console.log('send_request', res)
+        UserApiData.value.api[activeTab.value].response = res
+      }
+  )
+}
+
+// 用于测试，可以添加到需要的方法中
 function test() {
-  console.log('store.state.ecApiModule.ec_api_data.api', store.state.ecApiModule.ec_api_data.api)
+  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)
 }

 // 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
 watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
+  console.log('watch store.state.ecApiModule.ec_api_data.api')
  // 接口数据变化后初始化本地数据
  initApiData()
  // 处理空标签逻辑
@ -117,8 +184,16 @@ watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
 // 监测activeTab， 如果切换标签页，则执行自动勾选的函数
 watch(activeTab, () => {
  markIsChecked()
+  handle_request_url()
 })

+// 监视本地用户数据，如果数据改变，则更新url
+watch(UserApiData.value, () => {
+  console.log('watch UserApiData', UserApiData.value)
+  handle_request_url()
+
+}, {deep: true, flush: "post"})
+

 /*
 生命周期逻辑
@ -143,8 +218,6 @@ onMounted(() => {
    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})
    },
  });
@ -165,7 +238,7 @@ onMounted(() => {
          @selection-change="handleParamsChange"
          @select="handleParamsSelect"
      >
-        <el-table-column type="selection" width="50"/>
+        <el-table-column type="selection" width="50" :selectable="checkboxFilter"/>
        <el-table-column label="字段名" width="120">
          <template v-slot="scope">
            <span v-if="scope.row.is_preset">{{ scope.row.param }}</span>
@ -179,6 +252,15 @@ onMounted(() => {
            <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">
+            <el-button @click="test">
+              <el-icon>
+                <Refresh/>
+              </el-icon>
+            </el-button>
+          </template>
+        </el-table-column>
        <el-table-column label="必选" width="80">
          <template v-slot="scope">
            <span>{{ scope.row.is_request ? '是' : '否' }}</span>
@ -191,19 +273,20 @@ onMounted(() => {
          <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>
+      <hr id="break_line"/>
+      <el-row class="BtnRow" style="width: 100%" :gutter="10" align="middle">
+        <el-col :span="2"><span style="font-weight: bold; color: #909399">请求地址：</span></el-col>
        <el-col :span="12">
-          <el-input type="text"></el-input>
+          <el-input type="text" v-model="UserApiData.api[api['id']].url" :style="{'font-size': '18px'}"></el-input>
        </el-col>
        <el-col :span="2">
-          <el-button type="primary" @click="test">发送</el-button>
+          <el-button type="primary" @click="send_request">发送</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: 1600px"/>
+      <JsonEditorVue class="editor" v-model="UserApiData.api[api['id']].response" language="zh-CN"
+                     style="width: 1600px; height: 500px"/>
    </el-tab-pane>
  </el-tabs>
 </template>
@ -215,6 +298,15 @@ onMounted(() => {

 .editor {
  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+#break_line {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: rgba(144, 147, 153, 0.5);
+  height: 1px;
+  border: none
 }

 </style>