|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ v-model="showImport"
|
|
|
+ :title="title"
|
|
|
+ @cancel="cancel"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ :okButtonProps="{ style: { display: 'none' } }"
|
|
|
+ :bodyStyle="{ overflow: 'auto', 'max-height': '580px' }"
|
|
|
+ >
|
|
|
+ <a-spin :spinning="spinning">
|
|
|
+ <a-upload-dragger
|
|
|
+ accept=".xlsx"
|
|
|
+ name="file"
|
|
|
+ :multiple="false"
|
|
|
+ :beforeUpload="beforeUpload"
|
|
|
+ @reject="rejectUpload"
|
|
|
+ :showUploadList="false"
|
|
|
+ :customRequest="customRequest"
|
|
|
+ >
|
|
|
+ <p class="ant-upload-drag-icon">
|
|
|
+ <a-icon type="inbox" />
|
|
|
+ </p>
|
|
|
+ <p class="ant-upload-text">将文件拖拽至此区域,或点击区域</p>
|
|
|
+ <p class="ant-upload-hint">仅支持xlsx,限30M以内</p>
|
|
|
+ </a-upload-dragger>
|
|
|
+
|
|
|
+ <div class="upload-errmsg" v-if="errorMsgs">
|
|
|
+ <div v-for="(value, key, index) in errorMsgs" :key="index">第 {{ key }} 行 数据{{ value }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="upload-rule">
|
|
|
+ <h4 class="upload-rule-title">导入说明</h4>
|
|
|
+ <p>
|
|
|
+ 1. 上传前请先按照excel模板格式填写信息;
|
|
|
+ <span class="upload-rule-down" @click="downloadTheTemplate">下载模板</span>
|
|
|
+ </p>
|
|
|
+ <p>2. 带红色信号的项为必填项,如果存在未填写项会导致数据导入失败;</p>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <template #footer>
|
|
|
+ <a-button @click="cancel">关闭</a-button>
|
|
|
+ </template>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getImportTem, doImportFiles } from "@/api/index.js";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: "导入",
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showImport: false,
|
|
|
+ spinning: false,
|
|
|
+ errorMsgs: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cancel() {
|
|
|
+ this.errorMsgs = {};
|
|
|
+ this.$emit("input", false);
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ // 判断file是否是xlsx文件
|
|
|
+ const allowedExtensions = /(\.xlsx)$/i;
|
|
|
+ if (!allowedExtensions.exec(file.name)) {
|
|
|
+ this.rejectUpload();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rejectUpload() {
|
|
|
+ this.$message.error("仅支持 .xlsx 格式的文件!");
|
|
|
+ },
|
|
|
+ customRequest({ file }) {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("file", file, file.name.replace(/,/g, "%$"));
|
|
|
+ doImportFiles(this.type, formData)
|
|
|
+ .then(res => {
|
|
|
+ if (res && Object.values(res).length) {
|
|
|
+ this.errorMsgs = res;
|
|
|
+ // 可能有部分错误, 但是列表还是得刷新.
|
|
|
+ this.$emit("uploadOk");
|
|
|
+ } else {
|
|
|
+ this.$emit("uploadOk");
|
|
|
+ this.$emit("input", false);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadTheTemplate() {
|
|
|
+ getImportTem(this.type).then(res => {
|
|
|
+ const blob = new Blob([res], { type: "application/vnd.ms-excel;charset=UTF-8" });
|
|
|
+ const fileName = this.type === "srm_supplier" ? "供应商导入模板.xlsx" : "客户导入模板.xlsx";
|
|
|
+ if (window.navigator.msSaveOrOpenBlob) {
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
+ } else {
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = URL.createObjectURL(blob);
|
|
|
+ link.download = fileName;
|
|
|
+ link.click();
|
|
|
+ URL.revokeObjectURL(link.href);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ immediate: true,
|
|
|
+ handler(newValue) {
|
|
|
+ this.showImport = newValue;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/ .ant-upload.ant-upload-drag .ant-upload {
|
|
|
+ padding: 80px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-errmsg {
|
|
|
+ margin-top: 10px;
|
|
|
+ color: @error-color;
|
|
|
+}
|
|
|
+.upload-rule {
|
|
|
+ &-title {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ &-down {
|
|
|
+ color: @primary-color;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|