提交 e9bae8dd 编写于 作者: 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
<template> <template>
<div class="opinion-container"> <div class="opinion-container">
<el-dialog title="意见反馈" :center="true" :visible.sync="dialogFormVisible" :before-close="beforeClose"> <el-dialog title="意见反馈" :center="true" :visible.sync="dialogFormVisible" :before-close="beforeClose" :close-on-click-modal="false">
<el-form :model="form" :rules="rules" ref="opinionForm" > <el-form :model="form" :rules="rules" ref="opinionForm" >
<el-form-item label="意见反馈:" :label-width="formLabelWidth" prop="opinion"> <el-form-item label="意见反馈:" :label-width="formLabelWidth" prop="opinion">
<el-input type="textarea" :rows="10" :maxlength="maxlength" v-model="form.opinion" autocomplete="off" placeholder="请告诉我们您遇到的问题或者建议"></el-input> <el-input type="textarea" :rows="5" :maxlength="maxlength" v-model="form.opinion" autocomplete="off" placeholder="请告诉我们您遇到的问题或者建议"></el-input>
<span class="text-count">{{currentCount}}/{{maxlength}}</span> <span class="text-count">{{currentCount}}/{{maxlength}}</span>
</el-form-item> </el-form-item>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</el-form-item> </el-form-item>
<el-form-item label="联系方式:" :label-width="formLabelWidth" prop="contact"> <el-form-item label="联系方式:" :label-width="formLabelWidth" prop="contact">
<el-input v-model="form.contact" maxlength="11" autocomplete="off" placeholder="请输入您的联系方式,如有需要我们会尽快联系您"></el-input> <el-input v-model="form.contact" autocomplete="off" placeholder="请输入您的联系方式,如有需要我们会尽快联系您" class="contact-info"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -251,6 +251,9 @@ ...@@ -251,6 +251,9 @@
.el-upload-list--picture .el-upload-list__item-status-label{ .el-upload-list--picture .el-upload-list__item-status-label{
background: #449284; background: #449284;
} }
.el-dialog--center .el-dialog__body{
padding: 25px 25px 0;
}
.el-dialog__footer{ .el-dialog__footer{
padding: 0; padding: 0;
} }
...@@ -283,7 +286,9 @@ ...@@ -283,7 +286,9 @@
} }
} }
} }
.contact-info{
width: 100% !important;
}
.result-opinion{ .result-opinion{
border-radius: 8px!important; border-radius: 8px!important;
text-align: center; text-align: center;
......
...@@ -104,6 +104,16 @@ export const refreshCode = data => { ...@@ -104,6 +104,16 @@ export const refreshCode = data => {
}) })
} }
export const getLabelsInfo = params => {
return fetch({
headers,
url: getBaseUrl(`healths/qrcodes/getLabelsInfo`),
method: 'get',
params: params,
description: '获取分组信息',
})
}
// 分组管理 // 分组管理
export const getLabelList = (params) => { export const getLabelList = (params) => {
return fetch({ return fetch({
......
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
height: 64px; height: 64px;
width: 100%; width: 100%;
z-index: 1000; // z-index: 1000;
font-size: 22px; font-size: 22px;
line-height: 64px; line-height: 64px;
color: #fff; color: #fff;
......
...@@ -9,15 +9,14 @@ ...@@ -9,15 +9,14 @@
</el-alert> </el-alert>
<div class="qr-group"> <div class="qr-group">
<p class="label-name">二维码分组:</p> <p class="label-name">二维码分组:</p>
<template v-for="labelItem in currentLabelList"> <template v-for="(labelItem, index) in labelsInfoList">
<el-tag size="small" :key="labelItem">{{labelItem}}</el-tag> <el-tag size="small" :key="index">{{labelItem.labelName}}</el-tag>
</template> </template>
<el-tag size="small" class="choose-group" @click="handleChooseGroup">+ 选择分组</el-tag> <el-tag size="small" class="choose-group" @click="handleChooseGroup">+ 选择分组</el-tag>
</div> </div>
<div class="qr-pic-wrap"> <div class="qr-pic-wrap">
<div class="qr-box"> <div class="qr-box">
<div class="pic"> <div class="pic">
<!-- <vue-qr :text="qrCodeInfo.qrcodeUrl" class="qr-code-img"></vue-qr> -->
<canvas id="msg"></canvas> <canvas id="msg"></canvas>
<el-button icon="el-icon-download" class="qr-download-btn" @click="handleQRDownloadModal">下载二维码</el-button> <el-button icon="el-icon-download" class="qr-download-btn" @click="handleQRDownloadModal">下载二维码</el-button>
</div> </div>
...@@ -42,8 +41,10 @@ ...@@ -42,8 +41,10 @@
<p class="under-title-tips">选择分组后,会自动生成相应的分组二维码,居民扫码后直接进入该分组</p> <p class="under-title-tips">选择分组后,会自动生成相应的分组二维码,居民扫码后直接进入该分组</p>
<el-row class="row-in-line"> <el-row class="row-in-line">
<el-button size="small" class="clear-select" :disabled="choosedLabelList.length<1" @click="handleClearSelect">清空选择</el-button> <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> <template v-if="!showDownloadQRModal">
<p class="tips">未找到分组可去分组管理新建分组</p> <el-button type="primary" class="right" size="small" @click="handleGoToLabelManage">分组管理</el-button>
<p class="tips">未找到分组可去分组管理新建分组</p>
</template>
</el-row> </el-row>
<div class="list-wrap"> <div class="list-wrap">
<el-checkbox-group v-model="choosedLabelList"> <el-checkbox-group v-model="choosedLabelList">
...@@ -55,8 +56,8 @@ ...@@ -55,8 +56,8 @@
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="showChooseLabelModal = false" size="small">取 消</el-button> <el-button @click="handleCloseChooseLabelModal" size="small">取 消</el-button>
<el-button type="primary" @click="handleAfterChooseLabel" size="small">确 定</el-button> <el-button type="primary" @click="handleAfterChooseLabel" size="small">{{showDownloadQRModal == false ? '确 定' : '确定下载'}}</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 重新加载当前分组列表 --> <!-- 重新加载当前分组列表 -->
...@@ -72,35 +73,6 @@ ...@@ -72,35 +73,6 @@
<el-button type="primary" @click="handleReloadLabel">重新加载</el-button> <el-button type="primary" @click="handleReloadLabel">重新加载</el-button>
</span> </span>
</el-dialog> </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> </div>
</template> </template>
...@@ -110,6 +82,7 @@ ...@@ -110,6 +82,7 @@
getQRCode, getQRCode,
refreshCode, refreshCode,
getLabelList, getLabelList,
getLabelsInfo,
} from "@/utils/patients/patientsapi"; } from "@/utils/patients/patientsapi";
export default { export default {
...@@ -118,8 +91,7 @@ ...@@ -118,8 +91,7 @@
return { return {
showChooseLabelModal: false, showChooseLabelModal: false,
showReloadLabelModal: false, showReloadLabelModal: false,
showDownloadQRModal: false, showDownloadQRModal: false, //下载二维码弹窗时, 是否隐藏“选择分组”里的分组管理部分
currentQRDownloadGroup: '',
qrCodeInfo: { qrCodeInfo: {
qrcodeUrl: '', qrcodeUrl: '',
beginTime: '', beginTime: '',
...@@ -127,26 +99,10 @@ ...@@ -127,26 +99,10 @@
id: '', id: '',
labelIds: '', labelIds: '',
}, },
labelsInfoList: [],
currentLabelList: [], currentLabelList: [],
labelNameList: [], labelNameList: [],
choosedLabelList: [], choosedLabelList: [],
qrDownloadGroups: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}]
} }
}, },
created() { created() {
...@@ -156,7 +112,19 @@ ...@@ -156,7 +112,19 @@
first: true, first: true,
}); });
}, },
watch: {
showChooseLabelModal: function(val) {
if(val == false){
console.log('%c 隐藏选择分组', 'color: red;', val)
this.labelNameList = [];
this.choosedLabelList = [];
}
},
},
methods: { methods: {
handleCloseChooseLabelModal() {
this.showChooseLabelModal = false;
},
// 二维码录入 // 二维码录入
goToGetQRCode(params){ goToGetQRCode(params){
getQRCode(params).then(res => { getQRCode(params).then(res => {
...@@ -164,9 +132,13 @@ ...@@ -164,9 +132,13 @@
let data = res.data; let data = res.data;
this.qrCodeInfo = data; this.qrCodeInfo = data;
if(data.labelIds != ''){ if(data.labelIds != ''){
this.currentLabelList = data.labelIds.split(','); let temp = data.labelIds.split(',');
this.currentLabelList = this.formatList(temp);
} }
this.calculateQRCode(data.qrcodeUrl); this.calculateQRCode(data.qrcodeUrl);
this.handleGetLabelsInfo({
labelIds: data.labelIds,
});
}else{ }else{
this.$message({ this.$message({
message: '获取二维码失败,请重新再试', message: '获取二维码失败,请重新再试',
...@@ -175,6 +147,18 @@ ...@@ -175,6 +147,18 @@
} }
}) })
}, },
formatList(arr) {
return arr.map((item, index) => {
return parseInt(item);
})
},
handleGetLabelsInfo(params) {
getLabelsInfo(params).then(res => {
if(res.code == '000000'){
this.labelsInfoList = res.data;
}
})
},
calculateQRCode(val){ calculateQRCode(val){
// 获取页面的canvas // 获取页面的canvas
var msg= document.getElementById('msg') var msg= document.getElementById('msg')
...@@ -184,7 +168,9 @@ ...@@ -184,7 +168,9 @@
}) })
}, },
handleChooseGroup() { handleChooseGroup() {
this.showChooseLabelModal = true; this.showDownloadQRModal = false;
// 回显已经选择的label
this.choosedLabelList = this.currentLabelList;
this.goToGetGroupList(); this.goToGetGroupList();
}, },
handleRefreshCode() { handleRefreshCode() {
...@@ -198,7 +184,8 @@ ...@@ -198,7 +184,8 @@
let data = res.data; let data = res.data;
this.qrCodeInfo = data; this.qrCodeInfo = data;
if(data.labelIds != ''){ if(data.labelIds != ''){
this.currentLabelList = data.labelIds.split(','); let temp = data.labelIds.split(',');
this.currentLabelList = this.formatList(temp);
} }
}else{ }else{
this.$message({ this.$message({
...@@ -209,10 +196,11 @@ ...@@ -209,10 +196,11 @@
}) })
}, },
handleQRDownloadModal() { handleQRDownloadModal() {
this.showDownloadQRModal = true; this.showDownloadQRModal = true;
}, // 回显已经选择的label
handleGoToDownloadQR() { this.choosedLabelList = this.currentLabelList;
alert('待接口OK') this.goToGetGroupList();
}, },
handleAfterChooseLabel() { handleAfterChooseLabel() {
if(this.choosedLabelList.length < 1){ if(this.choosedLabelList.length < 1){
...@@ -222,13 +210,18 @@ ...@@ -222,13 +210,18 @@
}); });
return; return;
} }
this.showChooseLabelModal = false; if( this.showDownloadQRModal == false ){
this.goToGetQRCode({ this.showChooseLabelModal = false;
labelIds: this.choosedLabelList.join(','), this.goToGetQRCode({
id: '', labelIds: this.choosedLabelList.join(','),
first: false, id: '',
}); first: false,
this.choosedLabelList = []; });
this.choosedLabelList = [];
}else{
alert('去下载二维码。。。')
}
}, },
handleClearSelect() { handleClearSelect() {
this.choosedLabelList = []; this.choosedLabelList = [];
...@@ -245,6 +238,7 @@ ...@@ -245,6 +238,7 @@
// console.log('获取分组列表>> ', data) // console.log('获取分组列表>> ', data)
if(data.data && data.data.labelNameList){ if(data.data && data.data.labelNameList){
this.labelNameList = data.data.labelNameList; this.labelNameList = data.data.labelNameList;
this.showChooseLabelModal = true;
} }
}).catch(err => { }).catch(err => {
console.log('error: ', err) console.log('error: ', err)
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册