feat(文件上传): 添加上传组件功能及样式优化

- 新增上传图标资源文件
- 在utils中添加生成唯一标识符方法
- 重构GatePassInfo组件文件上传功能，支持图片和PDF格式
- 优化BasicsInfo和GatePassInfo组件滚动行为
- 添加上传文件大小和类型校验
- 完善文件列表展示和删除功能

src/pages/WorkOrderEdit/compoents/BasicsInfo.vue

@@ -319,7 +319,7 @@ const initTiandituMap = () => {
     padding: 20rpx;
     background-color: #fff;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
 }
 
 .mustBox::after {

src/pages/WorkOrderEdit/compoents/GatePassInfo.vue

@@ -59,16 +59,34 @@
             <view class="FormItem">
                 <view class="FormLableBox">附件上传</view>
                 <view class="FormValueBox">
-                    <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
-                        :maxCount="10"></up-upload>
+                    <up-upload width="100%" @afterRead="afterRead" multiple accept="image/*,application/pdf">
+                        <view class="UploadBox">
+                            <view class="UpIcon">
+                                <img src="@/static/icon/upload-icon.png" alt="">
+                            </view>
+                            <view class="UpTitle">点击上传</view>
+                            <view class="UpDesc">支持JPG,PNG,PDF格式上传，单个文件大小不超过10MB</view>
+                        </view>
+                    </up-upload>
+                </view>
+                <view class="UpFileListBox">
+                    <view v-for="item in fileList1" :key="item.url" class="UpFileItem">
+                        <view>
+                            <view class="UpFileName">{{ item.name }}</view>
+                            <view class="UpFileSize">{{ item.size }}</view>
+                        </view>
+
+                        <u-button text="删除" type="primary" size="small" @click="deletePic(item.fid)"></u-button>
+                    </view>
                 </view>
             </view>
         </view>
     </view>
 </template>
 <script setup>
+import { generateGuid } from '@/utils/index.js';
 import dayjs from "dayjs";
-import { ref, computed, onMounted, defineExpose } from "vue";
+import { ref, defineExpose } from "vue";
 
 const props = defineProps({
     allData: {
@@ -95,9 +113,7 @@ const CarArr = ref([
         type: '轿车',
         code: '京B123456',
     },
-]); // 随行车辆数组
-
-
+]);
 
 // 组件数据
 const formData = ref({
@@ -105,6 +121,46 @@ const formData = ref({
     CarList: [], // 随行车辆数组
 })
 
+const fileList1 = ref([]); // 上传的文件列表
+
+// 处理上传文件事件
+const afterRead = (e) => {
+    console.log('上传的文件：', e);
+    let fileInfo = e.file[0];
+    // 判断文件大小
+    if (fileInfo.size > 10 * 1024 * 1024) {
+        uni.showToast({
+            title: '文件大小不能超过10MB',
+            icon: 'none'
+        });
+        return;
+    }
+    // 判断文件类型
+    if (!fileInfo.name.match(/\.(jpg|png|pdf)$/i)) {
+        uni.showToast({
+            title: '请上传JPG,PNG,PDF格式的文件',
+            icon: 'none'
+        });
+        return;
+    }
+
+    let arr = [...fileList1.value];
+    arr.push({
+        fid: generateGuid(),
+        name: fileInfo.name,
+        size: (fileInfo.size / 1024 / 1024).toFixed(2) + 'MB',
+        url: fileInfo.url,
+    });
+    fileList1.value = arr;
+}
+
+// 删除上传的文件
+const deletePic = (fid) => {
+    console.log('删除文件：', fid);
+    let arr = [...fileList1.value];
+    arr = arr.filter(item => item.fid !== fid);
+    fileList1.value = arr;
+}
 
 // 组件暴露方法
 defineExpose({
@@ -113,6 +169,8 @@ defineExpose({
     }
 })
 
+
+
 // 处理出入证有效日期选择器确认事件
 const HandleValidTimeConfirm = (e) => {
     const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
@@ -183,6 +241,53 @@ const HandleDeleteCar = (carId) => {
 
 </script>
 <style lang="scss" scoped>
+.UploadBox {
+    width: 100%;
+    height: 300rpx;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20rpx;
+    padding: 20rpx;
+    border: 1rpx dashed #e4e7ed;
+    border-radius: 10rpx;
+
+    .UpTitle {
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #333;
+    }
+
+    .UpDesc {
+        font-size: 24rpx;
+        color: #666;
+    }
+}
+
+.UpFileListBox {
+    margin-top: 20rpx;
+    height: auto;
+    .UpFileItem {
+        border: 1rpx solid #e4e7ed;
+        padding: 20rpx;
+        border-radius: 10rpx;
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+        .UpFileName {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #333;
+        }
+        .UpFileSize {
+            font-size: 24rpx;
+            color: #666;
+        }
+    }
+}
+
 .FlexBox {
     display: flex;
     align-items: center;
@@ -200,7 +305,7 @@ const HandleDeleteCar = (carId) => {
     padding: 20rpx;
     background-color: #fff;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
 }
 
 .mustBox::after {

src/utils/index.js

@@ -1,3 +1,15 @@
 export * from './storage'
 export * from './validate'
 export * from './format'
+
+
+// 生成指定长度的唯一标识符
+export function generateGuid(length = 8) {
+    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+    let guid = '';
+    for (let i = 0; i < length; i++) {
+        let randomIndex = Math.floor(Math.random() * arr.length);
+        guid += arr[randomIndex];
+    }
+    return guid;
+}