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

Merge branch 'dev-patients-20190513' of...

Merge branch 'dev-patients-20190513' of 192.168.110.53:com.pica.cloud.education.frontend/pica.cloud.web-education-admin into dev-patients-20190513
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"iscroll": "^5.2.0", "iscroll": "^5.2.0",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"qrcode": "^1.3.3",
"showdown": "^1.6.4", "showdown": "^1.6.4",
"vue": "^2.1.0", "vue": "^2.1.0",
"vue-infinite-scroll": "^2.0.2", "vue-infinite-scroll": "^2.0.2",
......
.label-detail-wrap{
.err-text{
height: 12px;
visibility: hidden;
}
.special-error-tips{
.el-textarea__inner{
border: 1px solid red;
outline: none;
}
.err-text{
color: red;
visibility: visible;
}
}
.remove-btn{
color: #449284;
}
}
\ No newline at end of file
.label-detail-wrap{
.screenSet{
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
}
.label-name{
width: 100%; height: 45px;
border-bottom: 1px solid #efefef;
font-size: 14px;
line-height: 32px;
color: #606266;
p{
display: inline-block;
&.name{
color: #93969c;
padding: 0 15px;
}
&.modify{
color: #449284;
cursor: pointer;
}
}
.delete-label{
float: right;
}
}
.label-member{
width: 100%; height: 65px;
font-size: 14px;
color: #606266;
p{
display: inline-block;
line-height: 65px;
&.member-number{
padding: 0 15px;
color: #449284;
}
}
.right{
float: right;
padding-top: 16px;
}
}
.delete-tips{
text-align: center !important;
line-height: 29px;
padding: 0 20px;
}
.pagination-style{
text-align: right;
margin: 20px 0;
}
.table-empty{
width: 100%;
height: auto;
text-align: center;
margin-top: 20%;
.empty-pic{
width: 100px;
height: 100px;
display: block;
border: 0;
margin: 0 auto;
}
.tips{
font-size: 14px;
color: #909399;
line-height: 14px;
padding-bottom: 200px;
}
}
}
\ No newline at end of file
.label-list-wrap{
.el-form-item{
margin-bottom: 0;
.el-textarea{
position: relative;
}
.el-textarea__inner{
outline: none !important;
resize: none !important;
height: 80px;
}
&.special-error-tips{
.el-textarea__inner{
border: 1px solid #F56C6C !important;
outline: none;
resize: none;
}
.err-text{
display: block;
position: absolute;
left: 0;
top: 80px;
}
}
.err-text{
display: none;
color: #F56C6C;
font-size: 12px;
padding-top: 4px;
line-height: 12px;
}
}
}
\ No newline at end of file
.label-list-wrap{
.screenSet{
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
}
.top-title{
font-size: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #efefef;
}
.label-name-row{
margin-top: 10px;
.right{
float: right;
.create-new-label{
float: right;
}
}
}
.total-label{
font-size: 12px; padding: 30px 0 10px;
}
.label-list{
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #efefef;
border-radius: 4px;
overflow: hidden;
overflow-y: scroll;
padding: 20px 10px;
.each-label{
margin: 0 10px 10px 0;
color: #449284;
background: rgba(68,146,132, .1);
border: 1px solid rgba(68,146,132, .2);
&:hover{
color: #fff;
background: #449284;
cursor: pointer;
}
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar
{
width: 5px;
height: 5px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track
{
// border-radius: 10px;
// background-color: rgb(241, 239, 239);
// background: #fff;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bbb;
}
}
.table-empty{
width: 100%;
height: auto;
text-align: center;
.empty-pic{
width: 100px;
height: 100px;
display: block;
border: 0;
margin: 0 auto;
}
.tips{
font-size: 14px;
color: #909399;
}
}
}
.newly-increased-wrap{
.screenSet{
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
&.upload-history-wrap{
margin-top: 30px;
margin: 0;
padding: 0;
.septal-line{
width: 100%;
height: 1px;
background: #EBEEF5;
}
}
}
.top-title{
font-size: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #efefef;
}
.single-input{
background-color: #ffffff!important;
.save-and-add{
text-align: right;
}
}
}
\ No newline at end of file
.newly-increased-wrap{
#msg{
width:200px !important;
height:200px !important;
}
.top-title{
border: 0 !important;
}
.upload-record{
width: 100%;
font-size: 20px;
line-height: 28px;
color: #1E2F3D;
background: #fff;
margin: 30px 0 24px;
}
.pagination-style{
text-align: right;
margin-top: 20px;
}
.tab-list{
flex: 1;
display: flex;
flex-direction: column;
.choose-label-wrap{
.el-dialog__body{
padding: 0 25px 30px;
}
.under-title-tips{
font-size: 12px;
color: #595959;
text-align: center;
}
.row-in-line{
overflow: hidden;
margin-top: 35px;
.el-button, .tips{
display: inline-block;
}
.clear-select{
color: #449284;
border: 1px solid #449284;
&.is-disabled{
color: #c0c4cc !important;
background: #fff !important;
border: 1px solid #dcdfe6 !important;
opacity: 1;
}
}
.tips, .right{
float: right;
}
.tips{
line-height: 32px;
}
}
.list-wrap{
width: 100%;
height: 300px;
border: 1px solid #E4E7ED;
margin-top: 10px;
padding: 10px;
border-radius: 4px;
.el-checkbox{
margin-right: 10px;
margin-left: 0;
margin-bottom: 10px;
}
}
}
.reload-label-modal{
text-align: center;
.el-dialog__body{
padding: 0 25px 8px;
.tips{
text-align: center;
}
}
}
.download-qr-modal{
.qr-pic{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
}
.exp-date{
line-height: 36px;
text-align: center;
color: #606060;
padding-bottom: 10px;
}
.choose-group{
text-align: center;
padding-bottom: 10px;
.title{
display: inline-block;
}
.el-select{
width: 350px;
}
}
.under-tips{
color: #a3a5aa;
font-size: 12px;
line-height: 20px;
text-align: center;
}
}
.el-tabs__item{
color: #303133;
font-weight: 600;
letter-spacing: 1px;
}
.el-tabs__active-bar{
background-color: #449284;
}
.el-tabs__content{
flex: 1;
overflow: hidden;
.el-tab-pane{
width: 100%;
height: 100%;
background: #F0F2F5;
overflow: hidden;
display: flex;
flex-direction: column;
.step-guide{
width: 100%;
background: #fff;
.guide-list{
width: 100%;
height: 237px;
margin-top: 15px;
.first{
width: 308px;
// width: 30%;
height: 200px;
float: left;
.procedure{
width: 100%; height: 20px;
.icon{
width: 20px;
height: 20px;
display: inline-block;
background: #449284;
border-radius: 20px;
text-align: center; line-height: 20px;
font-size: 12px; color: #fff;
}
.text{
display: inline-block;
font-size: 14px;
color: #262626;
font-weight: 600;
}
.border{
display: inline-block;
width: 200px;
// width: 70%;
height: 0px;
border-bottom: 1px solid #449284;
vertical-align: middle;
}
&::after{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
.under-info{
padding-left: 25px;
.step-tips{
width: 100%;
font-size: 12px;
color: #595959;
margin: 8px 0 20px;
}
}
}
.second{
width: 380px;
// width: 40%;
.procedure{
.border{
width: 250px;
// width: 70%;
}
}
.under-info{
.fill-tips{
li{
font-size: 12px;
width: 300px;
line-height: 18px;
.tips-title{
display: inline-block;
color: #262626;
font-weight: 600;
&.notice{
color: #449284;
}
}
p{
display: inline;
color: #595959;
}
}
}
}
}
.third{
width: 300px;
// width: 30%;
.el-upload{
width: 260px;
height: 150px;
}
.el-upload-dragger{
width: 260px;
// width: 100%;
height: 150px;
}
}
}
}
.upload-table{
}
.el-table__body-wrapper{
&::-webkit-scrollbar
{
width: 5px;
height: 5px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bbb;
}
}
}
}
.qr-code-wrap{
background: #fff;
.qr-group{
width: 100%; height:auto;
overflow: hidden;
margin: 30px 0 40px;
.label-name{
display: inline-block;
font-size: 12px;
color: #8C8C8C;
}
.el-tag{
color: #449284;
background:rgba(236,244,242,1);
border:1px solid rgba(150,195,193,1);
margin-left: 10px;
&.choose-group{
color: #666666;
background:rgba(255,255,255,1);
border:1px dashed rgba(217,217,217,1);
cursor: pointer;
}
}
}
.qr-pic-wrap{
width: 100%; height: auto;
.qr-box{
width: 200px;
margin: 0 auto;
text-align: center;
.pic{
background:rgba(240,242,245,1);
width: 200px; height: auto;
border: 0;
.qr-code-img{
width: 200px;
height: 200px;
overflow: hidden;
border: 0;
display: block;
}
border: 0;
.qr-download-btn{
color: #fff;
background: #449284;
width: 200px;
border: 0;
}
}
.time-limit{
width: 100%;
text-align: center;
color: #8C8C8C;
font-size: 12px;
line-height: 41px;
}
.refresh-btn{
color: #449284;
background:rgba(236,244,242,1);
border:1px solid rgba(150,195,193,1);
}
}
}
.border-space{
width: 100%;
height: 1px;
background: #EBEEF5;
margin-top: 30px;
}
.increased-steps-wrap{
overflow: hidden;
.label-title{
font-size: 20px;
color: #1E2F3D;
line-height: 28px;
margin: 30px 0 24px;
}
.flow-path{
// width: 100%;
height: 441px;
display: block;
border: 0;
margin-left: -20px;
}
}
}
}
}
\ No newline at end of file
...@@ -74,17 +74,35 @@ export const getDiseasesList = (params) => { ...@@ -74,17 +74,35 @@ export const getDiseasesList = (params) => {
}; };
// 新增居民 // 新增居民
export const getQRCode = data => {
return fetch({
headers,
url: getBaseUrl(`healths/qrcodes/get`),
method: 'post',
data: data,
description: '获取二维码',
})
}
export const getUploadHistory = params => { // 获取上传历史记录 export const getUploadHistory = params => {
return fetch({ return fetch({
headers, headers,
url: getBaseUrl(`/healths/docImpPat/import/records`), url: getBaseUrl(`healths/docImpPat/import/records`),
method: 'get', method: 'get',
params: params, params: params,
description: '获取上传历史记录', description: '获取上传历史记录',
}) })
} }
export const refreshCode = data => {
return fetch({
headers,
url: getBaseUrl(`healths/qrcodes/refresh`),
method: 'post',
data: data,
description: '刷新二维码有效期',
})
}
// 分组管理 // 分组管理
export const getLabelList = (params) => { export const getLabelList = (params) => {
......
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<span>{{item.menuName}}</span> <span>{{item.menuName}}</span>
<span>{{item.portalTime}}</span> <span>{{item.portalTime}}</span>
</div> </div>
<div class="text-bottom">{{item.content}}</div> <div class="text-bottom" v-html="item.content"></div>
</div> </div>
</div> </div>
<div class="no-message" v-else> <div class="no-message" v-else>
......
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
> >
<template slot-scope="scope" v-if="!isUngrouped"> <template slot-scope="scope" v-if="!isUngrouped">
<el-button <el-button
class="remove-btn"
@click.native.prevent="goToDeleteRow(scope.$index, searchData.tableData)" @click.native.prevent="goToDeleteRow(scope.$index, searchData.tableData)"
type="text" type="text"
size="small"> size="small">
...@@ -72,6 +73,7 @@ ...@@ -72,6 +73,7 @@
</div> </div>
</el-table> </el-table>
<el-pagination <el-pagination
v-if="searchData.tableData && searchData.tableData.length > 0"
class="pagination-style" class="pagination-style"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
...@@ -114,7 +116,7 @@ ...@@ -114,7 +116,7 @@
:show-close='false' :show-close='false'
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<div class="delete-tips">分组删除后,所有分组具名(共{{searchData.tableData.length}}人)将不再属于此分组。</div> <div class="delete-tips">分组删除后,所有分组具名(共{{searchData.totalRows}}人)将不再属于此分组。</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cancelDeleteLabel">取 消</el-button> <el-button @click="cancelDeleteLabel">取 消</el-button>
<el-button type="primary" @click="confirmDeleteLabel">确认移除</el-button> <el-button type="primary" @click="confirmDeleteLabel">确认移除</el-button>
...@@ -203,7 +205,7 @@ ...@@ -203,7 +205,7 @@
}, },
// 挂载到Dom完成时 // 挂载到Dom完成时
mounted() { mounted() {
commonUtil.resizeHeight(); // commonUtil.resizeHeight();
}, },
methods: { methods: {
getDetail() { getDetail() {
...@@ -286,6 +288,7 @@ ...@@ -286,6 +288,7 @@
}, },
handleChangeLabelName(){ handleChangeLabelName(){
this.showChangeLabelNameDialog = true; this.showChangeLabelNameDialog = true;
this.ruleForm.newLabelName = this.$route.query.labelName;
}, },
cancelChangeName(){ cancelChangeName(){
this.isChangeNameError = false; this.isChangeNameError = false;
...@@ -332,6 +335,10 @@ ...@@ -332,6 +335,10 @@
} }
}).catch(err => { }).catch(err => {
console.log('error: ', err) console.log('error: ', err)
this.$message({
message: '请求接口失败,请重新再试',
type: 'warning'
});
}); });
}, },
goToDeleteRow(index, rows) { goToDeleteRow(index, rows) {
...@@ -419,78 +426,10 @@ ...@@ -419,78 +426,10 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
.label-detail-wrap{ @import "../../../style/patient-manager/labels-manager/labels-detail-wrap.less";
.screenSet{
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
}
.label-name{
width: 100%; height: 45px;
border-bottom: 1px solid #efefef;
font-size: 14px;
line-height: 32px;
color: #606266;
p{
display: inline-block;
&.name{
color: #93969c;
padding: 0 15px;
}
&.modify{
color: #449284;
cursor: pointer;
}
}
.delete-label{
float: right;
}
}
.label-member{
width: 100%; height: 65px;
font-size: 14px;
color: #606266;
p{
display: inline-block;
line-height: 65px;
&.member-number{
padding: 0 15px;
color: #449284;
}
}
.right{
float: right;
padding-top: 16px;
}
}
.delete-tips{
text-align: center !important;
line-height: 29px;
padding: 0 20px;
}
.pagination-style{
text-align: right;
}
.table-empty{
width: 100%;
height: auto;
text-align: center;
.empty-pic{
width: 100px;
height: 100px;
display: block;
border: 0;
margin: 0 auto;
}
.tips{
font-size: 14px;
color: #909399;
line-height: 14px;
}
}
}
</style> </style>
<style lang="less" scoped>
@import "../../../style/patient-manager/labels-manager/labels-detail.less";
</style>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
<p class="total-label">共:{{labelNameList.length}}个分组</p> <p class="total-label">共:{{totalListCount}}个分组</p>
<div class="label-list" v-if="labelNameList && labelNameList.length > 0"> <div class="label-list" v-if="labelNameList && labelNameList.length > 0">
<el-tag class="each-label" @click="goToDetail(item)" v-for="(item, index) in labelNameList" :key="index">{{item.labelName}}({{item.labelPatientNums}}人)</el-tag> <el-tag class="each-label" @click="goToDetail(item)" v-for="(item, index) in labelNameList" :key="index">{{item.labelName}}({{item.labelPatientNums}}人)</el-tag>
</div> </div>
...@@ -70,6 +70,7 @@ ...@@ -70,6 +70,7 @@
curmbSecond: "分组管理", curmbSecond: "分组管理",
labelName: '', labelName: '',
labelNameList: [], labelNameList: [],
totalListCount: 0,
centerDialogVisible: false, centerDialogVisible: false,
ruleForm: { ruleForm: {
newLabelName: '', // 新建分组名 newLabelName: '', // 新建分组名
...@@ -98,17 +99,28 @@ ...@@ -98,17 +99,28 @@
// 获取分组列表 // 获取分组列表
let params = { let params = {
type: 1, type: 1,
token : localStorage.getItem("token"),
}; };
if(this.labelName){ if(this.labelName){
params.labelName = this.labelName; params.labelName = this.labelName;
} }
commonUtil.openLoading(this); // commonUtil.openLoading(this);
getLabelList(params).then(data => { getLabelList(params).then(data => {
commonUtil.closeLoading(this); // commonUtil.closeLoading(this);
// console.log('获取分组列表>> ', data) // console.log('获取分组列表>> ', data)
let hasNoLabel = 0; // 是否存在未分组
if(data.data && data.data.labelNameList){ if(data.data && data.data.labelNameList){
this.labelNameList = data.data.labelNameList; this.labelNameList = data.data.labelNameList;
for(let i=0; i<this.labelNameList.length; i++){
if(this.labelNameList[i].labelId == 0){
hasNoLabel = 1;
return;
}
}
if( hasNoLabel == 1 ){
this.totalListCount = this.labelNameList.length - 1;
}else{
this.totalListCount = this.labelNameList.length;
}
} }
}).catch(err => { }).catch(err => {
console.log('error: ', err) console.log('error: ', err)
...@@ -187,125 +199,11 @@ ...@@ -187,125 +199,11 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.label-list-wrap{ @import "../../../style/patient-manager/labels-manager/labels-list.less";
.screenSet{
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
}
.top-title{
font-size: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #efefef;
}
.label-name-row{
margin-top: 10px;
.right{
float: right;
.create-new-label{
float: right;
}
}
}
.total-label{
font-size: 12px; padding: 30px 0 10px;
}
.label-list{
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #efefef;
border-radius: 4px;
overflow: hidden;
overflow-y: scroll;
padding: 20px 10px;
.each-label{
margin: 0 10px 10px 0;
color: #449284;
background: rgba(68,146,132, .1);
border: 1px solid rgba(68,146,132, .2);
&:hover{
color: #fff;
background: #449284;
cursor: pointer;
}
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar
{
width: 5px;
height: 5px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track
{
// border-radius: 10px;
// background-color: rgb(241, 239, 239);
// background: #fff;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bbb;
}
}
.table-empty{
width: 100%;
height: auto;
text-align: center;
.empty-pic{
width: 100px;
height: 100px;
display: block;
border: 0;
margin: 0 auto;
}
.tips{
font-size: 14px;
color: #909399;
}
}
}
</style> </style>
<style lang="less"> <style lang="less">
.label-list-wrap{ @import "../../../style/patient-manager/labels-manager/labels-list-wrap.less";
.el-form-item{
margin-bottom: 0;
.el-textarea{
position: relative;
}
.el-textarea__inner{
outline: none !important;
resize: none !important;
height: 80px;
}
&.special-error-tips{
.el-textarea__inner{
border: 1px solid #F56C6C !important;
outline: none;
resize: none;
}
.err-text{
display: block;
position: absolute;
left: 0;
top: 80px;
}
}
.err-text{
display: none;
color: #F56C6C;
font-size: 12px;
padding-top: 4px;
line-height: 12px;
}
}
}
</style> </style>
<template>
<div>
<div class="step-guide">
<ul class="guide-list">
<li class="first">
<div class="procedure">
<i class="icon">1</i>
<p class="text">下载模板</p>
<p class="border"></p>
</div>
<div class="under-info">
<p class="step-tips">点击下方“下载模板”</p>
<el-button type="primary" size="small" @click="handleDownloadDemo">下载模板</el-button>
</div>
</li>
<li class="first second">
<div class="procedure">
<i class="icon">2</i>
<p class="text">填写居民信息</p>
<p class="border"></p>
</div>
<div class="under-info">
<p class="step-tips">按照模板编辑居民信息</p>
<ul class="fill-tips">
<li>
<i class="tips-title notice">填写要求:</i>
</li>
<li>
<i class="tips-title">居民姓名:</i>
<p>当前支持2~15个字符</p>
</li>
<li>
<i class="tips-title">出生年月:</i>
<p>"年-月-日",我们将优先识别身份证信息中的出生年月信息,若身份证未填,将识别此处信息。</p>
</li>
<li>
<i class="tips-title">居住地址:</i>
<p>≤50字</p>
</li>
<li>
<i class="tips-title">电话:</i>
<p>请输入11为手机号码</p>
</li>
<li>
<i class="tips-title">分组与诊断:</i>
<p>多个分组之间,用中文逗号“,”分割</p>
</li>
</ul>
</div>
</li>
<li class="first third">
<div class="procedure">
<i class="icon">3</i>
<p class="text">上传文件</p>
</div>
<div class="under-info">
<p class="step-tips">将填写好的居民信息文件在下方进行上传</p>
<el-upload
class="upload-file"
drag
:action="uploadUrl"
:headers="uploadHeaders"
:file-list="files"
:on-change="changeFile"
:on-error="uploadError"
:on-success="uploadSuccess"
:show-file-list="false"
:multiple="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
</div>
</li>
</ul>
</div>
<div class="component-content screenSet upload-history-wrap">
<p class="septal-line"></p>
<p class="upload-record">上传历史记录:120</p>
<el-table
:data="searchData.tableData"
class="upload-table"
style="width: 100%">
<el-table-column
header-align="center"
align="center"
prop="fileName"
label="文件名"
width="180">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="uploadTime"
label="上传时间"
width="180">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="insertCount"
label="新导入居民数">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="updateCount"
label="更新居民资料数">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="status"
label="处理状态">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="address"
label="关闭理由">
</el-table-column>
</el-table>
<el-pagination
class="pagination-style"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="searchData.totalCount"
:current-page="1"
:page-sizes="[10, 30, 50, 100]"
:page-size="searchData.pageSize"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
</template>
<script>
import { getSaasDomain } from '@/utils/index';
import {
getUploadHistory,
} from "@/utils/patients/patientsapi";
export default {
data() {
return {
uploadUrl: `${getSaasDomain('web/patientManages/import')}`,
searchData: {
pageNo: 1, // 第几页
pageSize: 10, // 每页条数
tableData: [],
totalCount: 0,
},
uploadHeaders: {
token: localStorage.getItem('token')
},
files: [],
}
},
created() {
this.goToGetUploadHistory();
},
methods: {
handleDownloadDemo(){
window.location.href = 'https://file.yunqueyi.com/File/template/居民导入模板.xlsx';
},
goToGetUploadHistory(){
console.log('go get upload history>>>>>>')
let params = {
pageNo: this.searchData.pageNo,
pageSize: this.searchData.pageSize,
};
getUploadHistory(params).then(res => {
console.log('获取上传历史记录:', res);
if(res.code == "000000"){
if(res.data.importRecordsModelList.length > 0){
this.searchData.tableData = res.data.importRecordsModelList;
this.searchData.totalCount = res.data.count;
}
}else{
// 获取失败
this.$message({
message: '接口返回失败,请重新再试',
type: 'warning'
});
}
})
},
changeFile(file, fileList) {
const name = file.name;
const type = name.substring(name.lastIndexOf('.') + 1);
if (type !== 'xls' && type !== 'xlsx') {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
});
fileList.splice(0, 1);
return false;
}
if (fileList.length > 1) {
fileList.splice(0, 1);
}
this.files = [file];
},
uploadError(err, file, fileList){
console.log('%c upload Error >>>>>>>>', 'color: red;')
},
uploadSuccess(response, file, fileList) {
console.log('%c upload Success >>>>>>>>', 'color: red;')
// this.loading = false;
// this.visible = false;
// this.tipShow = true;
console.log('response: ', response);
console.log('file: ', file);
console.log('fileList: ', fileList)
// console.log(response, file, fileList);
const { code } = response;
this.code = response.code;
const codes = ['000000', '400002', '400004'];
if (codes.indexOf(code) > -1) {
this.error = response.data;
} else {
this.error = response.message;
}
},
handleCurrentChange(val) {
this.searchData.pageNo = val;
this.goToGetUploadHistory();
},
handleSizeChange(val) {
this.searchData.pageSize = val;
this.goToGetUploadHistory();
},
},
}
</script>
<template>
<div>
<div class="qr-code-wrap">
<el-alert
class="top-tips"
title="提醒:选择分组后,会自动生成相应的分组二维码,居民扫码后直接进入该分组(若未选择分组,则自动生成未分组二维码,居民扫码后进入默认未分组)"
type="warning"
show-icon>
</el-alert>
<div class="qr-group">
<p class="label-name">二维码分组:</p>
<template v-for="labelItem in currentLabelList">
<el-tag size="small" :key="labelItem">{{labelItem}}</el-tag>
</template>
<el-tag size="small" class="choose-group" @click="handleChooseGroup">+ 选择分组</el-tag>
</div>
<div class="qr-pic-wrap">
<div class="qr-box">
<div class="pic">
<!-- <vue-qr :text="qrCodeInfo.qrcodeUrl" class="qr-code-img"></vue-qr> -->
<canvas id="msg"></canvas>
<el-button icon="el-icon-download" class="qr-download-btn" @click="handleQRDownloadModal">下载二维码</el-button>
</div>
<p class="time-limit">有效期:{{qrCodeInfo.beginTime}}-{{qrCodeInfo.endTime}} </p>
<el-button icon="el-icon-refresh" class="refresh-btn" size="small" @click="handleRefreshCode">刷新有效期</el-button>
</div>
</div>
<div class="border-space"></div>
<div class="increased-steps-wrap">
<div class="label-title">居民添加流程</div>
<img src="../../../../assets/image/patient-add-flow-path.png" alt="" class="flow-path">
</div>
</div>
<!-- 选择分组 弹窗 -->
<el-dialog
class="choose-label-wrap"
title="选择分组"
:visible.sync="showChooseLabelModal"
width="680px"
:close-on-click-modal="false"
center>
<p class="under-title-tips">选择分组后,会自动生成相应的分组二维码,居民扫码后直接进入该分组</p>
<el-row class="row-in-line">
<el-button size="small" class="clear-select" :disabled="choosedLabelList.length<1" @click="handleClearSelect">清空选择</el-button>
<el-button type="primary" class="right" size="small" @click="handleGoToLabelManage">分组管理</el-button>
<p class="tips">未找到分组可去分组管理新建分组</p>
</el-row>
<div class="list-wrap">
<el-checkbox-group v-model="choosedLabelList">
<template v-for="item in labelNameList" >
<el-checkbox v-if="item.labelId != 0" :label="item.labelId" border :key="item.labelId">
{{item.labelName}}
</el-checkbox>
</template>
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="showChooseLabelModal = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleAfterChooseLabel" size="small">确 定</el-button>
</span>
</el-dialog>
<!-- 重新加载当前分组列表 -->
<el-dialog
class="reload-label-modal"
:visible.sync="showReloadLabelModal"
width="320px"
:show-close="false"
:close-on-click-modal="false"
center>
<p class="tips">您刚才跳转到分组管理页面进行新建分组,请点击下方按钮刷新数据</p>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleReloadLabel">重新加载</el-button>
</span>
</el-dialog>
<!-- 下载二维码 弹窗 -->
<el-dialog
class="download-qr-modal"
title="下载二维码"
:visible.sync="showDownloadQRModal"
width="500px"
:show-close="false"
:close-on-click-modal="false"
center>
<div class="qr-pic"></div>
<p class="exp-date">有效期:2019.5.1-2019.5.30</p>
<div class="choose-group">
<p class="title">分组:</p>
<el-select v-model="currentQRDownloadGroup" placeholder="选择分组">
<el-option
v-for="item in qrDownloadGroups"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<p class="under-tips">选择分组后,会自动生成相应的分组二维码,居民扫码后直接进入该分组</p>
<p class="under-tips">(若未选择分组,则自动生成未分组二维码,居民扫码后进入默认未分组)</p>
<span slot="footer" class="dialog-footer">
<el-button @click="showDownloadQRModal = false">取 消</el-button>
<el-button type="primary" @click="handleGoToDownloadQR">确定下载</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import QRCode from 'qrcode';
import {
getQRCode,
refreshCode,
getLabelList,
} from "@/utils/patients/patientsapi";
export default {
name: "qrCodeImport",
data() {
return {
showChooseLabelModal: false,
showReloadLabelModal: false,
showDownloadQRModal: false,
currentQRDownloadGroup: '',
qrCodeInfo: {
qrcodeUrl: '',
beginTime: '',
endTime: '',
id: '',
labelIds: '',
},
currentLabelList: [],
labelNameList: [],
choosedLabelList: [],
qrDownloadGroups: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}]
}
},
created() {
this.goToGetQRCode({
labelIds: '',
id: '',
first: true,
});
},
methods: {
// 二维码录入
goToGetQRCode(params){
getQRCode(params).then(res => {
if(res.code == '000000'){
let data = res.data;
this.qrCodeInfo = data;
if(data.labelIds != ''){
this.currentLabelList = data.labelIds.split(',');
}
this.calculateQRCode(data.qrcodeUrl);
}else{
this.$message({
message: '获取二维码失败,请重新再试',
type: 'warning'
});
}
})
},
calculateQRCode(val){
// 获取页面的canvas
var msg= document.getElementById('msg')
// 将获取到的数据(val)画到msg(canvas)上
QRCode.toCanvas(msg, val, function (error) {
console.log(error)
})
},
handleChooseGroup() {
this.showChooseLabelModal = true;
this.goToGetGroupList();
},
handleRefreshCode() {
let params = {
labelIds: this.qrCodeInfo.labelIds,
id: this.qrCodeInfo.id,
first: false,
}
refreshCode(params).then(res => {
if(res.code == '000000'){
let data = res.data;
this.qrCodeInfo = data;
if(data.labelIds != ''){
this.currentLabelList = data.labelIds.split(',');
}
}else{
this.$message({
message: '获取二维码失败,请重新再试',
type: 'warning'
});
}
})
},
handleQRDownloadModal() {
this.showDownloadQRModal = true;
},
handleGoToDownloadQR() {
alert('待接口OK')
},
handleAfterChooseLabel() {
if(this.choosedLabelList.length < 1){
this.$message({
message: '请选择分组',
type: 'warning'
});
return;
}
this.showChooseLabelModal = false;
this.goToGetQRCode({
labelIds: this.choosedLabelList.join(','),
id: '',
first: false,
});
this.choosedLabelList = [];
},
handleClearSelect() {
this.choosedLabelList = [];
},
goToGetGroupList() {
// 获取分组列表
let params = {
type: 1,
};
if(this.labelName){
params.labelName = this.labelName;
}
getLabelList(params).then(data => {
// console.log('获取分组列表>> ', data)
if(data.data && data.data.labelNameList){
this.labelNameList = data.data.labelNameList;
}
}).catch(err => {
console.log('error: ', err)
});
},
handleGoToLabelManage(){
let routeUrl = this.$router.resolve({
path: '/patients-manage/labels-manage/labels-list',
});
window.open(routeUrl.href, '_blank');
this.showReloadLabelModal = true;
},
handleReloadLabel() {
this.showReloadLabelModal = false;
this.goToGetGroupList();
},
},
}
</script>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册