Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
84eab6b2 by weimo934
Options

style(综合查询):查询表单样式修改

1 parent 8ff68bac
Inline Side-by-side
Showing 1 changed file with 64 additions and 16 deletions
1 <template> 1 <template>
2 <el-row>
3 <el-col :span="18">
4 <el-row>
5 <el-col :span="22">
2 <el-form :inline="true" :model="formData" class="demo-form-inline"> 6 <el-form :inline="true" :model="formData" class="demo-form-inline">
3 <el-form-item label="宗地编码"> 7 <el-form-item label="宗地编码:">
4 <el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input> 8 <el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input>
5 </el-form-item> 9 </el-form-item>
6 <el-form-item label="坐落"> 10 <el-form-item label="坐落:">
7 <el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input> 11 <el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input>
8 </el-form-item> 12 </el-form-item>
9 <el-form-item label="不动产单元号"> 13 </el-form>
14 </el-col>
15 <el-col :span="2">
16 <el-button type="primary" @click="onSubmit">查询</el-button>
17 </el-col>
18 </el-row>
19 <el-row>
20 <el-col :span="22">
21 <el-form :inline="true" :model="formData" class="demo-form-inline">
22 <el-form-item label="不动产单元号:">
10 <el-input 23 <el-input
11 v-model="formData.bdcdyh" 24 v-model="formData.bdcdyh"
12 placeholder="输入不动产单元号" 25 placeholder="输入不动产单元号"
13 ></el-input> 26 ></el-input>
14 </el-form-item> 27 </el-form-item>
15 <el-form-item> 28 <el-form-item class="demo-form-inline" label="单元类型:">
16 <el-button type="primary" @click="onSubmit">查询</el-button>
17 <el-button type="warning" @click="onSubmit">重置</el-button>
18 <el-button type="primary" class="moreSearchBtn" @click="onSubmit"
19 >更多查询</el-button
20 >
21 </el-form-item>
22 <el-form-item class="db" label="查询范围">
23 <el-checkbox-group v-model="formData.type"> 29 <el-checkbox-group v-model="formData.type">
24 <el-checkbox label="宗地" name="type"></el-checkbox> 30 <el-checkbox label="宗地" name="type"></el-checkbox>
25 <el-checkbox label="自然幢" name="type"></el-checkbox> 31 <el-checkbox label="自然幢" name="type"></el-checkbox>
...@@ -30,15 +36,44 @@ ...@@ -30,15 +36,44 @@
30 </el-checkbox-group> 36 </el-checkbox-group>
31 </el-form-item> 37 </el-form-item>
32 </el-form> 38 </el-form>
39 </el-col>
40 <el-col :span="2">
41 <el-button type="warning" @click="onSubmit">重置</el-button>
42 </el-col>
43 </el-row>
44 <el-row>
45 <el-col :span="22" v-show="ismore">
46 <el-form :inline="true" :model="formData" class="demo-form-inline">
47 <el-form-item label="权利人名称:">
48 <el-input placeholder="输入权利人名称"></el-input>
49 </el-form-item>
50 <el-form-item label="项目名称:">
51 <el-input placeholder="输入项目名称"></el-input>
52 </el-form-item>
53 <el-form-item label="不动产权证号:">
54 <el-input placeholder="输入不动产权证号"></el-input>
55 </el-form-item>
56 </el-form>
57 </el-col>
58 <el-col :span="2" :offset="offset">
59 <el-button type="primary" class="moreSearchBtn" @click="more">更多查询
60 </el-button>
61 </el-col>
62 </el-row>
63 </el-col>
64 </el-row>
65
33 </template> 66 </template>
34 67
35 <script> 68 <script>
36 export default { 69 export default {
37 name: "", 70 name: "",
38 components: {}, 71 components: {},
39 props: {}, 72 props: {},
40 data() { 73 data() {
41 return { 74 return {
75 offset: 22,
76 ismore: false,
42 formData: { 77 formData: {
43 zdbm: "", 78 zdbm: "",
44 zl: "", 79 zl: "",
...@@ -49,7 +84,7 @@ export default { ...@@ -49,7 +84,7 @@ export default {
49 }, 84 },
50 created() { 85 created() {
51 let self = this; 86 let self = this;
52 document.onkeydown = function(e) { 87 document.onkeydown = function (e) {
53 //按下回车提交 88 //按下回车提交
54 let key = window.event.keyCode; 89 let key = window.event.keyCode;
55 //事件中keycode=13为回车事件 90 //事件中keycode=13为回车事件
...@@ -58,8 +93,17 @@ export default { ...@@ -58,8 +93,17 @@ export default {
58 } 93 }
59 }; 94 };
60 }, 95 },
61 mounted() {}, 96 mounted() {
97 },
62 methods: { 98 methods: {
99 more() {
100 this.ismore = !this.ismore
101 if (this.ismore){
102 this.offset=0
103 } else {
104 this.offset=22
105 }
106 },
63 onSubmit() { 107 onSubmit() {
64 //子组件点击查询时将表单数据发送给父组件 108 //子组件点击查询时将表单数据发送给父组件
65 this.$emit("getSearchCondition", this.formData); 109 this.$emit("getSearchCondition", this.formData);
...@@ -67,6 +111,10 @@ export default { ...@@ -67,6 +111,10 @@ export default {
67 }, 111 },
68 computed: {}, 112 computed: {},
69 watch: {}, 113 watch: {},
70 }; 114 };
71 </script> 115 </script>
72 <style scoped lang="less"></style> 116 <style scoped lang="less">
117 .el-button {
118 width: 100px;
119 }
120 </style>
......