Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
f200f39d by 杨威
Options

抽离搜索条件部分为公共组件

1 parent e114dc77
Inline Side-by-side
Showing 2 changed files with 81 additions and 32 deletions
1 <template>
2 <el-form :inline="true" :model="formData" class="demo-form-inline">
3 <el-form-item label="宗地编码">
4 <el-input v-model="formData.zdbm" placeholder="输入宗地编码"></el-input>
5 </el-form-item>
6 <el-form-item label="坐落">
7 <el-input v-model="formData.zl" placeholder="输入坐落地址"></el-input>
8 </el-form-item>
9 <el-form-item label="不动产单元号">
10 <el-input
11 v-model="formData.bdcdyh"
12 placeholder="输入不动产单元号"
13 ></el-input>
14 </el-form-item>
15 <el-form-item>
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">
24 <el-checkbox label="宗地" name="type"></el-checkbox>
25 <el-checkbox label="自然幢" name="type"></el-checkbox>
26 <el-checkbox label="户" name="type"></el-checkbox>
27 <el-checkbox label="构筑物" name="type"></el-checkbox>
28 <el-checkbox label="林权" name="type"></el-checkbox>
29 <el-checkbox label="宗海" name="type"></el-checkbox>
30 </el-checkbox-group>
31 </el-form-item>
32 </el-form>
33 </template>
34
35 <script>
36 export default {
37 name: "",
38 components: {},
39 props: {},
40 data() {
41 return {
42 formData: {
43 zdbm: "",
44 zl: "",
45 bdcdyh: "",
46 type: [],
47 },
48 };
49 },
50 created() {
51 let self = this;
52 document.onkeydown = function(e) {
53 //按下回车提交
54 let key = window.event.keyCode;
55 //事件中keycode=13为回车事件
56 if (key == 13) {
57 self.onSubmit();
58 }
59 };
60 },
61 mounted() {},
62 methods: {
63 onSubmit() {
64 //子组件点击查询时将表单数据发送给父组件
65 this.$emit("getSearchCondition", this.formData);
66 },
67 },
68 computed: {},
69 watch: {},
70 };
71 </script>
72 <style scoped lang="less"></style>
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main">
3 <el-form :inline="true" :model="formData" class="demo-form-inline"> 3 <SearchHead @getSearchCondition="getData"></SearchHead>
4 <el-form-item label="宗地编码">
5 <el-input v-model="formData.user" placeholder="输入宗地编码"></el-input>
6 </el-form-item>
7 <el-form-item label="坐落">
8 <el-input v-model="formData.user" placeholder="输入坐落地址"></el-input>
9 </el-form-item>
10 <el-form-item label="不动产单元号">
11 <el-input
12 v-model="formData.user"
13 placeholder="输入不动产单元号"
14 ></el-input>
15 </el-form-item>
16 <el-form-item>
17 <el-button type="primary" @click="onSubmit">查询</el-button>
18 <el-button type="warning" @click="onSubmit">重置</el-button>
19 <el-button type="primary" class="moreSearchBtn" @click="onSubmit"
20 >更多查询</el-button
21 >
22 </el-form-item>
23 <el-form-item class="db" label="查询范围">
24 <el-checkbox-group v-model="formData.type">
25 <el-checkbox label="宗地" name="type"></el-checkbox>
26 <el-checkbox label="自然幢" name="type"></el-checkbox>
27 <el-checkbox label="户" name="type"></el-checkbox>
28 <el-checkbox label="构筑物" name="type"></el-checkbox>
29 <el-checkbox label="林权" name="type"></el-checkbox>
30 <el-checkbox label="宗海" name="type"></el-checkbox>
31 </el-checkbox-group>
32 </el-form-item>
33 </el-form>
34 <div class="dataGrid"> 4 <div class="dataGrid">
35 <el-table :data="tableData" :row-class-name="tableRowClassName"> 5 <el-table :data="tableData" :row-class-name="tableRowClassName">
36 <el-table-column type="index" width="80" align="center" label="序号"> 6 <el-table-column type="index" width="80" align="center" label="序号">
...@@ -60,9 +30,10 @@ ...@@ -60,9 +30,10 @@
60 </template> 30 </template>
61 31
62 <script> 32 <script>
33 import SearchHead from "../../../components/searchHead/searchHead";
63 export default { 34 export default {
64 name: "", 35 name: "",
65 components: {}, 36 components: {SearchHead},
66 props: {}, 37 props: {},
67 data() { 38 data() {
68 return { 39 return {
...@@ -110,6 +81,12 @@ export default { ...@@ -110,6 +81,12 @@ export default {
110 return ""; 81 return "";
111 } 82 }
112 }, 83 },
84
85 //获取子组件点击查询触发的事件
86 getData(obj){
87 console.log(obj);
88 //将obj作为参数调用接口查询表格数据
89 }
113 }, 90 },
114 computed: {}, 91 computed: {},
115 watch: {}, 92 watch: {},
......