简柏林 / thingskit-front · Commits

Commit 400760d8a437a705b9fbda04d8a4d08113cfa7e2

Authored by xp.Huang
2 parents c5f9c1e9 d66c2a4a

Merge branch 'ft_local_dev' into 'main' 

refractor:重构设备配置代码

See merge request huang/yun-teng-iot-front!345
Inline Side-by-side
Showing 12 changed files with 948 additions and 1313 deletions
@@ -41,7 +41,6 @@ export function useBatchDelete( @@ -41,7 +41,6 @@ export function useBatchDelete(
41 41
42 // 全选按钮 42 // 全选按钮
43 const onSelectAll = (_, selectedRows, __) => { 43 const onSelectAll = (_, selectedRows, __) => {
44 - console.log(selectedRows);  
45 const selectedRowKeys = selectedRows.map((item) => item.id); 44 const selectedRowKeys = selectedRows.map((item) => item.id);
46 selectedRowIds.value = selectedRowKeys; 45 selectedRowIds.value = selectedRowKeys;
47 }; 46 };
1 <template> 1 <template>
2 <div> 2 <div>
3 <BasicModal 3 <BasicModal
  4 + :maskClosable="false"
4 v-bind="$attrs" 5 v-bind="$attrs"
5 width="55rem" 6 width="55rem"
6 @register="register" 7 @register="register"
7 - :title="getTitle"  
8 @ok="handleSubmit" 8 @ok="handleSubmit"
9 @cancel="handleCancel" 9 @cancel="handleCancel"
10 - :showOkBtn="isShowOkBtnFalse"  
11 > 10 >
12 <div class="step-form-form"> 11 <div class="step-form-form">
13 <a-steps :current="current"> 12 <a-steps :current="current">
14 - <a-step title="设备配置" />  
15 - <a-step title="传输配置" /> 13 + <a-step v-for="item in steps" :key="item.title" :title="item.title" />
16 </a-steps> 14 </a-steps>
17 </div> 15 </div>
18 <div class="mt-5"> 16 <div class="mt-5">
19 - <!-- 设备配置 -->  
20 - <div v-show="current === 0">  
21 - <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1" />  
22 - </div>  
23 - <!-- 设备配置 -->  
24 - <!-- 传输配置 -->  
25 - <div v-show="current === 1">  
26 - <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev" />  
27 - </div>  
28 - <!-- 传输配置 --> 17 + <DeviceConfigurationStep
  18 + v-show="current === 0"
  19 + ref="DevConStRef"
  20 + @next="handleStepNext(true, null)"
  21 + />
  22 + <TransportConfigurationStep
  23 + v-show="current === 1"
  24 + ref="TransConStRef"
  25 + @prev="handleStepPrev"
  26 + />
29 </div> 27 </div>
30 </BasicModal> 28 </BasicModal>
31 </div> 29 </div>
32 </template> 30 </template>
33 -<script lang="ts">  
34 - import {  
35 - defineComponent,  
36 - nextTick,  
37 - ref,  
38 - computed,  
39 - unref,  
40 - getCurrentInstance,  
41 - reactive,  
42 - } from 'vue'; 31 +<script lang="ts" setup>
  32 + import { ref, unref, reactive } from 'vue';
43 import { BasicModal, useModalInner } from '/@/components/Modal'; 33 import { BasicModal, useModalInner } from '/@/components/Modal';
44 - import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';  
45 - import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';  
46 - import { Steps } from 'ant-design-vue'; 34 + import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
  35 + import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
47 import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi'; 36 import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
48 import { useMessage } from '/@/hooks/web/useMessage'; 37 import { useMessage } from '/@/hooks/web/useMessage';
  38 + import { steps } from './device.profile.data';
  39 + import { isEmpty } from '/@/utils/is';
49 40
50 - export default defineComponent({  
51 - name: 'DeviceModal',  
52 - components: {  
53 - BasicModal,  
54 - DeviceProfileStep1,  
55 - DeviceProfileStep2,  
56 - [Steps.name]: Steps,  
57 - [Steps.Step.name]: Steps.Step,  
58 - },  
59 - props: {  
60 - userData: { type: Object },  
61 - },  
62 - emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],  
63 - setup(_, { emit }) {  
64 - const { proxy } = getCurrentInstance() as any;  
65 - const DeviceProfileStep1Ref = ref(null);  
66 - const DeviceProfileStep2Ref = ref(null);  
67 - const { createMessage } = useMessage();  
68 - let postDeviceConfogData: any = reactive({});  
69 - let getStepOneData: any = reactive({});  
70 - let getStepTwoData: any = reactive({});  
71 - const editData: any = ref({});  
72 - const postEditId = ref('');  
73 - const postDefault = ref(false);  
74 - const createTime = ref('');  
75 - const current = ref(0);  
76 - const isUpdate = ref(0);  
77 - const isShowOkBtnFalse = ref(true);  
78 - const isNextStatus = ref(false);  
79 - let transportTypeObj = reactive({  
80 - transportType: '',  
81 - });  
82 - let profileDataObj: any = reactive({  
83 - profileData: null,  
84 - });  
85 - let isEdit = ref(true);  
86 - let noEditObj: any = reactive({});  
87 - const getTitle = computed(() =>  
88 - isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'  
89 - );  
90 - const editTransportType = ref('');  
91 - const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));  
92 - const [register, { closeModal }] = useModalInner(async (data) => {  
93 - isUpdate.value = data.isUpdate;  
94 - if (isUpdate.value == 1) {  
95 - handleCancel();  
96 - isShowOkBtnFalse.value = true;  
97 - current.value = 0;  
98 - isEdit.value = false;  
99 - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false);  
100 - } else if (isUpdate.value == 2) {  
101 - isEdit.value = true;  
102 - handleCancel();  
103 - isShowOkBtnFalse.value = true;  
104 - current.value = 0;  
105 - postEditId.value = data.record.id;  
106 - postDefault.value = data.record.default;  
107 - createTime.value = data.record.createTime;  
108 - editTransportType.value = data.record.transportType;  
109 - editData.value = await deviceConfigGetDetail(postEditId.value);  
110 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
111 - name: editData.value.name,  
112 - defaultRuleChainId: editData.value.defaultRuleChainId,  
113 - defaultQueueName: editData.value.defaultQueueName,  
114 - description: editData.value.description,  
115 - image: editData.value.image,  
116 - });  
117 - if (editData.value.default) {  
118 - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true);  
119 - } else {  
120 - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false);  
121 - }  
122 - noEditObj = {  
123 - name: editData.value?.name,  
124 - createTime: createTime.value,  
125 - transportType: editTransportType.value,  
126 - type: editData.value?.type,  
127 - profileData: editData.value?.profileData,  
128 - defaultQueueName: editData.value.defaultQueueName,  
129 - id: editData.value.id,  
130 - defaultRuleChainId: editData.value.defaultRuleChainId,  
131 - tenantId: editData.value.tenantId,  
132 - image: editData.value.image,  
133 - description: editData.value.description,  
134 - default: editData.value.default,  
135 - };  
136 - } else if (isUpdate.value == 3) {  
137 - handleCancel();  
138 - isShowOkBtnFalse.value = false;  
139 - current.value = 0;  
140 - postEditId.value = data.record.id;  
141 - createTime.value = data.record.createTime;  
142 - editData.value = await deviceConfigGetDetail(postEditId.value);  
143 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
144 - name: editData.value.name,  
145 - defaultRuleChainId: editData.value.defaultRuleChainId,  
146 - defaultQueueName: editData.value.defaultQueueName,  
147 - description: editData.value.description,  
148 - image: editData.value.image,  
149 - });  
150 - }  
151 - });  
152 - function handleStepPrev() {  
153 - current.value--;  
154 - if (isUpdate.value == 2) {  
155 - isEdit.value = true;  
156 - noEditObj = {  
157 - id: editData.value.id,  
158 - name: editData.value?.name,  
159 - createTime: createTime.value,  
160 - transportType: editTransportType.value,  
161 - type: editData.value?.type,  
162 - profileData: editData.value?.profileData,  
163 - defaultQueueName: editData.value.defaultQueueName,  
164 - image: editData.value.image,  
165 - defaultRuleChainId: editData.value.defaultRuleChainId,  
166 - description: editData.value.description,  
167 - tenantId: editData.value.tenantId,  
168 - default: editData.value.default,  
169 - };  
170 - nextTick(async () => {  
171 - let getPic = null;  
172 - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();  
173 - getPic = getStep1Obj.icon;  
174 - getStepOneData = {  
175 - ...getStep1Obj.key,  
176 - ...{ image: getPic },  
177 - };  
178 - Object.assign(noEditObj, getStepOneData);  
179 - });  
180 - }  
181 - }  
182 - //第一步  
183 - function handleStepNext1(v, v1) {  
184 - isNextStatus.value = true;  
185 - if (isNextStatus.value) {  
186 - getStepOneData = {  
187 - ...v,  
188 - ...{ image: v1 },  
189 - };  
190 - }  
191 - current.value++;  
192 - if (isUpdate.value == 2) {  
193 - isEdit.value = false;  
194 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
195 - } else if (isUpdate.value == 3) {  
196 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
197 - }  
198 - }  
199 - const handleSubmit = async () => {  
200 - let getPic = null;  
201 - getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();  
202 - profileDataObj.profileData = getStepTwoData;  
203 - transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;  
204 - delete profileDataObj?.profileData?.transportConfiguration?.transportType;  
205 - //没有点击下一步  
206 - if (!isNextStatus.value) {  
207 - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();  
208 - getPic = getStep1Obj.icon;  
209 - getStepOneData = {  
210 - ...getStep1Obj.key,  
211 - ...{ image: getPic },  
212 - };  
213 - Object.assign(noEditObj, getStepOneData);  
214 - }  
215 - const id = isUpdate.value == 1 ? '' : postEditId.value;  
216 - const postDefaultVal =  
217 - isUpdate.value == 1 ? { default: false } : { default: postDefault.value };  
218 - const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };  
219 -  
220 - if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {  
221 - profileDataObj.profileData = null;  
222 - }  
223 - postDeviceConfogData = {  
224 - ...getStepOneData,  
225 - ...profileDataObj,  
226 - ...transportTypeObj,  
227 - id,  
228 - ...postDefaultVal,  
229 - ...createTimePost,  
230 - };  
231 - if (isUpdate.value == 1) {  
232 - delete postDeviceConfogData.id;  
233 - }  
234 - let isMappingsKey = ref(false);  
235 - let isMappingValue = ref(false);  
236 - let isQueryings = ref(false);  
237 - let isOIDRepet = ref(false);  
238 - postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(  
239 - (f: any) => {  
240 - if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {  
241 - if (f.queryingFrequencyMs == null) {  
242 - isQueryings.value = true;  
243 - return createMessage.error('请填写查询频率');  
244 - } else {  
245 - isQueryings.value = false;  
246 - }  
247 - }  
248 - if (f.mappings.length == 0) {  
249 - isMappingsKey.value = true;  
250 - isMappingValue.value = true;  
251 - } else {  
252 - f.mappings.forEach((f1) => {  
253 - const findNoneKey = Object.keys(f1).includes('');  
254 - if (findNoneKey) {  
255 - isMappingsKey.value = true;  
256 - }  
257 - });  
258 - f.mappings.forEach((f2) => {  
259 - const findNoneVal = Object.values(f2).includes('');  
260 - if (findNoneVal) {  
261 - isMappingValue.value = true;  
262 - }  
263 - });  
264 - //新增OID不能重复=====同一层级的OID不能重复  
265 - f.mappings.forEach((item, _) => {  
266 - if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {  
267 - isOIDRepet.value = true;  
268 - }  
269 - });  
270 - }  
271 - }  
272 - );  
273 - if (isQueryings.value) return createMessage.error('请填写查询频率');  
274 - if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');  
275 - if (isMappingValue.value) return createMessage.error('请填写Date key和OID');  
276 - if (isOIDRepet.value) return createMessage.error('OID不能重复');  
277 - deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)  
278 - .then((res) => {  
279 - if (!res) return;  
280 - createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');  
281 - closeModal();  
282 - emit('success');  
283 - isNextStatus.value = false;  
284 - })  
285 - .catch((e) => {  
286 - // createMessage.error(e);  
287 - });  
288 - };  
289 - const handleCancel = () => {  
290 - nextTick(() => {  
291 - proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();  
292 - proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();  
293 - });  
294 - };  
295 - function handleRedo() {  
296 - current.value = 0; 41 + const emits = defineEmits(['success', 'register']);
  42 + const isEditId = ref('');
  43 + const isEditCreatTime = ref('');
  44 + const { createMessage } = useMessage();
  45 + const isViewDetail = ref(false);
  46 + const isUpdate = ref(false);
  47 + const current = ref(0);
  48 + const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
  49 + const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
  50 + const postSubmitFormData: any = reactive({
  51 + deviceConfData: {},
  52 + });
  53 + const transportConfData: any = reactive({
  54 + profileData: {},
  55 + });
  56 + const transportTypeStr = ref('');
  57 + const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  58 + setModalProps({ confirmLoading: false });
  59 + current.value = 0;
  60 + isUpdate.value = data.isUpdate;
  61 + isViewDetail.value = data.isView;
  62 + const res = data.record !== undefined ? await deviceConfigGetDetail(data.record.id) : {};
  63 + isEditId.value = data.record !== undefined ? data.record.id : null;
  64 + isEditCreatTime.value = data.record !== undefined ? data.record.createTime : null;
  65 + if (!unref(isViewDetail)) {
  66 + const title = !unref(isUpdate) ? '编辑设备配置' : '新增设备配置';
  67 + setModalProps({ title, showOkBtn: true, showCancelBtn: true });
  68 + if (!unref(isUpdate)) {
  69 + await setDeviceConfEditFormData(res);
  70 + await setTransConfEditFormData(res);
  71 + handleStepNext(false, res);
297 } 72 }
298 - return {  
299 - isShowOkBtnFalse,  
300 - DeviceProfileStep2Ref,  
301 - DeviceProfileStep1Ref,  
302 - editData,  
303 - handleSubmit,  
304 - handleCancel,  
305 - register,  
306 - getTitle,  
307 - getViewTitle,  
308 - current,  
309 - handleStepPrev,  
310 - handleStepNext1,  
311 - handleRedo,  
312 - };  
313 - }, 73 + } else {
  74 + setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看设备配置' });
  75 + await setDeviceConfEditFormData(res);
  76 + await setTransConfEditFormData(res);
  77 + handleStepNext(false, res);
  78 + }
