index.vue
3.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
<div>
<Tabs @change="handleChange" v-model:activeKey="activeKey">
<TabPane class="tab-pane" forceRender key="Params" tab="Params">
<EditCellTable ref="editCellTableRef" :method="method" />
<TestRequest ref="testParRequestRef" :method="method" :data="dataList" />
</TabPane>
<TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Body" tab="Body">
<Body ref="bodyRef" :method="method" />
<TestRequest ref="testBodyRequestRef" :method="method" :data="dataList" />
</TabPane>
<TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
<EditCellTable ref="editHeaderCellTableRef" :method="method" />
<TestRequest ref="testHeaderRequestRef" :method="method" :data="dataList" />
</TabPane>
</Tabs>
</div>
</template>
<script lang="ts" setup name="simpleRequest">
import { ref, nextTick } from 'vue';
import { Tabs, TabPane } from 'ant-design-vue';
import { EditCellTable } from '../EditCellTable';
import Body from './body.vue';
import { TestRequest } from '../TestRequest/index';
defineProps({
method: {
type: String,
},
});
const emits = defineEmits(['activeKey']);
const activeKey = ref('Params');
const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();
const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>();
const testParRequestRef = ref<InstanceType<typeof TestRequest>>();
const testBodyRequestRef = ref<InstanceType<typeof TestRequest>>();
const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
const dataList = ref({});
const bodyRef = ref<InstanceType<typeof Body>>();
const handleChange = () => {
testParRequestRef.value?.setValue();
testHeaderRequestRef.value?.setValue();
testBodyRequestRef.value?.setValue();
};
//获取数据
const getValue = () => {
const type = activeKey.value;
const Body = bodyRef.value?.getValue();
const Params = editCellTableRef.value?.getValue();
const Header = editHeaderCellTableRef.value?.getValue();
emits('activeKey', type);
return type === 'Params' ? Params : type === 'Body' ? Body : Header;
};
//设置数据
const setValue = (data) => {
dataList.value = data;
const Objects = JSON.parse(data?.requestParams);
nextTick(() => {
if (!Objects) return;
activeKey.value = Objects?.type;
if (activeKey.value === 'Params') {
editCellTableRef.value?.setValue(Objects?.Params);
testParRequestRef.value?.setValue();
} else if (activeKey.value === 'Body') {
bodyRef.value?.setValue(Objects?.Body);
testBodyRequestRef.value?.setValue();
} else if (activeKey.value === 'Header') {
editHeaderCellTableRef.value?.setValue(Objects?.Header);
testHeaderRequestRef.value?.setValue();
} else {
}
});
};
//重置数据
const resetValue = () => {
activeKey.value = 'Params';
nextTick(() => {
editCellTableRef.value?.resetValue();
editHeaderCellTableRef.value?.resetValue();
bodyRef.value?.resetValue();
});
};
defineExpose({
getValue,
setValue,
resetValue,
});
</script>
<style lang="less" scoped>
.tab-pane {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
}
</style>