简柏林 / 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 14 </a-steps>
15 15 </div>
16 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 26 </div>
20 27 </BasicModal>
21 28 </div>
22 29 </template>
23 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 40 import { BasicModal, useModalInner } from '/@/components/Modal';
26 41 import { Steps } from 'ant-design-vue';
27 42 import TransferConfigMode from './cpns/transferConfigMode.vue';
28 43 import TransferConfigParams from './cpns/transferConfigParams.vue';
  44 + import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
  45 + import { useMessage } from '/@/hooks/web/useMessage';
29 46
30 47 export default defineComponent({
31 48 name: 'ConfigDrawer',
... ... @@ -36,22 +53,130 @@
36 53 TransferConfigMode,
37 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 72 const isUpdate = ref(true);
41 73 const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换'));
42 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 78 isUpdate.value = !!data?.isUpdate;
46 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 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 134 const handlePrev = () => {
52 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 180 return {
56 181 registerDrawer,
57 182 handleSubmit,
... ... @@ -59,6 +184,9 @@
59 184 current,
60 185 handleNext,
61 186 handlePrev,
  187 + getModeSelectVal,
  188 + refTransferConfigParams,
  189 + refTransferConfigMode,
62 190 };
63 191 },
64 192 });
... ...
... ... @@ -8,8 +8,17 @@ export const columns: BasicColumn[] = [
8 8 },
9 9 {
10 10 title: '途径',
11   - dataIndex: 'name1',
  11 + dataIndex: 'type',
12 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 24 title: '状态',
... ...
1 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 16 export const modeForm: FormSchema[] = [
4 17 {
5   - field: '',
6   - label: '',
  18 + field: 'type',
  19 + label: '转换方式',
7 20 component: 'Select',
  21 + required: true,
8 22 componentProps: {
9 23 placeholder: '请选择转换方式',
10 24 options: [
11 25 { label: 'KafKA', value: 'KafKA' },
12 26 { label: 'RabbitMq', value: 'RabbitMq' },
13   - { label: 'Api调用', value: 'Api调用' },
  27 + { label: 'Api调用', value: 'Api' },
14 28 { label: 'MQTT', value: 'MQTT' },
15 29 ],
16 30 },
... ... @@ -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 60 export const modeKafkaForm: FormSchema[] = [
22 61 {
23   - field: '',
  62 + field: 'name',
24 63 label: '名称',
25   - colProps: { span: 13 },
  64 + colProps: { span: 12 },
26 65 required: true,
27 66 component: 'Input',
28 67 componentProps: {
... ... @@ -31,9 +70,9 @@ export const modeKafkaForm: FormSchema[] = [
31 70 },
32 71 },
33 72 {
34   - field: '',
  73 + field: 'topicPattern',
35 74 label: 'Topic',
36   - colProps: { span: 13 },
  75 + colProps: { span: 12 },
37 76 required: true,
38 77 component: 'Input',
39 78 componentProps: {
... ... @@ -42,60 +81,64 @@ export const modeKafkaForm: FormSchema[] = [
42 81 },
43 82 },
44 83 {
45   - field: '',
  84 + field: 'bootstrapServers',
46 85 label: 'Bootstrap',
47   - colProps: { span: 13 },
  86 + colProps: { span: 12 },
48 87 component: 'Input',
49 88 componentProps: {
50 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 99 componentProps: {
60 100 maxLength: 255,
61 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 110 componentProps: {
70 111 maxLength: 255,
71 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 121 componentProps: {
80 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 132 componentProps: {
90 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 139 component: 'Select',
97   - label: 'Number',
98   - colProps: { span: 13 },
  140 + label: 'Acks',
  141 + colProps: { span: 12 },
99 142 componentProps: {
100 143 placeholder: '请选择Number of acknowledgments',
101 144 options: [
... ... @@ -107,38 +150,665 @@ export const modeKafkaForm: FormSchema[] = [
107 150 },
108 151 },
109 152 {
110   - field: '',
  153 + field: 'keySerializer',
111 154 label: 'Key',
112   - colProps: { span: 13 },
  155 + colProps: { span: 12 },
113 156 required: true,
114 157 component: 'Input',
  158 + defaultValue: 'org.apache.kafka.common.serialization.StringSerializer',
115 159 componentProps: {
116 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 166 label: 'Value',
123   - colProps: { span: 13 },
  167 + colProps: { span: 12 },
124 168 required: true,
125 169 component: 'Input',
  170 + defaultValue: 'org.apache.kafka.common.serialization.StringSerializer',
126 171 componentProps: {
127 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 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 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 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 812 component: 'Input',
143 813 componentProps: {
144 814 maxLength: 255,
... ...
1 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 120 </template>
4 121 <script lang="ts">
5   - import { defineComponent } from 'vue';
  122 + import { defineComponent, ref, reactive } from 'vue';
6 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 128 export default defineComponent({
12 129 components: {
... ... @@ -15,12 +132,19 @@
15 132 [Divider.name]: Divider,
16 133 [Descriptions.name]: Descriptions,
17 134 [Descriptions.Item.name]: Descriptions.Item,
  135 + InboxOutlined,
  136 + UploadDragger,
18 137 },
19 138 emits: ['next', 'prev', 'register'],
20 139 setup(_, { emit }) {
  140 + const fileList = ref<[]>([]);
  141 + const keyAndValueArr = ref<[]>([]);
  142 + const sonValues = reactive({
  143 + configuration: {},
  144 + });
21 145 const [register, { validate, setFieldsValue, resetFields }] = useForm({
22 146 labelWidth: 80,
23   - schemas: modeKafkaForm,
  147 + schemas: modeApiForm,
24 148 actionColOptions: {
25 149 span: 14,
26 150 },
... ... @@ -31,6 +155,14 @@
31 155 resetFunc: customResetFunc,
32 156 submitFunc: customSubmitFunc,
33 157 });
  158 +
  159 + const [registerKeyAndValue] = useForm({
  160 + labelWidth: 80,
  161 + schemas: modeKafkaInseretKeyAndValueForm,
  162 + actionColOptions: {
  163 + span: 14,
  164 + },
  165 + });
34 166 const setStepTwoFieldsValueFunc = (v) => {
35 167 setFieldsValue(v);
36 168 };
... ... @@ -48,11 +180,60 @@
48 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 222 </script>
55 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 239 </style>
... ...
1 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 78 </template>
4 79 <script lang="ts">
5   - import { defineComponent } from 'vue';
  80 + import { defineComponent, ref, reactive } from 'vue';
6 81 import { BasicForm, useForm } from '/@/components/Form';
7   - import { modeKafkaForm } from './config';
8   -
  82 + import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config';
9 83 import { Alert, Divider, Descriptions } from 'ant-design-vue';
10 84
11 85 export default defineComponent({
... ... @@ -18,7 +92,11 @@
18 92 },
19 93 emits: ['next', 'prev', 'register'],
20 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 100 labelWidth: 80,
23 101 schemas: modeKafkaForm,
24 102 actionColOptions: {
... ... @@ -31,8 +109,21 @@
31 109 resetFunc: customResetFunc,
32 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 123 setFieldsValue(v);
  124 + setFieldsValue({
  125 + name: v1,
  126 + });
36 127 };
37 128 const customClearStepTwoValueFunc = () => {
38 129 resetFields();
... ... @@ -42,17 +133,65 @@
42 133 }
43 134 async function customSubmitFunc() {
44 135 try {
45   - const values = await validate();
  136 + const values = await validateFields();
46 137 emit('next', values);
47 138 } catch (error) {
48 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 179 </script>
55 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 197 </style>
... ...
1 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 65 </template>
4 66 <script lang="ts">
5   - import { defineComponent } from 'vue';
  67 + import { defineComponent, ref, reactive } from 'vue';
6 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 73 export default defineComponent({
12 74 components: {
... ... @@ -15,12 +77,18 @@
15 77 [Divider.name]: Divider,
16 78 [Descriptions.name]: Descriptions,
17 79 [Descriptions.Item.name]: Descriptions.Item,
  80 + InboxOutlined,
  81 + UploadDragger,
18 82 },
19 83 emits: ['next', 'prev', 'register'],
20 84 setup(_, { emit }) {
  85 + const fileList = ref<[]>([]);
  86 + const sonValues = reactive({
  87 + configuration: {},
  88 + });
21 89 const [register, { validate, setFieldsValue, resetFields }] = useForm({
22 90 labelWidth: 80,
23   - schemas: modeKafkaForm,
  91 + schemas: modeMqttForm,
24 92 actionColOptions: {
25 93 span: 14,
26 94 },
... ... @@ -48,11 +116,39 @@
48 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 134 </script>
55 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 154 </style>
... ...
1 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 63 </template>
4 64 <script lang="ts">
5   - import { defineComponent } from 'vue';
  65 + import { defineComponent, ref, reactive } from 'vue';
6 66 import { BasicForm, useForm } from '/@/components/Form';
7   - import { modeKafkaForm } from './config';
  67 + import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config';
8 68
9 69 import { Alert, Divider, Descriptions } from 'ant-design-vue';
10 70
... ... @@ -18,9 +78,14 @@
18 78 },
19 79 emits: ['next', 'prev', 'register'],
20 80 setup(_, { emit }) {
  81 + const keyAndValueArr = ref<[]>([]);
  82 + const sonValues = reactive({
  83 + configuration: {},
  84 + });
  85 +
21 86 const [register, { validate, setFieldsValue, resetFields }] = useForm({
22 87 labelWidth: 80,
23   - schemas: modeKafkaForm,
  88 + schemas: modeRabbitMqForm,
24 89 actionColOptions: {
25 90 span: 14,
26 91 },
... ... @@ -31,6 +96,15 @@
31 96 resetFunc: customResetFunc,
32 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 108 const setStepTwoFieldsValueFunc = (v) => {
35 109 setFieldsValue(v);
36 110 };
... ... @@ -48,11 +122,57 @@
48 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 161 </script>
55 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 178 </style>
... ...
1 1 <template>
2   - <div class="step1">
3   - <div class="step1-form">
  2 + <div class="root">
  3 + <div class="root-form">
4 4 <div>
5 5 <BasicForm @register="register" />
6 6 </div>
... ... @@ -8,7 +8,7 @@
8 8 </div>
9 9 </template>
10 10 <script lang="ts">
11   - import { defineComponent } from 'vue';
  11 + import { defineComponent, ref } from 'vue';
12 12 import { BasicForm, useForm } from '/@/components/Form';
13 13 import { modeForm } from './config';
14 14 import { Select, Input, Divider } from 'ant-design-vue';
... ... @@ -23,7 +23,8 @@
23 23 },
24 24 emits: ['next', 'resetFunc', 'register'],
25 25 setup(_, { emit }) {
26   - const [register, { validate, setFieldsValue, resetFields }] = useForm({
  26 + const sonValues = ref({});
  27 + const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
27 28 labelWidth: 100,
28 29 schemas: modeForm,
29 30 actionColOptions: {
... ... @@ -38,7 +39,7 @@
38 39 //提交数据
39 40 async function customSubmitFunc() {
40 41 try {
41   - const values = await validate();
  42 + const values = await validateFields();
42 43 emit('next', values);
43 44 } catch (error) {}
44 45 }
... ... @@ -51,7 +52,12 @@
51 52 const customResetStepOneFunc = () => {
52 53 resetFields();
53 54 };
  55 + const getSonValueFunc = async () => {
  56 + sonValues.value = await validateFields();
  57 + return sonValues.value;
  58 + };
54 59 return {
  60 + getSonValueFunc,
55 61 register,
56 62 setStepOneFieldsValueFunc,
57 63 customResetStepOneFunc,
... ... @@ -60,52 +66,19 @@
60 66 });
61 67 </script>
62 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 84 </style>
... ...
1 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 18 </template>
4 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 25 import { Alert, Divider, Descriptions } from 'ant-design-vue';
10 26
11 27 export default defineComponent({
12 28 components: {
13   - BasicForm,
14 29 [Alert.name]: Alert,
15 30 [Divider.name]: Divider,
16 31 [Descriptions.name]: Descriptions,
17 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 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 140 </script>
55   -<style lang="less" scoped>
56   - .step2 {
57   - }
58   -</style>
  141 +<style lang="less" scoped></style>
... ...
1 1 <template>
2 2 <div>
3   - <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
  3 + <BasicTable
  4 + @selection-change="useSelectionChange"
  5 + @register="registerTable"
  6 + :rowSelection="{ type: 'checkbox' }"
  7 + >
4 8 <template #toolbar>
5 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 16 </a-button>
9 17 </template>
10 18 <template #action="{ record }">
... ... @@ -13,18 +21,38 @@
13 21 {
14 22 label: '编辑',
15 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 28 label: '删除',
23 29 icon: 'ant-design:delete-outlined',
24 30 color: 'error',
25 31 popConfirm: {
26 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 65 </div>
38 66 </template>
39 67 <script lang="ts">
40   - import { defineComponent } from 'vue';
  68 + import { defineComponent, reactive } from 'vue';
41 69 import { BasicTable, useTable, TableAction } from '/@/components/Table';
42 70 import { columns, searchFormSchema } from './config';
43 71 import { useModal } from '/@/components/Modal';
44 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 80 export default defineComponent({
47 81 name: 'Index',
48 82 components: { BasicTable, TableAction, DataTransferDrawer },
49 83 setup() {
  84 + const enableObj = reactive({
  85 + convertIds: [],
  86 + status: 0,
  87 + });
  88 + const { createMessage } = useMessage();
  89 + let selectedRowKeys: Array<string> = [];
50 90 const [registerModal, { openModal }] = useModal();
51   - const [registerTable, { reload }] = useTable({
52   - title: '场景联动列表',
  91 + const [registerTable, { reload, getSelectRowKeys }] = useTable({
  92 + title: '数据转换列表',
53 93 clickToRowSelect: false,
54 94 columns,
  95 + api: getConvertApi,
55 96 formConfig: {
56 97 labelWidth: 120,
57 98 schemas: searchFormSchema,
... ... @@ -72,16 +113,55 @@
72 113
73 114 //新增
74 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 123 const handleSuccess = () => {
83 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 166 return {
87 167 registerTable,
... ... @@ -89,6 +169,10 @@
89 169 handleDelete,
90 170 registerModal,
91 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 40 maxLength: 255,
41 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 45 export const formSchema: FormSchema[] = [
... ... @@ -88,18 +75,5 @@ export const formSchema: FormSchema[] = [
88 75 maxLength: 255,
89 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 ];
... ...