From 432ddf1abeaa9dcac86f628913af1f2a03cfe22f Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期三, 18 六月 2025 09:00:09 +0800
Subject: [PATCH] 1.昭德-文档管理上传图片联调 2.昭德-完善生产加工模块 3.昭德-后端协商数据格式页面渲染问题

---
 src/components/FileUpload/index.vue |  269 ++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 181 insertions(+), 88 deletions(-)

diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index e68df58..d8aa818 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -12,6 +12,7 @@
       :on-success="handleUploadSuccess"
       :show-file-list="false"
       :headers="headers"
+      :http-request="UploadImage"
       class="upload-file-uploader"
       ref="fileUpload"
       v-if="!disabled"
@@ -22,18 +23,44 @@
     <!-- 涓婁紶鎻愮ず -->
     <div class="el-upload__tip" v-if="showTip && !disabled">
       璇蜂笂浼�
-      <template v-if="fileSize"> 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      <template v-if="fileSize">
+        澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+      </template>
       鐨勬枃浠�
     </div>
     <!-- 鏂囦欢鍒楄〃 -->
-    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+    <transition-group
+      ref="uploadFileList"
+      class="upload-file-list el-upload-list el-upload-list--text"
+      name="el-fade-in-linear"
+      tag="ul"
+    >
+      <li
+        :key="file.uid"
+        class="el-upload-list__item ele-upload-list__item-content"
+        v-for="(file, index) in fileList"
+      >
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ file.bucketFilename }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">&nbsp;鍒犻櫎</el-link>
+          <el-link
+            :underline="false"
+            @click="handleDownload(index)"
+            type="primary"
+            v-if="!disabled"
+            >&nbsp;涓嬭浇</el-link
+          >
+          <el-link
+            :underline="false"
+            @click="handleDelete(index)"
+            type="danger"
+            v-if="!disabled"
+            >&nbsp;鍒犻櫎</el-link
+          >
         </div>
       </li>
     </transition-group>
@@ -41,82 +68,143 @@
 </template>
 
 <script setup>
-import { getToken } from "@/utils/auth"
-import Sortable from 'sortablejs'
-
+import { getToken } from "@/utils/auth";
+import Sortable from "sortablejs";
+import axios from "axios";
 const props = defineProps({
   modelValue: [String, Object, Array],
   // 涓婁紶鎺ュ彛鍦板潃
   action: {
     type: String,
-    default: "/common/upload"
+    default: "/common/minioUploads",
   },
   // 涓婁紶鎼哄甫鐨勫弬鏁�
   data: {
-    type: Object
+    type: Object,
   },
   // 鏁伴噺闄愬埗
   limit: {
     type: Number,
-    default: 5
+    default: 5,
   },
   // 澶у皬闄愬埗(MB)
   fileSize: {
     type: Number,
-    default: 5
+    default: 5,
   },
   // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"]
+    default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"],
   },
   // 鏄惁鏄剧ず鎻愮ず
   isShowTip: {
     type: Boolean,
-    default: true
+    default: true,
   },
   // 绂佺敤缁勪欢锛堜粎鏌ョ湅鏂囦欢锛�
   disabled: {
     type: Boolean,
-    default: false
+    default: false,
   },
   // 鎷栧姩鎺掑簭
   drag: {
     type: Boolean,
-    default: true
-  }
-})
+    default: true,
+  },
+});
 
-const { proxy } = getCurrentInstance()
-const emit = defineEmits()
-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 { proxy } = getCurrentInstance();
+const emit = defineEmits();
+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 = () =>{
+  fileList.value = [];
+  uploadList.value = [];
+  number.value = 0;
+}
+const editInit = (val) => {
+  console.log("editInit", val);
+};
+defineExpose({
+  init,
+  editInit
+});
+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 };
+        }
+        item.uid = item.uid || new Date().getTime() + temp++;
+        return item;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
 
-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 }
-      }
-      item.uid = item.uid || new Date().getTime() + temp++
-      return item
+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 });
+      },
     })
-  } else {
-    fileList.value = []
-    return []
+    .then((response) => {
+      if (response.data.code === 200) {
+        handleUploadSuccess(response.data, param.file);
+        // 鏇存柊鐖剁粍浠�
+        emit("update:modelValue", fileList.value);
+      } else {
+        param.onError(new Error(response.data.msg));
+      }
+    })
+    .catch((error) => {
+      param.onError(error);
+    });
+};
+
+// 涓嬭浇鏂囦欢
+function handleDownload(index) {
+  const url = fileList.value[index].downloadUrl;
+  if (!url) {
+    proxy.$modal.msgError("鏂囦欢閾炬帴涓嶅瓨鍦紝鏃犳硶涓嬭浇");
+    return;
   }
-},{ deep: true, immediate: true })
+  // 璇诲彇棰勮鍥剧墖鐨勬暟鎹�
+  const link = document.createElement("a");
+  link.href = url; // 閾炬帴鍦板潃
+  link.download = fileList.value[index].bucketFilename; // 璁剧疆涓嬭浇鏂囦欢鍚�
+  link.click();
+}
+
 
 // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
 function handleBeforeUpload(file) {
@@ -131,62 +219,66 @@
   //   }
   // }
   // 鏍℃鏂囦欢鍚嶆槸鍚﹀寘鍚壒娈婂瓧绗�
-  if (file.name.includes(',')) {
-    proxy.$modal.msgError('鏂囦欢鍚嶄笉姝ｇ‘锛屼笉鑳藉寘鍚嫳鏂囬�楀彿!')
-    return false
+  if (file.name.includes(",")) {
+    proxy.$modal.msgError("鏂囦欢鍚嶄笉姝ｇ‘锛屼笉鑳藉寘鍚嫳鏂囬�楀彿!");
+    return false;
   }
   // 鏍℃鏂囦欢澶у皬
   if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
-      proxy.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`)
-      return false
+      proxy.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`);
+      return false;
     }
   }
