Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
5b9dcc6e by 杨威
Options

综合查询页面样式修改

1 parent c221dc17
Inline Side-by-side
Showing 2 changed files with 172 additions and 138 deletions
<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="输入宗地编码" @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>
</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="输入不动产单元号"
@change="query"
></el-input>
</el-form-item>
<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="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 class="row3">
<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" @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-button type="primary" class="moreSearchBtn" @click="ismore=!ismore">更多查询
</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
<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="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() {
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);
},
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();
},
computed: {},
watch: {
"ismore": function (val) {
if (val) {
this.offset = 0
} else {
this.offset = 22
this.queryData.qlrmc = "";
this.queryData.xmmc = "";
this.queryData.bdcqzh = "";
}
}
//查询
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-button {
width: 100px;
}
.row3{
height: 55px;
}
.el-row{
background-color: #EAEDF5;
}
.el-button {
width: 100px;
}
.row3 {
height: 55px;
}
.moreSearchBtn{
background-color: #1AD6E1;
border-color: #1AD6E1;
}
</style>
......
......@@ -61,7 +61,7 @@
return {
total: 0,
pageNo: 1,
pageSize: 10,
pageSize: 15,
tableData: [],
tableHeight: "",
queryData: {}
......@@ -70,7 +70,7 @@
created() {
},
mounted() {
this.getData({})
this.getData({pageSize:15})
this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
},
methods: {
......@@ -140,7 +140,7 @@
padding: 0 18px;
display: flex;
flex-direction: column;
background-color: #fcfdff;
background-color: #EAEDF5;
.demo-form-inline {
margin-top: 18px;
.moreSearchBtn {
......