risk-wx/pages/particulars/claimExpense/index.vue

<template>
	<view class="content">
		<view class="head">
			<text>订单号: {{formData.orderNo}}</text>
		</view>
		<view class="striping"></view>
		<view class="head" @click="telFun">
			<text>驾驶员: {{formData.driver1Name == null ? '' : formData.driver1Name}}&nbsp;电话:&nbsp;{{formData.driver1mobile == null ? '' : formData.driver1mobile}}</text>
		</view>
		<u-collapse>
			<!-- <u-collapse-item title="报销费用" name="claim expense"> -->
			<view class="box-box">
				<view class="box">
					<view class="data">
						<text class="key">ETC金额</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnLoadetc"
							v-model="formData.loadetc" />
					</view>
					<view class="data">
						<text class="key">现金过路费</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnLoadtoll"
							v-model="formData.loadtoll" />
					</view>
				</view>

				<view class="box">
					<view class="data">
						<text class="key">公司加油(升)</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilhomeQty"
							v-model="formData.oilhomeQty" />
					</view>
					<view class="data">
						<text class="key">加油金额</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilhomeAmt"
							v-model="formData.oilhomeAmt" />
					</view>
				</view>






				<view class="box">
					<view class="data-two">
						<text class="key">定点加油</text>
						<view class="list">
							<uni-data-select :localdata="gasStationList" v-model="formData.gasstation1"
								:clear="false"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="data">
						<text class="key">升数</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilappoint1Qty"
							placeholder="请输入升数" v-model="formData.oilappoint1Qty" />
					</view>
					<view class="data">
						<text class="key">金额</text>

						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilappoint1Amt"
							placeholder="请输入金额" v-model="formData.oilappoint1Amt" />
					</view>
				</view>




				<!-- <view class="box-list vertical-layout"> -->
					<!-- <view class="iconfont icon-jiayouzhan icon"></view> -->
					<!-- <view class="icon" style="color: #3c9cff;">定点加油</view>
					<view> -->
						<!-- <u-radio-group class="list" :disabled="disabled" v-model="formData.gasstation1"
							@change="groupChangeOne">
							<u-radio :customStyle="{marginBottom: '20rpx', marginRight: '30rpx'}"
								v-for="(item, index) in gasStationList" :key="index" :label="item.cname"
								:name="item.cname" @change="radioChangeOne">
							</u-radio>
						</u-radio-group> -->
						<!-- <view class="list">
							<uni-data-select :localdata="gasStationList" v-model="formData.gasstation1"
								:clear="false"></uni-data-select>
						</view> -->

						<!-- <view class="quantity-aum vertical-layout">
							<view class="aaa vertical-layout">
								<text style="color: #3c9cff;">升数</text>
								<input class="key" :disabled="disabled" inputmode="decimal"
									@input="checkUnOilappoint1Qty" placeholder="请输入升数"
									v-model="formData.oilappoint1Qty" />
							</view>
							<view class="bbb vertical-layout">
								<text style="color: #3c9cff;">金额</text>
								<input class="value" :disabled="disabled" inputmode="decimal"
									@input="checkUnOilappoint1Amt" placeholder="请输入金额"
									v-model="formData.oilappoint1Amt" />
							</view>
						</view>
					</view>
				</view> -->
				
				<view class="box">
					<view class="data-two">
						<text class="key">定点加油</text>
						<view class="list">
							<uni-data-select :localdata="gasStationList" v-model="formData.gasstation2"
								:clear="false"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="data">
						<text class="key">升数</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilappoint2Qty"
							placeholder="请输入升数" v-model="formData.oilappoint2Qty" />
					</view>
					<view class="data">
						<text class="key">金额</text>
				
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilappoint2Amt"
							placeholder="请输入金额" v-model="formData.oilappoint2Amt" />
					</view>
				</view>


				<!-- <view class="box-list vertical-layout"> -->
					<!-- <view class="iconfont icon-jiayouzhan icon"></view> -->
					<!-- <view class="icon" style="color: #3c9cff;">定点加油</view>
					<view> -->
						<!-- <u-radio-group class="list" :disabled="disabled" v-model="formData.gasstation2"
							@change="groupChangeTwo">
							<u-radio :customStyle="{marginBottom: '20rpx', marginRight: '30rpx'}"
								v-for="(item, index) in gasStationList" :key="index" :label="item.cname"
								:name="item.cname" @change="radioChangeTwo">
							</u-radio>
						</u-radio-group> -->


						<!-- <view class="list">
							<uni-data-select :localdata="gasStationList" v-model="formData.gasstation2"
								:clear="false"></uni-data-select>
						</view>

						<view class="quantity-aum vertical-layout">
							<view class="aaa vertical-layout">
								<text style="color: #3c9cff;">升数</text>
								<input class="key" :disabled="disabled" inputmode="decimal"
									@input="checkUnOilappoint2Qty" placeholder="请输入升数"
									v-model="formData.oilappoint2Qty" />
							</view>
							<view class="bbb vertical-layout">
								<text style="color: #3c9cff;">金额</text>
								<input class="value" :disabled="disabled" inputmode="decimal"
									@input="checkUnOilappoint2Amt" placeholder="请输入金额"
									v-model="formData.oilappoint2Amt" />
							</view>
						</view>
					</view>
				</view> -->

				<view class="box">
					<view class="data">
						<text class="key">现金加油(升)</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilcash1Qty"
							v-model="formData.oilcash1Qty" />
					</view>
					<view class="data">
						<text class="key">加油金额</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilcash1Amt"
							v-model="formData.oilcash1Amt" />
					</view>
				</view>


				<view class="box">
					<view class="data">
						<text class="key">油卡加油(升)</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilcardQty"
							v-model="formData.oilcardQty" />
					</view>
					<view class="data">
						<text class="key">加油金额</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnOilcardAmt"
							v-model="formData.oilcardAmt" />
					</view>
				</view>
				<!-- </u-collapse-item> -->
			</view>



			<u-collapse-item title="其他费用" name="cost breakdown">
				<view class="table">
					<view class="data vertical-layout" v-for="(item, index) in itemsList" :key="index">
						<view class="name">
							<text style="color: #3c9cff;">{{ item.cname }}</text>
						</view>
						<view class="sum">
							<input class="value" :disabled="disabled" inputmode="decimal"
								@input="checkUnAmt(item.amt, index)" cursor-spacing="15" :adjust-position="true"
								v-model="item.amt" />
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>

		<view class="cushion">

		</view>

		<view class="bottom vertical-layout" v-if="status376 == 2">
			<button class="submit" iconColor="#3c9cff" type="primary" @click="submit">提交费用</button>
		</view>

		<!-- 遮盖罩 -->
		<u-loading-page :loading="loading"></u-loading-page>

		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getGasStations,
		getItems,
		insertLoadFeeItems,
		getLoadFeeItems
	} from "@/api/reimbursement"
	export default {
		data() {
			return {
				aaa: [],
				// 遮盖罩
				loading: true,
				formData: {
					itemsVoList: [],
					oilappoint1Qty: 1,
					oilappoint2Qty: 1
				},
				// 报销费用list
				gasStationList: [],
				// 其他费用list
				itemsList: [],
				// 其他费用被选中
				selectedIndexs: [],
				radioValueOne: '', // 当前 radio 的值
				numOne: 0, //用于区分是否是重复选中
				radioValueTwo: '', // 当前 radio 的值
				numTwo: 0, //用于区分是否是重复选中
				// 输入框禁用
				disabled: false,
				status376: 0
			}
		},
		onUnload() {
			this.formData = {};
			this.loading = true;
		},
		onLoad: function(option) {
			this.status376 = option.status376;
			// 报销费用下拉选
			getGasStations().then(res => {
				// this.gasStationList = res.data

				for (var item in res.data) {
					var data = {
						text: res.data[item].cname,
						value: res.data[item].cname
					};
					this.gasStationList.push(data);
				}
				getItems().then(res => {
					this.itemsList = res.data
					getLoadFeeItems(option.orderNo).then(res => {
						this.formData = res.data;
						var costBreakdownList = res.data.loadFeeItemsList;
						this.itemsList = costBreakdownList;
						if (res.data.billStatus == 6) {
							this.disabled = true;
						}
						// for (var inex in this.itemsList) {
						// 	for (var inexs in costBreakdownList) {
						// 		// 金额赋值
						// 		if (this.itemsList[inex].itemId == costBreakdownList[inexs]
						// 			.itemId) {
						// 			this.itemsList[inex].amt = costBreakdownList[inexs].amt
						// 		}
						// 	}
						// }
						this.loading = false;
					})
				})
			})
		},
		methods: {
			// 保存内容
			submit() {

				if (this.formData.billStatus == 6) {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "不允许保存!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.formData.billStatus == 2) {

					this.loading = true;
					var list = [];
					for (var item in this.itemsList) {
						var amt = this.itemsList[item].amt;
						if (amt != null) {
							var items = this.itemsList[item];
							list.push(items);
						}
					}
					this.formData.itemsVoList = list;
					insertLoadFeeItems(this.formData).then(res => {
						this.loading = false;
						if (res.code == 200) {
							// 保存成功弹窗提示
							this.$refs.uToast.show({
								type: 'success',
								message: "保存成功!",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
						} else {
							// 保存失败消息
							this.$refs.uToast.show({
								icon: false,
								message: "保存失败请重试!",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
							})
						}
					})
				}

			},
			// 点击拨打电话
			telFun() {
				if (this.formData.driver1mobile != null && this.formData.driver1mobile != '') {
					uni.makePhoneCall({
						phoneNumber: this.formData.driver1mobile, //电话号码
						success: function(e) {
							// console.log(e);
						},
						fail: function(e) {
							// console.log(e);
						}
					})
				}
			},
			// 其他费用表格勾选事件
			selectionChange(e) {
				this.selectedIndexs = e.detail.index;
			},
			groupChangeOne(n) {
				if (n == this.radioValueOne && this.numOne == 0) {
					// 第一次相等即执行以下代码
					this.numOne++
				} else {
					// 第一次后相等即执行以下代码
					// 置空 radioGroupValue 即取消选中的值
					this.formData.gasstation1 = ''
					// 初始化 num
					this.numOne = 0
				}
			},
			radioChangeOne(n) {
				this.radioValueOne = n
				// 切换选项后需要初始化 num
				this.numOne = 0
			},
			groupChangeTwo(n) {
				if (n == this.radioValueTwo && this.numTwo == 0) {
					// 第一次相等即执行以下代码
					this.numTwo++
				} else {
					// 第一次后相等即执行以下代码
					// 置空 radioGroupValue 即取消选中的值
					this.formData.gasstation2 = ''
					// 初始化 num
					this.numTwo = 0
				}
			},
			radioChangeTwo(n) {
				this.radioValueTwo = n
				// 切换选项后需要初始化 num
				this.numTwo = 0
			},
			checkUnLoadetc(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.loadetc = e.target.value
				})

			},
			checkUnLoadtoll(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.loadtoll = e.target.value
				})

			},
			checkUnOilhomeQty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilhomeQty = e.target.value
				})

			},
			checkUnOilhomeAmt(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilhomeAmt = e.target.value
				})

			},
			checkUnOilappoint1Qty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilappoint1Qty = e.target.value
				})

			},
			checkUnOilappoint1Amt(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilappoint1Amt = e.target.value
				})

			},
			checkUnOilappoint2Qty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilappoint2Qty = e.target.value
				})

			},
			checkUnOilappoint2Amt(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilappoint2Amt = e.target.value
				})

			},
			checkUnOilcash1Qty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilcash1Qty = e.target.value
				})

			},
			checkUnOilcash1Amt(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilcash1Amt = e.target.value
				})

			},
			checkUnOilcardQty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilcardQty = e.target.value
				})

			},
			checkUnOilcardAmt(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.oilcardAmt = e.target.value
				})

			},
			checkUnAmt(amt, index) {
				var amt = (amt.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.itemsList[index].amt = amt
				})
			}
		}
	}
