首页导入

src/api/request.js

@@ -9,6 +9,15 @@ export default {
       method: 'post',
     })
   },
+  uploadFile(url,data){
+    return request({
+      url: url,
+      method: 'post',
+      headers: {'Content-Type': 'multipart/form-data'},
+      data: data
+    })
+  }
+  
    // ...其他的请求
   //
 }

src/router/index.js

@@ -466,10 +466,13 @@ export const constantRoutes = [
   },
   // 暂时添加的路由
   {
-    path: '/recordsImport',
-    name: 'recordsImport',
+    path: '/import',
+    name: 'import',
     component: Layout,
-    redirect: '/recordsImport',
+    meta:{
+      icon: "table",
+      title: "首页导入"
+    },
     hidden: true,
     children: [
       {
@@ -478,7 +481,6 @@ export const constantRoutes = [
         component: () => import('@/views/recordsImport/index'),
         meta: { 
           title: '首页导入',
-          icon: 'dashboard',
           keepAlive: 1,
           canMultipleOpen: true,
           hidden: true

src/views/recordsImport/index.vue

@@ -11,7 +11,15 @@
       </div>
       <!-- 上传拖拽区域模块 开始 -->
       <div class="upload-blockCon-box">
-        <el-upload class="upload-demo" drag :action="actionUrl" multiple>
+        <el-upload class="upload-demo" 
+          drag ref="upload" 
+          :accept="accept" 
+          :limit="limit"
+          action="none" 
+          multiple 
+          :on-exceed='limitCheck'
+          :http-request="uploadArticleCover"
+        >
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
           <div class="el-upload__tip">支持excel、csv</div>
@@ -26,20 +34,21 @@
         <div class="titlebox-text">导入结果</div>
         <div><el-button type="primary" size="small" class="export-btn">导出数据</el-button></div>
       </div>
-      <p>共上传: 500份<span style="padding-left: 20px;">导入失败: 2份</span></p>
+      <p>共上传: {{ sum_count }}份<span style="padding-left: 20px;">导入失败: {{ error_count }}份</span></p>
       <div class="table-block">
         <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="" align="center" label="医院名称"></el-table-column>
-          <el-table-column prop="" align="center" label="病案数"></el-table-column>
+          <el-table-column prop="hospital_name" align="center" label="医院名称"></el-table-column>
+          <el-table-column prop="AAA28" align="center" label="病案号"></el-table-column>
           <el-table-column prop="" align="center" label="姓名"></el-table-column>
-          <el-table-column prop="" align="center" label="出院时间"></el-table-column>
-          <el-table-column prop="" align="center" label="导入失败原因"></el-table-column>
+          <el-table-column prop="AAB01" align="center" label="入院时间"></el-table-column>
+          <el-table-column prop="AAC01" align="center" label="出院时间"></el-table-column>
+          <el-table-column prop="error_msg" align="center" label="导入失败原因"></el-table-column>
         </el-table>
       </div>
       
 
       <div class="footers">
-        <mPagination v-if="tableData && tableData.length !== 0" :data="paginationData" @pageChangeEvent="pageHasChanged"></mPagination>
+        <mPagination v-if="tableData && tableData.length !== 0" layout="sizes, prev, pager, next, slot" :data="paginationData" @sizeChange="handleSizeChange" @pageChangeEvent="pageHasChanged"></mPagination>
       </div>
 
 
@@ -48,14 +57,18 @@
 </template>
 <script>
 
-
 export default {
   name:'recordsImport',
   data() {
     return {
       switch_value: true,
-      actionUrl:'https://jsonplaceholder.typicode.com/posts/',
+      fileList: [],
+      accept:'.xlsx,.xls,.csv', // 接受上传文件
+      limit: 1, // 选着文件时限制总数
+      actionUrl:'',
       tableData: [],
+      sum_count: 0, //导入总数
+      error_count: 0, // 导入失败数
       paginationData: {
         total: 10,
         currentPage: 1,
@@ -74,6 +87,14 @@ export default {
     funQuery() {
       this.getList(); //获取列表
     },
+    pageHasChanged() {
+      this.funQuery();
+    },
+    handleSizeChange(size) {
+      this.paginationData.currentPage = 1
+      this.paginationData.pageSize = size
+      this.funQuery();
+    },
     getList(){
       let pramse = {
         page: this.paginationData.currentPage, //页码
@@ -83,6 +104,27 @@ export default {
 
       });
     },
+
+
+    
+    // 选择的文件超出限制的文件总数量时触发
+    limitCheck() {
+      this.$message.warning('每次只能上传一个文件')
+    },
+
+    uploadArticleCover(param){
+      console.log('进入了自定义上传')
+      const formData = new FormData();
+      formData.append('file',param.file);
+      formData.append('pictureCategory','articleCover');
+      this.$axios.post('/bl_import/importData',formData,{'Content-Type': 'multipart/form-data'}).then( res=>{
+        console.log(res)
+        console.log("上传完成")
+      }).catch( e=>{
+        console.log('erro')
+      })
+    },
+
     
    
   },