smart-app/pages/conLedger/conLedger.vue

<template>
	<view>
		<!-- 头部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">施工台账</block>
			<block slot="content"></block>
			<block slot="right">
				<view class=" flex justify-center" >
				 	<button @click="search()"  class="margin-top-ssm  cu-btn round line-blue text-white" style="width: 160rpx;height: 66rpx;padding: 0;">
						<image src="/static/index/search-white.png" style="width: 32rpx;height: 32rpx;margin-right: 16rpx;"></image>搜索
					</button>
				</view>
			</block>
		</cu-custom>
		<!-- <scroll-view scroll-y="true" style="margin-bottom: 150px;height:650px;" > -->
		<scroll-view scroll-y="true" :class="[ledgerDate.containConcrete ? 'is-hnt' : '', 'no-hnt']" >
			<view v-for="(item,index) in treeData" :key="item.id" class="treeData_b">
				<view class="treeData_1" @click="treeTap(index+1,item)">
					<view style="font-weight: bold;font-size: 34rpx;" :class="item.selected?'indexColor':''">{{item.name}}</view>
					<view v-if="item.children.length>0">
						<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="show == index + 1"></image>
						<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="show != index + 1 || show == 0"></image>
					</view>
				</view>
				<view v-for="(second,seconds) in item.children" :key="second.id" v-if="show == index + 1">
					<view class="treeData_1s treeData_2" @click="secondTap(seconds + 1,second)">
						<view :class="second.selected?'indexColor':''">{{second.name}}</view>
						<view v-if="second.children.length>0">
							<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsecond == seconds + 1"></image>
							<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsecond != seconds + 1 || showsecond == 0"></image>
						</view>
					</view>
					<view v-if="showsecond == seconds + 1" :style="{'padding-bottom': second.children.length>0 ? '22rpx':''}">
						<view v-for="(three,threes) in second.children" :key="three.id" class="treeData_three">
							<view class="treeData_1s treeData_3" @click="threeTap(threes + 1,three)">
								<view :class="three.selected?'indexColor':''">{{three.name}}</view>
								<view v-if="three.children.length>0">
									<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showthree == threes + 1"></image>
									<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showthree != threes + 1 || showthree == 0"></image>
								</view>
							</view>
							<view v-if="showthree == threes + 1" v-for="(four,fours) in three.children" :key="four.id">
								<view class="treeData_1s treeData_3" @click="fourTap(fours + 1,four)">
									<view style="padding-left: 22rpx;" :class="four.selected?'indexColor':''"><text style="margin-right: 10rpx;">◈</text>{{four.name}}</view>
									<view v-if="four.children.length>0">
										<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfour == fours + 1"></image>
										<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfour != fours + 1 || showfour == 0"></image>
									</view>
								</view>
								<view v-if="showfour == fours + 1" v-for="(five,fives) in four.children" :key="five.id">
									<view class="treeData_1s treeData_3" @click="fiveTap(fives + 1,five)">
										<view style="padding-left: 44rpx;" :class="five.selected?'indexColor':''"><text style="margin-right: 10rpx;">➣</text>{{five.name}}</view>
										<view v-if="five.children.length>0">
											<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfive == fives + 1"></image>
											<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfive != fives + 1 || showfive == 0"></image>
										</view>
									</view>
									<view v-if="showfive == fives + 1" v-for="(six,sixs) in five.children" :key="six.id">
										<view class="treeData_1s treeData_3" @click="sixTap(sixs + 1,six)">
											<view style="padding-left: 66rpx;" :class="six.selected?'indexColor':''"><text style="margin-right: 10rpx;">•</text>{{six.name}}</view>
											<view v-if="six.children.length>0">
												<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsix == sixs + 1"></image>
												<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsix != sixs + 1 || showsix == 0"></image>
											</view>
										</view>
										<view v-if="showsix == sixs + 1" v-for="(seven,sevens) in six.children" :key="seven.id">
											<view class="treeData_1s treeData_3" @click="sevenTap(sevens + 1,seven)">
												<view style="padding-left: 88rpx;" :class="seven.selected?'indexColor':''">{{seven.name}}</view>
												<view v-if="seven.children.length>0">
													<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showseven == sevens + 1"></image>
													<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showseven != sevens + 1 || showseven == 0"></image>
												</view>
											</view>
											<view v-if="showseven == sevens + 1" v-for="(eight,eights) in seven.children" :key="eight.id">
												<view class="treeData_1s treeData_3" @click="eightTap(eights + 1,eight)">
													<view style="padding-left: 110rpx;" :class="eight.selected?'indexColor':''">{{eight.name}}</view>
													<view v-if="eight.children.length>0">
														<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showeight == sevens + 1"></image>
														<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showeight != sevens + 1 || showeight == 0"></image>
													</view>
												</view>
												<view v-if="showeight == eights + 1" v-for="(nine,nines) in eight.children" :key="nine.id">
													<view class="treeData_1s treeData_3" @click="nineTap(nines + 1,nine)">
														<view style="padding-left: 132rpx;" :class="nine.selected?'indexColor':''">{{nine.name}}</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		<!-- 底部-->
		<view v-if="modalShow" class="shadow foot" style="background-color: #0A8CD5;color: #fff;position: fixed; z-index: 999; bottom: 0;width: 100%;padding-bottom: calc(var(--window-bottom) + 10px);">
			<view class="padding-sm solid-bottom-type" style="display: flex;align-items: center;position: absolute;left: 0;right: 0;top: -80rpx;height: 80rpx;opacity: 0.9;background-image: linear-gradient(#91C9E8, #0A8CD5);box-shadow: 0px -1px 2px #D0D0D0;">
				<image class="login-img" src="/static/index/label.png"></image>	
				<view style="overflow-x: scroll;width: 680rpx;margin-left: 16rpx;">
					<view class="text-white" style="white-space : nowrap;font-weight: bold;">{{path}}</view>
				</view>
			</view>
			<view v-if="nodeShow" class="padding-sm">
				<view class="text-sm justify-around" style="margin-top: 16rpx;" v-if="ledgerDate.containConcrete">
					<view style="border:1px solid white;display: flex;align-items: center;margin-bottom: 20rpx;" class="padding-sm shadow">
						施工日期：
				       <range-datetime style="flex: 1" type="rangetime" @change="bindDateChange" format="yyyy.mm.dd hh:ii:ss" :defaultValue="[ledgerDate.startDate,ledgerDate.startDateEnd]"></range-datetime>
					</view>
					<view style="border:1px solid white;display: flex;align-items: center;" class="padding-sm shadow">
						检测日期：
						<range-datetime style="flex: 1;" type="rangetime" @change="bindDateChangeEnd" format="yyyy.mm.dd hh:ii:ss" :defaultValue="[ledgerDate.testDate,ledgerDate.testDateEnd]"></range-datetime>
						<!-- <datetime  fields="day" :dataTime="ledgerDate.testDate==null  ? '请选择':ledgerDate.testDate" @change="bindDateChangeEnd"></datetime> -->
					</view>
					<view class="flex" style="margin-top: 20rpx;">
						<view class="padding-sm shadow" style="border:1px solid white;flex: 1;" @click="showPopup(1)">
							设计方量：{{ledgerDate.designvolume}}
						</view>
						<view style="width: 20rpx;"></view>
						<view class="padding-sm shadow" style="border:1px solid white;flex: 1;" @click="showPopup(2)">
							实际方量：{{ledgerDate.actualvolume}}
						</view>
					</view>
				</view>
				<view class="text-sm justify-around" style="margin-top: 16rpx;" v-else>
					<view style="border:1px solid white;display: flex;align-items: center;margin-bottom: 20rpx;" class="padding-sm shadow">
						施工日期：
				       <range-datetime style="flex: 1" type="range" @change="bindDateChange" format="yyyy.mm.dd" :defaultValue="[ledgerDate.startDate,ledgerDate.startDateEnd]"></range-datetime>
					</view>
					<view style="border:1px solid white;display: flex;align-items: center;" class="padding-sm shadow">
						检测日期：
						<range-datetime style="flex: 1;" type="range" @change="bindDateChangeEnd" format="yyyy.mm.dd" :defaultValue="[ledgerDate.testDate,ledgerDate.testDateEnd]"></range-datetime>
						<!-- <datetime  fields="day" :dataTime="ledgerDate.testDate==null  ? '请选择':ledgerDate.testDate" @change="bindDateChangeEnd"></datetime> -->
					</view>
				</view>	
			</view>
			<view v-else="nodeShow" class="padding-sm flex justify-center align-center" style="font-size: 28rpx;height: 222rpx;">
					<text>请选择到工序节点</text>
			</view>
		</view>
		<uni-popup ref="popup1" type="dialog">
		    <uni-popup-dialog mode="input" title="设计方量" placeholder="请输入数字" :value="ledgerDate.designvolume" :duration="0" @confirm="confirm1"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup2" type="dialog">
		    <uni-popup-dialog mode="input" title="实际方量" placeholder="请输入数字" :value="ledgerDate.actualvolume" :duration="0" @confirm="confirm2"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import rangeDatetime from "@/components/range-datetime.vue";
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
		    rangeDatetime,
			uniPopupDialog
		},
		data() {
			return {
				treeData: [],
				show: 0, //一级状态
				showsecond: 0, //二级状态
				showthree: 0, //三级状态
				showfour: 0, //四级状态
				showfive: 0, //五级状态
				showsix: 0, //六级状态
				showseven: 0, //七级状态
				showeight: 0, //八级状态
				shownine: 0, //九级状态
				modalShow:false,
				modalShowTime:false,
				nodeShow:false,
				ledgerDate:{
					startDate:"",startDateEnd:"",
					testDate:"",testDateEnd:"",
					designvolume:"",//设计
					actualvolume:"",//实际
					containConcrete:0,//0不是混凝土，1是
				},
				path:"",
				timeType:0,
			    dotStyle:{color: 'black'},
				chooseData:"",
				
				volumeType:0,//1是设计方量，2是实际方量
			}
		},
		onLoad() {
			this.findDataProgress();
		},
		methods: {
			bindDateChange: function(e) {
				console.log(e)
				if(e.value[0] == e.value[1]){
					//开始日期=结束日期
					this.ledgerDate.startDate = e.value[0];
					this.ledgerDate.startDateEnd = "";
				}else{
					this.ledgerDate.startDate = e.value[0];
					this.ledgerDate.startDateEnd = e.value[1];
				}
				this.timeType =0;
				this.datechange(this.ledgerDate.startDate,this.ledgerDate.startDateEnd);
			},
			bindDateChangeEnd: function(e) {
				if(e.value[0] == e.value[1]){
					this.ledgerDate.testDate = e.value[0];
					this.ledgerDate.testDateEnd = "";
				}else{
					this.ledgerDate.testDate = e.value[0];
					this.ledgerDate.testDateEnd = e.value[1];
				}
				this.timeType =1;
				this.datechange(this.ledgerDate.testDate,this.ledgerDate.testDateEnd);
			 },
			showdialog(){
				this.modalShowTime= !this.modalShowTime;
			},
			datechange(date,dateEnd) {
				var that =this;
				var userId =  uni.getStorageSync("userInfo").id;
				if(!that.ledgerDate){
				   that.ledgerDate ={startDate:"",testDate:""}
				}
				if(that.timeType==0){
					that.http.request("/app/divideClient/upDateLedger",{nodeId:that.chooseData.id,date:date,type:1,userId:userId,end_date:dateEnd}).then((res)=>{
						if(res.result=='1'){
							//that.ledgerDate.startDate=e.fullDate;
							that.$prompt.none("保存成功");
						}else{
							that.$prompt.none(res.msg)
						}
					})
				}else{
					that.http.request("/app/divideClient/upDateLedger",{nodeId:that.chooseData.id,date:date,type:2,userId:userId,end_date:dateEnd}).then((res)=>{
						if(res.result=='1'){
							//that.ledgerDate.testDate=e.fullDate;
							that.$prompt.none("保存成功");
						}else{
							that.$prompt.none(res.msg)
						}
					})
				}
				that.showdialog();
			},
			/* 获取树状内容 */
			findDataProgress(){
				var that =this;
				var contractId = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).contractId;
				that.http.request('/app/divideClient/getDataByContract2', {
					contractId:contractId,
					type: 0,
					listtype: 1,
					nodeid:'',
					laytype: 0,
					}).then((result)=>{
						that.treeData =result.datas;
				})
			},
			/* 获取工序节点的施工台账 */
			findLedger(id){
				var that =this;
				var contractId = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).contractId;
				//divideType,传的是施工台账树节点的id，divideType传1。工序的树传0
				that.http.request('/app/divideClient/findLedger', { nodeId:id,contractId:contractId,divideType:1}).then((result)=>{
						let data = result.data.tPfConstructionLedger;
						if(!data){
							data = {
								
							}
						}
						data.containConcrete = result.data.tPfDivideClient.containConcrete;
						if( result.data!=null){
							if(data.testDate){
								data.testDate = data.testDate;
							}else{
								data.testDate = ""
							}
							if(data.testendDate){
								data.testDateEnd = data.testendDate;
							}else{
								data.testDateEnd = data.testDate
							}
							
							if(data.startDate){
								data.startDate = data.startDate;
							}else{
								data.startDate = ""
							}
							if(data.endDate){
								data.startDateEnd = data.endDate;
							}else{
								data.startDateEnd = data.startDate
							}
							that.ledgerDate =  data;
							console.log(that.ledgerDate)
						}else{
							that.ledgerDate.startDate="";
							that.ledgerDate.startDateEnd="";
							that.ledgerDate.testDate="";
							that.ledgerDate.testDateEnd="";
						}
						that.modalShow=true;
						that.nodeShow=true;			 
				})
			},
			search(){
				uni.setStorageSync("pageType",3);//区分搜索页面跳转
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			handleNodeClick(obj) {
				/* 获取父节点信息 */
				var that=this;
				//that.modalShow=false;
				that.chooseData =obj;
				//that.path="";
				that.http.request("/app/divideClient/selectNodeTreeById",{id:obj.id}).then((res)=>{
					if(res.datas.length==1){
						that.path=" / "+res.datas[0].name
					}else{
						res.datas.forEach((item)=>{
							if(item.parentId!=0){
								that.path += " / "+item.name;
							}
						})
					}
					if(obj.type==4){
						that.findLedger(obj.id);
					}else{
						that.modalShow=true;
						that.nodeShow=false;
					}
				})
				
			},
			treeTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.show == e) {
					this.show = 0
				} else {
					this.show = e
				}
				this.handleNodeClick(r);
			},
			secondTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showsecond == e) {
					this.showsecond = 0
				} else {
					this.showsecond = e
				}
				this.handleNodeClick(r);
			},
			threeTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showthree == e) {
					this.showthree = 0
				} else {
					this.showthree = e
				}
				
				this.handleNodeClick(r);
			},
			fourTap(e,r) {
				this.text(this.treeData);
				this.$set(r,"selected",true);
				if (this.showfour == e) {
					this.showfour = 0
				} else {
					this.showfour = e
				}
				this.handleNodeClick(r);
			},
			fiveTap(e,r) {
				this.text(this.treeData);
				this.$set(r,"selected",true);
				if (this.showfive == e) {
					this.showfive = 0
				} else {
					this.showfive = e
				}
				this.handleNodeClick(r);
			},
			sixTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showsix == e) {
					this.showsix = 0
				} else {
					this.showsix = e
				}
				this.handleNodeClick(r);
			},
			sevenTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showseven == e) {
					this.showseven = 0
				} else {
					this.showseven = e
				}
				this.handleNodeClick(r);
			},
			eightTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.showeight == e) {
					this.showeight = 0
				} else {
					this.showeight = e
				}
				this.handleNodeClick(r);
			},
			nineTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				if (this.shownine == e) {
					this.shownine = 0
				} else {
					this.shownine = e
				}
				this.handleNodeClick(r);
			},
			text(data) {
				var that = this;
				data.forEach((item) => {
					item.selected = false;
					if (item.children.length > 0) {
						that.text(item.children);
					}
			
				})
				that.treeData  = data;
			},
			
			showPopup(type){
				//1是设计方量，2是实际方量
				if(type == 1){
					this.$refs.popup1.open();
				}else if(type == 2){
					this.$refs.popup2.open();
				}
				
			},
			confirm1(done,value){
				this.ledgerDate.designvolume = value;
				var userId =  uni.getStorageSync("userInfo").id;
				this.http.request("/app/divideClient/upvolumeLedger",{nodeId:this.chooseData.id,volume:value,type:1,userId:userId}).then((res)=>{
					if(res.result=='1'){
						//that.ledgerDate.startDate=e.fullDate;
						done();
						this.$prompt.none("保存成功");
					}else{
						this.$prompt.none(res.msg)
					}
				})
			},
			confirm2(done,value){
				this.ledgerDate.actualvolume = value;
				var userId =  uni.getStorageSync("userInfo").id;
				this.http.request("/app/divideClient/upvolumeLedger",{nodeId:this.chooseData.id,volume:value,type:2,userId:userId}).then((res)=>{
					if(res.result=='1'){
						//that.ledgerDate.startDate=e.fullDate;
						done();
						this.$prompt.none("保存成功");
					}else{
						this.$prompt.none(res.msg)
					}
				})
			}
		}
	}
