cdssHospital/src/components/icss/lis/ImportLisRecord.vue

<template>
  <div class="importDisWrapper clearfix">
    <crumbs
      title="检验关联维护-导入关联"
      class="topBack"
      :param="$route.params"
      linkTo="Lis"
    ></crumbs>
    <div class="importDisBox">
      <P>
        数据导入后，
        <span :style="{color: '#D9001B'}">将删除原有数据，替换为导入的新数据。</span>请确保导入的内容为所需的全部关联。
      </P>
      <P>建议您先下载现有全部数据，在此基础上新增或修改数据。</P>
      <div>
        <img src="../../../images/excelIcon.png">
        <span>检验关联数据</span>
        <span class="down" @click="exportData">下载</span>
      </div>
      <div class="upload">
        <el-input
          placeholder="点击上传文件"
          suffix-icon="el-icon-folder-opened"
          @click.native="uploadClick"
          v-model="fileName"
          disabled
        ></el-input>

        <div>
          <el-button size="small" @click="handleUpload">{{uploadInfo}}</el-button>
        </div>
        <input
          type="file"
          name="uploadfile "
          id="upFile"
          @change="uploadFile($event)"
          accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        />
      </div>
    </div>
  </div>
</template>

<script>
import api from '@api/icss.js';
import config from '@api/config.js';
import utils from '@api/utils.js';
export default {
  data() {
    return {
      fileName: '',
      formData: {},
      headers: {},
      uploadInfo: '开始导入'
    };
  },
  created() {},
  methods: {
    // 导出现有全部数据
    exportData() {
      api
        .exportLisRecord()
        .then(res => {
          if (res.status === 200) {
            utils.downloadExportedData(res.data, '检验关联数据.xls');
            this.$message({ message: '下载成功', type: 'success' });
          }
        })
        .catch(err => {
          this.$message({ message: '下载失败', type: 'waring' });
        });
    },

    uploadClick() {
      let inp = document.getElementById('upFile');
      inp.click();
    },

    uploadFile(e) {
      let fileInfo = e.target.files[0];
      this.fileName = e.target.files[0].name; // 表单同步显示
      e.preventDefault();
      let formData = new FormData();
      formData.append('file', fileInfo);
      const header = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      };
      this.formData = formData;
      this.header = header;
      //解决上传相同文件不触发change
      let inp = document.getElementById('upFile');
      inp.value = '';
    },

    // 上传文件
    handleUpload() {
      if (!this.fileName) {
        this.$message('请先选择上传文件');
        return;
      }
      this.uploadInfo = '导入中...';
      api.importLisRecord(this.formData, this.header).then(res => {
        if (res.status === 200) {
          this.fileName = '';
          this.formData = {};
          this.$message({
            message: '导入成功',
            type: 'success'
          });
          setTimeout(() => {
            this.uploadInfo = '开始导入';
          }, 300);
        } else {
          this.fileName = '';
          this.formData = {};
          this.$message({
            message: '导入失败',
            type: 'error'
          });
          setTimeout(() => {
            this.uploadInfo = '开始导入';
          }, 300);
        }
      });
    }
  }
};
</script>

<style  lang="less">
.importDisWrapper {
  min-width: 940px;
  color: #606266;
  .topBack {
    top: 0;
  }
  .importDisBox {
    padding: 20px 60px 120px 60px;
    margin: 70px 20px 0 20px;
    background: #fff;
     img{
      width: 18px;
      height: 18px;
      position: relative;
      top: 3px;
      left: 0px;
      margin-right: 4px;
    }
    p,
    span {
      font-size: 14px;
    }
    .down {
      color: #85a7f1;
      margin-left: 48px;
      line-height: 48px;
      cursor: pointer;
    }
  }
  .upload {
    .el-input {
      width: 240px;
    }
    .el-button {
      margin-left: 170px;
      margin-top: 20px;
    }
    #upFile {
      display: none !important;
    }
  }
}
</style>