Showing
8 changed files
with
87 additions
and
21 deletions
... | ... | @@ -41,7 +41,6 @@ |
41 | 41 | const [register, { setModalProps, closeModal }] = useModalInner(async (data) => { |
42 | 42 | setModalProps({ loading: true }); |
43 | 43 | const { text, record } = data || {}; |
44 | - console.log(data, 'data'); | |
45 | 44 | isUpdate.value = record ? true : false; |
46 | 45 | ruleTile.value = text; |
47 | 46 | const { name, additionalInfo, debugMode } = record || {}; | ... | ... |
... | ... | @@ -545,7 +545,14 @@ |
545 | 545 | unref(skipUnwrap.triggerItemRefs)?.forEach((item) => { |
546 | 546 | item.setDisabledProps({ disabled: true }); |
547 | 547 | }); |
548 | - console.log(unref(skipUnwrap.triggerItemRefs), 'skipUnwrap.triggerItemRefs'); | |
548 | + | |
549 | + unref(skipUnwrap.conditionItemRefs)?.forEach((item) => { | |
550 | + item.setDisabledProps({ disabled: true }); | |
551 | + }); | |
552 | + | |
553 | + unref(skipUnwrap.actionItemRefs)?.forEach((item) => { | |
554 | + item.setDisabledProps({ disabled: true }); | |
555 | + }); | |
549 | 556 | } else { |
550 | 557 | updateSchema({ |
551 | 558 | field: 'organizationId', |
... | ... | @@ -554,6 +561,9 @@ |
554 | 561 | unref(skipUnwrap.triggerItemRefs)?.forEach((item) => { |
555 | 562 | item.setCancelDisabled(); |
556 | 563 | }); |
564 | + unref(skipUnwrap.conditionItemRefs)?.forEach((item) => { | |
565 | + item.setCancelDisabled(); | |
566 | + }); | |
557 | 567 | } |
558 | 568 | }); |
559 | 569 | ... | ... |
... | ... | @@ -29,6 +29,7 @@ |
29 | 29 | <template #operationType="{ model, field }"> |
30 | 30 | <Select |
31 | 31 | :options="options" |
32 | + :disabled="disabled" | |
32 | 33 | v-model:value="model[field]" |
33 | 34 | @change="operationType = model[field]" |
34 | 35 | placeholder="请选择比较类型" |
... | ... | @@ -39,6 +40,7 @@ |
39 | 40 | <Input v-model:value="model[field]" placeholder="请输入持续时间"> |
40 | 41 | <template #addonAfter> |
41 | 42 | <Select |
43 | + :disabled="disabled" | |
42 | 44 | v-model:value="model[`timeUnit`]" |
43 | 45 | :options="timeUnitOptions" |
44 | 46 | style="width: 60px" |
... | ... | @@ -58,7 +60,7 @@ |
58 | 60 | </div> |
59 | 61 | </template> |
60 | 62 | <script lang="ts" setup> |
61 | - import { ref, provide, nextTick } from 'vue'; | |
63 | + import { ref, provide, nextTick, unref } from 'vue'; | |
62 | 64 | import { CollapseContainer } from '/@/components/Container/index'; |
63 | 65 | import { BasicForm, useForm } from '/@/components/Form/index'; |
64 | 66 | import { Card, Select, Input, Tooltip } from 'ant-design-vue'; |
... | ... | @@ -86,12 +88,13 @@ |
86 | 88 | const emit = defineEmits(['delete']); |
87 | 89 | const isUpdate = ref(false); |
88 | 90 | const conditionScreeningRef = ref(); |
89 | - const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({ | |
90 | - //TODO-wenwei-修复 | |
91 | - schemas: cloneDeep(trigger_condition_schema), | |
92 | - //TODO-wenwei-修复 | |
93 | - showActionButtonGroup: false, | |
94 | - }); | |
91 | + const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue, setProps }] = | |
92 | + useForm({ | |
93 | + //TODO-wenwei-修复 | |
94 | + schemas: cloneDeep(trigger_condition_schema), | |
95 | + //TODO-wenwei-修复 | |
96 | + showActionButtonGroup: false, | |
97 | + }); | |
95 | 98 | |
96 | 99 | const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>(); |
97 | 100 | const getFieldsValueFunc = () => { |
... | ... | @@ -144,6 +147,7 @@ |
144 | 147 | const currentIndex = ref(0); |
145 | 148 | const [registerModal, { openModal }] = useModal(); |
146 | 149 | const handleScheduleChange = (value) => { |
150 | + if (unref(disabled)) return; | |
147 | 151 | const index = scheduleOptions.findIndex((item) => item.value === value); |
148 | 152 | // 报警日程弹窗 |
149 | 153 | if (index !== 0) { |
... | ... | @@ -164,6 +168,16 @@ |
164 | 168 | currentIndex.value = index; |
165 | 169 | }; |
166 | 170 | const scheduleData = ref(null); |
171 | + | |
172 | + const disabled = ref<boolean>(false); | |
173 | + const setDisabledProps = (value) => { | |
174 | + setProps(value); | |
175 | + disabled.value = true; | |
176 | + }; | |
177 | + | |
178 | + const setCancelDisabled = () => { | |
179 | + disabled.value = false; | |
180 | + }; | |
167 | 181 | defineExpose({ |
168 | 182 | getFieldsValue, |
169 | 183 | updateFieldDeviceId, |
... | ... | @@ -182,6 +196,8 @@ |
182 | 196 | isUpdate, |
183 | 197 | alarmScheduleRef, |
184 | 198 | updateFieldAttributeFunc, |
199 | + setDisabledProps, | |
200 | + setCancelDisabled, | |
185 | 201 | }); |
186 | 202 | </script> |
187 | 203 | <style> | ... | ... |
... | ... | @@ -31,8 +31,11 @@ |
31 | 31 | const emit = defineEmits(['deleteConditionForm']); |
32 | 32 | const operationType = inject('operationType'); |
33 | 33 | let schemas = ref([]); |
34 | + const isViewDisabledBtn = window.localStorage.getItem('isViewDisabledBtn'); | |
34 | 35 | onMounted(() => { |
35 | 36 | schemas.value = isType(operationType.value); |
37 | + | |
38 | + if (isViewDisabledBtn == 'isView') setProps({ disabled: true }); | |
36 | 39 | }); |
37 | 40 | watch(operationType, (newValue) => { |
38 | 41 | schemas.value = isType(newValue); |
... | ... | @@ -47,6 +50,7 @@ |
47 | 50 | getFieldsValue, |
48 | 51 | setFieldsValue, |
49 | 52 | validate, |
53 | + setProps, | |
50 | 54 | }, |
51 | 55 | ] = useForm({ |
52 | 56 | showActionButtonGroup: false, |
... | ... | @@ -55,6 +59,7 @@ |
55 | 59 | schemas, |
56 | 60 | }); |
57 | 61 | const deleteConditionForm = (index: number) => { |
62 | + if (isViewDisabledBtn == 'isView') return; | |
58 | 63 | emit('deleteConditionForm', index); |
59 | 64 | }; |
60 | 65 | // ft add | ... | ... |
... | ... | @@ -6,13 +6,12 @@ |
6 | 6 | <div class="flex"> |
7 | 7 | <span class="mr-2">启用规则:</span> |
8 | 8 | <template v-for="(item, scheduleIndex) in scheduleOptions" :key="item.label"> |
9 | - <a-button | |
10 | - type="link" | |
9 | + <div | |
11 | 10 | :class="{ 'ml-4': scheduleIndex >= 1, active: scheduleIndex === currentIndex }" |
12 | 11 | class="cursor-pointer !p-0" |
13 | 12 | :disabled="disabled" |
14 | 13 | @click="handleScheduleChange(item.value)" |
15 | - >{{ item.label }}</a-button | |
14 | + >{{ item.label }}</div | |
16 | 15 | > |
17 | 16 | </template> |
18 | 17 | </div> |
... | ... | @@ -75,6 +74,7 @@ |
75 | 74 | import { Icon } from '/@/components/Icon'; |
76 | 75 | import { useModal } from '/@/components/Modal'; |
77 | 76 | import { useMessage } from '/@/hooks/web/useMessage'; |
77 | + import { unref } from 'vue'; | |
78 | 78 | |
79 | 79 | const { useByProductGetAttribute } = useCommonFun(); |
80 | 80 | defineProps({ |
... | ... | @@ -173,6 +173,7 @@ |
173 | 173 | }; |
174 | 174 | //TODO-fengtao |
175 | 175 | const handleDelete = (params: { index: number; title: string }) => { |
176 | + if (unref(disabled)) return; | |
176 | 177 | emit('delete', params); |
177 | 178 | }; |
178 | 179 | const operationType = ref<string>(''); |
... | ... | @@ -197,6 +198,7 @@ |
197 | 198 | const [registerModal, { openModal }] = useModal(); |
198 | 199 | const currentIndex = ref(0); |
199 | 200 | const handleScheduleChange = (value) => { |
201 | + if (unref(disabled)) return; | |
200 | 202 | const index = scheduleOptions.findIndex((item) => item.value === value); |
201 | 203 | // 报警日程弹窗 |
202 | 204 | if (index !== 0) { | ... | ... |
... | ... | @@ -13,6 +13,7 @@ |
13 | 13 | <BasicForm @register="registerAction"> |
14 | 14 | <template #outTarget="{ model, field }"> |
15 | 15 | <Select |
16 | + :disabled="disabled" | |
16 | 17 | :options="options" |
17 | 18 | v-model:value="model[field]" |
18 | 19 | @change="changeOutTarget" |
... | ... | @@ -24,6 +25,7 @@ |
24 | 25 | <template #alarmConfigSlot="{ model, field }"> |
25 | 26 | <a-select |
26 | 27 | allowClear |
28 | + :disabled="disabled" | |
27 | 29 | placeholder="请选择告警配置" |
28 | 30 | v-model:value="model[field]" |
29 | 31 | style="width: 205px; margin-left: 10px" |
... | ... | @@ -41,14 +43,22 @@ |
41 | 43 | </template> |
42 | 44 | <template #doContext="{ model, field }"> |
43 | 45 | <div v-if="model['transportType'] === TransportTypeEnum.TCP"> |
44 | - <Input v-model:value="model[field]" placeholder="请输入自定义命令" /> | |
46 | + <Input v-model:value="model[field]" :disabled="disabled" placeholder="请输入自定义命令" /> | |
45 | 47 | </div> |
46 | 48 | <div |
47 | 49 | v-show="model['transportType'] !== TransportTypeEnum.TCP" |
48 | 50 | class="flex" |
49 | 51 | style="align-items: center" |
50 | 52 | > |
51 | - <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div> | |
53 | + <div v-show="!disabled" ref="jsoneditorRef" style="height: 100%; width: 100%"></div> | |
54 | + | |
55 | + <a-textarea | |
56 | + v-show="disabled" | |
57 | + :disabled="true" | |
58 | + :value="JSON.stringify(disabledValue)" | |
59 | + :rows="4" | |
60 | + /> | |
61 | + | |
52 | 62 | <a-button style="margin: -5px 0" type="text" @click="handlePremitter">格式化</a-button> |
53 | 63 | <Tooltip |
54 | 64 | :title=" |
... | ... | @@ -64,7 +74,9 @@ |
64 | 74 | </div> |
65 | 75 | </template> |
66 | 76 | <template #clearAlarm> |
67 | - <Checkbox v-model:checked="checked" @change="handleCheckedChange"> 清除告警 </Checkbox> | |
77 | + <Checkbox v-model:checked="checked" :disabled="disabled" @change="handleCheckedChange"> | |
78 | + 清除告警 | |
79 | + </Checkbox> | |
68 | 80 | <Tooltip title="清除告警与触发器一一对应"> |
69 | 81 | <QuestionCircleOutlined /> |
70 | 82 | </Tooltip> |
... | ... | @@ -192,10 +204,11 @@ |
192 | 204 | const changeOutTarget = () => { |
193 | 205 | emit('getActionFormArr'); |
194 | 206 | }; |
195 | - const [registerAction, { getFieldsValue, resetFields, setFieldsValue, validate }] = useForm({ | |
196 | - schemas: actionSchema, | |
197 | - showActionButtonGroup: false, | |
198 | - }); | |
207 | + const [registerAction, { getFieldsValue, resetFields, setFieldsValue, validate, setProps }] = | |
208 | + useForm({ | |
209 | + schemas: actionSchema, | |
210 | + showActionButtonGroup: false, | |
211 | + }); | |
199 | 212 | |
200 | 213 | // 获取整个执行动作表单值 |
201 | 214 | const getFieldsValueFunc = () => { |
... | ... | @@ -369,6 +382,7 @@ |
369 | 382 | }; |
370 | 383 | |
371 | 384 | const handleDelete = (actionIndex) => { |
385 | + if (unref(disabled)) return; | |
372 | 386 | emit('deleteAction', actionIndex); |
373 | 387 | }; |
374 | 388 | |
... | ... | @@ -404,6 +418,8 @@ |
404 | 418 | const jsoneditorRef = ref(); |
405 | 419 | const jsonValue = ref({}); |
406 | 420 | const jsonInstance = ref(); |
421 | + | |
422 | + const disabledValue = ref(); //查看时使用表单全部禁用使用这个来获取表单数据 | |
407 | 423 | onMounted(() => { |
408 | 424 | nextTick(() => { |
409 | 425 | let options = { |
... | ... | @@ -420,6 +436,7 @@ |
420 | 436 | const getJsonValue = () => unref(jsonInstance).get(); |
421 | 437 | const setJsonValue = (Json) => { |
422 | 438 | nextTick(() => { |
439 | + disabledValue.value = Json; | |
423 | 440 | unref(jsonInstance).set(Json); |
424 | 441 | }); |
425 | 442 | }; |
... | ... | @@ -447,6 +464,23 @@ |
447 | 464 | emit('getActionFormArr'); |
448 | 465 | }; |
449 | 466 | |
467 | + const disabled = ref<boolean>(false); | |
468 | + const setDisabledProps = async (value) => { | |
469 | + setProps(value); | |
470 | + disabled.value = true; | |
471 | + await nextTick(); | |
472 | + unref(refItem.clearRuleRefs)?.forEach((item) => { | |
473 | + item.setDisabledProps(value); | |
474 | + }); | |
475 | + }; | |
476 | + | |
477 | + const setCancelDisabled = () => { | |
478 | + disabled.value = false; | |
479 | + unref(refItem.clearRuleRefs)?.forEach((item) => { | |
480 | + item.setCancelDisabled(); | |
481 | + }); | |
482 | + }; | |
483 | + | |
450 | 484 | defineExpose({ |
451 | 485 | getFieldsValue, |
452 | 486 | getFieldsValueFunc, |
... | ... | @@ -467,6 +501,8 @@ |
467 | 501 | clearRuleList, |
468 | 502 | resetConditionForm, |
469 | 503 | handleDropdownVisibleChange, |
504 | + setDisabledProps, | |
505 | + setCancelDisabled, | |
470 | 506 | }); |
471 | 507 | </script> |
472 | 508 | ... | ... |