searchHead.vue 4.12 KB
<template>
	<el-row>
		<el-col :span="24">
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="宗地编码">
							<el-input
								v-model="queryData.zddm"
								placeholder="输入宗地编码"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="坐落">
							<el-input
								v-model="queryData.zl"
								placeholder="输入坐落地址"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="不动产单元号">
							<el-input
								v-model="queryData.bdcdyh"
								placeholder="输入不动产单元号"
								@change="query"
							></el-input>
						</el-form-item>
					<el-button type="primary" @click="query">查询</el-button>
					<el-button type="warning" @click="reset">重置</el-button>
					<el-button
						type="primary"
						class="moreSearchBtn"
						@click="moreSearch"
						>高级查询
					</el-button>
						<!-- @click="ismore = !ismore" -->
					</el-form>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" :model="queryData" class="demo-form-inline">
						<el-form-item class="demo-form-inline" label="查询范围">
							<el-checkbox-group v-model="queryData.dylxs" @change="query">
								<el-checkbox label="zd" name="type">宗地</el-checkbox>
								<el-checkbox label="dz" name="type">多幢</el-checkbox>
								<el-checkbox label="zrz" name="type">自然幢</el-checkbox>
								<el-checkbox label="h" name="type"></el-checkbox>
								<el-checkbox label="gzw" name="type">构筑物</el-checkbox>
								<el-checkbox label="lq" name="type">林权</el-checkbox>
								<el-checkbox label="zh" name="type">宗海</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2">
				</el-col>
			</el-row>
			<el-row class="row3"  v-if="ismore">
				<el-col :span="22">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="权利人名称:">
							<el-input
								placeholder="输入权利人名称"
								v-model="queryData.qlrmc"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="项目名称:">
							<el-input
								placeholder="输入项目名称"
								v-model="queryData.xmmc"
								@change="query"
							></el-input>
						</el-form-item>
						<el-form-item label="不动产权证号:">
							<el-input
								placeholder="输入不动产权证号"
								v-model="queryData.bdcqzh"
								@change="query"
							></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2" :offset="offset">
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: "",
	components: {},
	props: {},
	data() {
		return {
			offset: 22,
			ismore: false,
			queryData: {
				bdcdyh: "",
				bdcqzh: "",
				dylxs: [],
				qlrmc: "",
				qszt: [],
				xmmc: "",
				zddm: "",
				zl: "",
			},
		};
	},
	created() {
	},
	mounted() {
		let self = this;
		document.onkeydown = function(e) {
			//按下回车提交
			let key = window.event.keyCode;
			//事件中keycode=13为回车事件
			if (key == 13) {
				// self.onSubmit();
			}
		};
	},
	methods: {
        //重置
		reset() {
			this.queryData = {
				bdcdyh: "",
				bdcqzh: "",
				dylxs: [],
				qlrmc: "",
				qszt: [],
				xmmc: "",
				zddm: "",
				zl: "",
			};
			this.query();
        },
        //查询
		query() {
			//子组件点击查询时将表单数据发送给父组件
			this.$emit("getSearchCondition", this.queryData);
        },
        // 高级查询
        moreSearch(){
            this.$message('待开发');
        }
	},
	computed: {},
	watch: {
		ismore: function(val) {
			if (val) {
				this.offset = 0;
			} else {
				this.offset = 22;
				this.queryData.qlrmc = "";
				this.queryData.xmmc = "";
				this.queryData.bdcqzh = "";
			}
		},
	},
};
</script>
<style scoped lang="less">
.el-row{
    background-color: #EAEDF5;
}
.el-button {
	width: 100px;
}
.row3 {
	height: 55px;
}
.moreSearchBtn{
    background-color: #1AD6E1;
    border-color: #1AD6E1;
}
</style>