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="afterSalesType==3?'质量问题信息':'故障信息'" @clickLeft="back">
		</uni-nav-bar>
		<u-cell-group>

			<u-cell :title="afterSalesType==3?'质量类型':'故障类型'" arrow-direction="down">
				<uni-data-picker v-model="form.type" slot="value" placeholder="请选择" :localdata="afterSalesType==3?after_sale_quality_type:typeOptions"
					@change="sourceCodeOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell :title="afterSalesType==3?'质量问题反馈':'故障现象'" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.faultPhenomenon"></u--input>
			</u-cell>
			<u-cell :title="afterSalesType==3?'质量问题分析':'故障原因'" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.faultReason"></u--input>
			</u-cell>
			<u-cell :title="afterSalesType==3?'质量处理方式':'维修过程'" 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';
	import {
		getByCode
	} from '@/api/pda/common.js'
	export default {
		components: {
			PhotoBtn
		},
		data() {
			return {
				afterSalesType: '',
				form: {
					type: '',
					faultPhenomenon: '',
					faultReason: '',
					maintenanceProcess: '',
					imageUrl: []
				},
				type: '',
				infoIdx: '',
				str: "",
				after_sale_quality_type:[],
				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;
			this.afterSalesType = data.afterSalesType

			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
			}
			this.getByCode()

		},
		methods: {
			getByCode() {
				const codeS = ['after_sale_quality_type']
				codeS.forEach(async (code) => {
					const codeValue = await getByCode(code);
					this[code] = codeValue.map(item => {
						const key = Object.keys(item)[0]
						return {
							value: key,
							text: item[key]
						}
					})
				})
			
			},
			save() {
				if (!this.form.type) {
					this.$refs.uToast.show({
						type: "warning",
						message: (this.afterSalesType == 3 ? '质量类型' : '故障类型') + "不能为空",
					})
					return;
				}
				if (!this.form.faultPhenomenon) {
					this.$refs.uToast.show({
						type: "warning",
						message: (this.afterSalesType == 3 ? '质量问题反馈' : '故障现象') + "不能为空",
					})
					return;
				}
				if (this.str == 'report') {
					if (!this.form.faultReason) {
						this.$refs.uToast.show({
							type: "warning",
							message: (this.afterSalesType == 3 ? '质量问题分析' : '故障原因') + "不能为空",
						})
						return
					}
					if (!this.form.maintenanceProcess) {
						this.$refs.uToast.show({
							type: "warning",
							message: (this.afterSalesType == 3 ? '质量处理方式' : '维修过程') + "不能为空",
						})
						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>