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" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnLoadetc" v-model="formData.loadetc" />
					</view>
					<view class="data">
						<text class="key">现金过路费</text>
						<input class="value" selection-start="0" selection-end="9999" :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" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilhomeQty" v-model="formData.oilhomeQty" />
					</view>
					<view class="data">
						<text class="key">加油金额</text>
						<input class="value" selection-start="0" selection-end="9999" :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 :disabled="disabled" :localdata="gasStationList"
								v-model="formData.gasstation1" @change="gasstation1Change"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="data">
						<text class="key">升数</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilappoint1Qty" placeholder="请输入升数"
							v-model="formData.oilappoint1Qty" />
					</view>
					<view class="data">
						<text class="key">金额</text>

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

				<view class="box">
					<view class="data-two">
						<text class="key">定点加油</text>
						<view class="list">
							<uni-data-select :disabled="disabled" :localdata="gasStationList"
								v-model="formData.gasstation2" @change="gasstation2Change"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="data">
						<text class="key">升数</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilappoint2Qty" placeholder="请输入升数"
							v-model="formData.oilappoint2Qty" />
					</view>
					<view class="data">
						<text class="key">金额</text>

						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilappoint2Amt" placeholder="请输入金额"
							v-model="formData.oilappoint2Amt" />
					</view>
				</view>

				<view class="box">
					<view class="data">
						<text class="key">现金加油(升)</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilcash1Qty" v-model="formData.oilcash1Qty" />
					</view>
					<view class="data">
						<text class="key">加油金额</text>
						<input class="value" selection-start="0" selection-end="9999" :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" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilcardQty" v-model="formData.oilcardQty" />
					</view>
					<view class="data">
						<text class="key">加油金额</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
							inputmode="decimal" @input="checkUnOilcardAmt" v-model="formData.oilcardAmt" />
					</view>
				</view>
				
				<view class="box-two">
					<text class="key">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</text>
					<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" v-model="formData.driverassdesc" />
				</view>
				<!-- </u-collapse-item> -->
			</view>
			
			<view class="box-box" style="margin-top: 40rpx;">
				<u-upload :fileList="fileList1" @afterRead="imgUploading" @delete="deletePic" name="1" multiple
					:disabled="this.status376 == 6" :previewFullImage="true"></u-upload>
			</view>

			<!-- <u-collapse-item title="照片" name="img" ref="collapseHeight">
				<u-upload :fileList="fileList1" @afterRead="imgUploading" @delete="deletePic" name="1" multiple
					:disabled="this.status376 == 6" :previewFullImage="true"></u-upload>
				
			</u-collapse-item> -->



			<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" selection-start="0" selection-end="9999" :disabled="disabled"
								inputmode="decimal" @input="checkUnAmt(item.amt, index)" cursor-spacing="15"
								:adjust-position="true" v-model="item.amt" /> -->
								<input class="value" selection-start="0" selection-end="9999" :disabled="disabled"
									inputmode="decimal" @input="checkUnAmt(item.amt, index)" @click="inputHeight" cursor-spacing="30"
									:always-embed="true" :adjust-position="true" v-model="item.amt" />
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		
		<view class="input" :style="{'height':vHeight + 'rpx'}">
		
		</view>

		<view class="cushion">

		</view>

		<view class="bottom vertical-layout" v-if="status376 == 2 || status376 == 0">
			<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>

		<u-modal :show="deleteShow" title="提示" showCancelButton @confirm="deleteImg" @cancel="deleteShow = false">
			<view class="slot-content">
				<rich-text nodes="确定删除这张图片吗?"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getGasStations,
		getItems,
		insertLoadFeeItems,
		getLoadFeeItems
	} from "@/api/reimbursement"
	
	import {
		getOrderBillsPlansByid,
		putOrderBillsPlansByid,
		insertTmsAttachMngs,
		pictureUploading,
		deleteTmsAttachMngs
	} from "@/api/particulars"
	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,
				selectionLength: 0,
				fileList1: [],
				// 删除弹框
				deleteShow: false,
				event: {},
				vHeight: 0
			}
		},
		onUnload() {
			this.formData = {};
			this.loading = true;
		},
		onLoad: function(option) {
			this.status376 = option.status376;
			if (this.status376 == 6) {
				this.disabled = true;
			}
			// 报销费用下拉选
			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;
						this.fileList1 = res.data.fileList1;
						this.loading = false;
					})
				})
			})
		},
		methods: {
			// 保存内容
			submit() {

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



					if (this.formData.loadetc == null ||
						this.formData.loadtoll == null ||
						this.formData.oilhomeQty == null ||
						this.formData.oilhomeAmt == null ||
						this.formData.oilappoint1Qty == null ||
						this.formData.oilappoint1Amt == null ||
						this.formData.oilappoint2Qty == null ||
						this.formData.oilappoint2Amt == null ||
						this.formData.oilcash1Qty == null ||
						this.formData.oilcash1Amt == null ||
						this.formData.oilcardQty == null ||
						this.formData.oilcardAmt == null
					) {
						this.$refs.uToast.show({
							type: 'warning',
							icon: false,
							message: "请输入金额或升数!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
						})
					} else {
						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'
								})
							}
						})
					}
				}

			},

			// 删除图片
			deletePic(event) {
				if (this.status376 == 6) {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "不允许修改!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.status376 == 2 || this.status376 == 0) {
				this.event = event;
				this.deleteShow = true;
				}
			},
			deleteImg() {
				
				var event = this.event;
				var url = event.file.url;
				var index = url.lastIndexOf("\/");
				var attachId = url.substring(index + 1, url.length);

				deleteTmsAttachMngs(attachId).then(res => {
					if (res.code == 200) {
						this[`fileList${event.name}`].splice(event.index, 1)
						// 删除成功消息
						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'
						})
					}

					this.event = {};
					this.deleteShow = false;
				})
			},
			// 新增图片
			imgUploading(event) {

				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					insertTmsAttachMngs(this.formData).then(res => {
						if (res.code == 200) {
							let data = {
								name: 'avatarfile',
								filePath: lists[i].url
							}
							let dataForm = {
								attachId: res.data
							}
							pictureUploading(data, dataForm).then(res => {
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(
									item, {
										status: 'success',
										message: '',
										url: res.data
									}))
								fileListLen++
							})
						}

					})
				}
			},
			// 定点加油1清空
			gasstation1Change() {
				this.formData.oilappoint1Qty = 0;
				this.formData.oilappoint1Amt = 0;
			},
			// 定点加油2清空
			gasstation2Change() {
				this.formData.oilappoint2Qty = 0;
				this.formData.oilappoint2Amt = 0;
			},
			// 点击拨打电话
			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
				})
			},
			inputHeight() {
				// if (this.vHeight == 0) {
				this.vHeight = 600;
				// } else {
				// 		this.vHeight = 0;
				// }
			}
		}
	}
</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%;
				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;
				}
			}
		}
		
		.box-two {
		
			color: #3b3b3b;
		
			overflow: hidden;
			height: 100rpx;
		
			padding-left: 20rpx;
			// margin-right: 20rpx;
		
			font-size: 30rpx;
		
			display: flex;
			align-items: center;
		
			.key {
				
				
				display: inline-block;
				width: 24%;
				color:  #3c9cff;
		
			}
		
			.value {
				margin-left: 20rpx;
				width: calc(100% - 24%);
				color: #3b3b3b;
				// margin-right: 20rpx;
				border-bottom: 2rpx dotted #000;
		
			}
		}

		.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%;

			.submit {
				background-color: #0b68ffff;
			}
		}
		
		.input {
			width: 100%;
			// height: 100rpx;
			// background-color: red;
			
		}

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



	}
</style>