aiot-app/pages/salesServiceManagement/demandList/components/faultAdd.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="故障信息"
			@clickLeft="back">
		</uni-nav-bar>
		<u-cell-group>

			<u-cell title="故障类型" arrow-direction="down">
				<uni-data-picker v-model="form.type" slot="value" placeholder="请选择" :localdata="typeOptions"
					@change="sourceCodeOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="故障现象" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.faultPhenomenon"></u--input>
			</u-cell>
			<u-cell title="故障原因" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.faultReason"></u--input>
			</u-cell>
			<u-cell title="维修过程" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.maintenanceProcess"></u--input>
			</u-cell>
			<view class="photo">
				<PhotoBtn :imageUrl="form.imageUrl" ref="photoRef" />
			</view>
			<view class="footerButton">
				<u-button type="default" text="返回" @click="back"></u-button>
				<u-button type="primary" @click="save" text="保存"></u-button>
			</view>
		</u-cell-group>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import PhotoBtn from '@/pages/salesServiceManagement/workOrder/components/forWork/PhotoBtn.vue';
	export default {
		components: {
			PhotoBtn
		},
		data() {
			return {
				form: {
					type: '',
					faultPhenomenon: '',
					faultReason: '',
					maintenanceProcess: '',
					imageUrl: []
				},
				type: '',
				infoIdx: '',
				str: "",
				typeOptions: [{
						text: '维修',
						value: '1'
					},
					{
						text: '保养',
						value: '2'
					},
					{
						text: '安装',
						value: '3'
					}
				],
			}
		},

		async onLoad(data) {
			this.infoIdx = data.index;
			this.str = data.str;
			this.type = data.type;

			if (data.data) {
				this.form = JSON.parse(data.data);
			}
			console.log(data.arr,'123')
			if(data.arr){
				const arr = JSON.parse(decodeURIComponent(data.arr));
				this.form.imageUrl = arr
			}
			
		},
		methods: {
			save() {
				if (!this.form.type) {
					this.$refs.uToast.show({
						type: "warning",
						message: "故障类型不能为空",
					})
					return;
				}
				if (!this.form.faultPhenomenon) {
					this.$refs.uToast.show({
						type: "warning",
						message: "故障现象不能为空",
					})
					return;
				}
				if (this.str == 'report') {
					if (!this.form.faultReason) {
						this.$refs.uToast.show({
							type: "warning",
							message: "故障原因不能为空",
						})
						return
					}
					if (!this.form.maintenanceProcess) {
						this.$refs.uToast.show({
							type: "warning",
							message: "维修过程不能为空",
						})
						return
					}
				}
				let data = JSON.parse(JSON.stringify(this.form));
				data.imageUrl = this.$refs.photoRef.getImageData();
				uni.$emit('updateFaultList', {
					data: data,
					type: this.type,
					index: this.infoIdx
				})
				this.back()
			},
			sourceCodeOnchange(e) {
				console.log(e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell__body__content {
		flex: none;
		margin-right: 16rpx;
	}

	.mainBox {
		padding-bottom: 84rpx;

		.photo {
			box-sizing: border-box;
			width: calc(100% - 28rpx);
			padding: 20rpx 16rpx 10rpx 0;
			margin-left: 28rpx;
		}
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}

	// /deep/.u-button {
	// 	height: 100%;
	// }

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}
</style>