uniapp vue 子组件监控父组件传递给子组件的属性

最新推荐文章于 2022-05-13 15:58:12 发布
az44yao
最新推荐文章于 2022-05-13 15:58:12 发布
阅读量544
点赞数
本文链接：https://blog.csdn.net/az44yao/article/details/117304416
版权
props:['appointmentid'],
       watch:{appointmentid:(newVal,oldVal) => {
                       console.log('oldVal',oldVal);
       console.log('newVal',newVal);
       }
       } ,
<template name="viewreport">
	<view>
		<view style="display: none;" class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in cuIconList"
			@click="goDetailPage(item.url)"
			 :key="index" v-if="index<gridCol*2">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					
				</view>
				<text>{{item.name}}</text>
			</view> 
		</view>
	<div style="border-bottom: 1px solid #D8D8D8;height: 1px;width: 100%;"></div>	
		
		<uni-collapse>
			<uni-collapse-item title="总述" :open="true" thumb="/static/ti.png">
				<text class="content" style="padding-left: 20px;padding-right: 20px;">{{zongshu}}</text>
			</uni-collapse-item>
			<div style="height: 10px; background-color: #f5f2f0;"></div> 
			
		
		<view class="cu-list menu text-left"  ref="error" @click="toerror(5)">
			<view class="cu-item arrow" style="color: red; font-weight: 800;">
				<view class="content">
					<view>异常项</view>
				</view>
			</view>
		</view>
			<div style="height: 10px; background-color: #f5f2f0;"></div> 
			
			<view v-for="item in list" :key="item.ss" >
			<uni-collapse-item       :title="item.groupCategoryName" :open="true" thumb="/static/ti.png">
				<uni-list>
				<uni-list-item  v-for="it in item.zsResultItemVos" :key="it.tjItemGroupCheckName" >
						<view slot="header" class="slot-box">
										
									</view>
									<text slot="body" class="slot-box slot-text" :class="(it.diagnoseStatus=='2'?'t2red':'t2black')">{{ it.tjItemGroupCheckName }}</text>
									<template slot="footer">
										   <div class="fr">
										
										
										                    <div :class="(it.diagnoseStatus=='2'?'t3red':'t3black')" v-if="it.referMinValue==null">
										                      {{ it.resultDesc }} <span v-if="it.resultDesc!=null">{{ it.referUnitValue }}</span>
										                    </div>
										
										                    <div class="t30" :class="(it.diagnoseStatus=='2'?'t30red':'t30black')"
										                         v-if="it.referMinValue!=null">
										                      {{ it.resultDesc }}
										                    </div>
										
										                    <div v-if="it.referMinValue!=null" class="fanweivalue">
										
										                      参考范围： {{ it.referMinValue }}--{{ it.referMaxValue }}
										
										                    </div>
										                  </div>
									</template>
				</uni-list-item>
				
				 <div class="result">
				                诊断：<span v-for="ix in item.result" :key="ix.sdiagnoseDesc">【{{ ix.diagnoseDesc }}】 {{ ix.diagnosticAdvice }}</span>
				
				              </div>
				
				
				</uni-list>
				
				
				
			</uni-collapse-item>
			<div style="height: 10px; background-color: #f5f2f0;"></div>
		</view>
			
			
			
			
			
			
			
			
			
			
		</uni-collapse>
			<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {request} from '../../api/request' 
	export default {
		name:"viewreport",
		props:['appointmentid'],
		 watch:{appointmentid:(newVal,oldVal) => {
						 console.log('oldVal',oldVal);
		                console.log('newVal',newVal);
		            }
		        } ,
		data() {
			return {
				cuIconList: [{
					cuIcon: 'jiaopian',
					color: 'red',
					badge: 120,
					name: '电子胶片',
					url:'viewpic'
				}, {
					cuIcon: 'baogao',
					color: 'orange',
					badge: 1,
					name: '电子报告',
					url:'viewpic'
				}, {
					cuIcon: 'tuwen',
					color: 'yellow',
					badge: 0,
					name: '图文报告',
					url:'viewpic'
				}, {
					cuIcon: 'zhuanxiangjiancha',
					color: 'olive',
					badge: 22,
					name: '专项报告',
					url:'viewpic'
				}],
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				zongshu:null,
				wordurl:null,
				pdfurl:null,
				his:[],
				      list: [{
				        groupCategoryName: null,
				        zsResultItemVos: [],
				        result: [{diagnosticContent: null, diagnoseDesc: null, diagnosticAdvice: null}]
				      }],
				      data0: [{
				        groupCategoryId: 1,
				        groupCategoryName: "内、外科",
				        deptId: 4,
				        deptName: "内、外科",
				        zsItemGroupVos: [
				          {
				            groupCategoryId: 1,
				            groupCategoryName: "内、外科",
				            deptId: 4,
				            deptName: "内、外科",
				            itemGroupId: 347,
				            itemGroupName: "内、外科（男）",
				            diagnoseDoctorName: null,
				            diagnoseTime: null,
				            zsResultItemVos: [
				              {
				                appointmentItemId: 74620,
				                tjItemId: 516,
				                isSubmit: "1",
				                tjItemGroupCheckName: "心律",
				                diagnoseStatus: "2",
				                referUnitValue: null,
				                referMinValue: null,
				                referMaxValue: null,
				                dangerValue: null,
				                resultDesc: "心律不齐;",
				                tjResultDlag: null,
				                errorResultType: null,
				                scanDoctorId: 127,
				                scanDoctorName: "尿检测试用户",
				                scanDoctorTime: "2021-05-18 17:42:53",
				                diagnoseDoctorId: 127,
				                diagnoseDoctorName: "尿检测试用户",
				                diagnoseTime: "2021-05-18 17:42:53",
				                pooledAnalysisUserId: null,
				                pooledAnalysisUserName: null,
				                pooledAnalysisTime: null,
				                zsResultDiagnoseVos: [
				                  {
				                    id: 3095,
				                    diagnosticContent: "心律不齐",
				                    diagnosticAdvice: "如窦性心律，可暂不干预，必要时专科治疗。",
				                    careInstruction: null,
				                    zsResultEntryVos: [{
				                      entryId: 2199,
				                      diagnosticContent: "心律不齐",
				                      isDefault: null
				                    }]
				                  }
				                ],
				                zsResultDetails: [{
				                  id: 1138,
				                  appointmentId: 2935,
				                  appointChoseItemId: 74620,
				                  resultInfoId: null,
				                  diagnoseId: 3095,
				                  diagnoseStatus: "2",
				                  diagnosticContent: "心律不齐",
				                  diagnoseDesc: "心律不齐;",
				                  diagnosticAdvice: "如窦性心律，可暂不干预，必要时专科治疗。",
				                  careInstruction: null,
				                  createUserId: 127,
				                  createUserName: "尿检测试用户",
				                  createTime: "2021-05-18 17:42:55",
				                  updateUserId: null,
				                  updateTime: null,
				                  updateUserName: null,
				                  isDelete: false,
				                  remark: null
				                }],
				                zsItemEntryList: [{
				                  entryId: 2820,
				                  diagnosticContent: "换个脑子吧-词条",
				                  isDefault: "1"
				                }]
				              }
				            ]
				          }
				        ]
				      }],
				      data: [{
				        groupCategoryId: null,
				        groupCategoryNam: "",
				        zsResultItemVos: [{
				          tjItemGroupCheckName: "",
				          referUnitValue: "",
				          resultDesc: "",
				          referMinValue: "",
				          referMaxValu: "",
				          diagnoseStatus: ""
				        }]
				      }],
				      his: [{appointmentCode: null, customerName: null, appointmentDate: null, createTime: null}],
				      loading: false,
				      finished: false
				
			}
		},
		methods: {
			goDetailPage(path) {
				const url = '/pages/' + path + '/' + path
				
					uni.navigateTo({
						url: url
					})
				
			},
		kkk(l){
			//rerun
			  console.log("******onLoad***************")
			 /*
			
			
			    const his0 = JSON.parse(h);
			    this.his = [];
			    this.his = his0.data;
				
				
				
				 this.list = []
				      console.log("***********************")
				      console.log(this.data0)
				
				
				      const arr = [];
				      for (let i = 0; i < this.data0.length; i++) {
				
				        arr.push(this.data0[i])
				
				
				      }
				      console.log("arr-----------------")
				      console.log(arr)
				      for (let i = 0; i < arr.length; i++) {
				
				        //console.log("大类-----"+i+"----"+arr[i].groupCategoryName);
				
				
				        let arr0 = [];
				        let resultarr0 = [];
				
				        arr[i].zsItemGroupVos.forEach(item => {
				
				          item.zsResultItemVos.forEach(item0 => {
				            console.log(item0.tjItemGroupCheckName + "--------------" + item0.resultDesc);
				            arr0.push(item0)
				
				            if (item0.zsResultDetails != null) {
				              item0.zsResultDetails.forEach(item00 => {
				
				                resultarr0.push(item00)
				
				              })
				            }
				
				
				          })
				
				
				        })
				
				
				        this.list.push({groupCategoryName: arr[i].groupCategoryName, zsResultItemVos: arr0, result: resultarr0})
				
				        this.loading = false;
				        this.finished = true;
				      }
				
				
				      console.log("**list*********************")
				      console.log(this.list)
		
		},
			toerror(n){
				console.log(n)
				uni.navigateTo({
				    url: '/pages/exception/exception?o='+JSON.stringify(this.list)
				});
			}
		},
		mounted() {
			//console.log("*appointmentid*****************"+this.appointmentid)
			 // console.log("******mounted*****************")
			 
			  var _this = this;
			  
			  request('tj/phone_report/query_check_result',
			  {
				barCode: _this.appointmentid,
					queryType: "0",
					errorType: "0",
					isFilterChargeStatus: true,
					searchType: "3"
			  },
			  null).then(
			  res=>{
				  console.log('history_report---',res)
				  if(res[1].data.code==200)
				  {
					  _this.kkk(res[1].data)
					  _this.$store.state.user.hiss.forEach(item=>{
						  if(item.appointmentCode==_this.appointmentid)
						  {
						  	_this.zongshu=item.reportContext
						  	_this.pdfurl=item.reportPdfUrl
						  	_this.wordurl=item.reportDocUrl
						  }
					  })
					  
					  
					  }else
					  {
						  console.log('请求体检报告信息失败')
					  }
				  
				  
			  }
			  ).catch(
			  err=>{
				   console.log('请求体检报告信息异常')
			  }
			  )
			  
			  
			  
			  
			  
			  
			 /* const requestTask = uni.request({
			      url: 'http://localhost:8081/index/getreport', //仅为示例，并非真实接口地址。
			      method:'POST',				  
				  header:{'content-type':'application/json'},
				  data: {
			          'action':'getreport'
			         
			      },
			      success: function(res) {
			          console.log(res.data)
					  // _this.kkk(res.data)
					 
			      }
			  });
			  
			  const requestTask2 = uni.request({
			  			     url: 'http://localhost:8081/index/gethis', //仅为示例，并非真实接口地址。
			  			     method:'POST',				  
			  			 				  header:{'content-type':'application/json'},
			  			 				  data: {
			  			         'action':'gethis'
			  			        
			  			     },
			  			     success: function(res) {
			  			         console.log(res.data)
								  console.log("---kkj;;;;;"+_this.appointmentid)
								 
			  			 					  _this.his = [];
			  			 					  _this.his = res.data.data;
									_this.his.forEach(
									item=>{
										if(item.appointmentCode==_this.appointmentid)
										{
											_this.zongshu=item.reportContext
											_this.pdfurl=item.reportPdfUrl
											_this.wordurl=item.reportDocUrl
										}
									}
									)		  
											  
			  			 					 
			  			     }
			  			 });*/
			  
		},
	
		onReady() {
			  console.log("******onReady****************")
		},
		onShow() {
		    console.log("******onShow****************")
		},
		onHide() {
		      console.log("******hide****************")
		}
		
	}
</script>

<style>
	@charset "UTF-8";
@import "/colorui/iconfont.css"; 
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}
	.t1 {
	  font-size: 16px;
	  display: block;
	  line-height: 50px;
	  font-weight: bold;
	  background-color: #d7fbd5;
	  padding-left: 10px;
	}
	
	.error {
	  font-size: 14px;
	  display: block;
	  line-height: 40px;
	  font-weight: bold;
	  background-color: #FFFFFF;
	  padding-left: 10px;
	  color: red;
	  margin-bottom: 10px;
	}
	
	.fr {
	  float: right;
	  text-align: right;
	  padding-right: 16px;
	}
	
	.fr2 {
	  float: right;
	  text-align: right;
	  font-size: 12px;
	}
	
	.t2 {
	  float: left;	
	  padding-left: 16px;
	}
	
	.t2red {
	  float: left;	 
	  color: red;
	  font-size: 12px;
	  padding-left: 16px;
	}
	
	.t2black {
	  float: left;	 
	  color: black;
	   font-size: 12px;
	  padding-left: 16px;
	  min-width: 80px;
	}
	
	.t3 {
	 
	}
	
	.t3black {
		font-size: 12px;
	
	  color: #000000;
	}
	
	.t3red {
	 font-size: 12px;
	  color: red;
	}
	
	.t30 {
	 font-size: 12px;
	}
	
	.t30red {
		font-size: 12px;
	
	  color: red;
	}
	
	.t30black {
	 font-size: 12px;
	  color: black;
	}
	
	.t31 {
	 
	}
	
	.result {
	  padding-left: 10px;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  background-color: #f9f9f9;
	  font-size: 14px;
	  font-weight: bold;
	  min-height: 40px;
	}
	
	body {
	  margin: 0
	}
	
	
	.fanweivalue {
	
	  color: #c3a982;
	  font-size: 10px;
	}
	
	/* van-tabs 设置高度 （总结自van-tabs实验）*/
	.van-tabs__wrap,
	.van-tabs__wrap scroll-view,
	.van-tabs__nav,
	.van-tab {
	  height: 70px !important;
	  background-color: white;
	}
	
	.van-cell {
	  position: relative;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  width: 100%;
	  padding: 0px 0px !important;
	  overflow: hidden;
	  color: #323233;
	  font-size: 14px;
	  line-height: 24px;
	  background-color: #fff;
	}
	
	.imgico {
	  display: block;
	  height: 30px;
	  margin-left: auto;
	  margin-right: auto;
	}
	
	.imgtext {
	  margin-left: 0;
	  margin-right: 0;
	  margin-top: 5px;
	}
	
	.ka {
	  height: 40px;
	  float: left;
	  margin-top: 5px;
	}
	
	.ka1 {
	  height: 40px;
	  float: left;
	  margin-left: 5px;
	}
	
	.kan {
	  margin-top: 5px;
	  height: 40px;
	  float: right;
	}
	
	#nav {
	  padding: 30px;
	
	  a {
	    font-weight: bold;
	    color: #2c3e50;
	
	    &.router-link-exact-active {
	      color: #42b983;
	    }
	  }
	}
	
	.hisitem {
	  height: 50px;
	  padding-right: 16px;
	  padding-left: 16px;
	}
	.uni-collapse-cell__title-img {
	    height: 26px;
	    width: 26px;
	    margin-right: 10px;
	    margin-top: 5px;
	}
</style>
az44yao
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp vue 子组件监控父组件传递给子组件的属性

props:['appointmentid'], watch:{appointmentid:(newVal,oldVal) => { console.log('oldVal',oldVal); console.log('newVal',newVal); } } ,<template name="view...
复制链接

扫一扫