property/property_ui/work/pages/fee/set.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo" :rules="rules">
			<view class="cbox">
				<view class="chmain">
					<uni-forms-item label="房屋类型" required name="houseType">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="fwlxidx" :range="fwlxList"   @change='bindDateChangee'>
						<view class="flexc mh35">
							<view class="flex1 txr f13 co27" v-if="datainfo.houseType&&!fwlx">{{statusFormats(datainfo.houseType,fwlxList,'fwlx')}}</view>
							<view class="flex1 txr f13" v-else :class="fwlx?'co27':'coa'">{{fwlx||"请选择房屋类型"}}</view>
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="物业费用" name="tenementExpense">
						<view class="flexc">
							<view class="tip">¥</view>
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.tenementExpense" :inputBorder='false' placeholder="请输入金额" />
						</view>
					</uni-forms-item>
					<!-- <uni-forms-item label="车位费用" name="parkingExpense">
						<view class="flexc">
							<view class="tip">¥</view>
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.parkingExpense" :inputBorder='false' placeholder="请输入金额" />
						</view>
					</uni-forms-item> -->
					<uni-forms-item label="能耗费用" name="energyExpense">
						<view class="flexc">
							<view class="tip">¥</view>
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.energyExpense" :inputBorder='false' placeholder="请输入金额" />
						</view>
					</uni-forms-item>
				</view>
			</view>
		</uni-forms>
		<view class="pdlr12 mt55">
			<view class="rhbtn" @click="getEditFn" v-if="isdisabled">修改</view>
			<view class="rhbtn" @click="getSubmit" v-else>确定</view>
		</view>

		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {feesetAdd,feesetPut,feesetDet} from "@/api/work/manage.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	import {selectValueKey} from "@/utils/common.js"
	export default {
		components: {},
		data() {
			return {
				rimg: require('@/people/static/people/rimg.png'),
				baseUrl: config.baseUrl,
				datainfo: {
					"tenementExpense":"",//应缴物业费用
					// "parkingExpense":"",//应缴车位费用
					"energyExpense":"",//应缴能耗费用
					"houseType":null,//房屋类型 1:普通住宅,2:洋房
				},
				rules: {
				  houseType: {rules: [{required: true,errorMessage: '请选择房屋类型' }]},
				  tenementExpense: {rules: [{required: true,errorMessage: '请输入物业费' }]},
				},
				id:'',
				ptype:'add',
				isdisabled:false,
				fwlxList:[],
				fwlxidx:'',
				fwlx:'',
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype='edit';
				// this.isdisabled=true;
				this.getDetailFn()
			}
			this.init()
		},
		methods: {
			checkPermi,
			checkRole,
			init(){
				// 房屋类型
				getDictionaryFn('house_type').then(res=>{
					if(res.code==200){
						this.fwlxList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
						if(res.data&&res.data.length){
							this.datainfo.houseType=res.data[0].dictValue
						}
					}
				})
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='fwlx'){
					this.fwlxidx=aite.key;
				}
				return aite.actions;
			},
			bindDateChangee(e){
				var val=e.detail.value;
				this.datainfo.houseType=this.fwlxList[val].dictValue;
				this.fwlx=this.fwlxList[val].dictLabel;
			},
			getEditFn(){
				this.isdisabled=false;
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					
					if(this.ptype=='add'){
						feesetAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("refsetList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						feesetPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("refsetList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}
					
				})
			},
			getDetailFn(){
				feesetDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
					}
				})
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item__error{left:auto;right: 0;margin-top: 10rpx;z-index: 1;}
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: left;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 24rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
	
	.chmain{
		padding: 0 32rpx;
		.tip{font-weight: bold;font-size: 36rpx;color: #161616;flex: 1;text-align: right;}
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
	}
	
}
</style>