feature(企标计划): 添加导入、模板下载按钮

2023-12-08 17:53:15 +08:00
parent 391c9d4969
commit 8f3cde578d
2 changed files with 153 additions and 7 deletions
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <!-- 导入模态窗 -->
+    <el-dialog width='400px'
+               v-if="visible"
+               :visible="visible"
+               @close="onClose"
+               title="导入文件"
+               v-dragDialogWidth
+               :close-on-click-modal="false"
+               append-to-body>
+      <el-upload
+          multiple
+          drag
+          :action="action"
+          ref="importfile"
+          :headers="headers"
+          name="file"
+          :accept="accept"
+          :before-upload="beforeUpload"
+          :on-success="onSuccess"
+          :show-file-list="true"
+      >
+        <i class="el-icon-upload" style="color: #3399ff"></i>
+        <div class="el-upload__text">点击或拖拽上传文件</div>
+      </el-upload>
+    </el-dialog>
+    <!-- 导入失败-->
+    <el-dialog :visible.sync="importFailed" :close-on-click-modal="false" width="400px">
+      <p slot="title" style="color:#f60">
+        <span>导入失败</span>
+      </p>
+      <div style="max-height: 300px;overflow: auto;padding: 10px 0;">
+        <p v-html="importForm.content"></p>
+      </div>
+      <div slot="footer" class="demo-drawer-footer">
+        <el-button type="primary" round class="common-button-default" icon="el-icon-check" @click="importFailed = false">
+          确认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "import",
+  data () {
+    return {
+      headers:{
+        token: JSON.parse(localStorage.getItem('userInfo')).token
+      },
+      importFailed: false,
+      importForm: {}
+    }
+  },
+  props: {
+    accept: {
+      type: String,
+      default: '.pdf, .PDF, .doc, .DOC, .docx, .DOCX, .ppt, .PPT, .pptx, .PPTX, .xls, .XLS, .xlsx, .XLSX, .pdg, .PDG'
+    },
+    action: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: Number,
+      default: 200
+    },
+  },
+  methods: {
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 导入按钮 上传之前的钩子
+    beforeUpload (file) {
+      const fileName = file.name
+      const fileSuffix = fileName.slice(fileName.lastIndexOf('.') + 1)
+      // 判断上传文件格式
+      const acceptArr = this.accept.split(',').map(type => type.slice(type.lastIndexOf('.') + 1))
+      // 判断上传文件格式
+      if (!acceptArr.includes(fileSuffix)) {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: <div style="word-break: break-all;;color: #F56C6C">文件{file.name}格式不正确，请上传{acceptArr.join('、')}文件</div>,
+          type: 'error'
+        })
+        return false
+      }
+      // 判断文件上传大小
+      if (file.size / 1024 / 1024 > this.size) {// eslint-disable-line
+        this.$message.error('文件' + file.name + `超过${ this.size }M`)
+        return false
+      }
+      return true
+    },
+    // 导入标准数据成功后执行
+    onSuccess(response, file) {
+      if (response.ok) {
+        this.$emit('update:visible', false)
+        this.$emit('onSuccess')
+        this.$message({
+          message: response.message || response.data,
+          type: 'success'
+        })
+      } else {
+        this.importFailed = true
+        this.importForm.content = response.message
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .el-upload-dragger{
+  width: 100% !important;
+}
+/deep/ .el-upload{
+  width: 100% !important;
+
+}
+</style>