记录下来备忘
结构如下
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>