zd_wechatApp/pages/TopPipeWork/TopPipeWork.vue

<template>
	<view>
		<view class="background">

			<view class="uni-list">
				<view class="container">
					<view>
						工程名称
					</view>
					<view v-if="this.isEmpty(this.projectName.id)" style="margin-top: 10;"
						@click="pickerShow('gcmc',0)">
						<span style="color: darkgray;">请选择工程名称</span>
						<image src="../../static/images/icon_right.png"
							style=" position: absolute; width: 15px;height: 15px;"></image>
					</view>
					<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gcmc',0)">
						<span style="color: black;">{{projectName.name}}</span>
						<image src="../../static/images/icon_right.png"
							style=" position: absolute; width: 15px;height: 15px;"></image>
					</view>
				</view>

			</view>
			<view class="uni-list">
				<view class="container">

					<text>工程地点</text>
					<input class="uni-input" type="text" v-model="gcddValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">

					<text>工程编码</text>
					<input class="uni-input" type="text" v-model="gcbmValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">

					<text>施工单位</text>
					<input class="uni-input" type="text" v-model="sgdwValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">

					<text>工程规模</text>
					<input class="uni-input" type="text" v-model="gcgmValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">

					<text>施工质量</text>
					<input class="uni-input" type="text" v-model="sgzlValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container">

					<text>施工进度</text>
					<input class="uni-input" type="number" v-model="sgjdValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>



			<view class="uni-list">
				<view class="align-items" style="margin-bottom: 20px;">
					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
						<view v-for="(item,index) in fileArr" :key="index" style="position: relative;">

							<view
								v-if="item.picUrl.substring(item.picUrl.length - 3) == 'png' || item.picUrl.substring(item.picUrl.length - 3) == 'jpg'||item.picUrl.substring(item.picUrl.length-3)=='jpeg' ">
								<image v-if="fileImageArr.concat(item.picUrl)" :src="item.picUrl" mode=""
									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
									@click="showPhotoFile(fileImageArr.indexOf(item.picUrl))">
								</image>
							</view>
							<view v-else-if="item.picUrl.substring(item.picUrl.length - 3) == 'mp4'">
								<video :src="item.picUrl"
									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
							</view>


							<view v-else style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
								@click="chooseModel(item.picUrl,item.fileName)">
								{{item.fileName}}
							</view>
						</view>
					</view>
				</view>
			</view>




			<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
				subtitleKey="id" v-model="name"></SelectPicker>


			<SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
				titleKey="dictLabel" subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>
		</view>

		<view class="background">
			<view>
				<view class="uni-list">
					<view style="font-size: 16px;margin-left: 10px;margin-top: 10px;">
						{{objValue.value}}

						<span
							style="color: blue;font-size: 14px;  display: flex;justify-content:flex-end; margin-right: 15px;"
							@click="history">历史</span>
					</view>
					<view class="container">

						<view>
							施工时间
						</view>
						<view @click="openDatetimePicker()">
							<span style="color: black;">{{time}}</span>
							<image src="../../static/images/icon_right.png"
								style=" position: absolute; width: 15px;height: 15px;"></image>
						</view>
					</view>
					<view class="container">
						<view class="uni-common-mt" style="width: 100%;">
							<text class="uni-title uni-common-pl">描述</text>
							<view style="width: 100%;padding-right: 20rpx;box-sizing: border-box;">
								<textarea class="textarea" placeholder="请输入描述" maxlength="100"
									placeholder-style="padding: 10rpx;"
									style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal;"
									auto-height v-model="projectContent"></textarea>
							</view>
						</view>
					</view>


					<view class="uni-list">
						<view class="container">

							<view>
								材 质
							</view>
							<view v-if="this.isEmpty(this.materialValue.id)" @click="pickerShow('cz')">
								<span style="color: darkgray;">请选择材质</span>
								<image src="../../static/images/icon_right.png"
									style=" position: absolute; width: 15px;height: 15px;"></image>
							</view>
							<view v-else class="uni-list-cell-db" @click="pickerShow('cz')">
								<span style="color: black;">{{materialValue.name}}</span>
								<image src="../../static/images/icon_right.png"
									style=" position: absolute; width: 15px;height: 15px;"></image>
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="container">

							<view>
								规 格
							</view>
							<view v-if="this.isEmpty(this.specificationValue.id)" @click="pickerShow('gg')">
								<span style="color: darkgray;">请选择规格</span>
								<image src="../../static/images/icon_right.png"
									style=" position: absolute; width: 15px;height: 15px;"></image>
							</view>
							<view v-else class="uni-list-cell-db" @click="pickerShow('gg')">
								<span style="color: black;">{{specificationValue.name}}</span>
								<image src="../../static/images/icon_right.png"
									style=" position: absolute; width: 15px;height: 15px;"></image>
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="container">

							<text>数 量</text>
							<input class="uni-input" type="number" v-model="inputNumberValue" placeholder="请填写数量"
								maxlength="11" style="margin-left: 10px;text-align: right;"></input>
						</view>
					</view>
				</view>
			</view>

			<view class="align-items" style="margin-top: 20px;margin-bottom: 20px;">
				<view class="container" style="color: gainsboro;">*请上传照片</view>
				<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
					<image src="/static/images/chooseimg.png" mode=""
						style="width: 100rpx; height: 100rpx; margin: 0 12rpx;; " @click="choose()"></image>
					<view v-for="(item,index) in imgArr" :key="index" style="position: relative;">
						<view
							v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' ">
							<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
								@click="showPhoto(index)">
							</image>
						</view>
						<view v-else>
							<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
						</view>
						<view @click="remove(index)"
							style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
							<image src="../../../static/images/icon_close.png" style=" width: 15px; height: 15px;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="action-btn">
			<button @click="submit" class="btn cu-btn block bg-blue lg round">确认上传</button>
		</view>

		<bottom-sheet ref="refShare" :data="historyList" :TitleType="objValue.value"></bottom-sheet>
		<yt-dateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2024" :end-year="2099"
			:time-hide="[true, true, true, true, true, true]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		<!-- 下载提示页面 -->
		<mypopup :show="show_loding" :popupText="popupText" :titleText="titleText" :cancelText="cancelText"
			:confirmText="confirmText" @close="cancel_loding" @confirm="confirm_loding">
		</mypopup>

	</view>
