记录下来备忘

结构如下

Report.vue

<template>
<div>
<home-header></home-header>
<div class="report">
<div class="rs_1"></div>
<div class="rs_4">检测报告查询</div>
<div class="tools"> <table-view @changPage="changPage" :reportData="reportData" :count="count" :Offset="Offset" :Limit="Limit"></table-view> </div>
</div>
<footer-view></footer-view> </div>
</template>
<script>
import HomeHeader from '../header/Header'
import FooterView from '../footer/FooterView'
import TableView from './components/TableView'
import axios from 'axios'
import {urlApi} from '@/api/api.js'
import { format } from '@/util/util.js'
export default {
name:'Report',
components:{
HomeHeader,
FooterView,
TableView
},
data(){
return{
reportData:[],
count:0,
Offset:0,
Limit:10
}
},
methods:{
changPage(v){
this.Offset = (v-1)*10;
this.getReport(this.Offset,this.Limit);
},
getReport(Offset=0,Limit=10){
/* post */
let params = new URLSearchParams();
params.append('Offset',Offset);
params.append('Limit',10);
params.append('Limit',10);
params.append('postType','web'); axios.post(urlApi.getReport,params)
.then(this.getReportSucc)
/* post */
},
getReportSucc(res){
this.reportData = [];
if(res.data.error_code==0 && res.data.reason){
this.count = res.data.count;
res.data.reason.forEach((item,index) => {
// console.log(format(item.SEND_TIME));
// item.PATIENT_NAME = item.PATIENT_NAME.split(',')[0]
item.PATIENT_NAME = item.PATIENT_NAME.charAt(0)+'***';
item.SEND_TIME = format(item.SEND_TIME)
});
this.reportData = res.data.reason;
}
}
},
mounted() {
this.getReport();
},
}
</script>
<style lang="stylus">
.report
width 1280px
min-height 900px
background #161F60
margin 51px auto 0
position relative
color white
float left
left 50%
margin-left -640px
.rs_1
position absolute
top 0
left 0
width 73px
height 75px
background url('../../assets/dat/rs_1.png') no-repeat
.rs_2
position absolute
bottom 0
left 0
width 1280px
height 228px
background url('../../assets/dat/rs_2.png') no-repeat
z-index 9
.rs_3
position absolute
top 0px
right 0
width 80px
height 6px
background url('../../assets/dat/rs_3.png') no-repeat
.rs_4
position absolute
top 28px
left 25px
width 221px
height 46px
background url('../../assets/dat/rs_4.jpg') no-repeat
text-align center
line-height 46px
font-size 18px
.tools
margin-top 140px
</style>

  Table.vue

<template>
<div> <el-table
:data="reportData"
border
style="width: 100%">
<el-table-column
label="序号"
width="70"
>
<template scope="scope">
<span>
{{scope.$index+((Offset+10)/10-1)*Limit+1}}
</span>
</template>
</el-table-column>
<el-table-column
prop="PATIENT_NAME"
label="患者姓名"
width="180">
</el-table-column>
<el-table-column
prop="SEND_TIME"
label="送检日期"
width="180">
</el-table-column>
<el-table-column
prop="PHY_NAME"
label="医生"
width="180">
</el-table-column>
<el-table-column
prop="REPORT_TYPE"
label="检测类型"
width="180">
</el-table-column>
<el-table-column
prop="PKG_NUM"
label="检测条码"
width="180">
</el-table-column>
<el-table-column
prop="REPORT_STATUS"
label="REPORT_STATUS"
width="180">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="button" v-if="scope.row.REPORT_STATUS == '有报告'" @click="checkDetail(scope.row.REPORT_CODE,scope.row.PATIENT_NAME)">下载报告</el-button>
<div v-else>{{scope.row.REPORT_STATUS}}</div>
</template>
</el-table-column>
</el-table>
<div class="page">
<el-pagination
@current-change="handleCurrentChange"
small
background
layout="prev, pager, next"
:total="count">
</el-pagination>
</div> <el-dialog :title="name" :visible.sync="dialogTableVisible">
<el-table border :data="ihcdata">
<el-table-column property="REPORT_TYPE" label="报告类型" width="150"></el-table-column>
<el-table-column property="SEND_TIME" label="送检日期" width="200"></el-table-column>
<el-table-column property="BARCODE" label="样本检测条码"></el-table-column> <el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="button" @click="checkDownload(scope.row.ATTACH_ID)">下载</el-button>
</template>
</el-table-column> </el-table> <el-table border :data="ngsdata" class="myrow">
<el-table-column property="REPORT_TYPE" label="报告类型" width="150"></el-table-column>
<el-table-column property="SEND_TIME" label="送检日期" width="200"></el-table-column>
<el-table-column property="BARCODE" label="样本检测条码"></el-table-column> <el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="button" @click="checkDownload(scope.row.ATTACH_ID)">下载</el-button>
</template>
</el-table-column> </el-table>
</el-dialog> </div>
</template>
<script>
import axios from 'axios'
import {urlApi} from '@/api/api.js'
import { format } from '@/util/util.js'
export default {
name:'TableView',
props:{
reportData:Array,
count:Number,
Offset:Number,
Limit:Number
},
data(){
return{
dialogTableVisible:false,
name:'',
ihcdata: [],
ngsdata:[],
}
},
methods:{
checkDownload(id){
//console.log(v);
/* post */
/*
let iparams = new URLSearchParams();
iparams.append('ATTACH_ID',id); axios.post(urlApi.downloadReport,iparams)
.then(this.downloadReportSucc)
*/
/* post */
window.location.href=urlApi.downloadReport+'&ATTACH_ID='+id;
},
downloadReportSucc(res){ if(res.data.error_code != 0){
this.$message(res.data.msg);
}else{
console.log(res);
window.location.href=res;
}
},
handleCurrentChange(currentPage){
this.$emit("changPage",currentPage);
},
checkDetail(detail,name){
this.name = name+'的检测报告';
this.getReportsByOrderId(detail,name);
},
getReportsByOrderId(reportcode,name){
/* post */
let params = new URLSearchParams();
params.append('REPORT_CODE',reportcode);
params.append('postType','web'); axios.post(urlApi.getReportsByOrderId,params)
.then(this.getReportsByOrderIdSucc)
/* post */
},
getReportsByOrderIdSucc(res){
if(res.data.error_code==0 && res.data.reason){
console.log(res.data.reason)
res.data.reason.IHCList.forEach((item,index) => {
//console.log(res.data.reason);
item.SEND_TIME = format(item.SEND_TIME)
});
res.data.reason.NGSList.forEach((item,index) => {
//console.log(res.data.reason);
item.SEND_TIME = format(item.SEND_TIME)
});
this.ihcdata = [];
this.ngsdata = [];
this.ihcdata = res.data.reason.IHCList;
this.ngsdata = res.data.reason.NGSList;
this.dialogTableVisible = true;
}
}
}
}
</script>
<style lang="stylus">
.page
width 100%
text-align center
margin-top 20px
.myrow
margin-top 30px
</style>

  

