From d2f590cfed0e874daa758d5e5548d17de8b3c772 Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期四, 19 六月 2025 17:58:50 +0800
Subject: [PATCH] 添加巡检任务上传功能及优化文件组件

---
 src/api/inspectionManagement/index.js             |   10 +
 src/views/inspectionUpload/index.vue              |    2 
 src/views/inspectionUpload/components/formDia.vue |  248 +++++++++++-------------
 src/components/FileUpload/index.vue               |  305 +++++++++++++++---------------
 4 files changed, 279 insertions(+), 286 deletions(-)

diff --git a/src/api/inspectionManagement/index.js b/src/api/inspectionManagement/index.js
index 0fb8caf..16adbd9 100644
--- a/src/api/inspectionManagement/index.js
+++ b/src/api/inspectionManagement/index.js
@@ -24,4 +24,14 @@
         method: 'delete',
         data: query
     })
+}
+
+// /inspectionTask/addOrEditInspectionTask
+// 宸℃涓婁紶
+export function uploadInspectionTask(query) {
+    return request({
+        url: '/inspectionTask/addOrEditInspectionTask',
+        method: 'post',
+        data: query
+    })
 }
\ No newline at end of file
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index fd5271e..6801d90 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -44,7 +44,10 @@
         v-for="(file, index) in fileList"
       >
         <el-link :href="`${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ file.bucketFilename }} </span>
+          <!-- 鍙�8浣� -->
+          <span class="el-icon-document">
+            {{ file.bucketFilename.substring(0, 18) }}
+          </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
           <el-link
@@ -68,89 +71,67 @@
 </template>
 
 <script setup>
+import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
 import { getToken } from "@/utils/auth";
 import Sortable from "sortablejs";
+import { ElMessage } from "element-plus";
 import axios from "axios";
+
+// Props 瀹氫箟
 const props = defineProps({
   modelValue: [String, Object, Array],
-  // 涓婁紶鎺ュ彛鍦板潃
-  action: {
-    type: String,
-    default: "/common/minioUploads",
+  action: { type: String, default: "/common/minioUploads" },
+  data: { type: Object },
+  limit: { type: Number, default: 5 },
+  fileSize: { type: Number, default: 5 },
+  fileType: { 
+    type: Array, 
+    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"] 
   },
-  // 涓婁紶鎼哄甫鐨勫弬鏁�
-  data: {
-    type: Object,
-  },
-  // 鏁伴噺闄愬埗
-  limit: {
-    type: Number,
-    default: 5,
-  },
-  // 澶у皬闄愬埗(MB)
-  fileSize: {
-    type: Number,
-    default: 5,
-  },
-  // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
-  fileType: {
-    type: Array,
-    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"],
-  },
-  // 鏄惁鏄剧ず鎻愮ず
-  isShowTip: {
-    type: Boolean,
-    default: true,
-  },
-  // 绂佺敤缁勪欢锛堜粎鏌ョ湅鏂囦欢锛�
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  // 鎷栧姩鎺掑簭
-  drag: {
-    type: Boolean,
-    default: true,
-  },
+  isShowTip: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  drag: { type: Boolean, default: true },
+  statusType: { type: Number, default: "" }, // 鐢ㄤ簬鍖哄垎涓嶅悓鐘舵�佺殑涓婁紶
 });
 
+// 缁勪欢瀹炰緥鍜屼簨浠�
 const { proxy } = getCurrentInstance();
-const emit = defineEmits();
+const emit = defineEmits(['update:modelValue']);
+
+// 鍝嶅簲寮忔暟鎹�
 const number = ref(0);
 const uploadList = ref([]);
-const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action); // 涓婁紶鏂囦欢鏈嶅姟鍣ㄥ湴鍧�
-const headers = ref({ Authorization: "Bearer " + getToken() });
 const fileList = ref([]);
