简柏林 / thingskit-front · Commits

Commit 13166608105874fe4420a798fb50a85ad2f3d4a0

Authored by fengtao
1 parent 19a8e628

feat:联通数据转换接口中的kafka的启用和禁用状态，fix：修改数据管理部分样式问题

Inline Side-by-side
Showing 9 changed files with 425 additions and 143 deletions
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 v-bind="$attrs" 4 v-bind="$attrs"
5 @register="registerDrawer" 5 @register="registerDrawer"
6 showFooter 6 showFooter
  7 + :title="getTitle"
7 width="1000px" 8 width="1000px"
8 @ok="handleSubmit" 9 @ok="handleSubmit"
9 > 10 >
@@ -32,10 +33,10 @@ @@ -32,10 +33,10 @@
32 defineComponent, 33 defineComponent,
33 reactive, 34 reactive,
34 ref, 35 ref,
35 - nextTick,  
36 computed, 36 computed,
37 unref, 37 unref,
38 getCurrentInstance, 38 getCurrentInstance,
  39 + onMounted,
39 } from 'vue'; 40 } from 'vue';
40 import { BasicModal, useModalInner } from '/@/components/Modal'; 41 import { BasicModal, useModalInner } from '/@/components/Modal';
41 import { Steps } from 'ant-design-vue'; 42 import { Steps } from 'ant-design-vue';
@@ -64,6 +65,11 @@ @@ -64,6 +65,11 @@
64 const getTypeObj = reactive({ 65 const getTypeObj = reactive({
65 type: '', 66 type: '',
66 }); 67 });
  68 + const additionalInfoV = {
  69 + additionalInfo: {
  70 + description: '',
  71 + },
  72 + };