314 }); 79 });
  80 + const handleStepNext = (e, data) => {
  81 + if (e) {
  82 + current.value++;
  83 + } else {
  84 + setTransConfEditFormData(data);
  85 + }
  86 + };
  87 + const handleStepPrev = () => {
  88 + current.value--;
  89 + };
  90 +
  91 + const setDeviceConfEditFormData = async (res) => {
  92 + await DevConStRef.value?.setFormData(res);
  93 + };
  94 + const setTransConfEditFormData = async (res) => {
  95 + await TransConStRef.value?.setFormData(res);
  96 + };
  97 +
  98 + const getDeviceConfFormData = async () => {
  99 + postSubmitFormData.deviceConfData = await DevConStRef.value?.getFormData();
  100 + };
  101 + const getTransConfData = async () => {
  102 + transportConfData.profileData = await TransConStRef.value?.getFormData();
  103 + transportTypeStr.value = transportConfData.profileData.transportConfiguration.type;
  104 + Reflect.deleteProperty(transportConfData.profileData?.transportConfiguration, 'transportType');
  105 + };
  106 +
  107 + const handleSubmit = async () => {
  108 + await getDeviceConfFormData();
  109 + await getTransConfData();
  110 + const isEmptyObj = isEmpty(transportConfData.profileData.transportConfiguration);
  111 + await deviceConfigAddOrEdit({
  112 + ...postSubmitFormData.deviceConfData,
  113 + ...{ transportType: !isEmptyObj ? transportTypeStr.value : 'DEFAULT' },
  114 + ...{ profileData: !isEmptyObj ? transportConfData.profileData : null },
  115 + ...{ id: isUpdate.value ? null : isEditId.value },
  116 + ...{ createTime: isUpdate.value ? null : isEditCreatTime.value },
  117 + });
  118 + createMessage.success(isUpdate.value ? `新增成功` : `编辑成功`);
  119 + handleCancel();
  120 + emits('success');
  121 + };
  122 +
  123 + const handleCancel = () => {
  124 + closeModal();
  125 + DevConStRef.value?.resetFormData();
  126 + TransConStRef.value?.resetFormData();
  127 + };
315 </script> 128 </script>
  129 +
  130 +<style lang="less" scope>
  131 + :deep(.ant-modal-content) {
  132 + height: 700px !important;
  133 + }
  134 +</style>
@@ -43,6 +43,34 @@ export const columns: BasicColumn[] = [ @@ -43,6 +43,34 @@ export const columns: BasicColumn[] = [
43 width: 120, 43 width: 120,
44 }, 44 },
45 ]; 45 ];
  46 +export const steps = [
  47 + {
  48 + title: '设备配置',
  49 + content: 'First-content',
  50 + },
  51 + {
  52 + title: '传输配置',
  53 + content: 'Second-content',
  54 + },
  55 +];
  56 +
  57 +export const defaultObj = {
  58 + headers: {
  59 + normalizedNames: {},
  60 + lazyUpdate: null,
  61 + },
  62 + params: {
  63 + updates: null,
  64 + cloneFrom: null,
  65 + encoder: {},
  66 + map: null,
  67 + interceptorConfig: {
  68 + ignoreLoading: false,
  69 + ignoreErrors: false,
  70 + resendRequest: false,
  71 + },
  72 + },
  73 +};
