Showing
9 changed files
with
81 additions
and
78 deletions
1 | 1 | <template> |
2 | 2 | <BasicModal |
3 | 3 | v-bind="$attrs" |
4 | - width="55rem" | |
4 | + width="50rem" | |
5 | 5 | :title="getTitle" |
6 | 6 | @register="register" |
7 | 7 | @cancel="handleCancel" |
... | ... | @@ -19,7 +19,6 @@ |
19 | 19 | <DeviceStep1 |
20 | 20 | @next="handleStep1Next" |
21 | 21 | ref="DeviceStep1Ref" |
22 | - :deviceInfo="deviceInfo" | |
23 | 22 | v-show="current === 0" |
24 | 23 | :isUpdate="!isUpdate" |
25 | 24 | /> |
... | ... | @@ -77,13 +76,12 @@ |
77 | 76 | profile: record.deviceProfile.name, |
78 | 77 | profileId: record.profileId, |
79 | 78 | deviceType: record.deviceType, |
79 | + deviceInfo: record.deviceInfo, | |
80 | 80 | }); |
81 | - deviceInfo.value = record.deviceInfo; | |
82 | 81 | unref(DeviceStep1Ref)?.disabledDeviceType(true); |
83 | 82 | } else { |
84 | 83 | unref(DeviceStep1Ref)?.disabledDeviceType(false); |
85 | 84 | unref(DeviceStep1Ref)?.parentResetPositionState(); |
86 | - deviceInfo.value = {}; | |
87 | 85 | } |
88 | 86 | setModalProps({ loading: false }); |
89 | 87 | }); | ... | ... |
... | ... | @@ -74,7 +74,7 @@ |
74 | 74 | </div> |
75 | 75 | </template> |
76 | 76 | <script lang="ts"> |
77 | - import { defineComponent, ref, nextTick, unref, reactive, watch } from 'vue'; | |
77 | + import { defineComponent, ref, nextTick, unref, reactive } from 'vue'; | |
78 | 78 | import { BasicForm, useForm } from '/@/components/Form'; |
79 | 79 | import { step1Schemas } from '../../config/data'; |
80 | 80 | import { useScript } from '/@/hooks/web/useScript'; |
... | ... | @@ -101,10 +101,6 @@ |
101 | 101 | Col, |
102 | 102 | }, |
103 | 103 | props: { |
104 | - deviceInfo: { | |
105 | - type: Object, | |
106 | - default: () => ({}), | |
107 | - }, | |
108 | 104 | isUpdate: { |
109 | 105 | type: Boolean, |
110 | 106 | }, |
... | ... | @@ -298,6 +294,11 @@ |
298 | 294 | }; |
299 | 295 | // 父组件调用更新字段值的方法 |
300 | 296 | function parentSetFieldsValue(data) { |
297 | + const { deviceInfo } = data; | |
298 | + positionState.longitude = deviceInfo.longitude; | |
299 | + positionState.latitude = deviceInfo.latitude; | |
300 | + positionState.address = deviceInfo.address; | |
301 | + devicePic.value = deviceInfo.avatar; | |
301 | 302 | setFieldsValue(data); |
302 | 303 | } |
303 | 304 | // 父组件调用获取字段值的方法 |
... | ... | @@ -330,17 +331,6 @@ |
330 | 331 | }, |
331 | 332 | }); |
332 | 333 | } |
333 | - | |
334 | - watch( | |
335 | - () => props.deviceInfo, | |
336 | - (newValue) => { | |
337 | - positionState.longitude = newValue.longitude; | |
338 | - positionState.latitude = newValue.latitude; | |
339 | - positionState.address = newValue.address; | |
340 | - devicePic.value = newValue.avatar; | |
341 | - } | |
342 | - ); | |
343 | - | |
344 | 334 | return { |
345 | 335 | resetFields, |
346 | 336 | positionState, |
... | ... | @@ -370,36 +360,8 @@ |
370 | 360 | }); |
371 | 361 | </script> |
372 | 362 | <style lang="less" scoped> |
373 | - .step1 { | |
374 | - &-form { | |
375 | - width: 450px; | |
376 | - margin: 0 auto; | |
377 | - } | |
378 | - | |
379 | - h3 { | |
380 | - margin: 0 0 12px; | |
381 | - font-size: 16px; | |
382 | - line-height: 32px; | |
383 | - color: @text-color; | |
384 | - } | |
385 | - | |
386 | - h4 { | |
387 | - margin: 0 0 4px; | |
388 | - font-size: 14px; | |
389 | - line-height: 22px; | |
390 | - color: @text-color; | |
391 | - } | |
392 | - | |
393 | - p { | |
394 | - color: @text-color; | |
395 | - } | |
396 | - } | |
397 | - | |
398 | - .pay-select { | |
399 | - width: 20%; | |
400 | - } | |
401 | - | |
402 | - .pay-input { | |
403 | - width: 70%; | |
363 | + .step1-form { | |
364 | + width: 450px; | |
365 | + margin: 0 auto; | |
404 | 366 | } |
405 | 367 | </style> | ... | ... |
... | ... | @@ -99,6 +99,7 @@ |
99 | 99 | import Action from './cpns/Action.vue'; |
100 | 100 | import { useUserStore } from '/@/store/modules/user'; |
101 | 101 | import { findOperation } from './config/formatData.ts'; |
102 | + import { formatToDateTime } from '/@/utils/dateUtil'; | |
102 | 103 | |
103 | 104 | const emit = defineEmits(['register', 'success']); |
104 | 105 | |
... | ... | @@ -230,12 +231,25 @@ |
230 | 231 | trigger.triggerCondition.condition.condition.forEach((item, index) => { |
231 | 232 | const formItem = { |
232 | 233 | operation: item.predicate.operation, |
233 | - value: String(item.predicate.value.defaultValue), | |
234 | + value: | |
235 | + valueType === 'DATE_TIME' | |
236 | + ? formatToDateTime( | |
237 | + Number(item.predicate.value.defaultValue), | |
238 | + 'YYYY-MM-DD HH:mm:ss' | |
239 | + ) | |
240 | + : String(item.predicate.value.defaultValue), | |
241 | + ignoreCase: item.valueType === 'STRING' ? item.predicate.ignoreCase : undefined, | |
234 | 242 | }; |
235 | 243 | richTextList.push({ |
236 | 244 | // 查询中文操作符 |
237 | 245 | operation: findOperation(valueType, item.predicate.operation).label, |
238 | - value: String(item.predicate.value.defaultValue), | |
246 | + value: | |
247 | + valueType === 'DATE_TIME' | |
248 | + ? formatToDateTime( | |
249 | + Number(item.predicate.value.defaultValue), | |
250 | + 'YYYY-MM-DD HH:mm:ss' | |
251 | + ) | |
252 | + : String(item.predicate.value.defaultValue), | |
239 | 253 | attribute: trigger.triggerCondition?.condition.condition[0]?.key?.key, |
240 | 254 | }); |
241 | 255 | ConditionScreeningForm.value[index].setFieldsValue(formItem); |
... | ... | @@ -289,12 +303,25 @@ |
289 | 303 | condition.triggerCondition.condition.condition.forEach((item, index) => { |
290 | 304 | const formItem = { |
291 | 305 | operation: item.predicate.operation, |
292 | - value: String(item.predicate.value.defaultValue), | |
306 | + value: | |
307 | + valueType === 'DATE_TIME' | |
308 | + ? formatToDateTime( | |
309 | + Number(item.predicate.value.defaultValue), | |
310 | + 'YYYY-MM-DD HH:mm:ss' | |
311 | + ) | |
312 | + : String(item.predicate.value.defaultValue), | |
313 | + ignoreCase: item.valueType === 'STRING' ? item.predicate.ignoreCase : undefined, | |
293 | 314 | }; |
294 | 315 | richTextList.push({ |
295 | 316 | // 查询中文操作符 |
296 | 317 | operation: findOperation(valueType, item.predicate.operation).label, |
297 | - value: String(item.predicate.value.defaultValue), | |
318 | + value: | |
319 | + valueType === 'DATE_TIME' | |
320 | + ? formatToDateTime( | |
321 | + Number(item.predicate.value.defaultValue), | |
322 | + 'YYYY-MM-DD HH:mm:ss' | |
323 | + ) | |
324 | + : String(item.predicate.value.defaultValue), | |
298 | 325 | attribute: condition.triggerCondition?.condition.condition[0]?.key?.key, |
299 | 326 | }); |
300 | 327 | ConditionScreeningForm.value[index].setFieldsValue(formItem); |
... | ... | @@ -389,12 +416,26 @@ |
389 | 416 | rule.triggerCondition.condition.condition.forEach((item, conditionIndex) => { |
390 | 417 | const formItem = { |
391 | 418 | operation: item.predicate.operation, |
392 | - value: String(item.predicate.value.defaultValue), | |
419 | + value: | |
420 | + item.valueType === 'DATE_TIME' | |
421 | + ? formatToDateTime( | |
422 | + Number(item.predicate.value.defaultValue), | |
423 | + 'YYYY-MM-DD HH:mm:ss' | |
424 | + ) | |
425 | + : String(item.predicate.value.defaultValue), | |
426 | + ignoreCase: | |
427 | + item.valueType === 'STRING' ? item.predicate.ignoreCase : undefined, | |
393 | 428 | }; |
394 | 429 | richTextList.push({ |
395 | 430 | // 查询中文操作符 |
396 | 431 | operation: findOperation(item.valueType, item.predicate.operation).label, |
397 | - value: String(item.predicate.value.defaultValue), | |
432 | + value: | |
433 | + item.valueType === 'DATE_TIME' | |
434 | + ? formatToDateTime( | |
435 | + Number(item.predicate.value.defaultValue), | |
436 | + 'YYYY-MM-DD HH:mm:ss' | |
437 | + ) | |
438 | + : String(item.predicate.value.defaultValue), | |
398 | 439 | attribute: item?.key?.key, |
399 | 440 | }); |
400 | 441 | ConditionScreeningForm[ruleIndex].value[conditionIndex].setFieldsValue( | ... | ... |
... | ... | @@ -28,6 +28,7 @@ export const genTriggerOrConditionData = (triggerData) => { |
28 | 28 | predicate: { |
29 | 29 | type: operationType === 'DATE_TIME' ? 'NUMERIC' : operationType, |
30 | 30 | operation: item.operation, |
31 | + ignoreCase: operationType === 'STRING' ? item.ignoreCase : undefined, | |
31 | 32 | value: { |
32 | 33 | defaultValue: |
33 | 34 | operationType === 'DATE_TIME' ? Number(formatToDateTime(item.value, 'x')) : item.value, |
... | ... | @@ -75,7 +76,6 @@ export const genActionData = (actionData) => { |
75 | 76 | device, |
76 | 77 | deviceId, |
77 | 78 | } = actionData; |
78 | - console.log(actionData); | |
79 | 79 | const clearRule = clearRules.map((item) => { |
80 | 80 | const mapPredicate = item.predicate.map((pred) => { |
81 | 81 | return { |
... | ... | @@ -88,6 +88,7 @@ export const genActionData = (actionData) => { |
88 | 88 | predicate: { |
89 | 89 | type: item.operationType, |
90 | 90 | operation: pred.operation, |
91 | + ignoreCase: item.operationType === 'STRING' ? pred.ignoreCase : undefined, | |
91 | 92 | value: { |
92 | 93 | defaultValue: pred.value, |
93 | 94 | // userValue: null, |
... | ... | @@ -205,6 +206,8 @@ export function findOperation(valueType, operation) { |
205 | 206 | switch (valueType) { |
206 | 207 | case 'NUMERIC' || 'DATE_TIME': |
207 | 208 | return operationNumber_OR_TIME.find((item) => item.value === operation); |
209 | + case 'DATE_TIME': | |
210 | + return operationNumber_OR_TIME.find((item) => item.value === operation); | |
208 | 211 | case 'STRING': |
209 | 212 | return operationString.find((item) => item.value === operation); |
210 | 213 | case 'BOOLEAN': |
... | ... | @@ -244,9 +247,8 @@ export function isType(operationType) { |
244 | 247 | field: 'ignoreCase', |
245 | 248 | label: '忽略大小写', |
246 | 249 | component: 'Checkbox', |
247 | - labelWidth: 150, | |
248 | 250 | colProps: { |
249 | - span: 7, | |
251 | + span: 6, | |
250 | 252 | }, |
251 | 253 | }, |
252 | 254 | { |
... | ... | @@ -254,6 +256,7 @@ export function isType(operationType) { |
254 | 256 | label: '执行操作', |
255 | 257 | component: 'Select', |
256 | 258 | required: true, |
259 | + | |
257 | 260 | componentProps: { |
258 | 261 | options: operationString, |
259 | 262 | }, |
... | ... | @@ -265,6 +268,7 @@ export function isType(operationType) { |
265 | 268 | field: 'value', |
266 | 269 | label: '操作值', |
267 | 270 | required: true, |
271 | + | |
268 | 272 | component: 'Input', |
269 | 273 | colProps: { |
270 | 274 | span: 7, |
... | ... | @@ -318,7 +322,7 @@ export function isType(operationType) { |
318 | 322 | options: operationNumber_OR_TIME, |
319 | 323 | }, |
320 | 324 | colProps: { |
321 | - span: 8, | |
325 | + span: 7, | |
322 | 326 | }, |
323 | 327 | }, |
324 | 328 | { |
... | ... | @@ -330,7 +334,7 @@ export function isType(operationType) { |
330 | 334 | showTime: true, |
331 | 335 | }, |
332 | 336 | colProps: { |
333 | - span: 8, | |
337 | + span: 10, | |
334 | 338 | }, |
335 | 339 | }, |
336 | 340 | ]; | ... | ... |
... | ... | @@ -11,19 +11,19 @@ |
11 | 11 | <BasicForm @register="registerForm" ref="basicFormRef"> |
12 | 12 | <template #customEnable> |
13 | 13 | <template v-for="(item, optionIndex) in options" :key="item.flag"> |
14 | - <div :class="optionIndex >= 1 ? 'mt-4' : ''"> | |
15 | - <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox> | |
14 | + <div :class="optionIndex >= 1 ? 'mt-4' : ''" class="flex"> | |
15 | + <div class="ml-4 mr-4 flex items-center"> | |
16 | + <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox> | |
17 | + </div> | |
16 | 18 | <TimePicker |
17 | - size="small" | |
18 | 19 | placeholder="开始时间" |
19 | 20 | v-model:value="item.startsOn" |
20 | 21 | value-format="x" |
21 | 22 | format="HH:mm" |
22 | 23 | :disabled="!item.enabled" |
23 | 24 | /> |
24 | - ~ | |
25 | + <span class="ml-4 mr-4 flex items-center">~</span> | |
25 | 26 | <TimePicker |
26 | - size="small" | |
27 | 27 | placeholder="结束时间" |
28 | 28 | v-model:value="item.endsOn" |
29 | 29 | value-format="x" |
... | ... | @@ -34,15 +34,13 @@ |
34 | 34 | </template> |
35 | 35 | <template #timing> |
36 | 36 | <TimePicker |
37 | - size="small" | |
38 | 37 | placeholder="开始时间" |
39 | 38 | v-model:value="timeState.startsOn" |
40 | 39 | value-format="x" |
41 | 40 | format="HH:mm" |
42 | 41 | /> |
43 | - ~ | |
42 | + <span class="ml-4 mr-4">~</span> | |
44 | 43 | <TimePicker |
45 | - size="small" | |
46 | 44 | placeholder="结束时间" |
47 | 45 | v-model:value="timeState.endsOn" |
48 | 46 | value-format="x" |
... | ... | @@ -59,6 +57,7 @@ |
59 | 57 | import { BasicForm, useForm } from '/@/components/Form'; |
60 | 58 | import { alarmScheduleSchemas } from '../config/config.data.ts'; |
61 | 59 | import { Checkbox, TimePicker } from 'ant-design-vue'; |
60 | + | |
62 | 61 | const emit = defineEmits(['register', 'cancel']); |
63 | 62 | const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({ |
64 | 63 | showActionButtonGroup: false, |
... | ... | @@ -238,4 +237,8 @@ |
238 | 237 | }); |
239 | 238 | </script> |
240 | 239 | |
241 | -<style lang="less" scoped></style> | |
240 | +<style lang="less" scoped> | |
241 | + :deep(.ant-time-picker) { | |
242 | + width: 12rem; | |
243 | + } | |
244 | +</style> | ... | ... |
... | ... | @@ -92,7 +92,6 @@ |
92 | 92 | const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map( |
93 | 93 | (item) => item.getFieldsValue() |
94 | 94 | ); |
95 | - | |
96 | 95 | return { ...getFieldsValue(), predicate, schedule: alarmScheduleRef.value.scheduleData }; |
97 | 96 | }; |
98 | 97 | const updateFieldDeviceId = (deviceList: any[]) => { | ... | ... |