znyc.dispatching.wx/pages/fule_add/fule_add.vue

<template>
	<view>
		<view class="item">
			<view class="item_l">加油日期：</view>
			<picker 
				mode="date" 
				:value="formData.plusOilDate" 
				:start="startDate" 
				:end="endDate"
				@change="bindDateChange"
			>
				<view class="item_r">
					<view>{{formData.plusOilDate}}</view>
					<image src="../../static/images/my/right_icon.png"></image>
				</view>
			</picker>
		</view>
		<view class="item">
			<view class="item_l">车辆编号：</view>
			<picker 
				@change="bindPickerChange" 
				:value="index" 
				:range="array" 
				range-key="vehicleCode"
			>
				<view class="item_r">
					<view v-if="formData.vehicleCode==''" style="color: #808080;">请选择车辆编号</view>
					<view v-else>{{formData.vehicleCode}}</view>
					<image src="../../static/images/my/right_icon.png" mode=""></image>
				</view>
			</picker>
		</view>
		<view class="item">
			<view class="item_l">加油单号：</view>
			<view class="item_r">
				<input type="digit" v-model="formData.plusOilOrder" maxlength="20" placeholder="输入加油单号" />
			</view>
		</view>
		<view class="item">
			<view class="item_l">加油量(L)：</view>
			<view class="item_r">
				<input type="digit" v-model="formData.plusOilAmount" maxlength="20" placeholder="输入加油量(L)" @input="addmoney" />
			</view>
		</view>
		<view class="item">
			<view class="item_l">单价 (元) ：</view>
			<view class="item_r">
				<input type="digit" v-model="formData.oilPrice" placeholder="输入单价(元)"  @input="addmoney"/>
			</view>
		</view>
		<view class="item">
			<view class="item_l">总价 (元) ：</view>
			<view class="item_r">
				<input type="digit" v-model="formData.amountMoney" placeholder="输入总价(元)" />
			</view>
		</view>
		<view class="btn" @click="addfun">保 存</view>
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	export default {
		data() {
			return {
				id: '',
				startDate: '1999-05',
				endDate: new Date(),
				is_lo: true,
				index: 0,
				formData: {
					plusOilDate: '', //时间
					vehicleId: 0, //车辆id
					vehicleCode: '', //车辆编号
					plusOilOrder: '', //加油单号
					plusOilAmount: '', //加油量
					oilPrice: '', //加油单价
					amountMoney: '', //金额
				},
				array: []
			};
		},
		onLoad(options) {
			var year = new Date().getFullYear()
			var methods = new Date().getMonth() + 1
			var day = new Date().getDate()
			if (methods < 10) {
				methods = '0' + methods
			}
			if (day < 10) {
				day = '0' + day
			}
			this.formData.plusOilDate = year + "-" + methods + '-' + day
			console.log(options.id)
			this.id = options.id
			if (options.id) {
				https(urlList.operation_oil + '/' + options.id, 'GET', '', '').then(data => {
					console.log(data)
					this.formData = data.data
					this.get_list()
				}).catch(err => {
					console.log(err)
				})
				uni.setNavigationBarTitle({
					title: '编辑加油记录'
				});
			} else {
				this.get_list()
			}
			// 获取车辆设备

		},
		methods: {
			addmoney(){
				console.log(this.formData.plusOilAmount)
				console.log(this.formData.oilPrice)
				this.formData.amountMoney=this.formData.plusOilAmount*this.formData.oilPrice
			},
			bindDateChange(e) {
				this.formData.plusOilDate = e.detail.value
			},
			bindPickerChange(e) {
				this.formData.vehicleId = this.array[e.detail.value].id
				this.formData.vehicleCode = this.array[e.detail.value].vehicleCode
				console.log(e)
			},
			addfun() {
				if (this.formData.vehicleCode == '') {
					uni.showToast({
						title: '请选择车辆编号',
						icon: 'none',
					})
					return;
				};
				if (this.formData.plusOilOrder == '') {
					uni.showToast({
						title: '请输入正确的加油号',
						icon: 'none',
					})
					return;
				};
				if (this.formData.plusOilAmount == '') {
					uni.showToast({
						title: '请输入正确的加油量',
						icon: 'none',
					})
					return;
				};
				if (this.formData.oilPrice > 100) {
					uni.showToast({
						title: '请输入正确的单价',
						icon: 'none',
					})
					return;
				};
				if (this.formData.amountMoney == '') {
					uni.showToast({
						title: '请输入正确的总价',
						icon: 'none',
					})
					return;
				};
				this.putAddfule()
			},
			putAddfule() {
				console.log(this.formData)
				if (this.id) { //编辑
					if (this.is_lo) {
						this.is_lo = false
						https(urlList.operation_oil, 'PUT', this.formData, '正在修改...').then(data => {
							console.log(data)
							uni.showToast({
								title: '新增成功',
								icon: 'none',
								duration: 1500
							})
							uni.navigateBack();
							this.is_lo = true
						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none',
								duration: 1500
							})
						})
					}
				} else {
					if (this.is_lo) {
						this.is_lo = false
						https(urlList.operation_oil, 'POST', this.formData, '正在新增...').then(data => {
							console.log(data)
							uni.showToast({
								title: '新增成功',
								icon: 'none',
								duration: 1500
							})
							uni.navigateBack();
							this.is_lo = true
						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none',
								duration: 1500
							})
						})
					}
				}



			},
			get_list() {
				console.log(111)
				var that = this
				// http://42.194.147.251:8080/api/v1/vehicles/search?key=&currentPage=1&pageSize=10&status=-1
				var url = urlList.getCarTab + '?key=&currentPage=1&pageSize=2000&status=-1'
				https(url, 'GET', '', '').then(res => {
					console.log(res.data)
					this.array = res.data.vehicleGpsOutput
					if (this.formData.vehicleId != '') {
						this.array.forEach((item, index) => {
							if (item.id == this.formData.vehicleId) {
								that.index = index
							}
						})
						console.log(that.index)
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.item {
		font-size: 32rpx;
		margin: 0 20rpx;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: solid 2rpx #eff0f2;

		.item_l {
			width: 200rpx;
		}

		.item_r {
			width: 492rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			input {}

			view {
				flex: 1;
			}
		}
	}

	.btn {
		width: 400rpx;
		background: #3476fe;
		text-align: center;
		padding: 20rpx;
		color: #fff;
		border-radius: 10rpx;
		margin: 20rpx auto;
		margin-top: 200rpx;
	}
</style>