46 74
47 export const searchFormSchema: FormSchema[] = [ 75 export const searchFormSchema: FormSchema[] = [
48 { 76 {
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 <BasicTable 3 <BasicTable
4 class="devide-profiles" 4 class="devide-profiles"
5 @register="registerTable" 5 @register="registerTable"
6 - @selection-change="useSelectionChange"  
7 :rowSelection="{ type: 'checkbox' }" 6 :rowSelection="{ type: 'checkbox' }"
8 :clickToRowSelect="false" 7 :clickToRowSelect="false"
9 > 8 >
@@ -96,10 +95,10 @@ @@ -96,10 +95,10 @@
96 /> 95 />
97 </div> 96 </div>
98 </template> 97 </template>
99 -<script lang="ts">  
100 - import { defineComponent, ref, nextTick, onUnmounted } from 'vue'; 98 +<script lang="ts" setup>
  99 + import { ref, nextTick, onUnmounted } from 'vue';
101 import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table'; 100 import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
102 - import { columns, searchFormSchema } from './device.profile.data'; 101 + import { columns, searchFormSchema, defaultObj } from './device.profile.data';
103 import { useMessage } from '/@/hooks/web/useMessage'; 102 import { useMessage } from '/@/hooks/web/useMessage';
104 import { 103 import {
105 deviceConfigGetQuery, 104 deviceConfigGetQuery,
@@ -114,285 +113,200 @@ @@ -114,285 +113,200 @@
114 import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; 113 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
115 import { Popconfirm } from 'ant-design-vue'; 114 import { Popconfirm } from 'ant-design-vue';
116 115
117 - export default defineComponent({  
118 - name: 'DeviceProfileManagement',  
119 - components: {  
120 - BasicTable,  
121 - DeviceProfileModal,  
122 - TableAction,  
123 - ImpExcel,  
124 - TableImg,  
125 - Authority,  
126 - ExpExcelModal,  
127 - Popconfirm, 116 + const exportData: any = ref([]);
  117 + const expExcelModalRef: any = ref(null);
  118 + const getPathUrl = ref('');
  119 + const getPathUrlName = ref('');
  120 + const disabled = ref(true);
  121 + const onCloseVal = ref(0);
  122 + const immediateStatus = ref(false);
  123 + const { createMessage } = useMessage();
  124 + const [registerModal, { openModal }] = useModal();
  125 + const [registerExportModal, { openModal: openModalExcel }] = useModal();
  126 + const [registerTable, { setProps, reload, setTableData, getForm }] = useTable({
  127 + title: '设备配置列表',
  128 + clickToRowSelect: false,
  129 + api: deviceConfigGetQuery,
  130 + immediate: immediateStatus.value,
  131 + columns,
  132 + formConfig: {
  133 + labelWidth: 120,
  134 + schemas: searchFormSchema,
128 }, 135 },
129 - setup() {  
130 - const exportData: any = ref([]);  
131 - const expExcelModalRef = ref(null);  
132 - let selectedRowKeys: any = [];  
133 - const deviceDetailRef = ref(null);  
134 - const getPathUrl = ref('');  
135 - const getPathUrlName = ref('');  
136 - const disabled = ref(true);  
137 - const onCloseVal = ref(0);  
138 - const immediateStatus = ref(false);  
139 - const { createMessage } = useMessage();  
140 - const [registerModal, { openModal }] = useModal();  
141 - const [registerExportModal, { openModal: openModalExcel }] = useModal();  
142 - const [  
143 - registerTable,  
144 - { setProps, reload, getSelectRows, setTableData, getForm, getSelectRowKeys },  
145 - ] = useTable({  
146 - title: '设备配置列表',  
147 - clickToRowSelect: false,  
148 - api: deviceConfigGetQuery,  
149 - immediate: immediateStatus.value,  
150 - columns,  
151 - formConfig: {  
152 - labelWidth: 120,  
153 - schemas: searchFormSchema,  
154 - },  
155 - rowKey: 'id',  
156 - useSearchForm: true,  
157 - showTableSetting: true,  
158 - bordered: true,  
159 - showIndexColumn: false,  
160 - actionColumn: {  
161 - width: 240,  
162 - title: '操作',  
163 - dataIndex: 'action',  
164 - slots: { customRender: 'action' },  
165 - fixed: 'right',  
166 - },  
167 - });  
168 - const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(  
169 - deviceConfigDelete,  
170 - handleSuccess,  
171 - setProps  
172 - );  
173 - selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {  
174 - // Demo:status为1的选择框禁用  
175 - if (record.default === true) {  
176 - return { disabled: true };  
177 - } else if (record.name == 'default') {  
178 - return { disabled: true };  
179 - } else {  
180 - return { disabled: false };  
181 - }  
182 - };  
183 - nextTick(() => {  
184 - setProps(selectionOptions);  
185 - });  
186 - /**  
187 - *@param url,name  
188 - **/  
189 - function getParam(url, name) {  
190 - try {  
191 - let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');  
192 - let r = url.split('?')[1].match(reg);  
193 - if (r != null) {  
194 - return r[2];  
195 - }  
196 - return ''; //如果此处只写return;则返回的是undefined  
197 - } catch (e) {  
198 - return ''; //如果此处只写return;则返回的是undefined  
199 - } 136 + rowKey: 'id',
  137 + useSearchForm: true,
  138 + showTableSetting: true,
  139 + bordered: true,
  140 + showIndexColumn: false,
  141 + actionColumn: {
  142 + width: 240,
  143 + title: '操作',
  144 + dataIndex: 'action',
  145 + slots: { customRender: 'action' },
  146 + fixed: 'right',
  147 + },
  148 + });
  149 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  150 + deviceConfigDelete,
  151 + handleSuccess,
  152 + setProps
  153 + );
  154 + selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
  155 + // Demo:status为1的选择框禁用
  156 + if (record.default === true) {
  157 + return { disabled: true };
  158 + } else if (record.name == 'default') {
  159 + return { disabled: true };
  160 + } else {
  161 + return { disabled: false };
  162 + }
  163 + };
  164 + nextTick(() => {
  165 + setProps(selectionOptions);
  166 + });
  167 + /**
  168 + *@param url,name
  169 + **/
  170 + function getParam(url, name) {
  171 + try {
  172 + let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  173 + let r = url.split('?')[1].match(reg);
  174 + if (r != null) {
  175 + return r[2];
200 } 176 }
201 - getPathUrl.value = window.location.href;  
202 - const name = 'name';  
203 - const getName = getParam(getPathUrl.value, name);  
204 - getPathUrlName.value = decodeURIComponent(getName); 177 + return ''; //如果此处只写return;则返回的是undefined
  178 + } catch (e) {
  179 + return ''; //如果此处只写return;则返回的是undefined
  180 + }
  181 + }
  182 + getPathUrl.value = window.location.href;
  183 + const name = 'name';
  184 + const getName = getParam(getPathUrl.value, name);
  185 + getPathUrlName.value = decodeURIComponent(getName);
205 186
206 - const setRowClassName = async () => {  
207 - if (getPathUrlName.value !== '') {  
208 - const { items } = await deviceConfigGetQuery({  
209 - page: 1,  
210 - pageSize: 10,  
211 - name: getPathUrlName.value,  
212 - });  
213 - nextTick(() => {  
214 - setTableData(items);  
215 - const { setFieldsValue, resetFields } = getForm();  
216 - setFieldsValue({  
217 - name: getPathUrlName.value,  
218 - });  
219 - if (onCloseVal.value == 1) {  
220 - resetFields();  
221 - }  
222 - });  
223 - } else {  
224 - setTimeout(() => {  
225 - reload();  
226 - }, 80);  
227 - }  
228 - };  
229 - setRowClassName();  
230 - onUnmounted(() => {  
231 - getPathUrlName.value = '';  
232 - onCloseVal.value = 1; 187 + const setRowClassName = async () => {
  188 + if (getPathUrlName.value !== '') {
  189 + const { items } = await deviceConfigGetQuery({
  190 + page: 1,
  191 + pageSize: 10,
  192 + name: getPathUrlName.value,
233 }); 193 });
234 - const tableListRef = ref<  
235 - {  
236 - title: string;  
237 - columns?: any[];  
238 - dataSource?: any[];  
239 - }[]  
240 - >([]);  
241 -  
242 - function loadDataSuccess(excelDataList: ExcelData[]) {  
243 - tableListRef.value = [];  
244 - console.log(excelDataList);  
245 - for (const excelData of excelDataList) {  
246 - const {  
247 - header,  
248 - results,  
249 - meta: { sheetName },  
250 - } = excelData;  
251 - const columns: BasicColumn[] = [];  
252 - for (const title of header) {  
253 - columns.push({ title, dataIndex: title });  
254 - }  
255 - tableListRef.value.push({ title: sheetName, dataSource: results, columns });  
256 - }  
257 - }  
258 -  
259 - function handleCreate() {  
260 - setTimeout(() => {  
261 - openModal(true, {  
262 - isUpdate: 1,  
263 - });  
264 - }, 10);  
265 - }  
266 -  
267 - function handleEdit(record: Recordable) {  
268 - setTimeout(() => {  
269 - openModal(true, {  
270 - record,  
271 - isUpdate: 2,  
272 - isLostFocuxStatus: true,  
273 - });  
274 - }, 10);  
275 - }  
276 - async function handleDetailView(record: Recordable) {  
277 - setTimeout(() => {  
278 - openModal(true, {  
279 - record,  
280 - isUpdate: 3,  
281 - isLostFocuxStatus: true,  
282 - });  
283 - }, 10);  
284 - }  
285 - const useSelectionChange = () => {  
286 - selectedRowKeys = getSelectRowKeys();  
287 - if (selectedRowKeys.length > 0) {  
288 - disabled.value = false;  
289 - }  
290 - const isJudge = getSelectRows().map((m) => m.default);  
291 - if (isJudge.includes(true)) {  
292 - disabled.value = true;  
293 - } else {  
294 - disabled.value = false;  
295 - }  
296 - if (isJudge.length === 0) {  
297 - disabled.value = true; 194 + nextTick(() => {
  195 + setTableData(items);
  196 + const { setFieldsValue, resetFields } = getForm();
  197 + setFieldsValue({
  198 + name: getPathUrlName.value,
  199 + });
  200 + if (onCloseVal.value == 1) {
  201 + resetFields();
298 } 202 }
299 - }; 203 + });
  204 + } else {
  205 + setTimeout(() => {
  206 + reload();
  207 + }, 80);
  208 + }
  209 + };
  210 + setRowClassName();
  211 + onUnmounted(() => {
  212 + getPathUrlName.value = '';
  213 + onCloseVal.value = 1;
  214 + });
  215 + const tableListRef = ref<
  216 + {
  217 + title: string;
  218 + columns?: any[];
  219 + dataSource?: any[];
  220 + }[]
  221 + >([]);
300 222
301 - function handleDelete(record: Recordable) {  
302 - let ids = [record.id];  
303 - deviceConfigDelete(ids).then(() => {  
304 - createMessage.success('删除设备配置成功');  
305 - handleSuccess();  
306 - }); 223 + function loadDataSuccess(excelDataList: ExcelData[]) {
  224 + tableListRef.value = [];
  225 + console.log(excelDataList);
  226 + for (const excelData of excelDataList) {
  227 + const {
  228 + header,
  229 + results,
  230 + meta: { sheetName },
  231 + } = excelData;
  232 + const columns: BasicColumn[] = [];
  233 + for (const title of header) {
  234 + columns.push({ title, dataIndex: title });
307 } 235 }
  236 + tableListRef.value.push({ title: sheetName, dataSource: results, columns });
  237 + }
  238 + }
  239 + //新增
  240 + function handleCreate() {
  241 + openModal(true, {
  242 + isUpdate: true,
  243 + isView: false,
  244 + });
  245 + }
  246 + //编辑
  247 + function handleEdit(record: Recordable) {
  248 + openModal(true, {
  249 + record,
  250 + isUpdate: false,
  251 + isView: false,
  252 + });
  253 + }
  254 + //详情
  255 + function handleDetailView(record: Recordable) {
  256 + openModal(true, {
  257 + record,
  258 + isUpdate: false,
  259 + isView: true,
  260 + });
  261 + }
308 262
309 - function defaultHeader({ filename, bookType }: ExportModalResult) {  
310 - // 默认Object.keys(data[0])作为header  
311 - const data = exportData.value;  
312 - jsonToSheetXlsx({  
313 - data,  
314 - filename,  
315 - write2excelOpts: {  
316 - bookType,  
317 - },  
318 - });  
319 - }  
320 - //导出  
321 - const handleExport = (record: Recordable) => {  
322 - exportData.value = [];  
323 - exportData.value.push({  
324 - createTime: record.createTime,  
325 - description: record.description,  
326 - name: record.name,  
327 - });  
328 - nextTick(() => {  
329 - openModalExcel();  
330 - expExcelModalRef.value?.clearFieldFunc();  
331 - });  
332 - };  
333 - //导入  
334 - function handleImport() {  
335 - console.log('record');  
336 - }  
337 - function handleSuccess() {  
338 - reload();  
339 - } 263 + function defaultHeader({ filename, bookType }: ExportModalResult) {
  264 + // 默认Object.keys(data[0])作为header
  265 + const data = exportData.value;
  266 + jsonToSheetXlsx({
  267 + data,
  268 + filename,
  269 + write2excelOpts: {
  270 + bookType,
  271 + },
  272 + });
  273 + }
  274 + //导出
  275 + const handleExport = (record: Recordable) => {
  276 + exportData.value = [];
  277 + exportData.value.push({
  278 + createTime: record.createTime,
  279 + description: record.description,
  280 + name: record.name,
  281 + });
  282 + nextTick(() => {
  283 + openModalExcel();
  284 + expExcelModalRef.value?.clearFieldFunc();
  285 + });
  286 + };
  287 + //导入
  288 + function handleImport() {
  289 + console.log('record');
  290 + }
  291 + function handleSuccess() {
  292 + reload();
  293 + }
340 294
341 - const handleSetDefault = async (record: Recordable) => {  
342 - let id = record.id;  
343 - const obj = {  
344 - headers: {  
345 - normalizedNames: {},  
346 - lazyUpdate: null,  
347 - },  
348 - params: {  
349 - updates: null,  
350 - cloneFrom: null,  
351 - encoder: {},  
352 - map: null,  
353 - interceptorConfig: {  
354 - ignoreLoading: false,  
355 - ignoreErrors: false,  
356 - resendRequest: false,  
357 - },  
358 - },  
359 - };  
360 - const data = await setDeviceProfileIsDefaultApi(id, 'default', obj);  
361 - if (!data) return createMessage.error('设置该设备配置为默认失败');  
362 - createMessage.success('设置该设备配置为默认成功');  
363 - reload();  
364 - disabled.value = true;  
365 - };  
366 - return {  
367 - handleSetDefault,  
368 - disabled,  
369 - deviceDetailRef,  
370 - registerExportModal,  
371 - defaultHeader,  
372 - useSelectionChange,  
373 - tableListRef,  
374 - loadDataSuccess,  
375 - handleImport,  
376 - handleExport,  
377 - handleDetailView,  
378 - registerTable,  
379 - handleCreate,  
380 - handleEdit,  
381 - handleDelete,  
382 - handleSuccess,  
383 - registerModal,  
384 - hasBatchDelete,  
385 - handleDeleteOrBatchDelete,  
386 - expExcelModalRef,  
387 - };  
388 - },  
389 - }); 295 + const handleSetDefault = async (record: Recordable) => {
  296 + let id = record.id;
  297 + const data = await setDeviceProfileIsDefaultApi(id, 'default', defaultObj);
  298 + if (!data) return createMessage.error('设置该设备配置为默认失败');
  299 + createMessage.success('设置该设备配置为默认成功');
  300 + reload();
  301 + disabled.value = true;
  302 + };
390 </script> 303 </script>
391 304
392 <style lang="css"> 305 <style lang="css">
393 .devide-profiles .rowcolor { 306 .devide-profiles .rowcolor {
394 color: red; 307 color: red;
395 } 308 }
  309 +
396 .devide-profiles .rowcolor2 { 310 .devide-profiles .rowcolor2 {
397 background: #a2c3e6; 311 background: #a2c3e6;
398 } 312 }
src/views/device/profiles/step/DeviceConfigurationStep.vue renamed from src/views/device/profiles/step/DeviceProfileStep1.vue
@@ -4,9 +4,21 @@ @@ -4,9 +4,21 @@
4 <div> 4 <div>
5 <BasicForm @register="register"> 5 <BasicForm @register="register">
6 <template #imageSelect> 6 <template #imageSelect>
7 - <Upload style="width: 20vw" name="avatar" list-type="picture-card" class="avatar-uploader"  
8 - :show-upload-list="false" :customRequest="customUploadqrcodePic" :before-upload="beforeUploadqrcodePic">  
9 - <img v-if="peresonalPic" :src="peresonalPic" alt="avatar" style="width: 6.25rem; height: 6.25rem" /> 7 + <Upload
  8 + style="width: 20vw"
  9 + name="avatar"
  10 + list-type="picture-card"
  11 + class="avatar-uploader"
  12 + :show-upload-list="false"
  13 + :customRequest="customUploadqrcodePic"
  14 + :before-upload="beforeUploadqrcodePic"
  15 + >
  16 + <img
  17 + v-if="deviceConfigPic"
  18 + :src="deviceConfigPic"
  19 + alt=""
  20 + style="width: 6.25rem; height: 6.25rem"
  21 + />
10 <div v-else> 22 <div v-else>
11 <LoadingOutlined v-if="loading" /> 23 <LoadingOutlined v-if="loading" />
12 <PlusOutlined v-else /> 24 <PlusOutlined v-else />
@@ -19,162 +31,95 @@ @@ -19,162 +31,95 @@
19 </div> 31 </div>
20 </div> 32 </div>
21 </template> 33 </template>
22 -<script lang="ts">  
23 -import { defineComponent, ref } from 'vue';  
24 -import { BasicForm, useForm } from '/@/components/Form';  
25 -import { step1Schemas } from './data';  
26 -import { Select, Input, Divider } from 'ant-design-vue';  
27 -import { uploadApi } from '/@/api/personal/index';  
28 -import { Upload } from 'ant-design-vue';  
29 -import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';  
30 -import { useMessage } from '/@/hooks/web/useMessage';  
31 -import type { FileItem } from '/@/components/Upload/src/typing'; 34 +<script lang="ts" setup>
  35 + import { ref } from 'vue';
  36 + import { BasicForm, useForm } from '/@/components/Form';
  37 + import { step1Schemas } from './data';
  38 + import { uploadApi } from '/@/api/personal/index';
  39 + import { Upload } from 'ant-design-vue';
  40 + import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  41 + import { useMessage } from '/@/hooks/web/useMessage';
  42 + import type { FileItem } from '/@/components/Upload/src/typing';
32 43
33 -export default defineComponent({  
34 - components: {  
35 - BasicForm,  
36 - [Select.name]: Select,  
37 - [Input.name]: Input,  
38 - [Input.Group.name]: Input.Group,  
39 - [Divider.name]: Divider,  
40 - Upload,  
41 - PlusOutlined,  
42 - LoadingOutlined,  
43 - },  
44 - emits: ['next', 'resetFunc', 'register'],  
45 - setup(_, { emit }) {  
46 - const loading = ref(false); 44 + const emits = defineEmits(['next']);
  45 + const loading = ref(false);
  46 + const { createMessage } = useMessage();
  47 + const deviceConfigPic = ref('');
47 48
48 - const { createMessage } = useMessage();  
49 - const peresonalPic = ref('');  
50 -  
51 - const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({  
52 - labelWidth: 100,  
53 - schemas: step1Schemas,  
54 - actionColOptions: {  
55 - span: 14,  
56 - },  
57 - showResetButton: false,  
58 - submitButtonOptions: {  
59 - text: '下一步', 49 + const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
  50 + labelWidth: 100,
  51 + schemas: step1Schemas,
  52 + actionColOptions: {
  53 + span: 14,
  54 + },
  55 + showResetButton: false,
  56 + submitButtonOptions: {
  57 + text: '下一步',
  58 + },
  59 + submitFunc: customSubmitFunc,
  60 + });
  61 + const editOrAddNameStatus = (nameStatus) =>
  62 + updateSchema({
  63 + field: 'name',
  64 + componentProps: {
  65 + disabled: nameStatus,
60 }, 66 },
61 - submitFunc: customSubmitFunc,  
62 }); 67 });
63 - const editOrAddNameStatus = (nameStatus) => updateSchema({  
64 - field: 'name', componentProps: {  
65 - disabled: nameStatus  
66 - }  
67 - })  
68 - //回显数据  
69 - const setStepOneFieldsValueFunc = (v) => {  
70 - setFieldsValue(v);  
71 - peresonalPic.value = v.image;  
72 - };  
73 - const customUploadqrcodePic = async ({ file }) => {  
74 - if (beforeUploadqrcodePic(file)) {  
75 - peresonalPic.value = '';  
76 - loading.value = true;  
77 - const formData = new FormData();  
78 - formData.append('file', file);  
79 - const response = await uploadApi(formData);  
80 - if (response.fileStaticUri) {  
81 - peresonalPic.value = response.fileStaticUri;  
82 - loading.value = false;  
83 - } 68 + const customUploadqrcodePic = async ({ file }) => {
  69 + if (beforeUploadqrcodePic(file)) {
  70 + deviceConfigPic.value = '';
  71 + loading.value = true;
  72 + const formData = new FormData();
  73 + formData.append('file', file);
  74 + const response = await uploadApi(formData);
  75 + if (response.fileStaticUri) {
  76 + deviceConfigPic.value = response.fileStaticUri;
  77 + loading.value = false;
84 } 78 }
85 - };  
86 - const beforeUploadqrcodePic = (file: FileItem) => {  
87 - const isJpgOrPng =  
88 - file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';  
89 - if (!isJpgOrPng) {  
90 - createMessage.error('只能上传图片文件!');  
91 - }  
92 - const isLt2M = (file.size as number) / 1024 / 1024 < 5;  
93 - if (!isLt2M) {  
94 - createMessage.error('图片大小不能超过5MB!');  
95 - }  
96 - return isJpgOrPng && isLt2M;  
97 - };  
98 -  
99 - async function customSubmitFunc() {  
100 - const values = await validate();  
101 - emit('next', values, peresonalPic.value);  
102 } 79 }
103 - //清空数据  
104 - const customResetStepOneFunc = () => {  
105 - resetFields();  
106 - peresonalPic.value = '';  
107 - };  
108 - const getStep1Func = async () => {  
109 - const valueStep1 = await validate();  
110 - const pic = peresonalPic.value;  
111 - return {  
112 - key: valueStep1,  
113 - icon: pic,  
114 - };  
115 - };  
116 - return {  
117 - register,  
118 - setStepOneFieldsValueFunc,  
119 - customResetStepOneFunc,  
120 - uploadApi,  
121 - peresonalPic,  
122 - beforeUploadqrcodePic,  
123 - customUploadqrcodePic,  
124 - getStep1Func,  
125 - loading,  
126 - editOrAddNameStatus  
127 - };  
128 - },  
129 -});  
130 -</script>  
131 -<style lang="less" scoped>  
132 -.step1 {  
133 - &-form {  
134 - width: 500px;  
135 - margin: 0 auto;  
136 - }  
137 -  
138 - h3 {  
139 - margin: 0 0 12px;  
140 - font-size: 16px;  
141 - line-height: 32px;  
142 - color: @text-color;  
143 - }  
144 -  
145 - h4 {  
146 - margin: 0 0 4px;  
147 - font-size: 14px;  
148 - line-height: 22px;  
149 - color: @text-color;  
150 - }  
151 -  
152 - p {  
153 - color: @text-color;  
154 - }  
155 -  
156 - .device-icon-style {  
157 - :deep .ant-upload-select-picture-card {  
158 - display: inherit;  
159 - float: none;  
160 - width: 4.9vw;  
161 - height: 9.5vh;  
162 - margin-right: 8px;  
163 - text-align: center;  
164 - vertical-align: top;  
165 - background-color: #fafafa;  
166 - border: 1px dashed #d9d9d9;  
167 - cursor: pointer;  
168 - transition: border-color 0.3s ease; 80 + };
  81 + const beforeUploadqrcodePic = (file: FileItem) => {
  82 + const isJpgOrPng =
  83 + file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
  84 + if (!isJpgOrPng) {
  85 + createMessage.error('只能上传图片文件!');
169 } 86 }
  87 + const isLt2M = (file.size as number) / 1024 / 1024 < 5;
  88 + if (!isLt2M) {
  89 + createMessage.error('图片大小不能超过5MB!');
  90 + }
  91 + return isJpgOrPng && isLt2M;
  92 + };
  93 + //回显数据
  94 + const setFormData = (v) => {
  95 + setFieldsValue(v);
  96 + deviceConfigPic.value = v.image;
  97 + };
  98 + async function customSubmitFunc() {
  99 + const values = await validate();
  100 + if (!values) return;
  101 + emits('next', true, null);
170 } 102 }
171 -}  
172 -  
173 -.pay-select {  
174 - width: 20%;  
175 -} 103 + //获取数据
  104 + async function getFormData() {
  105 + const values = await validate();
  106 + if (!values) return;
  107 + Reflect.set(values, 'image', deviceConfigPic.value);
  108 + return values;
  109 + }
  110 + //清空数据
  111 + const resetFormData = () => {
  112 + resetFields();
  113 + deviceConfigPic.value = '';
  114 + };
176 115
177 -.pay-input {  
178 - width: 70%;  
179 -} 116 + defineExpose({
  117 + editOrAddNameStatus,
  118 + setFormData,
  119 + resetFormData,
  120 + getFormData,
  121 + });
  122 +</script>
  123 +<style lang="less" scoped>
  124 + @import url('./common/DeviceConfigurationSetp.less');
180 </style> 125 </style>
src/views/device/profiles/step/TransportConfigurationStep.vue renamed from src/views/device/profiles/step/DeviceProfileStep2.vue
@@ -27,17 +27,7 @@ @@ -27,17 +27,7 @@
27 <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'"> 27 <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
28 <SnmpCpns ref="snmpRef" /> 28 <SnmpCpns ref="snmpRef" />
29 </div> 29 </div>
30 - <div  
31 - style="  
32 - display: flex;  
33 - width: 11vw;  
34 - height: 8vh;  
35 - flex-direction: row;  
36 - justify-content: space-between;  
37 - margin-left: 19vw;  
38 - margin-top: -0.35vh;  
39 - "  
40 - > 30 + <div class="btn-style">
41 <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh"> 31 <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh">
42 <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc" 32 <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
43 >上一步</Button 33 >上一步</Button
@@ -47,137 +37,101 @@ @@ -47,137 +37,101 @@
47 </div> 37 </div>
48 </div> 38 </div>
49 </template> 39 </template>
50 -<script lang="ts">  
51 - import { defineComponent, reactive, ref, getCurrentInstance, onUnmounted, nextTick } from 'vue'; 40 +<script lang="ts" setup>
  41 + import { reactive, ref, onUnmounted, nextTick } from 'vue';
52 import { BasicForm, useForm } from '/@/components/Form'; 42 import { BasicForm, useForm } from '/@/components/Form';
53 import { step2Schemas } from './data'; 43 import { step2Schemas } from './data';
54 - import { Alert, Divider, Descriptions } from 'ant-design-vue';  
55 import { Button } from '/@/components/Button'; 44 import { Button } from '/@/components/Button';
56 - import MqttCpns from '../step/cpns/mqtt/Mqtt.vue';  
57 - import CoapCpns from '../step/cpns/coap/Coap.vue';  
58 - import Lwm2mCpns from '../step/cpns/lwm2m/index.vue';  
59 - import SnmpCpns from '../step/cpns/snmp/index.vue'; 45 + import MqttCpns from './cpns/mqtt/Mqtt.vue';
  46 + import CoapCpns from './cpns/coap/Coap.vue';
  47 + import Lwm2mCpns from './cpns/lwm2m/index.vue';
  48 + import SnmpCpns from './cpns/snmp/index.vue';
60 49
61 - export default defineComponent({  
62 - components: {  
63 - BasicForm,  
64 - [Alert.name]: Alert,  
65 - [Divider.name]: Divider,  
66 - [Descriptions.name]: Descriptions,  
67 - [Descriptions.Item.name]: Descriptions.Item,  
68 - Button,  
69 - MqttCpns,  
70 - CoapCpns,  
71 - Lwm2mCpns,  
72 - SnmpCpns, 50 + const emits = defineEmits(['prev']);
  51 + const mqttRef = ref<InstanceType<typeof MqttCpns>>();
  52 + const coapRef = ref<InstanceType<typeof CoapCpns>>();
  53 + const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
  54 + const snmpRef = ref<InstanceType<typeof SnmpCpns>>();
  55 + const isMqttType = ref('');
  56 + let step2Data = reactive({
  57 + transportConfiguration: {},
  58 + });
  59 + const [register, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
  60 + labelWidth: 80,
  61 + schemas: step2Schemas,
  62 + actionColOptions: {
  63 + span: 14,
73 }, 64 },
74 - emits: ['next', 'prev', 'register'],  
75 - setup(_, { emit }) {  
76 - const { proxy } = getCurrentInstance() as any;  
77 - const mqttRef = ref(null);  
78 - const coapRef = ref(null);  
79 - const lwm2mRef = ref(null);  
80 - const snmpRef = ref(null);  
81 - const isMqttType = ref('');  
82 - let step2Data = reactive({  
83 - transportConfiguration: {},  
84 - });  
85 - const [register, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({  
86 - labelWidth: 80,  
87 - schemas: step2Schemas,  
88 - actionColOptions: {  
89 - span: 14,  
90 - },  
91 - });  
92 - const setStepTwoFieldsValueFunc = (v) => {  
93 - setFieldsValue({  
94 - transportType: v?.profileData?.transportConfiguration?.type,  
95 - });  
96 - isMqttType.value = v?.profileData?.transportConfiguration?.type;  
97 - setTimeout(() => {  
98 - proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);  
99 - proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);  
100 - proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);  
101 - proxy.$refs.snmpRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);  
102 - }, 100);  
103 - }; 65 + });
  66 + const setFormData = (v) => {
  67 + setFieldsValue({
  68 + transportType: v?.profileData?.transportConfiguration?.type,
  69 + });
  70 + isMqttType.value = v?.profileData?.transportConfiguration?.type;
  71 + mqttRef.value?.setFormData(v?.profileData?.transportConfiguration);
  72 + coapRef.value?.setFormData(v?.profileData?.transportConfiguration);
  73 + lwm2mRef.value?.setFormData(v?.profileData?.transportConfiguration);
  74 + snmpRef.value?.setFormData(v?.profileData?.transportConfiguration);
  75 + };
104 76
105 - const customClearStepTwoValueFunc = () => {  
106 - isMqttType.value = '';  
107 - resetFields();  
108 - nextTick(() => {  
109 - proxy.$refs.mqttRef?.resetStepFieldsValueFunc();  
110 - proxy.$refs.coapRef?.resetStepFieldsValueFunc();  
111 - proxy.$refs.lwm2mRef?.resetStepFieldsValueFunc();  
112 - });  
113 - };  
114 - async function customResetFunc() {  
115 - emit('prev');  
116 - }  
117 - nextTick(() => {  
118 - updateSchema({  
119 - field: 'transportType',  
120 - componentProps() {  
121 - return {  
122 - options: [  
123 - { label: '默认', value: 'DEFAULT' },  
124 - { label: 'MQTT', value: 'MQTT' },  
125 - { label: 'CoAP', value: 'COAP' },  
126 - { label: 'LWM2M', value: 'LWM2M' },  
127 - { label: 'SNMP', value: 'SNMP' },  
128 - ],  
129 - onChange(e) {  
130 - isMqttType.value = e;  
131 - },  
132 - }; 77 + const resetFormData = () => {
  78 + isMqttType.value = '';
  79 + resetFields();
  80 + nextTick(() => {
  81 + mqttRef.value?.resetFormData();
  82 + coapRef.value?.resetFormData();
  83 + lwm2mRef.value?.resetFormData();
  84 + snmpRef.value?.resetFormData();
  85 + });
  86 + };
  87 + async function customResetFunc() {
  88 + emits('prev');
  89 + }
  90 + nextTick(() => {
  91 + updateSchema({
  92 + field: 'transportType',
  93 + componentProps() {
  94 + return {
  95 + options: [
  96 + { label: '默认', value: 'DEFAULT' },
  97 + { label: 'MQTT', value: 'MQTT' },
  98 + { label: 'CoAP', value: 'COAP' },
  99 + { label: 'LWM2M', value: 'LWM2M' },
  100 + { label: 'SNMP', value: 'SNMP' },
  101 + ],
  102 + onChange(e) {
  103 + isMqttType.value = e;
133 }, 104 },
134 - });  
135 - });  
136 - onUnmounted(() => {  
137 - isMqttType.value = '';  
138 - });  
139 - const getStep2DataFunc = async () => {  
140 - const val = await validate();  
141 - if (!val) return;  
142 - const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();  
143 - const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();  
144 - const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc();  
145 - const getSnmpVal = await proxy.$refs.snmpRef?.getSnmpForm();  
146 - step2Data.transportConfiguration = {  
147 - ...getMqttVal,  
148 - ...getCoapVal,  
149 - ...getLwm2mVal,  
150 - ...getSnmpVal,  
151 - ...val,  
152 }; 105 };
153 - return step2Data;  
154 - };  
155 - return {  
156 - customResetFunc,  
157 - register,  
158 - setStepTwoFieldsValueFunc,  
159 - customClearStepTwoValueFunc,  
160 - getStep2DataFunc,  
161 - isMqttType,  
162 - mqttRef,  
163 - coapRef,  
164 - lwm2mRef,  
165 - snmpRef,  
166 - };  
167 - }, 106 + },
  107 + });
  108 + });
  109 + onUnmounted(() => {
  110 + isMqttType.value = '';
  111 + });
  112 + const getFormData = async () => {
  113 + const val = await validate();
  114 + if (!val) return;
  115 + const getMqttVal = await mqttRef.value?.getFormData();
  116 + const getCoapVal = await coapRef.value?.getFormData();
  117 + const getLwm2mVal = await lwm2mRef.value?.getFormData();
  118 + const getSnmpVal = await snmpRef.value?.getFormData();
  119 + step2Data.transportConfiguration = {
  120 + ...getMqttVal,
  121 + ...getCoapVal,
  122 + ...getLwm2mVal,
  123 + ...getSnmpVal,
  124 + ...val,
  125 + };
  126 + return step2Data;
  127 + };
  128 +
  129 + defineExpose({
  130 + getFormData,
  131 + resetFormData,
  132 + setFormData,
168 }); 133 });
169 </script> 134 </script>
170 <style lang="less" scoped> 135 <style lang="less" scoped>
171 - .step2-style {  
172 - margin: 0vh 0.6vw;  
173 - border-radius: 4px;  
174 - }  
175 -  
176 - ::-webkit-scrollbar {  
177 - display: none;  
178 - }  
179 - :deep(.ant-btn) {  
180 - color: white;  
181 - background: #377dff;  
182 - } 136 + @import url('./common/TransportConfigurationStep.less');
183 </style> 137 </style>
  1 +.step1 {
  2 + &-form {
  3 + width: 500px;
  4 + margin: 0 auto;
  5 + }
  6 +
  7 + h3 {
  8 + margin: 0 0 12px;
  9 + font-size: 16px;
  10 + line-height: 32px;
  11 + color: @text-color;
  12 + }
  13 +
  14 + h4 {
  15 + margin: 0 0 4px;
  16 + font-size: 14px;
  17 + line-height: 22px;
  18 + color: @text-color;
  19 + }
  20 +
  21 + p {
  22 + color: @text-color;
  23 + }
  24 +
  25 + .device-icon-style {
  26 + :deep .ant-upload-select-picture-card {
  27 + display: inherit;
  28 + float: none;
  29 + width: 4.9vw;
  30 + height: 9.5vh;
  31 + margin-right: 8px;
  32 + text-align: center;
  33 + vertical-align: top;
  34 + background-color: #fafafa;
  35 + border: 1px dashed #d9d9d9;
  36 + cursor: pointer;
  37 + transition: border-color 0.3s ease;
  38 + }
  39 + }
  40 +}
  41 +
  42 +.pay-select {
  43 + width: 20%;
  44 +}
  45 +
  46 +.pay-input {
  47 + width: 70%;
  48 +}
  1 +.step2-style {
  2 + margin: 0 0.6vw;
  3 + border-radius: 4px;
  4 +
  5 + .btn-style {
  6 + display: flex;
  7 + width: 11vw;
  8 + height: 8vh;
  9 + flex-direction: row;
  10 + justify-content: space-between;
  11 + margin-left: 19vw;
  12 + margin-top: -0.35vh;
  13 + }
  14 +}
  15 +
  16 +::-webkit-scrollbar {
  17 + display: none;
  18 +}
  19 +
  20 +:deep(.ant-btn) {
  21 + color: white;
  22 + background: #377dff;
  23 +}
