Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
11d1466c by weimo934
Options

feat(综合查询):对接接口,修改分页重置功能

1 parent 84eab6b2
Inline Side-by-side
Showing 3 changed files with 343 additions and 340 deletions
......@@ -3,60 +3,60 @@
<el-col :span="18">
<el-row>
<el-col :span="22">
<el-form :inline="true" :model="formData" class="demo-form-inline">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="宗地编码:">
<el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input>
<el-input v-model="queryData.zddm" placeholder="输入宗地编码"></el-input>
</el-form-item>
<el-form-item label="坐落:">
<el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input>
<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="onSubmit">查询</el-button>
<el-button type="primary" @click="query">查询</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="22">
<el-form :inline="true" :model="formData" class="demo-form-inline">
<el-form :inline="true" :model="queryData" class="demo-form-inline">
<el-form-item label="不动产单元号:">
<el-input
v-model="formData.bdcdyh"
v-model="queryData.bdcdyh"
placeholder="输入不动产单元号"
></el-input>
</el-form-item>
<el-form-item class="demo-form-inline" label="单元类型:">
<el-checkbox-group v-model="formData.type">
<el-checkbox label="宗地" name="type"></el-checkbox>
<el-checkbox label="自然幢" name="type"></el-checkbox>
<el-checkbox label="户" name="type"></el-checkbox>
<el-checkbox label="构筑物" name="type"></el-checkbox>
<el-checkbox label="林权" name="type"></el-checkbox>
<el-checkbox label="宗海" name="type"></el-checkbox>
<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="onSubmit">重置</el-button>
<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" :model="formData" class="demo-form-inline">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="权利人名称:">
<el-input placeholder="输入权利人名称"></el-input>
<el-input placeholder="输入权利人名称" v-model="queryData.qlrmc"></el-input>
</el-form-item>
<el-form-item label="项目名称:">
<el-input placeholder="输入项目名称"></el-input>
<el-input placeholder="输入项目名称" v-model="queryData.xmmc"></el-input>
</el-form-item>
<el-form-item label="不动产权证号:">
<el-input placeholder="输入不动产权证号"></el-input>
<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="more">更多查询
<el-button type="primary" class="moreSearchBtn" @click="ismore=!ismore">更多查询
</el-button>
</el-col>
</el-row>
......@@ -74,12 +74,16 @@
return {
offset: 22,
ismore: false,
formData: {
zdbm: "",
zl: "",
queryData: {
bdcdyh: "",
type: [],
},
bdcqzh: "",
dylxs: [],
qlrmc: "",
qszt: "",
xmmc: "",
zddm: "",
zl: ""
}
};
},
created() {
......@@ -96,21 +100,37 @@
mounted() {
},
methods: {
more() {
this.ismore = !this.ismore
if (this.ismore){
this.offset=0
} else {
this.offset=22
}
reset() {
this.queryData = {
bdcdyh: "",
bdcqzh: "",
dylxs: [],
qlrmc: "",
qszt: "",
xmmc: "",
zddm: "",
zl: ""
};
this.query()
},
onSubmit() {
query() {
//子组件点击查询时将表单数据发送给父组件
this.$emit("getSearchCondition", this.formData);
this.$emit("getSearchCondition", this.queryData);
},
},
computed: {},
watch: {},
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">
......
<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">
</el-pagination>
</div>
</div>
</div>
<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">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import SearchHead from "../../../components/searchHead/searchHead";
export default {
name: "",
components: { SearchHead },
props: {},
data() {
return {
formData: {
user: "",
region: "",
type: [],
},
tableData: [
{
bdcdyh: "610101001001GB00001W",
xmmc: "万科集团万科城",
bdcqzh: "陕（2017）西安市不动产权第00000",
lx: "宗地",
qlr: "李子新",
zl: "灞桥－田家湾-咸宁东路,近浐河西路",
zrsj: "2020.09.07 ",
cjr: "李子新",
},
],
tableHeight: "",
};
},
created() {},
mounted() {
for (let i = 0; i < 11; i++) {
let obj = {
bdcdyh: "610101001001GB00001W",
xmmc: "万科集团万科城",
bdcqzh: "陕（2017）西安市不动产权第00000",
lx: "自然幢",
qlr: "李子新",
zl: "灞桥－田家湾-咸宁东路,近浐河西路",
zrsj: "2020.09.07 ",
cjr: "李子新",
};
this.tableData.push(obj);
}
this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
},
methods: {
onSubmit() {},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
}
},
import SearchHead from "../../../components/searchHead/searchHead";
//获取子组件点击查询触发的事件
getData(obj) {
console.log(obj);
//将obj作为参数调用接口查询表格数据
},
//点击办理
handleClick(row) {
let path = "";
switch (row.lx) {
case "自然幢":
path = "/zrz";
break;
case "宗地":
path = "/zd";
break;
default:
break;
}
this.$router.push(path);
},
},
computed: {},
watch: {},
};
export default {
name: "",
components: {SearchHead},
props: {},
data() {
return {
formData: {
user: "",
region: "",
type: [],
},
tableData: [
{
bdcdyh: "610101001001GB00001W",
xmmc: "万科集团万科城",
bdcqzh: "陕（2017）西安市不动产权第00000",
lx: "宗地",
qlr: "李子新",
zl: "灞桥－田家湾-咸宁东路,近浐河西路",
zrsj: "2020.09.07 ",
cjr: "李子新",
},
],
tableHeight: "",
};
},
created() {
},
mounted() {
for (let i = 0; i < 11; i++) {
let obj = {
bdcdyh: "610101001001GB00001W",
xmmc: "万科集团万科城",
bdcqzh: "陕（2017）西安市不动产权第00000",
lx: "自然幢",
qlr: "李子新",
zl: "灞桥－田家湾-咸宁东路,近浐河西路",
zrsj: "2020.09.07 ",
cjr: "李子新",
};
this.tableData.push(obj);
}
this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
},
methods: {
onSubmit() {
},
tableRowClassName({row, rowIndex}) {
if (rowIndex % 2 !== 0) {
return "even-row";
} else {
return "";
}
},
//获取子组件点击查询触发的事件
getData(obj) {
console.log(obj);
},
//点击办理
handleClick(row) {
let path = "";
switch (row.lx) {
case "自然幢":
path = "/zrz";
break;
case "宗地":
path = "/zd";
break;
default:
break;
}
this.$router.push(path);
},
},
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;
}
}
}
.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;
margin-top: 20px;
.pagination {
padding: 18px 0;
}
}
}
</style>
......
<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>
<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="total"
@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: {},
};
import SearchHead from "../../../components/searchHead/searchHead";
import {getSearchList} from "../../../api/search";
export default {
name: "",
components: {SearchHead},
props: {},
data() {
return {
total:0,
pageNo: 1,
pageSize: 10,
tableData: [],
tableHeight: "",
};
},
created() {
},
mounted() {
this.getData({})
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.getData({});
},
//获取子组件点击查询触发的事件
getData(obj) {
console.log(obj);
//将obj作为参数调用接口查询表格数据
obj['pageNo'] = this.pageNo
obj['pageSize'] = this.pageSize
getSearchList(obj).then(res => {
this.tableData = res.result.records
this.total=res.result.total
})
},
//点击办理
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
}
});
},
},
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;
}
}
}
.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>
......