简柏林 / thingskit-front · Commits

Commit 7908d9e553fccd4562fded2cae61bb55a779124a

Authored by xp.Huang
2 parents d383b52e ae595fc7

Merge branch 'ft-dev' into 'main' 

feat:新增数据转换，新增，删除，批量删除，编辑，查询，fix:待修复启用

See merge request huang/yun-teng-iot-front!113
Inline Side-by-side
Showing 13 changed files with 1760 additions and 213 deletions
  1 +import { defHttp } from '/@/utils/http/axios';
  2 +import {
  3 + IDataManagerModel,
  4 + IEnableOrDisableModel,
  5 + TDataManagerModelQuery,
  6 +} from './model/dataManagerModel';
  7 +
  8 +enum DataManagerApi {
  9 + DATA_MANAGER_CONVERT_ADD_OR_EDIT = '/convert',
  10 + DATA_MANAGER_CONVERT_DELETE = '/convert',
  11 + DATA_MANAGER_CONVERT_POST_CHECK_NAME = '/convert/check',
  12 + DATA_MANAGER_CONVERT_POST_ENABLE_OR_DISABLED = '/convert/update',
  13 + DATA_MANAGER_CONVERT_GET = '/convert',
  14 +}
  15 +
  16 +// 转换配置分页查询
  17 +export const getConvertApi = (params: TDataManagerModelQuery) => {
  18 + return defHttp.get<TDataManagerModelQuery>({
  19 + url: DataManagerApi.DATA_MANAGER_CONVERT_GET,
  20 + params,
  21 + });
  22 +};
  23 +
  24 +// 添加或修改转换配置
  25 +export const postAddConvertApi = (params: IDataManagerModel) => {
  26 + return defHttp.post<IDataManagerModel>({
  27 + url: DataManagerApi.DATA_MANAGER_CONVERT_ADD_OR_EDIT,
  28 + params,
  29 + });
  30 +};
  31 +
  32 +//删除转换配置
  33 +export const deleteConvertApi = (ids: string[]) => {
  34 + return defHttp.delete({
  35 + url: DataManagerApi.DATA_MANAGER_CONVERT_DELETE,
  36 + data: {
  37 + ids: ids,
  38 + },
  39 + });
  40 +};
  41 +
  42 +// 查询配置名称是否存在
  43 +export const isExistDataManagerNameApi = (params?: TDataManagerModelQuery) => {
  44 + return defHttp.get({
  45 + url: DataManagerApi.DATA_MANAGER_CONVERT_POST_CHECK_NAME,
  46 + params,
  47 + });
  48 +};
  49 +
  50 +// 启用或者禁用配置
  51 +export const isEnableOrDisableApi = (params: IEnableOrDisableModel) => {
  52 + return defHttp.post<IEnableOrDisableModel>({
  53 + url: DataManagerApi.DATA_MANAGER_CONVERT_POST_ENABLE_OR_DISABLED,
  54 + params,
  55 + });
  56 +};
  1 +import { BasicPageParams } from '/@/api/model/baseModel';
  2 +
  3 +export type TDataManagerModelQuery = BasicPageParams & TDataManagerParam;
  4 +
  5 +export type TDataManagerParam = {
  6 + name?: string;
  7 + status?: string;
  8 +};
  9 +
  10 +export interface IDataManagerModel {
  11 + configuration?: {};
  12 + createTime?: string;
  13 + creator?: string;
  14 + defaultConfig?: string;
  15 + description?: string;
  16 + enabled?: true;
  17 + icon?: string;
  18 + id?: string;
  19 + name?: string;
  20 + roleIds?: [];
  21 + status?: 0;
  22 + tenantExpireTime?: string;
  23 + tenantId?: string;
  24 + tenantProfileId?: string;
  25 + tenantStatus?: string;
  26 + type?: string;
  27 + updateTime?: string;
  28 + updater?: string;
  29 +}
  30 +
  31 +export interface IEnableOrDisableModel {
  32 + convertIds?: [string];
  33 + status?: number;
  34 +}
@@ -14,18 +14,35 @@ @@ -14,18 +14,35 @@
14 </a-steps> 14 </a-steps>
15 </div> 15 </div>
16 <div> 16 <div>
17 - <div v-show="current === 0"> <TransferConfigMode @next="handleNext" /></div>  
18 - <div v-show="current === 1"> <TransferConfigParams @prev="handlePrev" /></div> 17 + <div v-show="current === 0">
  18 + <TransferConfigMode ref="refTransferConfigMode" @next="handleNext"
  19 + /></div>
  20 + <div v-show="current === 1">
  21 + <TransferConfigParams
  22 + ref="refTransferConfigParams"
  23 + :getModeSelect="getModeSelectVal"
  24 + @prevSon="handlePrev"
  25 + /></div>
19 </div> 26 </div>
20 </BasicModal> 27 </BasicModal>
21 </div> 28 </div>
22 </template> 29 </template>
23 <script lang="ts"> 30 <script lang="ts">
24 - import { defineComponent, ref, computed, unref } from 'vue'; 31 + import {
  32 + defineComponent,
  33 + reactive,
  34 + ref,
  35 + nextTick,
  36 + computed,
  37 + unref,
  38 + getCurrentInstance,
  39 + } from 'vue';
25 import { BasicModal, useModalInner } from '/@/components/Modal'; 40 import { BasicModal, useModalInner } from '/@/components/Modal';
26 import { Steps } from 'ant-design-vue'; 41 import { Steps } from 'ant-design-vue';
27 import TransferConfigMode from './cpns/transferConfigMode.vue'; 42 import TransferConfigMode from './cpns/transferConfigMode.vue';
28 import TransferConfigParams from './cpns/transferConfigParams.vue'; 43 import TransferConfigParams from './cpns/transferConfigParams.vue';
  44 + import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
  45 + import { useMessage } from '/@/hooks/web/useMessage';