@@ -5,129 +5,87 @@ @@ -5,129 +5,87 @@
5 </div> 5 </div>
6 </div> 6 </div>
7 </template> 7 </template>
8 -<script lang="ts">  
9 - import { defineComponent, reactive } from 'vue'; 8 +<script lang="ts" setup>
  9 + import { reactive } from 'vue';
10 import { BasicForm, useForm } from '/@/components/Form'; 10 import { BasicForm, useForm } from '/@/components/Form';
11 import { 11 import {
12 CoapSchemas, 12 CoapSchemas,
13 - deviceTelemetryProtoSchemaData,  
14 - deviceAttributesProtoSchemaData,  
15 - deviceRpcRequestProtoSchemaData,  
16 - deviceRpcResponseProtoSchemaData, 13 + // deviceTelemetryProtoSchemaData,
  14 + // deviceAttributesProtoSchemaData,
  15 + // deviceRpcRequestProtoSchemaData,
  16 + // deviceRpcResponseProtoSchemaData,
17 } from './Coap'; 17 } from './Coap';
18 - import { Alert, Divider, Descriptions } from 'ant-design-vue';  
19 18
20 - export default defineComponent({  
21 - components: {  
22 - BasicForm,  
23 - [Alert.name]: Alert,  
24 - [Divider.name]: Divider,  
25 - [Descriptions.name]: Descriptions,  
26 - [Descriptions.Item.name]: Descriptions.Item, 19 + const emits = defineEmits(['prev']);
  20 + let coapAllData = reactive({});
  21 + const transportCoapData: any = reactive({
  22 + coapDeviceTypeConfiguration: {
  23 + coapDeviceType: null,
  24 + transportPayloadTypeConfiguration: {
  25 + transportPayloadType: null,
  26 + deviceTelemetryProtoSchema: null,
  27 + deviceAttributesProtoSchema: null,
  28 + deviceRpcRequestProtoSchema: null,
  29 + deviceRpcResponseProtoSchema: null,
  30 + },
27 }, 31 },
  32 + clientSettings: {
  33 + powerMode: null,
  34 + edrxCycle: null,
  35 + pagingTransmissionWindow: null,
  36 + psmActivityTimer: null,
  37 + },
  38 + type: 'COAP',
  39 + });
28 40
29 - emits: ['next', 'prev', 'register'],  
30 - setup(_, { emit }) {  
31 - let coapAllData = reactive({});  
32 - const transportCoapData: any = reactive({  
33 - coapDeviceTypeConfiguration: {  
34 - coapDeviceType: null,  
35 - transportPayloadTypeConfiguration: {  
36 - transportPayloadType: null,  
37 - deviceTelemetryProtoSchema: null,  
38 - deviceAttributesProtoSchema: null,  
39 - deviceRpcRequestProtoSchema: null,  
40 - deviceRpcResponseProtoSchema: null,  
41 - },  
42 - },  
43 - clientSettings: {  
44 - powerMode: null,  
45 - edrxCycle: null,  
46 - pagingTransmissionWindow: null,  
47 - psmActivityTimer: null,  
48 - },  
49 - type: 'COAP',  
50 - });  
51 -  
52 - const [register, { validate, resetFields, setFieldsValue }] = useForm({  
53 - labelWidth: 200,  
54 - schemas: CoapSchemas,  
55 - actionColOptions: {  
56 - span: 14,  
57 - },  
58 - });  
59 - const setStepFieldsValueFunc = (v) => {  
60 - setFieldsValue({  
61 - coapDeviceType: v?.coapDeviceTypeConfiguration?.coapDeviceType,  
62 - transportPayloadType:  
63 - v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration?.transportPayloadType,  
64 - powerMode: v?.clientSettings.powerMode,  
65 - psmActivityTimer: v.clientSettings?.psmActivityTimer,  
66 - edrxCycle: v?.clientSettings.edrxCycle,  
67 - pagingTransmissionWindow: v.clientSettings?.pagingTransmissionWindow,  
68 - deviceTelemetryProtoSchema:  
69 - v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
70 - ?.deviceTelemetryProtoSchema == null  
71 - ? deviceTelemetryProtoSchemaData  
72 - : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
73 - ?.deviceTelemetryProtoSchema,  
74 - deviceAttributesProtoSchema:  
75 - v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
76 - ?.deviceAttributesProtoSchema == null  
77 - ? deviceAttributesProtoSchemaData  
78 - : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
79 - ?.deviceAttributesProtoSchema,  
80 - deviceRpcRequestProtoSchema:  
81 - v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
82 - ?.deviceRpcRequestProtoSchema == null  
83 - ? deviceRpcRequestProtoSchemaData  
84 - : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
85 - ?.deviceRpcRequestProtoSchema,  
86 - deviceRpcResponseProtoSchema:  
87 - v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
88 - ?.deviceRpcResponseProtoSchema == null  
89 - ? deviceRpcResponseProtoSchemaData  
90 - : v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration  
91 - ?.deviceRpcResponseProtoSchema,  
92 - });  
93 - };  
94 - const resetStepFieldsValueFunc = () => {  
95 - resetFields();  
96 - };  
97 - async function customResetFunc() {  
98 - emit('prev');  
99 - }  
100 - const getDataFunc = async () => {  
101 - const val = await validate();  
102 - if (!val) return;  
103 - transportCoapData.coapDeviceTypeConfiguration.coapDeviceType = val.coapDeviceType;  
104 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.transportPayloadType =  
105 - val.transportPayloadType;  
106 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =  
107 - val.deviceTelemetryProtoSchema;  
108 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =  
109 - val.deviceAttributesProtoSchema;  
110 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =  
111 - val.deviceRpcRequestProtoSchema;  
112 - transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =  
113 - val.deviceRpcResponseProtoSchema;  
114 - transportCoapData.clientSettings.powerMode = val.powerMode;  
115 - transportCoapData.clientSettings.edrxCycle = val.edrxCycle;  
116 - transportCoapData.clientSettings.pagingTransmissionWindow = val.pagingTransmissionWindow;  
117 - transportCoapData.clientSettings.psmActivityTimer = val.psmActivityTimer;  
118 - coapAllData = {  
119 - ...transportCoapData,  
120 - };  
121 - return coapAllData;  
122 - };  
123 - return {  
124 - customResetFunc,  
125 - register,  
126 - resetStepFieldsValueFunc,  
127 - getDataFunc,  
128 - setStepFieldsValueFunc,  
129 - }; 41 + const [register, { validate, resetFields, setFieldsValue }] = useForm({
  42 + labelWidth: 200,
  43 + schemas: CoapSchemas,
  44 + actionColOptions: {
  45 + span: 14,
130 }, 46 },
131 }); 47 });
  48 + const setFormData = (v) => {
  49 + setFieldsValue({
  50 + ...v?.clientSettings,
  51 + ...v?.coapDeviceTypeConfiguration,
  52 + ...v?.coapDeviceTypeConfiguration?.transportPayloadTypeConfiguration,
  53 + });
  54 + };
  55 + const resetFormData = () => {
  56 + resetFields();
  57 + };
  58 + function customResetFunc() {
  59 + emits('prev');
  60 + }
  61 + const getFormData = async () => {
  62 + const val = await validate();
  63 + if (!val) return;
  64 + transportCoapData.coapDeviceTypeConfiguration.coapDeviceType = val.coapDeviceType;
  65 + transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.transportPayloadType =
  66 + val.transportPayloadType;
  67 + transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
  68 + val.deviceTelemetryProtoSchema;
  69 + transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
  70 + val.deviceAttributesProtoSchema;
  71 + transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
  72 + val.deviceRpcRequestProtoSchema;
  73 + transportCoapData.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
  74 + val.deviceRpcResponseProtoSchema;
  75 + transportCoapData.clientSettings.powerMode = val.powerMode;
  76 + transportCoapData.clientSettings.edrxCycle = val.edrxCycle;
  77 + transportCoapData.clientSettings.pagingTransmissionWindow = val.pagingTransmissionWindow;
  78 + transportCoapData.clientSettings.psmActivityTimer = val.psmActivityTimer;
  79 + coapAllData = {
  80 + ...transportCoapData,
  81 + };
  82 + return coapAllData;
  83 + };
  84 + defineExpose({
  85 + getFormData,
  86 + resetFormData,
  87 + setFormData,
  88 + customResetFunc,
  89 + });