</template>

<script>
	import SelectPicker from '../../components/selectPicker/select_picker.vue'
	import bottomSheet from '../../components/bottomSheet/bottomSheetMore.vue'
	import mypopup from '../../components/mypopup/mypopup.vue'

	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		getToken
	} from '../../utils/auth';

	import {

		getEnginMaterialQualityList,
		getEnginSpecificationsList,
		getTopPipeWorkDetails,
		getTopPipeNameList,
		SubmitTopPipeWork,
		getTopPipeHistoryList

	} from '@/api/common'
	export default {
		components: {
			SelectPicker,
			bottomSheet,
			mypopup
		},



		data() {
			return {

				historyList: {}, //历史数据
				show_loding: false,
				popupText: '', //对话框内容
				titleText: '',
				cancelText: '',
				confirmText: '',
				objValue: '', //上一页面传过来的值  新增接口用
				headers: {
					Authorization: "Bearer " + getToken()
				},
				loading: false,
				time: '', //施工时间
				open: false,
				objValue: '', //上一页面传过来的值  新增接口用
				openDict: false,
				selectList: [],
				fileImageArr: [],
				dictOptions: [],
				imgArr: [],
				fileArr: [],
				projectName: '', //工程名称
				specificationValue: {}, //规格
				materialValue: {}, //材质
				inputNumberValue: '',
				gcddValue: '', //工程地点
				gcbmValue: '', //工程编码
				sgdwValue: '', //施工单位
				gcgmValue: '', //工程规模
				sgzlValue: '', //施工质量
				sgjdValue: '', //施工进度
				materialList: '', //材质list
				enginId: '', //其他工程id
				id: '', //工程id
				fileUrl: '', //点击的文件地址
				fileName: '', //点击的文件名称
				projectContent: '', //描述  
				zEngineeringMaterialBo: [], //给后台传的值  用料列表
			}
		},
		created() {
			this.time = this.traversalTime(new Date().getTime()) //在data里定义变量-nowTime
			console.log(this.time)
		},
		onLoad(options) {
			if ('params' in options) {
				this.objValue = JSON.parse(decodeURIComponent(options.params));
			}


		},
		methods: {
			//判断是否选择

			isEmpty(str) {

				return (!str || 0 === str.length);

			},

			handleSubmit(e) {

				this.time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;

			},

			//获取当前时间
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this
					.addTimes(
						mm) + ':' + this.addTimes(s);


			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			showPhotoFile(index) {
				uni.previewImage({
					current: index,
					urls: this.fileImageArr,
				})

			},
			showPhoto(index) {
				uni.previewImage({
					current: index,
					urls: this.imgArr,
				})

			},
			remove(index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该图片或视频？',
					success: (res) => {
						if (res.confirm) {
							this.imgArr.splice(index, 1)
							console.log('this.imgarr', this.imgArr)
							if (this.imgArr.length <= 0) {
								this.photo = true;
							}
						}
					}
				})
			},
			choose() {
				let _this = this;
				uni.showActionSheet({
					title: '上传',
					itemList: ['图片', '视频'],
					success: (res) => {
						console.log(res)
						if (res.tapIndex == 0) {
							this.chooseimage()
						} else {
							this.choosevideo()
						}
					}
				})
			},
			chooseimage() {

				let _this = this;
				console.log('图片', _this.headers)
				uni.chooseImage({
					sizeType: ['album', 'camera'],
					success(resp) {
						resp.tempFiles.forEach((item, index) => {
							const task = uni.uploadFile({
								url: _this.$HTTP + `/obs`,
								filePath: item.path,
								name: 'file',
								formData: {},
								header: _this.headers,

								success: res => {
									// 判断是否json字符串，将其转为json格式
									console.log("结果", res)
									// let data = _this.$u.test.jsonString(res
									// 	.data) ? JSON.parse(res.data) : res.data;
									let data = JSON.parse(res.data);
									if (![200].includes(data.code)) {
										// this.uploadError(index, data);
										_this.$modal.msg(data.msg)
									} else {
										if (_this.progress === 100) {
											console.log('_this.progress', _this.progress)
											//console.log('data----', data)data
											console.log('res--', res)
											_this.imgArr.push(data.data.url)
											console.log('imgArr', _this.imgArr)
											_this.$modal.msg('上传成功！')
											_this.photo = false;
										}
									}
								},
								fail: e => {
									console.log(e)
									_this.$modal.msg('上传失败！')
									//_this.uploadError(index, e);
								},
								complete: res => {
									uni.hideLoading();
									_this.uploading = false;

								}
							});
							task.onProgressUpdate(res => {
								_this.progress = res.progress;
								console.log('onProgressUpdate', res)
								console.log('task.onProgressUpdate', _this.progress)
								uni.showLoading({
									title: '上传中'
								})
								if (_this.progress != 100) {
									_this.loading = false
									console.log('_this.loading false', _this.loading)
								} else {
									_this.loading = true
									console.log('_this.loading true', _this.loading)
								}
							});

						})

					},
				})
			},

			choosevideo() {
				let _this = this;
				console.log('视频')
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					success(resp) {
						const task = uni.uploadFile({
							url: _this.$HTTP + `/obs`,
							filePath: resp.tempFilePath,
							name: 'file',
							formData: {},
							header: _this.headers,
							success: res => {
								// 判断是否json字符串，将其转为json格式
								let data = JSON.parse(res.data);
								if (![200].includes(res.statusCode)) {
									this.uploadError(index, data);
								} else {
									//上传成功
									if (_this.progress === 100) {
										console.log('_this.progress', _this.progress)
										_this.imgArr.push(data.data.url)
										console.log('imgArr', _this.imgArr)
										_this.$modal.msg('上传成功！')
										_this.photo = false;
									}
								}
							},
							fail: e => {
								_this.$modal.msg('上传失败！')
								this.uploadError(index, e);
							},
							complete: res => {
								uni.hideLoading();
								_this.uploading = false;
							}
						});
						task.onProgressUpdate(res => {
							_this.progress = res.progress;
							console.log('onProgressUpdate', res)
							uni.showLoading({
								title: '上传中'
							})
							if (_this.progress != 100) {
								_this.loading = false
								console.log('_this.loading false', _this.loading)
							} else {
								_this.loading = true
								console.log('_this.loading true', _this.loading)
							}
						});

					},
				})
			},
			chooseModel(url, name) {
				this.cancelText = '复制';
				this.confirmText = "下载";
				this.titleText = "温馨提示"
				this.popupText = "下载或者复制链接";
				this.show_loding = true;
				this.fileName = name;
				this.fileUrl = url; //文件名称和下载地址赋值

			},
			//取消按钮
			cancel_loding() {
				let _this = this;
				_this.show_loding = false;
				console.log("复制")
				if (!_this.isEmpty(_this.fileUrl)) {
					console.log(_this.fileUrl)
					console.log(_this.fileName)
					uni.setClipboardData({
						data: _this.fileUrl,
						success() {
							uni.showToast({
								title: '已复制' + _this.fileName + '地址成功 请在浏览器打开',
								icon: 'none'
							});
						},
						fail(e) {
							console.log("失败", e)
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});

				}
			},
			//确定按钮
			confirm_loding() {
				this.show_loding = false;
				console.log("下载")
				this.download(this.fileUrl, this.fileName);


			},

			getDownLoadFilePath() {
				let cachePath = `${uni.env.USER_DATA_PATH}/downloads`
				let fm = uni.getFileSystemManager()
				try {
					// 访问成功则存在
					fm.accessSync(cachePath)
				} catch (error) {
					// 不存在则新建
					fm.mkdirSync(cachePath, true)
				}
				return cachePath
			},
			download(url, name) {

				let savePath = this.getDownLoadFilePath();
				console.log('点击下载', url);
				console.log('点击下载333', savePath);
				//var savePath = uni.env.USER_DATA_PATH + '/savePath'

				uni.downloadFile({
					url: url,
					success: response => {
						if (response.statusCode === 200) {
							console.log("数据", response)
							uni.getFileSystemManager().saveFile({
								tempFilePath: response.tempFilePath,
								filePath: `${savePath}/${name}`,
								success: (resData) => {
									console.log('保存路径', resData.savedFilePath)
									console.log("dd", resData)
									uni.showToast({
										title: '下载成功'
									})
								},
								fail: error => {
									console.log('error: ', error)
								}
							})
						}
					},
					fail: error => {
						console.log("ddd", error)
					}

				})



			},
			pickerShow(e) {
				this.type = e; //赋值类型
				if (e == 'gcmc') {
					this.open = true;
					getTopPipeNameList().then(response => {
						this.selectList = response.data;
						
					});

				} else if (e == 'cz') { //材质
					this.open = true;
					getEnginMaterialQualityList("顶管工程").then(response => {
						this.selectList = response.data;
					});

				} else if (e == 'gg') { //规格
					if (this.isEmpty(this.materialValue.id)) {
						this.$modal.msg('请选择材质')

					} else {
						this.open = true;
						this.selectList = this.materialList;

					}

				}

			},
			changeSelect(item, index) {
				// this.index = index;
				// this.address = item.communityName;
				this.open = false;

				if (this.type == 'gcmc') {
					this.projectName = item;
					this.fileImageArr = [];
					uni.showLoading({
						title: '加载中'
					})
					getTopPipeWorkDetails(item.id).then(res => {
						uni.hideLoading();
						this.gcddValue = res.data.enginAddre; //工程地点
						this.gcbmValue = res.data.enginCode; //工程编码
						this.sgdwValue = res.data.constructUnit; //施工单位
						this.gcgmValue = res.data.enginScale; //工程规模
						this.sgzlValue = res.data.constructQuality; //施工质量
						this.sgjdValue = res.data.constructSchedule; //施工进度
						this.fileArr = res.data.pics;
						this.enginId = res.data.enginId;
						this.id = res.data.id;
						this.fileArr.forEach((list, index) => {
							if (list.picUrl.substring(list.picUrl.length - 3) == 'png' || list.picUrl
								.substring(list.picUrl.length - 3) == 'jpg' || list.picUrl.substring(list
									.picUrl.length - 3) == 'jpeg') {
								this.fileImageArr.push(list.picUrl)
							}
						
						
						});



					})

				} else if (this.type == 'cz') {
					this.materialValue = item;
					this.specificationValue = ''; //重置规格
					//根据材质ID 获取规格数据
					getEnginSpecificationsList(item.id).then(res => {
						this.materialList = res.data
					})
				} else if (this.type == 'gg') {
					this.specificationValue = item;

				}

			},
			//关闭弹窗
			close(e) {
				this.open = false
			},
			//历史
			history() {
				if (this.isEmpty(this.projectName.id)) {
					this.$modal.msg('请选择工程名称')
					return
				}
				getTopPipeHistoryList(this.id, this.objValue.value).then(response => {

					this.historyList = response.data
					if (response.data.zEngineeringNodeBo.zEngineeringInfoBoList != null) {
						this.$refs.refShare.handleShowShare();
					} else {
						this.$modal.msg("暂无历史信息")
					}

				});
			},
			//提交
			submit() {
				if (this.isEmpty(this.projectName.id)) {
					this.$modal.msg('请选择工程名称')
					return
				}
				if (this.isEmpty(this.materialValue.id)) {
					this.$modal.msg("请选择材质")
					return
				}
				if (this.isEmpty(this.specificationValue.id)) {
					this.$modal.msg("请选择规格")
					return
				}
				if (this.isEmpty(this.inputNumberValue)) {
					this.$modal.msg("请输入数量")
					return
				}
				if (this.imgArr.length <= 0) {
					this.$modal.msg('请上传照片或视频')
					return
				}
				if (this.loading == false) {
					this.$modal.msg('照片或视频未上传完毕，无法提交！')
				}
				let param = {
					id: this.id,
					enginId: this.enginId,
					enginName: this.projectName.name,
					enginAddre: this.gcddValue,
					enginCode: this.gcbmValue,
					constructUnit: this.sgdwValue,
					enginScale: this.gcgmValue,
					constructQuality: this.sgzlValue,
					constructSchedule: this.sgjdValue,

					files: this.fileArr,
					zEngineeringNodeBo: {
						type: this.objValue.value,
						zEngineeringInfoBo: {
							constructTime: this.time,
							remark: this.projectContent,
							zEngiineeringPhotoBoList: this.imgArr,
							zEngineeringMaterialBo: [{
								materialQuality: this.materialValue.id, //材质
								specifications: this.specificationValue.id, //规格
								number: this.inputNumberValue //数量
							}]
						}
					}
				}


				SubmitTopPipeWork(param).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							//显示持续时间为 3秒
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1000)

					}
				})
			},

		}
	}