-const showTip = computed(
-  () => props.isShowTip && (props.fileType || props.fileSize)
-);
-const init = () =>{
+
+// 璁$畻灞炴��
+const uploadFileUrl = computed(() => import.meta.env.VITE_APP_BASE_API + props.action);
+const headers = computed(() => ({ Authorization: "Bearer " + getToken() }));
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
+// 鍒濆鍖栧拰缂栬緫鍒濆鍖栨柟娉�
+const init = () => {
   fileList.value = [];
   uploadList.value = [];
   number.value = 0;
-}
+};
+
 const editInit = (val) => {
   fileList.value = [];
-  val.storageBlobDTO.forEach(element => {
-    console.log("缂栬緫鍒濆鍖�", element);
+  val.storageBlobDTO.forEach((element) => {
     fileList.value.push(element);
     uploadedSuccessfully();
   });
-  // uploadList.value.push
 };
-defineExpose({
-  init,
-  editInit
-});
+
+// 鏆撮湶鏂规硶
+defineExpose({ init, editInit });
+
+// 鐩戝惉 modelValue 鍙樺寲
 watch(
   () => props.modelValue,
   (val) => {
     if (val) {
       let temp = 1;
-      // 棣栧厛灏嗗�艰浆涓烘暟缁�
       const list = Array.isArray(val) ? val : props.modelValue.split(",");
-      // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
       fileList.value = list.map((item) => {
         if (typeof item === "string") {
           item = { name: item, url: item };
@@ -160,77 +141,109 @@
       });
     } else {
       fileList.value = [];
-      return [];
     }
   },
   { deep: true, immediate: true }
 );
 
+// 鏂囦欢涓婁紶澶勭悊
 const UploadImage = (param) => {
   const formData = new FormData();
   formData.append("files", param.file);
-  axios
-    .post(uploadFileUrl.value, formData, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-        ...headers.value,
-      },
-      onUploadProgress: (progressEvent) => {
-        // 杩涘害鏉℃洿鏂�
-        const percent = Math.round(
-          (progressEvent.loaded * 100) / progressEvent.total
-        );
-        param.onProgress({ percent });
-      },
-    })
-    .then((response) => {
-      if (response.data.code === 200) {
-        console.log("涓婁紶鎴愬姛", response.data);
-        handleUploadSuccess(response.data, param.file);
-        // 鏇存柊鐖剁粍浠�
-        emit("update:modelValue", fileList.value);
+  formData.append("type", props.statusType);
+  axios.post(uploadFileUrl.value, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+      ...headers.value,
+    },
+    onUploadProgress: (progressEvent) => {
+      const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+      param.onProgress({ percent });
+    },
+  })
+  .then((response) => {
+    if (response.data.code === 200) {
+      handleUploadSuccess(response.data, param.file);
+      ElMessage.success("涓婁紶鎴愬姛");
+      emit("update:modelValue", fileList.value);
+    } else {
+      param.onError(new Error(response.data.msg));
+      ElMessage.error(response.data.msg);
+      handleUploadError();
+    }
+  })
+  .catch((error) => {
+    param.onError(error);
+  });
+};
+// 鑾峰彇鏂囦欢Base64锛堝彲閫夊姛鑳斤紝鏆傛椂淇濈暀锛�
+const getBase64ByUrl = (url) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, true);
+    xhr.responseType = "blob";
+    xhr.onload = function () {
+      if (this.status === 200) {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.readAsDataURL(this.response);
       } else {
-        param.onError(new Error(response.data.msg));
+        reject(new Error("Failed to fetch image"));
       }
-    })
-    .catch((error) => {
-      param.onError(error);
-    });
+    };
+    xhr.onerror = () => reject(new Error("Network error"));
+    xhr.send();
+  });
+};
+
+// 绉诲姩绔笅杞藉浘鐗�
+const downloadImageForMobile = (imgSrc, name) => {
+  const image = new Image();
+  image.setAttribute("crossOrigin", "anonymous");
+  image.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(image, 0, 0, image.width, image.height);
+    const url = canvas.toDataURL("image/png");
+    const a = document.createElement("a");
+    a.download = name;
+    a.href = url;
+    a.click();
+  };
+  image.src = imgSrc;
 };
 
 // 涓嬭浇鏂囦欢