132 </script> 90 </script>
133 <style lang="less" scoped></style> 91 <style lang="less" scoped></style>
1 <template> 1 <template>
2 - <div style=""> 2 + <div>
3 <Tabs 3 <Tabs
4 v-model:activeKey="currentKey" 4 v-model:activeKey="currentKey"
5 :size="currentSize" 5 :size="currentSize"
@@ -14,8 +14,8 @@ @@ -14,8 +14,8 @@
14 <Checkbox 14 <Checkbox
15 @change="handleCheckChange($event)" 15 @change="handleCheckChange($event)"
16 v-model:checked="bootstrapServerUpdateEnable" 16 v-model:checked="bootstrapServerUpdateEnable"
17 - >包括引导服务器更新</Checkbox  
18 - > 17 + >包括引导服务器更新
  18 + </Checkbox>
19 <CollapseContainer 19 <CollapseContainer
20 v-for="(item, index) in dynamicBOOTSTRAP.bootstrap" 20 v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
21 :key="item" 21 :key="item"
@@ -29,7 +29,9 @@ @@ -29,7 +29,9 @@
29 type="text" 29 type="text"
30 @click="handleRemove(index)" 30 @click="handleRemove(index)"
31 > 31 >
32 - <template #icon> <DeleteOutlined /> </template> 32 + <template #icon>
  33 + <DeleteOutlined />
  34 + </template>
