Showing
9 changed files
with
655 additions
and
109 deletions
src/assets/images/close.png
0 → 100644
623 Bytes
1 | <template> | 1 | <template> |
2 | <div class="step3"> | 2 | <div class="step3"> |
3 | <template v-for="(item, index) in profileData" :key="item.id"> | 3 | <template v-for="(item, index) in profileData" :key="item.id"> |
4 | - <CollapseContainer class="border mb-8"> | 4 | + <CollapseContainer class="border mb-1"> |
5 | <template #action> | 5 | <template #action> |
6 | <div @click="deleteAlarmRule(index)" class="cursor-pointer"> | 6 | <div @click="deleteAlarmRule(index)" class="cursor-pointer"> |
7 | <DeleteOutlined style="font-size: 20px" class="mr-2" /> | 7 | <DeleteOutlined style="font-size: 20px" class="mr-2" /> |
8 | </div> | 8 | </div> |
9 | </template> | 9 | </template> |
10 | <div style="margin-left: -30px"> <BasicForm @register="registerForm" /></div> | 10 | <div style="margin-left: -30px"> <BasicForm @register="registerForm" /></div> |
11 | - <CollapseContainer> | ||
12 | - <template #action> 高级设置 </template> | 11 | + <CollapseContainer style="margin-top: -20px"> |
12 | + <template #action> </template> | ||
13 | <div style="margin-left: 10px"> | 13 | <div style="margin-left: 10px"> |
14 | <BasicForm @register="registerFormHighSetting"> | 14 | <BasicForm @register="registerFormHighSetting"> |
15 | <template #checkBox="{ model, field }"> | 15 | <template #checkBox="{ model, field }"> |
@@ -20,7 +20,7 @@ | @@ -20,7 +20,7 @@ | ||
20 | </CollapseContainer> | 20 | </CollapseContainer> |
21 | <p>创建报警规则</p> | 21 | <p>创建报警规则</p> |
22 | <template v-for="(childItem, createIndex) in item.alarms" :key="childItem.id"> | 22 | <template v-for="(childItem, createIndex) in item.alarms" :key="childItem.id"> |
23 | - <div class="aic mb-4" style="border: 1px solid #bfbfbf"> | 23 | + <div class="aic mb-1" style="border: 1px solid #bfbfbf"> |
24 | <div class="w-3/4"> | 24 | <div class="w-3/4"> |
25 | <div style="margin-left: -30px" | 25 | <div style="margin-left: -30px" |
26 | ><BasicForm @register="registerFormCreateAlarm" | 26 | ><BasicForm @register="registerFormCreateAlarm" |
@@ -55,23 +55,29 @@ | @@ -55,23 +55,29 @@ | ||
55 | </div> | 55 | </div> |
56 | </div> | 56 | </div> |
57 | <div class="w-1/4 flex justify-center"> | 57 | <div class="w-1/4 flex justify-center"> |
58 | - <Tooltip title="移除"> | 58 | + <img |
59 | + style="cursor: pointer" | ||
60 | + @click="deleteCondition(index, createIndex)" | ||
61 | + alt="移除" | ||
62 | + src="../../../../assets/images/close.png" | ||
63 | + /> | ||
64 | + <!-- <Tooltip title="移除"> | ||
59 | <MinusCircleOutlined | 65 | <MinusCircleOutlined |
60 | style="font-size: 25px; color: #305680" | 66 | style="font-size: 25px; color: #305680" |
61 | class="cursor-pointer" | 67 | class="cursor-pointer" |
62 | @click="deleteCondition(index, createIndex)" | 68 | @click="deleteCondition(index, createIndex)" |
63 | /> | 69 | /> |
64 | - </Tooltip> | 70 | + </Tooltip> --> |
65 | </div> | 71 | </div> |
66 | </div> | 72 | </div> |
67 | </template> | 73 | </template> |
68 | - <a-button class="mt-5" @click="addCreateRole(index)" | 74 | + <a-button style="border-radius: 10px" class="mt-5" @click="addCreateRole(index)" |
69 | ><PlusCircleOutlined />添加创建条件</a-button | 75 | ><PlusCircleOutlined />添加创建条件</a-button |
70 | > | 76 | > |
71 | <div style="height: 20px"></div> | 77 | <div style="height: 20px"></div> |
72 | <p>清除报警规则</p> | 78 | <p>清除报警规则</p> |
73 | <template v-for="(childItem, createIndex) in item.clearAlarms" :key="childItem.id"> | 79 | <template v-for="(childItem, createIndex) in item.clearAlarms" :key="childItem.id"> |
74 | - <div class="aic mb-4" style="border: 1px solid #bfbfbf"> | 80 | + <div class="aic mb-1" style="border: 1px solid #bfbfbf"> |
75 | <div class="w-3/4"> | 81 | <div class="w-3/4"> |
76 | <div style="margin-left: 5px"> | 82 | <div style="margin-left: 5px"> |
77 | <p style="color: #f5594e" class="mt-4 ml-4" | 83 | <p style="color: #f5594e" class="mt-4 ml-4" |
@@ -103,17 +109,23 @@ | @@ -103,17 +109,23 @@ | ||
103 | </div> | 109 | </div> |
104 | </div> | 110 | </div> |
105 | <div class="w-1/4 flex justify-center"> | 111 | <div class="w-1/4 flex justify-center"> |
106 | - <Tooltip title="移除"> | 112 | + <img |
113 | + style="cursor: pointer" | ||
114 | + @click="deleteClearCondition(index, createIndex)" | ||
115 | + alt="移除" | ||
116 | + src="../../../../assets/images/close.png" | ||
117 | + /> | ||
118 | + <!-- <Tooltip title="移除"> | ||
107 | <MinusCircleOutlined | 119 | <MinusCircleOutlined |
108 | style="font-size: 25px; color: #305680" | 120 | style="font-size: 25px; color: #305680" |
109 | class="cursor-pointer" | 121 | class="cursor-pointer" |
110 | @click="deleteClearCondition(index, createIndex)" | 122 | @click="deleteClearCondition(index, createIndex)" |
111 | /> | 123 | /> |
112 | - </Tooltip> | 124 | + </Tooltip> --> |
113 | </div> | 125 | </div> |
114 | </div> | 126 | </div> |
115 | </template> | 127 | </template> |
116 | - <a-button class="mt-5" @click="addClearRole(index)" | 128 | + <a-button style="border-radius: 10px" class="mt-5" @click="addClearRole(index)" |
117 | ><PlusCircleOutlined />添加清除条件</a-button | 129 | ><PlusCircleOutlined />添加清除条件</a-button |
118 | > | 130 | > |
119 | </CollapseContainer> | 131 | </CollapseContainer> |
@@ -145,7 +157,7 @@ | @@ -145,7 +157,7 @@ | ||
145 | @register="registerModal3" | 157 | @register="registerModal3" |
146 | /> | 158 | /> |
147 | 159 | ||
148 | - <!-- 清除条件的 --> | 160 | + <!-- 清除条件 --> |
149 | <!-- 详情模板 --> | 161 | <!-- 详情模板 --> |
150 | <DetailTemplate | 162 | <DetailTemplate |
151 | v-if="isRuleAlarmRuleConditions == 4" | 163 | v-if="isRuleAlarmRuleConditions == 4" |
@@ -222,7 +234,9 @@ | @@ -222,7 +234,9 @@ | ||
222 | const ruleObj: any = ref({}); | 234 | const ruleObj: any = ref({}); |
223 | const ruleLastObj: any = ref({}); | 235 | const ruleLastObj: any = ref({}); |
224 | const enableObj: any = ref({}); | 236 | const enableObj: any = ref({}); |
237 | + const enableClearObj: any = ref({}); | ||
225 | const additionalObj: any = ref({}); | 238 | const additionalObj: any = ref({}); |
239 | + const addClearitionalObj: any = ref({}); | ||
226 | const isWhereTypeValue = ref(null); | 240 | const isWhereTypeValue = ref(null); |
227 | const ruleTemplateData: any = ref(null); | 241 | const ruleTemplateData: any = ref(null); |
228 | const enableTemplateData: any = ref(null); | 242 | const enableTemplateData: any = ref(null); |
@@ -415,7 +429,7 @@ | @@ -415,7 +429,7 @@ | ||
415 | } | 429 | } |
416 | }); | 430 | }); |
417 | ruleTemplateData.value = ` | 431 | ruleTemplateData.value = ` |
418 | - 键名:${v.key}...操作:${findRuleByValue?.label}...值:${v.value1} | 432 | + 键名:${v.key1}...操作:${findRuleByValue?.label}...值:${v.value1} |
419 | `; | 433 | `; |
420 | 434 | ||
421 | ruleLastObj.value = v1; | 435 | ruleLastObj.value = v1; |
@@ -443,7 +457,7 @@ | @@ -443,7 +457,7 @@ | ||
443 | { | 457 | { |
444 | key: { | 458 | key: { |
445 | type: ruleObj.value?.type, | 459 | type: ruleObj.value?.type, |
446 | - key: ruleObj.value?.key, | 460 | + key: ruleObj.value?.key1, |
447 | }, | 461 | }, |
448 | valueType: ruleObj.value.type1, | 462 | valueType: ruleObj.value.type1, |
449 | predicate, | 463 | predicate, |
@@ -466,7 +480,7 @@ | @@ -466,7 +480,7 @@ | ||
466 | }; | 480 | }; |
467 | //启用规则 | 481 | //启用规则 |
468 | const getAllClearFieldsEnabFunc = (v) => { | 482 | const getAllClearFieldsEnabFunc = (v) => { |
469 | - enableObj.value = v; | 483 | + enableClearObj.value = v; |
470 | const findDay = [ | 484 | const findDay = [ |
471 | { | 485 | { |
472 | label: '星期一', | 486 | label: '星期一', |
@@ -533,7 +547,7 @@ | @@ -533,7 +547,7 @@ | ||
533 | } | 547 | } |
534 | }); | 548 | }); |
535 | ruleClearTemplateData.value = ` | 549 | ruleClearTemplateData.value = ` |
536 | - 键名:${v.key}...操作:${findRuleByValue?.label}...值:${v.value1} | 550 | + 键名:${v.key1}...操作:${findRuleByValue?.label}...值:${v.value1} |
537 | `; | 551 | `; |
538 | 552 | ||
539 | ruleLastObj.value = v1; | 553 | ruleLastObj.value = v1; |
@@ -561,7 +575,7 @@ | @@ -561,7 +575,7 @@ | ||
561 | { | 575 | { |
562 | key: { | 576 | key: { |
563 | type: ruleObj.value?.type, | 577 | type: ruleObj.value?.type, |
564 | - key: ruleObj.value?.key, | 578 | + key: ruleObj.value?.key1, |
565 | }, | 579 | }, |
566 | valueType: ruleObj.value.type1, | 580 | valueType: ruleObj.value.type1, |
567 | predicate, | 581 | predicate, |
@@ -572,11 +586,21 @@ | @@ -572,11 +586,21 @@ | ||
572 | const getValueConditon = { | 586 | const getValueConditon = { |
573 | condition: getCondition, | 587 | condition: getCondition, |
574 | }; | 588 | }; |
575 | - Object.assign(additionalObj.value, getValueConditon); | 589 | + Object.assign(addClearitionalObj.value, getValueConditon); |
576 | }; | 590 | }; |
577 | - | ||
578 | const handleFormStep3toStep4Next = async () => { | 591 | const handleFormStep3toStep4Next = async () => { |
579 | try { | 592 | try { |
593 | + const scheduleClearValue = { | ||
594 | + type: enableClearObj.value.schedule, | ||
595 | + daysOfWeek: enableClearObj.value.daysOfWeek, | ||
596 | + // endsOn: enableClearObj.value.endsOn, | ||
597 | + // startsOn: enableClearObj.value.startOn, | ||
598 | + timezone: enableClearObj.value.timezone, | ||
599 | + }; | ||
600 | + const getClearSchedule = { | ||
601 | + schedule: scheduleClearValue, | ||
602 | + }; | ||
603 | + const getClearAdditionalProp = Object.assign({}, detailObj.value, getClearSchedule); | ||
580 | const scheduleValue = { | 604 | const scheduleValue = { |
581 | type: enableObj.value.schedule, | 605 | type: enableObj.value.schedule, |
582 | daysOfWeek: enableObj.value.daysOfWeek, | 606 | daysOfWeek: enableObj.value.daysOfWeek, |
@@ -595,8 +619,8 @@ | @@ -595,8 +619,8 @@ | ||
595 | ); | 619 | ); |
596 | const getScheduleAndClearAlarmDetails = Object.assign( | 620 | const getScheduleAndClearAlarmDetails = Object.assign( |
597 | {}, | 621 | {}, |
598 | - getAdditionalProp, | ||
599 | - additionalObj.value | 622 | + getClearAdditionalProp, |
623 | + addClearitionalObj.value | ||
600 | ); | 624 | ); |
601 | const getIsWhereTypeValue: any = isWhereTypeValue.value; | 625 | const getIsWhereTypeValue: any = isWhereTypeValue.value; |
602 | const getAdditionalPropObj = { | 626 | const getAdditionalPropObj = { |
@@ -735,11 +759,13 @@ | @@ -735,11 +759,13 @@ | ||
735 | } | 759 | } |
736 | .border { | 760 | .border { |
737 | border: 1px solid #bfbfbf; | 761 | border: 1px solid #bfbfbf; |
762 | + border-radius: 10px; | ||
738 | } | 763 | } |
739 | 764 | ||
740 | .aic { | 765 | .aic { |
741 | display: flex; | 766 | display: flex; |
742 | align-items: center; | 767 | align-items: center; |
768 | + border-radius: 10px; | ||
743 | } | 769 | } |
744 | 770 | ||
745 | :deep(.vben-collapse-container__header) { | 771 | :deep(.vben-collapse-container__header) { |
@@ -30,10 +30,10 @@ export const isTimeAll = (type: string) => { | @@ -30,10 +30,10 @@ export const isTimeAll = (type: string) => { | ||
30 | return type === TriggerEnum.IS_SCENE_ACT; | 30 | return type === TriggerEnum.IS_SCENE_ACT; |
31 | }; | 31 | }; |
32 | 32 | ||
33 | -export const columns: BasicColumn[] = [ | 33 | +export const keyColumns: BasicColumn[] = [ |
34 | { | 34 | { |
35 | title: '键名', | 35 | title: '键名', |
36 | - dataIndex: 'key', | 36 | + dataIndex: 'key1', |
37 | width: 200, | 37 | width: 200, |
38 | }, | 38 | }, |
39 | { | 39 | { |
@@ -45,19 +45,48 @@ export const columns: BasicColumn[] = [ | @@ -45,19 +45,48 @@ export const columns: BasicColumn[] = [ | ||
45 | export const columnsView: BasicColumn[] = [ | 45 | export const columnsView: BasicColumn[] = [ |
46 | { | 46 | { |
47 | title: '键名', | 47 | title: '键名', |
48 | - dataIndex: 'key', | 48 | + dataIndex: 'key1', |
49 | width: 200, | 49 | width: 200, |
50 | }, | 50 | }, |
51 | { | 51 | { |
52 | - title: '键类型', | ||
53 | - dataIndex: 'type', | 52 | + title: '操作', |
53 | + dataIndex: 'operation', | ||
54 | + width: 200, | ||
55 | + format: (text: string, record: Recordable) => { | ||
56 | + const findDay = [ | ||
57 | + { label: '等于', value: 'EQUAL' }, | ||
58 | + { label: '不等于', value: 'NOT_EQUAL' }, | ||
59 | + { label: '开始于', value: 'STARTS_WITH' }, | ||
60 | + { label: '结束于', value: 'ENDS_WITH' }, | ||
61 | + { label: '包含', value: 'CONTAINS' }, | ||
62 | + { label: '不包含', value: 'NOT_CONTAINS' }, | ||
63 | + { label: '等于', value: 'EQUAL' }, | ||
64 | + { label: '不等于', value: 'NOT_EQUAL' }, | ||
65 | + { label: '大于', value: 'GREATER' }, | ||
66 | + { label: '小于', value: 'LESS' }, | ||
67 | + { label: '大于或等于', value: 'GREATER_OR_EQUAL' }, | ||
68 | + { label: '小于或等于', value: 'LESS_OR_EQUAL' }, | ||
69 | + ]; | ||
70 | + const findRuleByValue = findDay.find((f) => { | ||
71 | + if (f.value == record.operation) { | ||
72 | + return f.label; | ||
73 | + } | ||
74 | + }); | ||
75 | + if (findRuleByValue) { | ||
76 | + return findRuleByValue.label; | ||
77 | + } | ||
78 | + }, | ||
79 | + }, | ||
80 | + { | ||
81 | + title: '值', | ||
82 | + dataIndex: 'value1', | ||
54 | width: 200, | 83 | width: 200, |
55 | }, | 84 | }, |
56 | ]; | 85 | ]; |
57 | 86 | ||
58 | export const DescDetailSchema: DescItem[] = [ | 87 | export const DescDetailSchema: DescItem[] = [ |
59 | { | 88 | { |
60 | - field: 'key', | 89 | + field: 'key1', |
61 | label: '键名', | 90 | label: '键名', |
62 | }, | 91 | }, |
63 | { | 92 | { |
@@ -96,6 +125,9 @@ export const formSchema: FormSchema[] = [ | @@ -96,6 +125,9 @@ export const formSchema: FormSchema[] = [ | ||
96 | ], | 125 | ], |
97 | }, | 126 | }, |
98 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), | 127 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), |
128 | + show: ({ values }) => { | ||
129 | + return !!values.field5; | ||
130 | + }, | ||
99 | }, | 131 | }, |
100 | { | 132 | { |
101 | field: 'sourceAttribute', | 133 | field: 'sourceAttribute', |
@@ -106,6 +138,9 @@ export const formSchema: FormSchema[] = [ | @@ -106,6 +138,9 @@ export const formSchema: FormSchema[] = [ | ||
106 | placeholder: '源属性', | 138 | placeholder: '源属性', |
107 | }, | 139 | }, |
108 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), | 140 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), |
141 | + show: ({ values }) => { | ||
142 | + return !!values.field5; | ||
143 | + }, | ||
109 | }, | 144 | }, |
110 | { | 145 | { |
111 | field: 'sourceType', | 146 | field: 'sourceType', |
@@ -122,6 +157,9 @@ export const formSchema: FormSchema[] = [ | @@ -122,6 +157,9 @@ export const formSchema: FormSchema[] = [ | ||
122 | ], | 157 | ], |
123 | }, | 158 | }, |
124 | ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), | 159 | ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), |
160 | + show: ({ values }) => { | ||
161 | + return !!values.field6; | ||
162 | + }, | ||
125 | }, | 163 | }, |
126 | { | 164 | { |
127 | field: 'sourceAttribute', | 165 | field: 'sourceAttribute', |
@@ -132,6 +170,9 @@ export const formSchema: FormSchema[] = [ | @@ -132,6 +170,9 @@ export const formSchema: FormSchema[] = [ | ||
132 | placeholder: '源属性', | 170 | placeholder: '源属性', |
133 | }, | 171 | }, |
134 | ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), | 172 | ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), |
173 | + show: ({ values }) => { | ||
174 | + return !!values.field6; | ||
175 | + }, | ||
135 | }, | 176 | }, |
136 | { | 177 | { |
137 | field: 'defaultValue', | 178 | field: 'defaultValue', |
@@ -142,6 +183,29 @@ export const formSchema: FormSchema[] = [ | @@ -142,6 +183,29 @@ export const formSchema: FormSchema[] = [ | ||
142 | placeholder: '请输入持续时间值(请输入数字)', | 183 | placeholder: '请输入持续时间值(请输入数字)', |
143 | }, | 184 | }, |
144 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), | 185 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), |
186 | + show: ({ values }) => { | ||
187 | + return !values.field5; | ||
188 | + }, | ||
189 | + }, | ||
190 | + { | ||
191 | + field: 'field5', | ||
192 | + component: 'Switch', | ||
193 | + label: '切换到动态值', | ||
194 | + colProps: { | ||
195 | + span: 8, | ||
196 | + }, | ||
197 | + labelWidth: 200, | ||
198 | + ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), | ||
199 | + }, | ||
200 | + { | ||
201 | + field: 'field6', | ||
202 | + component: 'Switch', | ||
203 | + label: '切换到动态值', | ||
204 | + colProps: { | ||
205 | + span: 8, | ||
206 | + }, | ||
207 | + labelWidth: 200, | ||
208 | + ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), | ||
145 | }, | 209 | }, |
146 | { | 210 | { |
147 | field: 'unit', | 211 | field: 'unit', |
@@ -165,10 +229,13 @@ export const formSchema: FormSchema[] = [ | @@ -165,10 +229,13 @@ export const formSchema: FormSchema[] = [ | ||
165 | colProps: { span: 24 }, | 229 | colProps: { span: 24 }, |
166 | component: 'Input', | 230 | component: 'Input', |
167 | componentProps: { | 231 | componentProps: { |
168 | - placeholder: '请输入事件计数值必填(请输入数字)', | 232 | + placeholder: '请输入事件计数值(应在1到2147483637之间)', |
169 | }, | 233 | }, |
170 | rules: [{ message: '事件计数应在1到2147483637之间', trigger: 'blur' }], | 234 | rules: [{ message: '事件计数应在1到2147483637之间', trigger: 'blur' }], |
171 | ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), | 235 | ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), |
236 | + show: ({ values }) => { | ||
237 | + return !values.field6; | ||
238 | + }, | ||
172 | }, | 239 | }, |
173 | { | 240 | { |
174 | field: 'inherit', | 241 | field: 'inherit', |
1 | import { FormSchema } from '/@/components/Table'; | 1 | import { FormSchema } from '/@/components/Table'; |
2 | +import { ref } from 'vue'; | ||
3 | + | ||
4 | +export const isWhereType: any = ref(null); | ||
2 | 5 | ||
3 | /** | 6 | /** |
4 | * 所使用的枚举值 | 7 | * 所使用的枚举值 |
@@ -57,7 +60,7 @@ export const formSchema: FormSchema[] = [ | @@ -57,7 +60,7 @@ export const formSchema: FormSchema[] = [ | ||
57 | }, | 60 | }, |
58 | }, | 61 | }, |
59 | { | 62 | { |
60 | - field: 'key', | 63 | + field: 'key1', |
61 | label: '键名', | 64 | label: '键名', |
62 | colProps: { span: 24 }, | 65 | colProps: { span: 24 }, |
63 | component: 'Input', | 66 | component: 'Input', |
@@ -74,7 +77,7 @@ export const formSchema: FormSchema[] = [ | @@ -74,7 +77,7 @@ export const formSchema: FormSchema[] = [ | ||
74 | ifShow: ({ values }) => isShiDu(Reflect.get(values, 'type')), | 77 | ifShow: ({ values }) => isShiDu(Reflect.get(values, 'type')), |
75 | }, | 78 | }, |
76 | { | 79 | { |
77 | - field: 'key', | 80 | + field: 'key1', |
78 | label: '键名', | 81 | label: '键名', |
79 | colProps: { span: 24 }, | 82 | colProps: { span: 24 }, |
80 | component: 'Input', | 83 | component: 'Input', |
@@ -89,7 +92,7 @@ export const formSchema: FormSchema[] = [ | @@ -89,7 +92,7 @@ export const formSchema: FormSchema[] = [ | ||
89 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'type')), | 92 | ifShow: ({ values }) => isWenDu(Reflect.get(values, 'type')), |
90 | }, | 93 | }, |
91 | { | 94 | { |
92 | - field: 'key', | 95 | + field: 'key1', |
93 | label: '键名', | 96 | label: '键名', |
94 | colProps: { span: 24 }, | 97 | colProps: { span: 24 }, |
95 | component: 'Input', | 98 | component: 'Input', |
@@ -111,6 +114,9 @@ export const formSchema: FormSchema[] = [ | @@ -111,6 +114,9 @@ export const formSchema: FormSchema[] = [ | ||
111 | { label: '布尔值', value: 'BOOLEAN' }, | 114 | { label: '布尔值', value: 'BOOLEAN' }, |
112 | { label: '日期时间', value: 'COMPLEX' }, | 115 | { label: '日期时间', value: 'COMPLEX' }, |
113 | ], | 116 | ], |
117 | + onChange: (v) => { | ||
118 | + isWhereType.value = v; | ||
119 | + }, | ||
114 | }, | 120 | }, |
115 | }, | 121 | }, |
116 | { | 122 | { |
@@ -132,6 +138,69 @@ export const formSchema: FormSchema[] = [ | @@ -132,6 +138,69 @@ export const formSchema: FormSchema[] = [ | ||
132 | ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), | 138 | ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), |
133 | }, | 139 | }, |
134 | { | 140 | { |
141 | + field: '', | ||
142 | + label: '大小写', | ||
143 | + component: 'Checkbox', | ||
144 | + colProps: { span: 24 }, | ||
145 | + renderComponentContent: '忽略大小写', | ||
146 | + ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), | ||
147 | + }, | ||
148 | + { | ||
149 | + field: 'sourceType', | ||
150 | + label: '动态源类型', | ||
151 | + colProps: { span: 24 }, | ||
152 | + component: 'Select', | ||
153 | + componentProps: { | ||
154 | + placeholder: '请选择动态源类型', | ||
155 | + options: [ | ||
156 | + { label: '无动态值', value: '' }, | ||
157 | + { label: '当前租户', value: 'CURRENT_TENANT' }, | ||
158 | + { label: '当前客户', value: 'CURRENT_CUSTOMER' }, | ||
159 | + { label: '当前设备', value: 'CURRENT_DEVICE' }, | ||
160 | + ], | ||
161 | + }, | ||
162 | + ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), | ||
163 | + show: ({ values }) => { | ||
164 | + return !!values.field5; | ||
165 | + }, | ||
166 | + }, | ||
167 | + { | ||
168 | + field: 'sourceAttribute', | ||
169 | + label: '源属性', | ||
170 | + colProps: { span: 24 }, | ||
171 | + component: 'Input', | ||
172 | + componentProps: { | ||
173 | + placeholder: '请输入源属性', | ||
174 | + }, | ||
175 | + ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), | ||
176 | + show: ({ values }) => { | ||
177 | + return !!values.field5; | ||
178 | + }, | ||
179 | + }, | ||
180 | + { | ||
181 | + field: 'value1', | ||
182 | + label: '默认值', | ||
183 | + colProps: { span: 24 }, | ||
184 | + component: 'Input', | ||
185 | + componentProps: { | ||
186 | + placeholder: '请输入默认值(数字)', | ||
187 | + }, | ||
188 | + ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), | ||
189 | + show: ({ values }) => { | ||
190 | + return !values.field5; | ||
191 | + }, | ||
192 | + }, | ||
193 | + { | ||
194 | + field: 'field5', | ||
195 | + component: 'Switch', | ||
196 | + label: '切换到动态值', | ||
197 | + colProps: { | ||
198 | + span: 8, | ||
199 | + }, | ||
200 | + labelWidth: 200, | ||
201 | + ifShow: ({ values }) => isString(Reflect.get(values, 'type1')), | ||
202 | + }, | ||
203 | + { | ||
135 | field: 'operation', | 204 | field: 'operation', |
136 | label: '操作', | 205 | label: '操作', |
137 | colProps: { span: 24 }, | 206 | colProps: { span: 24 }, |
@@ -149,6 +218,63 @@ export const formSchema: FormSchema[] = [ | @@ -149,6 +218,63 @@ export const formSchema: FormSchema[] = [ | ||
149 | }, | 218 | }, |
150 | ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')), | 219 | ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')), |
151 | }, | 220 | }, |
221 | + | ||
222 | + { | ||
223 | + field: 'sourceType', | ||
224 | + label: '动态源类型', | ||
225 | + colProps: { span: 24 }, | ||
226 | + component: 'Select', | ||
227 | + componentProps: { | ||
228 | + placeholder: '请选择动态源类型', | ||
229 | + options: [ | ||
230 | + { label: '无动态值', value: '' }, | ||
231 | + { label: '当前租户', value: 'CURRENT_TENANT' }, | ||
232 | + { label: '当前客户', value: 'CURRENT_CUSTOMER' }, | ||
233 | + { label: '当前设备', value: 'CURRENT_DEVICE' }, | ||
234 | + ], | ||
235 | + }, | ||
236 | + ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')), | ||
237 | + show: ({ values }) => { | ||
238 | + return !!values.field6; | ||
239 | + }, | ||
240 | + }, | ||
241 | + { | ||
242 | + field: 'sourceAttribute', | ||
243 | + label: '源属性', | ||
244 | + colProps: { span: 24 }, | ||
245 | + component: 'Input', | ||
246 | + componentProps: { | ||
247 | + placeholder: '请输入源属性', | ||
248 | + }, | ||
249 | + ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')), | ||
250 | + show: ({ values }) => { | ||
251 | + return !!values.field6; | ||
252 | + }, | ||
253 | + }, | ||
254 | + { | ||
255 | + field: 'value1', | ||
256 | + label: '值', | ||
257 | + colProps: { span: 24 }, | ||
258 | + component: 'Input', | ||
259 | + componentProps: { | ||
260 | + placeholder: '请输入值(数字)', | ||
261 | + }, | ||
262 | + ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')), | ||
263 | + show: ({ values }) => { | ||
264 | + return !values.field6; | ||
265 | + }, | ||
266 | + }, | ||
267 | + { | ||
268 | + field: 'field6', | ||
269 | + component: 'Switch', | ||
270 | + label: '切换到动态值', | ||
271 | + colProps: { | ||
272 | + span: 8, | ||
273 | + }, | ||
274 | + labelWidth: 200, | ||
275 | + ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')), | ||
276 | + }, | ||
277 | + | ||
152 | { | 278 | { |
153 | field: 'operation', | 279 | field: 'operation', |
154 | label: '操作', | 280 | label: '操作', |
@@ -164,6 +290,58 @@ export const formSchema: FormSchema[] = [ | @@ -164,6 +290,58 @@ export const formSchema: FormSchema[] = [ | ||
164 | ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')), | 290 | ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')), |
165 | }, | 291 | }, |
166 | { | 292 | { |
293 | + field: '', | ||
294 | + label: '默认值', | ||
295 | + component: 'Checkbox', | ||
296 | + renderComponentContent: '真', | ||
297 | + ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')), | ||
298 | + show: ({ values }) => { | ||
299 | + return !values.field7; | ||
300 | + }, | ||
301 | + }, | ||
302 | + { | ||
303 | + field: 'field7', | ||
304 | + component: 'Switch', | ||
305 | + label: '切换到动态值', | ||
306 | + colProps: { | ||
307 | + span: 8, | ||
308 | + }, | ||
309 | + labelWidth: 200, | ||
310 | + ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')), | ||
311 | + }, | ||
312 | + { | ||
313 | + field: 'sourceType', | ||
314 | + label: '动态源类型', | ||
315 | + colProps: { span: 24 }, | ||
316 | + component: 'Select', | ||
317 | + componentProps: { | ||
318 | + placeholder: '请选择动态源类型', | ||
319 | + options: [ | ||
320 | + { label: '无动态值', value: '' }, | ||
321 | + { label: '当前租户', value: 'CURRENT_TENANT' }, | ||
322 | + { label: '当前客户', value: 'CURRENT_CUSTOMER' }, | ||
323 | + { label: '当前设备', value: 'CURRENT_DEVICE' }, | ||
324 | + ], | ||
325 | + }, | ||
326 | + ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')), | ||
327 | + show: ({ values }) => { | ||
328 | + return !!values.field7; | ||
329 | + }, | ||
330 | + }, | ||
331 | + { | ||
332 | + field: 'sourceAttribute', | ||
333 | + label: '源属性', | ||
334 | + colProps: { span: 24 }, | ||
335 | + component: 'Input', | ||
336 | + componentProps: { | ||
337 | + placeholder: '请输入源属性', | ||
338 | + }, | ||
339 | + ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')), | ||
340 | + show: ({ values }) => { | ||
341 | + return !!values.field7; | ||
342 | + }, | ||
343 | + }, | ||
344 | + { | ||
167 | field: 'operation', | 345 | field: 'operation', |
168 | label: '操作', | 346 | label: '操作', |
169 | colProps: { span: 24 }, | 347 | colProps: { span: 24 }, |
@@ -182,12 +360,78 @@ export const formSchema: FormSchema[] = [ | @@ -182,12 +360,78 @@ export const formSchema: FormSchema[] = [ | ||
182 | ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), | 360 | ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), |
183 | }, | 361 | }, |
184 | { | 362 | { |
185 | - field: 'value1', | ||
186 | - label: '默认值', | 363 | + field: '', |
364 | + component: 'DatePicker', | ||
365 | + label: '请选择日期', | ||
366 | + colProps: { | ||
367 | + span: 12, | ||
368 | + }, | ||
369 | + ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), | ||
370 | + show: ({ values }) => { | ||
371 | + return !values.field8; | ||
372 | + }, | ||
373 | + }, | ||
374 | + { | ||
375 | + field: '', | ||
376 | + component: 'TimePicker', | ||
377 | + label: '请选择时间', | ||
378 | + colProps: { | ||
379 | + span: 8, | ||
380 | + }, | ||
381 | + ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), | ||
382 | + show: ({ values }) => { | ||
383 | + return !values.field8; | ||
384 | + }, | ||
385 | + }, | ||
386 | + { | ||
387 | + field: 'field8', | ||
388 | + component: 'Switch', | ||
389 | + label: '切换到动态值', | ||
390 | + colProps: { | ||
391 | + span: 8, | ||
392 | + }, | ||
393 | + labelWidth: 200, | ||
394 | + ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), | ||
395 | + }, | ||
396 | + { | ||
397 | + field: 'sourceType', | ||
398 | + label: '动态源类型', | ||
399 | + colProps: { span: 24 }, | ||
400 | + component: 'Select', | ||
401 | + componentProps: { | ||
402 | + placeholder: '请选择动态源类型', | ||
403 | + options: [ | ||
404 | + { label: '无动态值', value: '' }, | ||
405 | + { label: '当前租户', value: 'CURRENT_TENANT' }, | ||
406 | + { label: '当前客户', value: 'CURRENT_CUSTOMER' }, | ||
407 | + { label: '当前设备', value: 'CURRENT_DEVICE' }, | ||
408 | + ], | ||
409 | + }, | ||
410 | + ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), | ||
411 | + show: ({ values }) => { | ||
412 | + return !!values.field8; | ||
413 | + }, | ||
414 | + }, | ||
415 | + { | ||
416 | + field: 'sourceAttribute', | ||
417 | + label: '源属性', | ||
187 | colProps: { span: 24 }, | 418 | colProps: { span: 24 }, |
188 | component: 'Input', | 419 | component: 'Input', |
189 | componentProps: { | 420 | componentProps: { |
190 | - placeholder: '请输入默认值(数字)', | 421 | + placeholder: '请输入源属性', |
422 | + }, | ||
423 | + ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')), | ||
424 | + show: ({ values }) => { | ||
425 | + return !!values.field8; | ||
191 | }, | 426 | }, |
192 | }, | 427 | }, |
428 | + // { | ||
429 | + // field: 'value1', | ||
430 | + // label: '默认值', | ||
431 | + // colProps: { span: 24 }, | ||
432 | + // component: 'Input', | ||
433 | + // componentProps: { | ||
434 | + // placeholder: '请输入默认值(数字)', | ||
435 | + // }, | ||
436 | + // }, | ||
193 | ]; | 437 | ]; |
1 | +import { FormSchema } from '/@/components/Table'; | ||
2 | + | ||
3 | +export const formSchema: FormSchema[] = [ | ||
4 | + { | ||
5 | + field: 'type', | ||
6 | + label: '操作', | ||
7 | + colProps: { span: 24 }, | ||
8 | + component: 'Select', | ||
9 | + componentProps: { | ||
10 | + placeholder: '请选择操作', | ||
11 | + options: [ | ||
12 | + { label: '和', value: '和' }, | ||
13 | + { label: '或', value: '或' }, | ||
14 | + ], | ||
15 | + }, | ||
16 | + }, | ||
17 | +]; |
1 | +<template> | ||
2 | + <BasicModal | ||
3 | + v-bind="$attrs" | ||
4 | + width="55rem" | ||
5 | + @register="registerAdd" | ||
6 | + :title="getTitle" | ||
7 | + @ok="handleSubmit" | ||
8 | + @cancel="handleCancel" | ||
9 | + > | ||
10 | + <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" /> | ||
11 | + </BasicModal> | ||
12 | +</template> | ||
13 | +<script lang="ts"> | ||
14 | + import { defineComponent, ref, computed, unref } from 'vue'; | ||
15 | + import { BasicModal, useModalInner } from '/@/components/Modal'; | ||
16 | + import { BasicForm, useForm } from '/@/components/Form'; | ||
17 | + import { formSchema } from './config'; | ||
18 | + | ||
19 | + export default defineComponent({ | ||
20 | + name: 'index', | ||
21 | + components: { BasicModal, BasicForm }, | ||
22 | + emits: ['success', 'register'], | ||
23 | + setup(_, { emit }) { | ||
24 | + const isUpdate = ref(true); | ||
25 | + const getValue: any = ref({}); | ||
26 | + const setId: any = ref(1); | ||
27 | + const getTitle = computed(() => (!unref(isUpdate) ? '新增复合筛选器' : '编辑复合筛选器')); | ||
28 | + const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ | ||
29 | + labelWidth: 120, | ||
30 | + schemas: formSchema, | ||
31 | + }); | ||
32 | + const [registerAdd, { closeModal }] = useModalInner(async (data) => { | ||
33 | + isUpdate.value = !!data?.isUpdate; | ||
34 | + if (!unref(isUpdate)) { | ||
35 | + resetFields(); | ||
36 | + } | ||
37 | + if (unref(isUpdate)) { | ||
38 | + setFieldsValue({ | ||
39 | + ...data.record, | ||
40 | + }); | ||
41 | + } | ||
42 | + }); | ||
43 | + const handleSubmit = () => { | ||
44 | + if (!unref(isUpdate)) { | ||
45 | + getValue.value = getFieldsValue(); | ||
46 | + setId.value += 1; | ||
47 | + getValue.value.id = setId.value; | ||
48 | + } else { | ||
49 | + getValue.value = getFieldsValue(); | ||
50 | + setId.value += 1000; | ||
51 | + getValue.value.id = setId.value; | ||
52 | + } | ||
53 | + emit('success', getValue.value); | ||
54 | + closeModal(); | ||
55 | + }; | ||
56 | + const handleCancel = () => { | ||
57 | + return; | ||
58 | + }; | ||
59 | + return { | ||
60 | + registerForm, | ||
61 | + handleCancel, | ||
62 | + handleSubmit, | ||
63 | + registerAdd, | ||
64 | + getTitle, | ||
65 | + }; | ||
66 | + }, | ||
67 | + }); | ||
68 | +</script> |
@@ -8,34 +8,95 @@ | @@ -8,34 +8,95 @@ | ||
8 | @cancel="handleCancel" | 8 | @cancel="handleCancel" |
9 | > | 9 | > |
10 | <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" /> | 10 | <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" /> |
11 | + <template v-if="getIsWhereType"> | ||
12 | + <div><p style="text-align: center">未配置筛选器</p></div> | ||
13 | + <div><p style="text-align: left">筛选器</p></div> | ||
14 | + <div style="width: 50vw; height: 5vh; display: flex; justify-content: space-between"> | ||
15 | + <div style="width: 5vw; height: 2vh"> | ||
16 | + <p v-for="(item, index) in n" :key="index">和</p> | ||
17 | + </div> | ||
18 | + <div style="width: 45vw; height: 2vh"> | ||
19 | + <BasicForm | ||
20 | + :showActionButtonGroup="false" | ||
21 | + @register="registerFilter" | ||
22 | + @submit="handleSubmit" | ||
23 | + > | ||
24 | + <template #add="{ field }"> | ||
25 | + <Button v-if="Number(field) === 0" @click="add">添加</Button> | ||
26 | + <Button v-if="Number(field) === 0" @click="handleAdd">添加复合器</Button> | ||
27 | + <!-- <Button v-if="Number(field) === 0" @click="handleEdit">编辑复合器</Button> --> | ||
28 | + <Button v-if="field > 0" @click="del(field)">-</Button> | ||
29 | + </template> | ||
30 | + </BasicForm> | ||
31 | + </div> | ||
32 | + </div> | ||
33 | + <AddkeyValueModal @register="registerModal" /> | ||
34 | + </template> | ||
11 | </BasicModal> | 35 | </BasicModal> |
12 | </template> | 36 | </template> |
13 | <script lang="ts"> | 37 | <script lang="ts"> |
14 | - import { defineComponent, ref, computed, unref } from 'vue'; | 38 | + import { defineComponent, ref, computed, unref, watch } from 'vue'; |
15 | import { BasicModal, useModalInner } from '/@/components/Modal'; | 39 | import { BasicModal, useModalInner } from '/@/components/Modal'; |
40 | + import { useModal } from '/@/components/Modal'; | ||
16 | import { BasicForm, useForm } from '/@/components/Form'; | 41 | import { BasicForm, useForm } from '/@/components/Form'; |
17 | - import { formSchema } from './config'; | 42 | + import { formSchema, isWhereType } from './config'; |
43 | + import { Button } from '/@/components/Button'; | ||
44 | + import AddkeyValueModal from './cpns/index.vue'; | ||
18 | 45 | ||
19 | export default defineComponent({ | 46 | export default defineComponent({ |
20 | name: 'index', | 47 | name: 'index', |
21 | - components: { BasicModal, BasicForm }, | 48 | + components: { BasicModal, BasicForm, Button, AddkeyValueModal }, |
22 | emits: ['success', 'register'], | 49 | emits: ['success', 'register'], |
23 | setup(_, { emit }) { | 50 | setup(_, { emit }) { |
51 | + const getIsWhereType: any = ref(null); | ||
24 | const isUpdate = ref(true); | 52 | const isUpdate = ref(true); |
25 | - const getValue: any = ref(null); | 53 | + const getValue: any = ref({}); |
54 | + const setId: any = ref(1); | ||
26 | const getTitle = computed(() => (!unref(isUpdate) ? '新增键名筛选器' : '编辑键名筛选器')); | 55 | const getTitle = computed(() => (!unref(isUpdate) ? '新增键名筛选器' : '编辑键名筛选器')); |
27 | const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ | 56 | const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ |
28 | labelWidth: 120, | 57 | labelWidth: 120, |
29 | schemas: formSchema, | 58 | schemas: formSchema, |
30 | }); | 59 | }); |
60 | + const [registerFilter, { appendSchemaByField, removeSchemaByFiled }] = useForm({ | ||
61 | + schemas: [ | ||
62 | + { | ||
63 | + field: 'field0a', | ||
64 | + component: 'Input', | ||
65 | + label: '字段0', | ||
66 | + colProps: { | ||
67 | + span: 8, | ||
68 | + }, | ||
69 | + required: true, | ||
70 | + }, | ||
71 | + { | ||
72 | + field: 'field0b', | ||
73 | + component: 'Input', | ||
74 | + label: '字段0', | ||
75 | + colProps: { | ||
76 | + span: 8, | ||
77 | + }, | ||
78 | + required: true, | ||
79 | + }, | ||
80 | + { | ||
81 | + field: '0', | ||
82 | + component: 'Input', | ||
83 | + label: ' ', | ||
84 | + colProps: { | ||
85 | + span: 8, | ||
86 | + }, | ||
87 | + slot: 'add', | ||
88 | + }, | ||
89 | + ], | ||
90 | + labelWidth: 100, | ||
91 | + actionColOptions: { span: 24 }, | ||
92 | + }); | ||
31 | const [register, { closeModal }] = useModalInner(async (data) => { | 93 | const [register, { closeModal }] = useModalInner(async (data) => { |
32 | isUpdate.value = !!data?.isUpdate; | 94 | isUpdate.value = !!data?.isUpdate; |
33 | if (!unref(isUpdate)) { | 95 | if (!unref(isUpdate)) { |
34 | - console.log('新增键名筛选器'); | ||
35 | resetFields(); | 96 | resetFields(); |
97 | + getIsWhereType.value = 100; | ||
36 | } | 98 | } |
37 | if (unref(isUpdate)) { | 99 | if (unref(isUpdate)) { |
38 | - console.log('编辑键名筛选器'); | ||
39 | setFieldsValue({ | 100 | setFieldsValue({ |
40 | ...data.record, | 101 | ...data.record, |
41 | }); | 102 | }); |
@@ -43,14 +104,110 @@ | @@ -43,14 +104,110 @@ | ||
43 | }); | 104 | }); |
44 | 105 | ||
45 | const handleSubmit = () => { | 106 | const handleSubmit = () => { |
46 | - getValue.value = getFieldsValue(); | 107 | + if (!unref(isUpdate)) { |
108 | + getValue.value = getFieldsValue(); | ||
109 | + setId.value += 1; | ||
110 | + getValue.value.id = setId.value; | ||
111 | + } else { | ||
112 | + getValue.value = getFieldsValue(); | ||
113 | + setId.value += 1000; | ||
114 | + getValue.value.id = setId.value; | ||
115 | + } | ||
47 | emit('success', getValue.value); | 116 | emit('success', getValue.value); |
48 | closeModal(); | 117 | closeModal(); |
49 | }; | 118 | }; |
50 | const handleCancel = () => { | 119 | const handleCancel = () => { |
51 | return; | 120 | return; |
52 | }; | 121 | }; |
122 | + | ||
123 | + const n = ref(1); | ||
124 | + | ||
125 | + function add() { | ||
126 | + appendSchemaByField( | ||
127 | + { | ||
128 | + field: `field${n.value}a`, | ||
129 | + component: 'Input', | ||
130 | + label: '字段' + n.value, | ||
131 | + colProps: { | ||
132 | + span: 8, | ||
133 | + }, | ||
134 | + required: true, | ||
135 | + }, | ||
136 | + '' | ||
137 | + ); | ||
138 | + appendSchemaByField( | ||
139 | + { | ||
140 | + field: `field${n.value}b`, | ||
141 | + component: 'Input', | ||
142 | + label: '字段' + n.value, | ||
143 | + colProps: { | ||
144 | + span: 8, | ||
145 | + }, | ||
146 | + required: true, | ||
147 | + }, | ||
148 | + '' | ||
149 | + ); | ||
150 | + | ||
151 | + appendSchemaByField( | ||
152 | + { | ||
153 | + field: `${n.value}`, | ||
154 | + component: 'Input', | ||
155 | + label: ' ', | ||
156 | + colProps: { | ||
157 | + span: 8, | ||
158 | + }, | ||
159 | + slot: 'add', | ||
160 | + }, | ||
161 | + '' | ||
162 | + ); | ||
163 | + n.value++; | ||
164 | + } | ||
165 | + | ||
166 | + function del(field) { | ||
167 | + removeSchemaByFiled([`field${field}a`, `field${field}b`, `${field}`]); | ||
168 | + n.value--; | ||
169 | + } | ||
170 | + watch(isWhereType, (v) => { | ||
171 | + switch (v) { | ||
172 | + console.log(v) | ||
173 | + case 'STRING': | ||
174 | + getIsWhereType.value = v; | ||
175 | + break; | ||
176 | + case 'NUMERIC': | ||
177 | + getIsWhereType.value = v; | ||
178 | + break; | ||
179 | + case 'BOOLEAN': | ||
180 | + getIsWhereType.value = v; | ||
181 | + break; | ||
182 | + case 'COMPLEX': | ||
183 | + getIsWhereType.value = v; | ||
184 | + break; | ||
185 | + } | ||
186 | + }); | ||
187 | + const [registerModal, { openModal }] = useModal(); | ||
188 | + //复合器弹窗 | ||
189 | + const addPlusIfEdit = ref(1); | ||
190 | + const handleAdd = () => { | ||
191 | + openModal(true, { | ||
192 | + isUpdate: false, | ||
193 | + addPlusIfEdit: addPlusIfEdit.value++, | ||
194 | + }); | ||
195 | + }; | ||
196 | + const handleEdit = () => { | ||
197 | + openModal(true, { | ||
198 | + isUpdate: true, | ||
199 | + }); | ||
200 | + }; | ||
201 | + | ||
53 | return { | 202 | return { |
203 | + getIsWhereType, | ||
204 | + registerModal, | ||
205 | + handleEdit, | ||
206 | + handleAdd, | ||
207 | + n, | ||
208 | + add, | ||
209 | + del, | ||
210 | + registerFilter, | ||
54 | registerForm, | 211 | registerForm, |
55 | handleCancel, | 212 | handleCancel, |
56 | handleSubmit, | 213 | handleSubmit, |
@@ -7,7 +7,13 @@ | @@ -7,7 +7,13 @@ | ||
7 | @ok="handleSubmit" | 7 | @ok="handleSubmit" |
8 | > | 8 | > |
9 | <CollapseContainer title="键名筛选器" class="border mb-8"> | 9 | <CollapseContainer title="键名筛选器" class="border mb-8"> |
10 | - <BasicTable :resizeHeightOffset="200" @register="registerTable" :dataSource="getTableApiData"> | 10 | + <BasicTable |
11 | + :showIndexColumn="false" | ||
12 | + :resizeHeightOffset="200" | ||
13 | + @register="registerTable" | ||
14 | + :dataSource="getTableApiData" | ||
15 | + > | ||
16 | + > | ||
11 | <template #toolbar> | 17 | <template #toolbar> |
12 | <a-button type="primary" @click="handleAddKey"> 新增键名筛选器 </a-button> | 18 | <a-button type="primary" @click="handleAddKey"> 新增键名筛选器 </a-button> |
13 | </template> | 19 | </template> |
@@ -39,6 +45,7 @@ | @@ -39,6 +45,7 @@ | ||
39 | :columns="columnsView" | 45 | :columns="columnsView" |
40 | :dataSource="detailData" | 46 | :dataSource="detailData" |
41 | :pagination="false" | 47 | :pagination="false" |
48 | + :showIndexColumn="false" | ||
42 | /> | 49 | /> |
43 | </CollapseContainer> | 50 | </CollapseContainer> |
44 | <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" /> | 51 | <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" /> |
@@ -49,7 +56,7 @@ | @@ -49,7 +56,7 @@ | ||
49 | import { defineComponent, ref, computed, unref } from 'vue'; | 56 | import { defineComponent, ref, computed, unref } from 'vue'; |
50 | import { BasicModal, useModalInner } from '/@/components/Modal'; | 57 | import { BasicModal, useModalInner } from '/@/components/Modal'; |
51 | import { BasicForm, useForm } from '/@/components/Form'; | 58 | import { BasicForm, useForm } from '/@/components/Form'; |
52 | - import { formSchema, columns, DescDetailSchema, columnsView } from './config'; | 59 | + import { formSchema, keyColumns, DescDetailSchema, columnsView } from './config'; |
53 | import { CollapseContainer } from '/@/components/Container/index'; | 60 | import { CollapseContainer } from '/@/components/Container/index'; |
54 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 61 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
55 | import { useModal } from '/@/components/Modal'; | 62 | import { useModal } from '/@/components/Modal'; |
@@ -69,8 +76,9 @@ | @@ -69,8 +76,9 @@ | ||
69 | setup(_, { emit }) { | 76 | setup(_, { emit }) { |
70 | const getTableApiData: any = ref([]); | 77 | const getTableApiData: any = ref([]); |
71 | const detailData: any = ref([]); | 78 | const detailData: any = ref([]); |
72 | - const receiveData: any = ref(null); | 79 | + const receiveData: any = ref({}); |
73 | const lastValues: any = ref(null); | 80 | const lastValues: any = ref(null); |
81 | + const addOrUpdateData: any = ref(null); | ||
74 | const isUpdate = ref(true); | 82 | const isUpdate = ref(true); |
75 | const [registerForm, { getFieldsValue, resetFields }] = useForm({ | 83 | const [registerForm, { getFieldsValue, resetFields }] = useForm({ |
76 | labelWidth: 120, | 84 | labelWidth: 120, |
@@ -83,10 +91,11 @@ | @@ -83,10 +91,11 @@ | ||
83 | }); | 91 | }); |
84 | const [registerTable, { reload }] = useTable({ | 92 | const [registerTable, { reload }] = useTable({ |
85 | title: '键名筛选器', | 93 | title: '键名筛选器', |
86 | - columns, | 94 | + columns: keyColumns, |
87 | bordered: true, | 95 | bordered: true, |
88 | showIndexColumn: false, | 96 | showIndexColumn: false, |
89 | pagination: false, | 97 | pagination: false, |
98 | + autoCreateKey: true, | ||
90 | actionColumn: { | 99 | actionColumn: { |
91 | width: 180, | 100 | width: 180, |
92 | title: '操作', | 101 | title: '操作', |
@@ -94,12 +103,11 @@ | @@ -94,12 +103,11 @@ | ||
94 | slots: { customRender: 'action' }, | 103 | slots: { customRender: 'action' }, |
95 | }, | 104 | }, |
96 | }); | 105 | }); |
97 | - | ||
98 | const handleSubmit = () => { | 106 | const handleSubmit = () => { |
99 | - if (unref(isUpdate.value)) { | ||
100 | - const values = getFieldsValue(); | ||
101 | - getTableApiData.value.push(values); | ||
102 | - detailData.value.push(values); | 107 | + if (!unref(isUpdate)) { |
108 | + addOrUpdateData.value = getFieldsValue(); | ||
109 | + getTableApiData.value.push(addOrUpdateData.value); | ||
110 | + detailData.value.push(addOrUpdateData.value); | ||
103 | } | 111 | } |
104 | lastValues.value = getFieldsValue(); | 112 | lastValues.value = getFieldsValue(); |
105 | emit('getAllFieldsRule', receiveData.value, lastValues.value); | 113 | emit('getAllFieldsRule', receiveData.value, lastValues.value); |
@@ -122,29 +130,38 @@ | @@ -122,29 +130,38 @@ | ||
122 | isUpdate: true, | 130 | isUpdate: true, |
123 | record, | 131 | record, |
124 | }); | 132 | }); |
133 | + const newFilterArray = getTableApiData.value.filter((item) => item.id !== record.id); | ||
134 | + getTableApiData.value = newFilterArray; | ||
135 | + const newFilterViewArray = detailData.value.filter((item) => item.id !== record.id); | ||
136 | + detailData.value = newFilterViewArray; | ||
137 | + reload(); | ||
125 | }; | 138 | }; |
126 | const handleDelete = (record: Recordable) => { | 139 | const handleDelete = (record: Recordable) => { |
127 | - console.log(record); | ||
128 | - getTableApiData.value.splice(0, 1); | ||
129 | - detailData.value.splice(0, 1); | 140 | + const newFilterArray = getTableApiData.value.filter((item) => item.id !== record.id); |
141 | + getTableApiData.value = newFilterArray; | ||
142 | + const newFilterViewArray = detailData.value.filter((item) => item.id !== record.id); | ||
143 | + detailData.value = newFilterViewArray; | ||
130 | reload(); | 144 | reload(); |
131 | }; | 145 | }; |
132 | const handleSuccess = (v) => { | 146 | const handleSuccess = (v) => { |
133 | receiveData.value = v; | 147 | receiveData.value = v; |
134 | setTimeout(() => { | 148 | setTimeout(() => { |
135 | - doFunc(); | 149 | + useWaitFunc(); |
136 | }, 10); | 150 | }, 10); |
137 | }; | 151 | }; |
138 | - const doFunc = () => { | ||
139 | - getTableApiData.value.push(receiveData.value); | ||
140 | - detailData.value.push(receiveData.value); | 152 | + const useWaitFunc = () => { |
153 | + if (unref(getTableApiData.value)) { | ||
154 | + getTableApiData.value.push(receiveData.value); | ||
155 | + detailData.value.push(receiveData.value); | ||
156 | + } | ||
157 | + reload(); | ||
141 | }; | 158 | }; |
142 | return { | 159 | return { |
160 | + detailData, | ||
161 | + getTableApiData, | ||
143 | resetDataFunc, | 162 | resetDataFunc, |
144 | columnsView, | 163 | columnsView, |
145 | DescDetailSchema, | 164 | DescDetailSchema, |
146 | - detailData, | ||
147 | - getTableApiData, | ||
148 | handleSuccess, | 165 | handleSuccess, |
149 | handleEdit, | 166 | handleEdit, |
150 | handleDelete, | 167 | handleDelete, |
src/views/ruleengine/scenelinkage/addForm/1.json
deleted
100644 → 0
1 | -{ | ||
2 | - "name": "设备测试3", | ||
3 | - "defaultRuleChainId": "354c7210-5d97-11ec-8ac9-f38ed935ea2a", | ||
4 | - "description": "设备测试3", | ||
5 | - "transportType": "CoAP", | ||
6 | - "profileData": { | ||
7 | - "alarms": [ | ||
8 | - { | ||
9 | - "alarmType": "设备测试3", | ||
10 | - "propagate": true, | ||
11 | - "propagateRelationTypes": [ | ||
12 | - "设备测试3" | ||
13 | - ], | ||
14 | - "createRules": { | ||
15 | - "MAJOR": { | ||
16 | - "alarmDetails": "设备测试3", | ||
17 | - "schedule": { | ||
18 | - "type": "ANY_TIME" | ||
19 | - }, | ||
20 | - "condition": { | ||
21 | - "condition": [ | ||
22 | - { | ||
23 | - "key": { | ||
24 | - "type": "TIME_SERIES", | ||
25 | - "key": "CO2" | ||
26 | - }, | ||
27 | - "valueType": "COMPLEX", | ||
28 | - "predicate": { | ||
29 | - "operation": "LESS_OR_EQUAL", | ||
30 | - "value": { | ||
31 | - "defaultValue": 2 | ||
32 | - }, | ||
33 | - "type": "COMPLEX" | ||
34 | - } | ||
35 | - } | ||
36 | - ], | ||
37 | - "spec": { | ||
38 | - "type": "DURATION" | ||
39 | - } | ||
40 | - } | ||
41 | - } | ||
42 | - } | ||
43 | - } | ||
44 | - ] | ||
45 | - }, | ||
46 | - "alarmProfile": { | ||
47 | - "alarmContactId": "a3004ddd-db8f-487c-aea0-4f6f3efc59a9", | ||
48 | - "messageMode": "PHONE_MESSAGE" | ||
49 | - } | ||
50 | -} |