hitap-chat/pages/investigation/components/investigation-item.vue

<template>
	<view>
		<view class="investigation-item" :class="investigationSelect === index ? 'active' : ''"
			v-for="(item, index) in investigationList" :key="item.name" @click="handleSelect(item, index)">
			<text>{{ item.name }}</text>
			<uni-icons type="checkmarkempty" size="24"
				:style="{color: '#2663BF', visibility: investigationSelect === index ? 'visible' : 'hidden'}" />
		</view>
		<u-popup :show="showInvestigationDetail" @close="showInvestigationDetail = false">
			<view class="custom-pop-head">
				<view class="left" @click="showInvestigationDetail = false">取消</view>
				<view class="title">{{ investigationDetailTitle }}</view>
				<view class="right" @click="investigationDetailHandle">确认</view>
			</view>
			<view class="box" style="max-height: 800rpx;overflow-y: auto">
				<view class="investigation-item" v-for="(item, index) in investigationDetailList" :key="index"
					style="width: 96%; padding: 0">
					<view class="detail-item" v-if="item.type === 'number' || item.type === '1'">
						<uni-forms-item :label="item.name" label-width="450rpx"
							style="display: flex;align-items: center">
							<u-input placeholder="请输入" border="none" v-model="item.standar" inputAlign="right"
								type="number">
								<u-text :text="item.unit" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
							</u-input>
						</uni-forms-item>
					</view>
					<view class="detail-item" v-else-if="item.type === 'text' || item.type === '2'">
						<uni-forms-item :label="item.name" label-width="450rpx"
							style="display: flex;align-items: center">
							<u-input placeholder="请输入" border="none" v-model="item.standar" inputAlign="right" />
						</uni-forms-item>
					</view>
					<view class="detail-item" v-else-if="item.type === 'check' || item.type === '3'">
						<uni-forms-item :label="item.name" label-width="450rpx"
							style="display: flex;align-items: center">
							<u-checkbox v-model="item.standar" :customStyle="{justifyContent: 'space-between'}"
								:name="'sdfs'" />
						</uni-forms-item>
					</view>
					<view class="detail-item" v-else-if="item.type === 'upload' || item.type === '4'">
						<uni-forms-item :label="item.name" label-position="top" label-width="450rpx"
							style="display: flex;align-items: center; min-height: 100rpx;" />
						<u-upload :fileList="item.fileList" @afterRead="(e) => afterRead(e, item)"
							@delete="(e) => deletePic(e, item)" name="1" :maxCount="1"></u-upload>
					</view>
				</view>
			</view>
			<view class="blank" />
		</u-popup>
	</view>
</template>

<script>
	export default {
		// 组件
		components: {},
		props: {
			sid: {
				type: String,
				default: '01'
			}
		},
		data() {
			return {
				// 公用的js
				$: this.$,
				investigationSelect: null,
				investigationList: [],
				showInvestigationDetail: false,
				investigationDetailTitle: '',
				investigationDetailList: []
			}
		},
		// 页面加载
		onLoad(e) {
			console.log(12312312312)
			// this.getData()
		},
		mounted() {
			if (this.sid) {
				this.getData()
			}
		},
		// 页面显示
		onShow() { },
		// 计算属性
		computed: {},
		// 方法
		methods: {
			// 删除图片
			deletePic(event, item) {
				item.fileList.splice(event.index, 1)
			},
			//获取随机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, item) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const id = this.uuid()
				if (!item.fileList) {
					item.fileList = []
				}
				this.$forceUpdate()
				item.fileList.push({
					id,
					...event.file,
					status: 'uploading',
					message: '上传中'
				})
				const result = await this.uploadFilePromise(item.fileList[0].url)
				const resultInfo = JSON.parse(result)
				const index = item.fileList.findIndex(v => v.id === id)
				if (resultInfo.code == 200) {
					item.fileList.splice(index, 1, Object.assign(item.fileList[index], {
						status: 'success',
						message: '',
						result: resultInfo,
						url: resultInfo.result
					}))
				} else {
					this.$.toast('上传失败')
					item.fileList.splice(index, 1, Object.assign(item.fileList[index], {
						status: 'error',
						message: '失败',
					}))
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.baseUrl + '/hiddenDanger/ftp/uploadFileToFtp', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(res.data)
						}
					});
				})
			},
			getData() {
				this.$request.globalRequest('/hiddenDanger/highDanger/getImportDangers', {}, 'GET').then(res => {
					if (res.code == 200) {
						for (let i = 0; i < res.result.length; i++) {
							for (let j = 0; j < res.result[i].dangerItems.length; j++) {
								res.result[i].dangerItems[j].nid = res.result[i].nid
							}
							// this.getInvestigationListDangerInfo(res.result[i].nid)
						}
						this.investigationList = res.result;
					}
				})
			},
			getData2(sid) {
				this.$request.globalRequest('/hiddenDanger/highDanger/getImportDangerInfo', {
					sid
				}, 'GET').then(res => {
					if (res.code == 200) {
						console.log(res.result)
						this.investigationDetailList = res.result.map(item => {
							switch (item.type) {
								case "1":
									item.standar = 0
									break;
								case "2":
									item.standar = ''
									break;
								case "3":
									item.standar = false
									break;
								case "4":
									item.fileList = []
									break;
							}
							return item
						})
					}
				})
			},
			// 跳转页面
			skipPage(even) {
				this.$.open(even)
			},
			handleSelect(item, index) {
				this.investigationSelect = index
				this.investigationDetailTitle = item.name
				// this.showInvestigationDetail = true
				// this.getData2(item.nid)
				this.$emit('select', this.investigationSelect, this.investigationList[index])
			},
			investigationDetailHandle() {
				this.showInvestigationDetail = false
				this.$emit('select', this.investigationList[this.investigationSelect], this.investigationDetailList)
			}
		},
		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;
		}
	}

	.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: 32rpx;
			height: auto;
			margin-bottom: 20rpx;
		}
	}

	.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;
		}
	}
</style>