DataFlowParams.vue
4.13 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<div class="data-flow-params">
<div>
<DataFlowMethodIsKafka
ref="dataFlowMethodIsKafkaRef"
v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_KAFKA"
/>
<DataFlowMethodIsMqtt
ref="dataFlowMethodIsMqttRef"
v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_MQTT"
/>
<DataFlowMethodIsRabbitMq
ref="dataFlowMethodIsRabbitMqRef"
v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_RABBITMQ"
/>
<DataFlowMethodIsApi
ref="dataFlowMethodIsApiRef"
v-show="dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_REST_API"
/>
</div>
<Button
type="primary"
class="data-flow-params-button"
@click="currentDataFlowParamsHanlePrevStep"
>上一步</Button
>
</div>
</template>
<script lang="ts" setup="DataFlowParams">
import { ref, nextTick } from 'vue';
import { DataFlowMethodIsApi } from '../dataflowmethod/components/api';
import { DataFlowMethodIsKafka } from '../dataflowmethod/components/kafka';
import { DataFlowMethodIsMqtt } from '../dataflowmethod/components/mqtt';
import { DataFlowMethodIsRabbitMq } from '../dataflowmethod/components/rabbitmq';
import { BusinessDataFlowMethodEnum } from '../../enum';
import { Button } from 'ant-design-vue';
const props = defineProps({
dataFlowType: {
type: String,
default: '',
},
});
const emit = defineEmits(['currentDataFlowParamsEmitPrevStep']);
const dataFlowMethodIsApiRef = ref<InstanceType<typeof DataFlowMethodIsApi>>();
const dataFlowMethodIsKafkaRef = ref<InstanceType<typeof DataFlowMethodIsKafka>>();
const dataFlowMethodIsMqttRef = ref<InstanceType<typeof DataFlowMethodIsMqtt>>();
const dataFlowMethodIsRabbitMqRef = ref<InstanceType<typeof DataFlowMethodIsRabbitMq>>();
const currentDataFlowParamsHanlePrevStep = async () => {
const values = await getValue();
emit('currentDataFlowParamsEmitPrevStep', { currentStep: 0, values });
};
//表单配置项（kafka、mqtt、rabbitmq、restapi）
const dataFlowTypeGetForm = [
[
(dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_KAFKA,
() => dataFlowMethodIsKafkaRef.value?.getValue(),
(value) => dataFlowMethodIsKafkaRef.value?.setValue(value),
() => dataFlowMethodIsKafkaRef.value?.resetValue(),
],
[
(dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_MQTT,
() => dataFlowMethodIsMqttRef.value?.getValue(),
(value) => dataFlowMethodIsMqttRef.value?.setValue(value),
() => dataFlowMethodIsMqttRef.value?.resetValue(),
],
[
(dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_RABBITMQ,
() => dataFlowMethodIsRabbitMqRef.value?.getValue(),
(value) => dataFlowMethodIsRabbitMqRef.value?.setValue(value),
() => dataFlowMethodIsRabbitMqRef.value?.resetValue(),
],
[
(dataFlowType) => dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_REST_API,
() => dataFlowMethodIsApiRef.value?.getValue(),
(value) => dataFlowMethodIsApiRef.value?.setValue(value),
() => dataFlowMethodIsApiRef.value?.resetValue(),
],
];
const getValue = () => {
const findDateFlow = dataFlowTypeGetForm.find((item) => item[0](props.dataFlowType));
if (!findDateFlow) return;
const getForm = findDateFlow[1](0);
return getForm;
};
const setValue = async (value) => {
await nextTick();
const findDateFlow = dataFlowTypeGetForm.find((item) => item[0](props.dataFlowType));
if (!findDateFlow) return;
findDateFlow[2](value);
};
const resetValue = () => {
const findDateFlow = dataFlowTypeGetForm.find((item) => item[0](props.dataFlowType));
if (!findDateFlow) return;
findDateFlow[3](0);
};
defineExpose({
getValue,
setValue,
resetValue,
});
</script>
<style lang="less" scoped>
.data-flow-params {
margin: 0 auto;
width: 600px;
.data-flow-params-button {
position: absolute;
bottom: 5%;
right: 50%;
transform: translateX(50%);
}
}
</style>