33 </Button> 35 </Button>
34 </template> 36 </template>
35 <div style="border: 1px solid #d9d9d9; width: 100%"> 37 <div style="border: 1px solid #d9d9d9; width: 100%">
@@ -80,9 +82,9 @@ @@ -80,9 +82,9 @@
80 </div> 82 </div>
81 </template> 83 </template>
82 84
83 -<script lang="ts">  
84 - import { defineComponent, ref, reactive, nextTick, unref } from 'vue';  
85 - import { Tabs, Card } from 'ant-design-vue'; 85 +<script lang="ts" setup>
  86 + import { ref, reactive, nextTick, unref } from 'vue';
  87 + import { Tabs, TabPane } from 'ant-design-vue';
86 import { BasicForm, useForm } from '/@/components/Form'; 88 import { BasicForm, useForm } from '/@/components/Form';
87 import { modelSchemas, settingsSchemas, deviceSchemas } from './index'; 89 import { modelSchemas, settingsSchemas, deviceSchemas } from './index';
88 import BootStrapForm from './cpns/BootStrapForm.vue'; 90 import BootStrapForm from './cpns/BootStrapForm.vue';
@@ -92,237 +94,214 @@ @@ -92,237 +94,214 @@
92 import { useModal } from '/@/components/Modal'; 94 import { useModal } from '/@/components/Modal';
93 import ServerConfigModal from './cpns/ServerConfigModal.vue'; 95 import ServerConfigModal from './cpns/ServerConfigModal.vue';
94 96
95 - export default defineComponent({  
96 - name: 'index',  
97 - components: {  
98 - Tabs,  
99 - TabPane: Tabs.TabPane,  
100 - BasicForm,  
101 - BootStrapForm,  
102 - DeleteOutlined,  
103 - Card,  
104 - PlusCircleOutlined,  
105 - Button,  
106 - Checkbox,  
107 - CollapseContainer,  
108 - ServerConfigModal, 97 + const collapseTitle = (item) => {
  98 + return `LwM2M Server Short server ID: ${item.shortServerId} Security config mode: ${item.securityMode}`;
  99 + };
  100 + const bootstrapServerUpdateEnable = ref(false);
  101 + const dynamicBOOTSTRAP: any = reactive({
  102 + bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234 }],
  103 + });
  104 + const dynamicBindRef: any = {
  105 + BootStrapFormItemRef: ref([]),
  106 + };
  107 + const currentKey = ref('1');
  108 + const currentSize = ref('large');
  109 + let allObj: any = reactive({});
  110 + let allEchoObj: any = reactive({});
  111 + let allEchoStatus = ref(false);
  112 + let clientLwM2mSettingsObj = reactive({});
  113 + let observeAttrObj = reactive({
  114 + attribute: [],
  115 + attributeLwm2m: {},
  116 + keyName: {},
  117 + observe: [],
  118 + telemetry: [],
  119 + });
  120 +
  121 + const [registerModel, { resetFields: resetObjectListValue, getFieldsValue: getObjectListValue }] =
  122 + useForm({
  123 + labelWidth: 100,
  124 + schemas: modelSchemas,
  125 + actionColOptions: {
  126 + span: 14,
  127 + },
  128 + });
  129 + const [
  130 + registerSettings,
  131 + {
  132 + resetFields: resetSettingsValue,
  133 + validate: settingsValidate,
  134 + setFieldsValue: settingsSetFieldsValueFunc,
109 }, 135 },
110 - setup() {  
111 - const collapseTitle = (item) => {  
112 - return `LwM2M Server Short server ID: ${item.shortServerId} Security config mode: ${item.securityMode}`;  
113 - };  
114 - const bootstrapServerUpdateEnable = ref(false);  
115 - const dynamicBOOTSTRAP: any = reactive({  
116 - bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234 }],  
117 - });  
118 - const dynamicBindRef: any = {  
119 - BootStrapFormItemRef: ref([]),  
120 - };  
121 - const currentKey = ref('1');  
122 - const currentSize = ref('large');  
123 - let allObj: any = reactive({});  
124 - let allEchoObj: any = reactive({});  
125 - let allEchoStatus = ref(false);  
126 - let clientLwM2mSettingsObj = reactive({});  
127 - let observeAttrObj = reactive({  
128 - attribute: [],  
129 - attributeLwm2m: {},  
130 - keyName: {},  
131 - observe: [],  
132 - telemetry: [],  
133 - }); 136 + ] = useForm({
  137 + labelWidth: 180,
  138 + schemas: settingsSchemas,
  139 + actionColOptions: {
  140 + span: 14,
  141 + },
  142 + });
  143 + const [registerDevice, { resetFields: resetDeviceValue, getFieldsValue: getDeviceValue }] =
  144 + useForm({
  145 + labelWidth: 100,
  146 + schemas: deviceSchemas,
  147 + actionColOptions: {
  148 + span: 14,
  149 + },
  150 + });
  151 + const [registerModal, { openModal }] = useModal();
