style(综合查询):查询表单样式修改
Showing
1 changed file
with
115 additions
and
67 deletions
| 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> | ... | ... |
-
Please register or sign in to post a comment