简柏林 / thingskit-front · Commits

Commit 569554ff0f41f45f4f5de309bc42f1674d4ad724

Authored by fengtao
1 parent b00385a8

fix：修改设备配置

Inline Side-by-side
Showing 1 changed file with 275 additions and 263 deletions
1 <template> 1 <template>
2 <div> 2 <div>
3 - <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle" @ok="handleSubmit"  
4 - @cancel="handleCancel" :showOkBtn="isShowOkBtnFalse"> 3 + <BasicModal
  4 + v-bind="$attrs"
  5 + width="55rem"
  6 + @register="register"
  7 + :title="getTitle"
  8 + @ok="handleSubmit"
  9 + @cancel="handleCancel"
  10 + :showOkBtn="isShowOkBtnFalse"
  11 + >
5 <div class="step-form-form"> 12 <div class="step-form-form">
6 <a-steps :current="current"> 13 <a-steps :current="current">
7 <a-step title="设备配置" /> 14 <a-step title="设备配置" />
@@ -24,276 +31,281 @@ @@ -24,276 +31,281 @@
24 </div> 31 </div>
25 </template> 32 </template>
26 <script lang="ts"> 33 <script lang="ts">
27 -import {  
28 - defineComponent,  
29 - nextTick,  
30 - ref,  
31 - computed,  
32 - unref,  
33 - getCurrentInstance,  
34 - reactive,  
35 -} from 'vue';  
36 -import { BasicModal, useModalInner } from '/@/components/Modal';  
37 -import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';  
38 -import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';  
39 -import { Steps } from 'ant-design-vue';  
40 -import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';  
41 -import { useMessage } from '/@/hooks/web/useMessage';  
42 -  
43 -export default defineComponent({  
44 - name: 'DeviceModal',  
45 - components: {  
46 - BasicModal,  
47 - DeviceProfileStep1,  
48 - DeviceProfileStep2,  
49 - [Steps.name]: Steps,  
50 - [Steps.Step.name]: Steps.Step,  
51 - },  
52 - props: {  
53 - userData: { type: Object },  
54 - },  
55 - emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],  
56 - setup(_, { emit }) {  
57 - const { proxy } = getCurrentInstance() as any;  
58 - const DeviceProfileStep1Ref = ref(null);  
59 - const DeviceProfileStep2Ref = ref(null);  
60 - const { createMessage } = useMessage();  
61 - let postDeviceConfogData: any = reactive({});  
62 - let getStepOneData: any = reactive({});  
63 - let getStepTwoData: any = reactive({});  
64 - const editData: any = ref({});  
65 - const postEditId = ref('');  
66 - const createTime = ref('');  
67 - const current = ref(0);  
68 - const isUpdate = ref(0);  
69 - const isShowOkBtnFalse = ref(true);  
70 - const isNextStatus = ref(false);  
71 - let transportTypeObj = reactive({  
72 - transportType: '',  
73 - });  
74 - let profileDataObj: any = reactive({  
75 - profileData: null,  
76 - });  
77 - let isEdit = ref(true);  
78 - let noEditObj: any = reactive({});  
79 - const getTitle = computed(() =>  
80 - isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'  
81 - );  
82 - const editTransportType = ref('');  
83 - const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));  
84 - const [register, { closeModal }] = useModalInner(async (data) => {  
85 - isUpdate.value = data.isUpdate;  
86 - if (isUpdate.value == 1) {  
87 - handleCancel();  
88 - isShowOkBtnFalse.value = true;  
89 - current.value = 0;  
90 - isEdit.value = false;  
91 - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)  
92 - } else if (isUpdate.value == 2) {  
93 - isEdit.value = true;  
94 - handleCancel();  
95 - isShowOkBtnFalse.value = true;  
96 - current.value = 0;  
97 - postEditId.value = data.record.id;  
98 - createTime.value = data.record.createTime;  
99 - editTransportType.value = data.record.transportType;  
100 - editData.value = await deviceConfigGetDetail(postEditId.value);  
101 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
102 - name: editData.value.name,  
103 - defaultRuleChainId: editData.value.defaultRuleChainId,  
104 - defaultQueueName: editData.value.defaultQueueName,  
105 - description: editData.value.description,  
106 - image: editData.value.image,  
107 - });  
108 - if (editData.value.default) {  
109 - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true)  
110 -  
111 - } else {  
112 - proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false) 34 + import {
  35 + defineComponent,
  36 + nextTick,
  37 + ref,
  38 + computed,
  39 + unref,
  40 + getCurrentInstance,
  41 + reactive,
  42 + } from 'vue';
  43 + 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';
  47 + import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  48 + import { useMessage } from '/@/hooks/web/useMessage';
