简柏林 / thingskit-front · Commits

Commit d66c2a4aa3d87ba899e0ffabb8c860240ae37974

Authored by fengtao
1 parent 9fb57efc

refractor:重构设备配置代码

Inline Side-by-side
Showing 12 changed files with 948 additions and 1313 deletions
... ... @@ -41,7 +41,6 @@ export function useBatchDelete(
41 41
42 42 // 全选按钮
43 43 const onSelectAll = (_, selectedRows, __) => {
44   - console.log(selectedRows);
45 44 const selectedRowKeys = selectedRows.map((item) => item.id);
46 45 selectedRowIds.value = selectedRowKeys;
47 46 };
... ...
1 1 <template>
2 2 <div>
3 3 <BasicModal
  4 + :maskClosable="false"
4 5 v-bind="$attrs"
5 6 width="55rem"
6 7 @register="register"
7   - :title="getTitle"
8 8 @ok="handleSubmit"
9 9 @cancel="handleCancel"
10   - :showOkBtn="isShowOkBtnFalse"
11 10 >
12 11 <div class="step-form-form">
13 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 14 </a-steps>
17 15 </div>
18 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 27 </div>
30 28 </BasicModal>
31 29 </div>
32 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 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 36 import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
48 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 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 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 75 export const searchFormSchema: FormSchema[] = [
48 76 {
... ...
... ... @@ -3,7 +3,6 @@
3 3 <BasicTable
4 4 class="devide-profiles"
5 5 @register="registerTable"
6   - @selection-change="useSelectionChange"
7 6 :rowSelection="{ type: 'checkbox' }"
8 7 :clickToRowSelect="false"
9 8 >
... ... @@ -96,10 +95,10 @@
96 95 />
97 96 </div>
98 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 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 102 import { useMessage } from '/@/hooks/web/useMessage';
104 103 import {
105 104 deviceConfigGetQuery,
... ... @@ -114,285 +113,200 @@
114 113 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
115 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 303 </script>
391 304
392 305 <style lang="css">
393 306 .devide-profiles .rowcolor {
394 307 color: red;
395 308 }
  309 +
396 310 .devide-profiles .rowcolor2 {
397 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 4 <div>
5 5 <BasicForm @register="register">
6 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 22 <div v-else>
11 23 <LoadingOutlined v-if="loading" />
12 24 <PlusOutlined v-else />
... ... @@ -19,162 +31,95 @@
19 31 </div>
20 32 </div>
21 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 125 </style>
... ...
src/views/device/profiles/step/TransportConfigurationStep.vue renamed from src/views/device/profiles/step/DeviceProfileStep2.vue
... ... @@ -27,17 +27,7 @@
27 27 <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
28 28 <SnmpCpns ref="snmpRef" />
29 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 31 <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh">
42 32 <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
43 33 >上一步</Button
... ... @@ -47,137 +37,101 @@
47 37 </div>
48 38 </div>
49 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 42 import { BasicForm, useForm } from '/@/components/Form';
53 43 import { step2Schemas } from './data';
54   - import { Alert, Divider, Descriptions } from 'ant-design-vue';
55 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 134 </script>
170 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 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 5 </div>
6 6 </div>
7 7 </template>
8   -<script lang="ts">
9   - import { defineComponent, reactive } from 'vue';
  8 +<script lang="ts" setup>
  9 + import { reactive } from 'vue';
10 10 import { BasicForm, useForm } from '/@/components/Form';
11 11 import {
12 12 CoapSchemas,
13   - deviceTelemetryProtoSchemaData,
14   - deviceAttributesProtoSchemaData,
15   - deviceRpcRequestProtoSchemaData,
16   - deviceRpcResponseProtoSchemaData,
  13 + // deviceTelemetryProtoSchemaData,
  14 + // deviceAttributesProtoSchemaData,
  15 + // deviceRpcRequestProtoSchemaData,
  16 + // deviceRpcResponseProtoSchemaData,
17 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 90 </script>
133 91 <style lang="less" scoped></style>
... ...
1 1 <template>
2   - <div style="">
  2 + <div>
3 3 <Tabs
4 4 v-model:activeKey="currentKey"
5 5 :size="currentSize"
... ... @@ -14,8 +14,8 @@
14 14 <Checkbox
15 15 @change="handleCheckChange($event)"
16 16 v-model:checked="bootstrapServerUpdateEnable"
17   - >包括引导服务器更新</Checkbox
18   - >
  17 + >包括引导服务器更新
  18 + </Checkbox>
19 19 <CollapseContainer
20 20 v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
21 21 :key="item"
... ... @@ -29,7 +29,9 @@
29 29 type="text"
30 30 @click="handleRemove(index)"
31 31 >
32   - <template #icon> <DeleteOutlined /> </template>
  32 + <template #icon>
  33 + <DeleteOutlined />
  34 + </template>
33 35 </Button>
34 36 </template>
35 37 <div style="border: 1px solid #d9d9d9; width: 100%">
... ... @@ -80,9 +82,9 @@
80 82 </div>
81 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 88 import { BasicForm, useForm } from '/@/components/Form';
87 89 import { modelSchemas, settingsSchemas, deviceSchemas } from './index';
88 90 import BootStrapForm from './cpns/BootStrapForm.vue';
... ... @@ -92,237 +94,214 @@
92 94 import { useModal } from '/@/components/Modal';
93 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 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 306 </script>
328 307
... ...
... ... @@ -29,15 +29,15 @@
29 29 </p>
30 30 </div>
31 31 </template>
32   - <template #desc2>
  32 + <template #desc2>
33 33 <div style="width: 47rem; margin-left: 2rem">
34 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 41 </p>
42 42 </div>
43 43 </template>
... ... @@ -45,125 +45,88 @@
45 45 </div>
46 46 </div>
47 47 </template>
48   -<script lang="ts">
49   - import { defineComponent, reactive } from 'vue';
  48 +<script lang="ts" setup>
  49 + import { reactive } from 'vue';
50 50 import { BasicForm, useForm } from '/@/components/Form';
51 51 import {
52 52 MqttSchemas,
53   - deviceTelemetryProtoSchemaData,
54   - deviceAttributesProtoSchemaData,
55   - deviceRpcRequestProtoSchemaData,
56   - deviceRpcResponseProtoSchemaData,
  53 + // deviceTelemetryProtoSchemaData,
  54 + // deviceAttributesProtoSchemaData,
  55 + // deviceRpcRequestProtoSchemaData,
  56 + // deviceRpcResponseProtoSchemaData,
57 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 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 32 </template>
33 33 <div
34 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 37 <Button size="middle" type="text" @click="handleAdd">
38 38 <template #icon>
... ... @@ -121,7 +121,7 @@
121 121 },
122 122 ],
123 123 });
124   - const [register, { validate, setFieldsValue }] = useForm({
  124 + const [register, { validate, setFieldsValue, resetFields }] = useForm({
125 125 labelWidth: 150,
126 126 schemas: snmpSchemas,
127 127 actionColOptions: {
... ... @@ -151,7 +151,7 @@
151 151 };
152 152
153 153 //回显表单值
154   - const setStepFieldsValueFunc = (v) => {
  154 + const setFormData = (v) => {
155 155 setFieldsValue({
156 156 timeoutMs: v.timeoutMs,
157 157 retries: v.retries,
... ... @@ -166,7 +166,7 @@
166 166 };
167 167
168 168 //获取表单值
169   - const getSnmpForm = async () => {
  169 + const getFormData = async () => {
170 170 let value = await validate();
171 171 if (!value) return;
172 172 let tempObj: any = {};
... ... @@ -181,9 +181,14 @@
181 181 };
182 182 return tempObj;
183 183 };
  184 + const resetFormData = () => {
  185 + resetFields();
  186 + dynamicBindRef.SnmpFormItemRef = [];
  187 + };
184 188 defineExpose({
185   - getSnmpForm,
186   - setStepFieldsValueFunc,
  189 + getFormData,
  190 + setFormData,
  191 + resetFormData,
187 192 });
188 193 </script>
189 194 <style lang="less" scoped></style>
... ...