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 80 additions and 46 deletions
1 <template> 1 <template>
2 <el-row> 2 <el-row>
3 <el-col :span="18"> 3 <el-col :span="24">
4 <el-row> 4 <el-row>
5 <el-col :span="22"> 5 <el-col :span="24">
6 <el-form :inline="true" class="demo-form-inline"> 6 <el-form :inline="true" class="demo-form-inline">
7 <el-form-item label="宗地编码:"> 7 <el-form-item label="宗地编码">
8 <el-input v-model="queryData.zddm" placeholder="输入宗地编码" @change="query"></el-input> 8 <el-input
9 v-model="queryData.zddm"
10 placeholder="输入宗地编码"
11 @change="query"
12 ></el-input>
9 </el-form-item> 13 </el-form-item>
10 <el-form-item label="坐落:"> 14 <el-form-item label="坐落">
11 <el-input v-model="queryData.zl" placeholder="输入坐落地址" @change="query"></el-input> 15 <el-input
16 v-model="queryData.zl"
17 placeholder="输入坐落地址"
18 @change="query"
19 ></el-input>
12 </el-form-item> 20 </el-form-item>
13 </el-form> 21 <el-form-item label="不动产单元号">
14 </el-col>
15 <el-col :span="2">
16 <el-button type="primary" @click="query">查询</el-button>
17 </el-col>
18 </el-row>
19 <el-row>
20 <el-col :span="22">
21 <el-form :inline="true" :model="queryData" class="demo-form-inline">
22 <el-form-item label="不动产单元号:">
23 <el-input 22 <el-input
24 v-model="queryData.bdcdyh" 23 v-model="queryData.bdcdyh"
25 placeholder="输入不动产单元号" 24 placeholder="输入不动产单元号"
26 @change="query" 25 @change="query"
27 ></el-input> 26 ></el-input>
28 </el-form-item> 27 </el-form-item>
29 <el-form-item class="demo-form-inline" label="单元类型:"> 28 <el-button type="primary" @click="query">查询</el-button>
29 <el-button type="warning" @click="reset">重置</el-button>
30 <el-button
31 type="primary"
32 class="moreSearchBtn"
33 @click="moreSearch"
34 >高级查询
35 </el-button>
36 <!-- @click="ismore = !ismore" -->
37 </el-form>
38 </el-col>
39 </el-row>
40 <el-row>
41 <el-col :span="24">
42 <el-form :inline="true" :model="queryData" class="demo-form-inline">
43 <el-form-item class="demo-form-inline" label="查询范围">
30 <el-checkbox-group v-model="queryData.dylxs" @change="query"> 44 <el-checkbox-group v-model="queryData.dylxs" @change="query">
31 <el-checkbox label="zd" name="type">宗地</el-checkbox> 45 <el-checkbox label="zd" name="type">宗地</el-checkbox>
32 <el-checkbox label="zrz" name="type">自然幢</el-checkbox> 46 <el-checkbox label="zrz" name="type">自然幢</el-checkbox>
...@@ -39,35 +53,43 @@ ...@@ -39,35 +53,43 @@
39 </el-form> 53 </el-form>
40 </el-col> 54 </el-col>
41 <el-col :span="2"> 55 <el-col :span="2">
42 <el-button type="warning" @click="reset">重置</el-button>
43 </el-col> 56 </el-col>
44 </el-row> 57 </el-row>
45 <el-row class="row3"> 58 <el-row class="row3" v-if="ismore">
46 <el-col :span="22" v-show="ismore"> 59 <el-col :span="22">
47 <el-form :inline="true" class="demo-form-inline"> 60 <el-form :inline="true" class="demo-form-inline">
48 <el-form-item label="权利人名称:"> 61 <el-form-item label="权利人名称:">
49 <el-input placeholder="输入权利人名称" v-model="queryData.qlrmc" @change="query"></el-input> 62 <el-input
63 placeholder="输入权利人名称"
64 v-model="queryData.qlrmc"
65 @change="query"
66 ></el-input>
50 </el-form-item> 67 </el-form-item>
51 <el-form-item label="项目名称:"> 68 <el-form-item label="项目名称:">
52 <el-input placeholder="输入项目名称" v-model="queryData.xmmc" @change="query"></el-input> 69 <el-input
70 placeholder="输入项目名称"
71 v-model="queryData.xmmc"
72 @change="query"
73 ></el-input>
53 </el-form-item> 74 </el-form-item>
54 <el-form-item label="不动产权证号:"> 75 <el-form-item label="不动产权证号:">
55 <el-input placeholder="输入不动产权证号" v-model="queryData.bdcqzh" @change="query"></el-input> 76 <el-input
77 placeholder="输入不动产权证号"
78 v-model="queryData.bdcqzh"
79 @change="query"
80 ></el-input>
56 </el-form-item> 81 </el-form-item>
57 </el-form> 82 </el-form>
58 </el-col> 83 </el-col>
59 <el-col :span="2" :offset="offset"> 84 <el-col :span="2" :offset="offset">
60 <el-button type="primary" class="moreSearchBtn" @click="ismore=!ismore">更多查询
61 </el-button>
62 </el-col> 85 </el-col>
63 </el-row> 86 </el-row>
64 </el-col> 87 </el-col>
65 </el-row> 88 </el-row>
66
67 </template> 89 </template>
68 90
69 <script> 91 <script>
70 export default { 92 export default {
71 name: "", 93 name: "",
72 components: {}, 94 components: {},
73 props: {}, 95 props: {},
...@@ -83,13 +105,13 @@ ...@@ -83,13 +105,13 @@
83 qszt: "", 105 qszt: "",
84 xmmc: "", 106 xmmc: "",
85 zddm: "", 107 zddm: "",
86 zl: "" 108 zl: "",
87 } 109 },
88 }; 110 };
89 }, 111 },
90 created() { 112 created() {
91 let self = this; 113 let self = this;
92 document.onkeydown = function (e) { 114 document.onkeydown = function(e) {
93 //按下回车提交 115 //按下回车提交
94 let key = window.event.keyCode; 116 let key = window.event.keyCode;
95 //事件中keycode=13为回车事件 117 //事件中keycode=13为回车事件
...@@ -98,9 +120,9 @@ ...@@ -98,9 +120,9 @@
98 } 120 }
99 }; 121 };
100 }, 122 },
101 mounted() { 123 mounted() {},
102 },
103 methods: { 124 methods: {
125 //重置
104 reset() { 126 reset() {
105 this.queryData = { 127 this.queryData = {
106 bdcdyh: "", 128 bdcdyh: "",
...@@ -110,35 +132,47 @@ ...@@ -110,35 +132,47 @@
110 qszt: "", 132 qszt: "",
111 xmmc: "", 133 xmmc: "",
112 zddm: "", 134 zddm: "",
113 zl: "" 135 zl: "",
114 }; 136 };
115 this.query() 137 this.query();
116 }, 138 },
139 //查询
117 query() { 140 query() {
118 //子组件点击查询时将表单数据发送给父组件 141 //子组件点击查询时将表单数据发送给父组件
119 this.$emit("getSearchCondition", this.queryData); 142 this.$emit("getSearchCondition", this.queryData);
120 }, 143 },
144 // 高级查询
145 moreSearch(){
146 this.$message('待开发');
147 }
121 }, 148 },
122 computed: {}, 149 computed: {},
123 watch: { 150 watch: {
124 "ismore": function (val) { 151 ismore: function(val) {
125 if (val) { 152 if (val) {
126 this.offset = 0 153 this.offset = 0;
127 } else { 154 } else {
128 this.offset = 22 155 this.offset = 22;
129 this.queryData.qlrmc = ""; 156 this.queryData.qlrmc = "";
130 this.queryData.xmmc = ""; 157 this.queryData.xmmc = "";
131 this.queryData.bdcqzh = ""; 158 this.queryData.bdcqzh = "";
132 } 159 }
133 }
134 }, 160 },
135 }; 161 },
162 };
136 </script> 163 </script>
137 <style scoped lang="less"> 164 <style scoped lang="less">
138 .el-button { 165 .el-row{
166 background-color: #EAEDF5;
167 }
168 .el-button {
139 width: 100px; 169 width: 100px;
140 } 170 }
141 .row3{ 171 .row3 {
142 height: 55px; 172 height: 55px;
143 } 173 }
174 .moreSearchBtn{
175 background-color: #1AD6E1;
176 border-color: #1AD6E1;
177 }
144 </style> 178 </style>
......
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
61 return { 61 return {
62 total: 0, 62 total: 0,
63 pageNo: 1, 63 pageNo: 1,
64 pageSize: 10, 64 pageSize: 15,
65 tableData: [], 65 tableData: [],
66 tableHeight: "", 66 tableHeight: "",
67 queryData: {} 67 queryData: {}
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
70 created() { 70 created() {
71 }, 71 },
72 mounted() { 72 mounted() {
73 this.getData({}) 73 this.getData({pageSize:15})
74 this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; 74 this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
75 }, 75 },
76 methods: { 76 methods: {
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
140 padding: 0 18px; 140 padding: 0 18px;
141 display: flex; 141 display: flex;
142 flex-direction: column; 142 flex-direction: column;
143 background-color: #fcfdff; 143 background-color: #EAEDF5;
144 .demo-form-inline { 144 .demo-form-inline {
145 margin-top: 18px; 145 margin-top: 18px;
146 .moreSearchBtn { 146 .moreSearchBtn {
......