113 49
  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 + id: editData.value.id,
  124 + name: editData.value?.name,
  125 + createTime: createTime.value,
  126 + transportType: editTransportType.value,
  127 + type: editData.value?.type,
  128 + profileData: editData.value?.profileData,
  129 + defaultQueueName: editData.value.defaultQueueName,
  130 + image: editData.value.image,
  131 + defaultRuleChainId: editData.value.defaultRuleChainId,
  132 + description: editData.value.description,
  133 + tenantId: editData.value.tenantId,
  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 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
  175 + });
114 } 176 }
115 - noEditObj = {  
116 - id: editData.value.id,  
117 - name: editData.value?.name,  
118 - createTime: createTime.value,  
119 - transportType: editTransportType.value,  
120 - type: editData.value?.type,  
121 - profileData: editData.value?.profileData,  
122 - defaultQueueName: editData.value.defaultQueueName,  
123 - image: editData.value.image,  
124 - defaultRuleChainId: editData.value.defaultRuleChainId,  
125 - description: editData.value.description,  
126 - tenantId: editData.value.tenantId,  
127 - };  
128 - } else if (isUpdate.value == 3) {  
129 - handleCancel();  
130 - isShowOkBtnFalse.value = false;  
131 - current.value = 0;  
132 - postEditId.value = data.record.id;  
133 - createTime.value = data.record.createTime;  
134 - editData.value = await deviceConfigGetDetail(postEditId.value);  
135 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
136 - name: editData.value.name,  
137 - defaultRuleChainId: editData.value.defaultRuleChainId,  
138 - defaultQueueName: editData.value.defaultQueueName,  
139 - description: editData.value.description,  
140 - image: editData.value.image,  
141 - });  
142 } 177 }
143 - });  
144 - function handleStepPrev() {  
145 - current.value--;  
146 - if (isUpdate.value == 2) {  
147 - isEdit.value = true;  
148 - noEditObj = {  
149 - id: editData.value.id,  
150 - name: editData.value?.name,  
151 - createTime: createTime.value,  
152 - transportType: editTransportType.value,  
153 - type: editData.value?.type,  
154 - profileData: editData.value?.profileData,  
155 - defaultQueueName: editData.value.defaultQueueName,  
156 - image: editData.value.image,  
157 - defaultRuleChainId: editData.value.defaultRuleChainId,  
158 - description: editData.value.description,  
159 - tenantId: editData.value.tenantId,  
160 - };  
161 - nextTick(async () => {  
162 - let getPic = null; 178 + //第一步
  179 + function handleStepNext1(v, v1) {
  180 + isNextStatus.value = true;
  181 + if (isNextStatus.value) {
  182 + getStepOneData = {
  183 + ...v,
  184 + ...{ image: v1 },
  185 + };
  186 + }
  187 + current.value++;
  188 + if (isUpdate.value == 2) {
  189 + isEdit.value = false;
  190 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  191 + } else if (isUpdate.value == 3) {
  192 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  193 + }
  194 + }
  195 + const handleSubmit = async () => {
  196 + let getPic = null;
  197 + getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
  198 + profileDataObj.profileData = getStepTwoData;
  199 + transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
  200 + delete profileDataObj?.profileData?.transportConfiguration?.transportType;
  201 + //没有点击下一步
  202 + if (!isNextStatus.value) {
163 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func(); 203 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
164 getPic = getStep1Obj.icon; 204 getPic = getStep1Obj.icon;
  205 + getStepOneData = {
  206 + ...getStep1Obj.key,
  207 + ...{ image: getPic },
  208 + };
165 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key); 209 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
166 - });  
167 - }  
168 - }  
169 - //第一步  
170 - function handleStepNext1(v, v1) {  
171 - isNextStatus.value = true;  
172 - if (isNextStatus.value) {  
173 - getStepOneData = {  
174 - ...v,  
175 - ...{ image: v1 },  
176 - };  
177 - }  
178 - current.value++;  
179 - if (isUpdate.value == 2) {  
180 - isEdit.value = false;  
181 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
182 - } else if (isUpdate.value == 3) {  
183 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
184 - }  
185 - }  
186 - const handleSubmit = async () => {  
187 - let getPic = null;  
188 - getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();  
189 - profileDataObj.profileData = getStepTwoData;  
190 - transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;  
191 - delete profileDataObj?.profileData?.transportConfiguration?.transportType;  
192 - //没有点击下一步  
193 - if (!isNextStatus.value) {  
194 - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();  
195 - getPic = getStep1Obj.icon;  
196 - getStepOneData = {  
197 - ...getStep1Obj.key,  
198 - ...{ image: getPic },  
199 - };  
200 - Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);  
201 - }  
202 - const id = isUpdate.value == 1 ? '' : postEditId.value;  
203 - const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value }; 210 + }
  211 + const id = isUpdate.value == 1 ? '' : postEditId.value;
  212 + const postDefaultVal =
  213 + isUpdate.value == 1 ? { default: false } : { default: postDefault.value };
  214 + const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
