aiot-app/pages/dispatchManage/taskWork/reportDetail.vue

<template>
	<view class="maintenance-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="报工信息" @clickLeft="back"></uni-nav-bar>
		<view class="maintenance-wrapper">
			<view class="maintenance-content">

				<view :scroll-y='true' class="kd-baseInfo">
					<view class="kd-cell">
						<text class="kd-label">里程</text>
						<uni-easyinput v-model="formData.mileage" :clearable='false' :inputBorder='false'>
							<template #right>
								<view>KM</view>
							</template>
						</uni-easyinput>
					</view>
					<template v-for="(item,index) in formData.costList">
						<view style="margin-top: 20px;">
							<view class="kd-cell">
								<text class="kd-label">费用类型</text>
								<text class="kd-content">{{ getDict('logistic_list_cost_type',item.costType )}}</text>

							</view>
							<view class="kd-cell">
								<text class="kd-label">金额</text>
								<text class="kd-content">{{item.cost}}</text>

							</view>
							<view class="kd-cell">
								<text class="kd-label">备注</text>
								<text class="kd-content">{{item.remark}}</text>
							</view>

							<view style="float: right;" v-if='formData.status==1'>
								<button class="btn-reassignment del" type="primary"
									@click="handleDelFee(index)">删除</button>
							</view>
						</view>

					</template>


				</view>
				<template v-if='formData.status==1'>
					<button class="btn-execute" type="primary" @click="handleExecute(2)">保存</button>
					<button class="btn-reassignment " type="primary" @click="handleAddFee">新增费用</button>

				</template>
				<template v-else>
					<button class="btn-execute" type="primary" @click="back(1)">返回</button>
				</template>

			</view>
		</view>



		<u-popup :show="popShow" @close="close">
			<view class="select-container">
				<view class="title">
					<text class="btn cancel" @tap="close">取消</text>
					新增费用
					<text class="btn confirm" @tap="submit">确定</text>
				</view>
				<view class="select-wrapper">
					<view class="col deptInp">
						<text class="label">费用类型：</text>
						<zxz-uni-data-select :localdata="costTypeList" v-model="form.costType"
							filterable></zxz-uni-data-select>
					</view>

					<view class="col userInp">
						<text class="label">金额：</text>
						<uni-easyinput v-model="form.cost" type='number'></uni-easyinput>
					</view>
					<view class="col userInp">
						<text class="label">备注：</text>
						<uni-easyinput v-model="form.remark" type='textarea'></uni-easyinput>

					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		logistictraklistnoteUpdateAPI
	} from '@/api/pda/dispatchManage/index.js'
	export default {
		components: {},
		data() {
			return {
				costTypeList: [],
				form: {},
				popShow: false,
				value: '',
				info: {},
				formData: {
					costList: []
				}
			}
		},
		onLoad(options) {
			this.formData = JSON.parse(options.item)
			this.costTypeList = this.formData.dictList['logistic_list_cost_type'].map(item => {
				let values = Object.keys(item)
				return {
					text: item[values[0]],
					value: values[0],
				}
			})
		},
		computed: {
			getDict() {
				return (dictName, val) => {
					let find = this.formData.dictList[dictName].find(item => item[val]) || {}
					return find[val] ? find[val] : ''
				}
			}
		},
		methods: {
			back(num = 1) {
				uni.navigateBack({
					delta: num
				})
			},
			async handleExecute(status) {
				if (!this.formData.mileage) {
					uni.showToast({
						icon: 'error',
						title: '请输入里程'
					})
					return
				}
				await logistictraklistnoteUpdateAPI({...this.formData,status})
				uni.showModal({
					title: `此工单报工成功`,
					content: '',
					confirmText: '确认',
					showCancel: false, // 是否显示取消按钮，默认为 true
					success: res => {
						if (res.confirm) {
							this.back(2)
						}
					}
				})
			},
			handleAddFee() {
				this.popShow = true
			},
			handleDelFee(index) {
				this.formData.costList.splice(index, 1)
			},
			submit() {
				if (!this.form.costType) {
					uni.showToast({
						icon: 'error',
						title: '请选择费用类型'
					})
					return
				}
				if (!this.form.cost) {
					uni.showToast({
						icon: 'error',
						title: '请输入金额'
					})
					return
				}
				this.form.listId = this.formData.id
				this.formData.costList.push({
					...this.form
				})
				this.form = {}
				this.close()
			},

			close() {
				this.popShow = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/components/submitted.scss';

	.list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $uni-text-color-grey;
		padding: 5rpx 20rpx;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}

	.font-text {
		color: $uni-text-color;
	}

	.btn-execute {
		background-color: $j-primary-border-green;
		width: 450rpx;
		margin-top: 10vh;
	}

	.btn-sparepart {
		width: 450rpx;
		margin-top: 20rpx;
	}

	.btn-reassignment {
		color: $uni-color-primary;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&::after {
			display: none;
		}
	}

	.del {
		color: red;
		font-size: 1.5rex;
	}

	.maintenance-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;

		/deep/.u-popup {
			flex: none !important;
		}
	}

	.maintenance-wrapper {
		position: relative;
		flex: 1;
	}

	.maintenance-content {
		padding-top: 40rpx;
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.kd-cell {
		line-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		justify-content: space-between;

		.kd-label {
			display: inline-block;
			width: 7em;
			font-weight: bold;
		}

		.kd-content {
			flex: 1;
			text-align: left;
			word-break: break-all;
		}
	}

	.kd-baseInfo {
		padding: 0 32rpx;
		font-size: 28rpx;
		height: 70%;
	}

	.kd-equipment {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.kd-type-box {
			text-align: center;
			padding: 26rpx 0;

			view {
				position: relative;
				display: inline-block;
				width: 120rpx;
				padding: 4rpx 0;
				color: #747474;
				margin: 0 20rpx;
				background-color: rgba(215, 215, 215, 0.5);

				&.type—active {
					background-color: #1e7f35;
					color: #fff;
				}

				.count {
					position: absolute;
					top: -9px;
					right: -9px;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					font-size: 12px;
					background-color: red;
					color: #fff;
				}
			}
		}

		.kd-list-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 12rpx 18rpx;
			background-color: $page-bg;

			.u-list {
				flex: 1;
				height: 100% !important;
			}
		}
	}

	.spare-parts {
		flex: 1;
		overflow: hidden;
	}

	.kd-card {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 8rpx 0;
		font-size: 28rpx;
		word-break: break-all;

		.kd-card-wrapper {
			padding: 0 30rpx;
			border-bottom: 1px solid #dadada;
		}

		.kd-cell {
			line-height: 60rpx;
		}

		.kd-cell:last-of-type {
			border-bottom: none;
		}

		.status-box {
			margin-right: 16rpx;
		}

		.card-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 8rpx 0 20rpx;

			button {
				width: 180rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				margin: 0 8rpx;
			}

			.primary-btn {
				background-color: $j-primary-border-green;
			}
		}
	}

	.apply-box {
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.select-container {
		min-height: 60vh;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: $j-primary-border-green;
			font-weight: bold;
			position: relative;
			font-size: 32rpx;
			color: #fff;

			// .btn-box {
			//   position: absolute;
			//   top: 50%;
			//   right: 10rpx;
			//   transform: translateY(-50%);
			// }
			.btn {
				width: 80rpx;
				height: 32rpx;
				display: inline-block;
				font-size: 32rpx;
				border: 1px solid #fff;
				text-align: center;
				line-height: 30rpx;
			}
		}

		.select-wrapper {
			.col {
				display: flex;
				// min-height: 0rpx;
				margin-top: 22rpx;
				align-items: center;
				padding-right: 14rpx;

				.label {
					display: inline-block;
					width: 200rpx;
					text-align: right;
				}

				.input_text {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					padding: 0rpx 16rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					border: 1px solid #eceeec;
					border-radius: 8rpx;
				}

				input {
					flex: 1;
					border: 1rpx solid #e5e5e5;
					height: 66rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					padding: 0rpx 16rpx;
					color: #6a6a6a;
				}

				textarea {
					border: 1rpx solid #e5e5e5;
					flex: 1;
					height: 100rpx;
				}

				.tab_box {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 520rpx;

					.tab {
						display: flex;
						flex-direction: row;

						border: 2rpx solid #d9ecff;
						background-color: #f4f4f5;
						border-color: #e9e9eb;
						color: #909399;
						margin-left: 8rpx;
						margin-bottom: 8rpx;
						padding: 2rpx 8rpx;
						font-size: 28rpx;
					}

					.icon {
						margin-left: 6rpx;
					}
				}
			}
		}
	}
</style>