29 46
30 export default defineComponent({ 47 export default defineComponent({
31 name: 'ConfigDrawer', 48 name: 'ConfigDrawer',
@@ -36,22 +53,130 @@ @@ -36,22 +53,130 @@
36 TransferConfigMode, 53 TransferConfigMode,
37 TransferConfigParams, 54 TransferConfigParams,
38 }, 55 },
39 - setup() { 56 + emits: ['success'],
  57 + setup(_, { emit }) {
  58 + const { createMessage } = useMessage();
  59 + const { proxy } = getCurrentInstance();
  60 + const allPostForm = reactive({});
  61 + const getNameObj = reactive({
  62 + name: '',
  63 + });
  64 + const getTypeObj = reactive({
  65 + type: '',
  66 + });
  67 + const getSonFormValue = ref({});
  68 + const getModeSonFormValue = ref({});
  69 + const refTransferConfigParams = ref(null);
  70 + const refTransferConfigMode = ref(null);
  71 + const getModeSelectVal = ref({});
40 const isUpdate = ref(true); 72 const isUpdate = ref(true);
41 const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换')); 73 const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换'));
42 const current = ref(0); 74 const current = ref(0);
  75 + const editPostId = ref('');
43 76
44 - const [registerDrawer] = useModalInner(async (data) => { 77 + const [registerDrawer, { closeModal }] = useModalInner(async (data) => {
45 isUpdate.value = !!data?.isUpdate; 78 isUpdate.value = !!data?.isUpdate;
46 current.value = 0; 79 current.value = 0;
  80 + if (!unref(isUpdate)) {
  81 + try {
  82 + proxy.$refs.refTransferConfigMode.customResetStepOneFunc();
  83 + // nextTick(() => {
  84 + // proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
  85 + // });
  86 + } catch (e) {
  87 + return e;
  88 + }
  89 + } else {
  90 + editPostId.value = data.record.id;
  91 + const editType = {
  92 + type: '',
  93 + configuration: {},
  94 + name: '',
  95 + };
  96 + if (data.record.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
  97 + editType.type = 'KafKA';
  98 + editType.configuration = data.record.configuration;
  99 + editType.name = data.record.name;
  100 + } else if (data.record.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
  101 + editType.type = 'MQTT';
  102 + editType.configuration = data.record.configuration;
  103 + editType.name = data.record.name;
  104 + } else if (data.record.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
  105 + editType.type = 'RabbitMq';
  106 + editType.configuration = data.record.configuration;
  107 + editType.name = data.record.name;
  108 + } else if (data.record.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
  109 + editType.type = 'Api';
  110 + editType.configuration = data.record.configuration;
  111 + editType.name = data.record.name;
  112 + }
  113 + proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editType);
  114 + proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
  115 + proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
  116 + proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
  117 + proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
  118 + }
47 }); 119 });
48 - const handleNext = () => { 120 + const handleNext = (args) => {
49 current.value++; 121 current.value++;
  122 + 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 + // }
50 }; 133 };
51 const handlePrev = () => { 134 const handlePrev = () => {
52 current.value--; 135 current.value--;
53 }; 136 };
54 - const handleSubmit = () => {}; 137 + const addOrEditFunc = async () => {
  138 + getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc();
  139 + getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc();
  140 + if (getModeSonFormValue.value?.type == 'KafKA') {
  141 + getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
  142 + getNameObj.name = getSonFormValue.value?.configuration?.name;
  143 + delete getSonFormValue.value?.configuration?.name;
  144 + } else if (getModeSonFormValue.value?.type == 'MQTT') {
  145 + getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode';
  146 + getNameObj.name = getSonFormValue.value?.configuration?.name;
  147 + delete getSonFormValue.value?.configuration?.name;
  148 + } else if (getModeSonFormValue.value?.type == 'RabbitMq') {
  149 + getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
  150 + getNameObj.name = getSonFormValue.value?.configuration?.name;
  151 + delete getSonFormValue.value?.configuration?.name;
  152 + } else if (getModeSonFormValue.value?.type == 'Api') {
  153 + getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode';
  154 + getNameObj.name = getSonFormValue.value?.configuration?.name;
  155 + delete getSonFormValue.value?.configuration?.name;
  156 + }
  157 + const id: any = {
  158 + id: unref(isUpdate) ? editPostId.value : '',
  159 + };
  160 + Object.assign(allPostForm, getTypeObj, getSonFormValue.value, getNameObj, id);
  161 + if (!unref(isUpdate)) {
  162 + delete allPostForm.id;
  163 + }
  164 + };
  165 + const handleSubmit = async () => {
  166 + if (!unref(isUpdate)) {
  167 + addOrEditFunc();
  168 + await postAddConvertApi(allPostForm);
  169 + createMessage.success('数据转换新增成功');
  170 + emit('success');
  171 + closeModal();
  172 + } else {
  173 + addOrEditFunc();
  174 + await postAddConvertApi(allPostForm);
  175 + createMessage.success('数据转换编辑成功');
  176 + emit('success');
  177 + closeModal();
  178 + }
  179 + };
55 return { 180 return {
56 registerDrawer, 181 registerDrawer,
57 handleSubmit, 182 handleSubmit,
@@ -59,6 +184,9 @@ @@ -59,6 +184,9 @@
59 current, 184 current,
60 handleNext, 185 handleNext,
61 handlePrev, 186 handlePrev,
  187 + getModeSelectVal,
  188 + refTransferConfigParams,
  189 + refTransferConfigMode,
62 }; 190 };
63 }, 191 },
64 }); 192 });
@@ -8,8 +8,17 @@ export const columns: BasicColumn[] = [ @@ -8,8 +8,17 @@ export const columns: BasicColumn[] = [
8 }, 8 },
9 { 9 {
10 title: '途径', 10 title: '途径',
11 - dataIndex: 'name1', 11 + dataIndex: 'type',
12 width: 200, 12 width: 200,
  13 + format: (_text: string, record: Recordable) => {
  14 + return record.type === 'org.thingsboard.rule.engine.kafka.TbKafkaNode'
  15 + ? 'KafKA'
  16 + : record.type === 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
  17 + ? 'MQTT'
  18 + : record.type === 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
  19 + ? 'RabbitMq'
  20 + : 'Api';
  21 + },
13 }, 22 },
14 { 23 {
15 title: '状态', 24 title: '状态',
1 import { FormSchema } from '/@/components/Form'; 1 import { FormSchema } from '/@/components/Form';
2 2
  3 +export enum CredentialsEnum {
  4 + IS_ANONYMOUS = 'Anonymous',
  5 + IS_BASIC = 'Basic',
  6 + IS_PEM = 'PEM',
  7 +}
  8 +
  9 +export const isBasic = (type: string) => {
  10 + return type === CredentialsEnum.IS_BASIC;
  11 +};
  12 +export const isPem = (type: string) => {
  13 + return type === CredentialsEnum.IS_PEM;
  14 +};
  15 +
3 export const modeForm: FormSchema[] = [ 16 export const modeForm: FormSchema[] = [
4 { 17 {
5 - field: '',  
6 - label: '', 18 + field: 'type',
  19 + label: '转换方式',
7 component: 'Select', 20 component: 'Select',
  21 + required: true,
8 componentProps: { 22 componentProps: {
9 placeholder: '请选择转换方式', 23 placeholder: '请选择转换方式',
10 options: [ 24 options: [
11 { label: 'KafKA', value: 'KafKA' }, 25 { label: 'KafKA', value: 'KafKA' },
12 { label: 'RabbitMq', value: 'RabbitMq' }, 26 { label: 'RabbitMq', value: 'RabbitMq' },
13 - { label: 'Api调用', value: 'Api调用' }, 27 + { label: 'Api调用', value: 'Api' },
14 { label: 'MQTT', value: 'MQTT' }, 28 { label: 'MQTT', value: 'MQTT' },
15 ], 29 ],
16 }, 30 },
@@ -18,11 +32,36 @@ export const modeForm: FormSchema[] = [ @@ -18,11 +32,36 @@ export const modeForm: FormSchema[] = [
18 }, 32 },
19 ]; 33 ];
20 34
  35 +export const modeKafkaInseretKeyAndValueForm: FormSchema[] = [
  36 + {
  37 + field: 'key',
  38 + label: 'Key',
  39 + colProps: { span: 12 },
  40 + required: true,
  41 + component: 'Input',
  42 + componentProps: {
  43 + maxLength: 255,
  44 + placeholder: '请输入Key',
  45 + },
  46 + },
  47 + {
  48 + field: 'value',
  49 + label: 'Value',
  50 + colProps: { span: 12 },
  51 + required: true,
  52 + component: 'Input',
  53 + componentProps: {
  54 + maxLength: 255,
  55 + placeholder: '请输入Value',
  56 + },
  57 + },
  58 +];
  59 +
21 export const modeKafkaForm: FormSchema[] = [ 60 export const modeKafkaForm: FormSchema[] = [
22 { 61 {
23 - field: '', 62 + field: 'name',
24 label: '名称', 63 label: '名称',
25 - colProps: { span: 13 }, 64 + colProps: { span: 12 },
26 required: true, 65 required: true,
27 component: 'Input', 66 component: 'Input',
28 componentProps: { 67 componentProps: {
@@ -31,9 +70,9 @@ export const modeKafkaForm: FormSchema[] = [ @@ -31,9 +70,9 @@ export const modeKafkaForm: FormSchema[] = [
31 }, 70 },
32 }, 71 },
33 { 72 {
34 - field: '', 73 + field: 'topicPattern',
35 label: 'Topic', 74 label: 'Topic',
36 - colProps: { span: 13 }, 75 + colProps: { span: 12 },
37 required: true, 76 required: true,
38 component: 'Input', 77 component: 'Input',
39 componentProps: { 78 componentProps: {
@@ -42,60 +81,64 @@ export const modeKafkaForm: FormSchema[] = [ @@ -42,60 +81,64 @@ export const modeKafkaForm: FormSchema[] = [
42 }, 81 },
43 }, 82 },
44 { 83 {
45 - field: '', 84 + field: 'bootstrapServers',
46 label: 'Bootstrap', 85 label: 'Bootstrap',
47 - colProps: { span: 13 }, 86 + colProps: { span: 12 },
48 component: 'Input', 87 component: 'Input',
49 componentProps: { 88 componentProps: {
50 maxLength: 255, 89 maxLength: 255,
51 - placeholder: '请输入Bootstrap servers', 90 + placeholder: 'localhost',
52 }, 91 },
53 }, 92 },
54 { 93 {
55 - field: '',  
56 - label: 'Automati',  
57 - colProps: { span: 13 },  
58 - component: 'Input', 94 + field: 'retries',
  95 + label: 'Retries',
  96 + colProps: { span: 12 },
  97 + component: 'InputNumber',
  98 + defaultValue: 0,
59 componentProps: { 99 componentProps: {
60 maxLength: 255, 100 maxLength: 255,
61 placeholder: '请输入Automatically retry times if fails', 101 placeholder: '请输入Automatically retry times if fails',
62 }, 102 },
63 }, 103 },
64 { 104 {
65 - field: '',  
66 - label: 'Produces',  
67 - colProps: { span: 13 },  
68 - component: 'Input', 105 + field: 'batchSize',
  106 + label: 'BatchSize',
  107 + colProps: { span: 12 },
  108 + component: 'InputNumber',
  109 + defaultValue: 16384,
69 componentProps: { 110 componentProps: {
70 maxLength: 255, 111 maxLength: 255,
71 placeholder: '请输入Produces batch size in bytes', 112 placeholder: '请输入Produces batch size in bytes',
72 }, 113 },
73 }, 114 },
74 { 115 {
75 - field: '',  
76 - label: 'Client',  
77 - colProps: { span: 13 },  
78 - component: 'Input', 116 + field: 'linger',
  117 + label: 'Linger',
  118 + colProps: { span: 12 },
  119 + component: 'InputNumber',
  120 + defaultValue: 0,
79 componentProps: { 121 componentProps: {
80 maxLength: 255, 122 maxLength: 255,
81 - placeholder: '请输入Client buffer max size in bytes', 123 + placeholder: '请输入Time to buffer locally(ms)',
82 }, 124 },
83 }, 125 },
84 { 126 {
85 - field: '',  
86 - label: 'Number',  
87 - colProps: { span: 13 },  
88 - component: 'Input', 127 + field: 'bufferMemory',
  128 + label: 'BufferMemory',
  129 + colProps: { span: 12 },
  130 + component: 'InputNumber',
  131 + defaultValue: 33554432,
89 componentProps: { 132 componentProps: {
90 maxLength: 255, 133 maxLength: 255,
91 - placeholder: '请输入Number of acknowledgments', 134 + placeholder: '请输入Client buffer max size in bytes',
92 }, 135 },
93 }, 136 },
94 { 137 {
95 - field: '', 138 + field: 'acks',
96 component: 'Select', 139 component: 'Select',
97 - label: 'Number',  
98 - colProps: { span: 13 }, 140 + label: 'Acks',
  141 + colProps: { span: 12 },
99 componentProps: { 142 componentProps: {
100 placeholder: '请选择Number of acknowledgments', 143 placeholder: '请选择Number of acknowledgments',
101 options: [ 144 options: [
@@ -107,38 +150,665 @@ export const modeKafkaForm: FormSchema[] = [ @@ -107,38 +150,665 @@ export const modeKafkaForm: FormSchema[] = [
107 }, 150 },
108 }, 151 },
109 { 152 {
110 - field: '', 153 + field: 'keySerializer',
111 label: 'Key', 154 label: 'Key',
112 - colProps: { span: 13 }, 155 + colProps: { span: 12 },
113 required: true, 156 required: true,
114 component: 'Input', 157 component: 'Input',
  158 + defaultValue: 'org.apache.kafka.common.serialization.StringSerializer',
115 componentProps: { 159 componentProps: {
116 maxLength: 255, 160 maxLength: 255,
117 - placeholder: '请输入Key serializer', 161 + placeholder: 'org.apache.kafka.common.serialization.StringSerializer',
118 }, 162 },
119 }, 163 },
120 { 164 {
121 - field: '', 165 + field: 'valueSerializer',
122 label: 'Value', 166 label: 'Value',
123 - colProps: { span: 13 }, 167 + colProps: { span: 12 },
124 required: true, 168 required: true,
125 component: 'Input', 169 component: 'Input',
  170 + defaultValue: 'org.apache.kafka.common.serialization.StringSerializer',
126 componentProps: { 171 componentProps: {
127 maxLength: 255, 172 maxLength: 255,
128 - placeholder: '请输入Value serializer', 173 + placeholder: 'org.apache.kafka.common.serialization.StringSerializer',
129 }, 174 },
130 }, 175 },
131 { 176 {
132 - field: '', 177 + field: '1',
133 label: '', 178 label: '',
134 - colProps: { span: 13 }, 179 + colProps: { span: 24 },
  180 + slot: 'addValue',
  181 + component: 'Input',
  182 + },
  183 + {
  184 + field: 'addMetadataKeyValuesAsKafkaHeaders',
  185 + label: '选择',
  186 + colProps: { span: 12 },
135 component: 'Checkbox', 187 component: 'Checkbox',
136 - renderComponentContent: ' Add Message metadata key-value pairs to Kafka record headers ', 188 + renderComponentContent: 'Add Message metadata key-value pairs to Kafka record headers',
137 }, 189 },
138 { 190 {
139 - field: '', 191 + field: 'kafkaHeadersCharset',
  192 + component: 'Select',
  193 + label: 'Charset',
  194 + required: true,
  195 + colProps: { span: 12 },
  196 + componentProps: {
  197 + placeholder: '请选择Charset encoding',
  198 + options: [
  199 + { label: 'US-ASCII', value: 'US' },
  200 + { label: 'ISO-8859-1', value: 'ISO-8859-1' },
  201 + { label: 'UTF-8', value: 'UTF-8' },
  202 + { label: 'UTF-16BE', value: 'UTF-16BE' },
  203 + { label: 'UTF-16LE', value: 'UTF-16LE' },
  204 + { label: 'UTF-16', value: 'UTF-16' },
  205 + ],
  206 + },
  207 + show: ({ values }) => {
  208 + return !!values.addMetadataKeyValuesAsKafkaHeaders;
  209 + },
  210 + },
  211 +
  212 + {
  213 + field: 'description',
140 label: '说明', 214 label: '说明',
141 - colProps: { span: 13 }, 215 + colProps: { span: 12 },
  216 + component: 'Input',
  217 + componentProps: {
  218 + maxLength: 255,
  219 + placeholder: '请输入说明',
  220 + },
  221 + },
  222 +];
  223 +
  224 +export const modeMqttForm: FormSchema[] = [
  225 + {
  226 + field: 'name',
  227 + label: '名称',
  228 + colProps: { span: 12 },
  229 + required: true,
  230 + component: 'Input',
  231 + componentProps: {
  232 + maxLength: 255,
  233 + placeholder: '请输入名称',
  234 + },
  235 + },
  236 + {
  237 + field: 'topicPattern',
  238 + label: 'Topic',
  239 + colProps: { span: 12 },
  240 + required: true,
  241 + component: 'Input',
  242 + componentProps: {
  243 + maxLength: 255,
  244 + placeholder: '请输入Topic pattern',
  245 + },
  246 + },
  247 + {
  248 + field: 'host',
  249 + label: 'Host',
  250 + colProps: { span: 12 },
  251 + component: 'Input',
  252 + required: true,
  253 + componentProps: {
  254 + maxLength: 255,
  255 + placeholder: '请输入Host',
  256 + },
  257 + },
  258 + {
  259 + field: 'port',
  260 + label: 'Port',
  261 + colProps: { span: 12 },
  262 + component: 'Input',
  263 + required: true,
  264 + componentProps: {
  265 + maxLength: 255,
  266 + placeholder: '请输入Port',
  267 + },
  268 + },
  269 + {
  270 + field: 'connectTimeoutSec',
  271 + label: 'Connection',
  272 + colProps: { span: 12 },
  273 + component: 'Input',
  274 + required: true,
  275 + componentProps: {
  276 + maxLength: 255,
  277 + placeholder: '请输入Connection timeout (sec)',
  278 + },
  279 + },
  280 + {
  281 + field: 'clientId',
  282 + label: 'Client ID',
  283 + colProps: { span: 12 },
  284 + component: 'Input',
  285 + componentProps: {
  286 + maxLength: 255,
  287 + placeholder: '请输入Client ID',
  288 + },
  289 + },
  290 + {
  291 + field: 'cleanSession',
  292 + label: 'Clean',
  293 + colProps: { span: 12 },
  294 + component: 'Checkbox',
  295 + renderComponentContent: 'Clean session',
  296 + },
  297 + {
  298 + field: 'ssl',
  299 + label: 'Enable',
  300 + colProps: { span: 12 },
  301 + component: 'Checkbox',
  302 + renderComponentContent: 'Enable SSL',
  303 + },
  304 + {
  305 + field: 'type',
  306 + component: 'Select',
  307 + label: 'type',
  308 + colProps: { span: 12 },
  309 + componentProps: {
  310 + placeholder: '请选择Credentials',
  311 + options: [
  312 + { label: 'Anonymous', value: 'Anonymous' },
  313 + { label: 'Basic', value: 'Basic' },
  314 + { label: 'PEM', value: 'PEM' },
  315 + ],
  316 + },
  317 + },
  318 + {
  319 + field: 'username',
  320 + label: 'Username',
  321 + colProps: { span: 12 },
  322 + component: 'Input',
  323 + required: true,
  324 + componentProps: {
  325 + maxLength: 255,
  326 + placeholder: '请输入Username',
  327 + },
  328 + ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
  329 + },
  330 + {
  331 + field: 'password',
  332 + label: 'Password',
  333 + colProps: { span: 12 },
  334 + component: 'Input',
  335 + componentProps: {
  336 + maxLength: 255,
  337 + placeholder: '请输入Password',
  338 + },
  339 + ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
  340 + },
  341 + {
  342 + field: '4',
  343 + label: '',
  344 + colProps: { span: 24 },
  345 + component: 'Input',
  346 + slot: 'uploadAdd1',
  347 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  348 + },
  349 + {
  350 + field: '5',
  351 + label: '',
  352 + colProps: { span: 24 },
  353 + component: 'Input',
  354 + slot: 'uploadAdd2',
  355 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  356 + },
  357 + {
  358 + field: '6',
  359 + label: '',
  360 + colProps: { span: 24 },
  361 + component: 'Input',
  362 + slot: 'uploadAdd3',
  363 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  364 + },
  365 + {
  366 + field: 'password',
  367 + label: 'Password',
  368 + colProps: { span: 12 },
  369 + component: 'Input',
  370 + componentProps: {
  371 + maxLength: 255,
  372 + placeholder: '请输入Password',
  373 + },
  374 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  375 + },
  376 + {
  377 + field: 'description',
  378 + label: '说明',
  379 + colProps: { span: 12 },
  380 + component: 'Input',
  381 + componentProps: {
  382 + maxLength: 255,
  383 + placeholder: '请输入说明',
  384 + },
  385 + },
  386 +];
  387 +
  388 +export const modeRabbitMqForm: FormSchema[] = [
  389 + {
  390 + field: 'name',
  391 + label: '名称',
  392 + colProps: { span: 12 },
  393 + required: true,
  394 + component: 'Input',
  395 + componentProps: {
  396 + maxLength: 255,
  397 + placeholder: '请输入名称',
  398 + },
  399 + },
  400 + {
  401 + field: 'exchangeNamePattern',
  402 + label: 'Exchange',
  403 + colProps: { span: 12 },
  404 + component: 'Input',
  405 + componentProps: {
  406 + maxLength: 255,
  407 + placeholder: '请输入Exchange name pattern',
  408 + },
  409 + },
  410 + {
  411 + field: 'routingKeyPattern',
  412 + label: 'Routing',
  413 + colProps: { span: 12 },
  414 + component: 'Input',
  415 + componentProps: {
  416 + maxLength: 255,
  417 + placeholder: '请输入Routing key pattern',
  418 + },
  419 + },
  420 + {
  421 + field: 'messageProperties',
  422 + component: 'Select',
  423 + label: 'Message',
  424 + colProps: { span: 12 },
  425 + componentProps: {
  426 + placeholder: '请选择Message properties',
  427 + options: [
  428 + { label: 'BASIC', value: 'BASIC' },
  429 + { label: 'TEXT_PLAIN', value: 'TEXT_PLAIN' },
  430 + { label: 'MINIMAL_BASIC', value: 'MINIMAL_BASIC' },
  431 + { label: 'MINIMAL_PERSISTENT_BASIC', value: 'MINIMAL_PERSISTENT_BASIC' },
  432 + { label: 'PERSISTENT_BASIC', value: 'PERSISTENT_BASIC' },
  433 + { label: 'PERSISTENT_TEXT_PLAIN', value: 'PERSISTENT_TEXT_PLAIN' },
  434 + ],
  435 + },
  436 + },
  437 + {
  438 + field: 'host',
  439 + label: 'Host',
  440 + colProps: { span: 12 },
  441 + component: 'Input',
  442 + required: true,
  443 + componentProps: {
  444 + maxLength: 255,
  445 + placeholder: 'localhost',
  446 + },
  447 + },
  448 + {
  449 + field: 'port',
  450 + label: 'Port',
  451 + colProps: { span: 12 },
  452 + component: 'Input',
  453 + required: true,
  454 + componentProps: {
  455 + maxLength: 255,
  456 + placeholder: '请输入Port',
  457 + },
  458 + },
  459 + {
  460 + field: 'virtualHost',
  461 + label: 'Virtual',
  462 + colProps: { span: 12 },
  463 + component: 'Input',
  464 + componentProps: {
  465 + maxLength: 255,
  466 + placeholder: '/',
  467 + },
  468 + },
  469 + {
  470 + field: 'username',
  471 + label: 'Username',
  472 + colProps: { span: 12 },
  473 + component: 'Input',
  474 + componentProps: {
  475 + maxLength: 255,
  476 + placeholder: '请输入Username',
  477 + },
  478 + },
  479 + {
  480 + field: 'password',
  481 + label: 'Password',
  482 + colProps: { span: 12 },
  483 + component: 'Input',
  484 + componentProps: {
  485 + maxLength: 255,
  486 + placeholder: '请输入Password',
  487 + },
  488 + },
  489 + {
  490 + field: 'automaticRecoveryEnabled',
  491 + label: ' Automatic',
  492 + colProps: { span: 12 },
  493 + component: 'Checkbox',
  494 + renderComponentContent: 'Automatic recovery',
  495 + },
  496 + {
  497 + field: 'connectionTimeout',
  498 + label: 'Connection',
  499 + colProps: { span: 12 },
  500 + component: 'Input',
  501 + componentProps: {
  502 + maxLength: 255,
  503 + placeholder: '请输入Connection timeout (ms)',
  504 + },
  505 + },
  506 + {
  507 + field: 'handshakeTimeout',
  508 + label: 'Handshake',
  509 + colProps: { span: 12 },
  510 + component: 'Input',
  511 + componentProps: {
  512 + maxLength: 255,
  513 + placeholder: '请输入Handshake timeout (ms)',
  514 + },
  515 + },
  516 + {
  517 + field: '1',
  518 + label: '',
  519 + colProps: { span: 24 },
  520 + component: 'Input',
  521 + slot: 'addKeyAndValue',
  522 + },
  523 +
  524 + {
  525 + field: 'description',
  526 + label: '说明',
  527 + colProps: { span: 12 },
  528 + component: 'Input',
  529 + componentProps: {
  530 + maxLength: 255,
  531 + placeholder: '请输入说明',
  532 + },
  533 + },
  534 +];
  535 +
  536 +export const modeApiForm: FormSchema[] = [
  537 + {
  538 + field: 'name',
  539 + label: '名称',
  540 + colProps: { span: 12 },
  541 + required: true,
  542 + component: 'Input',
  543 + componentProps: {
  544 + maxLength: 255,
  545 + placeholder: '请输入名称',
  546 + },
  547 + },
  548 + {
  549 + field: 'restEndpointUrlPattern',
  550 + label: 'Endpoint',
  551 + colProps: { span: 12 },
  552 + required: true,
  553 + component: 'Input',
  554 + componentProps: {
  555 + maxLength: 255,
  556 + placeholder: '请输入Endpoint URL pattern',
  557 + },
  558 + },
  559 + {
  560 + field: 'requestMethod',
  561 + component: 'Select',
  562 + label: 'Request',
  563 + colProps: { span: 12 },
  564 + componentProps: {
  565 + placeholder: '请选择Request method',
  566 + options: [
  567 + { label: 'GET', value: 'GET' },
  568 + { label: 'POST', value: 'POST' },
  569 + { label: 'PUT', value: 'PUT' },
  570 + { label: 'DELETE', value: 'DELETE' },
  571 + ],
  572 + },
  573 + },
  574 + {
  575 + field: 'enableProxy',
  576 + label: '选择',
  577 + colProps: { span: 12 },
  578 + component: 'Checkbox',
  579 + renderComponentContent: 'Enable proxy',
  580 + },
  581 +
  582 + {
  583 + field: 'proxyHost',
  584 + label: 'Host',
  585 + colProps: { span: 12 },
  586 + required: true,
  587 + component: 'Input',
  588 + componentProps: {
  589 + maxLength: 255,
  590 + placeholder: 'http或者https开头',
  591 + },
  592 + show: ({ values }) => {
  593 + return !!values.enableProxy;
  594 + },
  595 + },
  596 + {
  597 + field: 'proxyPort',
  598 + label: 'Port',
  599 + colProps: { span: 12 },
  600 + required: true,
  601 + component: 'Input',
  602 + componentProps: {
  603 + maxLength: 255,
  604 + placeholder: 'http或者https开头',
  605 + },
  606 + show: ({ values }) => {
  607 + return !!values.enableProxy;
  608 + },
  609 + },
  610 + {
  611 + field: 'proxyUser',
  612 + label: 'User',
  613 + colProps: { span: 12 },
  614 + required: true,
  615 + component: 'Input',
  616 + componentProps: {
  617 + maxLength: 255,
  618 + placeholder: '请输入Proxy user',
  619 + },
  620 + show: ({ values }) => {
  621 + return !!values.enableProxy;
  622 + },
  623 + },
  624 + {
  625 + field: 'proxyPassword',
  626 + label: 'Password',
  627 + colProps: { span: 12 },
  628 + required: true,
  629 + component: 'Input',
  630 + componentProps: {
  631 + maxLength: 255,
  632 + placeholder: '请输入Proxy password',
  633 + },
  634 + show: ({ values }) => {
  635 + return !!values.enableProxy;
  636 + },
  637 + },
  638 +
  639 + {
  640 + field: 'useSystemProxyProperties',
  641 + label: '选择',
  642 + colProps: { span: 12 },
  643 + component: 'Checkbox',
  644 + renderComponentContent: 'Use system proxy properties',
  645 + },
  646 + {
  647 + field: 'maxParallelRequestsCount',
  648 + label: 'Max',
  649 + colProps: { span: 12 },
  650 + required: true,
  651 + component: 'Input',
  652 + componentProps: {
  653 + maxLength: 255,
  654 + placeholder: '请输入Max number of paraller requests',
  655 + },
  656 + show: ({ values }) => {
  657 + return !!values.useSystemProxyProperties;
  658 + },
  659 + },
  660 + {
  661 + field: 'ignoreRequestBody',
  662 + label: '选择',
  663 + colProps: { span: 12 },
  664 + component: 'Checkbox',
  665 + renderComponentContent: 'Without request body',
  666 + },
  667 + {
  668 + field: 'readTimeoutMs',
  669 + label: 'Read',
  670 + colProps: { span: 12 },
  671 + required: true,
  672 + component: 'Input',
  673 + componentProps: {
  674 + maxLength: 255,
  675 + placeholder: '请输入Read timeout in times',
  676 + },
  677 + show: ({ values }) => {
  678 + return !values.useSystemProxyProperties;
  679 + },
  680 + },
  681 + {
  682 + field: 'maxParallelRequestsCount',
  683 + label: 'Max',
  684 + colProps: { span: 12 },
  685 + required: true,
  686 + component: 'Input',
  687 + componentProps: {
  688 + maxLength: 255,
  689 + placeholder: '请输入Max number of paraller requests',
  690 + },
  691 + show: ({ values }) => {
  692 + return !values.useSystemProxyProperties;
  693 + },
  694 + },
  695 + {
  696 + field: '1',
  697 + label: '',
  698 + colProps: { span: 24 },
  699 + component: 'Input',
  700 + slot: 'addKeyAndValue',
  701 + },
  702 +
  703 + {
  704 + field: 'useRedisQueueForMsgPersistence',
  705 + label: '选择',
  706 + colProps: { span: 12 },
  707 + component: 'Checkbox',
  708 + renderComponentContent: 'Use redis queue for message persistence',
  709 + },
  710 + {
  711 + field: 'trimQueue',
  712 + label: '选择',
  713 + colProps: { span: 12 },
  714 + component: 'Checkbox',
  715 + renderComponentContent: 'Trim redis queue',
  716 + show: ({ values }) => {
  717 + return !!values.useRedisQueueForMsgPersistence;
  718 + },
  719 + },
  720 + {
  721 + field: 'maxQueueSize',
  722 + label: 'Redis',
  723 + colProps: { span: 12 },
  724 + required: true,
  725 + component: 'Input',
  726 + componentProps: {
  727 + maxLength: 255,
  728 + placeholder: '请输入Redis queue max size',
  729 + },
  730 + show: ({ values }) => {
  731 + return !!values.useRedisQueueForMsgPersistence;
  732 + },
  733 + },
  734 +
  735 + {
  736 + field: 'type',
  737 + component: 'Select',
  738 + label: 'type',
  739 + colProps: { span: 12 },
  740 + componentProps: {
  741 + placeholder: '请选择Number of acknowledgments',
  742 + options: [
  743 + { label: 'Anonymous', value: 'Anonymous' },
  744 + { label: 'Basic', value: 'Basic' },
  745 + { label: 'PEM', value: 'PEM' },
  746 + ],
  747 + },
  748 + },
  749 + {
  750 + field: 'username',
  751 + label: 'Username',
  752 + colProps: { span: 12 },
  753 + component: 'Input',
  754 + required: true,
  755 + componentProps: {
  756 + maxLength: 255,
  757 + placeholder: '请输入Username',
  758 + },
  759 + ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
  760 + },
  761 + {
  762 + field: 'password',
  763 + label: 'Password',
  764 + colProps: { span: 12 },
  765 + component: 'Input',
  766 + componentProps: {
  767 + maxLength: 255,
  768 + placeholder: '请输入Password',
  769 + },
  770 + ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
  771 + },
  772 + {
  773 + field: '1',
  774 + label: '',
  775 + colProps: { span: 24 },
  776 + component: 'Input',
  777 + slot: 'uploadAdd1',
  778 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  779 + },
  780 + {
  781 + field: '1',
  782 + label: '',
  783 + colProps: { span: 24 },
  784 + component: 'Input',
  785 + slot: 'uploadAdd2',
  786 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  787 + },
  788 + {
  789 + field: '1',
  790 + label: '',
  791 + colProps: { span: 24 },
  792 + component: 'Input',
  793 + slot: 'uploadAdd3',
  794 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  795 + },
  796 + {
  797 + field: 'password',
  798 + label: 'Password',
  799 + colProps: { span: 12 },
  800 + component: 'Input',
  801 + componentProps: {
  802 + maxLength: 255,
  803 + placeholder: '请输入Password',
  804 + },
  805 + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
  806 + },
  807 +
  808 + {
  809 + field: 'description',
  810 + label: '说明',
  811 + colProps: { span: 12 },
142 component: 'Input', 812 component: 'Input',
143 componentProps: { 813 componentProps: {
144 maxLength: 255, 814 maxLength: 255,
1 <template> 1 <template>
2 - <div class="step2"> <BasicForm :showSubmitButton="false" @register="register" /> </div> 2 + <div class="root">
  3 + <div class="root-form">
  4 + <BasicForm :showSubmitButton="false" @register="register">
  5 + <template #addKeyAndValue="{ field }">
  6 + <span style="display: none">{{ field }}</span>
  7 + <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>
  17 + <div
  18 + style="
  19 + width: 5vw;
  20 + height: 3vh;
  21 + display: flex;
  22 + flex-direction: row;
  23 + justify-content: center;
  24 + align-items: center;
  25 + margin-left: 1.8vw;
  26 + "
  27 + >
  28 + <div
  29 + style="
  30 + width: 2.6vw;
  31 + height: 3vh;
  32 + background-color: #0960bd;
  33 + border-radius: 10px;
  34 + cursor: pointer;
  35 + text-align: center;
  36 + line-height: 2.89vh;
  37 + "
  38 + >
  39 + <span @click="addKeyAndValueFunc" style="color: white">添加</span>
  40 + </div>
  41 + <div
  42 + style="
  43 + width: 2.6vw;
  44 + height: 3vh;
  45 + margin-left: 1vw;
  46 + background-color: #ed6f6f;
  47 + border-radius: 10px;
  48 + cursor: pointer;
  49 + text-align: center;
  50 + line-height: 2.89vh;
  51 + "
  52 + >
  53 + <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
  54 + </div>
  55 + </div>
  56 + <div> </div>
  57 + </div>
  58 + </div>
  59 + </template>
  60 + <template #uploadAdd1="{ field }">
  61 + <span style="display: none">{{ field }}</span>
  62 + <UploadDragger
  63 + v-model:fileList="fileList"
  64 + name="file"
  65 + :multiple="true"
  66 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  67 + @change="handleChange"
  68 + >
  69 + <p class="ant-upload-drag-icon">
  70 + <InboxOutlined />
  71 + </p>
  72 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  73 + <p class="ant-upload-hint">
  74 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  75 + other band files
  76 + </p>
  77 + </UploadDragger>
  78 + </template>
  79 + <template #uploadAdd2="{ field }">
  80 + <span style="display: none">{{ field }}</span>
  81 + <UploadDragger
  82 + v-model:fileList="fileList"
  83 + name="file"
  84 + :multiple="true"
  85 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  86 + @change="handleChange"
  87 + >
  88 + <p class="ant-upload-drag-icon">
  89 + <InboxOutlined />
  90 + </p>
  91 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  92 + <p class="ant-upload-hint">
  93 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  94 + other band files
  95 + </p>
  96 + </UploadDragger>
  97 + </template>
  98 + <template #uploadAdd3="{ field }">
  99 + <span style="display: none">{{ field }}</span>
  100 + <UploadDragger
  101 + v-model:fileList="fileList"
  102 + name="file"
  103 + :multiple="true"
  104 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  105 + @change="handleChange"
  106 + >
  107 + <p class="ant-upload-drag-icon">
  108 + <InboxOutlined />
  109 + </p>
  110 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  111 + <p class="ant-upload-hint">
  112 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  113 + other band files
  114 + </p>
  115 + </UploadDragger>
  116 + </template>
  117 + </BasicForm>
  118 + </div>
  119 + </div>
3 </template> 120 </template>
4 <script lang="ts"> 121 <script lang="ts">
5 - import { defineComponent } from 'vue'; 122 + import { defineComponent, ref, reactive } from 'vue';
6 import { BasicForm, useForm } from '/@/components/Form'; 123 import { BasicForm, useForm } from '/@/components/Form';
7 - import { modeKafkaForm } from './config';  
8 -  
9 - import { Alert, Divider, Descriptions } from 'ant-design-vue'; 124 + import { modeApiForm, modeKafkaInseretKeyAndValueForm } from '../config';
  125 + import { InboxOutlined } from '@ant-design/icons-vue';
  126 + import { Alert, Divider, Descriptions, UploadDragger } from 'ant-design-vue';
10 127
11 export default defineComponent({ 128 export default defineComponent({
12 components: { 129 components: {
@@ -15,12 +132,19 @@ @@ -15,12 +132,19 @@
15 [Divider.name]: Divider, 132 [Divider.name]: Divider,
16 [Descriptions.name]: Descriptions, 133 [Descriptions.name]: Descriptions,
17 [Descriptions.Item.name]: Descriptions.Item, 134 [Descriptions.Item.name]: Descriptions.Item,
  135 + InboxOutlined,
  136 + UploadDragger,
18 }, 137 },
19 emits: ['next', 'prev', 'register'], 138 emits: ['next', 'prev', 'register'],
20 setup(_, { emit }) { 139 setup(_, { emit }) {
  140 + const fileList = ref<[]>([]);
  141 + const keyAndValueArr = ref<[]>([]);
  142 + const sonValues = reactive({
  143 + configuration: {},
  144 + });
21 const [register, { validate, setFieldsValue, resetFields }] = useForm({ 145 const [register, { validate, setFieldsValue, resetFields }] = useForm({
22 labelWidth: 80, 146 labelWidth: 80,
23 - schemas: modeKafkaForm, 147 + schemas: modeApiForm,
24 actionColOptions: { 148 actionColOptions: {
25 span: 14, 149 span: 14,
26 }, 150 },
@@ -31,6 +155,14 @@ @@ -31,6 +155,14 @@
31 resetFunc: customResetFunc, 155 resetFunc: customResetFunc,
32 submitFunc: customSubmitFunc, 156 submitFunc: customSubmitFunc,
33 }); 157 });
  158 +
  159 + const [registerKeyAndValue] = useForm({
  160 + labelWidth: 80,
  161 + schemas: modeKafkaInseretKeyAndValueForm,
  162 + actionColOptions: {
  163 + span: 14,
  164 + },
  165 + });
34 const setStepTwoFieldsValueFunc = (v) => { 166 const setStepTwoFieldsValueFunc = (v) => {
35 setFieldsValue(v); 167 setFieldsValue(v);
36 }; 168 };
@@ -48,11 +180,60 @@ @@ -48,11 +180,60 @@
48 } finally { 180 } finally {
49 } 181 }
50 } 182 }
51 - return { register, setStepTwoFieldsValueFunc, customClearStepTwoValueFunc }; 183 + const defaultAddKeyAndValueFunc = () => {
  184 + if (keyAndValueArr.value.length == 0) {
  185 + keyAndValueArr.value.push({
  186 + key: 1,
  187 + value: 1,
  188 + });
  189 + }
  190 + };
  191 + defaultAddKeyAndValueFunc();
  192 +
  193 + const addKeyAndValueFunc = () => {
  194 + keyAndValueArr.value.push({
  195 + key: 1,
  196 + value: 1,
  197 + });
  198 + };
  199 + const removeKeyAndValueFunc = () => {
  200 + keyAndValueArr.value.splice(0, 1);
  201 + };
  202 + const handleChange = () => {};
  203 +
  204 + const getSonValueFunc = async () => {
  205 + sonValues.configuration = await validate();
  206 + return sonValues;
  207 + };
  208 + return {
  209 + register,
  210 + setStepTwoFieldsValueFunc,
  211 + customClearStepTwoValueFunc,
  212 + addKeyAndValueFunc,
  213 + removeKeyAndValueFunc,
  214 + getSonValueFunc,
  215 + keyAndValueArr,
  216 + registerKeyAndValue,
  217 + fileList,
  218 + handleChange,
  219 + };
52 }, 220 },
53 }); 221 });
54 </script> 222 </script>
55 <style lang="less" scoped> 223 <style lang="less" scoped>
56 - .step2 { 224 + .root {
  225 + width: 45.55vw;
  226 + border: 1px solid #bfbfbf;
  227 + display: flex;
  228 + margin-top: 1vh;
  229 + .root-form {
  230 + width: 44vw;
  231 + margin: 1vh 1vw;
  232 + position: relative;
  233 + :deep .ant-btn {
  234 + position: absolute;
  235 + right: 1vw;
  236 + }
  237 + }
57 } 238 }
58 </style> 239 </style>
1 <template> 1 <template>
2 - <div class="step2"> <BasicForm :showSubmitButton="false" @register="register" /> </div> 2 + <div class="root">
  3 + <div class="root-form">
  4 + <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
  5 + <template #addValue="{ field }">
  6 + <span style="display: none">{{ field }}</span>
  7 + <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>
  17 + <div
  18 + style="
  19 + width: 5vw;
  20 + height: 3vh;
  21 + display: flex;
  22 + flex-direction: row;
  23 + justify-content: center;
  24 + align-items: center;
  25 + margin-left: 1.8vw;
  26 + "
  27 + >
  28 + <div
  29 + style="
  30 + width: 2.6vw;
  31 + height: 3vh;
  32 + background-color: #0960bd;
  33 + border-radius: 10px;
  34 + cursor: pointer;
  35 + text-align: center;
  36 + line-height: 2.89vh;
  37 + "
  38 + >
  39 + <span @click="addKeyAndValueFunc" style="color: white">添加</span>
  40 + </div>
  41 + <div
  42 + style="
  43 + width: 2.6vw;
  44 + height: 3vh;
  45 + margin-left: 1vw;
  46 + background-color: #ed6f6f;
  47 + border-radius: 10px;
  48 + cursor: pointer;
  49 + text-align: center;
  50 + line-height: 2.89vh;
  51 + "
  52 + >
  53 + <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
  54 + </div>
  55 + </div>
  56 + <div> </div>
  57 + </div>
  58 + </div>
  59 + </template>
  60 + </BasicForm>
  61 + <div
  62 + style="
  63 + width: 2.6vw;
  64 + height: 3vh;
  65 + margin-left: 19vw;
  66 + margin-top: 2vh;
  67 + background-color: #0960bd;
  68 + border-radius: 10px;
  69 + cursor: pointer;
  70 + text-align: center;
  71 + line-height: 2.89vh;
  72 + "
  73 + >
  74 + <span @click="customResetFunc" style="color: white">上一步</span>
  75 + </div>
  76 + </div>
  77 + </div>
3 </template> 78 </template>
4 <script lang="ts"> 79 <script lang="ts">
5 - import { defineComponent } from 'vue'; 80 + import { defineComponent, ref, reactive } from 'vue';
6 import { BasicForm, useForm } from '/@/components/Form'; 81 import { BasicForm, useForm } from '/@/components/Form';
7 - import { modeKafkaForm } from './config';  
8 - 82 + import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config';
9 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 83 import { Alert, Divider, Descriptions } from 'ant-design-vue';
10 84
11 export default defineComponent({ 85 export default defineComponent({
@@ -18,7 +92,11 @@ @@ -18,7 +92,11 @@
18 }, 92 },
19 emits: ['next', 'prev', 'register'], 93 emits: ['next', 'prev', 'register'],
20 setup(_, { emit }) { 94 setup(_, { emit }) {
21 - const [register, { validate, setFieldsValue, resetFields }] = useForm({ 95 + const keyAndValueArr = ref<[]>([]);
  96 + const sonValues = reactive({
  97 + configuration: {},
  98 + });
  99 + const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
22 labelWidth: 80, 100 labelWidth: 80,
23 schemas: modeKafkaForm, 101 schemas: modeKafkaForm,
24 actionColOptions: { 102 actionColOptions: {
@@ -31,8 +109,21 @@ @@ -31,8 +109,21 @@
31 resetFunc: customResetFunc, 109 resetFunc: customResetFunc,
32 submitFunc: customSubmitFunc, 110 submitFunc: customSubmitFunc,
33 }); 111 });
34 - const setStepTwoFieldsValueFunc = (v) => { 112 +
  113 + const [registerKeyAndValue] = useForm({
  114 + labelWidth: 80,
  115 + schemas: modeKafkaInseretKeyAndValueForm,
  116 + actionColOptions: {
  117 + span: 14,
  118 + },
  119 + });
  120 +
  121 + const setStepTwoFieldsValueFunc = (v, v1) => {
  122 + console.log(v);
35 setFieldsValue(v); 123 setFieldsValue(v);
  124 + setFieldsValue({
  125 + name: v1,
  126 + });
36 }; 127 };
37 const customClearStepTwoValueFunc = () => { 128 const customClearStepTwoValueFunc = () => {
38 resetFields(); 129 resetFields();
@@ -42,17 +133,65 @@ @@ -42,17 +133,65 @@
42 } 133 }
43 async function customSubmitFunc() { 134 async function customSubmitFunc() {
44 try { 135 try {
45 - const values = await validate(); 136 + const values = await validateFields();
46 emit('next', values); 137 emit('next', values);
47 } catch (error) { 138 } catch (error) {
48 } finally { 139 } finally {
49 } 140 }
50 } 141 }
51 - return { register, setStepTwoFieldsValueFunc, customClearStepTwoValueFunc }; 142 + const defaultAddKeyAndValueFunc = () => {
  143 + if (keyAndValueArr.value.length == 0) {
  144 + keyAndValueArr.value.push({
  145 + key: 1,
  146 + value: 1,
  147 + });
  148 + }
  149 + };
  150 + defaultAddKeyAndValueFunc();
  151 +
  152 + const addKeyAndValueFunc = () => {
  153 + keyAndValueArr.value.push({
  154 + key: 1,
  155 + value: 1,
  156 + });
  157 + };
  158 + const removeKeyAndValueFunc = () => {
  159 + keyAndValueArr.value.splice(0, 1);
  160 + };
  161 +
  162 + const getSonValueFunc = async () => {
  163 + sonValues.configuration = await validateFields();
  164 + return sonValues;
  165 + };
  166 + return {
  167 + getSonValueFunc,
  168 + keyAndValueArr,
  169 + register,
  170 + setStepTwoFieldsValueFunc,
  171 + customClearStepTwoValueFunc,
  172 + addKeyAndValueFunc,
  173 + registerKeyAndValue,
  174 + removeKeyAndValueFunc,
  175 + customResetFunc,
  176 + };
52 }, 177 },
53 }); 178 });
54 </script> 179 </script>
55 <style lang="less" scoped> 180 <style lang="less" scoped>
56 - .step2 { 181 + .root {
  182 + width: 45.55vw;
  183 + border: 1px solid #bfbfbf;
  184 + display: flex;
  185 + margin-top: 1vh;
  186 + .root-form {
  187 + width: 44vw;
  188 + margin: 1vh 1vw;
  189 + position: relative;
  190 + // :deep .ant-btn {
  191 + // position: absolute;
  192 + // right: 1vw;
  193 + // top: 1vh;
  194 + // }
  195 + }
57 } 196 }
58 </style> 197 </style>
1 <template> 1 <template>
2 - <div class="step2"> <BasicForm :showSubmitButton="false" @register="register" /> </div> 2 + <div class="root">
  3 + <div class="root-form">
  4 + <BasicForm :showSubmitButton="false" @register="register">
  5 + <template #uploadAdd1="{ field }">
  6 + <span style="display: none">{{ field }}</span>
  7 + <UploadDragger
  8 + v-model:fileList="fileList"
  9 + name="file"
  10 + :multiple="true"
  11 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  12 + @change="handleChange"
  13 + >
  14 + <p class="ant-upload-drag-icon">
  15 + <InboxOutlined />
  16 + </p>
  17 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  18 + <p class="ant-upload-hint">
  19 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  20 + other band files
  21 + </p>
  22 + </UploadDragger>
  23 + </template>
  24 + <template #uploadAdd2="{ field }">
  25 + <span style="display: none">{{ field }}</span>
  26 + <UploadDragger
  27 + v-model:fileList="fileList"
  28 + name="file"
  29 + :multiple="true"
  30 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  31 + @change="handleChange"
  32 + >
  33 + <p class="ant-upload-drag-icon">
  34 + <InboxOutlined />
  35 + </p>
  36 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  37 + <p class="ant-upload-hint">
  38 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  39 + other band files
  40 + </p>
  41 + </UploadDragger>
  42 + </template>
  43 + <template #uploadAdd3="{ field }">
  44 + <span style="display: none">{{ field }}</span>
  45 + <UploadDragger
  46 + v-model:fileList="fileList"
  47 + name="file"
  48 + :multiple="true"
  49 + action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  50 + @change="handleChange"
  51 + >
  52 + <p class="ant-upload-drag-icon">
  53 + <InboxOutlined />
  54 + </p>
  55 + <p class="ant-upload-text">Click or drag file to this area to upload</p>
  56 + <p class="ant-upload-hint">
  57 + Support for a single or bulk upload. Strictly prohibit from uploading company data or
  58 + other band files
  59 + </p>
  60 + </UploadDragger>
  61 + </template>
  62 + </BasicForm>
  63 + </div>
  64 + </div>
3 </template> 65 </template>
4 <script lang="ts"> 66 <script lang="ts">
5 - import { defineComponent } from 'vue'; 67 + import { defineComponent, ref, reactive } from 'vue';
6 import { BasicForm, useForm } from '/@/components/Form'; 68 import { BasicForm, useForm } from '/@/components/Form';
7 - import { modeKafkaForm } from './config';  
8 -  
9 - import { Alert, Divider, Descriptions } from 'ant-design-vue'; 69 + import { modeMqttForm } from '../config';
  70 + import { InboxOutlined } from '@ant-design/icons-vue';
  71 + import { Alert, Divider, Descriptions, UploadDragger } from 'ant-design-vue';
10 72
11 export default defineComponent({ 73 export default defineComponent({
12 components: { 74 components: {
@@ -15,12 +77,18 @@ @@ -15,12 +77,18 @@
15 [Divider.name]: Divider, 77 [Divider.name]: Divider,
16 [Descriptions.name]: Descriptions, 78 [Descriptions.name]: Descriptions,
17 [Descriptions.Item.name]: Descriptions.Item, 79 [Descriptions.Item.name]: Descriptions.Item,
  80 + InboxOutlined,
  81 + UploadDragger,
18 }, 82 },
19 emits: ['next', 'prev', 'register'], 83 emits: ['next', 'prev', 'register'],
20 setup(_, { emit }) { 84 setup(_, { emit }) {
  85 + const fileList = ref<[]>([]);
  86 + const sonValues = reactive({
  87 + configuration: {},
  88 + });
21 const [register, { validate, setFieldsValue, resetFields }] = useForm({ 89 const [register, { validate, setFieldsValue, resetFields }] = useForm({
22 labelWidth: 80, 90 labelWidth: 80,
23 - schemas: modeKafkaForm, 91 + schemas: modeMqttForm,
24 actionColOptions: { 92 actionColOptions: {
25 span: 14, 93 span: 14,
26 }, 94 },
@@ -48,11 +116,39 @@ @@ -48,11 +116,39 @@
48 } finally { 116 } finally {
49 } 117 }
50 } 118 }
51 - return { register, setStepTwoFieldsValueFunc, customClearStepTwoValueFunc }; 119 + const handleChange = () => {};
  120 + const getSonValueFunc = async () => {
  121 + sonValues.configuration = await validate();
  122 + return sonValues;
  123 + };
  124 + return {
  125 + getSonValueFunc,
  126 + register,
  127 + setStepTwoFieldsValueFunc,
  128 + customClearStepTwoValueFunc,
  129 + fileList,
  130 + handleChange,
  131 + };
52 }, 132 },
53 }); 133 });
54 </script> 134 </script>
55 <style lang="less" scoped> 135 <style lang="less" scoped>
56 - .step2 { 136 + .root {
  137 + width: 45.55vw;
  138 + height: 51vh;
  139 + border: 1px solid #bfbfbf;
  140 + display: flex;
  141 + margin-top: 1vh;
  142 + .root-form {
  143 + width: 44vw;
  144 + height: 45vh;
  145 + margin: 1vh 1vw;
  146 + position: relative;
  147 + :deep .ant-btn {
  148 + position: absolute;
  149 + right: 1vw;
  150 + top: 6vh;
  151 + }
  152 + }
57 } 153 }
58 </style> 154 </style>
1 <template> 1 <template>
2 - <div class="step2"> <BasicForm :showSubmitButton="false" @register="register" /> </div> 2 + <div class="root">
  3 + <div class="root-form">
  4 + <BasicForm :showSubmitButton="false" @register="register">
  5 + <template #addKeyAndValue="{ field }">
  6 + <span style="display: none">{{ field }}</span>
  7 + <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>
  17 + <div
  18 + style="
  19 + width: 5vw;
  20 + height: 3vh;
  21 + display: flex;
  22 + flex-direction: row;
  23 + justify-content: center;
  24 + align-items: center;
  25 + margin-left: 1.8vw;
  26 + "
  27 + >
  28 + <div
  29 + style="
  30 + width: 2.6vw;
  31 + height: 3vh;
  32 + background-color: #0960bd;
  33 + border-radius: 10px;
  34 + cursor: pointer;
  35 + text-align: center;
  36 + line-height: 2.89vh;
  37 + "
  38 + >
  39 + <span @click="addKeyAndValueFunc" style="color: white">添加</span>
  40 + </div>
  41 + <div
  42 + style="
  43 + width: 2.6vw;
  44 + height: 3vh;
  45 + margin-left: 1vw;
  46 + background-color: #ed6f6f;
  47 + border-radius: 10px;
  48 + cursor: pointer;
  49 + text-align: center;
  50 + line-height: 2.89vh;
  51 + "
  52 + >
  53 + <span @click="removeKeyAndValueFunc" style="color: white">删除</span>
  54 + </div>
  55 + </div>
  56 + <div> </div>
  57 + </div>
  58 + </div>
  59 + </template>
  60 + </BasicForm>
  61 + </div>
  62 + </div>
3 </template> 63 </template>
4 <script lang="ts"> 64 <script lang="ts">
5 - import { defineComponent } from 'vue'; 65 + import { defineComponent, ref, reactive } from 'vue';
6 import { BasicForm, useForm } from '/@/components/Form'; 66 import { BasicForm, useForm } from '/@/components/Form';
7 - import { modeKafkaForm } from './config'; 67 + import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config';
8 68
9 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 69 import { Alert, Divider, Descriptions } from 'ant-design-vue';
10 70
@@ -18,9 +78,14 @@ @@ -18,9 +78,14 @@
18 }, 78 },
19 emits: ['next', 'prev', 'register'], 79 emits: ['next', 'prev', 'register'],
20 setup(_, { emit }) { 80 setup(_, { emit }) {
  81 + const keyAndValueArr = ref<[]>([]);
  82 + const sonValues = reactive({
  83 + configuration: {},
  84 + });
  85 +
21 const [register, { validate, setFieldsValue, resetFields }] = useForm({ 86 const [register, { validate, setFieldsValue, resetFields }] = useForm({
22 labelWidth: 80, 87 labelWidth: 80,
23 - schemas: modeKafkaForm, 88 + schemas: modeRabbitMqForm,
24 actionColOptions: { 89 actionColOptions: {
25 span: 14, 90 span: 14,
26 }, 91 },
@@ -31,6 +96,15 @@ @@ -31,6 +96,15 @@
31 resetFunc: customResetFunc, 96 resetFunc: customResetFunc,
32 submitFunc: customSubmitFunc, 97 submitFunc: customSubmitFunc,
33 }); 98 });
  99 +
  100 + const [registerKeyAndValue] = useForm({
  101 + labelWidth: 80,
  102 + schemas: modeKafkaInseretKeyAndValueForm,
  103 + actionColOptions: {
  104 + span: 14,
  105 + },
  106 + });
  107 +
34 const setStepTwoFieldsValueFunc = (v) => { 108 const setStepTwoFieldsValueFunc = (v) => {
35 setFieldsValue(v); 109 setFieldsValue(v);
36 }; 110 };
@@ -48,11 +122,57 @@ @@ -48,11 +122,57 @@
48 } finally { 122 } finally {
49 } 123 }
50 } 124 }
51 - return { register, setStepTwoFieldsValueFunc, customClearStepTwoValueFunc }; 125 + const defaultAddKeyAndValueFunc = () => {
  126 + if (keyAndValueArr.value.length == 0) {
  127 + keyAndValueArr.value.push({
  128 + key: 1,
  129 + value: 1,
  130 + });
  131 + }
  132 + };
  133 + defaultAddKeyAndValueFunc();
  134 +
  135 + const addKeyAndValueFunc = () => {
  136 + keyAndValueArr.value.push({
  137 + key: 1,
  138 + value: 1,
  139 + });
  140 + };
  141 + const removeKeyAndValueFunc = () => {
  142 + keyAndValueArr.value.splice(0, 1);
  143 + };
  144 + const getSonValueFunc = async () => {
  145 + sonValues.configuration = await validate();
  146 + return sonValues;
  147 + };
  148 +
  149 + return {
  150 + getSonValueFunc,
  151 + register,
  152 + setStepTwoFieldsValueFunc,
  153 + customClearStepTwoValueFunc,
  154 + keyAndValueArr,
  155 + registerKeyAndValue,
  156 + addKeyAndValueFunc,
  157 + removeKeyAndValueFunc,
  158 + };
52 }, 159 },
53 }); 160 });
54 </script> 161 </script>
55 <style lang="less" scoped> 162 <style lang="less" scoped>
56 - .step2 { 163 + .root {
  164 + width: 45.55vw;
  165 + border: 1px solid #bfbfbf;
  166 + display: flex;
  167 + margin-top: 1vh;
  168 + .root-form {
  169 + width: 44vw;
  170 + margin: 1vh 1vw;
  171 + position: relative;
  172 + :deep .ant-btn {
  173 + position: absolute;
  174 + right: 1vw;
  175 + }
  176 + }
57 } 177 }
58 </style> 178 </style>
1 <template> 1 <template>
2 - <div class="step1">  
3 - <div class="step1-form"> 2 + <div class="root">
  3 + <div class="root-form">
4 <div> 4 <div>
5 <BasicForm @register="register" /> 5 <BasicForm @register="register" />
6 </div> 6 </div>
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 </div> 8 </div>
9 </template> 9 </template>
10 <script lang="ts"> 10 <script lang="ts">
11 - import { defineComponent } from 'vue'; 11 + import { defineComponent, ref } from 'vue';
12 import { BasicForm, useForm } from '/@/components/Form'; 12 import { BasicForm, useForm } from '/@/components/Form';
13 import { modeForm } from './config'; 13 import { modeForm } from './config';
14 import { Select, Input, Divider } from 'ant-design-vue'; 14 import { Select, Input, Divider } from 'ant-design-vue';
@@ -23,7 +23,8 @@ @@ -23,7 +23,8 @@
23 }, 23 },
24 emits: ['next', 'resetFunc', 'register'], 24 emits: ['next', 'resetFunc', 'register'],
25 setup(_, { emit }) { 25 setup(_, { emit }) {
26 - const [register, { validate, setFieldsValue, resetFields }] = useForm({ 26 + const sonValues = ref({});
  27 + const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
27 labelWidth: 100, 28 labelWidth: 100,
28 schemas: modeForm, 29 schemas: modeForm,
29 actionColOptions: { 30 actionColOptions: {
@@ -38,7 +39,7 @@ @@ -38,7 +39,7 @@
38 //提交数据 39 //提交数据
39 async function customSubmitFunc() { 40 async function customSubmitFunc() {
40 try { 41 try {
41 - const values = await validate(); 42 + const values = await validateFields();
42 emit('next', values); 43 emit('next', values);
43 } catch (error) {} 44 } catch (error) {}
44 } 45 }
@@ -51,7 +52,12 @@ @@ -51,7 +52,12 @@
51 const customResetStepOneFunc = () => { 52 const customResetStepOneFunc = () => {
52 resetFields(); 53 resetFields();
53 }; 54 };
  55 + const getSonValueFunc = async () => {
  56 + sonValues.value = await validateFields();
  57 + return sonValues.value;
  58 + };
54 return { 59 return {
  60 + getSonValueFunc,
55 register, 61 register,
56 setStepOneFieldsValueFunc, 62 setStepOneFieldsValueFunc,
57 customResetStepOneFunc, 63 customResetStepOneFunc,
@@ -60,52 +66,19 @@ @@ -60,52 +66,19 @@
60 }); 66 });
61 </script> 67 </script>
62 <style lang="less" scoped> 68 <style lang="less" scoped>
63 - .step1 {  
64 - &-form {  
65 - width: 800px;  
66 - height: 300px;  
67 - margin: 15px auto;  
68 - }  
69 -  
70 - h3 {  
71 - margin: 0 0 12px;  
72 - font-size: 16px;  
73 - line-height: 32px;  
74 - color: @text-color;  
75 - }  
76 -  
77 - h4 {  
78 - margin: 0 0 4px;  
79 - font-size: 14px;  
80 - line-height: 22px;  
81 - color: @text-color;  
82 - }  
83 -  
84 - p {  
85 - color: @text-color;  
86 - }  
87 - .device-icon-style {  
88 - :deep .ant-upload-select-picture-card {  
89 - display: inherit;  
90 - float: none;  
91 - width: 8.6vw;  
92 - height: 17vh;  
93 - margin-right: 8px;  
94 - text-align: center;  
95 - vertical-align: top;  
96 - background-color: #fafafa;  
97 - border: 1px dashed #d9d9d9;  
98 - cursor: pointer;  
99 - transition: border-color 0.3s ease; 69 + .root {
  70 + width: 100vw;
  71 + height: 30vh;
  72 + .root-form {
  73 + width: 40vw;
  74 + position: relative;
  75 + left: 10vw;
  76 + top: 8vh;
  77 + :deep .ant-btn {
  78 + position: absolute;
  79 + right: 8.1vw;
  80 + top: 6vh;
100 } 81 }
101 } 82 }
102 } 83 }
103 -  
104 - .pay-select {  
105 - width: 20%;  
106 - }  
107 -  
108 - .pay-input {  
109 - width: 70%;  
110 - }  
111 </style> 84 </style>
1 <template> 1 <template>
2 - <div class="step2"> <BasicForm :showSubmitButton="false" @register="register" /> </div> 2 + <div class="step2">
  3 + <div>
  4 + <div v-show="isWhereComp == 'KafKA'">
  5 + <TransferConfigKafka ref="refTransferConfigKafka" @prev="getSonPrev" />
  6 + </div>
  7 + <div v-show="isWhereComp == 'MQTT'">
  8 + <TransferConfigMqtt ref="refTransferConfigMqtt" @prev="getSonPrev" />
  9 + </div>
  10 + <div v-show="isWhereComp == 'RabbitMq'">
  11 + <TransferConfigRabbitMq ref="refTransferConfigRabbitMq" @prev="getSonPrev" />
  12 + </div>
  13 + <div v-show="isWhereComp == 'Api'">
  14 + <TransferConfigApi ref="refTransferConfigApi" @prev="getSonPrev" />
  15 + </div>
  16 + </div>
  17 + </div>
3 </template> 18 </template>
4 <script lang="ts"> 19 <script lang="ts">
5 - import { defineComponent } from 'vue';  
6 - import { BasicForm, useForm } from '/@/components/Form';  
7 - import { modeKafkaForm } from './config';  
8 - 20 + import { defineComponent, watch, ref, getCurrentInstance, reactive } from 'vue';
  21 + import TransferConfigKafka from '../cpns/cpns/transferConfigKafka.vue';
  22 + import TransferConfigMqtt from '../cpns/cpns/transferConfigMqtt.vue';
  23 + import TransferConfigRabbitMq from '../cpns/cpns/transferConfigRabbitMq.vue';
  24 + import TransferConfigApi from '../cpns/cpns/transferConfigApi.vue';
9 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 25 import { Alert, Divider, Descriptions } from 'ant-design-vue';
10 26
11 export default defineComponent({ 27 export default defineComponent({
12 components: { 28 components: {
13 - BasicForm,  
14 [Alert.name]: Alert, 29 [Alert.name]: Alert,
15 [Divider.name]: Divider, 30 [Divider.name]: Divider,
16 [Descriptions.name]: Descriptions, 31 [Descriptions.name]: Descriptions,
17 [Descriptions.Item.name]: Descriptions.Item, 32 [Descriptions.Item.name]: Descriptions.Item,
  33 + TransferConfigKafka,
  34 + TransferConfigMqtt,
  35 + TransferConfigRabbitMq,
  36 + TransferConfigApi,
18 }, 37 },
19 - emits: ['next', 'prev', 'register'],  
20 - setup(_, { emit }) {  
21 - const [register, { validate, setFieldsValue, resetFields }] = useForm({  
22 - labelWidth: 80,  
23 - schemas: modeKafkaForm,  
24 - actionColOptions: {  
25 - span: 14,  
26 - },  
27 - resetButtonOptions: {  
28 - text: '上一步',  
29 - },  
30 -  
31 - resetFunc: customResetFunc,  
32 - submitFunc: customSubmitFunc, 38 + // eslint-disable-next-line vue/require-prop-types
  39 + props: ['getModeSelect'],
  40 + emits: ['prevSon'],
  41 + setup(props, { emit }) {
  42 + const { proxy } = getCurrentInstance();
  43 + const getTransferConfigKafkaValue = ref({});
  44 + const refTransferConfigKafka = ref(null);
  45 + const refTransferConfigMqtt = ref(null);
  46 + const refTransferConfigRabbitMq = ref(null);
  47 + const refTransferConfigApi = ref(null);
  48 + const isWhereComp = ref('');
  49 + const editSonData = reactive({
  50 + type: '',
  51 + configuration: {},
  52 + name: '',
33 }); 53 });
34 - const setStepTwoFieldsValueFunc = (v) => {  
35 - setFieldsValue(v);  
36 - };  
37 - const customClearStepTwoValueFunc = () => {  
38 - resetFields(); 54 + const getSonPrev = () => {
  55 + emit('prevSon');
39 }; 56 };
40 - async function customResetFunc() {  
41 - emit('prev');  
42 - }  
43 - async function customSubmitFunc() { 57 + watch(
  58 + () => props.getModeSelect,
  59 + (val) => {
  60 + isWhereComp.value = val.type;
  61 + }
  62 + );
  63 + const clearSonValueDataFunc = () => {
44 try { 64 try {
45 - const values = await validate();  
46 - emit('next', values);  
47 - } catch (error) {  
48 - } finally { 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 + }
  77 + };
  78 + const getSonValueDataFunc = () => {
  79 + if (isWhereComp.value == 'KafKA') {
  80 + getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigKafka.getSonValueFunc();
  81 + } else if (isWhereComp.value == 'MQTT') {
  82 + getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigMqtt.getSonValueFunc();
  83 + } else if (isWhereComp.value == 'RabbitMq') {
  84 + getTransferConfigKafkaValue.value =
  85 + proxy.$refs.refTransferConfigRabbitMq.getSonValueFunc();
  86 + } else if (isWhereComp.value == 'Api') {
  87 + getTransferConfigKafkaValue.value = proxy.$refs.refTransferConfigApi.getSonValueFunc();
  88 + }
  89 + return getTransferConfigKafkaValue.value;
  90 + };
  91 + const editSonValueDataFunc = (v) => {
  92 + editSonData.type = v.type;
  93 + editSonData.configuration = v.configuration;
  94 + editSonData.name = v.name;
  95 + if (editSonData.type == 'KafKA') {
  96 + isWhereComp.value = editSonData.type;
  97 + try {
  98 + setTimeout(() => {
  99 + proxy.$refs.refTransferConfigKafka.setStepTwoFieldsValueFunc(
  100 + editSonData.configuration,
  101 + editSonData.name
  102 + );
  103 + }, 10);
  104 + } catch (e) {
  105 + return e;
  106 + }
  107 + } else if (editSonData.type == 'MQTT') {
  108 + isWhereComp.value = editSonData.type;
  109 + proxy.$refs.refTransferConfigMqtt.setStepTwoFieldsValueFunc(
  110 + editSonData.configuration,
  111 + editSonData.name
  112 + );
  113 + } else if (editSonData.type == 'RabbitMq') {
  114 + isWhereComp.value = editSonData.type;
  115 + proxy.$refs.refTransferConfigRabbitMq.setStepTwoFieldsValueFunc(
  116 + editSonData.configuration,
  117 + editSonData.name
  118 + );
  119 + } else if (editSonData.type == 'Api') {
  120 + isWhereComp.value = editSonData.type;
  121 + proxy.$refs.refTransferConfigApi.setStepTwoFieldsValueFunc(
  122 + editSonData.configuration,
  123 + editSonData.name
  124 + );
49 } 125 }
50 - }  
51 - return { register, setStepTwoFieldsValueFunc, customClearStepTwoValueFunc }; 126 + };
  127 + return {
  128 + clearSonValueDataFunc,
  129 + editSonValueDataFunc,
  130 + refTransferConfigKafka,
  131 + getSonValueDataFunc,
  132 + getSonPrev,
  133 + isWhereComp,
  134 + refTransferConfigMqtt,
  135 + refTransferConfigRabbitMq,
  136 + refTransferConfigApi,
  137 + };
52 }, 138 },
53 }); 139 });
54 </script> 140 </script>
55 -<style lang="less" scoped>  
56 - .step2 {  
57 - }  
58 -</style> 141 +<style lang="less" scoped></style>
1 <template> 1 <template>
2 <div> 2 <div>
3 - <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }"> 3 + <BasicTable
  4 + @selection-change="useSelectionChange"
  5 + @register="registerTable"
  6 + :rowSelection="{ type: 'checkbox' }"
  7 + >
4 <template #toolbar> 8 <template #toolbar>
5 <a-button type="primary" @click="handleAdd"> 添加转换 </a-button> 9 <a-button type="primary" @click="handleAdd"> 添加转换 </a-button>
6 - <a-button style="background-color: rgba(237, 111, 111, 1)" type="default">  
7 - <span style="color: white">删除</span> 10 + <a-button
  11 + @click="handleDelete"
  12 + style="background-color: rgba(237, 111, 111, 1)"
  13 + type="default"
  14 + >
  15 + <span style="color: white">批量删除</span>
8 </a-button> 16 </a-button>
9 </template> 17 </template>
10 <template #action="{ record }"> 18 <template #action="{ record }">
@@ -13,18 +21,38 @@ @@ -13,18 +21,38 @@
13 { 21 {
14 label: '编辑', 22 label: '编辑',
15 icon: 'clarity:note-edit-line', 23 icon: 'clarity:note-edit-line',
  24 + onClick: handleEdit.bind(null, record),
16 }, 25 },
17 - {  
18 - label: '警用',  
19 - icon: 'clarity:note-edit-line',  
20 - }, 26 +
21 { 27 {
22 label: '删除', 28 label: '删除',
23 icon: 'ant-design:delete-outlined', 29 icon: 'ant-design:delete-outlined',
24 color: 'error', 30 color: 'error',
25 popConfirm: { 31 popConfirm: {
26 title: '是否确认删除', 32 title: '是否确认删除',
27 - confirm: handleDelete.bind(null, record), 33 + confirm: handleSingleDelete.bind(null, record),
  34 + },
  35 + },
  36 + ]"
  37 + :dropDownActions="[
  38 + {
  39 + label: '启用',
  40 + popConfirm: {
  41 + title: '是否启用？',
  42 + confirm: handleEnableOrDisable.bind(null, record),
  43 + },
  44 + ifShow: (_action) => {
  45 + return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
  46 + },
  47 + },
  48 + {
  49 + label: '禁用',
  50 + popConfirm: {
  51 + title: '是否禁用？',
  52 + confirm: handleEnableOrDisable.bind(null, record),
  53 + },
  54 + ifShow: () => {
  55 + return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
28 }, 56 },
29 }, 57 },
30 ]" 58 ]"
@@ -37,21 +65,34 @@ @@ -37,21 +65,34 @@
37 </div> 65 </div>
38 </template> 66 </template>
39 <script lang="ts"> 67 <script lang="ts">
40 - import { defineComponent } from 'vue'; 68 + import { defineComponent, reactive } from 'vue';
41 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 69 import { BasicTable, useTable, TableAction } from '/@/components/Table';
42 import { columns, searchFormSchema } from './config'; 70 import { columns, searchFormSchema } from './config';
43 import { useModal } from '/@/components/Modal'; 71 import { useModal } from '/@/components/Modal';
44 import DataTransferDrawer from './addDataTransferDrawer.vue'; 72 import DataTransferDrawer from './addDataTransferDrawer.vue';
  73 + import {
  74 + getConvertApi,
  75 + isEnableOrDisableApi,
  76 + deleteConvertApi,
  77 + } from '/@/api/datamanager/dataManagerApi';
  78 + import { useMessage } from '/@/hooks/web/useMessage';
45 79
46 export default defineComponent({ 80 export default defineComponent({
47 name: 'Index', 81 name: 'Index',
48 components: { BasicTable, TableAction, DataTransferDrawer }, 82 components: { BasicTable, TableAction, DataTransferDrawer },
49 setup() { 83 setup() {
  84 + const enableObj = reactive({
  85 + convertIds: [],
  86 + status: 0,
  87 + });
  88 + const { createMessage } = useMessage();
  89 + let selectedRowKeys: Array<string> = [];
50 const [registerModal, { openModal }] = useModal(); 90 const [registerModal, { openModal }] = useModal();
51 - const [registerTable, { reload }] = useTable({  
52 - title: '场景联动列表', 91 + const [registerTable, { reload, getSelectRowKeys }] = useTable({
  92 + title: '数据转换列表',
53 clickToRowSelect: false, 93 clickToRowSelect: false,
54 columns, 94 columns,
  95 + api: getConvertApi,
55 formConfig: { 96 formConfig: {
56 labelWidth: 120, 97 labelWidth: 120,
57 schemas: searchFormSchema, 98 schemas: searchFormSchema,
@@ -72,16 +113,55 @@ @@ -72,16 +113,55 @@
72 113
73 //新增 114 //新增
74 const handleAdd = () => { 115 const handleAdd = () => {
75 - openModal(true, {  
76 - isUpdate: false,  
77 - });  
78 - };  
79 - const handleDelete = (record: Recordable) => {  
80 - console.log(record); 116 + setTimeout(() => {
  117 + openModal(true, {
  118 + isUpdate: false,
  119 + });
  120 + }, 10);
81 }; 121 };
  122 +
82 const handleSuccess = () => { 123 const handleSuccess = () => {
83 reload(); 124 reload();
84 }; 125 };
  126 + const handleEdit = (record: Recordable) => {
  127 + setTimeout(() => {
  128 + openModal(true, {
  129 + record,
  130 + isUpdate: true,
  131 + });
  132 + }, 10);
  133 + };
  134 + const handleEnableOrDisable = async (record: Recordable) => {
  135 + 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 + }
  140 + if (enableObj.status == 0) {
  141 + enableObj.status = 1;
  142 + }
  143 + await isEnableOrDisableApi(enableObj as never);
  144 + createMessage.success('转换配置启用成功');
  145 + };
  146 + const handleSingleDelete = async (record: Recordable) => {
  147 + try {
  148 + let ids = [record.id];
  149 + await deleteConvertApi(ids);
  150 + createMessage.success('删除成功');
  151 + reload();
  152 + } catch (e) {
  153 + return e;
  154 + }
  155 + };
  156 + const useSelectionChange = () => {
  157 + selectedRowKeys = getSelectRowKeys();
  158 + };
  159 +
  160 + const handleDelete = async () => {
  161 + await deleteConvertApi(selectedRowKeys);
  162 + createMessage.success('删除成功');
  163 + reload();
  164 + };
85 165
86 return { 166 return {
87 registerTable, 167 registerTable,
@@ -89,6 +169,10 @@ @@ -89,6 +169,10 @@
89 handleDelete, 169 handleDelete,
90 registerModal, 170 registerModal,
91 handleSuccess, 171 handleSuccess,
  172 + handleEdit,
  173 + handleEnableOrDisable,
  174 + handleSingleDelete,
  175 + useSelectionChange,
92 }; 176 };
93 }, 177 },
94 }); 178 });
@@ -40,19 +40,6 @@ export const searchFormSchema: FormSchema[] = [ @@ -40,19 +40,6 @@ export const searchFormSchema: FormSchema[] = [
40 maxLength: 255, 40 maxLength: 255,
41 placeholder: '请输入租户配置名称', 41 placeholder: '请输入租户配置名称',
42 }, 42 },
43 - dynamicRules: () => {  
44 - return [  
45 - {  
46 - required: false,  
47 - validator: (_, value) => {  
48 - if (String(value).length > 255) {  
49 - return Promise.reject('字数不超过255个字');  
50 - }  
51 - return Promise.resolve();  
52 - },  
53 - },  
54 - ];  
55 - },  
56 }, 43 },
57 ]; 44 ];
58 export const formSchema: FormSchema[] = [ 45 export const formSchema: FormSchema[] = [
@@ -88,18 +75,5 @@ export const formSchema: FormSchema[] = [ @@ -88,18 +75,5 @@ export const formSchema: FormSchema[] = [
88 maxLength: 255, 75 maxLength: 255,
89 placeholder: '请输入说明', 76 placeholder: '请输入说明',
90 }, 77 },
91 - dynamicRules: () => {  
92 - return [  
93 - {  
94 - required: false,  
95 - validator: (_, value) => {  
96 - if (String(value).length > 255) {  
97 - return Promise.reject('字数不超过255个字');  
98 - }  
99 - return Promise.resolve();  
100 - },  
101 - },  
102 - ];  
103 - },  
104 }, 78 },
105 ]; 79 ];