hitap-chat/pages/investigation/components/problem-box.vue

<template>
	<view class="problem-box">
		<view class="detail-item" @click="handleClickShowSelect">
			<uni-forms-item label="隐患问题" label-position="top" label-width="100px"
				style="display: flex;align-items: center" />
			<u-input placeholder="请输入" border="none" readonly v-model="text" type="textarea" />
		</view>
		<view class="detail-item">
			<uni-forms-item label="隐患描述" label-position="top" label-width="200px" />
			<u-textarea placeholder="请输入" border="none" v-model="formData.hdDesc" />
		</view>
		<view class="detail-item">
			<uni-forms-item label="隐患图片" label-position="top" label-width="200px" />
			<locationUpload :fileList="fileList" @afterRead="(e) => afterRead(e, 'fileList')"
				@delete="(e) => deletePic(e, 'fileList')" name="1" :maxCount="1"></locationUpload>
		</view>
		<view class="detail-item">
			<uni-forms-item label="补充信息" label-position="top" label-width="200px" />
			<u-textarea placeholder="请输入" border="none" v-model="formData.hdInfo" />
		</view>
		<u-popup :show="showProblemTreeSelect" @close="showProblemTreeSelect = false">
			<view class="custom-pop-head">
				<view class="left" @click="showProblemTreeSelect = false">取消</view>
				<view class="title">选择隐患</view>
				<view class="right" @click="showProblemTreeSelectHandle">确认</view>
			</view>
			<problem-tree-item @select="handleSelectTree" />
			<view class="blank" />
		</u-popup>
	</view>
</template>

<script>
	import ProblemTreeItem from "./problem-tree-item.vue";
	import locationUpload from '@/components/u-upload/index.js'
	export default {
		// 组件
		components: {
			ProblemTreeItem,
			locationUpload
		},
		props: {
			id: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 公用的js
				text: '',
				$: this.$,
				showProblemTreeSelect: false,
				originList: [],
				problemTreeSelect: null,
				problemTreeSelectList: [],
				problemTreeSelectConfirmList: [],
				fileList: [],
				formData: {
					bigCategory: '',
					smallCategory: '',
					hdTerm: '',
					hdPic: '',
					hdDesc: '',
					hdInfo: '',
				},
				tempList: []
			}
		},
		// 页面加载
		onLoad(e) {
			// this.getData()
		},
		mounted() {
			if (this.props.id) {
				this.getData()
			}
		},
		// 页面显示
		onShow() {},
		// 计算属性
		computed: {},
		// 方法
		methods: {
			changeEmit() {
				this.$emit('change', this.formData)
			},
			// 删除图片
			deletePic(event, key) {
				this[key].splice(event.index, 1)
				this.formData.hdPic = this[key].filter(item => item.status === 'success').map(item => item.url).toString()
				this.changeEmit()
			},
			//获取随机id
			uuid(len, binary) {
				len = !len ? 36 : len;
				binary = !binary ? 16 : binary;
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * binary | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(binary);
				}).substring(0, len)
			},
			// 新增图片
			async afterRead(event, key) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const id = this.uuid()
				this[key].push({
					id,
					...event.file,
					status: 'uploading',
					message: '上传中'
				})
				const result = await this.uploadFilePromise(event)
				const resultInfo = JSON.parse(result)
				const index = this[key].findIndex(v => v.id === id)
				if (resultInfo.code == 200) {
					this[key].splice(index, 1, Object.assign(this[key][index], {
						status: 'success',
						message: '',
						result: resultInfo,
						url: resultInfo.result
					}))
				} else {
					this.$.toast('上传失败')
					this[key].splice(index, 1, Object.assign(this[key][index], {
						status: 'error',
						message: '失败',
					}))
				}
				this.formData.hdPic = this[key].filter(item => item.status === 'success').map(item => item.url)
					.toString()
				this.changeEmit()
			},
			uploadFilePromise(event) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.baseUrl + '/hiddenDanger/ftp/uploadFileToFtp', // 仅为示例，非真实的接口地址
						filePath: event.file.url,
						formData: {
							position: event.position,
							longitude: event.longitude,
							latitude: event.latitude
						},
						name: 'file',
						success: (res) => {
							resolve(res.data)
						}
					});
				})
			},
			getData() {
				this.$request.globalRequest('/hiddenDanger/highDanger/getDangerItems', {}, 'GET').then(res => {
					if (res.code == 200) {
						this.originList = res.result
						this.problemTreeSelectList = res.result
					}
				})
			},
			// 跳转页面
			skipPage(even) {
				this.$.open(even)
			},
			handleSelectTree(list) {
				this.tempList = list
			},
			showProblemTreeSelectHandle() {
				console.log(this.tempList)
				if (this.tempList.length < 3) {
					this.$.toast('请选择')
					return false
				}
				this.formData.bigCategory = this.tempList[0].id;
				this.formData.smallCategory = this.tempList[1].id;
				this.formData.hdTerm = this.tempList[2].id;
				this.text = this.tempList.map(item => item.itemname).join('/');
				this.showProblemTreeSelect = false
				this.changeEmit()
			},
			handleClickShowSelect() {
				this.showProblemTreeSelect = true
			}
		},
		onReady() {},
		// 页面卸载
		onUnload() {

		},
		// 触发下拉刷新
		onPullDownRefresh() {
			// 延迟关闭刷新动画
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {},
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.investigation-item {
		margin: 0 auto 20rpx;
		width: 90%;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;

		&.active {
			background: #DFEBF8;
		}
	}

	.custom-pop-head {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E6E6E6;
		margin-bottom: 20rpx;

		.left {
			color: #666666;
		}

		.title {
			font-size: 16px;
		}

		.right {
			color: #2663BF;
		}
	}

	.breadcrumb {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.detail-item {
		width: 100%;
		background: #F0F3F7;
		padding: 20rpx 30rpx;
		border-radius: 8rpx;
		box-sizing: border-box;

		/deep/ .uni-forms-item__content {
			justify-content: flex-end;
			text-align: right;
			display: flex;
		}

		/deep/ .uni-forms-item {
			margin-bottom: 0;
		}

		/deep/ .uni-forms-item__label {
			font-size: 16px;
		}
	}

	.problem-box {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.detail-item {
			margin-bottom: 20rpx;
		}
	}
</style>