</script>

<style>
	.container {
		display: flex;
		margin-left: 10px;
		margin-top: 10px;
		margin-right: 10px;
		align-items: flex-start;
		justify-content: space-between;
	}

	.text {
		font-size: 16px;
		color: #333;
	}

	.background {
		border: 15px solid hsla(0, 0%, 100%, .5);
		background: white;
		background-clip: padding-box;
		padding-left: 5px;
		padding-right: 10px;
		/*从padding开始往外面裁剪背景*/

	}

	.btn {
		margin-top: 40px;
		margin-right: 20px;
		margin-bottom: 120px;
		margin-left: 20px;
		height: 45px;
	}

	.number {
		display: flex;
		/* 水平居中显示子元素 */
		align-items: flex-start;
		/* 垂直居中显示子元素 */
		justify-content: space-between;
		/* 左右间距等于间距大小 */
		padding: 10px;
		/* 设置padding以提高视觉效果 */
	}

	.textarea {
		margin-top: 10upx;
		width: 100%;
		border: 1rpx solid red;
		min-height: 100upx;
		line-height: 20px;
	}

	page {
		background: #f2f2f2;
	}

	.flex-x {
		display: flex;
		align-items: center;
	}

	.template_title,
	.template_title1,
	.template_title_list {
		height: 90rpx;
		background: #fff;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.template_title1 {
		background: none;
	}

	.template_title_list {
		margin-bottom: 4rpx;
	}

	.template_title>view,
	.template_title1>view {
		font-size: 32rpx;
		color: #8f8f8f;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.template_title>input {
		font-size: 28rpx;
		color: #808080;
		text-align: right;
		flex-grow: 1;
	}

	/* 添加内容 */

	.add_con>text {
		font-size: 40rpx;
		color: #f16765;
		display: block;
		margin-right: 20rpx;
		margin-left: 10rpx;
		line-height: 44rpx;
	}

	.add_con>view {
		font-size: 32rpx;
		color: #7885cb;
	}

	/* 删除内容 */

	.del {
		font-size: 32rpx;
		color: #f16765;
		margin-right: 14rpx;
		padding: 20rpx;
	}

	input {
		flex-grow: 1;
		font-size: 28rpx;
		color: #808080;
	}

	.btn {
		margin-top: 100rpx;
	}
</style>