yd_qycpfb/jp-mobile/pages/factoryBuildings/factoryBuildingsInfo.vue

<template>
	<view>
		<view class="overlay" v-if="showfx" @click="showwx">
			<image style="height: 100%;width: 100%;" src="/static/img/zz.png"></image>
		</view>
				
		<view :class="['custom-header', { 'is-back': isBack }, bgColor]">
			<view class="back-container" @click="handleBack">
			  <view class="back-text">返回</view>
			</view>
			<view class="content-container">
			  <view class="content-text">{{title}}</view>
			</view>
		</view>
					
		<form class="cu-list menu">
			
			<view class="titlebg2">
				<view class="titlet1" ></view>
				<view class="titlet2" >厂房信息</view>								
			</view>
			
			<view class="show1">
				
				<view class="textbg">
					<view class="text1">
						 厂房名称
					</view>	
					<input class="text44" v-model="inputForm.name" placeholder="输入厂房名称" :disabled="ischeck"></input>
				</view>
				
				<view class="textbg">
					<view class="text1">
						 所属园区
					</view>
					<view v-if="ischeck" class="text2" :class="inputForm.des1 === '需' ? 'text33' : 'text44'" >
						 {{inputForm.des1}}
					</view>	
								
					<picker v-else class="title2" @change="bindPickerChange" rangeKey="label" rangeValue="value" :range="parkList">
						<view class="text44" :class="{ placeholder: selectedPark === '请选择' }">{{ selectedPark }}</view>
					</picker>	
																				
				</view>
				
				<view class="textbg">
					<view class="text1">
						 详细位置
					</view>
					<input class="text44" v-model="inputForm.address" placeholder="输入详细位置" :disabled="ischeck"></input>			
				</view>
			</view>

			<view class="titlebg2">
				<view class="titlet1" ></view>
				<view class="titlet2" >闲置基本信息</view>								
			</view>
			
			
			<view class="textbg">
				<view class="text12">
					 {{t1}}
				</view>
				<view v-if="ischeck" class="text44" >
					 {{ inputForm.ownership===1 ? '国有' :
					        inputForm.ownership===2 ? '集体' : '民营' }}
				</view>	
					
				<picker v-else class="title2" @change="bindPickerChange2" rangeKey="label" rangeValue="value" :range="parkList2">
					<view class="text44" :class="{ placeholder: selectedownership === '请选择' }">{{ selectedownership }}</view>
				</picker>
				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t2}}(亩)
				</view>
				<view class="text22">
					 <input class="text44" v-model="inputForm.area" placeholder="输入占地面积" :disabled="ischeck"></input>
				</view>				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t3}}
				</view>
				<view v-if="ischeck" class="text44">
					 {{inputForm.singleLayer===1 ? '单层' : '多层'}}
				</view>	
				<picker v-else class="title2" @change="bindPickerChange3" rangeKey="label" rangeValue="value" :range="parkList3">
					<view class="text44" :class="{ placeholder: selectedsingleLayer === '请选择' }">{{ selectedsingleLayer }}</view>
				</picker>			
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t4}}(㎡)
				</view>
				<view class="text221">
					 <input class="text44" v-model="inputForm.idleArea" placeholder="输入占地面积" :disabled="ischeck"></input>
				</view>		
						
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t5}}
				</view>
				<view class="text221">
					 <input class="text44" v-model="inputForm.numberLayers" placeholder="输入层数" :disabled="ischeck"></input>
				</view>	
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t6}}
				</view>	
				<view class="text221">
					 <input class="text44" v-model="inputForm.floorHeight" placeholder="输入层高" :disabled="ischeck"></input>
				</view>			
			</view>
			
			<view class="textbg">
				<view class="text12">
					 备注
				</view>	
				<view class="text221">
					 <input class="text44" v-model="inputForm.remark" placeholder="输入备注" :disabled="ischeck"></input>
				</view>			
			</view>
			
			<view style="height: 30rpx;background-color: white;"></view>
			
			<view class="titlebg2" v-if="swiperList.length>0" >
				<view class="titlet1" ></view>
				<view class="titlet2" >图文详情</view>								
			</view>
			
			<view v-for="(item, index) in swiperList" :key="index" style="width: 100%;">
				<image :src="item.url"  mode="widthFix" style="width: 100%;" >					
				</image>
			</view>				
			
			<view style="height: 40rpx;"></view>

			<view class="padding-xl" v-if="!ischeck">
				<button @click="save" class="cu-btn block bg-blue margin-tb-sm lg">提交</button>
			</view>

		</form>
	</view>
</template>

