parent
d911bafdfc
commit
eaaa4286e5
9 changed files with 330 additions and 80 deletions
@ -1,49 +1,198 @@ |
|||||||
<script setup> |
<script setup> |
||||||
import {ref, onMounted} from "vue"; |
import {ref, reactive, onMounted, watch} from "vue"; |
||||||
|
import {getCurrentInstance} from 'vue' |
||||||
import Sortable from "sortablejs"; |
import Sortable from "sortablejs"; |
||||||
import {useStore} from "vuex"; |
import {useStore, mapState} from "vuex"; |
||||||
|
import {nextTick} from "vue"; |
||||||
|
import JsonEditorVue from "json-editor-vue3"; |
||||||
|
|
||||||
|
|
||||||
// 注册store |
// 注册store |
||||||
const store = useStore() |
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(() => { |
onMounted(() => { |
||||||
|
console.log('TabArea onMounted') |
||||||
// 处理拖拽 |
// 处理拖拽 |
||||||
const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav'); |
const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav'); |
||||||
new Sortable(elTabsHeader, { |
new Sortable(elTabsHeader, { |
||||||
animation: 150, |
animation: 150, |
||||||
ghostClass: 'dragging', |
ghostClass: 'dragging', |
||||||
draggable: '.el-tabs__item', |
draggable: '.el-tabs__item', |
||||||
onEnd: ({ oldIndex, newIndex }) => { |
onEnd: (evt) => { |
||||||
const movedTab = tabs.value.splice(oldIndex-1, 1)[0]; |
store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex}) |
||||||
tabs.value.splice(newIndex-1, 0, movedTab); |
|
||||||
}, |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
|
// 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> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<el-tabs ref="tabsRef"> |
<el-tabs ref="tabsRef" v-model="activeTab"> |
||||||
<el-tab-pane |
<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" |
:key="tab.id" |
||||||
:label="tab.desc" |
:label="tab.desc" |
||||||
:name="tab.id" |
: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-tab-pane> |
||||||
</el-tabs> |
</el-tabs> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
|
.BtnRow { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.editor { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue