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
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 </el-form-item> 9 v-model="queryData.zddm"
10 <el-form-item label="坐落:"> 10 placeholder="输入宗地编码"
11 <el-input v-model="queryData.zl" placeholder="输入坐落地址" @change="query"></el-input> 11 @change="query"
12 </el-form-item> 12 ></el-input>
13 </el-form> 13 </el-form-item>
14 </el-col> 14 <el-form-item label="坐落">
15 <el-col :span="2"> 15 <el-input
16 <el-button type="primary" @click="query">查询</el-button> 16 v-model="queryData.zl"
17 </el-col> 17 placeholder="输入坐落地址"
18 </el-row> 18 @change="query"
19 <el-row> 19 ></el-input>
20 <el-col :span="22"> 20 </el-form-item>
21 <el-form :inline="true" :model="queryData" class="demo-form-inline"> 21 <el-form-item label="不动产单元号">
22 <el-form-item label="不动产单元号:"> 22 <el-input
23 <el-input 23 v-model="queryData.bdcdyh"
24 v-model="queryData.bdcdyh" 24 placeholder="输入不动产单元号"
25 placeholder="输入不动产单元号" 25 @change="query"
26 @change="query" 26 ></el-input>
27 ></el-input> 27 </el-form-item>
28 </el-form-item> 28 <el-button type="primary" @click="query">查询</el-button>
29 <el-form-item class="demo-form-inline" label="单元类型:"> 29 <el-button type="warning" @click="reset">重置</el-button>
30 <el-checkbox-group v-model="queryData.dylxs" @change="query"> 30 <el-button
31 <el-checkbox label="zd" name="type">宗地</el-checkbox> 31 type="primary"
32 <el-checkbox label="zrz" name="type">自然幢</el-checkbox> 32 class="moreSearchBtn"
33 <el-checkbox label="h" name="type">户</el-checkbox> 33 @click="moreSearch"
34 <el-checkbox label="gzw" name="type">构筑物</el-checkbox> 34 >高级查询
35 <el-checkbox label="lq" name="type">林权</el-checkbox> 35 </el-button>
36 <el-checkbox label="zh" name="type">宗海</el-checkbox> 36 <!-- @click="ismore = !ismore" -->
37 </el-checkbox-group> 37 </el-form>
38 </el-form-item> 38 </el-col>
39 </el-form> 39 </el-row>
40 </el-col> 40 <el-row>
41 <el-col :span="2"> 41 <el-col :span="24">
42 <el-button type="warning" @click="reset">重置</el-button> 42 <el-form :inline="true" :model="queryData" class="demo-form-inline">
43 </el-col> 43 <el-form-item class="demo-form-inline" label="查询范围">
44 </el-row> 44 <el-checkbox-group v-model="queryData.dylxs" @change="query">
45 <el-row class="row3"> 45 <el-checkbox label="zd" name="type">宗地</el-checkbox>
46 <el-col :span="22" v-show="ismore"> 46 <el-checkbox label="zrz" name="type">自然幢</el-checkbox>
47 <el-form :inline="true" class="demo-form-inline"> 47 <el-checkbox label="h" name="type">户</el-checkbox>
48 <el-form-item label="权利人名称:"> 48 <el-checkbox label="gzw" name="type">构筑物</el-checkbox>
49 <el-input placeholder="输入权利人名称" v-model="queryData.qlrmc" @change="query"></el-input> 49 <el-checkbox label="lq" name="type">林权</el-checkbox>
50 </el-form-item> 50 <el-checkbox label="zh" name="type">宗海</el-checkbox>
51 <el-form-item label="项目名称:"> 51 </el-checkbox-group>
52 <el-input placeholder="输入项目名称" v-model="queryData.xmmc" @change="query"></el-input> 52 </el-form-item>
53 </el-form-item> 53 </el-form>
54 <el-form-item label="不动产权证号:"> 54 </el-col>
55 <el-input placeholder="输入不动产权证号" v-model="queryData.bdcqzh" @change="query"></el-input> 55 <el-col :span="2">
56 </el-form-item> 56 </el-col>
57 </el-form> 57 </el-row>
58 </el-col> 58 <el-row class="row3" v-if="ismore">
59 <el-col :span="2" :offset="offset"> 59 <el-col :span="22">
60 <el-button type="primary" class="moreSearchBtn" @click="ismore=!ismore">更多查询 60 <el-form :inline="true" class="demo-form-inline">
61 </el-button> 61 <el-form-item label="权利人名称:">
62 </el-col> 62 <el-input
63 </el-row> 63 placeholder="输入权利人名称"
64 </el-col> 64 v-model="queryData.qlrmc"
65 </el-row> 65 @change="query"
66 66 ></el-input>
67 </el-form-item>
68 <el-form-item label="项目名称:">
69 <el-input
70 placeholder="输入项目名称"
71 v-model="queryData.xmmc"
72 @change="query"
73 ></el-input>
74 </el-form-item>
75 <el-form-item label="不动产权证号:">
76 <el-input
77 placeholder="输入不动产权证号"
78 v-model="queryData.bdcqzh"
79 @change="query"
80 ></el-input>
81 </el-form-item>
82 </el-form>
83 </el-col>
84 <el-col :span="2" :offset="offset">
85 </el-col>
86 </el-row>
87 </el-col>
88 </el-row>
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: {},
74 data() { 96 data() {
75 return { 97 return {
76 offset: 22, 98 offset: 22,
77 ismore: false, 99 ismore: false,
78 queryData: { 100 queryData: {
79 bdcdyh: "", 101 bdcdyh: "",
80 bdcqzh: "", 102 bdcqzh: "",
81 dylxs: [], 103 dylxs: [],
82 qlrmc: "", 104 qlrmc: "",
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为回车事件
96 if (key == 13) { 118 if (key == 13) {
97 self.onSubmit(); 119 self.onSubmit();
98 } 120 }
99 }; 121 };
100 }, 122 },
101 mounted() { 123 mounted() {},
102 }, 124 methods: {
103 methods: { 125 //重置
104 reset() { 126 reset() {
105 this.queryData = { 127 this.queryData = {
106 bdcdyh: "", 128 bdcdyh: "",
107 bdcqzh: "", 129 bdcqzh: "",
108 dylxs: [], 130 dylxs: [],
109 qlrmc: "", 131 qlrmc: "",
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 },
117 query() {
118 //子组件点击查询时将表单数据发送给父组件
119 this.$emit("getSearchCondition", this.queryData);
120 },
121 }, 138 },
122 computed: {}, 139 //查询
123 watch: { 140 query() {
124 "ismore": function (val) { 141 //子组件点击查询时将表单数据发送给父组件
125 if (val) { 142 this.$emit("getSearchCondition", this.queryData);
126 this.offset = 0
127 } else {
128 this.offset = 22
129 this.queryData.qlrmc = "";
130 this.queryData.xmmc = "";
131 this.queryData.bdcqzh = "";
132 }
133 }
134 }, 143 },
135 }; 144 // 高级查询
145 moreSearch(){
146 this.$message('待开发');
147 }
148 },
149 computed: {},
150 watch: {
151 ismore: function(val) {
152 if (val) {
153 this.offset = 0;
154 } else {
155 this.offset = 22;
156 this.queryData.qlrmc = "";
157 this.queryData.xmmc = "";
158 this.queryData.bdcqzh = "";
159 }
160 },
161 },
162 };
136 </script> 163 </script>
137 <style scoped lang="less"> 164 <style scoped lang="less">
138 .el-button { 165 .el-row{
139 width: 100px; 166 background-color: #EAEDF5;
140 } 167 }
141 .row3{ 168 .el-button {
142 height: 55px; 169 width: 100px;
143 } 170 }
171 .row3 {
172 height: 55px;
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 {
......