</script>

<style>
   .solid-bottom-type {
     	border-bottom: 1upx solid white;
   }
   .solid-bottom-btn {
     	border: 1upx solid white;
   }
   page{background-color: #F7F7F7;}
   .toTop {
   	position: fixed;
   	bottom: 0;
   	width: 100%;
   	background-color: #F7F7F7;
   	height: calc(var(--window-bottom) + 15px)
   }
   
   .solid-bottom-type {
   	border-bottom: 1upx solid white;
   }
   
   .treeData_b {
   	margin: 22rpx 22rpx 0;
   	background-color: #fff;
   	border-radius: 10rpx;
   	padding: 0 22rpx;
   }
   
   .treeData_1 {
   	font-size: 30rpx;
   	color: #101010;
   	height: 88rpx;
   	display: flex;
   	justify-content: space-between;
   	align-items: center;
   }
   
   .treeData_1s {
   	font-size: 30rpx;
   	color: #101010;
   	display: flex;
   	justify-content: space-between;
   	align-items: center;
   	padding: 22upx 0;
   	min-height: 88rpx;
   }
   
   .treeData_2 {
   	border-top: 1upx dashed #E3E1E1;
   }
   
   .treeData_3 {
   	border-top: 1upx dashed #E3E1E1;
   }
   
   .treeData_three {
   	background-color: #F7F7F7;
   	padding: 0 22rpx;
   	border-radius: 10rpx;
   	margin-bottom: 22;
   }
   
   .treeData_three:first-child {
   	border-radius: 10rpx 10rpx 0 0;
   }
   
   .treeData_three:last-child {
   	border-radius: 0 0 10rpx 10rpx;
   }
   
   .indexColor {
   	color: #0A8CD5;
   	font-weight: bold;
   }
   .padding-sm{padding:20rpx 22rpx;}
   .cu-btn.lg{font-size: 28rpx;}
   .cu-modal.show {
		overflow-y: auto;
		pointer-events: auto; 
   }
   .no-hnt{
	   padding-bottom: 340rpx;
   }
   .is-hnt{
   	   padding-bottom: 450rpx;
   }
</style>