<script>
	import loginService from '@/api/auth/loginService.js'
	import { wxShare } from "@/common/wxutils.js";
	export default {
		
		data() {
			return {
				title: '闲置厂房详情',
				isBack: true, // 是否显示返回按钮
			    backText: '返回', // 返回按钮的文本
			    bgColor: 'bg-blue', // 背景颜色
				ischeck: true,
				isAdd: true,
				autoUpload: false,
				swiperList: [],
				inputForm: {
					id: '',
					name: '',
					park: '',
					address: '',
					ownership: '',
					area: '',
					singleLayer: '',
					numberLayers: '',
					floorHeight: '',
					idleArea: '',
					remark: '',
					state: '',
					des1: '',
					des2: '',
					des3: '',
					des4: '',
					des5: '',					
					des6: '',
					des7: '',
					des8: '',
					des9: '',		

				},
				t1: '厂房权属',
				t2: '占地面积',
				t3: '单层/多层',
				t4: '闲置面积',
				t5: '层数',
				t6: '层高',
				text1:'',
				text2:'',
				parkList: [],
				parkList2: [],
				parkList3: [],
				selectedPark:'请选择',
				selectedownership:'请选择',
				selectedsingleLayer:'请选择',
				
				index:0,
				isLogin:"",
				username:"",
				isadmin:false,
				lyIndex: '',
				showLYList: [],
				showfx:false,
				rules: {
				  name: { label: '厂房名称', required: true },
				  park: { label: '所属园区', required: true },
				  address: { label: '详细位置', required: true },
				  ownership: { label: '厂房权属', required: true },
				  area: { label: '占地面积', required: true, pattern: /^\d+(\.\d{1,2})?$/ },
				  singleLayer: { label: '单层/多层', required: true },
				  idleArea: { label: '闲置面积', required: true, pattern: /^\d+(\.\d{1,2})?$/ },
				  numberLayers: { label: '层数', required: true, pattern: /^\d+$/ },
				  floorHeight: { label: '层高', required: true, pattern: /^\d+(\.\d{1,2})?$/ }
				}
			}
		},
		created() {
		},
		mounted() {
			
		},
		onShow() {
			this.isLogin=this.$auth.checkisLogin();
			//判断是否能新增
			if(this.isLogin!=null){
				this.getRole();
			}
		},
		onLoad(query) {
			this.isLogin=this.$auth.checkisLogin();
			this.username=this.$auth.getUserInfo();
			if(this.username!=undefined&&this.username!=''&&this.username!=null&&this.isLogin!=null){
				if(this.username.loginName=='admin'){
					this.isadmin=true;
				}
			}
						
			Promise.all([
			    loginService.getDictListBytype("sys_park"),
			    loginService.getDictListBytype("sys_ownership"),
			    loginService.getDictListBytype("sys_single_layer")
			  ]).then(([park, own, layer]) => {
			    this.parkList = park.data;
			    this.parkList2 = own.data;
			    this.parkList3 = layer.data;
			    // 字典到位后再回显详情
			    if (query.id) {                 // 有 id → 编辑/查看
				  this.isAdd = false
				  this.title = '闲置厂房详情'
				  return loginService.factoryqueryById(query.id)
				} else {                        // 无 id → 新增
				  this.isAdd = true
				  this.title = '新增闲置厂房'
				  return Promise.resolve({ data: {} })   // 空对象，走 setData 不会报错
				}
			  }).then(({ data }) => {
			    this.setData(data);
			  });
						
		},
		methods: {
			
			handleBack() {
				this.$router.go(-1);
			},
				
			getRole() {
				let userInfo = uni.getStorageSync('WMS-userinfo')
				var officeId = userInfo.officeDTO.id;
				var roleIds = userInfo.roleIds;
				//区“企业大走访”办公室、政府管理员、厂房板块维护人员
				if (roleIds.indexOf("1910175386924417025") != -1||roleIds.indexOf("ade960e8f02544998b07397304c059c1") != -1||roleIds.indexOf("1996038972899717121") != -1) {
					this.ischeck = false;
				} 
				
			},
									
			bindPickerChange(e) {
			  const idx = e.detail.value
			  const item = this.parkList[idx]
			  this.selectedPark = item.label
			  this.inputForm.park = item.value      
			},
			bindPickerChange2(e) {
			  const idx = e.detail.value
			  const item = this.parkList2[idx]
			  this.selectedownership = item.label
			  this.inputForm.ownership = item.value
			},
			bindPickerChange3(e) {
			  const idx = e.detail.value
			  const item = this.parkList3[idx]
			  this.selectedsingleLayer = item.label
			  this.inputForm.singleLayer = item.value
			},
			
			validate() {
			    for (const key in this.rules) {
			      const rule = this.rules[key]
			      const val  = this.inputForm[key]
			
			      if (rule.required && (!val || val === '请选择')) {
			        uni.showToast({ title: `请填写${rule.label}`, icon: 'none' })
			        return false
			      }
			      if (rule.pattern && !rule.pattern.test(val)) {
			        uni.showToast({ title: `${rule.label}格式有误`, icon: 'none' })
			        return false
			      }
			    }
			    return true
			  },
			
			save(){
				
				if (!this.validate()) return
				
				this.inputForm.state=1;
				
				uni.showLoading()
				loginService.savefactoryBuildings(this.inputForm).then(({
					data
				}) => {
					uni.hideLoading();
					uni.showToast({
						title: "闲置厂房提交成功！",
						icon: "success"
					});
					uni.navigateTo({
						url: '/pages/factoryBuildings/factoryBuildingsList'
					})
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			
			setData(data){
				this.inputForm = this.recover(this.inputForm, data)
									
				const parkItem = this.parkList.find(p => p.value == data.park);
				//    把中文名赋给用来显示的变量
				this.selectedPark = parkItem ? parkItem.label : '请选择';
				
				/* 同理，如果权属、单层多层也需要回显，照抄两行即可 */
				const ownItem = this.parkList2.find(p => p.value == data.ownership);
				this.selectedownership = ownItem ? ownItem.label : '请选择';
				
				const layerItem = this.parkList3.find(p => p.value == data.singleLayer);
				this.selectedsingleLayer = layerItem ? layerItem.label : '请选择';		  
				
			},			

		}
	}
</script>
<style>
	input,textarea{
		color: #8799a3;
	}
	
	.swiper {
		width: 750rpx;
		height: 310rpx;
	}
	
	.swiper-item {
		width: 750rpx;
		height: 310rpx;
		background-color: aliceblue;
	}
	.show1{
		background-color: #2752eb;
		padding-left: 8rpx;
	}
	.textbg{
		display: flex;
		background-color: white;
		padding-top: 29rpx;
	}
	.text1{
		width: 200rpx;
		margin-left: 30rpx;
		color: #333333;
		font-size: 30rpx;
	}
	.text12{
		width: 200rpx;
		margin-left: 30rpx;
		color: #000000;
		font-size: 29rpx;
	}
		
	.text2{
		flex: 1;
		color: #000000;
		font-size: 30rpx;
		padding-bottom: 2rpx;
	}
	
	.text33{
		flex: 1;
		color: #FF4500;
		font-size: 30rpx;
		padding-bottom: 2rpx;
	}
	
	.text44{
		flex: 1;
		color: #1E8AD7;
		font-size: 30rpx;
		padding-bottom: 2rpx;
		
	}
	.text44.placeholder {
	  color: #999; /* 灰色，用于未选择时 */
	}
	
	.text22{
		flex: 1;
		color: #666666;
		font-size: 29rpx;
		padding-bottom: 2rpx;
	}
	
	.text221{
		flex: 1;
		color: #666666;
		font-size: 29rpx;
		padding-right:15rpx ;
		padding-bottom: 2rpx;
	}
	.text3{
		display: flex;
		color: #000000;
	}
	.phone{
		display: flex;
		color: #1E8AD7;
		padding-left: 5rpx;
		padding-right: 5rpx;
		font-size: 30rpx;
		align-items: center
	}
	.phoneimg{
		margin-left: 10rpx;
		width: 35rpx;
		height: 35rpx;
	}
	.titlebg2{
		display: flex;
		background-color: white;
		padding-left: 22rpx;
		padding-top: 35rpx;
		padding-bottom: 25rpx;
		margin-bottom: 2rpx;
	}
	.titlet1{
		width: 7rpx;
		margin-top: 7rpx;
		margin-bottom: 7rpx;
		background-color: #2752eb;
		margin-right: 8rpx;
	}
	.titlet2{
		font-weight: 800;
		color: #2752eb;
	}
	.overlay{
	  position: fixed; /* 固定定位，覆盖整个页面 */
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
	  z-index: 1000; /* 确保遮罩在页面内容之上 */
	}
	
	
	.custom-header {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 10px;
	  width: 100%;
	}
	
	.is-back {
	  position: relative;
	}
	
	.back-container {
	  position: absolute;
	  left: 10px;
	  cursor: pointer;
	}
	
	.back-text {
	  color: white; /* 返回按钮文本颜色 */
	}
	
	.content-container {
	  flex: 1;
	  text-align: center;
	}
	
	.content-text {
	  color: white; /* 标题文本颜色 */
	  font-weight: bold;
	}
	
	/* 背景颜色 */
	.bg-blue {
	  background-color: #4285f4; /* 假设这是一个蓝色背景 */
	}
</style>