提交 84ad365f 编写于 作者: yi.li's avatar yi.li

健康记录滚动加载

上级 b0f37df9
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"showdown": "^1.6.4", "showdown": "^1.6.4",
"vue": "^2.1.0", "vue": "^2.1.0",
"vue-infinite-scroll": "^2.0.2",
"vue-router": "^2.1.1", "vue-router": "^2.1.1",
"vuex": "^2.0.0" "vuex": "^2.0.0"
}, },
......
...@@ -10,7 +10,9 @@ import vueFilters from '@/utils/filter' ...@@ -10,7 +10,9 @@ import vueFilters from '@/utils/filter'
// 引入ElementUI // 引入ElementUI
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
//引入滚动加载分页
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
// 可调试 // 可调试
// Vue.config.devtools = true; // Vue.config.devtools = true;
// Vue.use(Logger, { prefix: new Date(), isDev: process.env.NODE_ENV === 'development', cLevel: 'debug' }) // Vue.use(Logger, { prefix: new Date(), isDev: process.env.NODE_ENV === 'development', cLevel: 'debug' })
......
// 检查号码是否符合规范,包括长度,类型 // 检查号码是否符合规范,包括长度,类型
function isCardNo(card){ export const isCardNo = (card) =>{
//身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
// var reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/; // var reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
...@@ -10,7 +10,7 @@ function isCardNo(card){ ...@@ -10,7 +10,7 @@ function isCardNo(card){
} }
// 取身份证前两位,校验省份 // 取身份证前两位,校验省份
function checkProvince(card,vcity){ export const checkProvince = (card,vcity) =>{
var province = card.substr(0,2); var province = card.substr(0,2);
if(vcity[province] == undefined){ if(vcity[province] == undefined){
return false; return false;
...@@ -19,7 +19,7 @@ function checkProvince(card,vcity){ ...@@ -19,7 +19,7 @@ function checkProvince(card,vcity){
} }
// 检查生日是否正确 // 检查生日是否正确
function checkBirthday(card){ export const checkBirthday = (card) =>{
var len = card.length; var len = card.length;
//身份证15位时,次序为省(3位)市(3位)年(2位)月(2位)日(2位)校验位(3位),皆为数字 //身份证15位时,次序为省(3位)市(3位)年(2位)月(2位)日(2位)校验位(3位),皆为数字
if(len == '15'){ if(len == '15'){
...@@ -63,7 +63,7 @@ function verifyBirthday(year,month,day,birthday) { ...@@ -63,7 +63,7 @@ function verifyBirthday(year,month,day,birthday) {
} }
// 校验位的检测 // 校验位的检测
function checkParity(card){ export const checkParity = (card)=>{
//15位转18位 //15位转18位
card = changeFivteenToEighteen(card); card = changeFivteenToEighteen(card);
var len = card.length; var len = card.length;
...@@ -102,36 +102,36 @@ function changeFivteenToEighteen(card){ ...@@ -102,36 +102,36 @@ function changeFivteenToEighteen(card){
return card; return card;
} }
export const checkCardNum = (rule, value, callback) => { // export const checkCardNum = (rule, value, callback) => {
var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古", // var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏", // 21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南", // 33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆", // 42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃", // 51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外" // 63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
}; // };
//是否为空 // //是否为空
// if(value === ''){ // // if(value === ''){
// callback(new Error('请输入正确的身份证')) // // callback(new Error('请输入正确的身份证'))
// } // // }
if(value) { // if(value) {
//校验长度,类型 // //校验长度,类型
if(isCardNo(value) === false){ // if(isCardNo(value) === false){
callback(new Error('请输入正确的身份证')) // callback(new Error('请输入正确的身份证'))
} // }
//检查省份 // //检查省份
if(checkProvince(value,vcity) === false){ // if(checkProvince(value,vcity) === false){
callback(new Error('请输入正确的身份证')) // callback(new Error('请输入正确的身份证'))
} // }
//校验生日 // //校验生日
if(checkBirthday(value) === false){ // if(checkBirthday(value) === false){
callback(new Error('请输入正确的身份证')) // callback(new Error('请输入正确的身份证'))
} // }
//检验位的检测 // //检验位的检测
if(checkParity(value) === false){ // if(checkParity(value) === false){
callback(new Error('请输入正确的身份证')) // callback(new Error('请输入正确的身份证'))
} // }
}else { // }else {
callback() // callback()
} // }
} // }
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
<div class="f-main-content screenSet"> <div class="f-main-content screenSet">
<div class="header-title"> <div class="header-title">
<span>基本信息</span> <span>基本信息</span>
<p><el-button plain size="small">取消</el-button><el-button type="primary" size="small" @click="saveEdit">保存</el-button></p> <p>
<el-button plain size="small" @click="cancelEdit">取消</el-button>
<el-button type="primary" size="small" @click="saveEdit">保存</el-button>
</p>
</div> </div>
<edit-information <edit-information
:patientInfoObj="patientInfo" :patientInfoObj="patientInfo"
...@@ -24,7 +27,7 @@ ...@@ -24,7 +27,7 @@
import BreadCrumb from '@/components/breadcrumb' import BreadCrumb from '@/components/breadcrumb'
import editInformation from './components/edit-information' import editInformation from './components/edit-information'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { getPatientDetail, getRemindPatient, deletePatient,savePatientInfo } from '@/utils/patients/patientsapi' import { getPatientDetail, getRemindPatient, savePatientInfo } from '@/utils/patients/patientsapi'
export default { export default {
name: "basicInfo", name: "basicInfo",
components: { components: {
...@@ -60,17 +63,32 @@ ...@@ -60,17 +63,32 @@
} }
}) })
}, },
cancelEdit() {
this.$router.go(-1);
},
saveEdit() { saveEdit() {
this.checkForm = true; this.checkForm = true;
}, },
addListenSave(val) { addListenSave(val) {
this.checkForm = false; this.checkForm = false;
if(val.status) { if(val.status) {
this.patientInfo = val.patientInfoForm
savePatientInfo(this.patientInfo).then(data => {
if(data.code == '000000'){
this.$message.success('保存备注成功')
setTimeout(() => {
this.$router.go(-1);
},500)
}else {
this.$message.error(data.message);
}
})
// 调用保存接口 // 调用保存接口
}else { }else {
this.$message.error('请正确填写信息'); this.$message.error('请正确填写信息');
} }
}, },
//提醒绑定 //提醒绑定
// remindBind() { // remindBind() {
// let remindMobileWechatPara = { // let remindMobileWechatPara = {
...@@ -88,16 +106,6 @@ ...@@ -88,16 +106,6 @@
// } // }
// }) // })
// }, // },
// //保存备注
// saveRemark() {
// savePatientInfo(this.patientInfo).then(data => {
// if(data.code == '000000'){
// this.$message.success('保存备注成功')
// }else {
// this.$message.error(data.message);
// }
// })
// },
}, },
filters: { filters: {
emptyFilter: function(value) { emptyFilter: function(value) {
......
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
v-model="patientInfoForm.idNo" v-model="patientInfoForm.idNo"
placeholder="请输入身份证" placeholder="请输入身份证"
clearable clearable
maxlength="18"
:disabled="hasIdNo"> :disabled="hasIdNo">
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -86,6 +87,7 @@ ...@@ -86,6 +87,7 @@
placeholder="请选择出生年月" placeholder="请选择出生年月"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
value="yyyy-MM-dd" value="yyyy-MM-dd"
@change="getAge"
style="width:250px" style="width:250px"
clearable> clearable>
</el-date-picker> </el-date-picker>
...@@ -224,12 +226,47 @@ ...@@ -224,12 +226,47 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { checkMobile } from '@/utils/patients/checkValid'; import { checkMobile } from '@/utils/patients/checkValid';
import { checkCardNum } from '@/utils/patients/checkCardNum'; import { isCardNo, checkProvince, checkBirthday, checkParity } from '@/utils/patients/checkCardNum';
import { getDiseasesList, getLabelList, getConstants, getNationsList, getRemindPatient,savePatientInfo } from '@/utils/patients/patientsapi'; import { getDiseasesList, getLabelList, getConstants, getNationsList, getRemindPatient,savePatientInfo } from '@/utils/patients/patientsapi';
export default { export default {
name: "basicInfo", name: "basicInfo",
components: {}, components: {},
data() { data() {
let checkCardNum = (rule, value, callback) =>{
let vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
};
//是否为空
// if(value === ''){
// callback(new Error('请输入正确的身份证'))
// }
if(value) {
//校验长度,类型
if(isCardNo(value) === false){
callback(new Error('请输入正确的身份证'))
}
//检查省份
if(checkProvince(value,vcity) === false){
callback(new Error('请输入正确的身份证'))
}
//校验生日
if(checkBirthday(value) === false){
callback(new Error('请输入正确的身份证'))
}
//检验位的检测
if(checkParity(value) === false){
callback(new Error('请输入正确的身份证'))
}
this.go(value.length);
callback()
}else {
callback()
}
};
return { return {
diseasesList: [], diseasesList: [],
labelsList: [], labelsList: [],
...@@ -333,7 +370,6 @@ ...@@ -333,7 +370,6 @@
}); });
getLabelList({ getLabelList({
type: 1, type: 1,
// token: 'FFA85945A8374A4CB63A7616E38060DA',
token: this._token, token: this._token,
}).then((data) => { }).then((data) => {
if(data.code == '000000') { if(data.code == '000000') {
...@@ -385,55 +421,57 @@ ...@@ -385,55 +421,57 @@
} }
}); });
}, },
// async validID(rule,value,callback) // 实现自动生成生日,性别,年龄
// { go(val) {
// // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X let iden = this.patientInfoForm.idNo;
// let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; let sex = null;
// if(value != ''){ let birth = null;
// if (reg.test(value)) { let myDate = new Date();
// await this.go(value.length); let month = myDate.getMonth() + 1;
// callback() let day = myDate.getDate();
// } else { let age = 0;
// callback(new Error('身份证号码不正确'))
// } if(val===18){
// }else { age = myDate.getFullYear() - iden.substring(6, 10) - 1;
// callback(); sex = iden.substring(16,17);
// } birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14);
// }, if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;
//
// // 实现自动生成生日,性别,年龄 }
// go(val) { if(val===15){
// let iden = this.patientInfoForm.idNo; age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
// let sex = null; sex = iden.substring(13,14);
// let birth = null; birth = "19"+iden.substring(6,8)+"-"+iden.substring(8,10)+"-"+iden.substring(10,12);
// let myDate = new Date(); if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
// let month = myDate.getMonth() + 1; }
// let day = myDate.getDate();
// let age = 0; if(sex%2 === 0)
// sex = 2;
// if(val===18){ else
// age = myDate.getFullYear() - iden.substring(6, 10) - 1; sex = 1;
// sex = iden.substring(16,17); this.patientInfoForm.sex = sex;
// birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14); this.patientInfoForm.age = age;
// if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++; this.patientInfoForm.birthTime = birth;
// // this.baseInfo.birthplace = this.area[iden.substring(0,2)];
// } },
// if(val===15){ getAge(val) {
// age = myDate.getFullYear() - iden.substring(6, 8) - 1901; if(val) {
// sex = iden.substring(13,14); let birthdays = new Date(this.patientInfoForm.birthTime.replace(/-/g, "/"));
// birth = "19"+iden.substring(6,8)+"-"+iden.substring(8,10)+"-"+iden.substring(10,12); let d = new Date();
// if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++; let age =
// } d.getFullYear() -
// birthdays.getFullYear() -
// if(sex%2 === 0) (d.getMonth() < birthdays.getMonth() ||
// sex = 2; (d.getMonth() == birthdays.getMonth() &&
// else d.getDate() < birthdays.getDate())
// sex = 1; ? 1
// this.patientInfoForm.sex = sex; : 0);
// this.patientInfoForm.age = age; this.patientInfoForm.age = age;
// this.patientInfoForm.birthTime = birth; }else {
// // this.baseInfo.birthplace = this.area[iden.substring(0,2)]; this.patientInfoForm.age = null;
// }, }
},
}, },
filters: { filters: {
emptyFilter: function(value) { emptyFilter: function(value) {
......
...@@ -28,8 +28,8 @@ ...@@ -28,8 +28,8 @@
<div><p class="title">性别:</p><p class="info">{{patientInfo.sex | sexFileter}}</p></div> <div><p class="title">性别:</p><p class="info">{{patientInfo.sex | sexFileter}}</p></div>
</div> </div>
<div class="item"> <div class="item">
<div><p class="title">民族:</p><p class="info">{{patientInfo.nationality | emptyFilter}}</p></div> <div><p class="title">民族:</p><p class="info">{{nationalityDes}}</p></div>
<div><p class="title">常驻类型:</p><p class="info">{{patientInfo.permanentResidence | emptyFilter}}</p></div> <div><p class="title">常驻类型:</p><p class="info">{{patientInfo.permanentResidence | permanentFilter}}</p></div>
</div> </div>
<div class="item"> <div class="item">
<div><p class="title">健康档案编号:</p><p class="info">{{patientInfo.fileLocator | emptyFilter}}</p></div> <div><p class="title">健康档案编号:</p><p class="info">{{patientInfo.fileLocator | emptyFilter}}</p></div>
...@@ -79,7 +79,12 @@ ...@@ -79,7 +79,12 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="健康记录" name="second"> <el-tab-pane label="健康记录" name="second">
<div class="health-record-list" v-if="recordList.length"> <div class="health-record-list"
v-show="recordList.length"
v-infinite-scroll="loadMore"
:infinite-scroll-disabled="busy"
infinite-scroll-distance="5"
infinite-scroll-immediate-check="true">
<div class="item" v-for="(item, index) in recordList" :key="index"> <div class="item" v-for="(item, index) in recordList" :key="index">
<div class="record-date">{{item.finishedTime}}</div> <div class="record-date">{{item.finishedTime}}</div>
<div class="record-content"> <div class="record-content">
...@@ -101,7 +106,8 @@ ...@@ -101,7 +106,8 @@
</div> </div>
</div> </div>
</div> </div>
<p style="text-align: center;padding:10px 0;cursor: pointer">点击加载更多</p> <p style="text-align: center;padding:10px 0;cursor: pointer" v-if="hasMore">加载中...</p>
<p style="text-align: center;padding:10px 0;cursor: pointer" v-if="!hasMore">没有更多了</p>
</div> </div>
<div class="no-record-content" v-if="!recordList.length"> <div class="no-record-content" v-if="!recordList.length">
<div> <div>
...@@ -119,7 +125,7 @@ ...@@ -119,7 +125,7 @@
<script> <script>
import BreadCrumb from '@/components/breadcrumb' import BreadCrumb from '@/components/breadcrumb'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { getDiseasesList, getPatientDetail, getRemindPatient, deletePatient, savePatientInfo, getHealthRecordList } from '@/utils/patients/patientsapi' import { getDiseasesList, getPatientDetail, getRemindPatient, deletePatient, savePatientInfo, getHealthRecordList, getNationsList } from '@/utils/patients/patientsapi'
export default { export default {
name: "patientDetail", name: "patientDetail",
components: { components: {
...@@ -139,16 +145,21 @@ ...@@ -139,16 +145,21 @@
isWechatBind: 1, isWechatBind: 1,
remark: '', remark: '',
}, },
nationalityDes: '',
showLabelName: '', showLabelName: '',
showDiseaseName: '', showDiseaseName: '',
birthTimeDisplay: '', birthTimeDisplay: '',
recordList: [], recordList: [],
hasMore: true, hasMore: false,
busy: false,
pageNo: 1,
pageSize: 5,
} }
}, },
created() { created() {
this.patientId = this.$route.query.patientId; this.patientId = this.$route.query.patientId;
this.init(); this.init();
this.getRecordList();
}, },
mounted() { mounted() {
}, },
...@@ -195,31 +206,61 @@ ...@@ -195,31 +206,61 @@
} else { } else {
this.showDiseaseName = ''; this.showDiseaseName = '';
} }
// 对民族的处理
if(this.patientInfo.nationality) {
let nationsList = [];
getNationsList().then((data) => {
if(data.code == '000000') {
nationsList = data.data;
nationsList.forEach(item => {
if(String(this.patientInfo.nationality) == item.code ) {
this.nationalityDes = item.name;
}
})
}
})
}else {
this.nationalityDes = '-';
}
} }
} }
}) })
}, },
getRecordList(pageNo, pageSize) { getRecordList() {
let reqPara = { let reqPara = {
doctorId: '101281458',
// patientId: this.patientId, // patientId: this.patientId,
patientId: '99997701', patientId: '99997701',
pageNo: pageNo, pageNo: this.pageNo,
pageSize: pageSize, pageSize: this.pageSize,
} }
getHealthRecordList(reqPara).then((data) => { getHealthRecordList(reqPara).then((data) => {
if(data.code == '000000'){ if(data.code == '000000'){
this.recordList = data.data.healthRecordDtos; // this.recordList = data.data.healthRecordDtos;
// let total = data.data.count; let healthRecordDtos = data.data.healthRecordDtos;
let count = data.data.count;
// if(flag) {
this.recordList = this.recordList.concat(healthRecordDtos);
if(count <= this.pageNo * this.pageSize) {
this.busy = true;
this.hasMore = false;
}else {
this.busy = false;
this.hasMore = true;
}
// }else {
// this.recordList = healthRecordDtos;
// this.busy = false;
// this.hasMore = false;
// }
}else { }else {
this.$message.error(data.message) this.$message.error(data.message)
} }
}) })
}, },
tabChangeHandler(tab) { tabChangeHandler(tab) {
if(tab.name == 'second'){ // if(tab.name == 'second'){
this.getRecordList(1,2); // this.getRecordList(true);
} // }
}, },
deletePatient() { deletePatient() {
// 把写的提示信息需要换行的地方分成数组 confirmText // 把写的提示信息需要换行的地方分成数组 confirmText
...@@ -306,6 +347,15 @@ ...@@ -306,6 +347,15 @@
openScaleDetail(url) { openScaleDetail(url) {
window.open(url) window.open(url)
}, },
loadMore() {
// console.log('触发加载页码',this.pageNo);
this.busy = true; //把busy置位true,这次请求结束前不再执行
setTimeout(() => {
this.pageNo++;
this.getRecordList()
//调用获取数据接口,并且传入一个true,让axios方法指导是否需要拼接数组。
}, 500)
},
}, },
filters: { filters: {
...@@ -327,6 +377,17 @@ ...@@ -327,6 +377,17 @@
return hash[value]; return hash[value];
} }
}, },
permanentFilter: function (value) {
if (!value) {
return '-';
} else {
let hash = {
1: '户籍',
2: '非户籍'
};
return hash[value];
}
}
}, },
} }
</script> </script>
...@@ -387,8 +448,25 @@ ...@@ -387,8 +448,25 @@
} }
} }
.health-record-list{ .health-record-list{
height: 500px; /*height: 300px;*/
overflow-y: scroll; overflow-y: auto;
@media screen and (min-width:1240px) and (max-width:1545px){
height: 300px;
}
@media screen and (min-width:1545px) and (max-width:1600px){
height: 500px;
}
@media screen and (min-width:1600px){
height: 650px;
}
&::-webkit-scrollbar{
width:5px;
}
&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.1);
}
.item{ .item{
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册