searchHead.vue 5.23 KB
<template>
    <el-row>
        <el-col :span="18">
            <el-row>
                <el-col :span="22">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="宗地编码:">
                            <el-input v-model="queryData.zddm" placeholder="输入宗地编码"></el-input>
                        </el-form-item>
                        <el-form-item label="坐落:">
                            <el-input v-model="queryData.zl" placeholder="输入坐落地址"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="query">查询</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form :inline="true" :model="queryData" class="demo-form-inline">
                        <el-form-item label="不动产单元号:">
                            <el-input
                                    v-model="queryData.bdcdyh"
                                    placeholder="输入不动产单元号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="demo-form-inline" label="单元类型:">
                            <el-checkbox-group v-model="queryData.dylxs">
                                <el-checkbox label="zd" 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-button type="warning" @click="reset">重置</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22" v-show="ismore">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="权利人名称:">
                            <el-input placeholder="输入权利人名称" v-model="queryData.qlrmc"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称:">
                            <el-input placeholder="输入项目名称" v-model="queryData.xmmc"></el-input>
                        </el-form-item>
                        <el-form-item label="不动产权证号:">
                            <el-input placeholder="输入不动产权证号" v-model="queryData.bdcqzh"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2" :offset="offset">
                    <el-button type="primary" class="moreSearchBtn" @click="ismore=!ismore">更多查询
                    </el-button>
                </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() {
            let self = this;
            document.onkeydown = function (e) {
                //按下回车提交
                let key = window.event.keyCode;
                //事件中keycode=13为回车事件
                if (key == 13) {
                    self.onSubmit();
                }
            };
        },
        mounted() {
        },
        methods: {
            reset() {
                this.queryData = {
                    bdcdyh: "",
                    bdcqzh: "",
                    dylxs: [],
                    qlrmc: "",
                    qszt: "",
                    xmmc: "",
                    zddm: "",
                    zl: ""
                };
                this.query()
            },
            query() {
                //子组件点击查询时将表单数据发送给父组件
                this.$emit("getSearchCondition", this.queryData);
            },
        },
        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-button {
        width: 100px;
    }
</style>