shuju_ui/qs_zhaoshang/components/popup/skdwzjpop.vue

<template>
	<view>
		<!-- 资金到位弹窗 -->
		<!-- 弹框 -->
		<view class="bgbox" @click="getClose" v-if="addzjdwflag"></view>
		<!--  -->
		<view class="fixedbox" v-if="addzjdwflag">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">到位资金</view>
			<!-- &&(ite.isSh==2&&idx==0||idx!=0) -->
			<view class="chebox" v-if="status=='update'&&checkPermi(['projectV2:dzje:remove'])&&(isSh==2)" @click="getDelFn">
				<image :src="delimg"></image>
				<view>删除</view>
			</view>
			<view class="boxs">
				<!-- 资金情况 -->
				<uni-forms ref="zjdwform" :rules="zjdwrules" :modelValue="dwzjinfo" >
					 <uni-forms-item name="dwmc" style='margin-bottom: 0;'>
					  <view class="infolist">
					   	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>单位名称</view>
					   	<input  placeholder="请输入单位名称"  v-model="dwzjinfo.dwmc"   class="f16  c34 flex1 txr"/>
					   </view>
					 </uni-forms-item>
					 <uni-forms-item name="zzje" style='margin-bottom: 0;'>
					  <view class="infolist">
					   	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>注资金额(万元)</view>
					   	<input  placeholder="请输入注资金额" type="number" v-model="dwzjinfo.zzje"  class="f16  c34 flex1 txr"/>
					   </view>
					 </uni-forms-item>
					 <uni-forms-item name="dwrq" style='margin-bottom: 0;'>
					  <view class="infolist">
					   	<view class="f16 fw c34 flex0 pr pl12"><text class="cir">*</text>到位日期</view>
					   	<picker mode="date" :value="dwzjinfo.dwrq"  class="infolist_a" @change='bindtimeDateChangec'>
					 		<view :class="dwzjinfo.dwrq?'':'f16 co80'">{{dwzjinfo.dwrq||"请选择到位日期"}}</view>
					   	</picker>
					   </view>
					 </uni-forms-item>
				</uni-forms>
			</view>
			<view class="fixedbtn" v-if="status=='update'&&checkPermi(['projectV2:dzje:edit'])||status=='add'&&checkPermi(['projectV2:dzje:add'])" @click="proSure">确认</view>
		</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		props:{
			iteminfo:{},
			addzjdwflag:false,
			status:{
				type: String,
				default () {
					return 'add'
				}
			},
			isSh:{
				type: String,
				default () {
					return '1'
				}
			}
		},
		data(){
			return{
				zjdwrules: {
				  dwmc: {rules: [{required: true,errorMessage: '请输入单位名称'}]},
				  zzje: {rules: [{required: true,errorMessage: '请输入注资金额'}]},
				  dwrq: {rules: [{required: true,errorMessage: '请选择到位日期'} ]},
				},
				dwzjinfo:{
					"dwmc":'',//单位名称
					"zzje":'',//注资金额
					"dwrq":'',//到位日期
				},
				closeimg:require('@/static/images/close.png'),
				delimg:require("@/static/images/mine/del.png"),
			}
		},
		watch:{
			iteminfo(val){
				this.dwzjinfo=JSON.parse(JSON.stringify(val))
			}
		},
		mounted() {
		},
		methods:{
			checkPermi, checkRole,
			// 到位日期(多个)
			bindtimeDateChangec(e){
				this.dwzjinfo.dwrq = e.detail.value;
				// console.log(this.dwzjinfo.dwrq,1)
			},
			getClose(){
				this.$emit('getClose')
			},
			proSure(){
				var that=this;
				this.$refs.zjdwform.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.dwzjinfo))
					that.$emit("proSure",params)
				})
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除该条信息",
					cancelText: '取消删除',
					confirmText: '确认删除',
					success: function(res) {
						if (res.confirm) {
							that.$emit("getldDelFn")
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				
			},
		}
	}
</script>

<style scoped lang="scss">
	// // 弹窗
	.fixedbox{position: fixed;left:56rpx;right: 56rpx;background: #fff;border-radius: 10rpx;min-height: 468rpx;top: 50%;transform: translateY(-60%);z-index: 20;padding: 48rpx 36rpx 68rpx;max-height: calc(100vh - 200rpx);overflow: auto;box-sizing: border-box;
	
	.choseimg{width: 34rpx;height: 34rpx;position: absolute;left: 36rpx;top: 54rpx;z-index: 22;}
	
	.top{position: relative;text-align: center;font-size: 32rpx;font-weight: bold;color: #343434;}
	.boxs{padding: 60rpx 0;
		.box{display: flex;align-items: center;min-height:100rpx;}
	}
	}
	.inform{padding-top: 30rpx;}
	.infolist{padding: 30rpx 32rpx 30rpx 24rpx;position: relative;display: flex;align-items: center;
		.cir{position: absolute;font-size: 36rpx;font-weight: bold;color: #FE5706;left: 0rpx;}	
	}
	.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}
	
	
	.fixedbtn{width:100%;height: 80rpx;background: #FF6400;
	border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: bold;color: #FFFFFF;
		&.btn1{background-color: #20ACCF;margin-bottom: 36rpx;}
	}
	 .inform /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
	 .fixedbox /deep/ .uni-forms-item__error{margin-top: -30rpx;margin-left: 24rpx;}
	 .chebox{position: absolute;right: 36rpx;top:54rpx;display: flex;align-items: center;
	 	image{width: 30rpx;height: 32rpx;margin-right: 12rpx;}
	 	view{font-size: 32rpx;font-weight: 500;color: #F13800;;}
	 }
</style>