FE-lab-xcx/pages_supplierCylinderManagement/views/gasCylinderManagement/cylinderDetails.vue

<!-- 气瓶详情 -->
<template>
	<view id="gasCylinderDetails">
		<view class="text-max-big-box">
			<view class="for-title-box">
				<view>气瓶状态：</view>
				<view :class="newData.state==1?'colorA':(newData.state==2?'colorB':'')">{{newData.state==0?'待入库':(newData.state==1?'已入库':'已出库')}}</view>
			</view>
		</view>
		<view class="title-p" v-if="newData.state == 1">气瓶信息</view>
		<view class="text-max-big-box">
			<view class="for-text-box" v-if="!newData.specialGases">
				<view>气瓶编码：</view>
				<view>{{newData.bottleCode}}</view>
			</view>
			<view class="for-text-box">
				<view>气体：</view>
				<view>{{newData.gasName}}</view>
			</view>
			<view class="for-text-box">
				<view>气瓶规格：</view>
				<view>{{newData.specification}}</view>
			</view>
			<view class="for-text-box">
				<view>气体类别：</view>
				<view>{{newData.gasCategory}}</view>
			</view>
			<view class="for-text-box">
				<view>纯度：</view>
				<view>{{newData.purity}}</view>
			</view>
			<view class="for-text-box" v-if="!newData.specialGases">
				<view>压力：</view>
				<view>{{newData.pressure}}</view>
			</view>
			<view class="for-text-box" v-if="newData.state == 2">
				<view>实验室名称：</view>
				<view>{{newData.subName}}</view>
			</view>
			<view class="for-text-box" v-if="newData.state == 2">
				<view>楼栋：</view>
				<view>{{newData.buildName}}</view>
			</view>
			<view class="for-text-box" v-if="newData.state == 2">
				<view>楼层：</view>
				<view>{{newData.floorName}}</view>
			</view>
			<view class="for-text-box" v-if="newData.state == 2">
				<view>房间：</view>
				<view>{{newData.roomNum}}</view>
			</view>
		</view>
		<view class="title-p" v-if="newData.state == 1">实验室信息</view>
		<view class="text-max-big-box" v-if="newData.state == 1">
			<view class="for-text-box">
				<view>实验室名称：</view>
				<view>{{newData.subName}}</view>
			</view>
			<view class="for-text-box">
				<view>楼栋：</view>
				<view>{{newData.buildName}}</view>
			</view>
			<view class="for-text-box">
				<view>楼层：</view>
				<view>{{newData.floorName}}</view>
			</view>
			<view class="for-text-box">
				<view>房间：</view>
				<view>{{newData.roomNum}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.state == 1">
			<view class="for-text-box">
				<view>签收人：</view>
				<view>{{newData.receiver}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.state == 1">
			<view class="for-text-box">
				<view>费用：</view>
				<view>{{newData.latestStorageIn.cost}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.state == 2">
			<view class="for-border-box" style="padding-bottom:20rpx;">
				<view>出库类型：</view>
				<view>{{newData.latestStorageOut.outType==1?'空瓶出库':'满瓶出库'}}</view>
			</view>
			<view class="for-text-box" style="padding-top:20rpx;">
				<view>费用：</view>
				<view>{{newData.latestStorageOut.outType==1?newData.latestStorageOut.cost:'0'}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.state == 2">
			<view class="for-text-box">
				<view>签出人：</view>
				<view>{{newData.signerOut}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.state == 1">
			<view class="for-img-box">
				<view>入库单：</view>
				<img class="img-box" 
				v-for="(item,index) in newData.latestStorageIn.voucherUrl" :key="index"
				@click="previewSingleImage(baseUrl+item)" 
				:src="baseUrl+item">
			</view>
			<view class="for-text-box">
				<view>入库时间：</view>
				<view>{{newData.latestStorageIn.storageTime}}</view>
			</view>
			<view class="for-text-box">
				<view>入库人：</view>
				<view>{{newData.latestStorageIn.operator}}</view>
			</view>
			<view class="for-text-box">
				<view>联系电话</view>
				<view>{{newData.latestStorageIn.operatorPhone}}</view>
			</view>
		</view>
		<view class="text-max-big-box" v-if="newData.state == 2">
			<view class="for-img-box">
				<view>出库单：</view>
				<img class="img-box" 
				v-for="(item,index) in newData.latestStorageOut.voucherUrl" :key="index"
				@click="previewSingleImage(baseUrl+item)" 
				:src="baseUrl+item">
			</view>
			<view class="for-text-box">
				<view>出库时间：</view>
				<view>{{newData.latestStorageOut.storageTime}}</view>
			</view>
			<view class="for-text-box">
				<view>出库人：</view>
				<view>{{newData.latestStorageOut.operator}}</view>
			</view>
			<view class="for-text-box">
				<view>联系电话</view>
				<view>{{newData.latestStorageOut.operatorPhone}}</view>
			</view>
		</view>
		<view class="text-max-big-box" :class="newData.state == 2?'margin-bottom-p':''">
			<view class="for-text-one-box">
				<view>备注：</view>
				<view v-if="newData.state == 1">{{newData.latestStorageIn.remark}}</view>
				<view v-if="newData.state == 2">{{newData.latestStorageOut.remark}}</view>
			</view>
		</view>
		<view v-if="newData.state == 1" class="bottom-button-box">
			<view @click="submitButton()">撤回入库</view>
			<view @click="goPage()">气瓶出库</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		config
	} from '@/api/request/config.js'
	import {
		airbottleNewQpAppletBottleDetail,airBottleNewQpAppletBottleStorageWithdraw
	} from '@/pages_supplierCylinderManagement/api/index.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				newData: {
					bottleCode: '',
					gasName: '',
					specification: '',
					gasCategory: '',
					purity: '',
					specialGases: '',
					state: '',
					pressure: '',
					subName: '',
					buildName: '',
					floorName: '',
					roomNum: '',
					receiver: '',
					cost: '',
					latestStorageIn:{
						voucherUrl:[],
						storageTime:'',
						operator:'',
						operatorPhone:'',
					},
					latestStorageOut:{
						voucherUrl:[],
						storageTime:'',
						operator:'',
						operatorPhone:'',
					},
				}
			}
		},
		onLoad(options) {
			this.airbottleNewQpAppletBottleDetail(options.id);
		},
		onShow() {

		},

		methods: {
			//气瓶详情
			async airbottleNewQpAppletBottleDetail(id) {
				const {
					data
				} = await airbottleNewQpAppletBottleDetail({
					id: id
				});
				if (data.code == 200) {
					if(data.data.latestStorageIn){
						data.data.latestStorageIn.storageTime = parseTime(data.data.latestStorageIn.storageTime, "{y}-{m}-{d} {h}:{i}");
						data.data.latestStorageIn.voucherUrl = data.data.latestStorageIn.voucherUrl.split(",");
					}
					if(data.data.latestStorageOut){
						data.data.latestStorageOut.storageTime = parseTime(data.data.latestStorageOut.storageTime, "{y}-{m}-{d} {h}:{i}");
						data.data.latestStorageOut.voucherUrl = data.data.latestStorageOut.voucherUrl.split(",");
					}
					this.$set(this,'newData', data.data);
				}
			},
			//撤回入库
			async airBottleNewQpAppletBottleStorageWithdraw() {
				const {
					data
				} = await airBottleNewQpAppletBottleStorageWithdraw({
					bottleId: this.newData.id
				});
				if (data.code == 200) {
					uni.showToast({
						title: '撤回成功',
						icon: "success",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({ delta: 1 });
					}, 2000);
				}
			},
			//气瓶出库
			goPage(){
				uni.navigateTo({
					url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/outbound?id='+this.newData.id,
				});
			},
			//撤回入库
			submitButton(){
				let self = this;
				uni.showModal({
					title: '撤回入库',
					content: '撤回后，该气体气瓶的当前状态将被强制回退至待入库。',
					showCancel: true, 
					cancelText: '关闭',
					confirmText: '确认撤回',
					confirmColor:'#FF0000',
					success: (res) => {
						if (res.confirm) {
							self.airBottleNewQpAppletBottleStorageWithdraw();
						}
					}
				});
			},
			//预览图片
			previewSingleImage(imageUrl) {
				uni.previewImage({
					urls: [imageUrl] // 必须包裹成数组
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderDetails {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;
		overflow-y: scroll;

		.title-p{
			margin: 25rpx 25rpx 0 50rpx;
			font-size:28rpx;
		}
		.text-max-big-box {
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 25rpx 25rpx 0;

			.for-title-box {
				display: flex;
				view {
					line-height: 60rpx ;
					font-weight: 700;
				}

				view:nth-child(1) {}

				view:nth-child(2) {
					flex: 1;
					text-align: right;
				}

				.colorA {
					color: #FF6B00;
				}

				.colorB {
					color: #0075FF;
				}
			}
			.for-text-box{
				display: flex;
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				view:nth-child(1){
				}
				view:nth-child(2){
					flex:1;
					text-align: right;
				}
			}
			.for-border-box{
				display: flex;
				border-bottom:1rpx solid #dedede;
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				view:nth-child(1){
				}
				view:nth-child(2){
					flex:1;
					text-align: right;
				}
			}
			.for-img-box{
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				.img-box{
					display: inline-block;
					margin:15rpx 30rpx 30rpx 15rpx;
					width:160rpx;
					height:160rpx;
					border-radius:12rpx;
					overflow: hidden;
				}
			}
			.for-text-one-box{
				view{
					line-height: 60rpx
					font-weight: 700;
				}
				view:nth-child(1){
				}
				view:nth-child(2){
					padding:10rpx 0 20rpx;
					font-size:24rpx;
					line-height:30rpx;
				}
			}
		}
		.margin-bottom-p{
			margin-bottom:60rpx;
		}
		.bottom-button-box{
			display: flex;
			margin:40rpx 30rpx 60rpx;
			view:nth-child(1){
				border:1rpx solid #0183FA;
				color:#0183FA;
				text-align: center;
				border-radius:12rpx;
				line-height:80rpx;
				width:200rpx;
			}
			view:nth-child(2){
				margin-left:30rpx;
				border:1rpx solid #0183FA;
				color:#fff;
				background-color: #0183fa;
				text-align: center;
				border-radius:12rpx;
				line-height:80rpx;
				flex:1;
			}
		}
	}
</style>