elementui table 分页 和 tabel 前加序列号的更多相关文章

  1. element-UI table分页之后保存已经勾选的标签

  2. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  3. bootstrap table分页(前后端两种方式实现)

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

  4. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  5. vue+element-ui 实现分页(根据el-table内容变换的分页)

    官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...

  6. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

  7. Table 分页处理

    介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables ...

  8. JQuery实现table分页

    1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...

  9. C++在字符串前加一个L作用:

    在字符串前加一个L作用:    如 L"我的字符串" 表示将ANSI字符串转换成unicode的字符串,就是每个字符占用两个字节.    strlen("asd" ...

随机推荐

  1. 学习jQuery的免费资源:电子书、视频、教程和博客

    jQuery毫无疑问是目前最流行的JavasScript库.排名最前的网站中70%使用了jQuery,并且jQuery也成为了Web开发的标准.如果你想找Web开发方面的工作,了解jQuery会大大的 ...

  2. NIOP 膜你题

    NOIp膜你题   Day1 duliu 出题人:ZAY    1.大美江湖(mzq.cpp/c) [题目背景] 细雪飘落长街,枫叶红透又一年不只为故友流连,其实我也恋长安听门外足音慢,依稀见旧时容颜 ...

  3. Java制作桌面弹球下载版 使用如鹏游戏引擎制作 包含2个精灵球同时弹动

    package com.swift; import com.rupeng.game.GameCore; public class DesktopBouncingBall implements Runn ...

  4. TCP/IP协议头部结构体

    TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #define LITTLE_ENDIAN (1) ...

  5. Python函数的基本定义和调用以及内置函数

    首先我们要了解Python函数的基本定义: 函数是什么? 函数是可以实现一些特定功能的小方法或是小程序.在Python中有很多内建函数,当然随着学习的深入,你也可以学会创建对自己有用的函数.简单的理解 ...

  6. LeetCode(219) Contains Duplicate II

    题目 Given an array of integers and an integer k, find out whether there are two distinct indices i an ...

  7. nordic芯片开发——烧写方法记录

    在开发nordic芯片的时候,分为存外设开发和结合softdevice开发,另外还有结合mbr的开发(这个暂时没有深究)在裸机开发的时候,sdk里面称为blank,把芯片的程序erase之后,直接下载 ...

  8. hdu4489 组合公式+dp

    这里对于题意在说明一下, 题目中要求的排列必须是波浪形,每一个在排列中的人不是波峰就是波谷,如果它既不是波峰也不是波谷排列就是错的. 对于我这种数学渣渣来说,做一道dp题要好久,%>_<% ...

  9. 静态方法中不能使用 $this

    忽略了一个问题,$this 代表当前对象!! 静态方法中应该使用 类名 . self 或者 static 关键字来代替! static public function get_info($id) { ...

  10. 4003.基于Dijsktra算法的最短路径求解

    基于Dijsktra算法的最短路径求解 发布时间: 2018年11月26日 10:14   时间限制: 1000ms   内存限制: 128M 有趣的最短路...火候欠佳,目前还很难快速盲打出来,需继 ...