简柏林 / thingskit-front · Commits

Commit c48230f67419b2f63290cf197ffc5288a2262e36

Authored by fengistao
1 parent 0a7382fe

feat:新增复合筛选器;fix:修复新增删除键名筛算器

Inline Side-by-side
Showing 8 changed files with 577 additions and 78 deletions
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>
@@ -747,11 +759,13 @@ @@ -747,11 +759,13 @@
747 } 759 }
748 .border { 760 .border {
749 border: 1px solid #bfbfbf; 761 border: 1px solid #bfbfbf;
  762 + border-radius: 10px;
750 } 763 }
751 764
752 .aic { 765 .aic {
753 display: flex; 766 display: flex;
754 align-items: center; 767 align-items: center;
  768 + border-radius: 10px;
755 } 769 }
756 770
757 :deep(.vben-collapse-container__header) { 771 :deep(.vben-collapse-container__header) {
@@ -125,6 +125,9 @@ export const formSchema: FormSchema[] = [ @@ -125,6 +125,9 @@ export const formSchema: FormSchema[] = [
125 ], 125 ],
126 }, 126 },
127 ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), 127 ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')),
  128 + show: ({ values }) => {
  129 + return !!values.field5;
  130 + },
128 }, 131 },
129 { 132 {
130 field: 'sourceAttribute', 133 field: 'sourceAttribute',
@@ -135,6 +138,9 @@ export const formSchema: FormSchema[] = [ @@ -135,6 +138,9 @@ export const formSchema: FormSchema[] = [
135 placeholder: '源属性', 138 placeholder: '源属性',
136 }, 139 },
137 ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')), 140 ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')),
  141 + show: ({ values }) => {
  142 + return !!values.field5;
  143 + },
138 }, 144 },
139 { 145 {
140 field: 'sourceType', 146 field: 'sourceType',
@@ -151,6 +157,9 @@ export const formSchema: FormSchema[] = [ @@ -151,6 +157,9 @@ export const formSchema: FormSchema[] = [
151 ], 157 ],
152 }, 158 },
153 ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), 159 ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
  160 + show: ({ values }) => {
  161 + return !!values.field6;
  162 + },
