FE-V2-XCX/pages/pages_patrolInspector/chemicalDetail.vue

<!-- 化学品详情-扫码 -->
<template>
  <view class="course">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="header">
			<view class="header_l">
				<img  :src="circularLogo">
			</view>
			<view class="header_r">
				<view class="header_r_t">{{infoData.chemicalName}}</view>
				<view class="header_r_b">CAS号：{{infoData.casNum}}</view>
				<view class="header_r_b2">库存量：{{infoData.outUsages}}{{infoData.chemicalAmountUnit}}<text class="risk" v-if="infoData.hazardLevel==1">危险化学品</text><text class="ordinary" v-if="infoData.hazardLevel==2">普通化学品</text></view>
			</view>
		</view>
		<view class="tabTitle">
			<view class="tabTitle_li" @tap="tabClick(index)"  :key="index" v-for="(item,index) in tabText">
				<view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
			    <view :class="{on:curTab==index}" class="tabTitle_across"></view>
			</view>
		</view>
		<view class="list" v-if="pageType==0">
			<view class="list_li"><text>编号：</text><text>{{infoData.chemicalNum}}</text></view>
			<view class="list_li"><text>别名：</text><text>{{infoData.anotherName}}</text></view>
			<view class="list_li"><text>分类：</text><text>{{infoData.classifyName}}</text></view>
			<view class="list_li"><text>属性：</text><text>{{infoData.classifyAttribute?infoData.classifyAttribute:'-'}}</text></view>
			<view class="list_li"><text>形态：</text><text>{{infoData.chemicalShapeName}}</text></view>
			
			<view class="list_li"><text>容量规格：</text><text>{{infoData.chemicalAmount}}{{infoData.chemicalAmountUnit}}</text></view>
			<view class="list_li"><text>库存量：</text><text>{{infoData.outUsages}}{{infoData.chemicalAmountUnit}}</text></view>
			<view class="list_li"><text>有效期：</text><text>{{infoData.expirationTime}}</text></view>
			<view class="list_li"><text>学院：</text><text>{{infoData.deptName}}</text></view>
			<view class="list_li"><text>楼栋：</text><text>{{infoData.buildName}}</text></view>
			<view class="list_li"><text>实验室：</text><text>{{infoData.subName}}</text></view>
			<view class="list_li"><text>柜子：</text><text>{{infoData.cabinetName}}</text></view>
		</view>
		<viw class="list_tow" v-if="pageType==1 || pageType==2" v-for="(item,index) in dataList">
			<view class="list_tow_t"><text>{{item.timeStr}}</text><text  v-if="pageType==2">申购人：{{nickName}}</text></view>
			<view class="list_tow_li" v-for="(item2,index2) in item.data">
				<view class="list_tow_li_t">
					<view class="list_tow_li_t_l"></view>
					<view class="list_tow_li_t_c">{{item2.chemicalName}}</view>
					<view class="list_tow_li_t_c2" v-if="item2.useStatus==1 || item2.useStatus==2">领用中</view>
					<view class="list_tow_li_t_r"></view>
				</view>
				<view class="list_tow_li_b">
					<!-- 使用记录 -->
					<view class="list_tow_li_b_li"><text>CAS号:</text><text>{{item2.casNum?item2.casNum:''}}</text></view>
					<view class="list_tow_li_b_li" v-if="pageType==1 && item2.useStatus==0"><text>使用量:</text><text>{{item2.usageAmount}}</text></view>
					<view class="list_tow_li_b_li" v-if="pageType==1"><text>领用人:</text><text>{{item2.nickName}}</text></view>
					<view class="list_tow_li_b_li" v-if="pageType==1 && item2.useStatus==0"><text>余量:</text><text>{{item2.returnStockNum}}</text></view>
					<view class="list_tow_li_b_li" v-if="pageType==1 && (item2.useStatus==1 || item2.useStatus==2)"><text>损耗量:</text><text>{{item2.lossAmount}}</text></view>
					<!-- 申领记录 -->
					<view class="list_tow_li_b_li" v-if="pageType==2"><text>归属人:</text><text>{{item2.nickName}}</text></view>
					<view class="list_tow_li_b_li" v-if="pageType==2"><text>净重:</text><text>{{item2.outUsages}}{{item2.chemicalAmountUnit}}</text></view>
				</view>
			</view>
		</viw>
		<view class="tip" v-if="pageType==1 || pageType==2">仅展示最近三个月的申购记录</view>
	</scroll-view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {appStockListDetail,useRecordByCode,applyByCode,chemical_shape} from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		circularLogo:uni.getStorageSync('circularLogo'),
		baseUrl:config.base_url,
		pageType:0,//0基本信息 1使用记录 2申领记录
		form:{
		},
		tabText:['基本信息','使用记录','申领记录'],
		curTab:0,
		infoData:{},
		tagCode:'23072006367',
		dataList:[],
		nickName:'',
	}
  },
  onLoad(option) {
	 this.tagCode=option.code;
	
  },
  onShow() {
	  
  },
  mounted(){
	  this.chemical_shape();
	  
  },
  methods: {
		//滚动事件
		scrollGet(){},
		tabClick(index) {
			this.curTab = index;
			this.pageType = index;
			this.dataList=[];
			if(this.pageType==1){
				this.getList()
			}else if(this.pageType==2){
				this.getList2()
			}
		},
	    handleClick(doType){
		  let self=this;
		  if(doType=='sign'){//签到遮罩层
			 this.dialogVisible=true; 
		  }else if(doType=='signSubmit'){//确认签到
			  this.shadeStatus=1;
			  setTimeout(function () {
			     self.dialogVisible=false; 
			  }, 3000);
		  }else if(doType=='door'){//柜门
			uni.navigateTo({
			    url: '/pages/pages_patrolInspector/chemicalCatalogue?pageType=1'
			});
		  }else if(doType=='cancel'){//取消返回小程序首页
		  
		  }
		  
	    },
		
		//化学品形态
		async chemical_shape(){
			let _this = this;
			const {data} = await chemical_shape({tagCode:this.tagCode});
			if(data.code == 200){
				this.morphologyData=data.data;
				this.appStockListDetail();
			}
		},
		//详情
		async appStockListDetail(){
			let _this = this;
			const {data} = await appStockListDetail({tagCode:this.tagCode});
			if(data.code == 200){
				_this.infoData=data.data[0];
				_this.morphologyData.forEach(function(item){
					if(item.dictValue==_this.infoData.chemicalShape){
						_this.infoData.chemicalShapeName=item.dictLabel
					}
				})
			}
		},
		//使用记录
		async getList(){
			  let self = this;
			  const {data} = await useRecordByCode({tagCode:this.tagCode});
			  if(data.code==200){
				  this.dataList=data.data
			  }
		},
		//申领记录
		async getList2(){
			  let self = this;
			  const {data} = await applyByCode({tagCode:this.tagCode});
			  if(data.code==200){
				  this.dataList=data.data
				  this.nickName=data.data[0].data[0].nickName
			  }
		},
		
		
		
		
		//关闭弹窗
		dialogOutfire() {
		  this.dialogVisible = !this.dialogVisible
		},
		//提交
		async submitForm(){
			let _this = this;
			const {data} = await checkClapRectify(_this.form);
			if(data.code == 200){
			    uni.showToast({
			        title: '提交成功',
			        icon:"none",
			        mask:true,
			        duration: 2000
			    }); 
				uni.redirectTo({
					url: '/pages_safetyExamine/snapshotManage/snapshotList?pageType='+this.pageType
				});
			   
			}
		},
		
		
	  
  }
}
</script>

