84eab6b2 by weimo934

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

1 parent 8ff68bac
1 <template> 1 <template>
2 <el-form :inline="true" :model="formData" class="demo-form-inline"> 2 <el-row>
3 <el-form-item label="宗地编码"> 3 <el-col :span="18">
4 <el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input> 4 <el-row>
5 </el-form-item> 5 <el-col :span="22">
6 <el-form-item label="坐落"> 6 <el-form :inline="true" :model="formData" class="demo-form-inline">
7 <el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input> 7 <el-form-item label="宗地编码:">
8 </el-form-item> 8 <el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input>
9 <el-form-item label="不动产单元号"> 9 </el-form-item>
10 <el-input 10 <el-form-item label="坐落:">
11 v-model="formData.bdcdyh" 11 <el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input>
12 placeholder="输入不动产单元号" 12 </el-form-item>
13 ></el-input> 13 </el-form>
14 </el-form-item> 14 </el-col>
15 <el-form-item> 15 <el-col :span="2">
16 <el-button type="primary" @click="onSubmit">查询</el-button> 16 <el-button type="primary" @click="onSubmit">查询</el-button>
17 <el-button type="warning" @click="onSubmit">重置</el-button> 17 </el-col>
18 <el-button type="primary" class="moreSearchBtn" @click="onSubmit" 18 </el-row>
19 >更多查询</el-button 19 <el-row>
20 > 20 <el-col :span="22">
21 </el-form-item> 21 <el-form :inline="true" :model="formData" class="demo-form-inline">
22 <el-form-item class="db" label="查询范围"> 22 <el-form-item label="不动产单元号:">
23 <el-checkbox-group v-model="formData.type"> 23 <el-input
24 <el-checkbox label="宗地" name="type"></el-checkbox> 24 v-model="formData.bdcdyh"
25 <el-checkbox label="自然幢" name="type"></el-checkbox> 25 placeholder="输入不动产单元号"
26 <el-checkbox label="户" name="type"></el-checkbox> 26 ></el-input>
27 <el-checkbox label="构筑物" name="type"></el-checkbox> 27 </el-form-item>
28 <el-checkbox label="林权" name="type"></el-checkbox> 28 <el-form-item class="demo-form-inline" label="单元类型:">
29 <el-checkbox label="宗海" name="type"></el-checkbox> 29 <el-checkbox-group v-model="formData.type">
30 </el-checkbox-group> 30 <el-checkbox label="宗地" name="type"></el-checkbox>
31 </el-form-item> 31 <el-checkbox label="自然幢" name="type"></el-checkbox>
32 </el-form> 32 <el-checkbox label="户" name="type"></el-checkbox>
33 <el-checkbox label="构筑物" name="type"></el-checkbox>
34 <el-checkbox label="林权" name="type"></el-checkbox>
35 <el-checkbox label="宗海" name="type"></el-checkbox>
36 </el-checkbox-group>
37 </el-form-item>
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 {
42 formData: { 75 offset: 22,
43 zdbm: "", 76 ismore: false,
44 zl: "", 77 formData: {
45 bdcdyh: "", 78 zdbm: "",
46 type: [], 79 zl: "",
47 }, 80 bdcdyh: "",
48 }; 81 type: [],
49 }, 82 },
50 created() { 83 };
51 let self = this; 84 },
52 document.onkeydown = function(e) { 85 created() {
53 //按下回车提交 86 let self = this;
54 let key = window.event.keyCode; 87 document.onkeydown = function (e) {
55 //事件中keycode=13为回车事件 88 //按下回车提交
56 if (key == 13) { 89 let key = window.event.keyCode;
57 self.onSubmit(); 90 //事件中keycode=13为回车事件
58 } 91 if (key == 13) {
59 }; 92 self.onSubmit();
60 }, 93 }
61 mounted() {}, 94 };
62 methods: { 95 },
63 onSubmit() { 96 mounted() {
64 //子组件点击查询时将表单数据发送给父组件 97 },
65 this.$emit("getSearchCondition", this.formData); 98 methods: {
66 }, 99 more() {
67 }, 100 this.ismore = !this.ismore
68 computed: {}, 101 if (this.ismore){
69 watch: {}, 102 this.offset=0
70 }; 103 } else {
104 this.offset=22
105 }
106 },
107 onSubmit() {
108 //子组件点击查询时将表单数据发送给父组件
109 this.$emit("getSearchCondition", this.formData);
110 },
111 },
112 computed: {},
113 watch: {},
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>
......