equipment-rental-mini/pages/borrow/borrow.vue

<template>
	<view class="home">
		<view class="detail-area">
			<layout-row rowTitle="资产编号" :rowValue="assetObj.number"></layout-row>
			<layout-row rowTitle="资产名称" :rowValue="assetObj.name"></layout-row>
			<layout-row rowTitle="资产种类" :rowValue="assetObj.kind"></layout-row>
			<layout-row rowTitle="资产分类" :rowValue="assetObj.categoryNumber"></layout-row>
			<layout-row rowTitle="使用部门" :rowValue="assetObj.deptName"></layout-row>
			<layout-row rowTitle="资产原值(元)" :rowValue="assetObj.amount"></layout-row>
			<layout-row rowTitle="数量" :rowValue="assetObj.quantity"></layout-row>
			<layout-row rowTitle="存放地点" :rowValue="assetObj.placeName"></layout-row>
			<layout-row rowTitle="设备状态" :rowValue="assetObj.borrowStatus"></layout-row>
			<layout-row rowTitle="登记人" :rowValue="assetObj.registrant"></layout-row>
			<layout-row rowTitle="取得日期" :rowValue="assetObj.buildDate"></layout-row>
			<layout-row rowTitle="资产用途" :rowValue="assetObj.purpose"></layout-row>
			<layout-row rowTitle="规格型号" :rowValue="assetObj.specificationsModel"></layout-row>
		</view>
		<view v-if="show">
			<view class="borrow-date" v-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?true:false:false">
				<u--form
					labelPosition="left"
					:model="form"
					ref="Form1"
					:labelWidth="110"
					labelAlign="left">
					<u-form-item
						label="借用地点"
						prop="borrowPlaceName"
						borderBottom>
						<text @click="showPlace" style="font-size: 30rpx;width: 100%;height: 100%;">{{form.borrowPlaceName}}</text>
						<u-picker
						:show="placeShow" 
						:columns="placeList"
						title="请选择地点"
						keyName="name"
						@cancel="placeShow = false"
						@confirm="selectPlace"></u-picker>
					</u-form-item>
					<u-form-item
						label="联系电话"
						prop="tel"
						borderBottom>
						<u--input
						v-model="form.tel"
						border="none" placeholder="请输入联系电话">
						</u--input>
					</u-form-item>
					<u-form-item
						label="借用日期"
						prop="borrowDate"
						borderBottom>
						<text @click="showBor" style="font-size: 30rpx;">{{form.borrowDate}}</text>
						<u-datetime-picker
						:show="borrowShow"
						v-model="borrowValue"
						mode="datetime"
						@confirm="changeDate"
						@cancel="borrowShow = false"
						></u-datetime-picker>
					</u-form-item>
					<u-form-item
						label="归还日期"
						prop="returnDate"
						borderBottom>
						<text 
						@click="showRet" 
						style="font-size: 30rpx;">
						{{form.returnDate}}
						</text>
						<u-datetime-picker
						:show="returnShow"
						v-model="returnValue"
						mode="datetime"
						@confirm="returnChange"
						@cancel="returnShow = false"
						></u-datetime-picker>
					</u-form-item>
					<u-form-item
						label="备注"
						prop="remark"
						borderBottom>
						<u--input
						v-model="form.remark"
						border="none"
						placeholder="请输入备注"
						>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="borrow-date" v-else-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?false:true:true">
				<u--form
					labelPosition="left"
					:model="assetObj"
					ref="resF"
					:labelWidth="110"
					labelAlign="left">
					<u-form-item
						label="借用人工号"
						prop="borrowUserName"
						borderBottom>
						<text 
						style="font-size: 30rpx;">
						{{assetObj.borrowUserName?assetObj.borrowUserName:""}}
						</text>
					</u-form-item>
					<u-form-item
						label="借用地点"
						prop="borrowPlaceName"
						borderBottom>
						<text 
						style="font-size: 30rpx;">
						{{assetObj.placeName?assetObj.placeName:""}}
						</text>
					</u-form-item>
					<u-form-item
						label="联系电话"
						prop="tel"
						borderBottom>
						<text 
						style="font-size: 30rpx">
						{{assetObj.tel?assetObj.tel:""}}
						</text>
					</u-form-item>
					<u-form-item
						label="借用日期"
						prop="borrowDate"
						borderBottom>
						<text 
						style="font-size: 30rpx;">
						{{assetObj.borrowDate?assetObj.borrowDate:""}}
						</text>
					</u-form-item>
					<u-form-item
						label="归还日期"
						prop="returnDate"
						borderBottom>
						<text 
						style="font-size: 30rpx;">
						{{assetObj.returnDate?assetObj.returnDate:""}}
						</text>
					</u-form-item>
					<u-form-item
						label="备注"
						prop="remark"
						borderBottom>
						<text style="font-size: 30rpx;">
						{{assetObj.remark?assetObj.remark:"无"}}
						</text>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<text style="font-size: 24rpx;">归还时间以实际归还时间为准</text>
			<view class="btn-area">
				<u-button text="借用" color="#000" v-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?true:false:false" @click="toBorrowAsset">借用</u-button>
				<u-button text="归还" color="#000" v-else-if="assetObj.borrowStatus?assetObj.borrowStatus=='可借出'?false:true:true" @click="toReturnAsset">归还</u-button>
			</view>
			<view class="repair-btn" @click="toRepeat">
				<i class="iconfont icon-a-shezhi2"></i>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { searchAsset,getAllPlace,borrowAsset,returnAsset } from "@/api/asset.js"
	import cache from "@/utils/storage.js"
	import { dateToString } from "@/common/js/core.js"
	import LayoutRow from '@/component/LayoutRow.vue'
	export default {
		data() {
			return {
				borrowShow:false,
				borrowValue:Number(new Date()),
				returnShow:false,
				returnValue:Number(new Date()),
				assetObj:{},
				form:{
					borrowDate:dateToString(new Date()),
					returnDate:dateToString(new Date()),
					remark:"",
					tel:cache.session.getJSON("phone"),
					borrowPlaceName:"",
					assetBarCode:""
				},
				placeShow: false,
				placeList: [],
				show:false
			};
		},
		components:{
			LayoutRow
		},
		onLoad:function(option){
			this.form.assetBarCode = option.number
			// this.initAssets(option.number)
			this.init()
		},
		onShow() {
			this.initAssets(this.form.assetBarCode)
		},
		methods:{
			showBor(){
				this.borrowShow = true
			},
			showRet(){
				this.returnShow = true
			},
			handleDate(fDate,rDate){
				let f = new Date(fDate)
				let r = new Date(rDate)
				if (f < r) {
					return true
				} else {
					uni.showToast({
						icon:"none",
						title:"借用日期应小于归还日期"
					})
					return false
				}
			},
			changeDate(val){
				let date = dateToString(val.value);
				this.form.borrowDate = date
				this.borrowShow = false
			},
			returnChange(val){
				let date = dateToString(val.value);
				if(this.handleDate(this.form.borrowDate,date)){
					this.form.returnDate = date
					this.returnShow = false
				}
			},
			init(){
				this.placeList = []
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// });
				getAllPlace().then(res=>{
					if(res.length!==0){
						this.placeList.push(res)
						this.form.borrowPlaceName = res[0].name?res[0].name:"请选择地点"
					}
				})
				this.form.borrowDate = dateToString(new Date(new Date().getTime() + 1000*60*10))
				this.form.returnDate = dateToString(new Date(new Date().getTime() + 1000*60*15))
				this.form.tel = cache.session.getJSON("phone")
			},
			initAssets(data){
				searchAsset({barCode: data}).then(res=>{
					if(res.barCode===null){
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: "该设备不存在，即将返回上一页",
							duration:1500
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1400)
					}
					if(res.meBorrow || res.borrowStatus ==="可借出"){
						this.show = true;
					}else{
						this.show = false;
					}
					this.assetObj = res
				})
			},
			showPlace(){
				this.placeShow = true
			},
			selectPlace(e){
				this.form.borrowPlaceName = e.value[0].name 
				this.placeShow = false
			},
			//点去维修
			toRepeat(){
				// console.log("111233")
				uni.navigateTo({
					url:'/pages/fault/fault-report/fault-report?id='+this.form.assetBarCode
				})
			},
			toBorrowAsset(){
				// uni.showLoading({
				// 	title: "正在借用中",
				// 	mask: true,
				// });
				if(this.form.tel===""){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return;
				}
			  	if(!this.handleDate(this.form.borrowDate,this.form.returnDate)){
					return;
				}
				
				let data = {
					"tel": this.form.tel,
					"assetBarCode": this.assetObj.barCode,
					"borrowPlaceName": this.form.borrowPlaceName,
					"remark": this.form.remark
				}
				// console.log(data,1)
				let returnDate = new Date(this.form.returnDate).getTime()
				let borrowDate = new Date(this.form.borrowDate).getTime()
				borrowAsset(borrowDate,returnDate,data).then(res=>{
					uni.showToast({
						icon:"none",
						title:"借用成功！"
					})
					this.initAssets(res.assetBarCode)
				})
			},
			toReturnAsset(){
				// uni.showLoading({
				// 	title: "正在归还中",
				// 	mask: true,
				// });
				returnAsset(this.assetObj.barCode).then(res=>{
					if(res.data.code===200 && res.data.msg==="归还成功"){
						uni.showToast({
							icon:"none",
							title:"归还成功！"
						})
						this.initAssets(this.assetObj.barCode)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home{
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	// height: 100vh;
	box-sizing: border-box;
}
.detail-area{
	height: 72%;
	border: 1px solid $uni-border-black;
	padding: 0 20rpx;
	overflow-y: scroll;
}
.borrow-date{
	border: 1px solid $uni-border-black;
	padding: 0 20rpx;
	margin-top: 20rpx;
	/deep/.u-picker__view__column__item{
		text-align: center;
	}
	/deep/.u-form-item__body__right__content__slot{
		height: 100%;
	}
}
.layout-row{
	border-top: 1rpx solid #d6d7d9;
	padding: 20rpx 0 ;
}
.demo-layout {
	height: 25px;
}
.btn-area{
	margin-top: 20rpx;
	padding: 0 250rpx;
}
.repair-btn{
	width: 80rpx;
	height: 80rpx;
	color: rgba(80, 80, 80, 1);
	border-radius: 50%;
	line-height: 150%;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	font-size: 36rpx;
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	background: #ffffff;
	z-index:100;
	.iconfont{
		font-size: 42rpx;
	}
}
</style>