Bladeren bron

refactor(文件上传): 重构文件上传逻辑并统一组件样式

将文件上传逻辑从工具函数迁移至组件内部方法,实现上传逻辑的封装复用
为uni-file-picker组件添加统一高度样式350rpx
移除不再使用的uploadFile工具函数导入
huoyi 3 maanden geleden
bovenliggende
commit
c2fcf1d13a
2 gewijzigde bestanden met toevoegingen van 76 en 25 verwijderingen
  1. 35 12
      src/pages/checklist/index.vue
  2. 41 13
      src/pages/problemRect/index.vue

+ 35 - 12
src/pages/checklist/index.vue

@@ -90,8 +90,8 @@
90 90
                                 <view class="upload-section" v-if="!allItemsQualified">
91 91
                                     <text class="upload-title">上传不合格图片</text>
92 92
                                     <uni-file-picker v-model="formData.baseAttachmentList" limit="8" title="最多上传8张"
93
-                                        :image-styles="imageStyles" fileMediatype="image" mode="grid" @select="onSelect"
94
-                                        :disabled="formDisabled" />
93
+                                        style="height: 350rpx;" :image-styles="imageStyles" fileMediatype="image"
94
+                                        mode="grid" @select="onSelect" :disabled="formDisabled" :readonly="formDisabled"/>
95 95
                                 </view>
96 96
                             </view>
97 97
                         </h-collapse-item>
@@ -142,7 +142,7 @@ import TextSwitch from "@/components/text-switch/text-switch.vue"
142 142
 import { checkedLevelEnums } from "@/utils/enums.js"
143 143
 import UnqualifiedPersonnel from "./components/unqualified.vue"
144 144
 import { treeSelectByType } from "@/api/system/common"
145
-import { buildTeamOptions, uploadFile, buildDepartmentOptions, buildBrigadeOptions } from '@/utils/common'
145
+import { buildTeamOptions, buildDepartmentOptions, buildBrigadeOptions } from '@/utils/common'
146 146
 import useDictMixin from '@/utils/dict'
147 147
 import { getDeptRoleUser } from "@/api/check/checklist.js"
148 148
 import { addDraftInspection, submitInspection, getInspectionListById } from '@/api/check/checkReward.js'
@@ -261,7 +261,7 @@ export default {
261 261
                         },