<style lang="stylus" scoped>
.course{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
	}
	.header{
		width: 750rpx;
		min-height: 275rpx;
		background: #0096F3;
		display: flex;
		justify-content: flex-start;
		.header_l{
			width: 150rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 75rpx;
			margin:62rpx 40rpx 0 30rpx;
			>img{
				width: 150rpx;
				height: 150rpx;
			}
		}
		.header_r{
			flex: 1;
			.header_r_t{
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48rpx;
				margin-top: 52rpx;
			}
			.header_r_b{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;
				margin-top: 24rpx;
				
			}
			.header_r_b2{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;
				margin-top: 24rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				
			    .risk{
					width: 180rpx;
					height: 50rpx;
					border-radius: 80rpx;
					opacity: 1;
					border: 1rpx solid #FF0000;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FF0000;
					line-height: 50rpx;
					text-align: center;
					margin-right: 24rpx;
				}
				.ordinary{
					width: 180rpx;
					height: 50rpx;
					border-radius: 80rpx;
					opacity: 1;
					border: 1rpx solid #2BCB1D;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #2BCB1D;
					line-height: 50rpx;
					text-align: center;
					margin-right: 24rpx;
				}
				
			}
		}
	}
	.tabTitle{
		width:100%;
		height: 100rpx;
		background: #fff;
		display flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom:20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.tabTitle_li{
			position: relative;
			width:120rpx;
			text-align center;
			margin-right: 48rpx;
			.tabTitle_text{
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 46rpx;
				position: relative;
				>text{
					position:absolute;
					min-width: 30rpx;
					min-height: 30rpx;
					border-radius:54%;
					background: #E80000;
					font-size: 18rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 30rpx;
					margin-left: 6rpx;
					padding:2rpx;
					box-sizing: border-box;
				}
				&.on{
					color:#0183FA;
				}
			}
			.tabTitle_across{
				width: 50rpx;
				height: 4rpx;
				background: #0183FA;
				border-radius: 2rpx;
				margin-left 30rpx;
				display none;
				&.on{
					display block;
				}
			}
	
		}
	}
	.list{
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		margin-top:20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.list_li{
			border-bottom: 1rpx solid #D8D8D8;
			display: flex;
			justify-content: space-between;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
			}
			>text:nth-of-type(2){
				flex:1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
				overflow: hidden;//溢出隐藏
				text-overflow: ellipsis;//省略号
				white-space: nowrap;//强制文本不换行

			}
		}
		.list_li:last-child{
			border-bottom: none;
		}
		
	}
	.list_tow{
		.list_tow_t{
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			>text:nth-of-type(1){
				height: 80rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				
			}
			>text:nth-of-type(2){
				height: 80rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				box-sizing: border-box;
			}
		}	
		.list_tow_li{
			width: 690rpx;
			height:auto;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-bottom: 52rpx;
			box-sizing: border-box;
			margin: 0 30rpx 20rpx;
			.list_tow_li_t{
				position: relative;
				min-height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.list_tow_li_t_l{
					position: absolute;
					left:-15rpx;
					top: 76rpx;
					width: 30rpx;
					height: 30rpx;
					background:#F5F5F5;
					border-radius: 15rpx;
				}
				.list_tow_li_t_c{
					min-height: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
					padding: 20rpx 20rpx;
					box-sizing: border-box;
					
				}
				.list_tow_li_t_c2{
					width: 130rpx;
					height: 50rpx;
					background: rgba(31,165,13,0.2);
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #1FA50D;
					line-height: 50rpx;
					text-align: center;
					margin-right: 34rpx;
				}
				
				.list_tow_li_t_r{
					position: absolute;
					right:-15rpx;
					top: 76rpx;
					width: 30rpx;
					height: 30rpx;
					background:#F5F5F5;
					border-radius: 15rpx;
				}
			}
			.list_tow_li_b{
				height:auto;
				border-top:1px dotted #D8D8D8;
				margin:0 30rpx;
				padding-top:14rpx;
				box-sizing: border-box;
				.list_tow_li_b_li{
					display: flex;
					justify-content: space-between;
					>text:nth-of-type(1){
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 74rpx;
					}
					>text:nth-of-type(2){
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 74rpx;
					}
					
				}
			}
		}	
	}
	.tip{
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 37rpx;
		text-align: center;
		margin-top: 42rpx;
		
	}
}	

</style>