maven
5 天以前 5fbfc19daae6017e0522b281b39ab102a685c06d
src/views/procurementManagement/procurementInvoiceLedger/Modal/UploadModal.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
<template>
  <el-dialog v-model="upload.open" :title="upload.title" :width="500">
    <FileUpload
      ref="fileUploadRef"
      accept=".xlsx, .xls, .pdf"
      :headers="upload.headers"
      :autoUpload="true"
      :action="upload.url"
      :disabled="upload.isUploading"
      :showTip="false"
      :limit="10"
      @success="handleFileSuccess"
      @remove="removeFile"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
        <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive } from "vue";
import { getToken } from "@/utils/auth.js";
import { FileUpload } from "@/components/Upload";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import useFormData from "@/hooks/useFormData";
defineOptions({
  name: "来票台账附件补充",
});
const { form, resetForm } = useFormData({
  id: undefined,
  tempFileIds: [],
});
const emits = defineEmits(["uploadSuccess"]);
const fileUploadRef = ref();
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚(供应商导入)
  open: false,
  // å¼¹å‡ºå±‚标题(供应商导入)
  title: "",
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
});
// ç‚¹å‡»å¯¼å…¥
const handleImport = (id) => {
  form.id = id;
  upload.open = true;
  upload.title = "来票台账附件补充";
};
const submitFileForm = () => {
  upload.open = false;
  resetForm();
  emits("uploadSuccess", form);
};
const handleFileSuccess = (response) => {
  const { code, msg } = response;
  form.tempFileIds.push(response.data.tempId);
  if (code == 200) {
    ElMessage({ message: "导入成功", type: "success" });
  } else {
    ElMessage({ message: msg, type: "error" });
  }
};
const removeFile = (file) => {
  const { tempId } = file.response.data;
  form.tempFileIds = form.tempFileIds.filter((item) => item !== tempId);
};
defineExpose({
  handleImport,
});
</script>