web-checkList-miniProgram/pages/riskPiont/riskPiont.vue

<template>
	<view class="risk-container">
		<uni-collapse>
			<uni-collapse-item :title="viewData.checklistTitle">
				<uni-list>
					<uni-list-item  title="名称" :rightText="viewData.checklistTitle"></uni-list-item>
					<uni-list-item  title="类别" :rightText="viewData.checklistCatTitle"></uni-list-item>
					<uni-list-item  title="描述" :rightText="viewData.checklistDesc"></uni-list-item>
				</uni-list>
			</uni-collapse-item>
		</uni-collapse>		
		<view class="item-root" v-for="(hazard,hazardIdx) in hazardList" :key="hazardIdx">
		  <view class="item-root-head">{{hazard.hazardTitle}}</view>
		  <view class="hazard-wrap" v-if="hazard.riskList.length>0">
			<view class="item-children" v-for="(risk,riskIdx) in hazard.riskList" :key="riskIdx" >
			  <view class="measure-wrap" v-if="risk.measureList.length>0">
				<view class="item-children-head">{{risk.riskPointTitle?risk.riskPointTitle:`${hazard.hazardTitle}-风险点-${riskIdx+1}`}}</view>
				<view class="item-grandchild-container">
					<view class="item-grandchild" v-for="(measure,measureIdx) in risk.measureList" :key="measureIdx">
						<view class="title">{{measure.measureContent}}</view>
						<view class="handle-bt" @click.stop="inspect(measure)">检查</view>
					</view>
				</view>
			  </view>
			</view>  
		  </view>             
		</view> 
		<uni-drawer ref="drawePoint" mode="left" :width="300">
			<riskPiontForm></riskPiontForm>
		</uni-drawer>			
	</view>
</template>
<script>
	import {getChecklistByQr} from '@/api/openApi.js'
	import riskPiontForm from '@/components/riskPiontForm.vue'
	export default {
		components: {
			riskPiontForm
		},
		data() {
			return {
				hazardList:[],
				viewData:{
				  author:"",
				  checklistCatId:"",
				  checklistCatTitle:"",
				  checklistDesc:"",
				  checklistId:"",
				  checklistTitle:""          
				} 				
			}
		},
		created() {
			this.init()
		},
		methods:{
			init(){
				const checklistData=uni.getStorageSync('checklistData')
				getChecklistByQr(checklistData.ocId,checklistData.targetId, checklistData.checklistId).then((res) => {
					const { code, data, msg } = res
					if(code===0){
						if(res.data){
							this.hazardList=res.data.hazardList
							this.viewData={
							  author:res.data.author,
							  checklistCatId:res.data.checklistCatId,
							  checklistCatTitle:res.data.checklistCatTitle,
							  checklistDesc:res.data.checklistDesc,
							  checklistId:res.data.checklistId,
							  checklistTitle:res.data.checklistTitle
							}						
						}
					}
				})					
			},
			inspect(){
				this.$refs.drawePoint.open()
			}
		}
	}
</script>

<style lang="scss">
.risk-container{
	&{
		padding: 20rpx;
	}
	.item-root{
		background-color: #F2F2F2;
		margin-top: 26rpx;
	}
}
.risk-container .item-root-head{
    font-size:36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;               
}
.risk-container .item-children{
    margin-top: 30rpx;
    background-color: #FFFFFF;
}
.risk-container .item-children .item-children-head{
    padding:33rpx 27rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;   
    border-bottom: 1px solid #eaeaea;         
}
.risk-container  .item-grandchild-container{
    padding: 0 30rpx;
}
.risk-container .item-grandchild{
    padding:20rpx 30rpx;
    position: relative;
    border-bottom: 1px solid #ccc;
}
.risk-container .item-grandchild .title{
    width: 480rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 26rpx;
    color: #666666;
}
.risk-container .item-grandchild .title.max{
    width: auto;
}
.risk-container .item-grandchild .handle-bt{
    width: 100rpx;
    height: 48rpx;
    background: linear-gradient(90deg, #15CD85 0%, #0ABC88 100%);
    box-shadow: 0px 4px 20px 0px rgba(14, 195, 134, 0.35);
    border-radius: 0.21rem;    
    font-size:26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;    
    text-align: center; 
    line-height: 48rpx;  
    position: absolute;
    right:10rpx;     
    top: 20rpx;    
}
</style>