zhxf-app/pages/weiBao/planDetail/planDetail.vue

<template>
	<view>

		<form action="">
			<view style='height:30rpx'></view>

			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					上报名称：
				</view>
				<input type="text" v-model="reportName">
			</view>

			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					维保状态：
				</view>
				<radio-group name="gender" @change="radioChange">
					<label class="margin-right-xs">
						<radio value="0" checked /><text>正常</text>
					</label>
					<label class="margin-right-xs">
						<radio value="1" /><text>异常</text>
					</label>
					<label class="margin-right-xs">
						<radio value="2" /><text>故障</text>
					</label>
					<label>
						<radio value="3" /><text>其他</text>
					</label>
				</radio-group>

			</view>

			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					上传图片：
				</view>

				<view style="width:500rpx">
					<view ref="input" class="input">
					</view>
					<!-- <view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
								:data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view> -->
				</view>
			</view>

			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					维保描述：
				</view>
				<textarea maxlength="-1" @input="textareaAInput" placeholder="" v-model="msg" width="250"></textarea>
			</view>

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="addSubmit">提 交 </button>
			</view>

		</form>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				msg: '',
				id: '',
				reportName: '',
				radioOne: 0,
				zb_id:0

			}
		},

		onLoad: function(option) {
			this.id = option.id;
			this.zb_id=option.zb_id
		},

		mounted() {
			// 创建附件上传
			var _self = this;
			var input = document.createElement('input'); //创建元素
			input.type = 'file' //添加file类型
			input.onchange = (event) => {
				_self.upFile(input, event)
			}
			this.$refs.input.$el.appendChild(input)

		},
		methods: {
			radioChange(e) {
				console.log('type:' + e.detail.value);
				this.radioOne = e.detail.value;
			},

			upFile(input, event) {
				var _self = this;
				uni.uploadFile({
					url: 'https://qhome.usky.cn/USKYZHAF/USKYZHAF.php/Home/Inspection/setUpload',
					files: [{
						file: input.files[0],
						uri: event.srcElement.value
					}],
					success: (uploadFileRes) => {
						var data = JSON.parse(uploadFileRes.data)
						this.img = data.img_url;
						console.log(this.img)
					},
					fail: (err) => {

						console.log(err)
					}
				});
			},

			addSubmit() {
				if (!this.reportName) {
					uni.showToast({
						title: "请输入上报名称",
						icon: "none"
					});
					return
				}
				if (!this.msg) {
					uni.showToast({
						title: "请输入维保描述",
						icon: "none"
					});
					return
				}
				if (!this.img) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					});
					return
				}


				this.powerSubmitRes({
					"zb_id": this.zb_id,
					// "zb_id":600,
					"spot_id": this.id,
					"report_name": this.reportName,
					"spot_abnormal": this.radioOne,
					"img": this.img,
					"dwsb_remarks": this.msg,
				})

			},
			async powerSubmitRes(params = {}) {
				const res = await this.$myRequest({
					url: 'Maintenance/setMaintenance',
					data: params
				})
				if (res.data.flag) {
					uni.showToast({
						title: "提交成功",
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/weiBao/planInnerList/planInnerList?id=' + this.id,
						});
					}, 1000);
				}
			},


			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},

			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除此图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},

		}
	}
</script>

<style lang="scss">



</style>