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>
@@ -63,18 +63,21 @@
                       v-btn-permission="'66ae947771821e3bd064c5594a14d145'"
                       @click="addData"><i class="el-icon-plus"></i>新增
            </el-button>
-<!--            <el-button class="common-button-default in-button"-->
-<!--                       size="mini"-->
-<!--                       @click=""><i class="iconfont">&#xe6de;</i>导入-->
-<!--            </el-button>-->
+            <el-button class="common-button-default in-button"
+                       size="mini"
+                       v-btn-permission="'666603f1e48c944a0188d6c6e725033a'"
+                       @click="addImportModal"><i class="iconfont">&#xe6de;</i>导入
+            </el-button>
            <el-button class="common-button-default export-button"
                       size="mini"
                       v-btn-permission="'f919276a703d3c9062f6a69f6f0400cc'"
                       @click="exportData"><i class="iconfont">&#xe6e9;</i>导出
            </el-button>
-<!--            <el-button class="common-button-default"-->
-<!--                       size="mini" @click=""><i class="iconfont">&#xe669;</i>下载-->
-<!--            </el-button>-->
+            <el-button class="common-button-default in-button"
+                       size="mini"
+                       v-btn-permission="'0a1b99b3c9d88c4390dfd6f54fe85801'"
+                       @click="handleMoudel"><i class="iconfont">&#xe6de;</i>模板下载
+            </el-button>
            <el-button class="common-button-default"
                       size="mini"
                       v-btn-permission="'74c437f9bfce7198144aa08e9a52950e'"
@@ -752,20 +755,27 @@
        </div>
        <!--导出文件改名字模态框-->
        <exportDialog ref="exportDialogRef" @exportName="handleExport" />
+        <Import :visible.sync="importModalShowFlag" :action="importExcelUrl" accept=".xls, .XLS, .xlsx, .XLSX" @onSuccess="getData"></Import>
    </div>
 </template>

 <script>
    import CustomInputForAllStandards2 from '@/components/CustomFormComponents/InputForAllStandards2'
    import exportDialog from './components/exportDialog'
+    import Import from '@/components/hzwlComponents/Import'
+
    export default {
        name: "enterpriseStandardPlan",
        components: {
            exportDialog,
+            Import,
            CustomInputForAllStandards2
        },
        data() {
            return {
+                //  导入
+                importModalShowFlag: false,
+                importExcelUrl: '',
                workData: [],
                workGroupLoading: false,
                workTotal: 0,
@@ -918,6 +928,15 @@
            },
        },
        methods: {
+            // 导入
+            addImportModal() {
+              this.importModalShowFlag = true
+              this.importExcelUrl = '/api/esRevisePlan/es-revise-plan/importEsRevisePlan'
+            },
+            // 模板下载
+            handleMoudel(){
+              window.open('/api/esRevisePlan/es-revise-plan/exportTemplateFile?fileName=企标计划模板')
+            },
            exportData () {
              this.$refs.exportDialogRef.openModel()
            },