简柏林 / thingskit-front · Commits

Commit 49891768cb8e7d481c0f17527a4a5226d2fc8e9a

Authored by fengtao
1 parent 298ab0ca

feat：数据流转 新增其他属性和pem上传文件

Inline Side-by-side
Showing 5 changed files with 53 additions and 316 deletions
@@ -55,31 +55,6 @@ export const modeForm: FormSchema[] = [ @@ -55,31 +55,6 @@ export const modeForm: FormSchema[] = [
55 }, 55 },
56 ]; 56 ];
57 57
58 -export const modeKafkaInseretKeyAndValueForm: FormSchema[] = [  
59 - {  
60 - field: 'key',  
61 - label: 'Key',  
62 - colProps: { span: 12 },  
63 - required: true,  
64 - component: 'Input',  
65 - componentProps: {  
66 - maxLength: 255,  
67 - placeholder: '请输入Key',  
68 - },  
69 - },  
70 - {  
71 - field: 'value',  
72 - label: 'Value',  
73 - colProps: { span: 12 },  
74 - required: true,  
75 - component: 'Input',  
76 - componentProps: {  
77 - maxLength: 255,  
78 - placeholder: '请输入Value',  
79 - },  
80 - },  
81 -];  
82 -  
83 export const modeApiInseretKeyAndValueForm: FormSchema[] = [ 58 export const modeApiInseretKeyAndValueForm: FormSchema[] = [
84 { 59 {
85 field: 'key', 60 field: 'key',
@@ -116,7 +91,7 @@ export const modeKafkaForm: FormSchema[] = [ @@ -116,7 +91,7 @@ export const modeKafkaForm: FormSchema[] = [
116 maxLength: 255, 91 maxLength: 255,
117 placeholder: '请输入名称', 92 placeholder: '请输入名称',
118 }, 93 },
119 - dynamicRules: ({ values }) => { 94 + dynamicRules: () => {
120 return [ 95 return [
121 { 96 {
122 required: true, 97 required: true,
@@ -242,11 +217,10 @@ export const modeKafkaForm: FormSchema[] = [ @@ -242,11 +217,10 @@ export const modeKafkaForm: FormSchema[] = [
242 }, 217 },
243 }, 218 },
244 { 219 {
245 - field: '1', 220 + field: 'otherProperties',
246 label: '其他属性', 221 label: '其他属性',
247 colProps: { span: 24 }, 222 colProps: { span: 24 },
248 - slot: 'addValue',  
249 - component: 'Input', 223 + component: 'JAddInput',
250 }, 224 },
251 { 225 {
252 field: 'addMetadataKeyValuesAsKafkaHeaders', 226 field: 'addMetadataKeyValuesAsKafkaHeaders',
@@ -496,7 +470,7 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -496,7 +470,7 @@ export const modeRabbitMqForm: FormSchema[] = [
496 maxLength: 255, 470 maxLength: 255,
497 placeholder: '请输入名称', 471 placeholder: '请输入名称',
498 }, 472 },
499 - dynamicRules: ({ values }) => { 473 + dynamicRules: () => {
500 return [ 474 return [
501 { 475 {
502 required: true, 476 required: true,
@@ -637,11 +611,10 @@ export const modeRabbitMqForm: FormSchema[] = [ @@ -637,11 +611,10 @@ export const modeRabbitMqForm: FormSchema[] = [
637 }, 611 },
638 }, 612 },
639 { 613 {
640 - field: '1', 614 + field: 'clientProperties',
641 label: '客户端属性', 615 label: '客户端属性',
642 colProps: { span: 24 }, 616 colProps: { span: 24 },
643 - component: 'InputTextArea',  
644 - slot: 'addKeyAndValue', 617 + component: 'JAddInput',
645 }, 618 },
646 { 619 {
647 field: 'description', 620 field: 'description',
@@ -854,35 +827,11 @@ export const modeApiForm: FormSchema[] = [ @@ -854,35 +827,11 @@ export const modeApiForm: FormSchema[] = [
854 }, 827 },
855 }, 828 },
856 { 829 {
857 - field: 'Header',  
858 - label: 'Header',  
859 - colProps: { span: 12 },  
860 - required: true,  
861 - component: 'Input',  
862 - defaultValue: 'Content-Type',  
863 - componentProps: {  
864 - maxLength: 255,  
865 - placeholder: 'Content-Type',  
866 - },  
867 - },  
868 - {  
869 - field: 'Value',  
870 - label: 'Value',  
871 - colProps: { span: 12 },  
872 - required: true,  
873 - component: 'Input',  
874 - defaultValue: 'application/json',  
875 - componentProps: {  
876 - maxLength: 255,  
877 - placeholder: 'application/json',  
878 - },  
879 - },  
880 - {  
881 - field: '1',  
882 - label: '', 830 + field: 'headers',
  831 + label: 'Headers',
883 colProps: { span: 24 }, 832 colProps: { span: 24 },
884 - component: 'Input',  
885 - slot: 'addKeyAndValue', 833 + defaultValue: '{"Content-Type":"application/json"}',
  834 + component: 'JAddInput',
886 }, 835 },
887 836
888 { 837 {
1 <template> 1 <template>
2 <div class="transfer-config-mode"> 2 <div class="transfer-config-mode">
3 <BasicForm :showSubmitButton="false" @register="register"> 3 <BasicForm :showSubmitButton="false" @register="register">
4 - <template #addKeyAndValue="{ field }">  
5 - <span style="display: none">{{ field }}</span>  
6 - <div>  
7 - <div>  
8 - <template v-for="(item, index) in keyAndValueArr" :key="index">  
9 - <span style="display: none">{{ item + index }}</span>  
10 - <BasicForm  
11 - :showResetButton="false"  
12 - :showSubmitButton="false"  
13 - @register="registerKeyAndValue"  
14 - />  
15 - </template>  
16 - <div>  
17 - <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>  
18 - <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>  
19 - </div>  
20 - </div>  
21 - </div>  
22 - </template>  
23 <template #uploadAdd1="{ field }"> 4 <template #uploadAdd1="{ field }">
24 <span style="display: none">{{ field }}</span> 5 <span style="display: none">{{ field }}</span>
25 <a-upload-dragger 6 <a-upload-dragger
@@ -86,16 +67,12 @@ @@ -86,16 +67,12 @@
86 <script lang="ts"> 67 <script lang="ts">
87 import { defineComponent, ref, reactive, nextTick } from 'vue'; 68 import { defineComponent, ref, reactive, nextTick } from 'vue';
88 import { BasicForm, useForm } from '/@/components/Form'; 69 import { BasicForm, useForm } from '/@/components/Form';
89 - import { modeApiForm, modeApiInseretKeyAndValueForm, CredentialsEnum } from '../config'; 70 + import { modeApiForm, CredentialsEnum } from '../config';
90 import { InboxOutlined } from '@ant-design/icons-vue'; 71 import { InboxOutlined } from '@ant-design/icons-vue';
91 import { Upload } from 'ant-design-vue'; 72 import { Upload } from 'ant-design-vue';
92 import { useMessage } from '/@/hooks/web/useMessage'; 73 import { useMessage } from '/@/hooks/web/useMessage';
93 import { uploadApi } from '/@/api/personal/index'; 74 import { uploadApi } from '/@/api/personal/index';
94 75
95 - interface IKeyAndValue {  
96 - key: string;  
97 - value: string;  
98 - }  
99 export default defineComponent({ 76 export default defineComponent({
100 components: { 77 components: {
101 BasicForm, 78 BasicForm,
@@ -111,27 +88,16 @@ @@ -111,27 +88,16 @@
111 let fileList1: any = ref<[]>([]); 88 let fileList1: any = ref<[]>([]);
112 let fileList2: any = ref<[]>([]); 89 let fileList2: any = ref<[]>([]);
113 let fileList3: any = ref<[]>([]); 90 let fileList3: any = ref<[]>([]);
114 - const keyAndValueArr = ref<[]>([]);  
115 - const temp = ref({});  
116 - let tempObj = ref({});  
117 - const otherPropertiesValues = reactive({  
118 - headers: {},  
119 - });  
120 const credentialsV: any = reactive({ 91 const credentialsV: any = reactive({
121 credentials: { 92 credentials: {
122 type: '', 93 type: '',
123 }, 94 },
124 }); 95 });
125 - const keyAndValueArrTemp = ref<[]>([]);  
126 - const keyAndValueObj = reactive<IKeyAndValue>({  
127 - key: '',  
128 - value: '',  
129 - });  
130 const sonValues: any = reactive({ 96 const sonValues: any = reactive({
131 configuration: {}, 97 configuration: {},
132 }); 98 });
133 const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({ 99 const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
134 - labelWidth: 80, 100 + labelWidth: 120,
135 schemas: modeApiForm, 101 schemas: modeApiForm,
136 actionColOptions: { 102 actionColOptions: {
137 span: 14, 103 span: 14,
@@ -143,16 +109,6 @@ @@ -143,16 +109,6 @@
143 submitFunc: customSubmitFunc, 109 submitFunc: customSubmitFunc,
144 }); 110 });
145 111
146 - const [  
147 - registerKeyAndValue,  
148 - { validate: validateKeyAndValue, resetFields: defineClearKeyAndValueFunc },  
149 - ] = useForm({  
150 - labelWidth: 80,  
151 - schemas: modeApiInseretKeyAndValueForm,  
152 - actionColOptions: {  
153 - span: 14,  
154 - },  
155 - });  
156 const setStepTwoFieldsValueFunc = (v, v1) => { 112 const setStepTwoFieldsValueFunc = (v, v1) => {
157 setFieldsValue(v); 113 setFieldsValue(v);
158 setFieldsValue({ 114 setFieldsValue({
@@ -163,14 +119,16 @@ @@ -163,14 +119,16 @@
163 username: v.credentials?.username, 119 username: v.credentials?.username,
164 type: v.credentials?.type, 120 type: v.credentials?.type,
165 }); 121 });
166 - fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39) }];  
167 - fileList2.value = [{ name: v.credentials?.certFileName.slice(39) }];  
168 - fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39) }]; 122 + fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39), uid: '4' }];
  123 + fileList2.value = [{ name: v.credentials?.certFileName.slice(39), uid: '5' }];
  124 + fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39), uid: '6' }];
  125 + caCertFileName.value = v.credentials?.caCertFileName;
  126 + certFileName.value = v.credentials?.certFileName;
  127 + privateKeyFileName.value = v.credentials?.privateKeyFileName;
169 }; 128 };
170 const customClearStepTwoValueFunc = async () => { 129 const customClearStepTwoValueFunc = async () => {
171 nextTick(() => { 130 nextTick(() => {
172 defineClearFunc(); 131 defineClearFunc();
173 - defineClearKeyAndValueFunc();  
174 fileList1.value = []; 132 fileList1.value = [];
175 fileList2.value = []; 133 fileList2.value = [];
176 fileList3.value = []; 134 fileList3.value = [];
@@ -190,24 +148,6 @@ @@ -190,24 +148,6 @@
190 } finally { 148 } finally {
191 } 149 }
192 } 150 }
193 - const tempGetKeyAndVal = async () => {  
194 - temp.value = await validateKeyAndValue();  
195 - };  
196 -  
197 - const getDefaultValue = async () => {  
198 - await tempGetKeyAndVal();  
199 - keyAndValueArrTemp.value.push(temp.value as never);  
200 - };  
201 -  
202 - const addKeyAndValueFunc = async () => {  
203 - keyAndValueArr.value.push(keyAndValueObj as never);  
204 - await tempGetKeyAndVal();  
205 - tempObj.value = temp.value;  
206 - keyAndValueArrTemp.value.push(tempObj.value as never);  
207 - };  
208 - const removeKeyAndValueFunc = () => {  
209 - keyAndValueArr.value.splice(0, 1);  
210 - };  
211 /** 151 /**
212 * 上传图片 152 * 上传图片
213 */ 153 */
@@ -244,9 +184,6 @@ @@ -244,9 +184,6 @@
244 184
245 const getSonValueFunc = async () => { 185 const getSonValueFunc = async () => {
246 sonValues.configuration = await validate(); 186 sonValues.configuration = await validate();
247 - if (keyAndValueArrTemp.value.length != 0) {  
248 - await getDefaultValue();  
249 - }  
250 credentialsV.credentials.type = sonValues.configuration.type; 187 credentialsV.credentials.type = sonValues.configuration.type;
251 if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) { 188 if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) {
252 credentialsV.credentials.username = sonValues.configuration.username; 189 credentialsV.credentials.username = sonValues.configuration.username;
@@ -259,25 +196,14 @@ @@ -259,25 +196,14 @@
259 credentialsV.credentials.privateKeyFileName = privateKeyFileName.value; 196 credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
260 credentialsV.credentials.password = sonValues.configuration.password; 197 credentialsV.credentials.password = sonValues.configuration.password;
261 } 198 }
262 - const kong = {};  
263 - let kongTemp = {};  
264 - keyAndValueArrTemp.value.map((item: any) => {  
265 - kong[item.key] = item.value;  
266 - });  
267 - kongTemp = JSON.parse(JSON.stringify(kong));  
268 - otherPropertiesValues.headers = kongTemp;  
269 - Object.assign(sonValues.configuration, otherPropertiesValues, credentialsV); 199 + Object.assign(sonValues.configuration, credentialsV);
270 return sonValues; 200 return sonValues;
271 }; 201 };
272 return { 202 return {
273 register, 203 register,
274 setStepTwoFieldsValueFunc, 204 setStepTwoFieldsValueFunc,
275 customClearStepTwoValueFunc, 205 customClearStepTwoValueFunc,
276 - addKeyAndValueFunc,  
277 - removeKeyAndValueFunc,  
278 getSonValueFunc, 206 getSonValueFunc,
279 - keyAndValueArr,  
280 - registerKeyAndValue,  
281 handleChange, 207 handleChange,
282 fileList1, 208 fileList1,
283 fileList2, 209 fileList2,
1 <template> 1 <template>
2 <div class="transfer-config-mode"> 2 <div class="transfer-config-mode">
3 - <BasicForm :showSubmitButton="false" @register="register">  
4 - <template #addValue="{ field }">  
5 - <span style="display: none">{{ field }}</span>  
6 - <div>  
7 - <div>  
8 - <div v-if="keyAndValueArr.length > 0">  
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 - <div>  
19 - <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>  
20 - <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>  
21 - </div>  
22 - </div>  
23 - </div>  
24 - </template>  
25 - </BasicForm> 3 + <BasicForm :showSubmitButton="false" @register="register" />
26 </div> 4 </div>
27 </template> 5 </template>
28 <script lang="ts"> 6 <script lang="ts">
29 import { defineComponent, ref, reactive, nextTick } from 'vue'; 7 import { defineComponent, ref, reactive, nextTick } from 'vue';
30 import { BasicForm, useForm } from '/@/components/Form'; 8 import { BasicForm, useForm } from '/@/components/Form';
31 - import { modeKafkaForm, modeKafkaInseretKeyAndValueForm } from '../config'; 9 + import { modeKafkaForm } from '../config';
32 import { Alert, Divider, Descriptions } from 'ant-design-vue'; 10 import { Alert, Divider, Descriptions } from 'ant-design-vue';
33 11
34 - interface IKeyAndValue {  
35 - key: string;  
36 - value: string;  
37 - }  
38 -  
39 export default defineComponent({ 12 export default defineComponent({
40 components: { 13 components: {
41 BasicForm, 14 BasicForm,
@@ -46,26 +19,15 @@ @@ -46,26 +19,15 @@
46 }, 19 },
47 emits: ['next', 'prev', 'register'], 20 emits: ['next', 'prev', 'register'],
48 setup(_, { emit }) { 21 setup(_, { emit }) {
49 - const temp = ref({});  
50 - let tempObj = ref({});  
51 const keyAndValueArr: any = ref<[]>([]); 22 const keyAndValueArr: any = ref<[]>([]);
52 - const keyAndValueArrTemp = ref<[]>([]);  
53 const vType = ref(''); 23 const vType = ref('');
54 - const keyAndValueObj = reactive<IKeyAndValue>({  
55 - key: '',  
56 - value: '',  
57 - });  
58 const sonValues = reactive({ 24 const sonValues = reactive({
59 configuration: {}, 25 configuration: {},
60 }); 26 });
61 - const otherPropertiesValues = reactive({  
62 - otherProperties: {},  
63 - });  
64 const clearName = ref(''); 27 const clearName = ref('');
65 -  
66 const [register, { validate, setFieldsValue, resetFields: defineClearFunc, clearValidate }] = 28 const [register, { validate, setFieldsValue, resetFields: defineClearFunc, clearValidate }] =
67 useForm({ 29 useForm({
68 - labelWidth: 80, 30 + labelWidth: 120,
69 schemas: modeKafkaForm, 31 schemas: modeKafkaForm,
70 actionColOptions: { 32 actionColOptions: {
71 span: 14, 33 span: 14,
@@ -76,17 +38,6 @@ @@ -76,17 +38,6 @@
76 resetFunc: customResetFunc, 38 resetFunc: customResetFunc,
77 }); 39 });
78 40
79 - const [  
80 - registerKeyAndValue,  
81 - { validate: validateKeyAndValue, resetFields: defineClearKeyAndValueFunc },  
82 - ] = useForm({  
83 - labelWidth: 80,  
84 - schemas: modeKafkaInseretKeyAndValueForm,  
85 - actionColOptions: {  
86 - span: 14,  
87 - },  
88 - });  
89 -  
90 const clearValidateFunc = async () => { 41 const clearValidateFunc = async () => {
91 await clearValidate(['name']); 42 await clearValidate(['name']);
92 }; 43 };
@@ -103,46 +54,15 @@ @@ -103,46 +54,15 @@
103 const customClearStepTwoValueFunc = async () => { 54 const customClearStepTwoValueFunc = async () => {
104 nextTick(() => { 55 nextTick(() => {
105 defineClearFunc(); 56 defineClearFunc();
106 - defineClearKeyAndValueFunc();  
107 }); 57 });
108 }; 58 };
109 async function customResetFunc() { 59 async function customResetFunc() {
110 emit('prev'); 60 emit('prev');
111 } 61 }
112 -  
113 - const tempGetKeyAndVal = async () => {  
114 - temp.value = await validateKeyAndValue();  
115 - };  
116 -  
117 - const getDefaultValue = async () => {  
118 - await tempGetKeyAndVal();  
119 - keyAndValueArrTemp.value.push(temp.value as never);  
120 - };  
121 -  
122 - const addKeyAndValueFunc = async () => {  
123 - keyAndValueArr.value.push(keyAndValueObj as never);  
124 - await tempGetKeyAndVal();  
125 - tempObj.value = temp.value;  
126 - keyAndValueArrTemp.value.push(tempObj.value as never);  
127 - };  
128 - const removeKeyAndValueFunc = () => {  
129 - keyAndValueArr.value.splice(0, 1);  
130 - };  
131 -  
132 const getSonValueFunc = async () => { 62 const getSonValueFunc = async () => {
133 try { 63 try {
134 sonValues.configuration = await validate(); 64 sonValues.configuration = await validate();
135 - if (keyAndValueArrTemp.value.length != 0) {  
136 - await getDefaultValue();  
137 - }  
138 - const kong = {};  
139 - let kongTemp = {};  
140 - keyAndValueArrTemp.value.map((item: any) => {  
141 - kong[item.key] = item.value;  
142 - });  
143 - kongTemp = JSON.parse(JSON.stringify(kong));  
144 - otherPropertiesValues.otherProperties = kongTemp;  
145 - Object.assign(sonValues.configuration, otherPropertiesValues); 65 + Object.assign(sonValues.configuration);
146 return sonValues; 66 return sonValues;
147 } catch (e) { 67 } catch (e) {
148 return e; 68 return e;
@@ -155,9 +75,6 @@ @@ -155,9 +75,6 @@
155 register, 75 register,
156 setStepTwoFieldsValueFunc, 76 setStepTwoFieldsValueFunc,
157 customClearStepTwoValueFunc, 77 customClearStepTwoValueFunc,
158 - addKeyAndValueFunc,  
159 - registerKeyAndValue,  
160 - removeKeyAndValueFunc,  
161 customResetFunc, 78 customResetFunc,
162 }; 79 };
163 }, 80 },
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 <a-upload-dragger 6 <a-upload-dragger
7 v-model:fileList="fileList1" 7 v-model:fileList="fileList1"
8 name="file" 8 name="file"
  9 + :key="1"
9 :multiple="false" 10 :multiple="false"
10 @change="handleChange('T', $event)" 11 @change="handleChange('T', $event)"
11 :before-upload="() => false" 12 :before-upload="() => false"
@@ -27,6 +28,7 @@ @@ -27,6 +28,7 @@
27 <a-upload-dragger 28 <a-upload-dragger
28 v-model:fileList="fileList2" 29 v-model:fileList="fileList2"
29 name="file" 30 name="file"
  31 + :key="2"
30 :multiple="false" 32 :multiple="false"
31 @change="handleChange('F', $event)" 33 @change="handleChange('F', $event)"
32 :before-upload="() => false" 34 :before-upload="() => false"
@@ -48,6 +50,7 @@ @@ -48,6 +50,7 @@
48 <a-upload-dragger 50 <a-upload-dragger
49 v-model:fileList="fileList3" 51 v-model:fileList="fileList3"
50 name="file" 52 name="file"
  53 + :key="3"
51 :multiple="false" 54 :multiple="false"
52 @change="handleChange('C', $event)" 55 @change="handleChange('C', $event)"
53 :before-upload="() => false" 56 :before-upload="() => false"
@@ -103,7 +106,7 @@ @@ -103,7 +106,7 @@
103 configuration: {}, 106 configuration: {},
104 }); 107 });
105 const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({ 108 const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
106 - labelWidth: 80, 109 + labelWidth: 120,
107 schemas: modeMqttForm, 110 schemas: modeMqttForm,
108 actionColOptions: { 111 actionColOptions: {
109 span: 14, 112 span: 14,
@@ -158,9 +161,27 @@ @@ -158,9 +161,27 @@
158 username: v.credentials?.username, 161 username: v.credentials?.username,
159 type: v.credentials?.type, 162 type: v.credentials?.type,
160 }); 163 });
161 - fileList1.value = [{ name: v.credentials?.caCertFileName.slice(39) }];  
162 - fileList2.value = [{ name: v.credentials?.certFileName.slice(39) }];  
163 - fileList3.value = [{ name: v.credentials?.privateKeyFileName.slice(39) }]; 164 + fileList1.value = [
  165 + {
  166 + name: v.credentials?.caCertFileName.slice(39),
  167 + uid: '1',
  168 + },
  169 + ];
  170 + fileList2.value = [
  171 + {
  172 + name: v.credentials?.certFileName.slice(39),
  173 + uid: '2',
  174 + },
  175 + ];
  176 + fileList3.value = [
  177 + {
  178 + name: v.credentials?.privateKeyFileName.slice(39),
  179 + uid: '3',
  180 + },
  181 + ];
  182 + caCertFileName.value = v.credentials?.caCertFileName;
  183 + certFileName.value = v.credentials?.certFileName;
  184 + privateKeyFileName.value = v.credentials?.privateKeyFileName;
164 }; 185 };
165 const customClearStepTwoValueFunc = async () => { 186 const customClearStepTwoValueFunc = async () => {
166 nextTick(() => { 187 nextTick(() => {
1 <template> 1 <template>
2 <div class="transfer-config-mode"> 2 <div class="transfer-config-mode">
3 - <BasicForm :showSubmitButton="false" @register="register">  
4 - <template #addKeyAndValue="{ field }">  
5 - <span style="display: none">{{ field }}</span>  
6 - <div>  
7 - <div>  
8 - <template v-for="(item, index) in keyAndValueArr" :key="index">  
9 - <span style="display: none">{{ item + index }}</span>  
10 - <BasicForm  
11 - :showResetButton="false"  
12 - :showSubmitButton="false"  
13 - @register="registerKeyAndValue"  
14 - />  
15 - </template>  
16 - <div>  
17 - <a-button type="primary" class="mr-4" @click="addKeyAndValueFunc">添加</a-button>  
18 - <a-button color="error" @click="removeKeyAndValueFunc">删除</a-button>  
19 - </div>  
20 - </div>  
21 - </div>  
22 - </template>  
23 - </BasicForm> 3 + <BasicForm :showSubmitButton="false" @register="register" />
24 </div> 4 </div>
25 </template> 5 </template>
26 <script lang="ts"> 6 <script lang="ts">
27 - import { defineComponent, ref, reactive, nextTick } from 'vue'; 7 + import { defineComponent, reactive, nextTick } from 'vue';
28 import { BasicForm, useForm } from '/@/components/Form'; 8 import { BasicForm, useForm } from '/@/components/Form';
29 - import { modeRabbitMqForm, modeKafkaInseretKeyAndValueForm } from '../config'; 9 + import { modeRabbitMqForm } from '../config';
30 10
31 - interface IKeyAndValue {  
32 - key: string;  
33 - value: string;  
34 - }  
35 export default defineComponent({ 11 export default defineComponent({
36 components: { 12 components: {
37 BasicForm, 13 BasicForm,
38 }, 14 },
39 emits: ['next', 'prev', 'register'], 15 emits: ['next', 'prev', 'register'],
40 setup(_, { emit }) { 16 setup(_, { emit }) {
41 - const temp = ref({});  
42 - let tempObj = ref({});  
43 - const otherPropertiesValues = reactive({  
44 - clientProperties: {},  
45 - });  
46 -  
47 - const keyAndValueArrTemp = ref<[]>([]);  
48 - const keyAndValueObj = reactive<IKeyAndValue>({  
49 - key: '',  
50 - value: '',  
51 - });  
52 - const keyAndValueArr = ref<[]>([]);  
53 const sonValues = reactive({ 17 const sonValues = reactive({
54 configuration: {}, 18 configuration: {},
55 }); 19 });
56 20
57 const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({ 21 const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
58 - labelWidth: 80, 22 + labelWidth: 120,
59 schemas: modeRabbitMqForm, 23 schemas: modeRabbitMqForm,
60 actionColOptions: { 24 actionColOptions: {
61 span: 14, 25 span: 14,
62 }, 26 },
63 resetButtonOptions: { 27 resetButtonOptions: {
64 text: '上一步', 28 text: '上一步',
65 - type: 'primary',  
66 }, 29 },
67 30
68 resetFunc: customResetFunc, 31 resetFunc: customResetFunc,
69 submitFunc: customSubmitFunc, 32 submitFunc: customSubmitFunc,
70 }); 33 });
71 34
72 - const [registerKeyAndValue, { validate: validateKeyAndValue }] = useForm({  
73 - labelWidth: 80,  
74 - schemas: modeKafkaInseretKeyAndValueForm,  
75 - actionColOptions: {  
76 - span: 14,  
77 - },  
78 - });  
79 -  
80 const setStepTwoFieldsValueFunc = (v, v1) => { 35 const setStepTwoFieldsValueFunc = (v, v1) => {
81 setFieldsValue(v); 36 setFieldsValue(v);
82 setFieldsValue({ 37 setFieldsValue({
@@ -99,37 +54,10 @@ @@ -99,37 +54,10 @@
99 } finally { 54 } finally {
100 } 55 }
101 } 56 }
102 - const tempGetKeyAndVal = async () => {  
103 - temp.value = await validateKeyAndValue();  
104 - };  
105 -  
106 - const getDefaultValue = async () => {  
107 - await tempGetKeyAndVal();  
108 - keyAndValueArrTemp.value.push(temp.value as never);  
109 - };  
110 57
111 - const addKeyAndValueFunc = async () => {  
112 - keyAndValueArr.value.push(keyAndValueObj as never);  
113 - await tempGetKeyAndVal();  
114 - tempObj.value = temp.value;  
115 - keyAndValueArrTemp.value.push(tempObj.value as never);  
116 - };  
117 - const removeKeyAndValueFunc = () => {  
118 - keyAndValueArr.value.splice(0, 1);  
119 - };  
120 const getSonValueFunc = async () => { 58 const getSonValueFunc = async () => {
121 sonValues.configuration = await validate(); 59 sonValues.configuration = await validate();
122 - if (keyAndValueArrTemp.value.length != 0) {  
123 - await getDefaultValue();  
124 - }  
125 - const kong = {};  
126 - let kongTemp = {};  
127 - keyAndValueArrTemp.value.map((item: any) => {  
128 - kong[item.key] = item.value;  
129 - });  
130 - kongTemp = JSON.parse(JSON.stringify(kong));  
131 - otherPropertiesValues.clientProperties = kongTemp;  
132 - Object.assign(sonValues.configuration, otherPropertiesValues); 60 + Object.assign(sonValues.configuration);
133 return sonValues; 61 return sonValues;
134 }; 62 };
135 63
@@ -138,10 +66,6 @@ @@ -138,10 +66,6 @@
138 register, 66 register,
139 setStepTwoFieldsValueFunc, 67 setStepTwoFieldsValueFunc,
140 customClearStepTwoValueFunc, 68 customClearStepTwoValueFunc,
141 - keyAndValueArr,  
142 - registerKeyAndValue,  
143 - addKeyAndValueFunc,  
144 - removeKeyAndValueFunc,  
145 }; 69 };
146 }, 70 },
147 }); 71 });