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