-  proxy.$modal.loading("姝ｅ湪涓婁紶鏂囦欢锛岃绋嶅��...")
-  number.value++
-  return true
+  proxy.$modal.loading("姝ｅ湪涓婁紶鏂囦欢锛岃绋嶅��...");
+  number.value++;
+  return true;
 }
 
 // 鏂囦欢涓暟瓒呭嚭
 function handleExceed() {
-  proxy.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`)
+  proxy.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`);
 }
 
 // 涓婁紶澶辫触
 function handleUploadError(err) {
-  proxy.$modal.msgError("涓婁紶鏂囦欢澶辫触")
-  proxy.$modal.closeLoading()
+  proxy.$modal.msgError("涓婁紶鏂囦欢澶辫触");
+  proxy.$modal.closeLoading();
 }
 
 // 涓婁紶鎴愬姛鍥炶皟
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName })
-    uploadedSuccessfully()
+    console.log("涓婁紶鎴愬姛", res);
+    uploadList.value.push(res.data[0])
+    uploadedSuccessfully();
+    // proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
   } else {
-    number.value--
-    proxy.$modal.closeLoading()
-    proxy.$modal.msgError(res.msg)
-    proxy.$refs.fileUpload.handleRemove(file)
-    uploadedSuccessfully()
+    number.value--;
+    proxy.$modal.closeLoading();
+    proxy.$modal.msgError(res.msg);
+    proxy.$refs.fileUpload.handleRemove(file);
+    uploadedSuccessfully();
   }
 }
 
 // 鍒犻櫎鏂囦欢
 function handleDelete(index) {
-  fileList.value.splice(index, 1)
-  emit("update:modelValue", listToString(fileList.value))
+  fileList.value.splice(index, 1);
+  emit("update:modelValue", listToString(fileList.value));
 }
 
 // 涓婁紶缁撴潫澶勭悊
 function uploadedSuccessfully() {
   if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
-    uploadList.value = []
-    number.value = 0
-    emit("update:modelValue", listToString(fileList.value))
-    proxy.$modal.closeLoading()
+    fileList.value = fileList.value
+      .filter((f) => f.url !== undefined)
+      .concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue");
+    proxy.$modal.closeLoading();
   }
 }
 
@@ -194,40 +286,41 @@
 function getFileName(name) {
   // 濡傛灉鏄痷rl閭ｄ箞鍙栨渶鍚庣殑鍚嶅瓧 濡傛灉涓嶆槸鐩存帴杩斿洖
   if (name.lastIndexOf("/") > -1) {
-    return name.slice(name.lastIndexOf("/") + 1)
+    return name.slice(name.lastIndexOf("/") + 1);
   } else {
-    return name
+    return name;
   }
 }
 
 // 瀵硅薄杞垚鎸囧畾瀛楃涓插垎闅�
 function listToString(list, separator) {
-  let strs = ""
-  separator = separator || ","
+  let strs = "";
+  separator = separator || ",";
   for (let i in list) {
     if (list[i].url) {
-      strs += list[i].url + separator
+      strs += list[i].url + separator;
     }
   }
-  return strs != '' ? strs.substr(0, strs.length - 1) : ''
+  return strs != "" ? strs.substr(0, strs.length - 1) : "";
 }
 
 // 鍒濆鍖栨嫋鎷芥帓搴�
 onMounted(() => {
   if (props.drag && !props.disabled) {
     nextTick(() => {
-      const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
+      const element =
+        proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList;
       Sortable.create(element, {
-        ghostClass: 'file-upload-darg',
+        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 movedItem = fileList.value.splice(evt.oldIndex, 1)[0];
+          fileList.value.splice(evt.newIndex, 0, movedItem);
+          emit("update:modelValue", listToString(fileList.value));
+        },
+      });
+    });
   }
-})
+});
 </script>
 <style scoped lang="scss">
 .file-upload-darg {
@@ -259,7 +352,7 @@
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
-.el-icon-document{
-  padding-left: 10px;
+.el-icon-document {
+  padding: 10px;
 }
 </style>

--
Gitblit v1.9.3