1.前期準備
明确可以檢視什麼
- 中醫體質測評裡面的内容
- 體檢報告裡面醫生的評估結果:醫生的評估結果會在使用者的備注裡面說明出來
需要重新添加的功能
- 健康管理師除了之前給使用者設定的風險等級除外,還需要在使用者的備注資訊裡面去添加備注内容,也就是通過檢視體檢報告和測評結果,二者共同對使用者的身體健康與建議寫入備注資訊中
2.新增的功能:
通過在風險測評裡面點選編輯功能,可以對使用者的備注資訊進行編輯
前台代碼
member-risk.html
<a type="primary" size="mini" @click="handleAssess(scope.row)">評估</a>
<!-- 添加評估彈出 -->
<div class="add-form">
<el-dialog title="新增檢查項" :visible.sync="dialogFormVisible">
<el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
{{this.formData.name}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="評價或建議" prop="name">
<el-input v-model="formData.suggestion" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleEditSuggestion()">确定</el-button>
</div>
</el-dialog>
</div>
//套餐評估界面
handleAssess(row){
//彈出編輯視窗
this.dialogFormVisible = true;
//回顯資料,通過發送ajax請求根據id查詢目前檢查項資料,進行回顯
axios.get("/assess/findById.do?id="+row.id).then((res)=>{
//判斷這個controller是否執行成功
if (res.data.flag){
//進行回顯,基于vue的資料綁定實作,可以檢視上面的内容可以發現都是雙向綁定formData内容的
this.formData = res.data.data;
}else {
//查詢失敗,彈出提示
this.$message.error(res.data.message);
}
}).catch((r)=>{
this.showMessage(r);
});
},
handleEditSuggestion(){
//表單校驗通過,可以送出資料
axios.post("/member/editRemark.do",this.formData).then((res)=>{
if (res.data.flag){
//controller操作成功
this.$message({
type:'success',
message:res.data.message
});
}else {
//執行失敗
this.$message.error(res.data.message);
}
}).finally(()=>{
//finally不管成功還是失敗都要調用分頁查詢方法
this.findPage();
//隐藏編輯視窗
this.dialogFormVisible = false;
});
}
背景代碼
MemberController
//編輯檢查項
// @PreAuthorize("hasAuthority('CHECKITEM_EDIT')")//權限校驗
@RequestMapping("/editRemark")//使其那個被通路到
public Result editRemark(@RequestBody Assess assess){
//使用try。。catch。。進行成功還是失敗判斷
try{
memberService.editRemark(assess);//如果調用失敗就進入catch,沒有失敗就
}catch (Exception e){
//證明調用失敗
e.printStackTrace();
return new Result(false, MessageConstant.EVALUATE_FAIL);
}
//證明成功
return new Result(true, MessageConstant.EVALUATE_SUCCESS);
}
MemberSerive
@Override
public void editRemark(Assess assess) {
System.out.println("assess != null:"+assess != null);
System.out.println(assess);
if (assess != null){
if (assess.getSuggestion() != null){
String suggestion = assess.getSuggestion();
memberDao.editRemark(assess);
}
}
}
3.使用者展示頁面
前台代碼
health-risk.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 上述3個meta标簽*必須*放在最前面,任何其他内容都*必須*跟随其後! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../img/asset-favico.ico">
<title>客戶體檢資訊健康管理系統</title>
<link rel="stylesheet" href="../css/page-health-index.css" />
<link rel="stylesheet" href="../css/page-health-login.css" />
<link rel="stylesheet" href="../plugins/elementui/index.css" />
<script src="../plugins/jquery/dist/jquery.min.js"></script>
<script src="../plugins/healthmobile.js"></script>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script>
var phoneNumber = getUrlParam("phoneNumber");//根據請求URL中的參數名稱擷取對應的值
</script>
<style>
/* CSS Document */
.tabtop13 {
margin-top: 13px;
}
.tabtop13 td{
background-color:#ffffff;
height:25px;
line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
font-family: 微軟雅黑;
font-size: 26px;
font-weight: bold;
border-bottom:1px dashed #CCCCCC;
color: #255e95;
}
.titfont {
font-family: 微軟雅黑;
font-size: 16px;
font-weight: bold;
color: #255e95;
background-color:#e9faff;
}
.tabtxt2 {
font-family: 微軟雅黑;
font-size: 14px;
font-weight: bold;
text-align: right;
padding-right: 10px;
color:#327cd1;
}
.tabtxt3 {
font-family: 微軟雅黑;
font-size: 14px;
padding-left: 15px;
color: #000;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app">
<!-- 頁面頭部 -->
<div class="top-header">
<span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
<span class="center">客戶體檢資訊健康管理系統</span>
<span class="f-right"><i class="icon-more"></i></span>
</div>
<!-- 頁面内容 -->
<div class="contentBox">
<div class="list-column2">
<h2>姓名:小楊</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" class="biaoti" height="60">健康評估</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
<tr>
<td width="20%" rowspan="9" class="btbg1 font-center">中醫辨識體質分析</td>
<td width="10%" class="btbg2">平和質</td>
<td width="15%">{{assessList.calmQuality}}</td>
<td width="15%">養生要點</td>
<td>
1.飲食有節制,不要常吃過冷過熱或不幹淨的食物, 粗細糧食要合理搭配;
<br>2.養成良好的作息習慣。
</td>
</tr>
<tr>
<td class="btbg2">氣虛質</td>
<td >{{assessList.qiDeficiencyQuality}}</td>
<td width="15%">養生要點</td>
<td>
1.氣功鍛煉:重在練氣。<br>
2.中成藥:補中益氣丸、香砂六君丸、參苓白術丸、 玉屏風丸、生脈口服液(生脈飲)。 <br>
3.藥膳調攝:多食補氣之品。
</td>
</tr>
<tr>
<td class="btbg2">陽虛質</td>
<td >{{assessList.yangDeficiencyQuality}}</td>
<td width="15%">養生要點</td>
<td>
1.環境調攝:避寒就溫。<br>
2.體育鍛煉:加強體育鍛煉,使動則生陽。<br>
3.中成藥:金匮腎氣丸、桂附地黃丸、附子理中丸、桂附理中 丸、還少丹、苁蓉通便口服液等。<br>
4.藥膳調攝:選用補陽祛寒、溫養肝腎之品。
</td>
</tr>
<tr>
<td class="btbg2">陰虛質</td>
<td >{{assessList.yinDeficiencyQuality}}</td>
<td width="10%">養生要點</td>
<td>
1.環境調攝:注意秋冬養陰,夏季避暑。<br>
2.體育鍛煉:不宜過激活動,着重咽津功法。<br>
3.中成藥:六味地黃丸、杞菊地黃丸、知柏地黃丸、大補陰丸<br>
等。
4.藥膳調攝:服食滋陰清熱、滋養肝腎之品,少吃蔥、姜、蒜、 韭、薤、椒等辛辣食物。
</td>
</tr>
<tr>
<td class="btbg2">痰濕質</td>
<td >{{assessList.phlegmDampnessQuality}}</td>
<td width="10%">養生要點</td>
<td>
1.環境調攝:避潮濕。<br>
2.體育鍛煉:長期堅持體育鍛煉。因體形肥胖,易于困倦,
故應根據自己的具體情況循序漸進,長期堅持運動鍛煉。<br>
3.中成藥:橘紅丸、二陳丸、香砂六君丸、參苓白術丸、藿
香正氣膠囊等。<br>
4.藥膳調攝:食宜清淡,調補肺、脾、腎,驅除痰濕,不宜
肥甘。
</td>
</tr>
<tr>
<td class="btbg2">濕熱質</td>
<td >{{assessList.dampHeatQuality}}</td>
<td width="10%">養生要點</td>
<td>
1.精神調養:靜養,防止發怒沖動。<br>
2.體育鍛煉:積極鍛煉,散發餘熱。适合中長跑、遊泳、爬山、
各種球類、國術等運動。<br>
3.中成藥:一清膠囊、清開靈口服液、鮮竹瀝口服液、黃連上
清丸、濕毒清、龍膽瀉肝丸等。<br>
4.藥膳調攝:宜清熱化濕之品,少食辛辣燥烈與肥甘厚味。
</td>
</tr>
<tr>
<td class="btbg2">血瘀質</td>
<td >{{assessList.bloodStasisQuality}}</td>
<td width="10%">養生要點</td>
<td>
1.體育鍛煉:多做有利于心髒血脈的活動。如各種舞蹈、步
行健身法等。<br>
2.精神調養:培養樂觀情緒。<br>
3.中成藥:四物合劑、八珍益母丸、血府逐瘀口服液、複方
丹參滴丸、銀杏葉片等。<br>
4.藥膳調攝:可食活血、化瘀、養血之品,少食肥肉等滋膩
之品。
</td>
</tr>
<tr>
<td class="btbg2">氣郁質</td>
<td >{{assessList.qiStagnationQuality}}</td>
<td width="10%">養生要點</td>
<td>
1.精神調攝:多參加集體活動、康樂活動,培養開朗豁達的
性格。<br>
2.體育鍛煉:多參加體育鍛煉及旅遊活動。<br>
3.中成藥:逍遙丸、加味逍遙丸、四磨湯口服液、氣滞胃痛
顆粒等。<br>
4.藥膳調攝:少量飲酒以活動血脈,多食行氣、疏肝、解郁
之中藥和食物。
</td>
</tr>
<tr>
<td class="btbg2">特禀質</td>
<td >{{assessList.specialIntrinsicQuality}}</td>
<td width="10%">養生要點</td>
<td>
暫無
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" class="biaoti" height="60">健康管理師建議</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
<tr>
<td width="20%" rowspan="1" class="btbg1 font-center">存在風險</td>
<td class="btbg2">{{assessList.evaluate}}</td>
</tr>
<tr>
<td width="20px" rowspan="3" class="btbg1 font-center">建議</td>
<td width="80%">
{{assessList.suggestion}}</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 頁面 css js -->
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<!--<script src="../js/page-health-order.js"></script>-->
<script>
var vue = new Vue({
el:'#app',
data:{
phoneNumber:this.phoneNumber,
// fileNames:null,
assessList:{}//模型資料,用于展示
},
methods:{
handleShow(fileName,orderStatus){
if (fileName !=null){
window.location.href = 'http://r1mmj5zj3.hn-bkt.clouddn.com/'+fileName;
}else {
alert("報告未上傳");
}
}
},
created (){
// alert(this.phoneNumber)
//發送ajax請求,擷取所有的套餐資料,指派給setmealList模型資料,用于頁面展示
axios.get("/massess/getAssessByTelephone.do?phoneNumber="+phoneNumber).then((res) => {
if(res.data.flag){
//查詢成功,給模型資料指派
this.assessList = res.data.data;
}else{
//查詢失敗,彈出提示資訊
this.$message.error(res.data.message);
}
});
}
});
</script>
</body>
</html>
背景代碼
MAssessController
//查詢目前會員的評估資訊
@RequestMapping("/getAssessByTelephone")
public Result getAssessByTelephone(String phoneNumber){
try{
Assess assess = assessService.getAssessByTelephone(phoneNumber);
return new Result(true, MessageConstant.GET_ASSESS_SUCCESS,assess);
}catch (Exception e){
e.printStackTrace();
return new Result(false, MessageConstant.GET_ASSESS_FAIL);
}
}
AssessServiceImpl
@Override
public Assess getAssessByTelephone(String phoneNumber) {
//擷取目前号碼的會員主鍵id
Member member = memberDao.findByTelephone(phoneNumber);
Assess assess = null;
if (member != null){
if (member.getId() != null){
Integer memberId = member.getId();
//通過主鍵id擷取t_assess表中的所有資料
assess = assessDao.findByMemberId(memberId);
}
if (member.getRemark() != null){
assess.setSuggestion(member.getRemark());
}
}
return assess;
}