|
@ -1,204 +1,262 @@
|
|
|
(function() {
|
|
|
Vue.component('record', {
|
|
|
template: `<div class="container ptb20">
|
|
|
<div class="row w3-row">
|
|
|
<left-menu :code="code"></left-menu>
|
|
|
<div class="pl251">
|
|
|
<div class="bgc-fff c-border" style="min-height: 706px;">
|
|
|
<ul class="nav nav-tabs c-inline-block width-100" role="tablist" id="recordlist">
|
|
|
<li role="presentation" class="active">
|
|
|
<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">待就诊</a>
|
|
|
</li>
|
|
|
<li role="presentation">
|
|
|
<a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="_history">历史记录</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="tab-content plr25 ptb8">
|
|
|
<div role="tabpanel" class="tab-pane active" id="home">
|
|
|
<div class="list-body" v-for="record in records">
|
|
|
<div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
|
|
|
<div class="div-table">
|
|
|
<div class="table-row">
|
|
|
<div class="table-cell">
|
|
|
<div class="w3-row">
|
|
|
<div class="w3-col pl15" style="width:95px">
|
|
|
<img :src="record.photo" class="img-circle" width="80" height="80" />
|
|
|
</div>
|
|
|
<div class="w3-rest c-t-left pl20 c-f14 ">
|
|
|
<div class="mt15">
|
|
|
<span class="c-f16">{{record.doctor}}</span>
|
|
|
<span class="plr10">{{record.zhiwu}}</span>
|
|
|
<span class="c-909090">{{record.keshi}}</span>
|
|
|
</div>
|
|
|
<div class="mt10 c-909090">{{record.yiyuan}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-cell c-f16">
|
|
|
<div class="mt15">
|
|
|
{{record.othertime}}
|
|
|
</div>
|
|
|
<div class="mt10">
|
|
|
{{record.othertime1}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-cell c-f16 mt25">{{record.bingren}}
|
|
|
</div>
|
|
|
<div class="table-cell">
|
|
|
<div class="cancelbtn" @click="cancelbtn(record.id)">取消预约</div>
|
|
|
<div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div role="tabpanel" class="tab-pane" id="history">
|
|
|
<div class="list-body" v-for="record in records">
|
|
|
<div class="list-header"><span>预约时间</span><span class="pl20">{{record.time}}</span></div>
|
|
|
<div class="div-table">
|
|
|
<div class="table-row">
|
|
|
<div class="table-cell">
|
|
|
<div class="w3-row">
|
|
|
<div class="w3-col pl15" style="width:95px">
|
|
|
<img :src="record.photo" class="img-circle" width="80" height="80" />
|
|
|
</div>
|
|
|
<div class="w3-rest c-t-left pl20 c-f14 ">
|
|
|
<div class="mt15">
|
|
|
<span class="c-f16">{{record.doctor}}</span>
|
|
|
<span class="plr10">{{record.zhiwu}}</span>
|
|
|
<span class="c-909090">{{record.keshi}}</span>
|
|
|
</div>
|
|
|
<div class="mt10 c-909090">{{record.yiyuan}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-cell c-f16">
|
|
|
<div class="mt15">
|
|
|
{{record.othertime}}
|
|
|
</div>
|
|
|
<div class="mt10">
|
|
|
{{record.othertime1}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-cell c-f16 mt25">{{record.bingren}}
|
|
|
</div>
|
|
|
<div class="table-cell">
|
|
|
<div class="mt10" style="color:#0AD8C8" data-toggle="modal" data-target="#appointmentinfo">查看详情</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="page" class="page_div"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal fade" id="appointmentinfo" tabindex="-1" role="dialog" aria-labelledby="appointmentinfoLabel">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header bgc-f9f9f9">
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
|
<h4 class="modal-title" id="appointmentinfoLabel">挂号明细</h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<div class="bgc-fff">
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">订单号</div>
|
|
|
<div class="w3-rest">18721839005577</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list" style="border:none;">
|
|
|
<div class="w3-col" style="width:120px;">订单状态</div>
|
|
|
<div class="w3-rest">待就诊</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">预约信息</div>
|
|
|
<div class="w3-row c-border-b modal-list">
|
|
|
<div class="w3-col" style="width:120px;">预约医院</div>
|
|
|
<div class="w3-rest">福建省立医院</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">预约科室</div>
|
|
|
<div class="w3-rest">睡眠眼科</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">就诊日期</div>
|
|
|
<div class="w3-rest">2018-04-04 上午</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">就诊时间</div>
|
|
|
<div class="w3-rest">07:50</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">就诊序号</div>
|
|
|
<div class="w3-rest">2</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list" style="border:none;">
|
|
|
<div class="w3-col" style="width:120px;">退号截止时间</div>
|
|
|
<div class="w3-rest">2018-04-04 23:59:00</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">就诊人信息</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">姓名</div>
|
|
|
<div class="w3-rest">郑绩</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">证件号</div>
|
|
|
<div class="w3-rest">35040319850707201X</div>
|
|
|
</div>
|
|
|
<div class="w3-row modal-list">
|
|
|
<div class="w3-col" style="width:120px;">手机号</div>
|
|
|
<div class="w3-rest">137******96</div>
|
|
|
</div>
|
|
|
<div class="c-t-center">
|
|
|
<button type="button" class="btn btn-default c-f16 mt30 mb20" style="width:144px;" @click="hideModel()">关 闭</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>`,
|
|
|
template: '<div class="container ptb20">\
|
|
|
<div class="row w3-row">\
|
|
|
<left-menu :code="code"></left-menu>\
|
|
|
<div class="pl251">\
|
|
|
<div class="bgc-fff c-border" style="min-height: 706px;">\
|
|
|
<ul class="nav nav-tabs c-inline-block width-100" role="tablist" id="recordlist">\
|
|
|
<li role="presentation" class="active">\
|
|
|
<a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="_home">待就诊</a>\
|
|
|
</li>\
|
|
|
<li role="presentation">\
|
|
|
<a href="#history" aria-controls="history" role="tab" data-toggle="tab" id="_history">历史记录</a>\
|
|
|
</li>\
|
|
|
</ul>\
|
|
|
<div class="tab-content plr25 ptb8">\
|
|
|
<div role="tabpanel" class="tab-pane active" id="home">\
|
|
|
<template v-if="records.length>0">\
|
|
|
<div class="list-body" v-for="record in records">\
|
|
|
<div class="list-header"><span>预约时间</span><span class="pl20">{{record.orderCreateTime}}</span></div>\
|
|
|
<div class="div-table">\
|
|
|
<div class="table-row">\
|
|
|
<div class="table-cell">\
|
|
|
<div class="w3-row">\
|
|
|
<div class="w3-col pl15" style="width:95px">\
|
|
|
<img :src="record.photoUri || defaultImg" class="img-circle" width="80" height="80" />\
|
|
|
</div>\
|
|
|
<div class="w3-rest c-t-left pl20 c-f14 ">\
|
|
|
<div class="mt15">\
|
|
|
<span class="c-f16">{{record.doctorName}}</span>\
|
|
|
<span class="plr10">{{record.doctorName}}</span>\
|
|
|
<span class="c-909090">{{record.deptName}}</span>\
|
|
|
</div>\
|
|
|
<div class="mt10 c-909090">{{record.hospitalName}}</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
<div class="table-cell c-f16">\
|
|
|
<div class="mt15">{{record.registerDate}}</div>\
|
|
|
<div class="mt10">{{record.serialNo}},{{record.commendTime}}</div>\
|
|
|
</div>\
|
|
|
<div class="table-cell c-f16 mt25">{{record.patientName}}</div>\
|
|
|
<div class="table-cell">\
|
|
|
<div class="cancelbtn" @click="cancelbtn(record.orderId)">取消预约</div>\
|
|
|
<div class="mt10" style="color:#0AD8C8" @click="getinfo(record.id)">查看详情</span>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</template>\
|
|
|
<div v-else class="c-t-center mtb100">\
|
|
|
<img src="../../../images/queshengye-.png" />\
|
|
|
</div>\
|
|
|
<div id="homepage" class="page_div" v-if="!ishomeNull"></div>\
|
|
|
</div>\
|
|
|
<div role="tabpanel" class="tab-pane" id="history">\
|
|
|
<template v-if="historyrecords.length>0">\
|
|
|
<div class="list-body" v-for="record in historyrecords">\
|
|
|
<div class="list-header"><span>预约时间</span><span class="pl20">{{record.orderCreateTime}}</span></div>\
|
|
|
<div class="div-table">\
|
|
|
<div class="table-row">\
|
|
|
<div class="table-cell">\
|
|
|
<div class="w3-row">\
|
|
|
<div class="w3-col pl15" style="width:95px">\
|
|
|
<img :src="record.photoUri|| defaultImg" class="img-circle" width="80" height="80" />\
|
|
|
</div>\
|
|
|
<div class="w3-rest c-t-left pl20 c-f14 ">\
|
|
|
<div class="mt15">\
|
|
|
<span class="c-f16">{{record.doctorName}}</span>\
|
|
|
<span class="plr10">{{record.deptName}}</span>\
|
|
|
<span class="c-909090">{{record.deptName}}</span>\
|
|
|
</div>\
|
|
|
<div class="mt10 c-909090">{{record.hospitalName}}</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
<div class="table-cell c-f16">\
|
|
|
<div class="mt15">{{record.registerDate}}</div>\
|
|
|
<div class="mt10">{{record.serialNo}},{{record.commendTime}}</div>\
|
|
|
</div>\
|
|
|
<div class="table-cell c-f16 mt25">{{record.patientName}}</div>\
|
|
|
<div class="table-cell">\
|
|
|
<div class="mt10">{{record.stateDesc}}</span>\
|
|
|
<div class="mt10" style="color:#0AD8C8" @click="getinfo(record.id)">查看详情</span>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</template>\
|
|
|
<div v-else class="c-t-center mtb100">\
|
|
|
<img src="../../../images/queshengye-.png" />\
|
|
|
</div>\
|
|
|
<div id="historypage" class="page_div" v-if="!ishistoryNull"></div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
<div class="modal fade" id="appointmentinfo" tabindex="-1" role="dialog" aria-labelledby="appointmentinfoLabel">\
|
|
|
<div class="modal-dialog" role="document">\
|
|
|
<div class="modal-content">\
|
|
|
<div class="modal-header bgc-f9f9f9">\
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
|
|
|
<h4 class="modal-title" id="appointmentinfoLabel">挂号明细</h4>\
|
|
|
</div>\
|
|
|
<div class="modal-body">\
|
|
|
<div class="bgc-fff">\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">订单号</div>\
|
|
|
<div class="w3-rest">{{recordinfo.orderId}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list" style="border:none;">\
|
|
|
<div class="w3-col" style="width:120px;">订单状态</div>\
|
|
|
<div class="w3-rest">{{recordinfo.stateDesc}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">预约信息</div>\
|
|
|
<div class="w3-row c-border-b modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">预约医院</div>\
|
|
|
<div class="w3-rest">{{recordinfo.hospitalName}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">预约科室</div>\
|
|
|
<div class="w3-rest">{{recordinfo.deptName}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">就诊日期</div>\
|
|
|
<div class="w3-rest">{{recordinfo.registerDate}} {{recordinfo.timeId}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">就诊时间</div>\
|
|
|
<div class="w3-rest">{{recordinfo.commendTime}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">就诊序号</div>\
|
|
|
<div class="w3-rest">{{recordinfo.serialNo}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list" style="border:none;">\
|
|
|
<div class="w3-col" style="width:120px;">退号截止时间</div>\
|
|
|
<div class="w3-rest">{{recordinfo.invalidDate}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list bgc-f9f9f9" style="color:#323232;border:none;">就诊人信息</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">姓名</div>\
|
|
|
<div class="w3-rest">{{recordinfo.patientName}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">证件号</div>\
|
|
|
<div class="w3-rest">{{recordinfo.cardNo}}</div>\
|
|
|
</div>\
|
|
|
<div class="w3-row modal-list">\
|
|
|
<div class="w3-col" style="width:120px;">手机号</div>\
|
|
|
<div class="w3-rest">{{recordinfo.phoneNo}}</div>\
|
|
|
</div>\
|
|
|
<div class="c-t-center">\
|
|
|
<button type="button" class="btn btn-default c-f16 mt30 mb20" style="width:144px;" @click="hideModel()">关 闭</button>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>',
|
|
|
props: [],
|
|
|
data: function() {
|
|
|
return {
|
|
|
code: "record",
|
|
|
records: [{
|
|
|
time: "2017年11月11日 13:13:13",
|
|
|
photo: "../image/touxiang.jpg",
|
|
|
doctor: "张三",
|
|
|
zhiwu: "主任医生",
|
|
|
keshi: "骨科",
|
|
|
yiyuan: "上饶医院",
|
|
|
othertime: "2018-04-04上午",
|
|
|
othertime1: "第2号,07:50",
|
|
|
bingren: "李花花",
|
|
|
id: "1",
|
|
|
}, {
|
|
|
time: "2017年11月11日 13:13:13",
|
|
|
photo: "../image/touxiang.jpg",
|
|
|
doctor: "张三",
|
|
|
zhiwu: "主任医生",
|
|
|
keshi: "骨科",
|
|
|
yiyuan: "上饶医院",
|
|
|
othertime: "2018-04-04上午",
|
|
|
othertime1: "第2号,07:50",
|
|
|
bingren: "李花花",
|
|
|
id: "1",
|
|
|
}, ]
|
|
|
records: [],
|
|
|
historyrecords: [],
|
|
|
recodestype: '2',
|
|
|
historytype: '',
|
|
|
recordinfo: {},
|
|
|
defaultImg: "../../../images/moren_touxiang_img.png",
|
|
|
ishomeNull: false,
|
|
|
ishistoryNull: false,
|
|
|
}
|
|
|
},
|
|
|
mounted: function() {
|
|
|
|
|
|
var vm = this
|
|
|
vm.getlist(1, vm.recodestype)
|
|
|
vm.getlist(1, vm.historytype)
|
|
|
},
|
|
|
methods: {
|
|
|
getlist: function(pageNo, types) {
|
|
|
var vm = this
|
|
|
var oauthInfo = JSON.parse(sessionStorage.getItem("oauthInfo"));
|
|
|
var filters = "userId=" + oauthInfo.id
|
|
|
if(types == '2') {
|
|
|
filters += ";state=" + types
|
|
|
}
|
|
|
var param = {
|
|
|
fields: '',
|
|
|
filters: filters,
|
|
|
sort: '+registerDate',
|
|
|
page: pageNo,
|
|
|
size: 5
|
|
|
}
|
|
|
jiuzhenAPI.queryRegOrderInfos(param).then(function(res) {
|
|
|
if(types == '2') {
|
|
|
vm.records = res.detailModelList
|
|
|
if(res.totalCount == 0) {
|
|
|
vm.ishomeNull = true
|
|
|
} else {
|
|
|
vm.inithomePage(pageNo, res.totalPage, res.totalCount)
|
|
|
}
|
|
|
} else if(types == '') {
|
|
|
vm.historyrecords = res.detailModelList
|
|
|
vm.inithistoryPage(pageNo, res.totalPage, res.totalCount)
|
|
|
if(res.totalCount == 0) {
|
|
|
vm.ishistoryNull = true
|
|
|
} else {
|
|
|
vm.inithistoryPage(pageNo, res.totalPage, res.totalCount)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
})
|
|
|
},
|
|
|
cancelbtn: function(id) {
|
|
|
personalDialogForm.cancelAppointment(id).then(function(layerid) {
|
|
|
top.layer.close(layerid)
|
|
|
})
|
|
|
},
|
|
|
hideModel:function(){
|
|
|
inithomePage: function(pageNo, total, size) {
|
|
|
var vm = this
|
|
|
//分页初始化
|
|
|
$("#homepage").paging({
|
|
|
pageNo: pageNo,
|
|
|
totalPage: total,
|
|
|
totalSize: size,
|
|
|
callback: function(num) {
|
|
|
//回调的页数
|
|
|
vm.getlist(num, vm.recodestype)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
inithistoryPage: function(pageNo, total, size) {
|
|
|
var vm = this
|
|
|
//分页初始化
|
|
|
$("#historypage").paging({
|
|
|
pageNo: pageNo,
|
|
|
totalPage: total,
|
|
|
totalSize: size,
|
|
|
callback: function(num) {
|
|
|
//回调的页数
|
|
|
vm.getlist(num, vm.historytype)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getinfo: function(orderid) {
|
|
|
var vm = this
|
|
|
jiuzhenAPI.getRegOrderInfo(orderid).then(function(res) {
|
|
|
vm.recordinfo = res.obj
|
|
|
vm.openmodel()
|
|
|
})
|
|
|
},
|
|
|
openmodel: function() {
|
|
|
$('#appointmentinfo').modal('show')
|
|
|
},
|
|
|
hideModel: function() {
|
|
|
$('#appointmentinfo').modal('hide')
|
|
|
}
|
|
|
},
|