添加、更正、综合查询模块完善
Showing
3 changed files
with
335 additions
and
26 deletions
src/views/panel/add/index.vue
0 → 100644
1 | <template> | ||
2 | <div class="main"> | ||
3 | <SearchHead @getSearchCondition="getData"></SearchHead> | ||
4 | <div class="dataGrid" ref="dataGrid"> | ||
5 | <el-table | ||
6 | :data="tableData" | ||
7 | :height="tableHeight" | ||
8 | :row-class-name="tableRowClassName" | ||
9 | > | ||
10 | <el-table-column type="index" width="80" align="center" label="序号"> | ||
11 | </el-table-column> | ||
12 | <el-table-column label="操作" width="100"> | ||
13 | <template slot-scope="scope"> | ||
14 | <el-button @click="handleClick(scope.row)" type="text" size="small" | ||
15 | >办理</el-button | ||
16 | > | ||
17 | <el-button type="text" size="small">定位</el-button> | ||
18 | </template> | ||
19 | </el-table-column> | ||
20 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> | ||
21 | </el-table-column> | ||
22 | <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> | ||
23 | </el-table-column> | ||
24 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> | ||
25 | </el-table-column> | ||
26 | <el-table-column prop="lx" align="left" width="120" label="类型"> | ||
27 | </el-table-column> | ||
28 | <el-table-column prop="qlr" align="left" width="120" label="权利人"> | ||
29 | </el-table-column> | ||
30 | <el-table-column prop="zl" align="left" label="坐落"> </el-table-column> | ||
31 | <el-table-column prop="zrsj" align="left" width="120" label="转入时间"> | ||
32 | </el-table-column> | ||
33 | <el-table-column prop="cjr" align="left" width="120" label="创建人"> | ||
34 | </el-table-column> | ||
35 | </el-table> | ||
36 | <div class="pagination"> | ||
37 | <el-pagination background layout="prev, pager, next" :total="1000"> | ||
38 | </el-pagination> | ||
39 | </div> | ||
40 | </div> | ||
41 | </div> | ||
42 | </template> | ||
43 | |||
44 | <script> | ||
45 | import SearchHead from "../../../components/searchHead/searchHead"; | ||
46 | export default { | ||
47 | name: "", | ||
48 | components: { SearchHead }, | ||
49 | props: {}, | ||
50 | data() { | ||
51 | return { | ||
52 | formData: { | ||
53 | user: "", | ||
54 | region: "", | ||
55 | type: [], | ||
56 | }, | ||
57 | tableData: [ | ||
58 | { | ||
59 | bdcdyh: "610101001001GB00001W", | ||
60 | xmmc: "万科集团万科城", | ||
61 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
62 | lx: "宗地", | ||
63 | qlr: "李子新", | ||
64 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
65 | zrsj: "2020.09.07 ", | ||
66 | cjr: "李子新", | ||
67 | }, | ||
68 | ], | ||
69 | tableHeight: "", | ||
70 | }; | ||
71 | }, | ||
72 | created() {}, | ||
73 | mounted() { | ||
74 | for (let i = 0; i < 11; i++) { | ||
75 | let obj = { | ||
76 | bdcdyh: "610101001001GB00001W", | ||
77 | xmmc: "万科集团万科城", | ||
78 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
79 | lx: "自然幢", | ||
80 | qlr: "李子新", | ||
81 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
82 | zrsj: "2020.09.07 ", | ||
83 | cjr: "李子新", | ||
84 | }; | ||
85 | this.tableData.push(obj); | ||
86 | } | ||
87 | this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; | ||
88 | }, | ||
89 | methods: { | ||
90 | onSubmit() {}, | ||
91 | tableRowClassName({ row, rowIndex }) { | ||
92 | if (rowIndex % 2 !== 0) { | ||
93 | return "even-row"; | ||
94 | } else { | ||
95 | return ""; | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | //获取子组件点击查询触发的事件 | ||
100 | getData(obj) { | ||
101 | console.log(obj); | ||
102 | //将obj作为参数调用接口查询表格数据 | ||
103 | }, | ||
104 | //点击办理 | ||
105 | handleClick(row) { | ||
106 | let path = ""; | ||
107 | switch (row.lx) { | ||
108 | case "自然幢": | ||
109 | path = "/zrz"; | ||
110 | break; | ||
111 | case "宗地": | ||
112 | path = "/zd"; | ||
113 | break; | ||
114 | default: | ||
115 | break; | ||
116 | } | ||
117 | this.$router.push(path); | ||
118 | }, | ||
119 | }, | ||
120 | computed: {}, | ||
121 | watch: {}, | ||
122 | }; | ||
123 | </script> | ||
124 | <style scoped lang="less"> | ||
125 | .main { | ||
126 | width: 100%; | ||
127 | height: 100%; | ||
128 | box-sizing: border-box; | ||
129 | padding: 0 18px; | ||
130 | display: flex; | ||
131 | flex-direction: column; | ||
132 | background-color: #fcfdff; | ||
133 | .demo-form-inline { | ||
134 | margin-top: 18px; | ||
135 | .moreSearchBtn { | ||
136 | background-color: #1ad6e1; | ||
137 | border-color: #1ad6e1; | ||
138 | } | ||
139 | .moreSearchBtn:focus, | ||
140 | .moreSearchBtn:hover { | ||
141 | background-color: rgba(28, 200, 229, 0.6); | ||
142 | } | ||
143 | } | ||
144 | .dataGrid { | ||
145 | flex: 1; | ||
146 | .pagination { | ||
147 | padding: 18px 0; | ||
148 | } | ||
149 | } | ||
150 | } | ||
151 | </style> |
1 | <template> | 1 | <template> |
2 | <div class=""></div> | 2 | <div class="main"> |
3 | <SearchHead @getSearchCondition="getData"></SearchHead> | ||
4 | <div class="dataGrid" ref="dataGrid"> | ||
5 | <el-table | ||
6 | :data="tableData" | ||
7 | :height="tableHeight" | ||
8 | :row-class-name="tableRowClassName" | ||
9 | > | ||
10 | <el-table-column type="index" width="80" align="center" label="序号"> | ||
11 | </el-table-column> | ||
12 | <el-table-column label="操作" width="100"> | ||
13 | <template slot-scope="scope"> | ||
14 | <el-button @click="handleClick(scope.row)" type="text" size="small" | ||
15 | >办理</el-button | ||
16 | > | ||
17 | <el-button type="text" size="small">定位</el-button> | ||
18 | </template> | ||
19 | </el-table-column> | ||
20 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> | ||
21 | </el-table-column> | ||
22 | <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> | ||
23 | </el-table-column> | ||
24 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> | ||
25 | </el-table-column> | ||
26 | <el-table-column prop="lx" align="left" width="120" label="类型"> | ||
27 | </el-table-column> | ||
28 | <el-table-column prop="qlr" align="left" width="120" label="权利人"> | ||
29 | </el-table-column> | ||
30 | <el-table-column prop="zl" align="left" label="坐落"> </el-table-column> | ||
31 | <el-table-column prop="zrsj" align="left" width="120" label="转入时间"> | ||
32 | </el-table-column> | ||
33 | <el-table-column prop="cjr" align="left" width="120" label="创建人"> | ||
34 | </el-table-column> | ||
35 | </el-table> | ||
36 | <div class="pagination"> | ||
37 | <el-pagination background layout="prev, pager, next" :total="1000"> | ||
38 | </el-pagination> | ||
39 | </div> | ||
40 | </div> | ||
41 | </div> | ||
3 | </template> | 42 | </template> |
4 | 43 | ||
5 | <script> | 44 | <script> |
45 | import SearchHead from "../../../components/searchHead/searchHead"; | ||
6 | export default { | 46 | export default { |
7 | name:"", | 47 | name: "", |
8 | components:{}, | 48 | components: { SearchHead }, |
9 | props:{}, | 49 | props: {}, |
10 | data(){ | 50 | data() { |
11 | return { | 51 | return { |
12 | } | 52 | formData: { |
13 | }, | 53 | user: "", |
14 | created(){}, | 54 | region: "", |
15 | mounted(){}, | 55 | type: [], |
16 | methods:{}, | 56 | }, |
17 | computed: {}, | 57 | tableData: [ |
18 | watch: {}, | 58 | { |
19 | } | 59 | bdcdyh: "610101001001GB00001W", |
60 | xmmc: "万科集团万科城", | ||
61 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
62 | lx: "宗地", | ||
63 | qlr: "李子新", | ||
64 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
65 | zrsj: "2020.09.07 ", | ||
66 | cjr: "李子新", | ||
67 | }, | ||
68 | ], | ||
69 | tableHeight: "", | ||
70 | }; | ||
71 | }, | ||
72 | created() {}, | ||
73 | mounted() { | ||
74 | for (let i = 0; i < 11; i++) { | ||
75 | let obj = { | ||
76 | bdcdyh: "610101001001GB00001W", | ||
77 | xmmc: "万科集团万科城", | ||
78 | bdcqzh: "陕(2017)西安市不动产权第00000", | ||
79 | lx: "自然幢", | ||
80 | qlr: "李子新", | ||
81 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | ||
82 | zrsj: "2020.09.07 ", | ||
83 | cjr: "李子新", | ||
84 | }; | ||
85 | this.tableData.push(obj); | ||
86 | } | ||
87 | this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; | ||
88 | }, | ||
89 | methods: { | ||
90 | onSubmit() {}, | ||
91 | tableRowClassName({ row, rowIndex }) { | ||
92 | if (rowIndex % 2 !== 0) { | ||
93 | return "even-row"; | ||
94 | } else { | ||
95 | return ""; | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | //获取子组件点击查询触发的事件 | ||
100 | getData(obj) { | ||
101 | console.log(obj); | ||
102 | //将obj作为参数调用接口查询表格数据 | ||
103 | }, | ||
104 | //点击办理 | ||
105 | handleClick(row) { | ||
106 | let path = ""; | ||
107 | switch (row.lx) { | ||
108 | case "自然幢": | ||
109 | path = "/zrz"; | ||
110 | break; | ||
111 | case "宗地": | ||
112 | path = "/zd"; | ||
113 | break; | ||
114 | default: | ||
115 | break; | ||
116 | } | ||
117 | this.$router.push(path); | ||
118 | }, | ||
119 | }, | ||
120 | computed: {}, | ||
121 | watch: {}, | ||
122 | }; | ||
20 | </script> | 123 | </script> |
21 | <style scoped lang="less"> | ||
22 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
124 | <style scoped lang="less"> | ||
125 | .main { | ||
126 | width: 100%; | ||
127 | height: 100%; | ||
128 | box-sizing: border-box; | ||
129 | padding: 0 18px; | ||
130 | display: flex; | ||
131 | flex-direction: column; | ||
132 | background-color: #fcfdff; | ||
133 | .demo-form-inline { | ||
134 | margin-top: 18px; | ||
135 | .moreSearchBtn { | ||
136 | background-color: #1ad6e1; | ||
137 | border-color: #1ad6e1; | ||
138 | } | ||
139 | .moreSearchBtn:focus, | ||
140 | .moreSearchBtn:hover { | ||
141 | background-color: rgba(28, 200, 229, 0.6); | ||
142 | } | ||
143 | } | ||
144 | .dataGrid { | ||
145 | flex: 1; | ||
146 | .pagination { | ||
147 | padding: 18px 0; | ||
148 | } | ||
149 | } | ||
150 | } | ||
151 | </style> | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="main"> | 2 | <div class="main"> |
3 | <SearchHead @getSearchCondition="getData"></SearchHead> | 3 | <SearchHead @getSearchCondition="getData"></SearchHead> |
4 | <div class="dataGrid"> | 4 | <div class="dataGrid" ref="dataGrid"> |
5 | <el-table :data="tableData" :row-class-name="tableRowClassName"> | 5 | <el-table |
6 | :data="tableData" | ||
7 | :height="tableHeight" | ||
8 | :row-class-name="tableRowClassName" | ||
9 | > | ||
6 | <el-table-column type="index" width="80" align="center" label="序号"> | 10 | <el-table-column type="index" width="80" align="center" label="序号"> |
7 | </el-table-column> | 11 | </el-table-column> |
12 | <el-table-column label="操作" width="100"> | ||
13 | <template slot-scope="scope"> | ||
14 | <el-button @click="handleClick(scope.row)" type="text" size="small" | ||
15 | >办理</el-button | ||
16 | > | ||
17 | <el-button type="text" size="small">定位</el-button> | ||
18 | </template> | ||
19 | </el-table-column> | ||
8 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> | 20 | <el-table-column prop="bdcdyh" align="left" label="不动产单元号"> |
9 | </el-table-column> | 21 | </el-table-column> |
10 | <el-table-column prop="xmmc" align="left" label="项目名称"> | 22 | <el-table-column prop="xmmc" align="left" width="150" label="项目名称"> |
11 | </el-table-column> | 23 | </el-table-column> |
12 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> | 24 | <el-table-column prop="bdcqzh" align="left" label="不动产权证号"> |
13 | </el-table-column> | 25 | </el-table-column> |
... | @@ -33,7 +45,7 @@ | ... | @@ -33,7 +45,7 @@ |
33 | import SearchHead from "../../../components/searchHead/searchHead"; | 45 | import SearchHead from "../../../components/searchHead/searchHead"; |
34 | export default { | 46 | export default { |
35 | name: "", | 47 | name: "", |
36 | components: {SearchHead}, | 48 | components: { SearchHead }, |
37 | props: {}, | 49 | props: {}, |
38 | data() { | 50 | data() { |
39 | return { | 51 | return { |
... | @@ -54,6 +66,7 @@ export default { | ... | @@ -54,6 +66,7 @@ export default { |
54 | cjr: "李子新", | 66 | cjr: "李子新", |
55 | }, | 67 | }, |
56 | ], | 68 | ], |
69 | tableHeight: "", | ||
57 | }; | 70 | }; |
58 | }, | 71 | }, |
59 | created() {}, | 72 | created() {}, |
... | @@ -63,7 +76,7 @@ export default { | ... | @@ -63,7 +76,7 @@ export default { |
63 | bdcdyh: "610101001001GB00001W", | 76 | bdcdyh: "610101001001GB00001W", |
64 | xmmc: "万科集团万科城", | 77 | xmmc: "万科集团万科城", |
65 | bdcqzh: "陕(2017)西安市不动产权第00000", | 78 | bdcqzh: "陕(2017)西安市不动产权第00000", |
66 | lx: "宗地", | 79 | lx: "自然幢", |
67 | qlr: "李子新", | 80 | qlr: "李子新", |
68 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", | 81 | zl: "灞桥-田家湾-咸宁东路,近浐河西路", |
69 | zrsj: "2020.09.07 ", | 82 | zrsj: "2020.09.07 ", |
... | @@ -71,6 +84,7 @@ export default { | ... | @@ -71,6 +84,7 @@ export default { |
71 | }; | 84 | }; |
72 | this.tableData.push(obj); | 85 | this.tableData.push(obj); |
73 | } | 86 | } |
87 | this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; | ||
74 | }, | 88 | }, |
75 | methods: { | 89 | methods: { |
76 | onSubmit() {}, | 90 | onSubmit() {}, |
... | @@ -83,10 +97,25 @@ export default { | ... | @@ -83,10 +97,25 @@ export default { |
83 | }, | 97 | }, |
84 | 98 | ||
85 | //获取子组件点击查询触发的事件 | 99 | //获取子组件点击查询触发的事件 |
86 | getData(obj){ | 100 | getData(obj) { |
87 | console.log(obj); | 101 | console.log(obj); |
88 | //将obj作为参数调用接口查询表格数据 | 102 | //将obj作为参数调用接口查询表格数据 |
89 | } | 103 | }, |
104 | //点击办理 | ||
105 | handleClick(row) { | ||
106 | let path = ""; | ||
107 | switch (row.lx) { | ||
108 | case "自然幢": | ||
109 | path = "/zrz"; | ||
110 | break; | ||
111 | case "宗地": | ||
112 | path = "/zd"; | ||
113 | break; | ||
114 | default: | ||
115 | break; | ||
116 | } | ||
117 | this.$router.push(path); | ||
118 | }, | ||
90 | }, | 119 | }, |
91 | computed: {}, | 120 | computed: {}, |
92 | watch: {}, | 121 | watch: {}, |
... | @@ -99,8 +128,8 @@ export default { | ... | @@ -99,8 +128,8 @@ export default { |
99 | box-sizing: border-box; | 128 | box-sizing: border-box; |
100 | padding: 0 18px; | 129 | padding: 0 18px; |
101 | display: flex; | 130 | display: flex; |
102 | flex-direction: column; | 131 | flex-direction: column; |
103 | background-color: #FCFDFF; | 132 | background-color: #fcfdff; |
104 | .demo-form-inline { | 133 | .demo-form-inline { |
105 | margin-top: 18px; | 134 | margin-top: 18px; |
106 | .moreSearchBtn { | 135 | .moreSearchBtn { |
... | @@ -113,7 +142,7 @@ export default { | ... | @@ -113,7 +142,7 @@ export default { |
113 | } | 142 | } |
114 | } | 143 | } |
115 | .dataGrid { | 144 | .dataGrid { |
116 | flex: auto; | 145 | flex: 1; |
117 | .pagination { | 146 | .pagination { |
118 | padding: 18px 0; | 147 | padding: 18px 0; |
119 | } | 148 | } | ... | ... |
-
Please register or sign in to post a comment