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