forest-map-back/src/view/damManage/modal/aevMobiel.vue

<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		top="2vh"
		@close="handleCancel">
		<div class="userMobile">
			<el-form label-width="140px" :model="form" :rules="rules" ref="from">
				<el-form-item label="坝区名称" prop="damName"> 
					<el-input v-model="form.damName" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="所属区域名称" prop="areaCode">
					<el-select v-model="form.areaCode" placeholder="请选择" :disabled="limit.isRead">
					    <el-option
					      v-for="item in areaList"
					      :key="item.posId"
					      :label="item.posName"
					      :value="item.posId">
					    </el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="海拔" prop="elevation">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.elevation" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="种植面积(亩)" prop="totalArea">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.totalArea" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="主要产品" prop="plantName">
					<el-input v-model="form.plantName" :disabled="limit.isRead"></el-input>
				</el-form-item> 
				<el-form-item label="耕地产出值(元)" prop="plantVal">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.plantVal" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="土地流转率" prop="landRate">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.landRate" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="农民收入贡献率" prop="farmerRate">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.farmerRate" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="产销对接率" prop="marketRate">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.marketRate" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="产业参保率" prop="insureRate">
					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.insureRate" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="坝区简介" prop="damDesc">
					<el-input
					  type="textarea"
					  :rows="2"
					  placeholder="请输入内容"
					  v-model="form.damDesc"
					  :disabled="limit.isRead">
					</el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {globalReg} from '@/api/CONST'
export default {
	name: 'userMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
		action: {
			type: String,
			default: 'add'
		},
		selectRow:{
			type:Object,
			default:{}
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		action(newVal, oldVal) {
			this.modalAction = newVal;
		},
		selectRow(newVal,oldVal){
			this.modalSelectRow = newVal
		}
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow:this.selectRow,
			formLabelWidth: '720px',
			limit:{
				isRead:false,
				isAdd:false
			},
			addLabel:{
				inputVisible: false,
				inputValue: '',
			},
			optionProps: {
				expandTrigger:'hover',
				checkStrictly: true,
				value: 'id',
				label: 'branchName',
				children: 'children'
			},
			areaList: [], //区域列表
			rules:{
				damName:[
					 { required: true, message: '坝区名称!', trigger: 'blur' }
				],
				areaCode:[
					{ required: true, message: '所属区域编码不能为空!', trigger: 'blur' }
				],
				elevation:[
					{ required: true, message: '海拔不能为空!', trigger: 'blur' }
				],
				totalArea:[
					{ required: true, message: '种植面积不能为空!', trigger: 'blur' }
				],
				plantName:[
					{ required: true, message: '主要产品不能为空!', trigger: 'blur' }
				],
				plantVal:[
					{ required: true, message: '耕地产出值不能为空!', trigger: 'blur' }
				],
				landRate:[
					{ required: true, message: '土地流转率不能为空!', trigger: 'blur' }
				],
				farmerRate:[
					{ required: true, message: '农民收入贡献率不能为空!', trigger: 'blur' }
				],
				marketRate:[
					{ required: true, message: '产销对接率不能为空!', trigger: 'blur' }
				],
				insureRate:[
					{ required: true, message: '产业参保率不能为空!', trigger: 'blur' }
				],
				damDesc:[
					{ required: true, message: '坝区简介不能为空!', trigger: 'blur' }
				]
			},
			form: {}
		};
	},
	created() {
		switch(this.modalAction) {
		     case 'add':
				this.limit.isAdd = true
		        break;
		     case 'edit':
				this.getDetail(this.modalSelectRow.id)
		        break;
			 case 'view':
				this.getDetail(this.modalSelectRow.id)
				this.limit.isRead = true
			    break;
		     default:
		        break;
		} 
		this.initPage()
	},
	methods: {
		//强制视图渲染
		forceUpdate(){
			this.$forceUpdate()
		},
		//初始化角色和组织机构
		initPage(){
			this.getAreaList(); //获取区域名称
		},
		//获取区域名称
		getAreaList(){ 
			let params = {
				sn:"522730000000"
			}
			this.$port.getAreaList(params)
				.then(res =>{
					this.areaList = res.list
				})
		},
		//获取坝区详情
		getDetail(id){
			let params = {
				id:id
			}
			this.$port.getDamInfo(params)
				.then(res => {
					let showInfo = Object.assign({},res)
					this.form = showInfo
				})
		},
		submit(){
			switch(this.modalAction){
				case 'add':
					this.add()
					break;
				case 'edit':
					this.update()
					break;
				default:
					break;
			}
		},
		add(){
			this.$refs.from.validate((valid) => {
				if (valid) {
					let params = Object.assign({},this.form)
					console.log(params)
					this.$port.addDam(params).then(res => {
						if(!res.code){
							this.modalVisible = false
							this.$emit('closeModal', true);
						}
					})
				}else {
					return false;
				}
			})
		},
		update(){
			this.$refs.from.validate((valid) => {
				if (valid) {
					let data = Object.assign({},this.form)
					this.$port.updateDam(data).then(res => {
						if(!res.code){
							this.modalVisible = false
							this.$emit('closeModal', true);
						}
					})
				}else {
					return false;
				}
			})
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less">
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 128px;
	height: 128px;
	line-height: 128px;
	text-align: center;
}
.avatar {
	width: 128px;
	height: 128px;
	display: block;
}
.uploaded{
	position:relative;
}
.uploaded .avatar{
	border-radius:10px;
}
.uploaded:hover .action{
	display:block;
}
.uploaded .action{
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	padding-top:27px;
	text-align:center;
	background:rgba(0,0,0,0.5);
}
.noPhoto{
	width:128px;
	height:128px;
	line-height:128px;
	text-align:center;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
}
.noPhoto span{
	display:block;
	font-size:18px;
}
</style>