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

<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		top="2vh"
		@close="handleCancel">
		<div class="userMobile" v-loading="loading">
			<!-- {{datas}} -->
			<el-row :gutter="20">
				  <el-col :span="14">
					  <div class="grid-content bg-purple">
						  <b>数据名称:</b>
						  {{datas.dataName}}
					  </div>
				  </el-col>
				  <el-col :span="6">
					  <div class="grid-content bg-purple">
						  <b>修改人:</b>
						  {{datas.createUser}}
					  </div>
				  </el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="14">
					 <div class="grid-content bg-purple">
							  <b>上次修改时间:</b>
							  {{datas.createDate}}
					 </div>
				</el-col>
			</el-row>
			<div style="custom-table">
				<el-table
				    :data="datas.valList"
				    border
					height="330"
				    style="width: 100%">
					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
				    <el-table-column
					  align="center"
					  v-for="(item,index) in column"
					  :key="index"
					  :label="item.fieldName"
					  :prop="item.prop">
				    </el-table-column>
				 </el-table>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</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'
		},
		selectRow:{
			type:Object,
			default:{}
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		selectRow(newVal,oldVal){
			this.modalSelectRow = newVal
		}
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow:this.selectRow,
			formLabelWidth: '920px',
			loading:true,
			datas:{},
			column:[],
			tableconfig:{
				rowWidth:0,
				lineWidth:0
			}
		};
	},
	created() {
		this.getDetail(this.modalSelectRow.id)
	},
	methods: {
		//获取坝区详情
		getDetail(id){
			let params = {
				id:id
			}
			this.$port.getAreaManageInfo(params)
				.then(res => {
					this.datas = res
					let columns = this.datas.fieldList;
					for(let i = 0;i<columns.length;i++){
						columns[i].prop = 'fieldVal' + i
					}
					this.column = columns;
					this.loading = false
				})
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less">
	.table-head table,
	.table-body table{width:100%;text-align:center;border-collapse: collapse;}
	.table-head{padding-right:17px;color:#000;border:1px solid #EBEEF5;border-spacing:0px;border-collapse: collapse;}
	.table-head table tr th{height:45px;border-right:1px solid #EBEEF5;}
	.table-head table tr th:last-child{border-right:none;}
	.table-body{width:100%; height:300px;overflow-y:scroll;}
	.table-body table tr{height:40px;border-spacing: 0px; border-collapse: collapse;}
	.table-body table tr td{border:1px solid #EBEEF5;}
	.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
	.el-row{margin-bottom:20px;}
</style>