诊断关联

src/components/icss/disease/ImportDiseaseRecord.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="importDisWrapper clearfix">
+    <crumbs
+      title="诊断关联维护-导入关联"
+      class="topBack"
+      :param="$route.params"
+      linkTo="ChemicalAndCommonMapping"
+    ></crumbs>
+    <div class="importDisBox">
+      <P>
+        数据导入后，
+        <span :style="{color: '#D9001B'}">将删除原有数据，替换为导入的新数据。</span>请确保导入的内容为所需的全部关联。
+      </P>
+      <P>建议您先下载现有全部数据，在此基础上新增或修改数据。</P>
+      <div>
+        <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
+        .exportDiseaseRecord()
+        .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.importDiseaseRecord(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;
+    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>