RogerWorkPC
/
dingxin_toolbox_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码好像能工作

Browse Source
dev
RogerWork 4 months ago
parent eaaa4286e5
commit 2987a25871
4 changed files with 84 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/ec_api/BasicConfig.vue
  2. 116
      src/components/ec_api/TabArea.vue
  3. 31
      src/store/index.js
  4. 2
      src/views/ec_api/index.vue

10
src/components/ec_api/BasicConfig.vue
Unescape View File

@ -125,6 +125,7 @@ function api_on_change() {
function handle_api_data() { function handle_api_data() {
// 生成被选择的api的数组 // 生成被选择的api的数组
SelectApi.value = []
SelectApiId.value.forEach(api_id => { SelectApiId.value.forEach(api_id => {
Api.value.forEach(api => { Api.value.forEach(api => {
if (api.id === api_id) { if (api.id === api_id) {
@ -138,13 +139,6 @@ function handle_api_data() {
SelectApiParams.value[api_id] = ApiParams.value[api_id] SelectApiParams.value[api_id] = ApiParams.value[api_id]
} }
}) })
console.log('Api.value', Api.value)
console.log('SelectApiId.value', SelectApiId.value)
console.log('SelectApi.value', SelectApi.value)
console.log('ApiParams.value', ApiParams.value)
console.log('SelectApiParams.value', SelectApiParams.value)
} }
// 生成共享数据 // 生成共享数据
@ -159,8 +153,8 @@ function store_data() {
}) })
console.log('select_data.value', select_data.value) console.log('select_data.value', select_data.value)
// 写入store // 写入store
store.commit('ecApiModule/change_ec_select_api', SelectApiId.value)
store.commit('ecApiModule/add_ec_api_data', select_data.value) 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) console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
} }

