diff --git a/src/apis/ec_api.js b/src/apis/ec_api.js index 48100eb..e9f17c1 100644 --- 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 + } + }) +} + diff --git a/src/components/ec_api/BasicConfig.vue b/src/components/ec_api/BasicConfig.vue index 75a06e9..98885f5 100644 --- 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(() => { - + { - + -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" > - + + + + @@ -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 }