FE-lab-xcx/pages_basics/views/chemicalsInfo/chemicalsInfo.vue

<!-- 化学品信息(扫码进入) -->
<template>
	<view id="chemicalsInfo">
		<view class="info-data-box">
			<img class="logo-img" :src="circularLogo">
			<view class="title-box">
				<view class="title-one-box">
					<span>{{newData.chemicalName}}</span>
					<span class="color-border">{{newData.chemicalLevel == 1?'管控':'非管控'}}</span>
					<span :class="newData.useStatus == 0 || newData.useStatus == -1?'colorA':(
					newData.useStatus == 1 || newData.useStatus == 5?'colorB':(
					newData.useStatus == 2 ?'colorC':(
					newData.useStatus == 3 ?'colorD':(
					newData.useStatus == 4 ?'colorE':''))))">
					{{newData.useStatus == 0 || newData.useStatus == -1?'未使用':(
					newData.useStatus==1 || newData.useStatus==5?'使用中':(
					newData.useStatus==2?'超时未归还':(
					newData.useStatus==3?'空瓶出库':(
					newData.useStatus==4?'废弃出库':''))))}}
					</span>
				</view>
				<view class="title-two-box">编号：{{newData.tagCode}}</view>
				<view class="title-three-box">余量：{{newData.surplus}}{{newData.specUnit}}</view>
			</view>
		</view>
		<view class="table-button-max-box">
			<view class="table-button-box" @click='tableButtonCheck(1)'
			:class="pageType==1?'checkClass':''">
				<view>基本信息</view>
				<view></view>
			</view>
			<view class="table-button-box" @click='tableButtonCheck(2)'
			:class="pageType==2?'checkClass':''">
				<view>使用记录</view>
				<view></view>
			</view>
		</view>
		<!-- 基础信息 -->
		<view class="info-max-big-box" v-if="pageType == 1">
			<view class="info-big-box">
				<view class="info-box">
					<view>C A S</view>
					<view>:</view>
					<view>{{newData.casNum}}</view>
				</view>
				<view class="info-box">
					<view>别名</view>
					<view>:</view>
					<view>{{newData.chemicalNameChar}}</view>
				</view>
				<view class="info-box">
					<view>类别</view>
					<view>:</view>
					<view>{{newData.chemicalCategory}}</view>
				</view>
				<view class="info-box">
					<view>规格</view>
					<view>:</view>
					<view>{{newData.specNum}}{{newData.specUnit?newData.specUnit+'/瓶':''}}</view>
				</view>
				<view class="info-box">
					<view>归属人</view>
					<view>:</view>
					<view>{{newData.belongName}}</view>
				</view>
				<view class="info-box">
					<view style="width:120rpx;">存储位置</view>
					<view>:</view>
					<view>{{newData.cabinetName}}{{newData.doorName?' - '+newData.doorName:''}}{{newData.layers?' - '+newData.layers:''}}</view>
				</view>
			</view>
			<view class="info-big-box">
				<view class="info-box">
					<view>学院</view>
					<view>:</view>
					<view>{{newData.deptName}}</view>
				</view>
				<view class="info-box">
					<view>楼栋</view>
					<view>:</view>
					<view>{{newData.schoolName}} - {{newData.buildName}}</view>
				</view>
				<view class="info-box">
					<view>实验室</view>
					<view>:</view>
					<view>{{newData.subName}}{{newData.subRoom?'('+newData.subRoom+')':''}}</view>
				</view>
			</view>
		</view>
		<!-- 使用记录 -->
		<scroll-view class="info-list-box" v-if="pageType == 2" scroll-y @scrolltolower="scrollGet">
			<view class="for-max-big-box" v-for="(item,index) in dataList" :key="index">
				<view class="for-title-box">
					<view class="time-box">{{item.joinOutTime}}</view>
					<view class="position-top-right" 
					:class="item.type == 0?'colorF':(
					item.type == 1?'colorD':(
					item.type == 3?'colorD':(
					item.type == 4?'colorE':(
					item.type == 5?'colorD':(
					item.type == 6?'colorG':'')))))">
						{{item.type == 0?'归还':(
						item.type == 1?'领用':(
						item.type == 3?'空瓶出库':(
						item.type == 4?'废弃出库':(
						item.type == 5?'整瓶领用':(
						item.type == 6?'存储':'')))))}}
					</view>
					<view class="border-box"></view>
					<view class="position-left"></view>
					<view class="position-right"></view>
				</view>
				<!-- 领用/整瓶领用 -->
				<view class="for-info-box" v-if="item.type == 1 || item.type == 5">
					<view class="for-info-min-box">
						<view>领用人</view>
						<view>：</view>
						<view>{{item.useName}}</view>
					</view>
					<view class="for-info-min-box">
						<view>领用量</view>
						<view>：</view>
						<view>{{item.collectStockNum}}</view>
					</view>
					<view class="for-info-min-box">
						<view style="width:120rpx;">双人认证</view>
						<view>：</view>
						<view>{{item.oneUserName}}</view>
					</view>
				</view>
				<!-- 存储 -->
				<view class="for-info-box" v-if="item.type == 6">
					<view class="for-info-min-box">
						<view>存储人</view>
						<view>：</view>
						<view>{{item.useName}}</view>
					</view>
					<view class="for-info-min-box">
						<view>余量</view>
						<view>：</view>
						<view>{{item.surplus}}</view>
					</view>
					<view class="for-info-min-box">
						<view style="width:120rpx;">双人认证</view>
						<view>：</view>
						<view>{{item.oneUserName}}</view>
					</view>
				</view>
				<!-- 废弃出库/空瓶出库 -->
				<view class="for-info-box" v-if="item.type == 3 ||item.type == 4">
					<view class="for-info-min-box">
						<view>废弃人</view>
						<view>：</view>
						<view>{{item.useName}}</view>
					</view>
					<view class="for-info-min-box">
						<view style="width:120rpx;">双人认证</view>
						<view>：</view>
						<view>{{item.oneUserName}}</view>
					</view>
					<view class="for-info-min-box">
						<view style="width:120rpx;">出库原因</view>
						<view>：</view>
						<view>{{item.reason}}</view>
					</view>
				</view>
				<!-- 归还 -->
				<view class="for-info-box" v-if="item.type == 0">
					<view class="for-info-min-box">
						<view>归还人</view>
						<view>：</view>
						<view>{{item.useName}}</view>
					</view>
					<view class="for-info-min-box">
						<view>使用量</view>
						<view>：</view>
						<view>{{item.usages}}</view>
					</view>
					<view class="for-info-min-box">
						<view>余量</view>
						<view>：</view>
						<view>{{item.surplus}}</view>
					</view>
					<view class="for-info-min-box">
						<view style="width:120rpx;">双人认证</view>
						<view>：</view>
						<view>{{item.oneUserName}}</view>
					</view>
				</view>
			</view>
			<view class="null-box" v-if="!dataList[0]">
				<img :src="imagesUrl('commonality/chemicalsInfoNull.png')">
				<view>暂无数据</view>
			</view>
			<view class="get-null-box" v-if="getDataType">仅展示最近三个月使用记录</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		chemicalAppletSelectStockRecord,
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				circularLogo: uni.getStorageSync('circularLogo'),
				newData:{},
				pageType:1,
				//使用记录 相关
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				total: 0,
				dataList: [],
				getDataType: false,
			}
		},
		onLoad(option) {
			if(option.item){
				let obj = JSON.parse(decodeURIComponent(option.item))
				this.$set(this,'newData',obj);
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			tableButtonCheck(type){
				if(this.pageType != type){
					this.$set(this,'pageType',type);
				}
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			async getList(){
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams))
				obj.tagCode = this.newData.code;
				const {
					data
				} = await chemicalAppletSelectStockRecord(obj);
				if (data.code == 200) {
					if (self.queryParams.page == 1) {
						this.$set(this,'dataList',data.data.records);
						this.$set(this,'total',data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.$set(this,'dataList',[...this.dataList, ...data.data.records]);
						this.$set(this,'total',data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
		},
	}
</script>


<style lang="stylus" scoped>
	#chemicalsInfo {
		height: 100%;
		display flex;
		flex-direction: column;
		.info-data-box{
			display: flex;
			background-color: #fff;
			padding-bottom:40rpx;
			.logo-img{
				width:120rpx;
				height:120rpx;
				display: inline-block;
				margin:40rpx 40rpx 0 30rpx;
			}
			.title-box{
				flex:1;
				.title-one-box{
					margin:28rpx 47rpx 0 0;
					span:nth-child(1){
						font-size:30rpx;
						color:#333;
						line-height:45rpx;
						font-size:30rpx;
						font-weight:700;
					}
					span:nth-child(2){
						display: inline-block;
						min-width:100rpx;
						height:34rpx;
						line-height:32rpx;
						font-size:24rpx;
						margin:0 10rpx 0;
						text-align: center;
						border-radius:6rpx;
					}
					span:nth-child(3){
						display: inline-block;
						min-width:120rpx;
						height:34rpx;
						line-height:32rpx;
						font-size:24rpx;
						margin:0 10rpx 0;
						text-align: center;
						border-radius:6rpx;
					}
				}
				.title-two-box{
					line-height:50rpx;
					font-size:28rpx;
					margin-top:10rpx;
				}
				.title-three-box{
					line-height:50rpx;
					font-size:28rpx;
				}
			}
		}
		.table-button-max-box{
			display: flex;
			height:100rpx;
			.table-button-box{
				height:75rpx;
				width:120rpx;
				margin:25rpx 30rpx 0 30rpx;
				view:nth-child(1){
					font-size:30rpx;
					line-height:50rpx;
					height:50rpx;
				}
			}
			.checkClass{
				view:nth-child(1){
					color:#0183FA;
				}
				view:nth-child(2){
					height:4rpx;
					width:90rpx;
					margin:0 15rpx;
					background-color:#0183FA;
				}
			}
		}
		.info-max-big-box{
			margin:0 30rpx 0;
			.info-big-box{
				background-color:#fff;
				margin-bottom:20rpx;
				border-radius:20rpx;
				.info-box:nth-child(1){
					border-top:none;
				}
				.info-box{
					display: flex;
					border-top:1rpx solid #E0E0E0;
					margin:0 30rpx;
					view{
						line-height:80rpx;
						font-size:28rpx;
						color:#333;
					}
					view:nth-child(1){
						width:90rpx;
						text-align: justify;
						word-break: break-all;
						text-align-last: justify;
					}
					view:nth-child(2){
						margin-left:5rpx;
					}
					view:nth-child(3){
						flex:1;
						text-align: right;
						line-height:30rpx;
						padding:25rpx 0 25rpx 25rpx;
					}
				}
			}
		}
		.info-list-box{
			flex: 1;
			overflow: scroll;
			.for-max-big-box{
				background-color: #fff;
				margin:0 30rpx 20rpx 30rpx;
				border-radius:10rpx;
				.for-title-box{
					height:118rpx;
					position: relative;
					overflow: hidden;
					.time-box{
						height:100rpx;
						line-height:93rpx;
						font-size:28rpx;
						color:#333;
						padding-left:30rpx;
					}
					.position-top-right{
						position: absolute;
						top:0;
						right:0;
						width:100rpx;
						height:36rpx;
						line-height:36rpx;
						font-size:24rpx;
						text-align: center;
						border-radius: 0rpx 10rpx 0rpx 6rpx;
					}
					.colorA{
						color:#0183FA;
						background: rgba(1,131,250,0.2);
					}
					.colorB{
						color:#07BC11;
						background: rgba(7,188,17,0.2);
					}
					.border-box{
						border-top:1rpx dashed #F5F5F5;
						height:18rpx;
					}
					.position-left{
						width:30rpx;
						height:30rpx;
						z-index:1;
						position:absolute;
						bottom:3rpx;
						left:-15rpx;
						background-color: #F5F5F5;
						border-radius:50%;
					}
					.position-right{
						width:30rpx;
						height:30rpx;
						z-index:1;
						position:absolute;
						bottom:3rpx;
						right:-15rpx;
						background-color: #F5F5F5;
						border-radius:50%;
						
					}
				}
				.for-info-box{
					.for-info-min-box{
						display: flex;
						padding:0 30rpx;
						view{
							line-height:80rpx;
							font-size:28rpx;
							color:#333;
						}
						view:nth-child(1){
							width:90rpx;
							text-align: justify;
							word-break: break-all;
							text-align-last: justify;
						}
						view:nth-child(2){
							margin-left:5rpx;
						}
						view:nth-child(3){
							flex:1;
							text-align: right
							line-height:30rpx;
							padding:25rpx 0 25rpx 25rpx;
						}
					}
				}
			}
			.null-box{
				img{
					width:300rpx;
					height:300rpx;
					margin:150rpx 225rpx 0;
					display: inline-block;
				}
				view{
					color:#999;
					font-size:28rpx;
					line-height:40rpx;
					text-align: center;
					margin-top:15rpx;
				}
			}
			.get-null-box {
				height: 100rpx;
				line-height: 100rpx;
				color: #999;
				text-align center
				padding-bottom:200rpx;
			}
		}
		//管控/非管控
		.color-border{
			border:1px solid #0183FA;
			background: #fff;
			color:#0183FA;
		}
		//未使用
		.colorA{
			border:1px solid #EDEDED;
			background: #EDEDED;
			color:#999;
		}
		//使用中
		.colorB{
			border:1px solid rgba(1,131,250,0.2);
			background: rgba(1,131,250,0.2);
			color:#0183FA;
		}
		//超时未归还
		.colorC{
			border:1px solid rgba(255,140,0,0.2);
			background: rgba(255,140,0,0.2);
			color:#FF8C00;
		}
		//空瓶出库
		.colorD{
			border:1px solid rgba(43,128,255,0.2);
			background: rgba(43,128,255,0.2);
			color:#2B80FF;
		}
		//废弃出库
		.colorE{
			border:1px solid #D6D6D6;
			background: #D6D6D6;
			color:#666666;
		}
		//归还
		.colorF{
			border:1px solid rgba(7,188,17,0.2);
			background: rgba(7,188,17,0.2);
			color:#07BC11;
		}
		//存储
		.colorG{
			border:1px solid rgba(0,185,191,0.2);
			background: rgba(0,185,191,0.2);
			color:#00B9BF;
		}
	}
</style>