zhgdyunapp_vue3/pages/projectEnd/dangerBigProject/addVerifyForm.vue

<template>
	<view class="addPlan">
		<view class="fixedheader">
			<headers :themeType="true" :showBack="true">
				<view class="headerName">
					{{title}}
				</view>
			</headers>
		</view>

		<view class="wrap" :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }">
			<view class="plan-form">
				<view class="form-item b-bottom">
					<view class="form-lable"><text class="tag">*</text>验收类型</view>
					<picker @change="bindPickerChange" :disabled="!isEdit" :value="typeIndex" range-key="name" :range="typeList">
						<view style="display: flex;align-items: center;">
							<view class="uni-input">{{typeList[typeIndex] ? typeList[typeIndex].name : ""}}</view>
							<uni-icons2 v-if="isEdit" type="arrowright" size="20"></uni-icons2>
						</view>
					</picker>
				</view>
				<view class="form-item b-bottom">
					<view class="form-lable"><text class="tag">*</text>验收表类别</view>
					<view class="flex a-center">
						<view class="text">{{className}}</view>
						<uni-icons2 v-if="isEdit" type="arrowright" size="18" @click="showDrawer2"></uni-icons2>
					</view>
				</view>
				<view class="form-item b-bottom">
					<view class="form-lable"><text class="tag">*</text>验收表</view>
					<view class="flex a-center">
						<view class="text">{{tableName}}</view>
						<uni-icons2 v-if="isEdit" type="arrowright" size="18" @click="showDrawer3"></uni-icons2>
					</view>
				</view>
				<view class="form-item b-bottom">
					<view class="form-lable"><text class="tag">*</text>验收部位</view>
					<input class="from-input" :disabled="!isEdit" type="text" :value="formData.acceptanceRegion" @blur="bindInputBlur" placeholder="请输入验收部位" />
				</view>
				<view class="form-item b-bottom">
					<view class="form-lable"><text class="tag">*</text>验收人</view>
					<view class="flex a-center">
						<view class="text">{{peopleName}}</view>
						<uni-icons2 v-if="isEdit" type="arrowright" size="18" @click="showDrawer"></uni-icons2>
					</view>
				</view>
				<view class="form-item">
					<view class="form-lable"><text class="tag">*</text>计划执行时间</view>
					<picker class="form-content" :disabled="!isEdit" mode="date" :value="formData.planExecuteTime" :start="startDate" @change="bindDateChange">
						<view class="uni-input" >
							 {{formData.planExecuteTime}}
							<uni-icons2 v-if="isEdit" type="arrowright" color="#6C7178"/>
						</view>
					</picker>
				</view>
			</view>
			<uni-drawer ref="showRight" mode="right" :mask-click="true" :style="{'top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx'}">
			    <scroll-view style="height: calc(100% - 48px);" scroll-y="true">
			        <!-- <button @click="closeDrawer" type="primary">关闭Drawer</button> -->
			        <checkbox-group class="form-checkbox" @change="checkboxChange">
			            <label class="uni-list-cell uni-list-cell-pd flex a-center" v-for="(item,index) in peopleList" :key="index">
			                <view>
			        			<checkbox :value="item.userId.toString()" style="transform: scale(0.7);" :checked="item.checked" />
			                </view>
			                <view>{{item.realName}}</view>
			            </label>
			        </checkbox-group>
			    </scroll-view>
				<view class="check-btn" @click="closeDrawer">确定</view>
			</uni-drawer>
			
			<uni-drawer :width="280" ref="showRight2" mode="right" :mask-click="true" :style="{'top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx'}">
			    <scroll-view style="height: calc(100% - 48px);" scroll-y="true">
			        <!-- <button @click="closeDrawer" type="primary">关闭Drawer</button> -->
			        <radio-group class="radio-wrap" @change="radioChange">
						<view v-for="(item, index) in tableTypeList" :key="index">
							<label class="uni-list-cell uni-list-cell-pd flex a-center">
								<view>
									<radio :value="JSON.stringify(item)" style="transform: scale(0.7);" :checked="item.id == classifyId" />
								</view>
								<view>{{item.classifyName}}</view>
							</label>
							<view v-if="item.children">
								<view v-for="(itm, idx) in item.children" :key="idx">
									<label class="uni-list-cell uni-list-cell-pd flex a-center radio-children">
										<view>
											<radio :value="JSON.stringify(itm)" style="transform: scale(0.7);" :checked="itm.id == classifyId" />
										</view>
										<view>{{itm.classifyName}}</view>
									</label>
								</view>
							</view>
						</view>
			        </radio-group>
			    </scroll-view>
				<view class="check-btn" @click="closeDrawer2">确定</view>
			</uni-drawer>
			
			<uni-drawer ref="showRight3" mode="right" :mask-click="true" :style="{'top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx'}">
			    <scroll-view style="height: calc(100% - 48px);" scroll-y="true">
			        <!-- <button @click="closeDrawer" type="primary">关闭Drawer</button> -->
			        <radio-group class="radio-wrap" @change="radioChange2">
			        	<view v-for="(item, index) in tableRadioList" :key="index">
			        		<label class="uni-list-cell uni-list-cell-pd flex a-center">
			        			<view>
			        				<radio :value="JSON.stringify(item)" style="transform: scale(0.7);" :checked="item.id == tableId" />
			        			</view>
			        			<view>{{item.tableName}}</view>
			        		</label>
			        	</view>
			        </radio-group>
			    </scroll-view>
				<view class="check-btn" @click="closeDrawer3">确定</view>
			</uni-drawer>
		</view>
		<view v-if="pageType != 2" class="save-btn" @click="saveForm">下发验收任务</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				statusBarHeight: 0,
				title: "下发验收任务",
				classifyId: "",
				formData:{
					acceptanceRegion: "",
					planExecuteTime: "",
					acceptanceType: ""
				},
				textareaLengh: 0,
				typeList:[{
					id: 1,
					name: '施工条件验收'
				},{
					id: 2,
					name: '危大工程验收'
				}],
				typeIndex: "",
				projectSn:"",
				peopleList: [],
				checkList:[],
				tableTypeList: [],
				sn: "",
				tableRadioList: "",
				tableId: "",
				className: "",
				tableName: "",
				peopleName: "",
				tableOptionValue: "",
				engineeringId: "",
				userId: "",
				taskId: "",
				isEdit: true,
				pageType: "",
				detailData: ""
			}
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    }
		},
		onShow(){
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
			this.sn = JSON.parse(uni.getStorageSync('userInfo')).headquartersSn
			this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
			this.queryUserData()
			this.queryTableTypeListData()
		},
		onLoad(val){
			if(val.id){
				this.engineeringId = val.id
			}
			if(val.type){
				this.pageType = val.type
				this.taskId = val.taskId
				this.queryDetail()
				if(this.pageType == 2){
					this.isEdit = false
				}
			} 
		},
		methods:{
			queryDetail(){
				this.sendRequest({
					url: 'xmgl/acceptanceTableCheckTask/queryById',
					method: 'post',
					data: {
						id: this.taskId
					},
					success: res => {
						this.detailData = res.result
						let data = res.result
						this.formData.acceptanceType = data.acceptanceType;
						this.typeIndex = data.acceptanceType-1;
						this.classifyId = data.classifyId
						this.className = data.classifyName
						this.tableId = data.tableId
						this.formData.acceptanceRegion = data.acceptanceRegion
						this.checkList = data.acceptanceUser.split(',')
						this.queryUserData()
						this.queryTableListData()
						this.formData.planExecuteTime = data.planExecuteTime
						console.log(res.result, '-----回显数据')
					}
				})
			},
			radioChange(e){
				console.log(e)
				this.tableId = ""
				this.tableName = ""
				this.classifyId = JSON.parse(e.detail.value).id
				this.className = JSON.parse(e.detail.value).classifyName
				this.queryTableListData()
			},
			radioChange2(e){
				console.log(e)
				this.tableId = JSON.parse(e.detail.value).id
				this.tableName = JSON.parse(e.detail.value).tableName
				this.tableOptionValue = JSON.parse(e.detail.value).optionResult
			},
			bindInputBlur(e){
				this.formData.acceptanceRegion = e.detail.value
			},
			checkboxChange(e){
				console.log(e)
				this.checkList = e.detail.value
				let arr = []
				this.peopleList.forEach(item=>{
					let id = item.userId
					item.checked = false
					this.checkList.forEach(itm=>{
						if(itm == id){
							arr.push(item.realName)
							item.checked = true
							return;
						}
					})
				})
				console.log(this.peopleList)
				this.peopleName=arr.join(',')
			},
			showDrawer() {
                this.$refs.showRight.open();
            },
            closeDrawer() {
                this.$refs.showRight.close();
            },
			showDrawer2() {
			    this.$refs.showRight2.open();
			},
			closeDrawer2() {
			    this.$refs.showRight2.close();
			},
			showDrawer3() {
			    this.$refs.showRight3.open();
			},
			closeDrawer3() {
			    this.$refs.showRight3.close();
			},
			saveForm(){
				let data = this.formData
				data.classifyId = this.classifyId
				data.acceptanceUser = this.checkList.join(',')
				data.projectSn = this.projectSn
				data.tableId = this.tableId
				data.tableOptionValue =this.tableOptionValue
				data.createUser = this.userId
				data.engineeringId = this.engineeringId
				data.tableName = this.tableName
				data.classifyName = this.className
				if(this.formData.acceptanceType == ""){
					uni.showToast({
					    title: '请选择验收类型！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(this.classifyId == ""){
					uni.showToast({
					    title: '请选择验收表类别！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(this.tableId == ""){
					uni.showToast({
					    title: '请选择验收表！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(this.formData.acceptanceRegion == ""){
					uni.showToast({
					    title: '请输入验收部位！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(this.acceptanceUser == ""){
					uni.showToast({
					    title: '请选择验收人！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(this.formData.planExecuteTime == ""){
					uni.showToast({
					    title: '请选择计划执行时间！',
						icon: "none",
						duration: 2000
					});
					return;
				}
				console.log(data)
				if(this.pageType == 1){
					data.id = this.detailData.id
					if(!data.tableOptionValue){
						data.tableOptionValue = this.detailData.tableOptionValue
					}
					data.engineeringId = this.detailData.engineeringId
					console.log(data)
					this.sendRequest({
						url: 'xmgl/acceptanceTableCheckTask/edit',
						method: 'post',
						data: data,
						success: res => {
							console.log(res)
							if(res.code == 200){
								uni.showToast({
									title:'保存成功'
								})
								uni.navigateBack({
									
								})
							}
						}
					})
				} else {
					this.sendRequest({
						url: 'xmgl/acceptanceTableCheckTask/add',
						method: 'post',
						data: data,
						success: res => {
							console.log(res)
							if(res.code == 200){
								uni.showToast({
									title:'保存成功'
								})
								uni.navigateBack({
									
								})
							}
						}
					})
				}
			},
			bindPickerChange(e){
				this.typeIndex = e.detail.value
				this.formData.acceptanceType = this.typeList[e.detail.value].id
			},
			bindDateChange(e){
				this.formData.planExecuteTime = e.detail.value
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			    if (type === 'start') {
			        year = year;
			    } else if (type === 'end') {
			        // year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			queryUserData(){
				let _this = this
				this.sendRequest({
					url: 'xmgl/systemUser/getProjectChilderSystemUserList',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						_this.peopleList = res.result
						if(_this.checkList.length>0){
							_this.checkboxChange({detail:{
								value: _this.checkList
							}})
						}
						console.log(res.result, '-----验收人')
					}
				})
			},
			queryTableTypeListData(){
				let _this = this
				this.sendRequest({
					url: 'xmgl/inspectTableLibrary/selectTableLibraryList',
					method: 'post',
					data: {
						sn: this.sn
					},
					success: res => {
						this.tableTypeList = res.result
						console.log(res.result, '-----类别')
					}
				})
			},
			queryTableListData(){
				let _this = this
				this.sendRequest({
					url: 'xmgl/inspectTableItem/selectTableItemList',
					method: 'post',
					data: {
						classifyId: this.classifyId
					},
					success: res => {
						this.tableRadioList = res.result
						if(this.tableId){
							this.tableRadioList.forEach(item=>{
								if(item.id == this.tableId){
									this.tableName = item.tableName
								}
							})
						}
						console.log(res.result, '-----检查表')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.addPlan{
	height: 100%;
	background: #F6F6F6;
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.save-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 96rpx;
		background: #2b8df3;
		color: #fff;
		text-align: center;
		line-height: 96rpx;
	}
	.flex{
		display: flex;
	}
	.a-center{
		align-items: center;
	}
	.b-bottom{
		border-bottom: 1px solid #F6F6F6;
	}
	.f-column{
		flex-direction: column;
	}
	.wrap{
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 96rpx;
	}
	.plan-form{
		// padding-top: 20rpx;
		// padding-bottom: 96rpx;
		height: calc(100% - 40rpx);
		background: #fff;
		margin: 20rpx 0 0 0;
		.form-item{
			padding: 20rpx 24rpx;
			display: flex;
			justify-content: space-between;
			.form-lable{
				white-space: nowrap;
				font-size: 28rpx;
				.tag{
					color: #DD524D;
				}
			}
			.from-input{
				text-align: right;
			}
		}
	}
	.form-checkbox{
		padding-top: 30rpx;
		.uni-list-cell{
			padding-left: 30rpx;
			font-size: 28rpx;
			margin-bottom: 8rpx;
		}
	}
	.check-btn{
		height: 96rpx;
		width: 100%;
		background: #4181FE;
		color: #fff;
		text-align: center;
		line-height: 96rpx;
	}
	.radio-wrap{
		font-size: 28rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		.uni-list-cell{
			margin-bottom: 8rpx;
		}
		.radio-children{
			margin-left: 50rpx;
			margin-bottom: 8rpx;
		}
	}
}
</style>