设备账台新增导入

src/api/system/file/index.js

@@ -14,6 +14,38 @@ export async function uploadFile(data) {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 导入文件 批量
+ * @param file 文件
+ */
+export async function importBatch(data,api,onUploadProgressCb,fileKeyName='file') {
+  const formData = new FormData();
+  data.multiPartFiles.forEach((item, index) => {
+    formData.append(fileKeyName, item);
+  });
+  const res = await request.post(api, formData,{
+    onUploadProgress:onUploadProgressCb?onUploadProgressCb:()=>{}
+  });
+  if (res.data.code === '0') {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+ * 下载模板
+ */
+export async function downLoadTemplate(url,name) {
+  const res = await request.post(
+    url,
+    {},
+    {
+      responseType: 'blob',
+    }
+  );
+  console.log(res.data, '***********');
+  download(res.data, name);
+
+}
 /**
  * 上传 base64 文件
  * @param base64 文件数据

src/components/upload/import-dialog.vue

@@ -0,0 +1,189 @@
+<template>
+  <!-- 上传 -->
+  <el-dialog title="导入文件上传" :visible.sync="dialogVisible" width="40%">
+    <el-form label-width="110px" class="zw-criterion">
+      <el-form-item label="选择文件">
+        <el-upload
+          class="avatar-uploader"
+          action="#"
+          :show-file-list="false"
+          :http-request="handlSuccess"
+          :multiple="true"
+        >
+          <el-button icon="el-icon-plus" size="small" type="primary"
+            >文件上传</el-button
+          >
+          <div slot="tip" class="el-upload__tip" v-if="fileUrl">
+            只能上传excel文件，点击
+            <el-link
+              type="primary"
+              :underline="false"
+              @click="downLoadTemplate()"
+            >
+              下载模板</el-link
+            >
+          </div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="上传列表">
+        <div class="imgs-box">
+          <p v-for="(item, index) in attaments" :key="index" class="imgs-p">
+            <span> {{ item.name }}</span>
+            <el-link @click="delFileList(index)" type="primary">删除</el-link>
+          </p>
+        </div>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
+      <el-button size="small" @click="upload" type="primary">上 传</el-button>
+    </div>
+    <div id="progress" v-if="isProgress">
+      <el-progress
+        type="circle"
+        :percentage="percentage"
+        text-color="#fff"
+      ></el-progress>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { importBatch,downLoadTemplate } from '@/api/system/file/index.js';
+  import { download1 } from '@/utils/file';
+  import { number } from 'echarts';
+
+  export default {
+    props: {
+      // eslint-disable-next-line vue/require-prop-type-constructor
+      defModule: '',
+      fileUrl: '',
+      fileName: '',
+      apiUrl: '',
+      isWeb: {
+        type: Boolean,
+        default: true
+      } ,
+      fileKeyName:'file'
+    },
+    //注册组件
+    data() {
+      return {
+        showViewer: false, // 显示查看器
+        dialogVisible: false,
+        uploadShow: false,
+        isProgress: false,
+        module: '',
+        percentage: 0,
+        attaments: [], //上传文件
+        file: ''
+      };
+    },
+
+    created() {},
+    methods: {
+      open() {
+        this.attaments = [];
+        this.module = '';
+        this.dialogVisible = true;
+      },
+      //删除附件
+      delFileList(index) {
+        this.attaments.splice(index, 1);
+      },
+      //上传限制
+      beforeUpload(file) {
+        const isLt10M = file.size / 1024 / 1024 < 10;
+        if (!isLt10M) {
+          this.$message.error('导入单文件大小不能超过 10MB!');
+        }
+        return isLt10M;
+      },
+      //图片上传
+      handlSuccess(param) {
+        this.file = param.file;
+        this.attaments.push(param.file);
+      },
+      // 文件上传
+      async upload() {
+        if (this.attaments.length == 0) {
+          return this.$message.warning('文件不能为空！');
+        }
+        this.module = this.$props.defModule;
+        this.isProgress = true;
+        this.percentage = 0;
+        await importBatch(
+          {
+            module: this.module,
+            multiPartFiles: this.attaments
+          },
+          this.apiUrl,
+          (data) => {
+            console.log(data, 'data');
+            this.percentage = parseFloat(
+              ((data.loaded * 100) / data.total).toFixed(2)
+            );
+            if (this.percentage >= 100) {
+              setTimeout(() => {
+                this.isProgress = false;
+              }, 500);
+            }
+          },
+          this.fileKeyName
+        )
+          .then((res) => {
+            this.$message.success('操作成功！');
+            this.dialogVisible = false;
+            this.isProgress = false;
+            this.$emit('success');
+          })
+          .catch(() => {
+            this.isProgress = false;
+          });
+      },
+      //下载模板
+      downLoadTemplate() {
+        if(this.isWeb){
+          download1(window.location.origin + this.fileUrl, this.fileName);
+        }else{
+          downLoadTemplate(this.fileUrl,this.fileName);
+        }
+
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  .zw-table-header {
+    float: right;
+  }
+
+  .imgs-box .imgs-p {
+    height: 30px;
+    background: #f0f3f3;
+    line-height: 30px;
+    width: 372px;
+    margin-bottom: 5px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .zw-criterion-normal {
+    padding: 20px 0 0 0;
+  }
+  .el-main {
+    overflow: hidden;
+  }
+  #progress {
+    background: rgba($color: #000000, $alpha: 0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/ledgerAssets/equipment/components/equipment-list.vue

@@ -88,6 +88,14 @@
           v-if="$hasPermission('main:substance:delete')"
           >批量删除</el-button
         >
+        
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-upload2"
+              @click="uploadFile"
+              >导入</el-button
+            >
         <!-- <el-button
           size="small"
           @click="moveTo(checkRadioData, 'move')"
@@ -134,6 +142,14 @@
     <printTg ref="printTgRef"></printTg>
     <BomDetailsPop ref="bomDrawer"></BomDetailsPop>
     <batchSetDialog ref="batchSetRef" @success="sucesstion" />
+    <importDialog
+      ref="importDialogRef"
+      @success="reload"
+      :fileUrl="'/main/asset/importTemplate'"
+      :isWeb="false"
+      fileName="设备台账导入模板"
+      apiUrl="/main/asset/importFile"
+    />
   </div>
 </template>
 
@@ -143,6 +159,7 @@
   import printSr from '@/views/ledgerAssets/components/printSr';
   import printTg from '@/views/ledgerAssets/components/printTg';
   import { getByCode } from '@/api/system/dictionary-data';
+import importDialog from '@/components/upload/import-dialog.vue';
   import {
     businessStatus,
     networkStatus,
@@ -178,6 +195,7 @@
       printSr,
       printTg,
       BomDetailsPop,
+    importDialog,
       batchSetDialog
     },
     mixins: [dictMixins],
@@ -402,6 +420,10 @@
       this.getAssetLevelOptions();
     },
     methods: {
+    //导入
+    uploadFile() {
+      this.$refs.importDialogRef.open();
+    },
       allPrinting() {
         console.log('this.clientEnvironmentId-------------');
         console.log(this.clientEnvironmentId);