204 215
205 - if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {  
206 - profileDataObj.profileData = null;  
207 - }  
208 - postDeviceConfogData = {  
209 - ...getStepOneData,  
210 - ...profileDataObj,  
211 - ...transportTypeObj,  
212 - id,  
213 - ...createTimePost,  
214 - };  
215 - if (isUpdate.value == 1) {  
216 - delete postDeviceConfogData.id;  
217 - }  
218 - let isMappingsKey = ref(false);  
219 - let isMappingValue = ref(false);  
220 - let isQueryings = ref(false);  
221 - let isOIDRepet = ref(false);  
222 - postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(  
223 - (f: any) => {  
224 - if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {  
225 - if (f.queryingFrequencyMs == null) {  
226 - isQueryings.value = true;  
227 - return createMessage.error('请填写查询频率'); 216 + if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
  217 + profileDataObj.profileData = null;
  218 + }
  219 + postDeviceConfogData = {
  220 + ...getStepOneData,
  221 + ...profileDataObj,
  222 + ...transportTypeObj,
  223 + id,
  224 + ...postDefaultVal,
  225 + ...createTimePost,
  226 + };
  227 + if (isUpdate.value == 1) {
  228 + delete postDeviceConfogData.id;
  229 + }
  230 + let isMappingsKey = ref(false);
  231 + let isMappingValue = ref(false);
  232 + let isQueryings = ref(false);
  233 + let isOIDRepet = ref(false);
  234 + postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
  235 + (f: any) => {
  236 + if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
  237 + if (f.queryingFrequencyMs == null) {
  238 + isQueryings.value = true;
  239 + return createMessage.error('请填写查询频率');
  240 + } else {
  241 + isQueryings.value = false;
  242 + }
  243 + }
  244 + if (f.mappings.length == 0) {
  245 + isMappingsKey.value = true;
  246 + isMappingValue.value = true;
228 } else { 247 } else {
229 - isQueryings.value = false; 248 + f.mappings.forEach((f1) => {
  249 + const findNoneKey = Object.keys(f1).includes('');
  250 + if (findNoneKey) {
  251 + isMappingsKey.value = true;
  252 + }
  253 + });
  254 + f.mappings.forEach((f2) => {
  255 + const findNoneVal = Object.values(f2).includes('');
  256 + if (findNoneVal) {
  257 + isMappingValue.value = true;
  258 + }
  259 + });
  260 + //新增OID不能重复=====同一层级的OID不能重复
  261 + f.mappings.forEach((item, _) => {
  262 + if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
  263 + isOIDRepet.value = true;
  264 + }
  265 + });
230 } 266 }
231 } 267 }
232 - if (f.mappings.length == 0) {  
233 - isMappingsKey.value = true;  
234 - isMappingValue.value = true;  
235 - } else {  
236 - f.mappings.forEach((f1) => {  
237 - const findNoneKey = Object.keys(f1).includes('');  
238 - if (findNoneKey) {  
239 - isMappingsKey.value = true;  
240 - }  
241 - });  
242 - f.mappings.forEach((f2) => {  
243 - const findNoneVal = Object.values(f2).includes('');  
244 - if (findNoneVal) {  
245 - isMappingValue.value = true;  
246 - }  
247 - });  
248 - //新增OID不能重复=====同一层级的OID不能重复  
249 - f.mappings.forEach((item, _) => {  
250 - if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {  
251 - isOIDRepet.value = true;  
252 - }  
253 - });  
254 - }  
255 - }  
256 - );  
257 - if (isQueryings.value) return createMessage.error('请填写查询频率');  
258 - if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');  
259 - if (isMappingValue.value) return createMessage.error('请填写Date key和OID');  
260 - if (isOIDRepet.value) return createMessage.error('OID不能重复');  
261 - deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)  
262 - .then((res) => {  
263 - if (!res) return;  
264 - createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');  
265 - closeModal();  
266 - emit('success');  
267 - isNextStatus.value = false;  
268 - })  
269 - .catch((e) => {  
270 - // createMessage.error(e); 268 + );
  269 + if (isQueryings.value) return createMessage.error('请填写查询频率');
  270 + if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
  271 + if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
  272 + if (isOIDRepet.value) return createMessage.error('OID不能重复');
  273 + deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
  274 + .then((res) => {
  275 + if (!res) return;
  276 + createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
  277 + closeModal();
  278 + emit('success');
  279 + isNextStatus.value = false;
  280 + })
  281 + .catch((e) => {
  282 + // createMessage.error(e);
  283 + });
  284 + };
  285 + const handleCancel = () => {
  286 + nextTick(() => {
  287 + proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
  288 + proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
271 }); 289 });
272 - };  
273 - const handleCancel = () => {  
274 - nextTick(() => {  
275 - proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();  
276 - proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();  
277 - });  
278 - };  
279 - function handleRedo() {  
280 - current.value = 0;  
281 - }  
282 - return {  
283 - isShowOkBtnFalse,  
284 - DeviceProfileStep2Ref,  
285 - DeviceProfileStep1Ref,  
286 - editData,  
287 - handleSubmit,  
288 - handleCancel,  
289 - register,  
290 - getTitle,  
291 - getViewTitle,  
292 - current,  
293 - handleStepPrev,  
294 - handleStepNext1,  
295 - handleRedo,  
296 - };  
297 - },  
298 -}); 290 + };
  291 + function handleRedo() {
  292 + current.value = 0;
  293 + }
  294 + return {
  295 + isShowOkBtnFalse,
  296 + DeviceProfileStep2Ref,
  297 + DeviceProfileStep1Ref,
  298 + editData,
  299 + handleSubmit,
  300 + handleCancel,
  301 + register,
  302 + getTitle,
  303 + getViewTitle,
  304 + current,
  305 + handleStepPrev,
  306 + handleStepNext1,
  307 + handleRedo,
  308 + };
  309 + },
  310 + });
299 </script> 311 </script>