DeviceStep2.vue
3.37 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
<template>
<div class="step2">
<div><input type="checkbox" v-model="isCreaentials" @click="checked" /> 添加凭证 </div>
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-if="isCreaentials">
<a-form-item label="凭据类型">
<a-select
v-model:value="creaentialsType"
style="width: 200px"
@change="handleChange"
placeholder="请选择凭据类型"
:options="options"
/>
</a-form-item>
<div v-if="creaentialsType === 'Access token'">
<a-form-item label="访问令牌">
<a-input type="input" style="width: 200px" v-model:value="token" />
</a-form-item>
</div>
<div v-else-if="creaentialsType === 'X.509'">
<a-form-item label="RSA公钥">
<a-input type="input" style="width: 200px" v-model:value="publicKey" />
</a-form-item>
</div>
<div v-else>
<a-form-item label="客户端ID">
<a-input type="input" style="width: 200px" v-model:value="clientId" />
</a-form-item>
<a-form-item label="用户名">
<a-input type="input" style="width: 200px" v-model:value="username" />
</a-form-item>
<a-form-item label="密码">
<a-input type="password" style="width: 200px" v-model:value="password" />
</a-form-item>
</div>
</a-form>
<div class="flex justify-start">
<a-button class="mr-5" @click="prevStep">上一步</a-button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { Input, Form, Select, Button, SelectProps } from 'ant-design-vue';
export default defineComponent({
components: {
[Form.name]: Form,
[Form.Item.name]: Form.Item,
[Input.name]: Input,
[Select.name]: Select,
[Button.name]: Button,
},
emits: ['prev'],
setup(_, { emit }) {
const isCreaentials = ref(false);
const creaentialsType = ref('Access token');
const creaentialsPassword = reactive({
token: '',
publicKey: '',
clientId: '',
username: '',
password: '',
});
const options = ref<SelectProps['options']>([
{
value: 'Access token',
label: 'Access token',
},
{
value: 'X.509',
label: 'X.509',
},
{
value: 'MQTT Basic',
label: 'MQTT Basic',
},
]);
const checked = () => {
isCreaentials.value = !isCreaentials.value;
};
const prevStep = () => {
emit('prev');
};
// 切换凭证类型时，重置字段
const handleChange = (value) => {
if (value === 'Access token') {
creaentialsPassword.token = '';
} else if (value === 'X.509') {
creaentialsPassword.publicKey = '';
} else {
creaentialsPassword.clientId = '';
creaentialsPassword.username = '';
creaentialsPassword.password = '';
}
};
return {
...toRefs(creaentialsPassword),
creaentialsType,
isCreaentials,
options,
handleChange,
prevStep,
checked,
labelCol: { style: { width: '150px' } },
wrapperCol: { span: 18 },
};
},
});
</script>
<style lang="less" scoped>
.step2 {
width: 500px;
margin: 0 auto;
}
</style>