index.vue 3.78 KB
<template>
	<div class="main">
		<SearchHead @getSearchCondition="getData"></SearchHead>
		<div class="dataGrid" ref="dataGrid">
			<el-table
				:data="tableData"
				:height="tableHeight"
				:row-class-name="tableRowClassName"
			>
				<el-table-column type="index" width="80" align="center" label="序号">
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small"
							>办理</el-button
						>
						<el-button type="text" size="small">定位</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="bdcdyh" align="left" label="不动产单元号">
				</el-table-column>
				<el-table-column prop="xmmc" align="left" width="150" label="项目名称">
				</el-table-column>
				<el-table-column prop="bdcqzh" align="left" label="不动产权证号">
				</el-table-column>
				<el-table-column prop="lx" align="left" width="120" label="类型">
				</el-table-column>
				<el-table-column prop="qlr" align="left" width="120" label="权利人">
				</el-table-column>
				<el-table-column prop="zl" align="left" label="坐落"> </el-table-column>
				<el-table-column prop="zrsj" align="left" width="120" label="转入时间">
				</el-table-column>
				<el-table-column prop="cjr" align="left" width="120" label="创建人">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="prev, pager, next" :total="1000"
							   @current-change="handleCurrentChange"
							   :current-page.sync="currentPage">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import SearchHead from "../../../components/searchHead/searchHead";
import {getSearchList} from "../../../api/search";
export default {
	name: "",
	components: { SearchHead },
	props: {},
	data() {
		return {
			pageNo:1,
			pageSize:10,
			zddm:'',
			zl:'',
			bdcdyh:'',
			dylx:'',
			qlrmc:'',
			xmmc:'',
			bdcqzh:'',
			formData: {
				user: "",
				region: "",
				type: [],
			},
			tableData: [],
			tableHeight: "",
		};
	},
	created() {},
	mounted() {
		this.loadList();
		this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
	},
	methods: {
		onSubmit() {},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 !== 0) {
				return "even-row";
			} else {
				return "";
			}
		},
		handleCurrentChange(val){
			console.log(`当前页: ${val}`);
			this.pageNo=val;
			this.loadList();
		},
		//获取子组件点击查询触发的事件
		getData(obj) {
			console.log(obj);
			//将obj作为参数调用接口查询表格数据
		},
		//点击办理
		handleClick(row) {
			let path = "";
			switch (row.dylx) {
				case "zrz":
					path = "/zrz";
					break;
				case "zd":
					path = "/zd";
					break;
				default:
					break;
			}
			this.$router.push({
				path:path,
				query:{
					bsm:row.glbsm,
					source:2
				}
			});
		},
		loadList(){
			let params={
				zddm:this.zddm,
				zl:this.zl,
				bdcdyh:this.bdcdyh,
				dylx:this.dylx,
				qlrmc:this.qlrmc,
				xmmc:this.xmmc,
				bdcqzh:this.bdcqzh,
				pageNo:this.pageNo,
				pageSize:this.pageSize,
			}
			getSearchList(params).then((res)=>{
				console.log(res)
				if(res.code===200){
					this.tableData=res.result.records;
					console.log(this.tableData)
				}
			})
		}
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.main {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 18px;
	display: flex;
	flex-direction: column;
	background-color: #fcfdff;
	.demo-form-inline {
		margin-top: 18px;
		.moreSearchBtn {
			background-color: #1ad6e1;
			border-color: #1ad6e1;
		}
		.moreSearchBtn:focus,
		.moreSearchBtn:hover {
			background-color: rgba(28, 200, 229, 0.6);
		}
	}
	.dataGrid {
		flex: 1;
		.pagination {
			padding: 18px 0;
		}
	}
}
</style>