-function handleDownload(index) {
-  const url = fileList.value[index].downloadUrl;
+const handleDownload = (index) => {
+  const file = fileList.value[index];
+  const url = file.url;
   if (!url) {
     proxy.$modal.msgError("鏂囦欢閾炬帴涓嶅瓨鍦紝鏃犳硶涓嬭浇");
     return;
   }
-  // 璇诲彇棰勮鍥剧墖鐨勬暟鎹�
+  // 绉诲姩绔壒娈婂鐞�
+  if (window.navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
+    const fileName = file.bucketFilename || file.key;
+    downloadImageForMobile(url, fileName);
+    return;
+  }
+  // 妗岄潰绔笅杞�
   const link = document.createElement("a");
-  link.href = url; // 閾炬帴鍦板潃
-  link.download = fileList.value[index].bucketFilename; // 璁剧疆涓嬭浇鏂囦欢鍚�
+  link.href = url;
+  link.download = file.bucketFilename || file.key;
   link.click();
-}
-
-
-// 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
-function handleBeforeUpload(file) {
-  // 鏍℃鏂囦欢绫诲瀷
-  // if (props.fileType.length) {
-  //   const fileName = file.name.split('.')
-  //   const fileExt = fileName[fileName.length - 1]
-  //   const isTypeOk = props.fileType.indexOf(fileExt) >= 0
-  //   if (!isTypeOk) {
-  //     proxy.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭紝璇蜂笂浼�${props.fileType.join("/")}鏍煎紡鏂囦欢!`)
-  //     return false
-  //   }
-  // }
-  // 鏍℃鏂囦欢鍚嶆槸鍚﹀寘鍚壒娈婂瓧绗�
+};
+// 涓婁紶鍓嶆牎楠�
+const handleBeforeUpload = (file) => {
+  // 鏍¢獙鏂囦欢鍚嶇壒娈婂瓧绗�
   if (file.name.includes(",")) {
     proxy.$modal.msgError("鏂囦欢鍚嶄笉姝g‘锛屼笉鑳藉寘鍚嫳鏂囬�楀彿!");
     return false;
   }
-  // 鏍℃鏂囦欢澶у皬
+
+  // 鏍¢獙鏂囦欢澶у皬
   if (props.fileSize) {
     const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
@@ -238,29 +251,28 @@
       return false;
     }
   }
+
   proxy.$modal.loading("姝e湪涓婁紶鏂囦欢锛岃绋嶅��...");
   number.value++;
   return true;
-}
+};
 
