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

<template>
	<view class="home">
		<view class="detail-area">
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">
							资产编号
						</view>
					</u-col>
					<u-col span="8" >
						<view class="demo-layout">{{assetObj.number?assetObj.number:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产名称</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.name?assetObj.name:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产种类</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.kind?assetObj.kind:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产分类</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.categoryNumber?assetObj.categoryNumber:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">使用部门</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.deptName?assetObj.deptName:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产原值(元)</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.amount?assetObj.amount:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">数量</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.quantity?assetObj.quantity:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">存放地点</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.placeName?assetObj.placeName:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">登记人</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.registrant?assetObj.registrant:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">取得日期</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.buildDate?assetObj.buildDate:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">资产用途</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.purpose?assetObj.purpose:""}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="layout-row">
				<u-row
					justify="space-between"
					gutter="10">
					 <u-col span="4">
						<view class="demo-layout">规格型号</view>
					</u-col>
					<u-col span="8">
						<view class="demo-layout">{{assetObj.specificationsModel?assetObj.specificationsModel:""}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<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="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">归还</u-button>
		</view>
		<view class="repair-btn" @click="toRepeat">
			<i class="iconfont icon-a-shezhi2"></i>
		</view>
	</view>
</template>

<script>
	import { searchAsset,getAllPlace,borrowAsset } from "@/api/asset.js"
	import cache from "@/utils/storage.js"
	import { dateToString } from "@/common/js/core.js"
	export default {
		data() {
			return {
				borrowShow:false,
				borrowValue:Number(new Date()),
				returnShow:false,
				returnValue:Number(new Date()),
				status:1,
				assetObj:{},
				form:{
					borrowDate:dateToString(new Date()),
					returnDate:dateToString(new Date()),
					remark:"",
					tel:cache.session.getJSON("phone"),
					borrowPlaceName:"",
					assetBarCode:""
				},
				placeShow: false,
				placeList: []
			};
		},
		onLoad:function(option){
			this.form.assetBarCode = option.number
			this.initAssets(option.number)
			this.init()
		},
		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 = []
				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())
				this.form.returnDate = dateToString(new Date())
				this.form.tel = cache.session.getJSON("phone")
			},
			initAssets(data){
				searchAsset({barCode: data}).then(res=>{
					console.log(res)
					this.assetObj = res
				})
			},
			showPlace(){
				this.placeShow = true
			},
			selectPlace(e){
				this.form.borrowPlaceName = e.value[0].name 
				this.placeShow = false
			},
			//点去维修
			toRepeat(){
				console.log("111233")
			},
			toBorrowAsset(){
				if(this.form.tel===""){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return;
				}
			  	if(!this.handleDate(this.form.borrowDate,this.form.returnDate)){
					return;
				}
				
				borrowAsset(this.form).then(res=>{
					uni.showToast({
						icon:"none",
						title:"借用成功！"
					})
					this.initAssets(res.assetBarCode)
				})
			}
		}
	}
</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>