154 }, 163 },
155 { 164 {
156 field: 'sourceAttribute', 165 field: 'sourceAttribute',
@@ -161,6 +170,9 @@ export const formSchema: FormSchema[] = [ @@ -161,6 +170,9 @@ export const formSchema: FormSchema[] = [
161 placeholder: '源属性', 170 placeholder: '源属性',
162 }, 171 },
163 ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), 172 ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
  173 + show: ({ values }) => {
  174 + return !!values.field6;
  175 + },
164 }, 176 },
165 { 177 {
166 field: 'defaultValue', 178 field: 'defaultValue',
@@ -171,6 +183,29 @@ export const formSchema: FormSchema[] = [ @@ -171,6 +183,29 @@ export const formSchema: FormSchema[] = [
171 placeholder: '请输入持续时间值（请输入数字）', 183 placeholder: '请输入持续时间值（请输入数字）',
172 }, 184 },
173 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')),
174 }, 209 },
175 { 210 {
176 field: 'unit', 211 field: 'unit',
@@ -194,10 +229,13 @@ export const formSchema: FormSchema[] = [ @@ -194,10 +229,13 @@ export const formSchema: FormSchema[] = [
194 colProps: { span: 24 }, 229 colProps: { span: 24 },
195 component: 'Input', 230 component: 'Input',
196 componentProps: { 231 componentProps: {
197 - placeholder: '请输入事件计数值必填（请输入数字）', 232 + placeholder: '请输入事件计数值（应在1到2147483637之间）',
198 }, 233 },
199 rules: [{ message: '事件计数应在1到2147483637之间', trigger: 'blur' }], 234 rules: [{ message: '事件计数应在1到2147483637之间', trigger: 'blur' }],
200 ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')), 235 ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
  236 + show: ({ values }) => {
  237 + return !values.field6;
  238 + },
201 }, 239 },
202 { 240 {
203 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 * 所使用的枚举值
@@ -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,19 +8,47 @@ @@ -8,19 +8,47 @@
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({}); 53 const getValue: any = ref({});
26 const setId: any = ref(1); 54 const setId: any = ref(1);
@@ -29,10 +57,44 @@ @@ -29,10 +57,44 @@
29 labelWidth: 120, 57 labelWidth: 120,
30 schemas: formSchema, 58 schemas: formSchema,
31 }); 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 + });
32 const [register, { closeModal }] = useModalInner(async (data) => { 93 const [register, { closeModal }] = useModalInner(async (data) => {
33 isUpdate.value = !!data?.isUpdate; 94 isUpdate.value = !!data?.isUpdate;
34 if (!unref(isUpdate)) { 95 if (!unref(isUpdate)) {
35 resetFields(); 96 resetFields();
  97 + getIsWhereType.value = 100;
36 } 98 }
37 if (unref(isUpdate)) { 99 if (unref(isUpdate)) {
38 setFieldsValue({ 100 setFieldsValue({
@@ -42,29 +104,110 @@ @@ -42,29 +104,110 @@
42 }); 104 });
43 105
44 const handleSubmit = () => { 106 const handleSubmit = () => {
45 - getValue.value = getFieldsValue();  
46 - setId.value += 1;  
47 - getValue.value.id = setId.value; 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 + }
48 emit('success', getValue.value); 116 emit('success', getValue.value);
49 closeModal(); 117 closeModal();
50 - // if (!unref(isUpdate)) {  
51 - // getValue.value = getFieldsValue();  
52 - // console.log(getValue.value);  
53 - // }  
54 - // if (unref(isUpdate)) {  
55 - // getValue.value = getFieldsValue();  
56 - // console.log(getValue.value);  
57 - // }  
58 - // setTimeout(() => {  
59 - // emit('success', getValue.value);  
60 - // closeModal();  
61 - // }, 20);  
62 - // // getValue.value = getFieldsValue();  
63 }; 118 };
64 const handleCancel = () => { 119 const handleCancel = () => {
65 return; 120 return;
66 }; 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 +
67 return { 202 return {
  203 + getIsWhereType,
  204 + registerModal,
  205 + handleEdit,
  206 + handleAdd,
  207 + n,
  208 + add,
  209 + del,
  210 + registerFilter,
68 registerForm, 211 registerForm,
69 handleCancel, 212 handleCancel,
70 handleSubmit, 213 handleSubmit,
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 <KeyValueModal @register="registerModal" @success="handleSuccess" /> 53 <KeyValueModal @register="registerModal" @success="handleSuccess" />
54 </template> 54 </template>
55 <script lang="ts"> 55 <script lang="ts">
56 - import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue'; 56 + import { defineComponent, ref, computed, unref } from 'vue';
57 import { BasicModal, useModalInner } from '/@/components/Modal'; 57 import { BasicModal, useModalInner } from '/@/components/Modal';
58 import { BasicForm, useForm } from '/@/components/Form'; 58 import { BasicForm, useForm } from '/@/components/Form';
59 import { formSchema, keyColumns, DescDetailSchema, columnsView } from './config'; 59 import { formSchema, keyColumns, DescDetailSchema, columnsView } from './config';
@@ -74,10 +74,9 @@ @@ -74,10 +74,9 @@
74 }, 74 },
75 emits: ['success', 'register', 'getAllFieldsRule', 'getLastAllFieldsRule'], 75 emits: ['success', 'register', 'getAllFieldsRule', 'getLastAllFieldsRule'],
76 setup(_, { emit }) { 76 setup(_, { emit }) {
77 - const { proxy } = getCurrentInstance();  
78 const getTableApiData: any = ref([]); 77 const getTableApiData: any = ref([]);
79 const detailData: any = ref([]); 78 const detailData: any = ref([]);
80 - const receiveData: any = ref(null); 79 + const receiveData: any = ref({});
81 const lastValues: any = ref(null); 80 const lastValues: any = ref(null);
82 const addOrUpdateData: any = ref(null); 81 const addOrUpdateData: any = ref(null);
83 const isUpdate = ref(true); 82 const isUpdate = ref(true);
@@ -131,62 +130,38 @@ @@ -131,62 +130,38 @@
131 isUpdate: true, 130 isUpdate: true,
132 record, 131 record,
133 }); 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();
134 }; 138 };
135 const handleDelete = (record: Recordable) => { 139 const handleDelete = (record: Recordable) => {
136 - console.log(record);  
137 - console.log(getTableApiData.value);  
138 - // const getIndex = getTableApiData.value.indexOf((i) => {  
139 - // return i.key;  
140 - // });  
141 const newFilterArray = getTableApiData.value.filter((item) => item.id !== record.id); 140 const newFilterArray = getTableApiData.value.filter((item) => item.id !== record.id);
142 getTableApiData.value = newFilterArray; 141 getTableApiData.value = newFilterArray;
143 - // getTableApiData.value.splice(getIndex, 1);  
144 -  
145 - // console.log(getTableApiData.value);  
146 - // delete getTableApiData.value[findByKeyDel];  
147 - // getTableApiData.value.slice(0, getTableApiData.value.length - 1);  
148 - // detailData.value.slice(0, detailData.value.length - 1);  
149 - // if (record) {  
150 - // getTableApiData.value = getTableApiData.value.length - 1;  
151 - // detailData.value = detailData.value.length - 1;  
152 - // } 142 + const newFilterViewArray = detailData.value.filter((item) => item.id !== record.id);
  143 + detailData.value = newFilterViewArray;
153 reload(); 144 reload();
154 }; 145 };
155 const handleSuccess = (v) => { 146 const handleSuccess = (v) => {
156 receiveData.value = v; 147 receiveData.value = v;
157 setTimeout(() => { 148 setTimeout(() => {
158 - doFunc();  
159 - }, 20);  
160 - // if (!unref(isUpdate)) {  
161 - // console.log(v);  
162 - // // receiveData.value = v;  
163 - // setTimeout(() => {  
164 - // // doFunc();  
165 - // getTableApiData.value.push(v);  
166 - // detailData.value.push(v);  
167 - // }, 10);  
168 - // }  
169 - // if (unref(isUpdate)) {  
170 - // console.log(v);  
171 - // // receiveData.value = v;  
172 - // setTimeout(() => {  
173 - // // doFunc();  
174 - // getTableApiData.value.push(v);  
175 - // updateTableDataRecord(v.key, v);  
176 - // detailData.value.push(v);  
177 - // }, 10);  
178 - // } 149 + useWaitFunc();
  150 + }, 10);
179 }; 151 };
180 - const doFunc = () => {  
181 - getTableApiData.value.push(receiveData.value);  
182 - 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();
183 }; 158 };
184 return { 159 return {
  160 + detailData,
  161 + getTableApiData,
185 resetDataFunc, 162 resetDataFunc,
186 columnsView, 163 columnsView,
187 DescDetailSchema, 164 DescDetailSchema,
188 - detailData,  
189 - getTableApiData,  
190 handleSuccess, 165 handleSuccess,
191 handleEdit, 166 handleEdit,
192 handleDelete, 167 handleDelete,