134 152
135 - const [  
136 - registerModel,  
137 - { resetFields: resetObjectListValue, getFieldsValue: getObjectListValue },  
138 - ] = useForm({  
139 - labelWidth: 100,  
140 - schemas: modelSchemas,  
141 - actionColOptions: {  
142 - span: 14,  
143 - }, 153 + const handleAdd = () => {
  154 + //TODO 如果是server config 则只弹窗一次
  155 + if (selectCheckStatus.value) {
  156 + openModal(true, {
  157 + isUpdate: true,
144 }); 158 });
145 - const [  
146 - registerSettings,  
147 - {  
148 - resetFields: resetSettingsValue,  
149 - validate: settingsValidate,  
150 - setFieldsValue: settingsSetFieldsValueFunc,  
151 - },  
152 - ] = useForm({  
153 - labelWidth: 180,  
154 - schemas: settingsSchemas,  
155 - actionColOptions: {  
156 - span: 14,  
157 - }, 159 + } else {
  160 + dynamicBOOTSTRAP.bootstrap.push({
  161 + securityMode: 'NO_SEC',
  162 + shortServerId: 1234,
158 }); 163 });
159 - const [registerDevice, { resetFields: resetDeviceValue, getFieldsValue: getDeviceValue }] =  
160 - useForm({  
161 - labelWidth: 100,  
162 - schemas: deviceSchemas,  
163 - actionColOptions: {  
164 - span: 14,  
165 - },  
166 - });  
167 - const [registerModal, { openModal }] = useModal();  
168 -  
169 - const handleAdd = () => {  
170 - //TODO 如果是server config 则只弹窗一次  
171 - if (selectCheckStatus.value) {  
172 - openModal(true, {  
173 - isUpdate: true,  
174 - });  
175 - } else {  
176 - dynamicBOOTSTRAP.bootstrap.push({  
177 - securityMode: 'NO_SEC',  
178 - shortServerId: 1234,  
179 - });  
180 - }  
181 - };  
182 - const handleRemove = (index) => {  
183 - dynamicBOOTSTRAP.bootstrap.splice(index, 1);  
184 - };  
185 - const handleChange = (e) => {  
186 - if (allEchoStatus.value) {  
187 - switch (e) {  
188 - case '1':  
189 - break;  
190 - case '2':  
191 - nextTick(() => {  
192 - bootstrapServerUpdateEnable.value = allEchoObj.bootstrapServerUpdateEnable;  
193 - dynamicBOOTSTRAP.bootstrap = allEchoObj.bootstrap;  
194 - dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => {  
195 - nextTick(() => {  
196 - unref(dynamicBindRef.BootStrapFormItemRef)[index]?.editBootStrapFormFunc(  
197 - bootstrap  
198 - );  
199 - });  
200 - });  
201 - });  
202 - break;  
203 - case '3': 164 + }
  165 + };
  166 + const handleRemove = (index) => {
  167 + dynamicBOOTSTRAP.bootstrap.splice(index, 1);
  168 + };
  169 + const handleChange = (e) => {
  170 + if (allEchoStatus.value) {
  171 + switch (e) {
  172 + case '1':
  173 + break;
  174 + case '2':
  175 + nextTick(() => {
  176 + bootstrapServerUpdateEnable.value = allEchoObj.bootstrapServerUpdateEnable;
  177 + dynamicBOOTSTRAP.bootstrap = allEchoObj.bootstrap;
  178 + dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => {
204 nextTick(() => { 179 nextTick(() => {
205 - settingsSetFieldsValueFunc({  
206 - powerMode: allEchoObj?.clientLwM2mSettings?.powerMode,  
207 - psmActivityTimer: allEchoObj?.clientLwM2mSettings?.psmActivityTimer,  
208 - edrxCycle: allEchoObj?.clientLwM2mSettings?.edrxCycle,  
209 - pagingTransmissionWindow:  
210 - allEchoObj?.clientLwM2mSettings?.pagingTransmissionWindow,  
211 - fwUpdateStrategy: allEchoObj?.clientLwM2mSettings?.fwUpdateStrategy,  
212 - swUpdateStrategy: allEchoObj?.clientLwM2mSettings?.swUpdateStrategy,  
213 - clientOnlyObserveAfterConnect:  
214 - allEchoObj?.clientLwM2mSettings?.clientOnlyObserveAfterConnect,  
215 - fwUpdateResource: allEchoObj?.clientLwM2mSettings?.fwUpdateResource,  
216 - swUpdateResource: allEchoObj?.clientLwM2mSettings?.swUpdateResource,  
217 - compositeOperationsSupport:  
218 - allEchoObj?.clientLwM2mSettings?.compositeOperationsSupport,  
219 - }); 180 + unref(dynamicBindRef.BootStrapFormItemRef)[index]?.editBootStrapFormFunc(bootstrap);
220 }); 181 });
221 - break;  
222 - case '4':  
223 - break;  
224 - }  
225 - }  
226 - };  
227 - const setStepFieldsValueFunc = (v) => {  
228 - if (v) {  
229 - allEchoObj = v;  
230 - allEchoStatus.value = true;  
231 - }  
232 - };  
233 - const tempBootStrap: any = [];  
234 - const getBootStrapFormValue = () => {  
235 - //获取BootStrap的值  
236 - unref(dynamicBindRef.BootStrapFormItemRef)?.map((item: any) =>  
237 - tempBootStrap.push(item.getBootStrapFormFunc())  
238 - );  
239 - }; 182 + });
  183 + });
  184 + break;
  185 + case '3':
  186 + nextTick(() => {
  187 + settingsSetFieldsValueFunc({
  188 + powerMode: allEchoObj?.clientLwM2mSettings?.powerMode,
  189 + psmActivityTimer: allEchoObj?.clientLwM2mSettings?.psmActivityTimer,
  190 + edrxCycle: allEchoObj?.clientLwM2mSettings?.edrxCycle,
  191 + pagingTransmissionWindow: allEchoObj?.clientLwM2mSettings?.pagingTransmissionWindow,
  192 + fwUpdateStrategy: allEchoObj?.clientLwM2mSettings?.fwUpdateStrategy,
  193 + swUpdateStrategy: allEchoObj?.clientLwM2mSettings?.swUpdateStrategy,
  194 + clientOnlyObserveAfterConnect:
  195 + allEchoObj?.clientLwM2mSettings?.clientOnlyObserveAfterConnect,
  196 + fwUpdateResource: allEchoObj?.clientLwM2mSettings?.fwUpdateResource,
  197 + swUpdateResource: allEchoObj?.clientLwM2mSettings?.swUpdateResource,
  198 + compositeOperationsSupport:
  199 + allEchoObj?.clientLwM2mSettings?.compositeOperationsSupport,
  200 + });
  201 + });
  202 + break;
  203 + case '4':
  204 + break;
  205 + }
  206 + }
  207 + };
  208 + const setFormData = (v) => {
  209 + if (v) {
  210 + allEchoObj = v;
  211 + allEchoStatus.value = true;
  212 + }
  213 + };
  214 + const tempBootStrap: any = [];
  215 + const getBootStrapFormValue = () => {
  216 + //获取BootStrap的值
  217 + unref(dynamicBindRef.BootStrapFormItemRef)?.map((item: any) =>
  218 + tempBootStrap.push(item.getBootStrapFormFunc())
  219 + );
  220 + };
240 221
241 - const getDataFunc = async () => {  
242 - const objectListVal = getObjectListValue();  
243 - const deviceVal = getDeviceValue();  
244 - console.log('第一个tab', objectListVal);  
245 - console.log('第四个tab', deviceVal);  
246 - getBootStrapFormValue();  
247 - const settingsVal = await settingsValidate();  
248 - if (!settingsVal) return;  
249 - delete settingsVal.unit;  
250 - delete settingsVal.unit2;  
251 - clientLwM2mSettingsObj = {  
252 - ...settingsVal,  
253 - };  
254 - allObj = {  
255 - ...{  
256 - clientLwM2mSettings: clientLwM2mSettingsObj,  
257 - },  
258 - ...{  
259 - bootstrap: tempBootStrap,  
260 - },  
261 - ...{ bootstrapServerUpdateEnable: bootstrapServerUpdateEnable.value },  
262 - ...{  
263 - observeAttr: observeAttrObj,  
264 - },  
265 - type: 'LWM2M',  
266 - };  
267 - return allObj;  
268 - }; 222 + const getFormData = async () => {
  223 + const objectListVal = getObjectListValue();
  224 + const deviceVal = getDeviceValue();
  225 + console.log('第一个tab', objectListVal);
  226 + console.log('第四个tab', deviceVal);
  227 + getBootStrapFormValue();
  228 + const settingsVal = await settingsValidate();
  229 + if (!settingsVal) return;
  230 + delete settingsVal.unit;
  231 + delete settingsVal.unit2;
  232 + clientLwM2mSettingsObj = {
  233 + ...settingsVal,
  234 + };
  235 + allObj = {
  236 + ...{
  237 + clientLwM2mSettings: clientLwM2mSettingsObj,
  238 + },
  239 + ...{
  240 + bootstrap: tempBootStrap,
  241 + },
  242 + ...{ bootstrapServerUpdateEnable: bootstrapServerUpdateEnable.value },
  243 + ...{
  244 + observeAttr: observeAttrObj,
  245 + },
  246 + type: 'LWM2M',
  247 + };
  248 + return allObj;
  249 + };
269 250
270 - const resetStepFieldsValueFunc = () => {  
271 - allEchoStatus.value = false;  
272 - nextTick(() => {  
273 - resetObjectListValue();  
274 - resetSettingsValue();  
275 - resetDeviceValue(); 251 + const resetFormData = () => {
  252 + allEchoStatus.value = false;
  253 + nextTick(() => {
  254 + resetObjectListValue();
  255 + resetSettingsValue();
  256 + resetDeviceValue();
  257 + });
  258 + };
  259 + const selectCheckStatus = ref(false);
  260 + const handleCheckChange = (e) => {
  261 + selectCheckStatus.value = e.target.checked;
  262 + if (!selectCheckStatus.value) {
  263 + const findIndex = dynamicBOOTSTRAP.bootstrap.findIndex((o) => o.type == 'Bootstrap');
  264 + if (findIndex !== -1) {
  265 + dynamicBOOTSTRAP.bootstrap.splice(findIndex, 1);
  266 + }
  267 + }
  268 + };
  269 + const acceptEmitFunc = (e) => {
  270 + switch (e) {
  271 + case 'LwM2M':
  272 + dynamicBOOTSTRAP.bootstrap.push({
  273 + securityMode: 'NO_SEC',
  274 + shortServerId: 1234,
276 }); 275 });
277 - };  
278 - const selectCheckStatus = ref(false);  
279 - const handleCheckChange = (e) => {  
280 - selectCheckStatus.value = e.target.checked;  
281 - if (!selectCheckStatus.value) {  
282 - const findIndex = dynamicBOOTSTRAP.bootstrap.findIndex((o) => o.type == 'Bootstrap');  
283 - if (findIndex !== -1) {  
284 - dynamicBOOTSTRAP.bootstrap.splice(findIndex, 1);  
285 - }  
286 - }  
287 - };  
288 - const acceptEmitFunc = (e) => {  
289 - switch (e) {  
290 - case 'LwM2M':  
291 - dynamicBOOTSTRAP.bootstrap.push({  
292 - securityMode: 'NO_SEC',  
293 - shortServerId: 1234,  
294 - });  
295 - break;  
296 - case 'Bootstrap':  
297 - dynamicBOOTSTRAP.bootstrap.push({  
298 - securityMode: 'NO_SEC',  
299 - shortServerId: 1234,  
300 - });  
301 - break;  
302 - }  
303 - };  
304 - return {  
305 - currentKey,  
306 - currentSize,  
307 - registerModel,  
308 - registerSettings,  
309 - registerDevice,  
310 - getDataFunc,  
311 - setStepFieldsValueFunc,  
312 - handleChange,  
313 - resetStepFieldsValueFunc,  
314 - dynamicBOOTSTRAP,  
315 - dynamicBindRef,  
316 - handleAdd,  
317 - handleRemove,  
318 - bootstrapServerUpdateEnable,  
319 - collapseTitle,  
320 - handleCheckChange,  
321 - registerModal,  
322 - acceptEmitFunc,  
323 - selectCheckStatus,  
324 - };  
325 - }, 276 + break;
  277 + case 'Bootstrap':
  278 + dynamicBOOTSTRAP.bootstrap.push({
  279 + securityMode: 'NO_SEC',
  280 + shortServerId: 1234,
  281 + });
  282 + break;
  283 + }
  284 + };
  285 + defineExpose({
  286 + currentKey,
  287 + currentSize,
  288 + registerModel,
  289 + registerSettings,
  290 + registerDevice,
  291 + getFormData,
  292 + setFormData,
  293 + handleChange,
  294 + resetFormData,
  295 + dynamicBOOTSTRAP,
  296 + dynamicBindRef,
  297 + handleAdd,
  298 + handleRemove,
  299 + bootstrapServerUpdateEnable,
  300 + collapseTitle,
  301 + handleCheckChange,
  302 + registerModal,
  303 + acceptEmitFunc,
  304 + selectCheckStatus,
326 }); 305 });
327 </script> 306 </script>
328 307
@@ -29,15 +29,15 @@ @@ -29,15 +29,15 @@
29 </p> 29 </p>
30 </div> 30 </div>
31 </template> 31 </template>
32 - <template #desc2> 32 + <template #desc2>
33 <div style="width: 47rem; margin-left: 2rem"> 33 <div style="width: 47rem; margin-left: 2rem">
34 <p> 34 <p>
35 - 启用后，平台将使用Json负载格式通过以下主题推送属性  
36 - 和RPC:v1/devices/me/attributes/response/$request\u id、v1/devices/me/attributes、  
37 - v1/devices/me/RPC/request/$request\u id、v1/devices/me/RPC/response/$request\u id。  
38 - 此设置不会影响使用新（v2）主题发送的属性和rpc订阅：  
39 - v2/a/res/$request\u id、v2/a、v2/r/req/$request\u id、v2/r/res/$request\u id。  
40 - 其中，$request\u id是整数请求标识符。 35 + 启用后，平台将使用Json负载格式通过以下主题推送属性
  36 + 和RPC:v1/devices/me/attributes/response/$request\u id、v1/devices/me/attributes、
  37 + v1/devices/me/RPC/request/$request\u id、v1/devices/me/RPC/response/$request\u id。
  38 + 此设置不会影响使用新（v2）主题发送的属性和rpc订阅： v2/a/res/$request\u
  39 + id、v2/a、v2/r/req/$request\u id、v2/r/res/$request\u id。 其中，$request\u
  40 + id是整数请求标识符。
