DeviceProfileStep2.vue
6.74 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<template>
<div class="step2">
<div class="step2-style">
<div style="margin-top: 0.8vh; margin-left: 2.8vw; overflow: scroll">
<BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
<div
style="
display: flex;
width: 11vw;
height: 8vh;
flex-direction: row;
justify-content: space-between;
margin-left: 17vw;
margin-top: -4vh;
"
>
<div style="display: flex; width: 4vw; height: 4vh; margin-top: -2.35vh">
<Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
>上一步</Button
>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { step2Schemas } from './data';
import { Alert, Divider, Descriptions } from 'ant-design-vue';
import { Button } from '/@/components/Button';
export default defineComponent({
components: {
BasicForm,
[Alert.name]: Alert,
[Divider.name]: Divider,
[Descriptions.name]: Descriptions,
[Descriptions.Item.name]: Descriptions.Item,
Button,
},
emits: ['next', 'prev', 'register'],
setup(_, { emit }) {
const transportData: any = reactive({
transportConfiguration: {
clientSettings: {
powerMode: null,
edrxCycle: null,
pagingTransmissionWindow: null,
psmActivityTimer: null,
},
coapDeviceTypeConfiguration: {
coapDeviceType: null,
},
deviceTelemetryTopic: null,
deviceAttributesTopic: null,
transportPayloadTypeConfiguration: {
transportPayloadType: null,
enableCompatibilityWithJsonPayloadFormat: false,
useJsonPayloadFormatForDefaultDownlinkTopics: false,
deviceAttributesProtoSchema: null,
deviceRpcRequestProtoSchema: null,
deviceRpcResponseProtoSchema: null,
deviceTelemetryProtoSchema: null,
},
type: null,
},
});
const [register, { validate, setFieldsValue, resetFields }] = useForm({
labelWidth: 80,
schemas: step2Schemas,
actionColOptions: {
span: 14,
},
});
const setStepTwoFieldsValueFunc = (v) => {
console.log(v);
setFieldsValue({
transportType: v?.type || v?.transportConfiguration.type,
transportPayloadType:
v?.transportPayloadTypeConfiguration?.transportPayloadType ||
v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration?.transportPayloadType,
deviceTelemetryTopic: v?.deviceTelemetryTopic,
deviceAttributesTopic: v?.deviceAttributesTopic,
enableCompatibilityWithJsonPayloadFormat:
v?.transportPayloadTypeConfiguration?.enableCompatibilityWithJsonPayloadFormat,
useJsonPayloadFormatForDefaultDownlinkTopics:
v?.transportPayloadTypeConfiguration?.useJsonPayloadFormatForDefaultDownlinkTopics,
deviceAttributesProtoSchema:
v?.transportPayloadTypeConfiguration?.deviceAttributesProtoSchema,
deviceRpcRequestProtoSchema:
v?.transportPayloadTypeConfiguration?.deviceRpcRequestProtoSchema,
deviceRpcResponseProtoSchema:
v?.transportPayloadTypeConfiguration?.deviceRpcResponseProtoSchema,
deviceTelemetryProtoSchema:
v?.transportPayloadTypeConfiguration?.deviceTelemetryProtoSchema,
powerMode: v?.clientSettings?.powerMode,
edrxCycle: v?.clientSettings?.edrxCycle,
pagingTransmissionWindow: v?.clientSettings?.pagingTransmissionWindow,
psmActivityTimer: v?.clientSettings?.psmActivityTimer,
coapDeviceType: v?.coapDeviceTypeConfiguration?.coapDeviceType,
});
};
const customClearStepTwoValueFunc = () => {
resetFields();
};
async function customResetFunc() {
emit('prev');
}
const getStep2DataFunc = async () => {
const val = await validate();
if (!val) return;
transportData.transportConfiguration.deviceTelemetryTopic = val.deviceTelemetryTopic;
transportData.transportConfiguration.deviceAttributesTopic = val.deviceAttributesTopic;
transportData.transportConfiguration.transportPayloadTypeConfiguration.transportPayloadType =
val.transportPayloadType;
transportData.transportConfiguration.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
val.enableCompatibilityWithJsonPayloadFormat;
transportData.transportConfiguration.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =
val.useJsonPayloadFormatForDefaultDownlinkTopics;
transportData.transportConfiguration.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
val.enableCompatibilityWithJsonPayloadFormat;
transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
val.deviceAttributesProtoSchema;
transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
val.deviceRpcRequestProtoSchema;
transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
val.deviceRpcResponseProtoSchema;
transportData.transportConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
val.deviceTelemetryProtoSchema;
transportData.transportConfiguration.type = val.transportType;
transportData.transportConfiguration.clientSettings.powerMode = val.powerMode;
transportData.transportConfiguration.clientSettings.edrxCycle = val.edrxCycle;
transportData.transportConfiguration.clientSettings.psmActivityTimer = val.psmActivityTimer;
transportData.transportConfiguration.clientSettings.pagingTransmissionWindow =
val.pagingTransmissionWindow;
transportData.transportConfiguration.coapDeviceTypeConfiguration.coapDeviceType =
val.coapDeviceType;
return transportData;
};
return {
customResetFunc,
register,
setStepTwoFieldsValueFunc,
customClearStepTwoValueFunc,
getStep2DataFunc,
};
},
});
</script>
<style lang="less" scoped>
.step2 {
width: 100%;
.step2-style {
width: 43vw;
// height: 50vh;
border: 1px solid gray;
margin: 0vh 0.6vw;
border-radius: 4px;
}
}
::-webkit-scrollbar {
display: none;
}
</style>