Merge branch 'dev_新疆_大罗素马铃薯new' of http://114.132.189.42:9002/r/product-inv...

huminmin

2026-06-01 a563ea879ef5fb6897e76d2df661e465dce2ab9b

 src/components/Upload/FileUpload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,100 @@
<script setup>
import { ref } from "vue";

defineOptions({
  name: "文件上传组件",
});

const props = defineProps({
  downloadTemplate: Function,
  showTips: Boolean,
  accept: {
    type: String,
    default: ".xls, .xlsx",
  },
  headers: Object,
  action: String,
  disabled: {
    type: Boolean,
    default: false,
  },
  showTip: {
    type: Boolean,
    default: true,
  },
  autoUpload: {
    type: Boolean,
    default: false,
  },
  limit: {
    type: Number,
    default: 1,
  },
});
const emits = defineEmits(["success", "remove"]);

const uploadRef = ref();
const fileList = ref([]);

const uploadApi = () => {
  uploadRef.value.submit();
};

const handleFileSuccess = (response, file, fileList) => {
  // uploadRef.value.handleRemove(file);
  emits("success", response, file, fileList);
};

const handleRemove = (file) => {
  emits("remove", file);
};

const clearFiles = () => {
  fileList.value = [];
};

defineExpose({
  fileList,
  uploadApi,
  clearFiles,
});
</script>

<template>
  <el-upload
    ref="uploadRef"
    v-model:file-list="fileList"
    drag
    multiple
    :action="action"
    :accept="accept"
    :headers="headers"
    :disabled="disabled"
    :auto-upload="autoUpload"
    :limit="limit"
    :drag="true"
    :on-success="handleFileSuccess"
    :on-remove="handleRemove"
  >
    <div class="el-upload__text">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        å°†æ–‡ä»¶æ‹–到此处，或
        <em>点击上传附件</em>
      </div>
    </div>
    <template #tip>
      <div v-if="showTip" class="el-upload__tip text-center">
        åªèƒ½ä¸Šä¼ xlsx/xls文件，且不超过10M
        <el-button
          type="primary"
          link
          class="reset-margin"
          @click="props.downloadTemplate()"
        >
          <span style="font-size: 12px; font-weight: normal">下载模板</span>
        </el-button>
      </div>
    </template>
  </el-upload>
</template>