-// 鏂囦欢涓暟瓒呭嚭
-function handleExceed() {
+// 鏂囦欢涓暟瓒呭嚭闄愬埗
+const handleExceed = () => {
   proxy.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`);
-}
+};
 
-// 涓婁紶澶辫触
-function handleUploadError(err) {
-  proxy.$modal.msgError("涓婁紶鏂囦欢澶辫触");
+// 涓婁紶澶辫触澶勭悊
+const handleUploadError = () => {
+  ElMessage.error("涓婁紶鏂囦欢澶辫触");
   proxy.$modal.closeLoading();
-}
+};
 
 // 涓婁紶鎴愬姛鍥炶皟
-function handleUploadSuccess(res, file) {
+const handleUploadSuccess = (res, file) => {
   if (res.code === 200) {
-    console.log("涓婁紶鎴愬姛", res);
-    uploadList.value.push(res.data[0])
+    uploadList.value.push(res.data[0]);
     uploadedSuccessfully();
-    // proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
   } else {
     number.value--;
     proxy.$modal.closeLoading();
@@ -268,16 +280,16 @@
     proxy.$refs.fileUpload.handleRemove(file);
     uploadedSuccessfully();
   }
-}
+};
 
 // 鍒犻櫎鏂囦欢
-function handleDelete(index) {
+const handleDelete = (index) => {
   fileList.value.splice(index, 1);
   emit("update:modelValue", listToString(fileList.value));
-}
+};
 
 // 涓婁紶缁撴潫澶勭悊
-function uploadedSuccessfully() {
+const uploadedSuccessfully = () => {
   if (number.value > 0 && uploadList.value.length === number.value) {
     fileList.value = fileList.value
       .filter((f) => f.url !== undefined)
@@ -287,44 +299,31 @@
     emit("update:modelValue");
     proxy.$modal.closeLoading();
   }
-}
+};
 
-// 鑾峰彇鏂囦欢鍚嶇О
-function getFileName(name) {
-  // 濡傛灉鏄痷rl閭d箞鍙栨渶鍚庣殑鍚嶅瓧 濡傛灉涓嶆槸鐩存帴杩斿洖
-  if (name.lastIndexOf("/") > -1) {
-    return name.slice(name.lastIndexOf("/") + 1);
-  } else {
-    return name;
-  }
-}
-
-// 瀵硅薄杞垚鎸囧畾瀛楃涓插垎闅�
-function listToString(list, separator) {
-  let strs = "";
-  separator = separator || ",";
-  for (let i in list) {
-    if (list[i].url) {
-      strs += list[i].url + separator;
-    }
-  }
-  return strs != "" ? strs.substr(0, strs.length - 1) : "";
-}
+const listToString = (list, separator = ",") => {
+  const strs = list
+    .filter(item => item.url)
+    .map(item => item.url)
+    .join(separator);
+  return strs;
+};
 
 // 鍒濆鍖栨嫋鎷芥帓搴�
 onMounted(() => {
   if (props.drag && !props.disabled) {
     nextTick(() => {
-      const element =
-        proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList;
-      Sortable.create(element, {
-        ghostClass: "file-upload-darg",
-        onEnd: (evt) => {
-          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0];
-          fileList.value.splice(evt.newIndex, 0, movedItem);
-          emit("update:modelValue", listToString(fileList.value));
-        },
-      });
+      const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList;
+      if (element) {
+        Sortable.create(element, {
+          ghostClass: "file-upload-darg",
+          onEnd: (evt) => {
+            const movedItem = fileList.value.splice(evt.oldIndex, 1)[0];
+            fileList.value.splice(evt.newIndex, 0, movedItem);
+            emit("update:modelValue", listToString(fileList.value));
+          },
+        });
+      }
     });
   }
 });
diff --git a/src/views/inspectionUpload/components/formDia.vue b/src/views/inspectionUpload/components/formDia.vue
index 8889657..c2da61c 100644
--- a/src/views/inspectionUpload/components/formDia.vue
+++ b/src/views/inspectionUpload/components/formDia.vue
@@ -1,57 +1,52 @@
 <template>
   <div>
-    <el-dialog title="涓婁紶"
-               v-model="dialogVisitable" width="400px" @close="cancel">
-      <el-form :model="form" ref="formRef" label-width="120px">
-        <el-form-item label="鐢熶骇鍓�" prop="fileList0">
-          <el-upload
-              v-model:file-list="fileList0"
-              ref="fileUpload0"
-              :action="uploadFileUrl"
-              multiple
-              name="files"
-              :data="{type: 0}"
-              style="width: 100%"
-              :headers="headers"
-              :before-upload="handleBeforeUpload"
-              :on-success="handleUploadSuccess"
+    <el-dialog
+      title="涓婁紶"
+      v-model="dialogVisitable"
+      width="400px"
+      @close="cancel"
+    >
+      <div class="upload-container">
+        <div class="form-container">
+          <div class="title">鐢熶骇鍓�</div>
+          <fileUpload
+            :statusType="0"
+            ref="beforeProductionRef"
+            :fileSize="1024"
+            :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
+            :limit="10"
+            :drag="false"
+            v-model:modelValue="beforeModelValue"
           >
-            <el-button type="primary">涓婁紶</el-button>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="鐢熶骇鍚�" prop="fileList1">
-          <el-upload
-              v-model:file-list="fileList1"
-              ref="fileUpload1"
-              :action="uploadFileUrl"
-              multiple
-              name="files"
-              :data="{type: 1}"
-              style="width: 100%"
-              :headers="headers"
-              :before-upload="handleBeforeUpload"
-              :on-success="handleUploadSuccess1"
+          </fileUpload>
+        </div>
+        <div class="form-container">
+          <div class="title">鐢熶骇鍚�</div>
+          <fileUpload
+            :statusType="1"
+            ref="afterProductionRef"
+            :fileSize="1024"
+            :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
+            :limit="10"
+            :drag="false"
+            v-model:modelValue="afterModelValue"
           >
-            <el-button type="primary">涓婁紶</el-button>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="鐢熶骇闂" prop="fileList2">
-          <el-upload
-              v-model:file-list="fileList2"
-              ref="fileUpload2"
-              :action="uploadFileUrl"
-              multiple
-              name="files"
-              :data="{type: 2}"
-              style="width: 100%"
-              :headers="headers"
-              :before-upload="handleBeforeUpload"
-              :on-success="handleUploadSuccess2"
+          </fileUpload>
+        </div>
+        <div class="form-container">
+          <div class="title">鐢熶骇闂</div>
+          <fileUpload
+            :statusType="2"
+            ref="issueProductionRef"
+            :fileSize="1024"
+            :fileType="['mp3', 'mp4', 'avi', 'mov', 'mkv']"
+            :limit="10"
+            :drag="false"
+            v-model:modelValue="issueModelValue"
           >
-            <el-button type="primary">涓婁紶</el-button>
-          </el-upload>
-        </el-form-item>
-      </el-form>
+          </fileUpload>
+        </div>
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="cancel">鍙栨秷</el-button>
@@ -63,96 +58,83 @@
 </template>
 
 <script setup>
-import {reactive, ref} from "vue";
-import {addOrEditInspectionTask} from "@/api/inspectionManagement/index.js";
-import {getToken} from "@/utils/auth.js";
+import { reactive, ref } from "vue";
+import {ElMessage} from "element-plus";
+import fileUpload from "@/components/FileUpload/index.vue";
+import {uploadInspectionTask} from "@/api/inspectionManagement/index.js";
 
-const { proxy } = getCurrentInstance()
-const emit = defineEmits()
+const emit = defineEmits(['closeDia']);
 const dialogVisitable = ref(false);
-const data = reactive({
-  form: {
-    id: '',
-    storageBlobDTO: {}
-  },
-})
+const { proxy } = getCurrentInstance()
+const beforeModelValue = ref([]);
+const afterModelValue = ref([]);
+const issueModelValue = ref([]);
+const beforeProductionRef = ref(null);
+const afterProductionRef = ref(null);
+const issueProductionRef = ref(null);
 
-const { form } = toRefs(data)
-const fileList0 = ref([])
-const fileList1 = ref([])
-const fileList2 = ref([])
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/minioUploads'); // 涓婁紶鏂囦欢鏈嶅姟鍣ㄥ湴鍧�
-const headers = ref({ Authorization: "Bearer " + getToken() });
-
+const submitForm = async () => {
+  let arr = [];
+  if (beforeModelValue.value.length > 0) {
+    arr.push(...beforeModelValue.value);
+  }
+  if (afterModelValue.value.length > 0) {
+    arr.push(...afterModelValue.value);
+  }
+  if (issueModelValue.value.length > 0) {
+    arr.push(...issueModelValue.value);
+  }
+  // 鎻愪氦鏁版嵁
+  infoData.value.storageBlobDTO = arr;
+  await uploadInspectionTask({...infoData.value});
+  cancel()
+  ElMessage.success("鎻愪氦鎴愬姛");
+};
+const infoData = ref(null);
 // 鎵撳紑寮规
 const openDialog = async (row) => {
-  dialogVisitable.value = true
-  form.value.id = row.id
-}
-// 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
-function handleBeforeUpload(file) {
-  
-  return true
-}
-// 涓婁紶鎴愬姛鍥炶皟
-function handleUploadSuccess(res, file) {
-  if (res.code === 200) {
-    console.log("涓婁紶鎴愬姛", res);
-    proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
-    console.log('fileList0---', fileList0)
-  } else {
-    proxy.$modal.msgError(res.msg)
-    proxy.$refs.fileUpload0.handleRemove(file)
-  }
-}
-function handleUploadSuccess1(res, file) {
-  if (res.code === 200) {
-    proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
-  } else {
-    proxy.$modal.msgError(res.msg)
-    proxy.$refs.fileUpload1.handleRemove(file)
-  }
-}
-function handleUploadSuccess2(res, file) {
-  if (res.code === 200) {
-    proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
-  } else {
-    proxy.$modal.msgError(res.msg)
-    proxy.$refs.fileUpload2.handleRemove(file)
-  }
-}
-
-// 鎻愪氦鍚堝苟琛ㄥ崟
-const submitForm = () => {
-  proxy.$refs["formRef"].validate(valid => {
-    if (valid) {
-      // 鍒濆鍖� storageBlobDTO 涓轰竴涓┖鏁扮粍
-      form.value.storageBlobDTO = []
-      // 鍚堝苟鎵�鏈� fileList 鍒� storageBlobDTO
-      const allFiles = [
-        ...fileList0.value,
-        ...fileList1.value,
-        ...fileList2.value
-      ]
-      // 灏嗘枃浠跺垪琛ㄨ祴鍊肩粰 form
-      form.value.storageBlobDTO = allFiles
-      // 鎻愪氦鏁版嵁
-      addOrEditInspectionTask(form.value).then(() => {
-        cancel()
-        proxy.$modal.msgSuccess('鎻愪氦鎴愬姛')
-      })
-    }
-  })
-}
+  infoData.value = row;
+  dialogVisitable.value = true;
+};
 // 鍏抽棴鍚堝苟琛ㄥ崟
 const cancel = () => {
-  proxy.resetForm("formRef")
-  dialogVisitable.value = false
-  emit('closeDia')
-}
-defineExpose({ openDialog })
+  proxy.resetForm("formRef");
+  dialogVisitable.value = false;
+  emit("closeDia");
+};
+defineExpose({ openDialog });
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped lang="scss">
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  .form-container {
+    flex: 1;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
+.title {
+  font-size: 14px;
+  color: #165dff;
+  line-height: 20px;
+  font-weight: 600;
+  padding-left: 10px;
+  position: relative;
+  margin: 6px 0;
+}
+.title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 3px; /* 璋冩暣鍨傜洿浣嶇疆 */
+  width: 4px; /* 灏忔暟鏉″搴� */
+  height: 14px; /* 灏忔暟鏉¢珮搴� */
+  background-color: #165dff; /* 钃濊壊 */
+}
+</style>
diff --git a/src/views/inspectionUpload/index.vue b/src/views/inspectionUpload/index.vue
index 762d39a..559c05e 100644
--- a/src/views/inspectionUpload/index.vue
+++ b/src/views/inspectionUpload/index.vue
@@ -93,6 +93,8 @@
     formDia.value?.openDialog(row)
   })
 }
+
+
 </script>
 
 <style scoped>

--
Gitblit v1.9.3