</script>

<style lang="scss">
	// 修改布局方向为纵向布局
	.vertical-layout {
		display: flex;
	}

	// 分割线
	.striping {
		width: 100%;
		height: 4rpx;
		background-color: #f0f0f0f0;
	}

	.box-box {
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.content {

		box-sizing: border-box;
		background-color: white;

		.head {
			color: #3c9cff;
			// width: 100%;
			height: 100rpx;
			padding-left: 30rpx;

			vertical-align: middle;
			display: table-cell;

			font-size: 34rpx;
			font-weight: 900;
			// background-color: red;
		}


		.box-list {

			color: #3b3b3b;
			width: 100%;
			border-bottom: 2rpx solid #f0f0f0f0;
			// padding-left: 50rpx;
			font-size: 30rpx;


			color: #3b3b3b;

			.icon {

				// width: 100rpx;
				margin-top: 50rpx;
				// font-size: 50rpx;
				// color: #4888ff;
			}

			.list {

				margin-top: 30rpx;
				margin-bottom: 20rpx;

				width: 100%;
				height: 100%;
				// background-color: pink;

				height: auto;
				display: flex;

				flex-wrap: wrap;

				font-size: 30rpx;
			}

			.quantity-aum {
				margin-bottom: 25rpx;

				.aaa {
					width: 50%;

					.key {
						display: inline-block;
						width: 50%;
						margin-left: 20rpx;
						// margin-right: 80rpx;
						border-bottom: 2rpx dotted #000;
					}
				}

				.bbb {
					width: 50%;

					.value {

						width: 50%;

						margin-left: 20rpx;
						// margin-right: 20rpx;
						border-bottom: 2rpx dotted #000;
					}
				}
			}
		}

		// .box {

		// 	color: #3b3b3b;

		// 	overflow: hidden;
		// 	height: 100rpx;

		// 	border-bottom: 2rpx solid #f0f0f0f0;

		// 	font-size: 30rpx;

		// 	display: flex;
		// 	align-items: center;

		// 	.data {
		// 		width: 50%;
		// 		height: 100%;
		// 		// background-color: pink;
		// 		display: flex;
		// 		align-items: center;

		// 		.key {
		// 			// background-color: indianred;
		// 			width: 80%;
		// 		}

		// 		.value {
		// 			color: #3b3b3b;
		// 			width: 45%;
		// 			margin-right: 20rpx;
		// 			border-bottom: 2rpx dotted #000;
		// 		}
		// 	}
		// }

		.box {

			color: #3b3b3b;

			// overflow: hidden;
			height: 100rpx;

			border-bottom: 2rpx solid #f0f0f0f0;

			font-size: 30rpx;

			display: flex;
			align-items: center;

			.data {
				width: 50%;
				display: flex;
				align-items: center;

				.key {
					width: 55%;
					text-align: right;
					color: #3c9cff;
				}

				.value {
					margin-left: 20rpx;
					width: 45%;
					color: #3b3b3b;
					border-bottom: 2rpx dotted #000;
				}
			}

			.data-two {
				width: 100%;
				display: flex;
				align-items: center;
				
				.key {
					width: 35%;
					text-align: right;
					color: #3c9cff;
					
				}
				
				.list {
					margin-top: 30rpx;
					margin-bottom: 20rpx;
					
					width: 100%;
					height: 100%;
					// background-color: pink;
					
					height: auto;
					display: flex;
					
					flex-wrap: wrap;
					
					font-size: 30rpx;
				}
			}
		}

		.table {
			margin-left: 20rpx;
			margin-right: 20rpx;

			.data {
				font-size: 30rpx;
				width: 100%;
				height: 100rpx;
				border-bottom: 2rpx solid #f0f0f0f0;
				align-items: center;

				.name {

					text-align: right;
					width: 20%;
					margin-left: 20rpx;
					color: #000;
				}

				.sum {
					margin-left: 20rpx;
					margin-right: 80rpx;
					border-bottom: 2rpx dotted #000;
				}
			}
		}

		.primary {
			background-color: #0b68ffff;
		}

		.attention {
			padding: 30rpx;
			padding-left: 50rpx;
			padding-bottom: 40rpx;
		}

		// 底部提交按钮
		.bottom {
			display: block;
			position: fixed;
			bottom: calc(var(--window-bottom));
			width: 100%;
			height: 100rpx;

			.submit {
				background-color: #0b68ffff;
			}
		}

		.cushion {
			width: 100%;
			height: 104rpx;
			background-color: #f0f0f0f0;
		}



	}
</style>