262 262
                         {
263 263
                             validateFunction: (rule, value, data, callback) => {
264
-                                console.log(value,"value")
264
+                                console.log(value, "value")
265 265
                                 if (!value) {
266 266
                                     // 检查是否选择了完整的检查地点(终端、区域、通道)
267 267
                                     callback('请选择完整的检查地点');
@@ -485,7 +485,7 @@ export default {
485 485
             let newText = text.split('/')
486 486
             this.$set(this.formData, 'checkedBrigadeName', newText[newText.length - 1].trim());
487 487
             this.$set(this.formData, 'checkedDeptId', value);
488
-            
488
+
489 489
             this.$set(this.formData, 'checkedDeptName', newText[newText.length - 1].trim());
490 490
             this.$set(this.formData, 'checkedDepartmentId', value);
491 491
             this.$set(this.formData, 'checkedDepartmentName', newText[newText.length - 1].trim());
@@ -582,16 +582,39 @@ export default {
582 582
         },
583 583
         // 选择文件后手动上传
584 584
         async onSelect(event) {
585
-            const file = await uploadFile(event);
586
-            console.log(file, "file", this.formData)
587
-
588
-            this.formData.baseAttachmentList.push({
585
+            const files = await this.uploadFile(event);
586
+            console.log(files, "file", this.formData)
587
+            let fileArr = files.map(file => ({
589 588
                 url: file.url,
590 589
                 name: file.newFileName,
591 590
                 attachmentName: file.newFileName,
592 591
                 attachmentUrl: file.url,
593 592
                 extname: file.newFileName.split('.').pop()
594
-            });
593
+            }))
594
+            // 直接替换而不是追加,因为限制只能上传1张
595
+            this.formData.baseAttachmentList = [
596
+                ...this.formData.baseAttachmentList,
597
+                ...fileArr
598
+            ];
599
+
600
+        },
601
+        // 封装上传
602
+        uploadFile(event) {
603
+            return Promise.all(event.tempFilePaths.map(filePath => {
604
+                return new Promise((resolve, reject) => {
605
+                    uni.uploadFile({
606
+                        url: `${config.baseUrl}/common/upload`,
607
+                        filePath: filePath,
608
+                        name: 'file',
609
+                        header: { Authorization: 'Bearer ' + getToken() },
610
+                        formData: {
611
+                            // 可添加其他参数
612
+                        },
613
+                        success: (res) => resolve(JSON.parse(res.data)),
614
+                        fail: reject
615
+                    });
616
+                });
617
+            }));
595 618
         },
596 619
         // 填充表单数据
597 620
         fillFormData(inspectionDetail) {
@@ -731,7 +754,7 @@ export default {
731 754
             const payload = this.formateData();
732 755
 
733 756
 
734
-            addDraftInspection({ ...payload, id: this.taskId })
757
+            addDraftInspection({ ...payload, ...(this.formData.checkRecordStatus == 'DRAFT' ? { id: this.taskId } : {}) })
735 758
                 .then(() => {
736 759
                     uni.showToast({ title: '草稿保存成功', icon: 'success' });
737 760
                     console.log('草稿保存成功:',);
@@ -751,7 +774,7 @@ export default {
751 774
         // 提交表单
752 775
         submitForm() {
753 776
             this.$refs.form.validate().then(res => {
754
-               
777
+
755 778
                 // 检查所有不合格项是否都填写了相关人员
756 779
                 let hasError = false;
757 780
                 let errorMessage = '';

+ 41 - 13
src/pages/problemRect/index.vue

@@ -58,7 +58,7 @@
58 58
                                     <view class="problem-header">
59 59
                                         <text class="problem-title">{{
60 60
                                             `${problem.categoryNameOne}/${problem.categoryNameTwo}/${problem.projectName}`
61
-                                        }}</text>
61
+                                            }}</text>
62 62
                                     </view>
63 63
                                     <view class="problem-content">
64 64
                                         <view class="problem-person">
@@ -81,7 +81,7 @@
81 81
                                     </view>
82 82
                                 </view>
83 83
 
84
-                                <uni-file-picker v-if="formData.checkRecordBaseAttachmentList.length > 0"
84
+                                <uni-file-picker v-if="formData.checkRecordBaseAttachmentList.length > 0" style="height: 350rpx;"
85 85
                                     v-model="formData.checkRecordBaseAttachmentList" limit="8" title="最多上传8张"
86 86
                                     :image-styles="imageStyles" fileMediatype="image" mode="grid"
87 87
                                     @select="onCheckRecordBaseAttachmentListSelect" :disabled="true" :del-icon="false"
@@ -158,7 +158,7 @@
158 158
                             </uni-forms-item>
159 159
 
160 160
                             <view style="padding: 0 15px 15px 15px;">
161
-                                <uni-file-picker v-model="formData.baseAttachmentList" limit="8" title="最多上传8张整改照片"
161
+                                <uni-file-picker v-model="formData.baseAttachmentList" limit="8" title="最多上传8张整改照片" style="height: 350rpx;"
162 162
                                     :image-styles="imageStyles" fileMediatype="image" mode="grid"
163 163
                                     @select="onBaseAttachmentListelect" :disabled="formDisabled"
164 164
                                     :del-icon="!formDisabled" :readonly="formDisabled" />
@@ -199,7 +199,7 @@
199 199
 <script>
200 200
 import HomeContainer from "@/components/HomeContainer.vue";
201 201
 import { treeSelectByType } from "@/api/system/common"
202
-import { uploadFile } from '@/utils/common'
202
+
203 203
 import useDictMixin from '@/utils/dict'
204 204
 import RejectModal from './components/RejectModal.vue'
205 205
 import { addChecklistRecord } from '@/api/check/checklist.js'
@@ -521,7 +521,7 @@ export default {
521 521
                     name: img.attachmentName || img.name,
522 522
                     extname: img.extname || (img.name ? img.name.split('.').pop() : '')
523 523
                 })) : [],
524
-                baseAttachmentList: (data.baseAttachmentList && data.baseAttachmentList?.length > 0) ? data.baseAttachmentList.map(img => ({
524
+                checkRecordBaseAttachmentList: (data.checkRecordBaseAttachmentList && data.checkRecordBaseAttachmentList?.length > 0) ? data.checkRecordBaseAttachmentList.map(img => ({
525 525
                     ...img,
526 526
                     url: img.attachmentUrl || img.url,
527 527
                     name: img.attachmentName || img.name,
@@ -546,29 +546,57 @@ export default {
546 546
 
547 547
         // 选择待整改问题图片
548 548
         async onBaseAttachmentListelect(event) {
549
-            const file = await uploadFile(event);
550
-            this.formData.baseAttachmentList.push({
549
+            const files = await this.uploadFile(event);
550
+
551
+            let fileArr = files.map(file => ({
551 552
                 url: file.url,
552 553
                 name: file.newFileName,
553 554
                 attachmentName: file.newFileName,
554 555
                 attachmentUrl: file.url,
555 556
                 extname: file.newFileName.split('.').pop()
556
-            });
557
+            }))
558
+            // 直接替换而不是追加,因为限制只能上传1张
559
+            this.formData.baseAttachmentList = [
560
+                ...this.formData.baseAttachmentList,
561
+                ...fileArr
562
+            ];
557 563
         },
558 564
 
559 565
         // 选择不合格图片
560 566
         async onCheckRecordBaseAttachmentListSelect(event) {
561
-            const file = await uploadFile(event);
562
-            this.formData.checkRecordBaseAttachmentList.push({
567
+            const files = await this.uploadFile(event);
568
+
569
+            let fileArr = files.map(file => ({
563 570
                 url: file.url,
564 571
                 name: file.newFileName,
565 572
                 attachmentName: file.newFileName,
566 573
                 attachmentUrl: file.url,
567 574
                 extname: file.newFileName.split('.').pop()
568
-            });
575
+            }))
576
+            // 直接替换而不是追加,因为限制只能上传1张
577
+            this.formData.checkRecordBaseAttachmentList = [
578
+                ...this.formData.checkRecordBaseAttachmentList,
579
+                ...fileArr
580
+            ];
581
+        },
582
+        // 封装上传
583
+        uploadFile(event) {
584
+            return Promise.all(event.tempFilePaths.map(filePath => {
585
+                return new Promise((resolve, reject) => {
586
+                    uni.uploadFile({
587
+                        url: `${config.baseUrl}/common/upload`,
588
+                        filePath: filePath,
589
+                        name: 'file',
590
+                        header: { Authorization: 'Bearer ' + getToken() },
591
+                        formData: {
592
+                            // 可添加其他参数
593
+                        },
594
+                        success: (res) => resolve(JSON.parse(res.data)),
595
+                        fail: reject
596
+                    });
597
+                });
598
+            }));
569 599
         },
570
-
571
-
572 600
         formatDateTime(date) {
573 601
             const y = date.getFullYear();
574 602
             const m = String(date.getMonth() + 1).padStart(2, '0');