Showing
8 changed files
with
417 additions
and
80 deletions
... | ... | @@ -3,14 +3,14 @@ |
3 | 3 | <a-input |
4 | 4 | placeholder="请输入参数key" |
5 | 5 | v-model:value="param.label" |
6 | - style="width: 30%; margin-bottom: 5px" | |
7 | - @input="emitChange" | |
6 | + style="width: 38%; margin-bottom: 5px" | |
7 | + @change="emitChange" | |
8 | 8 | /> |
9 | 9 | <a-input |
10 | 10 | placeholder="请输入参数value" |
11 | 11 | v-model:value="param.value" |
12 | - style="width: 30%; margin: 0 0 5px 5px" | |
13 | - @input="emitChange" | |
12 | + style="width: 38%; margin: 0 0 5px 60px" | |
13 | + @change="emitChange" | |
14 | 14 | /> |
15 | 15 | <MinusCircleOutlined |
16 | 16 | v-if="dynamicInput.params.length > min" |
... | ... | @@ -20,7 +20,7 @@ |
20 | 20 | /> |
21 | 21 | </div> |
22 | 22 | <div> |
23 | - <a-button type="dashed" style="width: 60%" @click="add"> | |
23 | + <a-button type="dashed" style="width: 38%" @click="add"> | |
24 | 24 | <PlusOutlined /> |
25 | 25 | 新增 |
26 | 26 | </a-button> |
... | ... | @@ -62,6 +62,7 @@ |
62 | 62 | } |
63 | 63 | emitChange(); |
64 | 64 | }; |
65 | + | |
65 | 66 | //新增Input |
66 | 67 | const add = () => { |
67 | 68 | dynamicInput.params.push({ |
... | ... | @@ -87,12 +88,6 @@ |
87 | 88 | dynamicInput.params.push({ label: key, value: jsonObj[key] }); |
88 | 89 | }); |
89 | 90 | } |
90 | - // if (props.value && props.value.indexOf('{') == 0) { | |
91 | - // let jsonObj = JSON.parse(props.value); | |
92 | - // Object.keys(jsonObj).forEach((key) => { | |
93 | - // dynamicInput.params.push({ label: key, value: jsonObj[key] }); | |
94 | - // }); | |
95 | - // } | |
96 | 91 | } |
97 | 92 | /** |
98 | 93 | * 数值改变 |
... | ... | @@ -101,13 +96,11 @@ |
101 | 96 | let obj = {}; |
102 | 97 | if (dynamicInput.params.length > 0) { |
103 | 98 | dynamicInput.params.forEach((item) => { |
104 | - obj[item['label']] = item['value']; | |
99 | + obj[item.label] = item.value; | |
105 | 100 | }); |
106 | 101 | } |
107 | 102 | emit('change', isEmpty(obj) ? '' : obj); |
108 | 103 | emit('update:value', isEmpty(obj) ? '' : obj); |
109 | - // emit('change', isEmpty(obj) ? '' : JSON.stringify(obj)); | |
110 | - // emit('update:value', isEmpty(obj) ? '' : JSON.stringify(obj)); | |
111 | 104 | } |
112 | 105 | |
113 | 106 | return { | ... | ... |
... | ... | @@ -80,6 +80,8 @@ |
80 | 80 | const getTitle = ref(''); |
81 | 81 | const current = ref(0); |
82 | 82 | const editPostId = ref(''); |
83 | + let isEdit = ref(true); | |
84 | + let noEditObj: any = reactive({}); | |
83 | 85 | const editType = reactive({ |
84 | 86 | type: '', |
85 | 87 | configuration: {}, |
... | ... | @@ -109,6 +111,20 @@ |
109 | 111 | editNextType.remark = data.record.remark; |
110 | 112 | proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editNextType); |
111 | 113 | } |
114 | + if (!unref(isUpdate)) { | |
115 | + isEdit.value = false; | |
116 | + } else { | |
117 | + isEdit.value = true; | |
118 | + } | |
119 | + if (isEdit.value) { | |
120 | + noEditObj = { | |
121 | + name: data.record?.name, | |
122 | + remark: data.record?.remark, | |
123 | + type: data.record?.type, | |
124 | + id: data.record.id, | |
125 | + configuration: data.record?.configuration, | |
126 | + }; | |
127 | + } | |
112 | 128 | switch (unref(isUpdate)) { |
113 | 129 | case 'view': |
114 | 130 | commonViewOrEditFunc(); |
... | ... | @@ -143,6 +159,7 @@ |
143 | 159 | current.value++; |
144 | 160 | getModeSelectVal.value = args; |
145 | 161 | if (unref(isUpdate)) { |
162 | + isEdit.value = false; | |
146 | 163 | try { |
147 | 164 | if (editNextType.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') { |
148 | 165 | editTypeFunc(editNextType.configuration); |
... | ... | @@ -163,6 +180,16 @@ |
163 | 180 | }; |
164 | 181 | const handlePrev = () => { |
165 | 182 | current.value--; |
183 | + if (unref(isUpdate)) { | |
184 | + isEdit.value = true; | |
185 | + noEditObj = { | |
186 | + name: editNextType?.name, | |
187 | + remark: editNextType?.remark, | |
188 | + type: editNextType?.type, | |
189 | + id: editPostId?.value, | |
190 | + configuration: editNextType?.configuration?.configuration, | |
191 | + }; | |
192 | + } | |
166 | 193 | }; |
167 | 194 | |
168 | 195 | const commonFunc = () => { |
... | ... | @@ -220,6 +247,7 @@ |
220 | 247 | id, |
221 | 248 | additionalInfoV |
222 | 249 | ); |
250 | + | |
223 | 251 | if (!unref(isUpdate)) { |
224 | 252 | delete allPostForm.id; |
225 | 253 | } |
... | ... | @@ -229,6 +257,9 @@ |
229 | 257 | setModalProps({ confirmLoading: true }); |
230 | 258 | if (!unref(isUpdate)) { |
231 | 259 | await addOrEditFunc(); |
260 | + if (allPostForm.name == undefined) { | |
261 | + return createMessage.error('请填写名称'); | |
262 | + } | |
232 | 263 | await postAddConvertApi(allPostForm); |
233 | 264 | createMessage.success('数据流转新增成功'); |
234 | 265 | emit('success'); |
... | ... | @@ -236,10 +267,7 @@ |
236 | 267 | closeModal(); |
237 | 268 | } else { |
238 | 269 | await addOrEditFunc(); |
239 | - if (allPostForm.configuration == undefined || allPostForm.configuration == null) { | |
240 | - return createMessage.error('数据流转下一步配置项必填'); | |
241 | - } | |
242 | - await postAddConvertApi(allPostForm); | |
270 | + await postAddConvertApi(isEdit.value ? noEditObj : allPostForm); | |
243 | 271 | createMessage.success('数据流转编辑成功'); |
244 | 272 | emit('success'); |
245 | 273 | defineClearFunc(); | ... | ... |
1 | 1 | import { FormSchema } from '/@/components/Form'; |
2 | 2 | import { findDictItemByCode } from '/@/api/system/dict'; |
3 | 3 | import { ref } from 'vue'; |
4 | -import { useMessage } from '/@/hooks/web/useMessage'; | |
4 | +// import { useMessage } from '/@/hooks/web/useMessage'; | |
5 | 5 | import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi'; |
6 | -const { createMessage } = useMessage(); | |
6 | +// const { createMessage } = useMessage(); | |
7 | 7 | |
8 | 8 | const typeValue = ref(''); |
9 | 9 | |
... | ... | @@ -218,7 +218,7 @@ export const modeKafkaForm: FormSchema[] = [ |
218 | 218 | }, |
219 | 219 | { |
220 | 220 | field: 'otherProperties', |
221 | - label: '其他属性', | |
221 | + label: '其他属性(不可重复)', | |
222 | 222 | colProps: { span: 24 }, |
223 | 223 | component: 'JAddInput', |
224 | 224 | }, |
... | ... | @@ -421,6 +421,14 @@ export const modeMqttForm: FormSchema[] = [ |
421 | 421 | ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), |
422 | 422 | }, |
423 | 423 | { |
424 | + field: '11', | |
425 | + label: '', | |
426 | + colProps: { span: 24 }, | |
427 | + component: 'Input', | |
428 | + slot: 'showImg1', | |
429 | + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), | |
430 | + }, | |
431 | + { | |
424 | 432 | field: '5', |
425 | 433 | label: '', |
426 | 434 | colProps: { span: 24 }, |
... | ... | @@ -429,6 +437,14 @@ export const modeMqttForm: FormSchema[] = [ |
429 | 437 | ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), |
430 | 438 | }, |
431 | 439 | { |
440 | + field: '1111', | |
441 | + label: '', | |
442 | + colProps: { span: 24 }, | |
443 | + component: 'Input', | |
444 | + slot: 'showImg2', | |
445 | + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), | |
446 | + }, | |
447 | + { | |
432 | 448 | field: '6', |
433 | 449 | label: '', |
434 | 450 | colProps: { span: 24 }, |
... | ... | @@ -437,6 +453,14 @@ export const modeMqttForm: FormSchema[] = [ |
437 | 453 | ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), |
438 | 454 | }, |
439 | 455 | { |
456 | + field: '111111', | |
457 | + label: '', | |
458 | + colProps: { span: 24 }, | |
459 | + component: 'Input', | |
460 | + slot: 'showImg3', | |
461 | + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), | |
462 | + }, | |
463 | + { | |
440 | 464 | field: 'password', |
441 | 465 | label: 'Password', |
442 | 466 | colProps: { span: 12 }, |
... | ... | @@ -494,7 +518,7 @@ export const modeRabbitMqForm: FormSchema[] = [ |
494 | 518 | component: 'Input', |
495 | 519 | componentProps: { |
496 | 520 | maxLength: 255, |
497 | - placeholder: '请输入Exchange name pattern', | |
521 | + placeholder: '请输入pattern', | |
498 | 522 | }, |
499 | 523 | }, |
500 | 524 | { |
... | ... | @@ -504,7 +528,7 @@ export const modeRabbitMqForm: FormSchema[] = [ |
504 | 528 | component: 'Input', |
505 | 529 | componentProps: { |
506 | 530 | maxLength: 255, |
507 | - placeholder: '请输入Routing key pattern', | |
531 | + placeholder: '请输入pattern', | |
508 | 532 | }, |
509 | 533 | }, |
510 | 534 | { |
... | ... | @@ -612,7 +636,7 @@ export const modeRabbitMqForm: FormSchema[] = [ |
612 | 636 | }, |
613 | 637 | { |
614 | 638 | field: 'clientProperties', |
615 | - label: '客户端属性', | |
639 | + label: '客户端属性(不可重复)', | |
616 | 640 | colProps: { span: 24 }, |
617 | 641 | component: 'JAddInput', |
618 | 642 | }, |
... | ... | @@ -648,7 +672,7 @@ export const modeApiForm: FormSchema[] = [ |
648 | 672 | if (value == '') { |
649 | 673 | reject('请输入名称'); |
650 | 674 | } else { |
651 | - if (values.name != undefined) { | |
675 | + if (values.name) { | |
652 | 676 | isExistDataManagerNameApi({ |
653 | 677 | name: value, |
654 | 678 | type: |
... | ... | @@ -657,7 +681,7 @@ export const modeApiForm: FormSchema[] = [ |
657 | 681 | : typeValue.value, |
658 | 682 | }).then((data) => { |
659 | 683 | if (data == true) { |
660 | - createMessage.error('名称已存在'); | |
684 | + // createMessage.error('名称已存在'); | |
661 | 685 | resolve(); |
662 | 686 | } else { |
663 | 687 | resolve(); |
... | ... | @@ -828,7 +852,7 @@ export const modeApiForm: FormSchema[] = [ |
828 | 852 | }, |
829 | 853 | { |
830 | 854 | field: 'headers', |
831 | - label: 'Headers', | |
855 | + label: 'Headers(不可重复)', | |
832 | 856 | colProps: { span: 24 }, |
833 | 857 | defaultValue: { 'Content-Type': 'application/json' }, |
834 | 858 | component: 'JAddInput', |
... | ... | @@ -915,6 +939,14 @@ export const modeApiForm: FormSchema[] = [ |
915 | 939 | ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), |
916 | 940 | }, |
917 | 941 | { |
942 | + field: '11', | |
943 | + label: '', | |
944 | + colProps: { span: 24 }, | |
945 | + component: 'Input', | |
946 | + slot: 'showImg1', | |
947 | + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), | |
948 | + }, | |
949 | + { | |
918 | 950 | field: '1', |
919 | 951 | label: '', |
920 | 952 | colProps: { span: 24 }, |
... | ... | @@ -923,6 +955,14 @@ export const modeApiForm: FormSchema[] = [ |
923 | 955 | ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), |
924 | 956 | }, |
925 | 957 | { |
958 | + field: '1111', | |
959 | + label: '', | |
960 | + colProps: { span: 24 }, | |
961 | + component: 'Input', | |
962 | + slot: 'showImg2', | |
963 | + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), | |
964 | + }, | |
965 | + { | |
926 | 966 | field: '1', |
927 | 967 | label: '', |
928 | 968 | colProps: { span: 24 }, |
... | ... | @@ -931,6 +971,14 @@ export const modeApiForm: FormSchema[] = [ |
931 | 971 | ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), |
932 | 972 | }, |
933 | 973 | { |
974 | + field: '111111', | |
975 | + label: '', | |
976 | + colProps: { span: 24 }, | |
977 | + component: 'Input', | |
978 | + slot: 'showImg3', | |
979 | + ifShow: ({ values }) => isPem(Reflect.get(values, 'type')), | |
980 | + }, | |
981 | + { | |
934 | 982 | field: 'password', |
935 | 983 | label: 'Password', |
936 | 984 | colProps: { span: 12 }, | ... | ... |
... | ... | @@ -21,6 +21,15 @@ |
21 | 21 | </p> |
22 | 22 | </a-upload-dragger> |
23 | 23 | </template> |
24 | + <template #showImg1="{ field }"> | |
25 | + <span style="display: none">{{ field }}</span> | |
26 | + <img | |
27 | + v-if="showImg1" | |
28 | + :src="showImg1Pic" | |
29 | + alt="avatar" | |
30 | + style="width: 6.25rem; height: 6.25rem" | |
31 | + /> | |
32 | + </template> | |
24 | 33 | <template #uploadAdd2="{ field }"> |
25 | 34 | <span style="display: none">{{ field }}</span> |
26 | 35 | <a-upload-dragger |
... | ... | @@ -41,6 +50,15 @@ |
41 | 50 | </p> |
42 | 51 | </a-upload-dragger> |
43 | 52 | </template> |
53 | + <template #showImg2="{ field }"> | |
54 | + <span style="display: none">{{ field }}</span> | |
55 | + <img | |
56 | + v-if="showImg2" | |
57 | + :src="showImg2Pic" | |
58 | + alt="avatar" | |
59 | + style="width: 6.25rem; height: 6.25rem" | |
60 | + /> | |
61 | + </template> | |
44 | 62 | <template #uploadAdd3="{ field }"> |
45 | 63 | <span style="display: none">{{ field }}</span> |
46 | 64 | <a-upload-dragger |
... | ... | @@ -61,6 +79,15 @@ |
61 | 79 | </p> |
62 | 80 | </a-upload-dragger> |
63 | 81 | </template> |
82 | + <template #showImg3="{ field }"> | |
83 | + <span style="display: none">{{ field }}</span> | |
84 | + <img | |
85 | + v-if="showImg3" | |
86 | + :src="showImg3Pic" | |
87 | + alt="avatar" | |
88 | + style="width: 6.25rem; height: 6.25rem" | |
89 | + /> | |
90 | + </template> | |
64 | 91 | </BasicForm> |
65 | 92 | </div> |
66 | 93 | </template> |
... | ... | @@ -81,6 +108,12 @@ |
81 | 108 | }, |
82 | 109 | emits: ['next', 'prev', 'register'], |
83 | 110 | setup(_, { emit }) { |
111 | + const showImg1 = ref(false); | |
112 | + const showImg1Pic = ref(''); | |
113 | + const showImg2 = ref(false); | |
114 | + const showImg2Pic = ref(''); | |
115 | + const showImg3 = ref(false); | |
116 | + const showImg3Pic = ref(''); | |
84 | 117 | const { createMessage } = useMessage(); |
85 | 118 | let caCertFileName = ref(''); |
86 | 119 | let privateKeyFileName = ref(''); |
... | ... | @@ -125,6 +158,42 @@ |
125 | 158 | caCertFileName.value = v.credentials?.caCertFileName; |
126 | 159 | certFileName.value = v.credentials?.certFileName; |
127 | 160 | privateKeyFileName.value = v.credentials?.privateKeyFileName; |
161 | + const iscaCertFileNamePic = v.credentials?.caCertFileName.split('.').pop(); | |
162 | + const iscertFileNamePic = v.credentials?.certFileName.split('.').pop(); | |
163 | + const isprivateKeyFileNamePic = v.credentials?.privateKeyFileName.split('.').pop(); | |
164 | + if ( | |
165 | + iscaCertFileNamePic == 'jpg' || | |
166 | + iscaCertFileNamePic == 'png' || | |
167 | + iscaCertFileNamePic == 'jpeg' || | |
168 | + iscaCertFileNamePic == 'gif' | |
169 | + ) { | |
170 | + showImg1.value = true; | |
171 | + showImg1Pic.value = v.credentials?.caCertFileName; | |
172 | + } else { | |
173 | + showImg1.value = false; | |
174 | + } | |
175 | + if ( | |
176 | + iscertFileNamePic == 'jpg' || | |
177 | + iscertFileNamePic == 'png' || | |
178 | + iscertFileNamePic == 'jpeg' || | |
179 | + iscertFileNamePic == 'gif' | |
180 | + ) { | |
181 | + showImg2.value = true; | |
182 | + showImg2Pic.value = v.credentials?.certFileName; | |
183 | + } else { | |
184 | + showImg2.value = false; | |
185 | + } | |
186 | + if ( | |
187 | + isprivateKeyFileNamePic == 'jpg' || | |
188 | + isprivateKeyFileNamePic == 'png' || | |
189 | + isprivateKeyFileNamePic == 'jpeg' || | |
190 | + isprivateKeyFileNamePic == 'gif' | |
191 | + ) { | |
192 | + showImg3.value = true; | |
193 | + showImg3Pic.value = v.credentials?.privateKeyFileName; | |
194 | + } else { | |
195 | + showImg3.value = false; | |
196 | + } | |
128 | 197 | }; |
129 | 198 | const customClearStepTwoValueFunc = async () => { |
130 | 199 | nextTick(() => { |
... | ... | @@ -135,6 +204,12 @@ |
135 | 204 | caCertFileName.value = ''; |
136 | 205 | privateKeyFileName.value = ''; |
137 | 206 | certFileName.value = ''; |
207 | + showImg1.value = false; | |
208 | + showImg1Pic.value = ''; | |
209 | + showImg2.value = false; | |
210 | + showImg2Pic.value = ''; | |
211 | + showImg3.value = false; | |
212 | + showImg3Pic.value = ''; | |
138 | 213 | }); |
139 | 214 | }; |
140 | 215 | async function customResetFunc() { |
... | ... | @@ -153,11 +228,19 @@ |
153 | 228 | */ |
154 | 229 | const handleChange = async (e, { file }) => { |
155 | 230 | if (file.status === 'removed') { |
156 | - e == 'T' | |
157 | - ? (fileList1.value = []) | |
158 | - : e == 'F' | |
159 | - ? (fileList2.value = []) | |
160 | - : (fileList3.value = []); | |
231 | + if (e == 'T') { | |
232 | + fileList1.value = []; | |
233 | + showImg1.value = false; | |
234 | + showImg1Pic.value = ''; | |
235 | + } else if (e == 'F') { | |
236 | + fileList2.value = []; | |
237 | + showImg2.value = false; | |
238 | + showImg2Pic.value = ''; | |
239 | + } else { | |
240 | + fileList3.value = []; | |
241 | + showImg3.value = false; | |
242 | + showImg3Pic.value = ''; | |
243 | + } | |
161 | 244 | } else { |
162 | 245 | const isLt5M = file.size / 1024 / 1024 < 5; |
163 | 246 | if (!isLt5M) { |
... | ... | @@ -172,11 +255,49 @@ |
172 | 255 | formData.append('file', file); |
173 | 256 | const response = await uploadApi(formData); |
174 | 257 | if (response.fileStaticUri) { |
175 | - e == 'T' | |
176 | - ? (caCertFileName.value = response.fileStaticUri) | |
177 | - : e == 'F' | |
178 | - ? (certFileName.value = response.fileStaticUri) | |
179 | - : (privateKeyFileName.value = response.fileStaticUri); | |
258 | + if (e == 'T') { | |
259 | + caCertFileName.value = response.fileStaticUri; | |
260 | + const iscaCertFileNamePic = caCertFileName.value.split('.').pop(); | |
261 | + if ( | |
262 | + iscaCertFileNamePic == 'jpg' || | |
263 | + iscaCertFileNamePic == 'png' || | |
264 | + iscaCertFileNamePic == 'jpeg' || | |
265 | + iscaCertFileNamePic == 'gif' | |
266 | + ) { | |
267 | + showImg1.value = true; | |
268 | + showImg1Pic.value = response.fileStaticUri; | |
269 | + } else { | |
270 | + showImg1.value = false; | |
271 | + } | |
272 | + } else if (e == 'F') { | |
273 | + certFileName.value = response.fileStaticUri; | |
274 | + const iscertFileNamePic = certFileName.value.split('.').pop(); | |
275 | + if ( | |
276 | + iscertFileNamePic == 'jpg' || | |
277 | + iscertFileNamePic == 'png' || | |
278 | + iscertFileNamePic == 'jpeg' || | |
279 | + iscertFileNamePic == 'gif' | |
280 | + ) { | |
281 | + showImg2.value = true; | |
282 | + showImg2Pic.value = response.fileStaticUri; | |
283 | + } else { | |
284 | + showImg2.value = false; | |
285 | + } | |
286 | + } else { | |
287 | + privateKeyFileName.value = response.fileStaticUri; | |
288 | + const isprivateKeyFileNamePic = privateKeyFileName.value.split('.').pop(); | |
289 | + if ( | |
290 | + isprivateKeyFileNamePic == 'jpg' || | |
291 | + isprivateKeyFileNamePic == 'png' || | |
292 | + isprivateKeyFileNamePic == 'jpeg' || | |
293 | + isprivateKeyFileNamePic == 'gif' | |
294 | + ) { | |
295 | + showImg3.value = true; | |
296 | + showImg3Pic.value = response.fileStaticUri; | |
297 | + } else { | |
298 | + showImg3.value = false; | |
299 | + } | |
300 | + } | |
180 | 301 | } |
181 | 302 | } |
182 | 303 | } |
... | ... | @@ -211,6 +332,12 @@ |
211 | 332 | caCertFileName, |
212 | 333 | privateKeyFileName, |
213 | 334 | certFileName, |
335 | + showImg1, | |
336 | + showImg1Pic, | |
337 | + showImg2, | |
338 | + showImg2Pic, | |
339 | + showImg3, | |
340 | + showImg3Pic, | |
214 | 341 | }; |
215 | 342 | }, |
216 | 343 | }); | ... | ... |
... | ... | @@ -22,6 +22,15 @@ |
22 | 22 | </p> |
23 | 23 | </a-upload-dragger> |
24 | 24 | </template> |
25 | + <template #showImg1="{ field }"> | |
26 | + <span style="display: none">{{ field }}</span> | |
27 | + <img | |
28 | + v-if="showImg1" | |
29 | + :src="showImg1Pic" | |
30 | + alt="avatar" | |
31 | + style="width: 6.25rem; height: 6.25rem" | |
32 | + /> | |
33 | + </template> | |
25 | 34 | <div style="margin-top: 50px"></div> |
26 | 35 | <template #uploadAdd2="{ field }"> |
27 | 36 | <span style="display: none">{{ field }}</span> |
... | ... | @@ -44,6 +53,15 @@ |
44 | 53 | </p> |
45 | 54 | </a-upload-dragger> |
46 | 55 | </template> |
56 | + <template #showImg2="{ field }"> | |
57 | + <span style="display: none">{{ field }}</span> | |
58 | + <img | |
59 | + v-if="showImg2" | |
60 | + :src="showImg2Pic" | |
61 | + alt="avatar" | |
62 | + style="width: 6.25rem; height: 6.25rem" | |
63 | + /> | |
64 | + </template> | |
47 | 65 | <div style="margin-top: 50px"></div> |
48 | 66 | <template #uploadAdd3="{ field }"> |
49 | 67 | <span style="display: none">{{ field }}</span> |
... | ... | @@ -66,6 +84,15 @@ |
66 | 84 | </p> |
67 | 85 | </a-upload-dragger> |
68 | 86 | </template> |
87 | + <template #showImg3="{ field }"> | |
88 | + <span style="display: none">{{ field }}</span> | |
89 | + <img | |
90 | + v-if="showImg3" | |
91 | + :src="showImg3Pic" | |
92 | + alt="avatar" | |
93 | + style="width: 6.25rem; height: 6.25rem" | |
94 | + /> | |
95 | + </template> | |
69 | 96 | </BasicForm> |
70 | 97 | </div> |
71 | 98 | </template> |
... | ... | @@ -90,6 +117,12 @@ |
90 | 117 | }, |
91 | 118 | emits: ['next', 'prev', 'register'], |
92 | 119 | setup(_, { emit }) { |
120 | + const showImg1 = ref(false); | |
121 | + const showImg1Pic = ref(''); | |
122 | + const showImg2 = ref(false); | |
123 | + const showImg2Pic = ref(''); | |
124 | + const showImg3 = ref(false); | |
125 | + const showImg3Pic = ref(''); | |
93 | 126 | const { createMessage } = useMessage(); |
94 | 127 | let caCertFileName = ref(''); |
95 | 128 | let privateKeyFileName = ref(''); |
... | ... | @@ -123,11 +156,19 @@ |
123 | 156 | */ |
124 | 157 | const handleChange = async (e, { file }) => { |
125 | 158 | if (file.status === 'removed') { |
126 | - e == 'T' | |
127 | - ? (fileList1.value = []) | |
128 | - : e == 'F' | |
129 | - ? (fileList2.value = []) | |
130 | - : (fileList3.value = []); | |
159 | + if (e == 'T') { | |
160 | + fileList1.value = []; | |
161 | + showImg1.value = false; | |
162 | + showImg1Pic.value = ''; | |
163 | + } else if (e == 'F') { | |
164 | + fileList2.value = []; | |
165 | + showImg2.value = false; | |
166 | + showImg2Pic.value = ''; | |
167 | + } else { | |
168 | + fileList3.value = []; | |
169 | + showImg3.value = false; | |
170 | + showImg3Pic.value = ''; | |
171 | + } | |
131 | 172 | } else { |
132 | 173 | const isLt5M = file.size / 1024 / 1024 < 5; |
133 | 174 | if (!isLt5M) { |
... | ... | @@ -142,11 +183,49 @@ |
142 | 183 | formData.append('file', file); |
143 | 184 | const response = await uploadApi(formData); |
144 | 185 | if (response.fileStaticUri) { |
145 | - e == 'T' | |
146 | - ? (caCertFileName.value = response.fileStaticUri) | |
147 | - : e == 'F' | |
148 | - ? (certFileName.value = response.fileStaticUri) | |
149 | - : (privateKeyFileName.value = response.fileStaticUri); | |
186 | + if (e == 'T') { | |
187 | + caCertFileName.value = response.fileStaticUri; | |
188 | + const iscaCertFileNamePic = caCertFileName.value.split('.').pop(); | |
189 | + if ( | |
190 | + iscaCertFileNamePic == 'jpg' || | |
191 | + iscaCertFileNamePic == 'png' || | |
192 | + iscaCertFileNamePic == 'jpeg' || | |
193 | + iscaCertFileNamePic == 'gif' | |
194 | + ) { | |
195 | + showImg1.value = true; | |
196 | + showImg1Pic.value = response.fileStaticUri; | |
197 | + } else { | |
198 | + showImg1.value = false; | |
199 | + } | |
200 | + } else if (e == 'F') { | |
201 | + certFileName.value = response.fileStaticUri; | |
202 | + const iscertFileNamePic = certFileName.value.split('.').pop(); | |
203 | + if ( | |
204 | + iscertFileNamePic == 'jpg' || | |
205 | + iscertFileNamePic == 'png' || | |
206 | + iscertFileNamePic == 'jpeg' || | |
207 | + iscertFileNamePic == 'gif' | |
208 | + ) { | |
209 | + showImg2.value = true; | |
210 | + showImg2Pic.value = response.fileStaticUri; | |
211 | + } else { | |
212 | + showImg2.value = false; | |
213 | + } | |
214 | + } else { | |
215 | + privateKeyFileName.value = response.fileStaticUri; | |
216 | + const isprivateKeyFileNamePic = privateKeyFileName.value.split('.').pop(); | |
217 | + if ( | |
218 | + isprivateKeyFileNamePic == 'jpg' || | |
219 | + isprivateKeyFileNamePic == 'png' || | |
220 | + isprivateKeyFileNamePic == 'jpeg' || | |
221 | + isprivateKeyFileNamePic == 'gif' | |
222 | + ) { | |
223 | + showImg3.value = true; | |
224 | + showImg3Pic.value = response.fileStaticUri; | |
225 | + } else { | |
226 | + showImg3.value = false; | |
227 | + } | |
228 | + } | |
150 | 229 | } |
151 | 230 | } |
152 | 231 | } |
... | ... | @@ -182,6 +261,42 @@ |
182 | 261 | caCertFileName.value = v.credentials?.caCertFileName; |
183 | 262 | certFileName.value = v.credentials?.certFileName; |
184 | 263 | privateKeyFileName.value = v.credentials?.privateKeyFileName; |
264 | + const iscaCertFileNamePic = v.credentials?.caCertFileName.split('.').pop(); | |
265 | + const iscertFileNamePic = v.credentials?.certFileName.split('.').pop(); | |
266 | + const isprivateKeyFileNamePic = v.credentials?.privateKeyFileName.split('.').pop(); | |
267 | + if ( | |
268 | + iscaCertFileNamePic == 'jpg' || | |
269 | + iscaCertFileNamePic == 'png' || | |
270 | + iscaCertFileNamePic == 'jpeg' || | |
271 | + iscaCertFileNamePic == 'gif' | |
272 | + ) { | |
273 | + showImg1.value = true; | |
274 | + showImg1Pic.value = v.credentials?.caCertFileName; | |
275 | + } else { | |
276 | + showImg1.value = false; | |
277 | + } | |
278 | + if ( | |
279 | + iscertFileNamePic == 'jpg' || | |
280 | + iscertFileNamePic == 'png' || | |
281 | + iscertFileNamePic == 'jpeg' || | |
282 | + iscertFileNamePic == 'gif' | |
283 | + ) { | |
284 | + showImg2.value = true; | |
285 | + showImg2Pic.value = v.credentials?.certFileName; | |
286 | + } else { | |
287 | + showImg2.value = false; | |
288 | + } | |
289 | + if ( | |
290 | + isprivateKeyFileNamePic == 'jpg' || | |
291 | + isprivateKeyFileNamePic == 'png' || | |
292 | + isprivateKeyFileNamePic == 'jpeg' || | |
293 | + isprivateKeyFileNamePic == 'gif' | |
294 | + ) { | |
295 | + showImg3.value = true; | |
296 | + showImg3Pic.value = v.credentials?.privateKeyFileName; | |
297 | + } else { | |
298 | + showImg3.value = false; | |
299 | + } | |
185 | 300 | }; |
186 | 301 | const customClearStepTwoValueFunc = async () => { |
187 | 302 | nextTick(() => { |
... | ... | @@ -192,6 +307,12 @@ |
192 | 307 | caCertFileName.value = ''; |
193 | 308 | privateKeyFileName.value = ''; |
194 | 309 | certFileName.value = ''; |
310 | + showImg1.value = false; | |
311 | + showImg1Pic.value = ''; | |
312 | + showImg2.value = false; | |
313 | + showImg2Pic.value = ''; | |
314 | + showImg3.value = false; | |
315 | + showImg3Pic.value = ''; | |
195 | 316 | }); |
196 | 317 | }; |
197 | 318 | async function customResetFunc() { |
... | ... | @@ -233,6 +354,12 @@ |
233 | 354 | caCertFileName, |
234 | 355 | privateKeyFileName, |
235 | 356 | certFileName, |
357 | + showImg1, | |
358 | + showImg1Pic, | |
359 | + showImg2, | |
360 | + showImg2Pic, | |
361 | + showImg3, | |
362 | + showImg3Pic, | |
236 | 363 | }; |
237 | 364 | }, |
238 | 365 | }); | ... | ... |
... | ... | @@ -16,7 +16,7 @@ |
16 | 16 | title="您确定要批量删除数据" |
17 | 17 | ok-text="确定" |
18 | 18 | cancel-text="取消" |
19 | - @confirm="handleDeleteOrBatchDelete(null)" | |
19 | + @confirm="handleConfirm" | |
20 | 20 | > |
21 | 21 | <a-button |
22 | 22 | type="primary" |
... | ... | @@ -29,19 +29,21 @@ |
29 | 29 | </a-button> |
30 | 30 | </Popconfirm> |
31 | 31 | </Authority> |
32 | - <a-button | |
32 | + <!-- <a-button | |
33 | 33 | :disabled="disabledStatus2" |
34 | 34 | @click="handleMutiuteDisable" |
35 | 35 | :type="disabledStatus2 ? 'default' : 'primary'" |
36 | 36 | > |
37 | 37 | <span :style="{ color: disabledStatus2 ? 'grey' : 'white' }">批量禁用</span> |
38 | - </a-button> | |
38 | + </a-button> --> | |
39 | 39 | <a-button |
40 | - :disabled="disabledStatus3" | |
40 | + :disabled="hasBatchDelete || disabledStatus3" | |
41 | 41 | @click="handleMutiuteEnable" |
42 | - :type="disabledStatus3 ? 'default' : 'primary'" | |
42 | + :type="hasBatchDelete || disabledStatus3 ? 'default' : 'primary'" | |
43 | 43 | > |
44 | - <span :style="{ color: disabledStatus3 ? 'grey' : 'white' }">批量启用</span> | |
44 | + <span :style="{ color: hasBatchDelete || disabledStatus3 ? 'grey' : 'white' }" | |
45 | + >批量启用</span | |
46 | + > | |
45 | 47 | </a-button> |
46 | 48 | </template> |
47 | 49 | <template #action="{ record }"> |
... | ... | @@ -127,9 +129,10 @@ |
127 | 129 | const disabledStatus3 = ref(true); |
128 | 130 | const loading = ref(true); |
129 | 131 | const { createMessage } = useMessage(); |
130 | - let selectedRowKeys: any = ref([]); | |
131 | 132 | let getSelectRowsArr: any = ref([]); |
132 | 133 | let isJudgeSelectRowsArr: any = ref([]); |
134 | + let hasDisableStatus = []; | |
135 | + | |
133 | 136 | const handleSuccess = () => { |
134 | 137 | reload(); |
135 | 138 | resetSelectedRowKeys(); |
... | ... | @@ -163,6 +166,11 @@ |
163 | 166 | const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = |
164 | 167 | useBatchDelete(deleteConvertApi, handleSuccess, setProps); |
165 | 168 | selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => { |
169 | + if (record.length == 0) { | |
170 | + disabledStatus1.value = true; | |
171 | + disabledStatus2.value = true; | |
172 | + disabledStatus3.value = true; | |
173 | + } | |
166 | 174 | //status为1的选择框禁用 |
167 | 175 | if (record.status === 1) { |
168 | 176 | return { disabled: true }; |
... | ... | @@ -194,39 +202,40 @@ |
194 | 202 | }, 10); |
195 | 203 | }; |
196 | 204 | const useSelectionChange = () => { |
197 | - selectedRowKeys.value = getSelectRowKeys(); | |
198 | 205 | isJudgeSelectRowsArr.value = getSelectRows(); |
199 | - const hasDisableStatus = isJudgeSelectRowsArr.value.map((m) => { | |
206 | + hasDisableStatus = isJudgeSelectRowsArr.value.map((m) => { | |
200 | 207 | return m.status; |
201 | 208 | }); |
209 | + console.log(hasDisableStatus); | |
202 | 210 | if (hasDisableStatus.length == 0) { |
203 | 211 | disabledStatus1.value = true; |
204 | 212 | disabledStatus2.value = true; |
205 | 213 | disabledStatus3.value = true; |
206 | - } | |
207 | - hasDisableStatus.every((e) => { | |
208 | - if (e == 1) { | |
209 | - disabledStatus3.value = true; | |
210 | - disabledStatus2.value = false; | |
211 | - } else if (e == 0) { | |
212 | - disabledStatus2.value = true; | |
213 | - disabledStatus3.value = false; | |
214 | - } | |
215 | - }); | |
216 | - let i1 = hasDisableStatus.indexOf(0); | |
217 | - let i2 = hasDisableStatus.indexOf(1); | |
218 | - if (i1 !== -1 && i2 !== -1) { | |
219 | - disabledStatus2.value = true; | |
220 | - disabledStatus3.value = true; | |
221 | - } | |
222 | - if (isJudgeSelectRowsArr.value.length == 0) { | |
223 | - disabledStatus1.value = true; | |
224 | 214 | } else { |
225 | - disabledStatus1.value = false; | |
226 | - } | |
227 | - if (hasDisableStatus.includes(1)) { | |
228 | - disabledStatus1.value = true; | |
215 | + hasDisableStatus.every((e) => { | |
216 | + if (e == 1) { | |
217 | + disabledStatus3.value = true; | |
218 | + disabledStatus2.value = false; | |
219 | + } else if (e == 0) { | |
220 | + disabledStatus2.value = true; | |
221 | + disabledStatus3.value = false; | |
222 | + } | |
223 | + }); | |
229 | 224 | } |
225 | + // let i1 = hasDisableStatus.indexOf(0); | |
226 | + // let i2 = hasDisableStatus.indexOf(1); | |
227 | + // if (i1 !== -1 && i2 !== -1) { | |
228 | + // disabledStatus2.value = true; | |
229 | + // disabledStatus3.value = true; | |
230 | + // } | |
231 | + // if (isJudgeSelectRowsArr.value.length == 0) { | |
232 | + // disabledStatus1.value = true; | |
233 | + // } else { | |
234 | + // disabledStatus1.value = false; | |
235 | + // } | |
236 | + // if (hasDisableStatus.includes(1)) { | |
237 | + // disabledStatus1.value = true; | |
238 | + // } | |
230 | 239 | }; |
231 | 240 | const handleMutiuteDisable = async () => { |
232 | 241 | enableObj.convertIds.length = 0; |
... | ... | @@ -322,6 +331,10 @@ |
322 | 331 | }); |
323 | 332 | }); |
324 | 333 | } |
334 | + const handleConfirm = () => { | |
335 | + handleDeleteOrBatchDelete(null); | |
336 | + disabledStatus3.value = true; | |
337 | + }; | |
325 | 338 | |
326 | 339 | return { |
327 | 340 | disabledStatus1, |
... | ... | @@ -342,6 +355,7 @@ |
342 | 355 | statusChange, |
343 | 356 | disabledSwitch, |
344 | 357 | handleView, |
358 | + handleConfirm, | |
345 | 359 | }; |
346 | 360 | }, |
347 | 361 | }); | ... | ... |