67 const getSonFormValue = ref({}); 73 const getSonFormValue = ref({});
68 const getModeSonFormValue = ref({}); 74 const getModeSonFormValue = ref({});
69 const refTransferConfigParams = ref(null); 75 const refTransferConfigParams = ref(null);
@@ -80,9 +86,15 @@ @@ -80,9 +86,15 @@
80 if (!unref(isUpdate)) { 86 if (!unref(isUpdate)) {
81 try { 87 try {
82 proxy.$refs.refTransferConfigMode.customResetStepOneFunc(); 88 proxy.$refs.refTransferConfigMode.customResetStepOneFunc();
83 - // nextTick(() => { 89 + // if (data.record.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
  90 + // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
  91 + // } else if (data.record.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
  92 + // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
  93 + // } else if (data.record.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
  94 + // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
  95 + // } else if (data.record.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
84 // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc(); 96 // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
85 - // }); 97 + // }
86 } catch (e) { 98 } catch (e) {
87 return e; 99 return e;
88 } 100 }
@@ -120,57 +132,71 @@ @@ -120,57 +132,71 @@
120 const handleNext = (args) => { 132 const handleNext = (args) => {
121 current.value++; 133 current.value++;
122 getModeSelectVal.value = args; 134 getModeSelectVal.value = args;
123 - if (!unref(isUpdate)) return;  
124 - // try {  
125 -  
126 - // });  
127 - // setTimeout(() => {  
128 - // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();  
129 - // }, 100);  
130 - // } catch (e) {  
131 - // return e;  
132 - // } 135 + if (!unref(isUpdate)) {
  136 + proxy.$refs.refTransferConfigParams?.clearSonValueDataFunc();
  137 + console.log('add clear');
  138 + // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
  139 + }
133 }; 140 };
134 const handlePrev = () => { 141 const handlePrev = () => {
135 current.value--; 142 current.value--;
136 }; 143 };
  144 +
  145 + const commonFunc = () => {
  146 + try {
  147 + additionalInfoV.additionalInfo.description =
  148 + getSonFormValue.value.configuration.description;
  149 + delete getSonFormValue.value.configuration.description;
  150 + delete getSonFormValue.value.configuration.type;
  151 + delete getSonFormValue.value?.configuration?.name;
  152 + } catch (e) {
  153 + return e;
  154 + }
  155 + };
137 const addOrEditFunc = async () => { 156 const addOrEditFunc = async () => {
138 getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc(); 157 getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc();
139 getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc(); 158 getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc();
140 if (getModeSonFormValue.value?.type == 'KafKA') { 159 if (getModeSonFormValue.value?.type == 'KafKA') {
141 getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode'; 160 getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
142 getNameObj.name = getSonFormValue.value?.configuration?.name; 161 getNameObj.name = getSonFormValue.value?.configuration?.name;
143 - delete getSonFormValue.value?.configuration?.name; 162 + commonFunc();
144 } else if (getModeSonFormValue.value?.type == 'MQTT') { 163 } else if (getModeSonFormValue.value?.type == 'MQTT') {
145 getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode'; 164 getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode';
146 getNameObj.name = getSonFormValue.value?.configuration?.name; 165 getNameObj.name = getSonFormValue.value?.configuration?.name;
147 - delete getSonFormValue.value?.configuration?.name; 166 + commonFunc();
148 } else if (getModeSonFormValue.value?.type == 'RabbitMq') { 167 } else if (getModeSonFormValue.value?.type == 'RabbitMq') {
149 getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'; 168 getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
150 getNameObj.name = getSonFormValue.value?.configuration?.name; 169 getNameObj.name = getSonFormValue.value?.configuration?.name;
151 - delete getSonFormValue.value?.configuration?.name; 170 + commonFunc();
152 } else if (getModeSonFormValue.value?.type == 'Api') { 171 } else if (getModeSonFormValue.value?.type == 'Api') {
153 getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'; 172 getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode';
154 getNameObj.name = getSonFormValue.value?.configuration?.name; 173 getNameObj.name = getSonFormValue.value?.configuration?.name;
155 - delete getSonFormValue.value?.configuration?.name; 174 + commonFunc();
156 } 175 }
157 const id: any = { 176 const id: any = {
158 id: unref(isUpdate) ? editPostId.value : '', 177 id: unref(isUpdate) ? editPostId.value : '',
159 }; 178 };
160 - Object.assign(allPostForm, getTypeObj, getSonFormValue.value, getNameObj, id); 179 + Object.assign(
  180 + allPostForm,
  181 + getTypeObj,
  182 + getSonFormValue.value,
  183 + getNameObj,
  184 + id,
  185 + additionalInfoV
  186 + );
161 if (!unref(isUpdate)) { 187 if (!unref(isUpdate)) {
162 delete allPostForm.id; 188 delete allPostForm.id;
163 } 189 }
164 }; 190 };
165 const handleSubmit = async () => { 191 const handleSubmit = async () => {
166 if (!unref(isUpdate)) { 192 if (!unref(isUpdate)) {
167 - addOrEditFunc(); 193 + await addOrEditFunc();
168 await postAddConvertApi(allPostForm); 194 await postAddConvertApi(allPostForm);
169 createMessage.success('数据转换新增成功'); 195 createMessage.success('数据转换新增成功');
170 emit('success'); 196 emit('success');
171 closeModal(); 197 closeModal();
172 } else { 198 } else {
173 - addOrEditFunc(); 199 + await addOrEditFunc();
174 await postAddConvertApi(allPostForm); 200 await postAddConvertApi(allPostForm);
175 createMessage.success('数据转换编辑成功'); 201 createMessage.success('数据转换编辑成功');
176 emit('success'); 202 emit('success');
1 import { BasicColumn, FormSchema } from '/@/components/Table'; 1 import { BasicColumn, FormSchema } from '/@/components/Table';
  2 +import { h } from 'vue';
  3 +import { Tag } from 'ant-design-vue';
2 4
3 export const columns: BasicColumn[] = [ 5 export const columns: BasicColumn[] = [
4 { 6 {
@@ -10,6 +12,35 @@ export const columns: BasicColumn[] = [ @@ -10,6 +12,35 @@ export const columns: BasicColumn[] = [
10 title: '途径', 12 title: '途径',
11 dataIndex: 'type', 13 dataIndex: 'type',
12 width: 200, 14 width: 200,
  15 + customRender: ({ record }) => {
  16 + const status = record.type;
  17 + const enable =
  18 + status === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
  19 + ? 'KafKA'
  20 + : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
  21 + ? 'MQTT'
  22 + : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
  23 + ? 'RabbitMq'
  24 + : 'Api';
  25 + const color =
  26 + enable == 'KafKA'
  27 + ? 'grey'
  28 + : enable == 'MQTT'
  29 + ? 'red'
  30 + : enable == 'RabbitMq'
  31 + ? 'yellow'
  32 + : 'green';
  33 + const text =
  34 + enable == 'KafKA'
  35 + ? 'KafKA'
  36 + : enable == 'MQTT'
  37 + ? 'MQTT'
  38 + : enable == 'RabbitMq'
  39 + ? 'RabbitMq'
  40 + : 'Api';
  41 + return h(Tag, { color: color }, () => text);
  42 + },
  43 +
13 format: (_text: string, record: Recordable) => { 44 format: (_text: string, record: Recordable) => {
14 return record.type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode' 45 return record.type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
15 ? 'KafKA' 46 ? 'KafKA'
@@ -24,10 +55,17 @@ export const columns: BasicColumn[] = [ @@ -24,10 +55,17 @@ export const columns: BasicColumn[] = [
24 title: '状态', 55 title: '状态',
25 dataIndex: 'status', 56 dataIndex: 'status',
26 width: 120, 57 width: 120,
  58 + customRender: ({ record }) => {
  59 + const status = record.status;
  60 + const enable = ~~status === 1;
  61 + const color = enable ? 'blue' : 'red';
  62 + const text = enable ? '启用' : '禁用';
  63 + return h(Tag, { color: color }, () => text);
  64 + },
27 }, 65 },
28 { 66 {
29 title: '描述', 67 title: '描述',
30 - dataIndex: 'description', 68 + dataIndex: 'configuration.description',
31 width: 200, 69 width: 200,
32 }, 70 },
33 { 71 {
1 import { FormSchema } from '/@/components/Form'; 1 import { FormSchema } from '/@/components/Form';
2 2
3 export enum CredentialsEnum { 3 export enum CredentialsEnum {
4 - IS_ANONYMOUS = 'Anonymous',  
5 - IS_BASIC = 'Basic',  
6 - IS_PEM = 'PEM', 4 + IS_ANONYMOUS = 'anonymous',
  5 + IS_BASIC = 'basic',
  6 + IS_PEM = 'pem',
7 } 7 }
8 8
9 export const isBasic = (type: string) => { 9 export const isBasic = (type: string) => {
@@ -57,6 +57,31 @@ export const modeKafkaInseretKeyAndValueForm: FormSchema[] = [ @@ -57,6 +57,31 @@ export const modeKafkaInseretKeyAndValueForm: FormSchema[] = [
57 }, 57 },
58 ]; 58 ];
59 59
  60 +export const modeApiInseretKeyAndValueForm: FormSchema[] = [
  61 + {
  62 + field: 'key',
  63 + label: 'Header',
  64 + colProps: { span: 12 },
  65 + required: true,
  66 + component: 'Input',
  67 + componentProps: {
  68 + maxLength: 255,
  69 + placeholder: '请输入Header',
  70 + },
  71 + },
  72 + {
  73 + field: 'value',
  74 + label: 'Value',
  75 + colProps: { span: 12 },
  76 + required: true,
  77 + component: 'Input',
  78 + componentProps: {
  79 + maxLength: 255,
  80 + placeholder: '请输入Value',
  81 + },
  82 + },
  83 +];
  84 +
60 export const modeKafkaForm: FormSchema[] = [ 85 export const modeKafkaForm: FormSchema[] = [
61 { 86 {
62 field: 'name', 87 field: 'name',
@@ -75,6 +100,7 @@ export const modeKafkaForm: FormSchema[] = [ @@ -75,6 +100,7 @@ export const modeKafkaForm: FormSchema[] = [
75 colProps: { span: 12 }, 100 colProps: { span: 12 },
76 required: true, 101 required: true,
77 component: 'Input', 102 component: 'Input',
  103 + defaultValue: 'my-topic',
78 componentProps: { 104 componentProps: {
79 maxLength: 255, 105 maxLength: 255,
80 placeholder: '请输入Topic pattern', 106 placeholder: '请输入Topic pattern',
@@ -85,9 +111,11 @@ export const modeKafkaForm: FormSchema[] = [ @@ -85,9 +111,11 @@ export const modeKafkaForm: FormSchema[] = [
85 label: 'Bootstrap', 111 label: 'Bootstrap',
86 colProps: { span: 12 }, 112 colProps: { span: 12 },
87 component: 'Input', 113 component: 'Input',
  114 + defaultValue: 'localhost:9092',
  115 + required: true,
88 componentProps: { 116 componentProps: {
89 maxLength: 255, 117 maxLength: 255,
90 - placeholder: 'localhost', 118 + placeholder: 'localhost:9092',
91 }, 119 },
92 }, 120 },
93 { 121 {
@@ -139,6 +167,7 @@ export const modeKafkaForm: FormSchema[] = [ @@ -139,6 +167,7 @@ export const modeKafkaForm: FormSchema[] = [
139 component: 'Select', 167 component: 'Select',
140 label: 'Acks', 168 label: 'Acks',
141 colProps: { span: 12 }, 169 colProps: { span: 12 },
  170 + defaultValue: '-1',
142 componentProps: { 171 componentProps: {
143 placeholder: '请选择Number of acknowledgments', 172 placeholder: '请选择Number of acknowledgments',
144 options: [ 173 options: [
@@ -193,6 +222,7 @@ export const modeKafkaForm: FormSchema[] = [ @@ -193,6 +222,7 @@ export const modeKafkaForm: FormSchema[] = [
193 label: 'Charset', 222 label: 'Charset',
194 required: true, 223 required: true,
195 colProps: { span: 12 }, 224 colProps: { span: 12 },
  225 + defaultValue: 'UTF-8',
196 componentProps: { 226 componentProps: {
197 placeholder: '请选择Charset encoding', 227 placeholder: '请选择Charset encoding',
198 options: [ 228 options: [
@@ -204,7 +234,7 @@ export const modeKafkaForm: FormSchema[] = [ @@ -204,7 +234,7 @@ export const modeKafkaForm: FormSchema[] = [
204 { label: 'UTF-16', value: 'UTF-16' }, 234 { label: 'UTF-16', value: 'UTF-16' },
205 ], 235 ],
206 }, 236 },
207 - show: ({ values }) => { 237 + ifShow: ({ values }) => {
208 return !!values.addMetadataKeyValuesAsKafkaHeaders; 238 return !!values.addMetadataKeyValuesAsKafkaHeaders;
209 }, 239 },
210 }, 240 },
@@ -250,6 +280,7 @@ export const modeMqttForm: FormSchema[] = [ @@ -250,6 +280,7 @@ export const modeMqttForm: FormSchema[] = [
250 colProps: { span: 12 }, 280 colProps: { span: 12 },
251 component: 'Input', 281 component: 'Input',
252 required: true, 282 required: true,
  283 + defaultValue: 'localhost',
253 componentProps: { 284 componentProps: {
254 maxLength: 255, 285 maxLength: 255,
255 placeholder: '请输入Host', 286 placeholder: '请输入Host',
@@ -259,7 +290,8 @@ export const modeMqttForm: FormSchema[] = [ @@ -259,7 +290,8 @@ export const modeMqttForm: FormSchema[] = [
259 field: 'port', 290 field: 'port',
260 label: 'Port', 291 label: 'Port',
261 colProps: { span: 12 }, 292 colProps: { span: 12 },
262 - component: 'Input', 293 + component: 'InputNumber',
  294 + defaultValue: 1883,
263 required: true, 295 required: true,
264 componentProps: { 296 componentProps: {
265 maxLength: 255, 297 maxLength: 255,
@@ -270,7 +302,8 @@ export const modeMqttForm: FormSchema[] = [ @@ -270,7 +302,8 @@ export const modeMqttForm: FormSchema[] = [
270 field: 'connectTimeoutSec', 302 field: 'connectTimeoutSec',
271 label: 'Connection', 303 label: 'Connection',
272 colProps: { span: 12 }, 304 colProps: { span: 12 },
273 - component: 'Input', 305 + component: 'InputNumber',
  306 + defaultValue: 10,
274 required: true, 307 required: true,
275 componentProps: { 308 componentProps: {
276 maxLength: 255, 309 maxLength: 255,
@@ -309,9 +342,9 @@ export const modeMqttForm: FormSchema[] = [ @@ -309,9 +342,9 @@ export const modeMqttForm: FormSchema[] = [
309 componentProps: { 342 componentProps: {
310 placeholder: '请选择Credentials', 343 placeholder: '请选择Credentials',
311 options: [ 344 options: [
312 - { label: 'Anonymous', value: 'Anonymous' },  
313 - { label: 'Basic', value: 'Basic' },  
314 - { label: 'PEM', value: 'PEM' }, 345 + { label: 'Anonymous', value: 'anonymous' },
  346 + { label: 'Basic', value: 'basic' },
  347 + { label: 'PEM', value: 'pem' },
315 ], 348 ],
316 }, 349 },
317 }, 350 },
@@ -440,6 +473,7 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -440,6 +473,7 @@ export const modeRabbitMqForm: FormSchema[] = [
440 colProps: { span: 12 }, 473 colProps: { span: 12 },
441 component: 'Input', 474 component: 'Input',
442 required: true, 475 required: true,
  476 + defaultValue: 'localhost',
443 componentProps: { 477 componentProps: {
444 maxLength: 255, 478 maxLength: 255,
445 placeholder: 'localhost', 479 placeholder: 'localhost',
@@ -449,7 +483,8 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -449,7 +483,8 @@ export const modeRabbitMqForm: FormSchema[] = [
449 field: 'port', 483 field: 'port',
450 label: 'Port', 484 label: 'Port',
451 colProps: { span: 12 }, 485 colProps: { span: 12 },
452 - component: 'Input', 486 + component: 'InputNumber',
  487 + defaultValue: 5672,
453 required: true, 488 required: true,
454 componentProps: { 489 componentProps: {
455 maxLength: 255, 490 maxLength: 255,
@@ -461,6 +496,7 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -461,6 +496,7 @@ export const modeRabbitMqForm: FormSchema[] = [
461 label: 'Virtual', 496 label: 'Virtual',
462 colProps: { span: 12 }, 497 colProps: { span: 12 },
463 component: 'Input', 498 component: 'Input',
  499 + defaultValue: '/',
464 componentProps: { 500 componentProps: {
465 maxLength: 255, 501 maxLength: 255,
466 placeholder: '/', 502 placeholder: '/',
@@ -471,6 +507,7 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -471,6 +507,7 @@ export const modeRabbitMqForm: FormSchema[] = [
471 label: 'Username', 507 label: 'Username',
472 colProps: { span: 12 }, 508 colProps: { span: 12 },
473 component: 'Input', 509 component: 'Input',
  510 + defaultValue: 'guest',
474 componentProps: { 511 componentProps: {
475 maxLength: 255, 512 maxLength: 255,
476 placeholder: '请输入Username', 513 placeholder: '请输入Username',
@@ -481,6 +518,7 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -481,6 +518,7 @@ export const modeRabbitMqForm: FormSchema[] = [
481 label: 'Password', 518 label: 'Password',
482 colProps: { span: 12 }, 519 colProps: { span: 12 },
483 component: 'Input', 520 component: 'Input',
  521 + defaultValue: 'guest',
484 componentProps: { 522 componentProps: {
485 maxLength: 255, 523 maxLength: 255,
486 placeholder: '请输入Password', 524 placeholder: '请输入Password',
@@ -497,7 +535,8 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -497,7 +535,8 @@ export const modeRabbitMqForm: FormSchema[] = [
497 field: 'connectionTimeout', 535 field: 'connectionTimeout',
498 label: 'Connection', 536 label: 'Connection',
499 colProps: { span: 12 }, 537 colProps: { span: 12 },
500 - component: 'Input', 538 + component: 'InputNumber',
  539 + defaultValue: 60000,
501 componentProps: { 540 componentProps: {
502 maxLength: 255, 541 maxLength: 255,
503 placeholder: '请输入Connection timeout (ms)', 542 placeholder: '请输入Connection timeout (ms)',
@@ -507,7 +546,8 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -507,7 +546,8 @@ export const modeRabbitMqForm: FormSchema[] = [
507 field: 'handshakeTimeout', 546 field: 'handshakeTimeout',
508 label: 'Handshake', 547 label: 'Handshake',
509 colProps: { span: 12 }, 548 colProps: { span: 12 },
510 - component: 'Input', 549 + component: 'InputNumber',
  550 + defaultValue: 10000,
511 componentProps: { 551 componentProps: {
512 maxLength: 255, 552 maxLength: 255,
513 placeholder: '请输入Handshake timeout (ms)', 553 placeholder: '请输入Handshake timeout (ms)',
@@ -550,6 +590,7 @@ export const modeApiForm: FormSchema[] = [ @@ -550,6 +590,7 @@ export const modeApiForm: FormSchema[] = [
550 label: 'Endpoint', 590 label: 'Endpoint',
551 colProps: { span: 12 }, 591 colProps: { span: 12 },
552 required: true, 592 required: true,
  593 + defaultValue: 'http://localhost/api',
553 component: 'Input', 594 component: 'Input',
554 componentProps: { 595 componentProps: {
555 maxLength: 255, 596 maxLength: 255,
@@ -561,6 +602,7 @@ export const modeApiForm: FormSchema[] = [ @@ -561,6 +602,7 @@ export const modeApiForm: FormSchema[] = [
561 component: 'Select', 602 component: 'Select',
562 label: 'Request', 603 label: 'Request',
563 colProps: { span: 12 }, 604 colProps: { span: 12 },
  605 + defaultValue: 'POST',
564 componentProps: { 606 componentProps: {
565 placeholder: '请选择Request method', 607 placeholder: '请选择Request method',
566 options: [ 608 options: [
@@ -589,7 +631,7 @@ export const modeApiForm: FormSchema[] = [ @@ -589,7 +631,7 @@ export const modeApiForm: FormSchema[] = [
589 maxLength: 255, 631 maxLength: 255,
590 placeholder: 'http或者https开头', 632 placeholder: 'http或者https开头',
591 }, 633 },
592 - show: ({ values }) => { 634 + ifShow: ({ values }) => {
593 return !!values.enableProxy; 635 return !!values.enableProxy;
594 }, 636 },
595 }, 637 },
@@ -598,12 +640,13 @@ export const modeApiForm: FormSchema[] = [ @@ -598,12 +640,13 @@ export const modeApiForm: FormSchema[] = [
598 label: 'Port', 640 label: 'Port',
599 colProps: { span: 12 }, 641 colProps: { span: 12 },
600 required: true, 642 required: true,
601 - component: 'Input', 643 + component: 'InputNumber',
  644 + defaultValue: 0,
602 componentProps: { 645 componentProps: {
603 maxLength: 255, 646 maxLength: 255,
604 placeholder: 'http或者https开头', 647 placeholder: 'http或者https开头',
605 }, 648 },
606 - show: ({ values }) => { 649 + ifShow: ({ values }) => {
607 return !!values.enableProxy; 650 return !!values.enableProxy;
608 }, 651 },
609 }, 652 },
@@ -617,7 +660,7 @@ export const modeApiForm: FormSchema[] = [ @@ -617,7 +660,7 @@ export const modeApiForm: FormSchema[] = [
617 maxLength: 255, 660 maxLength: 255,
618 placeholder: '请输入Proxy user', 661 placeholder: '请输入Proxy user',
619 }, 662 },
620 - show: ({ values }) => { 663 + ifShow: ({ values }) => {
621 return !!values.enableProxy; 664 return !!values.enableProxy;
622 }, 665 },
623 }, 666 },
@@ -631,7 +674,7 @@ export const modeApiForm: FormSchema[] = [ @@ -631,7 +674,7 @@ export const modeApiForm: FormSchema[] = [
631 maxLength: 255, 674 maxLength: 255,
632 placeholder: '请输入Proxy password', 675 placeholder: '请输入Proxy password',
633 }, 676 },
634 - show: ({ values }) => { 677 + ifShow: ({ values }) => {
635 return !!values.enableProxy; 678 return !!values.enableProxy;
636 }, 679 },
637 }, 680 },
@@ -648,12 +691,13 @@ export const modeApiForm: FormSchema[] = [ @@ -648,12 +691,13 @@ export const modeApiForm: FormSchema[] = [
648 label: 'Max', 691 label: 'Max',
649 colProps: { span: 12 }, 692 colProps: { span: 12 },
650 required: true, 693 required: true,
651 - component: 'Input', 694 + component: 'InputNumber',
  695 + defaultValue: 0,
652 componentProps: { 696 componentProps: {
653 maxLength: 255, 697 maxLength: 255,
654 placeholder: '请输入Max number of paraller requests', 698 placeholder: '请输入Max number of paraller requests',
655 }, 699 },
656 - show: ({ values }) => { 700 + ifShow: ({ values }) => {
657 return !!values.useSystemProxyProperties; 701 return !!values.useSystemProxyProperties;
658 }, 702 },
659 }, 703 },
@@ -669,12 +713,13 @@ export const modeApiForm: FormSchema[] = [ @@ -669,12 +713,13 @@ export const modeApiForm: FormSchema[] = [
669 label: 'Read', 713 label: 'Read',
670 colProps: { span: 12 }, 714 colProps: { span: 12 },
671 required: true, 715 required: true,
672 - component: 'Input', 716 + component: 'InputNumber',
  717 + defaultValue: 0,
673 componentProps: { 718 componentProps: {
674 maxLength: 255, 719 maxLength: 255,
675 placeholder: '请输入Read timeout in times', 720 placeholder: '请输入Read timeout in times',
676 }, 721 },
677 - show: ({ values }) => { 722 + ifShow: ({ values }) => {
678 return !values.useSystemProxyProperties; 723 return !values.useSystemProxyProperties;
679 }, 724 },
680 }, 725 },
@@ -683,16 +728,41 @@ export const modeApiForm: FormSchema[] = [ @@ -683,16 +728,41 @@ export const modeApiForm: FormSchema[] = [
683 label: 'Max', 728 label: 'Max',
684 colProps: { span: 12 }, 729 colProps: { span: 12 },
685 required: true, 730 required: true,
686 - component: 'Input', 731 + component: 'InputNumber',
  732 + defaultValue: 0,
687 componentProps: { 733 componentProps: {
688 maxLength: 255, 734 maxLength: 255,
689 placeholder: '请输入Max number of paraller requests', 735 placeholder: '请输入Max number of paraller requests',
690 }, 736 },
691 - show: ({ values }) => { 737 + ifShow: ({ values }) => {
692 return !values.useSystemProxyProperties; 738 return !values.useSystemProxyProperties;
693 }, 739 },
694 }, 740 },
695 { 741 {
  742 + field: 'Header',
  743 + label: 'Header',
  744 + colProps: { span: 12 },
  745 + required: true,
  746 + component: 'Input',
  747 + defaultValue: 'Content-Type',
  748 + componentProps: {
  749 + maxLength: 255,
  750 + placeholder: 'Content-Type',
  751 + },
  752 + },
  753 + {
  754 + field: 'Value',
  755 + label: 'Value',
  756 + colProps: { span: 12 },
  757 + required: true,
  758 + component: 'Input',
  759 + defaultValue: 'application/json',
  760 + componentProps: {
  761 + maxLength: 255,
  762 + placeholder: 'application/json',
  763 + },
  764 + },
  765 + {
696 field: '1', 766 field: '1',
697 label: '', 767 label: '',
698 colProps: { span: 24 }, 768 colProps: { span: 24 },
@@ -713,7 +783,7 @@ export const modeApiForm: FormSchema[] = [ @@ -713,7 +783,7 @@ export const modeApiForm: FormSchema[] = [
713 colProps: { span: 12 }, 783 colProps: { span: 12 },
714 component: 'Checkbox', 784 component: 'Checkbox',
715 renderComponentContent: 'Trim redis queue', 785 renderComponentContent: 'Trim redis queue',
716 - show: ({ values }) => { 786 + ifShow: ({ values }) => {
717 return !!values.useRedisQueueForMsgPersistence; 787 return !!values.useRedisQueueForMsgPersistence;
718 }, 788 },
719 }, 789 },
@@ -722,12 +792,13 @@ export const modeApiForm: FormSchema[] = [ @@ -722,12 +792,13 @@ export const modeApiForm: FormSchema[] = [
722 label: 'Redis', 792 label: 'Redis',
723 colProps: { span: 12 }, 793 colProps: { span: 12 },
724 required: true, 794 required: true,
725 - component: 'Input', 795 + component: 'InputNumber',
  796 + defaultValue: 0,
726 componentProps: { 797 componentProps: {
727 maxLength: 255, 798 maxLength: 255,
728 placeholder: '请输入Redis queue max size', 799 placeholder: '请输入Redis queue max size',
729 }, 800 },
730 - show: ({ values }) => { 801 + ifShow: ({ values }) => {
731 return !!values.useRedisQueueForMsgPersistence; 802 return !!values.useRedisQueueForMsgPersistence;
732 }, 803 },
733 }, 804 },
@@ -740,9 +811,9 @@ export const modeApiForm: FormSchema[] = [ @@ -740,9 +811,9 @@ export const modeApiForm: FormSchema[] = [
740 componentProps: { 811 componentProps: {
741 placeholder: '请选择Number of acknowledgments', 812 placeholder: '请选择Number of acknowledgments',
742 options: [ 813 options: [
743 - { label: 'Anonymous', value: 'Anonymous' },  
744 - { label: 'Basic', value: 'Basic' },  
745 - { label: 'PEM', value: 'PEM' }, 814 + { label: 'Anonymous', value: 'anonymous' },
  815 + { label: 'Basic', value: 'basic' },
  816 + { label: 'PEM', value: 'pem' },
746 ], 817 ],
747 }, 818 },
748 }, 819 },
@@ -763,6 +834,7 @@ export const modeApiForm: FormSchema[] = [ @@ -763,6 +834,7 @@ export const modeApiForm: FormSchema[] = [
763 label: 'Password', 834 label: 'Password',
764 colProps: { span: 12 }, 835 colProps: { span: 12 },
765 component: 'Input', 836 component: 'Input',
  837 + required: true,
766 componentProps: { 838 componentProps: {
767 maxLength: 255, 839 maxLength: 255,
768 placeholder: '请输入Password', 840 placeholder: '请输入Password',
@@ -121,10 +121,13 @@ @@ -121,10 +121,13 @@
121 <script lang="ts"> 121 <script lang="ts">
122 import { defineComponent, ref, reactive } from 'vue'; 122 import { defineComponent, ref, reactive } from 'vue';
123 import { BasicForm, useForm } from '/@/components/Form'; 123 import { BasicForm, useForm } from '/@/components/Form';
124 - import { modeApiForm, modeKafkaInseretKeyAndValueForm } from '../config'; 124 + import { modeApiForm, modeApiInseretKeyAndValueForm } from '../config';
125 import { InboxOutlined } from '@ant-design/icons-vue'; 125 import { InboxOutlined } from '@ant-design/icons-vue';
126 import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue'; 126 import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue';
127 - 127 + interface IKeyAndValue {
  128 + key: string;
  129 + value: string;
  130 + }
128 export default defineComponent({ 131 export default defineComponent({
129 components: { 132 components: {
130 BasicForm, 133 BasicForm,
@@ -139,6 +142,21 @@ @@ -139,6 +142,21 @@
139 setup(_, { emit }) { 142 setup(_, { emit }) {
140 const fileList = ref<[]>([]); 143 const fileList = ref<[]>([]);
141 const keyAndValueArr = ref<[]>([]); 144 const keyAndValueArr = ref<[]>([]);
  145 + const temp = ref({});
  146 + let tempObj = ref({});
  147 + const otherPropertiesValues = reactive({
  148 + headers: {},
  149 + });
  150 + const credentialsV = reactive({
  151 + credentials: {
  152 + type: '',
  153 + },
  154 + });
  155 + const keyAndValueArrTemp = ref<[]>([]);
  156 + const keyAndValueObj = reactive<IKeyAndValue>({
  157 + key: '',
  158 + value: '',
  159 + });
142 const sonValues = reactive({ 160 const sonValues = reactive({
143 configuration: {}, 161 configuration: {},
144 }); 162 });
@@ -156,15 +174,18 @@ @@ -156,15 +174,18 @@
156 submitFunc: customSubmitFunc, 174 submitFunc: customSubmitFunc,
157 }); 175 });
158 176
159 - const [registerKeyAndValue] = useForm({ 177 + const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({
160 labelWidth: 80, 178 labelWidth: 80,
161 - schemas: modeKafkaInseretKeyAndValueForm, 179 + schemas: modeApiInseretKeyAndValueForm,
162 actionColOptions: { 180 actionColOptions: {
163 span: 14, 181 span: 14,
164 }, 182 },
165 }); 183 });
166 - const setStepTwoFieldsValueFunc = (v) => { 184 + const setStepTwoFieldsValueFunc = (v, v1) => {
167 setFieldsValue(v); 185 setFieldsValue(v);
  186 + setFieldsValue({
  187 + name: v1,
  188 + });
168 }; 189 };
169 const customClearStepTwoValueFunc = () => { 190 const customClearStepTwoValueFunc = () => {
170 resetFields(); 191 resetFields();
@@ -180,21 +201,26 @@ @@ -180,21 +201,26 @@
180 } finally { 201 } finally {
181 } 202 }
182 } 203 }
183 - const defaultAddKeyAndValueFunc = () => {  
184 - if (keyAndValueArr.value.length == 0) {  
185 - keyAndValueArr.value.push({  
186 - key: 1,  
187 - value: 1,  
188 - });  
189 - } 204 + const tempGetKeyAndVal = async () => {
  205 + temp.value = await validateKeyAndValue();
190 }; 206 };
191 - defaultAddKeyAndValueFunc(); 207 + // const defaultAddKeyAndValueFunc = () => {
  208 + // if (keyAndValueArr.value.length == 0) {
  209 + // keyAndValueArr.value.push(keyAndValueObj as never);
  210 + // }
  211 + // };
  212 + // defaultAddKeyAndValueFunc();
192 213
193 - const addKeyAndValueFunc = () => {  
194 - keyAndValueArr.value.push({  
195 - key: 1,  
196 - value: 1,  
197 - }); 214 + const getDefaultValue = async () => {
  215 + await tempGetKeyAndVal();
  216 + keyAndValueArrTemp.value.push(temp.value as never);
  217 + };
  218 +
  219 + const addKeyAndValueFunc = async () => {
  220 + keyAndValueArr.value.push(keyAndValueObj as never);
  221 + await tempGetKeyAndVal();
  222 + tempObj.value = temp.value;
  223 + keyAndValueArrTemp.value.push(tempObj.value as never);
198 }; 224 };
199 const removeKeyAndValueFunc = () => { 225 const removeKeyAndValueFunc = () => {
200 keyAndValueArr.value.splice(0, 1); 226 keyAndValueArr.value.splice(0, 1);
@@ -203,6 +229,18 @@ @@ -203,6 +229,18 @@
203 229
204 const getSonValueFunc = async () => { 230 const getSonValueFunc = async () => {
205 sonValues.configuration = await validate(); 231 sonValues.configuration = await validate();
  232 + if (keyAndValueArrTemp.value.length != 0) {
  233 + await getDefaultValue();
  234 + }
  235 + credentialsV.credentials.type = sonValues.configuration.type;
  236 + const kong = {};
  237 + let kongTemp = {};
  238 + keyAndValueArrTemp.value.map((item) => {
  239 + kong[item.key] = item.value;
  240 + });
  241 + kongTemp = JSON.parse(JSON.stringify(kong));
  242 + otherPropertiesValues.headers = kongTemp;
  243 + Object.assign(sonValues.configuration, otherPropertiesValues, credentialsV);
206 return sonValues; 244 return sonValues;
207 }; 245 };
208 return { 246 return {
@@ -6,14 +6,16 @@ @@ -6,14 +6,16 @@
6 <span style="display: none">{{ field }}</span> 6 <span style="display: none">{{ field }}</span>
7 <div> 7 <div>
8 <div> 8 <div>
9 - <template v-for="(item, index) in keyAndValueArr" :key="index">  
10 - <span style="display: none">{{ item + index }}</span>  
11 - <BasicForm  
12 - :showResetButton="false"  
13 - :showSubmitButton="false"  
14 - @register="registerKeyAndValue"  
15 - />  
16 - </template> 9 + <div v-if="keyAndValueArr.length > 0">
  10 + <template v-for="(item, index) in keyAndValueArr" :key="index">
  11 + <span style="display: none">{{ item + index }}</span>
  12 + <BasicForm
  13 + :showResetButton="false"
  14 + :showSubmitButton="false"
  15 + @register="registerKeyAndValue"
  16 + />
  17 + </template>
  18 + </div>
17 <div 19 <div
18 style=" 20 style="
19 width: 5vw; 21 width: 5vw;
@@ -78,7 +80,7 @@ @@ -78,7 +80,7 @@
78 </template> 80 </template>
79 <script lang="ts"> 81 <script lang="ts">
80 import { defineComponent, ref, reactive } from 'vue'; 82 import { defineComponent, ref, reactive } from 'vue';
81 - import { BasicForm, useForm } from '/@/components/Form'; 83 + import { BasicForm, useForm, FormActionType } from '/@/components/Form';
82 import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config'; 84 import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config';
83 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 85 import { Alert, Divider, Descriptions } from 'ant-design-vue';
84 86
@@ -101,6 +103,7 @@ @@ -101,6 +103,7 @@
101 let tempObj = ref({}); 103 let tempObj = ref({});
102 const keyAndValueArr = ref<[]>([]); 104 const keyAndValueArr = ref<[]>([]);
103 const keyAndValueArrTemp = ref<[]>([]); 105 const keyAndValueArrTemp = ref<[]>([]);
  106 + const vType = ref('');
104 const keyAndValueObj = reactive<IKeyAndValue>({ 107 const keyAndValueObj = reactive<IKeyAndValue>({
105 key: '', 108 key: '',
106 value: '', 109 value: '',
@@ -111,7 +114,8 @@ @@ -111,7 +114,8 @@
111 const otherPropertiesValues = reactive({ 114 const otherPropertiesValues = reactive({
112 otherProperties: {}, 115 otherProperties: {},
113 }); 116 });
114 - const [register, { validate, setFieldsValue, resetFields }] = useForm({ 117 +
  118 + const [register, { validate, setFieldsValue }] = useForm({
115 labelWidth: 80, 119 labelWidth: 80,
116 schemas: modeKafkaForm, 120 schemas: modeKafkaForm,
117 actionColOptions: { 121 actionColOptions: {
@@ -123,7 +127,7 @@ @@ -123,7 +127,7 @@
123 resetFunc: customResetFunc, 127 resetFunc: customResetFunc,
124 }); 128 });
125 129
126 - const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({ 130 + const [registerKeyAndValue, { validate: validateKeyAndValue, resetFields }] = useForm({
127 labelWidth: 80, 131 labelWidth: 80,
128 schemas: modeKafkaInseretKeyAndValueForm, 132 schemas: modeKafkaInseretKeyAndValueForm,
129 actionColOptions: { 133 actionColOptions: {
@@ -132,14 +136,17 @@ @@ -132,14 +136,17 @@
132 }); 136 });
133 137
134 const setStepTwoFieldsValueFunc = (v, v1) => { 138 const setStepTwoFieldsValueFunc = (v, v1) => {
135 - console.log(v);  
136 setFieldsValue(v); 139 setFieldsValue(v);
  140 + vType.value = v1;
137 setFieldsValue({ 141 setFieldsValue({
138 name: v1, 142 name: v1,
139 }); 143 });
140 }; 144 };
141 const customClearStepTwoValueFunc = () => { 145 const customClearStepTwoValueFunc = () => {
142 - resetFields(); 146 + console.log('clear');
  147 + setTimeout(() => {
  148 + resetFields();
  149 + }, 100);
143 }; 150 };
144 async function customResetFunc() { 151 async function customResetFunc() {
145 emit('prev'); 152 emit('prev');
@@ -148,35 +155,46 @@ @@ -148,35 +155,46 @@
148 const tempGetKeyAndVal = async () => { 155 const tempGetKeyAndVal = async () => {
149 temp.value = await validateKeyAndValue(); 156 temp.value = await validateKeyAndValue();
150 }; 157 };
151 - const defaultAddKeyAndValueFunc = () => {  
152 - if (keyAndValueArr.value.length == 0) {  
153 - keyAndValueArr.value.push(keyAndValueObj as never);  
154 - }  
155 - };  
156 - defaultAddKeyAndValueFunc(); 158 + // const defaultAddKeyAndValueFunc = () => {
  159 + // if (keyAndValueArr.value.length == 0) {
  160 + // keyAndValueArr.value.push(keyAndValueObj as never);
  161 + // }
  162 + // };
  163 + // defaultAddKeyAndValueFunc();
157 164
158 - const getDefaultValue = () => {  
159 - tempGetKeyAndVal(); 165 + const getDefaultValue = async () => {
  166 + await tempGetKeyAndVal();
160 keyAndValueArrTemp.value.push(temp.value as never); 167 keyAndValueArrTemp.value.push(temp.value as never);
161 }; 168 };
162 169
163 - const addKeyAndValueFunc = () => { 170 + const addKeyAndValueFunc = async () => {
164 keyAndValueArr.value.push(keyAndValueObj as never); 171 keyAndValueArr.value.push(keyAndValueObj as never);
165 - tempGetKeyAndVal(); 172 + await tempGetKeyAndVal();
166 tempObj.value = temp.value; 173 tempObj.value = temp.value;
167 keyAndValueArrTemp.value.push(tempObj.value as never); 174 keyAndValueArrTemp.value.push(tempObj.value as never);
168 - console.log(keyAndValueArrTemp.value);  
169 }; 175 };
170 const removeKeyAndValueFunc = () => { 176 const removeKeyAndValueFunc = () => {
171 keyAndValueArr.value.splice(0, 1); 177 keyAndValueArr.value.splice(0, 1);
172 }; 178 };
173 179
174 const getSonValueFunc = async () => { 180 const getSonValueFunc = async () => {
175 - sonValues.configuration = await validate();  
176 - getDefaultValue();  
177 - console.log(sonValues.configuration);  
178 - console.log(otherPropertiesValues.otherProperties);  
179 - return sonValues; 181 + try {
  182 + sonValues.configuration = await validate();
  183 + if (keyAndValueArrTemp.value.length != 0) {
  184 + await getDefaultValue();
  185 + }
  186 + const kong = {};
  187 + let kongTemp = {};
  188 + keyAndValueArrTemp.value.map((item) => {
  189 + kong[item.key] = item.value;
  190 + });
  191 + kongTemp = JSON.parse(JSON.stringify(kong));
  192 + otherPropertiesValues.otherProperties = kongTemp;
  193 + Object.assign(sonValues.configuration, otherPropertiesValues);
  194 + return sonValues;
  195 + } catch (e) {
  196 + return e;
  197 + }
180 }; 198 };
181 return { 199 return {
182 getSonValueFunc, 200 getSonValueFunc,
@@ -198,6 +216,7 @@ @@ -198,6 +216,7 @@
198 border: 1px solid #bfbfbf; 216 border: 1px solid #bfbfbf;
199 display: flex; 217 display: flex;
200 margin-top: 1vh; 218 margin-top: 1vh;
  219 + border-radius: 8px;
201 .root-form { 220 .root-form {
202 width: 44vw; 221 width: 44vw;
203 margin: 1vh 1vw; 222 margin: 1vh 1vw;
@@ -83,6 +83,11 @@ @@ -83,6 +83,11 @@
83 emits: ['next', 'prev', 'register'], 83 emits: ['next', 'prev', 'register'],
84 setup(_, { emit }) { 84 setup(_, { emit }) {
85 const fileList = ref<[]>([]); 85 const fileList = ref<[]>([]);
  86 + const credentialsV = reactive({
  87 + credentials: {
  88 + type: '',
  89 + },
  90 + });
86 const sonValues = reactive({ 91 const sonValues = reactive({
87 configuration: {}, 92 configuration: {},
88 }); 93 });
@@ -99,8 +104,11 @@ @@ -99,8 +104,11 @@
99 resetFunc: customResetFunc, 104 resetFunc: customResetFunc,
100 submitFunc: customSubmitFunc, 105 submitFunc: customSubmitFunc,
101 }); 106 });
102 - const setStepTwoFieldsValueFunc = (v) => { 107 + const setStepTwoFieldsValueFunc = (v, v1) => {
103 setFieldsValue(v); 108 setFieldsValue(v);
  109 + setFieldsValue({
  110 + name: v1,
  111 + });
104 }; 112 };
105 const customClearStepTwoValueFunc = () => { 113 const customClearStepTwoValueFunc = () => {
106 resetFields(); 114 resetFields();
@@ -119,6 +127,8 @@ @@ -119,6 +127,8 @@
119 const handleChange = () => {}; 127 const handleChange = () => {};
120 const getSonValueFunc = async () => { 128 const getSonValueFunc = async () => {
121 sonValues.configuration = await validate(); 129 sonValues.configuration = await validate();
  130 + credentialsV.credentials.type = sonValues.configuration.type;
  131 + Object.assign(sonValues.configuration, credentialsV);
122 return sonValues; 132 return sonValues;
123 }; 133 };
124 return { 134 return {
@@ -65,9 +65,12 @@ @@ -65,9 +65,12 @@
65 import { defineComponent, ref, reactive } from 'vue'; 65 import { defineComponent, ref, reactive } from 'vue';
66 import { BasicForm, useForm } from '/@/components/Form'; 66 import { BasicForm, useForm } from '/@/components/Form';
67 import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config'; 67 import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config';
68 -  
69 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 68 import { Alert, Divider, Descriptions } from 'ant-design-vue';
70 69
  70 + interface IKeyAndValue {
  71 + key: string;
  72 + value: string;
  73 + }
71 export default defineComponent({ 74 export default defineComponent({
72 components: { 75 components: {
73 BasicForm, 76 BasicForm,
@@ -78,6 +81,17 @@ @@ -78,6 +81,17 @@
78 }, 81 },
79 emits: ['next', 'prev', 'register'], 82 emits: ['next', 'prev', 'register'],
80 setup(_, { emit }) { 83 setup(_, { emit }) {
  84 + const temp = ref({});
  85 + let tempObj = ref({});
  86 + const otherPropertiesValues = reactive({
  87 + clientProperties: {},
  88 + });
  89 +
  90 + const keyAndValueArrTemp = ref<[]>([]);
  91 + const keyAndValueObj = reactive<IKeyAndValue>({
  92 + key: '',
  93 + value: '',
  94 + });
81 const keyAndValueArr = ref<[]>([]); 95 const keyAndValueArr = ref<[]>([]);
82 const sonValues = reactive({ 96 const sonValues = reactive({
83 configuration: {}, 97 configuration: {},
@@ -97,7 +111,7 @@ @@ -97,7 +111,7 @@
97 submitFunc: customSubmitFunc, 111 submitFunc: customSubmitFunc,
98 }); 112 });
99 113
100 - const [registerKeyAndValue] = useForm({ 114 + const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({
101 labelWidth: 80, 115 labelWidth: 80,
102 schemas: modeKafkaInseretKeyAndValueForm, 116 schemas: modeKafkaInseretKeyAndValueForm,
103 actionColOptions: { 117 actionColOptions: {
@@ -105,8 +119,11 @@ @@ -105,8 +119,11 @@
105 }, 119 },
106 }); 120 });
107 121
108 - const setStepTwoFieldsValueFunc = (v) => { 122 + const setStepTwoFieldsValueFunc = (v, v1) => {
109 setFieldsValue(v); 123 setFieldsValue(v);
  124 + setFieldsValue({
  125 + name: v1,
  126 + });
110 }; 127 };
111 const customClearStepTwoValueFunc = () => { 128 const customClearStepTwoValueFunc = () => {
112 resetFields(); 129 resetFields();
@@ -122,27 +139,43 @@ @@ -122,27 +139,43 @@
122 } finally { 139 } finally {
123 } 140 }
124 } 141 }
125 - const defaultAddKeyAndValueFunc = () => {  
126 - if (keyAndValueArr.value.length == 0) {  
127 - keyAndValueArr.value.push({  
128 - key: 1,  
129 - value: 1,  
130 - });  
131 - } 142 + const tempGetKeyAndVal = async () => {
  143 + temp.value = await validateKeyAndValue();
132 }; 144 };
133 - defaultAddKeyAndValueFunc(); 145 + // const defaultAddKeyAndValueFunc = () => {
  146 + // if (keyAndValueArr.value.length == 0) {
  147 + // keyAndValueArr.value.push(keyAndValueObj as never);
  148 + // }
  149 + // };
  150 + // defaultAddKeyAndValueFunc();
134 151
135 - const addKeyAndValueFunc = () => {  
136 - keyAndValueArr.value.push({  
137 - key: 1,  
138 - value: 1,  
139 - }); 152 + const getDefaultValue = async () => {
  153 + await tempGetKeyAndVal();
  154 + keyAndValueArrTemp.value.push(temp.value as never);
  155 + };
  156 +
  157 + const addKeyAndValueFunc = async () => {
  158 + keyAndValueArr.value.push(keyAndValueObj as never);
  159 + await tempGetKeyAndVal();
  160 + tempObj.value = temp.value;
  161 + keyAndValueArrTemp.value.push(tempObj.value as never);
140 }; 162 };
141 const removeKeyAndValueFunc = () => { 163 const removeKeyAndValueFunc = () => {
142 keyAndValueArr.value.splice(0, 1); 164 keyAndValueArr.value.splice(0, 1);
143 }; 165 };
144 const getSonValueFunc = async () => { 166 const getSonValueFunc = async () => {
145 sonValues.configuration = await validate(); 167 sonValues.configuration = await validate();
  168 + if (keyAndValueArrTemp.value.length != 0) {
  169 + await getDefaultValue();
  170 + }
  171 + const kong = {};
  172 + let kongTemp = {};
  173 + keyAndValueArrTemp.value.map((item) => {
  174 + kong[item.key] = item.value;
  175 + });
  176 + kongTemp = JSON.parse(JSON.stringify(kong));
  177 + otherPropertiesValues.clientProperties = kongTemp;
  178 + Object.assign(sonValues.configuration, otherPropertiesValues);
146 return sonValues; 179 return sonValues;
147 }; 180 };
148 181
@@ -46,6 +46,7 @@ @@ -46,6 +46,7 @@
46 const refTransferConfigRabbitMq = ref(null); 46 const refTransferConfigRabbitMq = ref(null);
47 const refTransferConfigApi = ref(null); 47 const refTransferConfigApi = ref(null);
48 const isWhereComp = ref(''); 48 const isWhereComp = ref('');
  49 +
49 const editSonData = reactive({ 50 const editSonData = reactive({
50 type: '', 51 type: '',
51 configuration: {}, 52 configuration: {},
@@ -61,19 +62,23 @@ @@ -61,19 +62,23 @@
61 } 62 }
62 ); 63 );
63 const clearSonValueDataFunc = () => { 64 const clearSonValueDataFunc = () => {
64 - try {  
65 - if (isWhereComp.value == 'KafKA') {  
66 - proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();  
67 - } else if (isWhereComp.value == 'MQTT') {  
68 - proxy.$refs.refTransferConfigMqtt.customClearStepTwoValueFunc();  
69 - } else if (isWhereComp.value == 'RabbitMq') {  
70 - proxy.$refs.refTransferConfigRabbitMq.customClearStepTwoValueFunc();  
71 - } else if (isWhereComp.value == 'Api') {  
72 - proxy.$refs.refTransferConfigApi.customClearStepTwoValueFunc();  
73 - }  
74 - } catch (e) {  
75 - return e;  
76 - } 65 + proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();
  66 +
  67 + // try {
  68 + // if (isWhereComp.value == 'KafKA') {
  69 + // onMounted(() => {
  70 + // proxy.$refs.refTransferConfigKafka.customClearStepTwoValueFunc();
  71 + // });
  72 + // } else if (isWhereComp.value == 'MQTT') {
  73 + // proxy.$refs.refTransferConfigMqtt.customClearStepTwoValueFunc();
  74 + // } else if (isWhereComp.value == 'RabbitMq') {
  75 + // proxy.$refs.refTransferConfigRabbitMq.customClearStepTwoValueFunc();
  76 + // } else if (isWhereComp.value == 'Api') {
  77 + // proxy.$refs.refTransferConfigApi.customClearStepTwoValueFunc();
  78 + // }
  79 + // } catch (e) {
  80 + // return e;
  81 + // }
77 }; 82 };
78 const getSonValueDataFunc = () => { 83 const getSonValueDataFunc = () => {
79 if (isWhereComp.value == 'KafKA') { 84 if (isWhereComp.value == 'KafKA') {
@@ -14,6 +14,13 @@ @@ -14,6 +14,13 @@
14 > 14 >
15 <span style="color: white">批量删除</span> 15 <span style="color: white">批量删除</span>
16 </a-button> 16 </a-button>
  17 + <a-button
  18 + @click="handleMutiuteDisable"
  19 + style="background-color: rgba(128, 128, 128.2)"
  20 + type="default"
  21 + >
  22 + <span style="color: white">批量禁用</span>
  23 + </a-button>
17 </template> 24 </template>
18 <template #action="{ record }"> 25 <template #action="{ record }">
19 <TableAction 26 <TableAction
@@ -21,7 +28,11 @@ @@ -21,7 +28,11 @@
21 { 28 {
22 label: '编辑', 29 label: '编辑',
23 icon: 'clarity:note-edit-line', 30 icon: 'clarity:note-edit-line',
  31 + color: 'success',
24 onClick: handleEdit.bind(null, record), 32 onClick: handleEdit.bind(null, record),
  33 + ifShow: (_action) => {
  34 + return record.status == 0;
  35 + },
25 }, 36 },
26 37
27 { 38 {
@@ -32,27 +43,32 @@ @@ -32,27 +43,32 @@
32 title: '是否确认删除', 43 title: '是否确认删除',
33 confirm: handleSingleDelete.bind(null, record), 44 confirm: handleSingleDelete.bind(null, record),
34 }, 45 },
  46 + ifShow: (_action) => {
  47 + return record.status == 0;
  48 + },
35 }, 49 },
36 - ]"  
37 - :dropDownActions="[  
38 { 50 {
39 label: '启用', 51 label: '启用',
  52 + icon: 'ant-design:check-circle-outlined',
  53 + color: 'warning',
40 popConfirm: { 54 popConfirm: {
41 title: '是否启用？', 55 title: '是否启用？',
42 confirm: handleEnableOrDisable.bind(null, record), 56 confirm: handleEnableOrDisable.bind(null, record),
43 }, 57 },
44 ifShow: (_action) => { 58 ifShow: (_action) => {
45 - return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮 59 + return record.status == 0;
46 }, 60 },
47 }, 61 },
48 { 62 {
49 label: '禁用', 63 label: '禁用',
  64 + icon: 'ant-design:check-circle-outlined',
  65 + color: 'warning',
50 popConfirm: { 66 popConfirm: {
51 title: '是否禁用？', 67 title: '是否禁用？',
52 - confirm: handleEnableOrDisable.bind(null, record), 68 + confirm: handleDisable.bind(null, record),
53 }, 69 },
54 - ifShow: () => {  
55 - return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮 70 + ifShow: (_action) => {
  71 + return record.status == 1;
56 }, 72 },
57 }, 73 },
58 ]" 74 ]"
@@ -65,7 +81,7 @@ @@ -65,7 +81,7 @@
65 </div> 81 </div>
66 </template> 82 </template>
67 <script lang="ts"> 83 <script lang="ts">
68 - import { defineComponent, reactive } from 'vue'; 84 + import { defineComponent, reactive, ref } from 'vue';
69 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 85 import { BasicTable, useTable, TableAction } from '/@/components/Table';
70 import { columns, searchFormSchema } from './config'; 86 import { columns, searchFormSchema } from './config';
71 import { useModal } from '/@/components/Modal'; 87 import { useModal } from '/@/components/Modal';
@@ -86,9 +102,10 @@ @@ -86,9 +102,10 @@
86 status: 0, 102 status: 0,
87 }); 103 });
88 const { createMessage } = useMessage(); 104 const { createMessage } = useMessage();
89 - let selectedRowKeys: Array<string> = []; 105 + let selectedRowKeys: any = ref([]);
  106 + let getSelectRowsArr: any = ref([]);
90 const [registerModal, { openModal }] = useModal(); 107 const [registerModal, { openModal }] = useModal();
91 - const [registerTable, { reload, getSelectRowKeys }] = useTable({ 108 + const [registerTable, { reload, getSelectRowKeys, getSelectRows }] = useTable({
92 title: '数据转换列表', 109 title: '数据转换列表',
93 clickToRowSelect: false, 110 clickToRowSelect: false,
94 columns, 111 columns,
@@ -132,16 +149,26 @@ @@ -132,16 +149,26 @@
132 }, 10); 149 }, 10);
133 }; 150 };
134 const handleEnableOrDisable = async (record: Recordable) => { 151 const handleEnableOrDisable = async (record: Recordable) => {
  152 + enableObj.convertIds.length = 0;
135 enableObj.status = record.status; 153 enableObj.status = record.status;
136 - if (enableObj.status == 1) return;  
137 - if (enableObj.convertIds.length == 0) {  
138 - enableObj.convertIds.push(record.id as never);  
139 - } 154 + enableObj.convertIds.push(record.id as never);
140 if (enableObj.status == 0) { 155 if (enableObj.status == 0) {
141 enableObj.status = 1; 156 enableObj.status = 1;
142 } 157 }
143 await isEnableOrDisableApi(enableObj as never); 158 await isEnableOrDisableApi(enableObj as never);
144 createMessage.success('转换配置启用成功'); 159 createMessage.success('转换配置启用成功');
  160 + reload();
  161 + };
  162 + const handleDisable = async (record: Recordable) => {
  163 + enableObj.convertIds.length = 0;
  164 + enableObj.status = record.status;
  165 + enableObj.convertIds.push(record.id as never);
  166 + if (enableObj.status == 1) {
  167 + enableObj.status = 0;
  168 + }
  169 + await isEnableOrDisableApi(enableObj as never);
  170 + createMessage.success('转换配置禁用成功');
  171 + reload();
145 }; 172 };
146 const handleSingleDelete = async (record: Recordable) => { 173 const handleSingleDelete = async (record: Recordable) => {
147 try { 174 try {
@@ -154,14 +181,26 @@ @@ -154,14 +181,26 @@
154 } 181 }
155 }; 182 };
156 const useSelectionChange = () => { 183 const useSelectionChange = () => {
157 - selectedRowKeys = getSelectRowKeys(); 184 + selectedRowKeys.value = getSelectRowKeys();
158 }; 185 };
159 186
160 const handleDelete = async () => { 187 const handleDelete = async () => {
161 - await deleteConvertApi(selectedRowKeys); 188 + await deleteConvertApi(selectedRowKeys.value);
162 createMessage.success('删除成功'); 189 createMessage.success('删除成功');
163 reload(); 190 reload();
164 }; 191 };
  192 + const handleMutiuteDisable = async () => {
  193 + getSelectRowsArr.value = getSelectRows();
  194 + getSelectRowsArr.value.forEach((f) => {
  195 + if (f.id) {
  196 + enableObj.status = 0;
  197 + enableObj.convertIds.push(f.id as never);
  198 + }
  199 + });
  200 + await isEnableOrDisableApi(enableObj as never);
  201 + createMessage.success('转换配置多项禁用成功');
  202 + reload();
  203 + };
165 204
166 return { 205 return {
167 registerTable, 206 registerTable,
@@ -173,6 +212,8 @@ @@ -173,6 +212,8 @@
173 handleEnableOrDisable, 212 handleEnableOrDisable,
174 handleSingleDelete, 213 handleSingleDelete,
175 useSelectionChange, 214 useSelectionChange,
  215 + handleMutiuteDisable,
  216 + handleDisable,
176 }; 217 };
177 }, 218 },
178 }); 219 });