41 </p> 41 </p>
42 </div> 42 </div>
43 </template> 43 </template>
@@ -45,125 +45,88 @@ @@ -45,125 +45,88 @@
45 </div> 45 </div>
46 </div> 46 </div>
47 </template> 47 </template>
48 -<script lang="ts">  
49 - import { defineComponent, reactive } from 'vue'; 48 +<script lang="ts" setup>
  49 + import { reactive } from 'vue';
50 import { BasicForm, useForm } from '/@/components/Form'; 50 import { BasicForm, useForm } from '/@/components/Form';
51 import { 51 import {
52 MqttSchemas, 52 MqttSchemas,
53 - deviceTelemetryProtoSchemaData,  
54 - deviceAttributesProtoSchemaData,  
55 - deviceRpcRequestProtoSchemaData,  
56 - deviceRpcResponseProtoSchemaData, 53 + // deviceTelemetryProtoSchemaData,
  54 + // deviceAttributesProtoSchemaData,
  55 + // deviceRpcRequestProtoSchemaData,
  56 + // deviceRpcResponseProtoSchemaData,
57 } from './Mqtt'; 57 } from './Mqtt';
58 - import { Alert, Divider, Descriptions } from 'ant-design-vue';  
59 58
60 - export default defineComponent({  
61 - components: {  
62 - BasicForm,  
63 - [Alert.name]: Alert,  
64 - [Divider.name]: Divider,  
65 - [Descriptions.name]: Descriptions,  
66 - [Descriptions.Item.name]: Descriptions.Item,  
67 - }, 59 + const emits = defineEmits(['prev']);
68 60
69 - emits: ['next', 'prev', 'register'],  
70 - setup(_, { emit }) {  
71 - let allMqttData: any = reactive({});  
72 - const transportMqttData: any = reactive({  
73 - transportPayloadTypeConfiguration: {  
74 - transportPayloadType: null,  
75 - enableCompatibilityWithJsonPayloadFormat: false,  
76 - useJsonPayloadFormatForDefaultDownlinkTopics: false,  
77 - deviceAttributesProtoSchema: null,  
78 - deviceRpcRequestProtoSchema: null,  
79 - deviceRpcResponseProtoSchema: null,  
80 - deviceTelemetryProtoSchema: null,  
81 - },  
82 - type: 'MQTT',  
83 - }); 61 + let allMqttData: any = reactive({});
  62 + const transportMqttData: any = reactive({
  63 + transportPayloadTypeConfiguration: {
  64 + transportPayloadType: null,
  65 + enableCompatibilityWithJsonPayloadFormat: false,
  66 + useJsonPayloadFormatForDefaultDownlinkTopics: false,
  67 + deviceAttributesProtoSchema: null,
  68 + deviceRpcRequestProtoSchema: null,
  69 + deviceRpcResponseProtoSchema: null,
  70 + deviceTelemetryProtoSchema: null,
  71 + },
  72 + type: 'MQTT',
  73 + });
84 74
85 - const [register, { validate, resetFields, setFieldsValue }] = useForm({  
86 - labelWidth: 180,  
87 - schemas: MqttSchemas,  
88 - actionColOptions: {  
89 - span: 14,  
90 - },  
91 - });  
92 - const setStepFieldsValueFunc = (v) => {  
93 - setFieldsValue(v);  
94 - setFieldsValue({  
95 - transportPayloadType: v?.transportPayloadTypeConfiguration?.transportPayloadType,  
96 - deviceTelemetryProtoSchema:  
97 - v?.transportPayloadTypeConfiguration?.deviceTelemetryProtoSchema == null  
98 - ? deviceTelemetryProtoSchemaData  
99 - : v?.transportPayloadTypeConfiguration?.deviceTelemetryProtoSchema,  
100 - deviceAttributesProtoSchema:  
101 - v?.transportPayloadTypeConfiguration?.deviceAttributesProtoSchema == null  
102 - ? deviceAttributesProtoSchemaData  
103 - : v?.transportPayloadTypeConfiguration?.deviceAttributesProtoSchema,  
104 - deviceRpcRequestProtoSchema:  
105 - v?.transportPayloadTypeConfiguration?.deviceRpcRequestProtoSchema == null  
106 - ? deviceRpcRequestProtoSchemaData  
107 - : v?.transportPayloadTypeConfiguration?.deviceRpcRequestProtoSchema,  
108 - deviceRpcResponseProtoSchema:  
109 - v?.transportPayloadTypeConfiguration?.deviceRpcResponseProtoSchema == null  
110 - ? deviceRpcResponseProtoSchemaData  
111 - : v?.transportPayloadTypeConfiguration?.deviceRpcResponseProtoSchema,  
112 - enableCompatibilityWithJsonPayloadFormat:  
113 - v?.transportPayloadTypeConfiguration?.enableCompatibilityWithJsonPayloadFormat,  
114 - useJsonPayloadFormatForDefaultDownlinkTopics:  
115 - v?.transportPayloadTypeConfiguration?.useJsonPayloadFormatForDefaultDownlinkTopics,  
116 - });  
117 - };  
118 - const resetStepFieldsValueFunc = () => {  
119 - resetFields();  
120 - };  
121 - async function customResetFunc() {  
122 - emit('prev');  
123 - }  
124 - const getDataFunc = async () => {  
125 - let val = await validate();  
126 - if (!val) return;  
127 - delete val.desc;  
128 - transportMqttData.transportPayloadTypeConfiguration.transportPayloadType =  
129 - val.transportPayloadType;  
130 - transportMqttData.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =  
131 - val.enableCompatibilityWithJsonPayloadFormat;  
132 - transportMqttData.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =  
133 - val.useJsonPayloadFormatForDefaultDownlinkTopics;  
134 - transportMqttData.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =  
135 - val.deviceAttributesProtoSchema;  
136 - transportMqttData.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =  
137 - val.deviceRpcRequestProtoSchema;  
138 - transportMqttData.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =  
139 - val.deviceRpcResponseProtoSchema;  
140 - transportMqttData.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =  
141 - val.deviceTelemetryProtoSchema;  
142 - allMqttData = {  
143 - ...val,  
144 - ...transportMqttData,  
145 - };  
146 - delete allMqttData.deviceTelemetryProtoSchema;  
147 - delete allMqttData.deviceAttributesProtoSchema;  
148 - delete allMqttData.deviceRpcRequestProtoSchema;  
149 - delete allMqttData.deviceRpcResponseProtoSchema;  
150 - delete allMqttData.useJsonPayloadFormatForDefaultDownlinkTopics;  
151 - delete allMqttData.enableCompatibilityWithJsonPayloadFormat;  
152 - delete allMqttData.transportPayloadType;  
153 - return allMqttData;  
154 - };  
155 - return {  
156 - customResetFunc,  
157 - register,  
158 - resetStepFieldsValueFunc,  
159 - getDataFunc,  
160 - setStepFieldsValueFunc,  
161 - }; 75 + const [register, { validate, resetFields, setFieldsValue }] = useForm({
  76 + labelWidth: 180,
  77 + schemas: MqttSchemas,
  78 + actionColOptions: {
  79 + span: 14,
162 }, 80 },
163 }); 81 });
  82 + const setFormData = (v) => {
  83 + setFieldsValue(v);
  84 + setFieldsValue({
  85 + ...v?.transportPayloadTypeConfiguration,
  86 + });
  87 + };
  88 + const resetFormData = () => {
  89 + resetFields();
  90 + };
  91 + function customResetFunc() {
  92 + emits('prev');
  93 + }
  94 + const getFormData = async () => {
  95 + let val = await validate();
  96 + if (!val) return;
  97 + delete val.desc;
  98 + transportMqttData.transportPayloadTypeConfiguration.transportPayloadType =
  99 + val.transportPayloadType;
  100 + transportMqttData.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
  101 + val.enableCompatibilityWithJsonPayloadFormat;
  102 + transportMqttData.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =
  103 + val.useJsonPayloadFormatForDefaultDownlinkTopics;
  104 + transportMqttData.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
  105 + val.deviceAttributesProtoSchema;
  106 + transportMqttData.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
  107 + val.deviceRpcRequestProtoSchema;
  108 + transportMqttData.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
  109 + val.deviceRpcResponseProtoSchema;
  110 + transportMqttData.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
  111 + val.deviceTelemetryProtoSchema;
  112 + allMqttData = {
  113 + ...val,
  114 + ...transportMqttData,
  115 + };
  116 + delete allMqttData.deviceTelemetryProtoSchema;
  117 + delete allMqttData.deviceAttributesProtoSchema;
  118 + delete allMqttData.deviceRpcRequestProtoSchema;
  119 + delete allMqttData.deviceRpcResponseProtoSchema;
  120 + delete allMqttData.useJsonPayloadFormatForDefaultDownlinkTopics;
  121 + delete allMqttData.enableCompatibilityWithJsonPayloadFormat;
  122 + delete allMqttData.transportPayloadType;
  123 + return allMqttData;
  124 + };
  125 + defineExpose({
  126 + getFormData,
  127 + resetFormData,
  128 + setFormData,
  129 + customResetFunc,
  130 + });
164 </script> 131 </script>
165 -<style lang="less" scoped>  
166 - // :deep(.ant-row) {  
167 - // column-gap: 33px !important;  
168 - // }  
169 -</style> 132 +<style lang="less" scoped></style>
@@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
32 </template> 32 </template>
33 <div 33 <div
34 v-if="dynamicSNMP.communicationConfigs.length < 4" 34 v-if="dynamicSNMP.communicationConfigs.length < 4"
35 - style="margin-left: 0vw; margin-top: 2vh" 35 + style="margin-left: 0; margin-top: 2vh"
36 > 36 >
37 <Button size="middle" type="text" @click="handleAdd"> 37 <Button size="middle" type="text" @click="handleAdd">
38 <template #icon> 38 <template #icon>
@@ -121,7 +121,7 @@ @@ -121,7 +121,7 @@
121 }, 121 },
122 ], 122 ],
123 }); 123 });
124 - const [register, { validate, setFieldsValue }] = useForm({ 124 + const [register, { validate, setFieldsValue, resetFields }] = useForm({
125 labelWidth: 150, 125 labelWidth: 150,
126 schemas: snmpSchemas, 126 schemas: snmpSchemas,
127 actionColOptions: { 127 actionColOptions: {
@@ -151,7 +151,7 @@ @@ -151,7 +151,7 @@
151 }; 151 };
152 152
153 //回显表单值 153 //回显表单值
154 - const setStepFieldsValueFunc = (v) => { 154 + const setFormData = (v) => {
155 setFieldsValue({ 155 setFieldsValue({
156 timeoutMs: v.timeoutMs, 156 timeoutMs: v.timeoutMs,
157 retries: v.retries, 157 retries: v.retries,
@@ -166,7 +166,7 @@ @@ -166,7 +166,7 @@
166 }; 166 };
167 167
168 //获取表单值 168 //获取表单值
169 - const getSnmpForm = async () => { 169 + const getFormData = async () => {
170 let value = await validate(); 170 let value = await validate();
171 if (!value) return; 171 if (!value) return;
172 let tempObj: any = {}; 172 let tempObj: any = {};
@@ -181,9 +181,14 @@ @@ -181,9 +181,14 @@
181 }; 181 };
182 return tempObj; 182 return tempObj;
183 }; 183 };
  184 + const resetFormData = () => {
  185 + resetFields();
  186 + dynamicBindRef.SnmpFormItemRef = [];
  187 + };
184 defineExpose({ 188 defineExpose({
185 - getSnmpForm,  
186 - setStepFieldsValueFunc, 189 + getFormData,
  190 + setFormData,
  191 + resetFormData,
187 }); 192 });
188 </script> 193 </script>
189 <style lang="less" scoped></style> 194 <style lang="less" scoped></style>