116
src/components/ec_api/TabArea.vue
Unescape View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import {ref, reactive, onMounted, watch} from "vue"; import {ref, reactive, onBeforeMount, onMounted, watch} from "vue";
import {getCurrentInstance} from 'vue' import {getCurrentInstance} from 'vue'
import Sortable from "sortablejs"; import Sortable from "sortablejs";
import {useStore, mapState} from "vuex"; import {useStore, mapState} from "vuex";
@ -12,35 +12,51 @@ const store = useStore()
// 标签相关的定义 // 标签相关的定义
const tabsRef = ref(null); // tabs的Ref const tabsRef = ref(null); // tabs的Ref
const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡 const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡，存储的是api_id
// 表格相关的定义 // 表格相关的定义
const ApiTableRef = ref(null) // 表格的Ref const ApiTableRef = ref(null) // 表格的Ref
const multipleSelection = ref([]) // checkbox的处理 // const multipleSelection = ref([]) // checkbox的处理
// 定义变量用于存储接口设置的数据 // 定义变量用于存储接口设置的数据
const UserApiData = ref({}) const UserApiData = ref({api: {}, base_info: {}})
// 表格逻辑 // 表格逻辑
// 多选改变后处理逻辑 // 多选改变后处理逻辑
function handleSelectionChange(val) { function handleParamsChange(newCheckedResult) {
multipleSelection.value = val console.log('handleParamsChange', newCheckedResult)
console.log('activeTab.value', activeTab.value)
console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
}
function handleParamsSelect(val) {
console.log('val', val)
UserApiData.value.api[activeTab.value].params.forEach(param => {
console.log(val.indexOf(param))
param['is_checked'] = val.indexOf(param) >= 0;
})
} }
// function handleTabChange(){
// // 标记勾选项
// markIsRequestSelection()
// }
// 自动勾选行 // 自动勾选行
function markIsRequestSelection() { function markIsChecked() {
console.log('checkRequestSelection') console.log('checkRequestSelection')
if (store.state.ecApiModule.ec_api_data.api_params_data) { if (UserApiData.value.hasOwnProperty('api') || UserApiData.value.api.length > 0) {
store.state.ecApiModule.ec_api_data.api_params_data[activeTab.value].forEach(item => { console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
UserApiData.value.api[activeTab.value].params.forEach(item => {
console.log('item', item) console.log('item', item)
if (item['is_checked'] === true) { if (item['is_checked'] === true) {
ApiTableRef.value[0].toggleRowSelection(item, true) console.log('ApiTableRef.value', ApiTableRef.value)
ApiTableRef.value[activeTab.value - 1].toggleRowSelection(item, true)
} }
}) })
console.log(multipleSelection.value) // console.log(multipleSelection.value)
} }
} }
@ -51,35 +67,27 @@ function initApiData() {
cinema: store.state.ecApiModule.ec_api_data.cinema, cinema: store.state.ecApiModule.ec_api_data.cinema,
channel: store.state.ecApiModule.ec_api_data.channel, channel: store.state.ecApiModule.ec_api_data.channel,
} }
if (store.state.ecApiModule.ec_api_data.api_data) { if (store.state.ecApiModule.ec_api_data.api) {
const params = mapState(store.state.ecApiModule.ec_api_data.api_params_data) store.state.ecApiModule.ec_api_data.api.forEach(item => {
console.log(params[1]) if (!UserApiData.value['api'].hasOwnProperty(item.id)) {
store.state.ecApiModule.ec_api_data.api_data.forEach(item => { UserApiData.value['api'][item.id] = {
if (UserApiData.value.hasOwnProperty('api') === false) {
UserApiData.value['api'] = [{
'id': item.id, 'id': item.id,
'desc': item.desc, 'description': item.description,
'path': item.path, 'path': item.path,
'type': item.type, 'type': item.type,
'param': store.state.ecApiModule.ec_api_data.api_params_data[String(item.id)] 'params': store.state.ecApiModule.ec_api_data.api_params[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) console.log('initApiData.UserApiData', UserApiData.value)
} }
// 监测ec_select_api的变化 如果当前选中的标签被取消勾选，则选择剩下标签的第一个 // 监测ec_select_api的变化 如果当前选中的标签被取消勾选，则选择剩下标签的第一个
watch(store.state.ecApiModule.ec_select_api, (oldValue, newValue) => { watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
console.log('watch')
console.log('store.state.ecApiModule.ec_api_data.api', store.state.ecApiModule.ec_api_data.api)
initApiData()
let tempId = 1 let tempId = 1
if (newValue.length > 0) { if (newValue.length > 0) {
tempId = newValue[0].id tempId = newValue[0].id
@ -91,15 +99,30 @@ watch(store.state.ecApiModule.ec_select_api, (oldValue, newValue) => {
}) })
activeTab.value = tempId activeTab.value = tempId
// 处理请求参数生成本地数据结构
initApiData()
}, {deep: true}) }, {deep: true})
watch(activeTab, (val) => {
console.log('watch.activeTab', val)
markIsChecked()
})
/* /*
生命周期逻辑 生命周期逻辑
*/ */
onBeforeMount(
() => {
console.log('TabArea onBeforeMount')
// 处理请求参数生成本地数据结构
initApiData()
}
)
// 挂载后 // 挂载后
onMounted(() => { onMounted(() => {
console.log('TabArea onMounted') console.log('TabArea onMounted')
// 勾选is_checked选项
markIsChecked()
// 处理拖拽 // 处理拖拽
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, {
@ -110,19 +133,13 @@ onMounted(() => {
store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex}) store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
}, },
}); });
// initApiData()
// console.log('UserApiData', UserApiData.value)
//
// nextTick(() => {
// checkRequestSelection()
// })
}); });
// 添加新字段 // 添加新字段
function addNewParams() { function addNewParams() {
store.state.ecApiModule.ec_api_data.api_params_data[activeTab.value].push({ UserApiData.value.api[activeTab.value].params.push({
id: Date.now(),
api_id: activeTab.value,
param: '', param: '',
value: '', value: '',
is_request: false, is_request: false,
@ -134,15 +151,16 @@ function addNewParams() {
<template> <template>
<el-tabs ref="tabsRef" v-model="activeTab"> <el-tabs ref="tabsRef" v-model="activeTab">
<el-tab-pane <el-tab-pane
v-for="(tab,index) in store.getters['ecApiModule/ec_select_api_getter']" v-for="api in Object.values(UserApiData.api)"
:key="tab.id" :key="api['id']"
:label="tab.desc" :label="api['description']"
:name="tab.id" :name="api['id']"
> >
<el-table <el-table
ref='ApiTableRef' ref='ApiTableRef'
:data="store.state.ecApiModule.ec_api_data.api_params_data[tab.id]" :data="UserApiData.api[api['id']].params"
@selection-change="handleSelectionChange" @selection-change="handleParamsChange"
@select="handleParamsSelect"
> >
<el-table-column type="selection" width="50"/> <el-table-column type="selection" width="50"/>
<el-table-column label="字段名" width="120"> <el-table-column label="字段名" width="120">
@ -163,7 +181,7 @@ function addNewParams() {
<span>{{ scope.row.is_request ? '是' : '否' }}</span> <span>{{ scope.row.is_request ? '是' : '否' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="desc" label="描述" show-overflow-tooltip/> <el-table-column prop="description" label="描述" show-overflow-tooltip/>
</el-table> </el-table>
<el-row class="BtnRow" style="width: 100%"> <el-row class="BtnRow" style="width: 100%">
<el-col :span="2"> <el-col :span="2">

31
src/store/index.js
Unescape View File

@ -38,8 +38,8 @@ const updateModule = {
const ecApiModule = { const ecApiModule = {
namespaced: true, namespaced: true,
state: { state: {
ec_api_data: {}, // 所有api数据 ec_api_data: {api:[]}, // 所有api数据
ec_select_api: [], // 默认选中的api // ec_select_api: [], // 默认选中的api
first_tab_api_id: 1 first_tab_api_id: 1
}, },
getters: { getters: {
@ -47,36 +47,31 @@ const ecApiModule = {
return state.ec_api_data return state.ec_api_data
}, },
ec_select_api_getter: state => { ec_select_api_getter: state => {
return state.ec_select_api return state.ec_api_data.api
}, },
ec_select_api_params_getter: state => {
return state.ec_select_api_params
},
ec_select_api_params_getter_by_id: (state, id) => {
return state.ec_select_api_params[id]
}
}, },
mutations: { mutations: {
change_ec_select_api: (state, payload) => { change_ec_select_api: (state, payload) => {
// console.log('payload', payload) // console.log('payload', payload)
// console.log('state.ec_api_data.api', state.ec_api_data.api)
payload.forEach((item) => { payload.forEach((item) => {
if (state.ec_select_api.indexOf(item) === -1) { if (state.ec_api_data.api.indexOf(item) === -1) {
state.ec_select_api.push(item) state.ec_api_data.api.push(item)
} }
}) })
state.ec_select_api.forEach((item) => { state.ec_api_data.api.forEach((item) => {
if (payload.indexOf(item) === -1) { if (payload.indexOf(item) === -1) {
state.ec_select_api.splice(state.ec_select_api.indexOf(item), 1) state.ec_api_data.api.splice(state.ec_api_data.api.indexOf(item), 1)
} }
}) })
// console.log('state.ec_select_api', state.ec_select_api) // console.log('state.ec_api_data.api', state.ec_api_data.api)
}, },
handle_sort_ec_select_api: (state, payload) => { handle_sort_ec_select_api: (state, payload) => {
// console.log(state.ec_select_api) // console.log(state.ec_api_data.api)
const movedTab = state.ec_select_api.splice(payload.oldIndex - 1, 1)[0]; const movedTab = state.ec_api_data.api.splice(payload.oldIndex - 1, 1)[0];
// console.log(state.ec_select_api) // console.log(state.ec_api_data.api)
// console.log('movedTab', movedTab) // console.log('movedTab', movedTab)
state.ec_select_api.splice(payload.newIndex - 1, 0, toValue(movedTab)); state.ec_api_data.api.splice(payload.newIndex - 1, 0, toValue(movedTab));
}, },
add_ec_api_data: (state, payload) => { add_ec_api_data: (state, payload) => {
// console.log('payload', payload) // console.log('payload', payload)

2
src/views/ec_api/index.vue
Unescape View File

@ -8,7 +8,7 @@ const store = useStore();
<template> <template>
<BasicConfig></BasicConfig> <BasicConfig></BasicConfig>
<TabArea></TabArea> <TabArea v-if="store.state.ecApiModule.ec_api_data.api.length > 0"></TabArea>
</template> </template>
<style scoped> <style scoped>

Write Preview
Loading…
Cancel
Save