Skip to content

蔡永松 / fontweb-dc

Go to a project
Toggle navigation
Toggle navigation pinning
5b42ad12 by 焦小希
Options

增加督办，查询页面

1 parent 15594c13
Inline Side-by-side
Showing 4 changed files with 986 additions and 0 deletions
1 var self = new Vue({
2 el:'#app',
3 data(){
4 return {
5 search:'',
6 // 表格数据
7 tabaledata:[
8 {
9 xh:'1',
10 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
11 anlx:'批后',
12 zrdw:'高新分局',
13 ssqy:'高新',
14 ljr:'向小华',
15 djsh:'2020-07-05',
16 jssi:'2020-07-05',
17 },
18 {
19 xh:'2',
20 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
21 anlx:'批后',
22 zrdw:'高新分局',
23 ssqy:'高新',
24 ljr:'向小华',
25 djsh:'2020-07-05',
26 jssi:'2020-07-05',
27 },
28 {
29 xh:'3',
30 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
31 anlx:'批后',
32 zrdw:'高新分局',
33 ssqy:'高新',
34 ljr:'向小华',
35 djsh:'2020-07-05',
36 jssi:'2020-07-05',
37 },
38 {
39 xh:'4',
40 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
41 anlx:'批后',
42 zrdw:'高新分局',
43 ssqy:'高新',
44 ljr:'向小华',
45 djsh:'2020-07-05',
46 jssi:'2020-07-05',
47 },
48 {
49 xh:'5',
50 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
51 anlx:'批后',
52 zrdw:'高新分局',
53 ssqy:'高新',
54 ljr:'向小华',
55 djsh:'2020-07-05',
56 jssi:'2020-07-05',
57 },
58 ],
59 isActive:1,
60 }
61 },
62 methods:{
63 handleSizeChange(){
64
65 },
66 handleCurrentChange(){},
67 click(val){
68 this.isActive = val
69 }
70 }
71 })
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>批后管理待办</title>
6 <script src="/frontweb/common/js/config.js"></script>
7 <link rel="stylesheet" href="/frontweb/libs/element-ui/lib-master/theme-chalk/index.css"/>
8 <script src="/frontweb/libs/vue/vue.js"></script>
9 <script src="/frontweb/libs/element/index.js"></script>
10 <script src="/frontweb/libs/axios/axios.min.js"></script>
11 <style>
12 .contanier{
13 margin:10px 10px 0 10px;
14 height:100%;
15 background: #fff;
16 }
17 .search{
18 display: flex;
19 justify-content: space-between;
20 background: #ccc;
21 }
22 .opt{
23 display: flex;
24 width:50%;
25 justify-content: space-around;
26 align-items: center;
27 }
28 .optspan{
29 cursor: pointer;
30 }
31 .optspan:hover{
32 color:#05C6B4
33 }
34 .select{
35 color:#05C6B4;
36 border-bottom:5px solid #05C6B4
37 }
38 .el-table{
39 margin-top: 20px;
40 }
41 .el-table th {
42 background:#ccc !important;
43 }
44 .el-table tbody tr:hover>td {
45 background-color:#ccc!important
46 }
47 .block{
48 float: right;
49 background: #fff;
50 margin-top: 10px;
51 }
52 </style>
53 </head>
54 <body>
55 <div id="app">
56 <div class='contanier'>
57 <div class="search">
58 <div class="opt">
59 <span class="optspan" :class="isActive==1? 'select':''" @click="click(1)">全部</span>
60 <span class="optspan" :class="isActive==2? 'select':''" @click="click(2)">批后</span>
61 <span class="optspan" :class="isActive==3? 'select':''" @click="click(3)">巡查</span>
62 <span class="optspan" :class="isActive==4? 'select':''" @click="click(4)">举报</span>
63 <span class="optspan" :class="isActive==5? 'select':''" @click="click(5)">转办</span>
64 </div>
65 <div style="float: right">
66 <el-input style="width:300px;margin-right: 20px" placeholder="请输入搜索的内容"></el-input>
67 <el-button type="success" size="mini" icon="el-icon-search">查询</el-button>
68 </div>
69 </div>
70 <!-- 表格区域-->
71 <el-table
72 v-if="isActive==1"
73 :data="tabaledata"
74 style="width: 100%;"
75 height="100%"
76 border
77 stripe
78 :default-sort = "{prop: 'xh', order: 'ascending'}"
79 >
80 <el-table-column
81 type="selection"
82 width="55">
83 </el-table-column>
84 <el-table-column
85 prop="xh"
86 label="序号"
87 width="55">
88 </el-table-column>
89 <el-table-column
90 prop="ajmc"
91 width="300"
92 label="案件名称"
93 align="center"
94 ></el-table-column>
95 <el-table-column
96 prop="anlx"
97 label="案件类型"
98 align="center"
99 width="100"
100 >
101 </el-table-column>
102 <el-table-column
103 prop="zrdw"
104 label="责任单位"
105 align="center"
106 width="200"
107 >
108 </el-table-column>
109 <el-table-column
110 prop="ssqy"
111 label="所属区域"
112 align="center"
113 width="200"
114 >
115 </el-table-column>
116 <el-table-column
117 prop="ljr"
118 label="来件人"
119 align="center"
120 width="400"
121 >
122 </el-table-column>
123 <el-table-column
124 prop="djsh"
125 label="登记时间"
126 align="center"
127 width="200"
128 >
129 </el-table-column>
130 <el-table-column
131 prop="jssi"
132 label="接受时间"
133 align="center"
134 width="200"
135 >
136 </el-table-column>
137 </el-table>
138 <el-table
139 v-if="isActive==2"
140 :data="tabaledata"
141 style="width: 100%;"
142 height="100%"
143 border
144 stripe
145 :default-sort = "{prop: 'xh', order: 'ascending'}"
146 >
147 <el-table-column
148 type="selection"
149 width="55">
150 </el-table-column>
151 <el-table-column
152 prop="xh"
153 label="序号"
154 width="55">
155 </el-table-column>
156 <el-table-column
157 prop="ajmc"
158 width="300"
159 label="案件名称"
160 align="center"
161 ></el-table-column>
162 <el-table-column
163 prop="anlx"
164 label="案件类型"
165 align="center"
166 width="100"
167 >
168 </el-table-column>
169 <el-table-column
170 prop="zrdw"
171 label="责任单位"
172 align="center"
173 width="200"
174 >
175 </el-table-column>
176 <el-table-column
177 prop="ssqy"
178 label="所属区域"
179 align="center"
180 width="200"
181 >
182 </el-table-column>
183 <el-table-column
184 prop="ljr"
185 label="来件人"
186 align="center"
187 width="400"
188 >
189 </el-table-column>
190 <el-table-column
191 prop="djsh"
192 label="登记时间"
193 align="center"
194 width="200"
195 >
196 </el-table-column>
197 <el-table-column
198 prop="jssi"
199 label="接受时间"
200 align="center"
201 width="200"
202 >
203 </el-table-column>
204 </el-table>
205 <el-table
206 v-if="isActive==3"
207 :data="tabaledata"
208 style="width: 100%;"
209 height="100%"
210 border
211 stripe
212 :default-sort = "{prop: 'xh', order: 'ascending'}"
213 >
214 <el-table-column
215 type="selection"
216 width="55">
217 </el-table-column>
218 <el-table-column
219 prop="xh"
220 label="序号"
221 width="55">
222 </el-table-column>
223 <el-table-column
224 prop="ajmc"
225 width="300"
226 label="案件名称"
227 align="center"
228 ></el-table-column>
229 <el-table-column
230 prop="anlx"
231 label="案件类型"
232 align="center"
233 width="100"
234 >
235 </el-table-column>
236 <el-table-column
237 prop="zrdw"
238 label="责任单位"
239 align="center"
240 width="200"
241 >
242 </el-table-column>
243 <el-table-column
244 prop="ssqy"
245 label="所属区域"
246 align="center"
247 width="200"
248 >
249 </el-table-column>
250 <el-table-column
251 prop="ljr"
252 label="来件人"
253 align="center"
254 width="400"
255 >
256 </el-table-column>
257 <el-table-column
258 prop="djsh"
259 label="登记时间"
260 align="center"
261 width="200"
262 >
263 </el-table-column>
264 <el-table-column
265 prop="jssi"
266 label="接受时间"
267 align="center"
268 width="200"
269 >
270 </el-table-column>
271 </el-table>
272 <el-table
273 v-if="isActive==4"
274 :data="tabaledata"
275 style="width: 100%;"
276 height="100%"
277 border
278 stripe
279 :default-sort = "{prop: 'xh', order: 'ascending'}"
280 >
281 <el-table-column
282 type="selection"
283 width="55">
284 </el-table-column>
285 <el-table-column
286 prop="xh"
287 label="序号"
288 width="55">
289 </el-table-column>
290 <el-table-column
291 prop="ajmc"
292 width="300"
293 label="案件名称"
294 align="center"
295 ></el-table-column>
296 <el-table-column
297 prop="anlx"
298 label="案件类型"
299 align="center"
300 width="100"
301 >
302 </el-table-column>
303 <el-table-column
304 prop="zrdw"
305 label="责任单位"
306 align="center"
307 width="200"
308 >
309 </el-table-column>
310 <el-table-column
311 prop="ssqy"
312 label="所属区域"
313 align="center"
314 width="200"
315 >
316 </el-table-column>
317 <el-table-column
318 prop="ljr"
319 label="来件人"
320 align="center"
321 width="400"
322 >
323 </el-table-column>
324 <el-table-column
325 prop="djsh"
326 label="登记时间"
327 align="center"
328 width="200"
329 >
330 </el-table-column>
331 <el-table-column
332 prop="jssi"
333 label="接受时间"
334 align="center"
335 width="200"
336 >
337 </el-table-column>
338 </el-table>
339 <el-table
340 v-if="isActive==5"
341 :data="tabaledata"
342 style="width: 100%;"
343 height="100%"
344 border
345 stripe
346 :default-sort = "{prop: 'xh', order: 'ascending'}"
347 >
348 <el-table-column
349 type="selection"
350 width="55">
351 </el-table-column>
352 <el-table-column
353 prop="xh"
354 label="序号"
355 width="55">
356 </el-table-column>
357 <el-table-column
358 prop="ajmc"
359 width="300"
360 label="案件名称"
361 align="center"
362 ></el-table-column>
363 <el-table-column
364 prop="anlx"
365 label="案件类型"
366 align="center"
367 width="100"
368 >
369 </el-table-column>
370 <el-table-column
371 prop="zrdw"
372 label="责任单位"
373 align="center"
374 width="200"
375 >
376 </el-table-column>
377 <el-table-column
378 prop="ssqy"
379 label="所属区域"
380 align="center"
381 width="200"
382 >
383 </el-table-column>
384 <el-table-column
385 prop="ljr"
386 label="来件人"
387 align="center"
388 width="400"
389 >
390 </el-table-column>
391 <el-table-column
392 prop="djsh"
393 label="登记时间"
394 align="center"
395 width="200"
396 >
397 </el-table-column>
398 <el-table-column
399 prop="jssi"
400 label="接受时间"
401 align="center"
402 width="200"
403 >
404 </el-table-column>
405 </el-table>
406 <!-- 分页区域-->
407 <div class="block">
408 <el-pagination
409 @size-change="handleSizeChange"
410 @current-change="handleCurrentChange"
411 :current-page="1"
412 :page-sizes="[2, 3, 5]"
413 :page-size="4"
414 layout="total, sizes, prev, pager, next, jumper"
415 :total="8">
416 </el-pagination>
417 </div>
418 </div>
419 </div>
420 <script src="./js/widget.js"></script>
421 </body>
422 </html>
...\ No newline at end of file ...\ No newline at end of file
1 var self = new Vue({
2 el:'#app',
3 data(){
4 return {
5 search:'',
6 // 表格数据
7 tabaledata:[
8 {
9 xh:'1',
10 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
11 anlx:'批后',
12 zrdw:'高新分局',
13 ssqy:'高新',
14 ljr:'向小华',
15 djsh:'2020-07-05',
16 jssi:'2020-07-05',
17 },
18 {
19 xh:'2',
20 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
21 anlx:'批后',
22 zrdw:'高新分局',
23 ssqy:'高新',
24 ljr:'向小华',
25 djsh:'2020-07-05',
26 jssi:'2020-07-05',
27 },
28 {
29 xh:'3',
30 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
31 anlx:'批后',
32 zrdw:'高新分局',
33 ssqy:'高新',
34 ljr:'向小华',
35 djsh:'2020-07-05',
36 jssi:'2020-07-05',
37 },
38 {
39 xh:'4',
40 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
41 anlx:'批后',
42 zrdw:'高新分局',
43 ssqy:'高新',
44 ljr:'向小华',
45 djsh:'2020-07-05',
46 jssi:'2020-07-05',
47 },
48 {
49 xh:'5',
50 ajmc:'关于拍卖出让87.608亩国有建设用地使用权的请示（GX3-18-25）',
51 anlx:'批后',
52 zrdw:'高新分局',
53 ssqy:'高新',
54 ljr:'向小华',
55 djsh:'2020-07-05',
56 jssi:'2020-07-05',
57 },
58 ],
59 isActive:1,
60 }
61 },
62 methods:{
63 handleSizeChange(){
64
65 },
66 handleCurrentChange(){},
67 click(val){
68 this.isActive = val
69 }
70 }
71 })
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>批后管理待办</title>
6 <script src="/frontweb/common/js/config.js"></script>
7 <link rel="stylesheet" href="/frontweb/libs/element-ui/lib-master/theme-chalk/index.css"/>
8 <script src="/frontweb/libs/vue/vue.js"></script>
9 <script src="/frontweb/libs/element/index.js"></script>
10 <script src="/frontweb/libs/axios/axios.min.js"></script>
11 <style>
12 .contanier{
13 margin:10px 10px 0 10px;
14 height:100%;
15 background: #fff;
16 }
17 .search{
18 display: flex;
19 justify-content: space-between;
20 background: #ccc;
21 }
22 .opt{
23 display: flex;
24 width:50%;
25 justify-content: space-around;
26 align-items: center;
27 }
28 .optspan{
29 cursor: pointer;
30 }
31 .optspan:hover{
32 color:#05C6B4
33 }
34 .select{
35 color:#05C6B4;
36 border-bottom:5px solid #05C6B4
37 }
38 .el-table{
39 margin-top: 20px;
40 }
41 .el-table th {
42 background:#ccc !important;
43 }
44 .el-table tbody tr:hover>td {
45 background-color:#ccc!important
46 }
47 .block{
48 float: right;
49 background: #fff;
50 margin-top: 10px;
51 }
52 </style>
53 </head>
54 <body>
55 <div id="app">
56 <div class='contanier'>
57 <div class="search">
58 <div class="opt">
59 <span class="optspan" :class="isActive==1? 'select':''" @click="click(1)">全部</span>
60 <span class="optspan" :class="isActive==2? 'select':''" @click="click(2)">批后</span>
61 <span class="optspan" :class="isActive==3? 'select':''" @click="click(3)">巡查</span>
62 <span class="optspan" :class="isActive==4? 'select':''" @click="click(4)">举报</span>
63 <span class="optspan" :class="isActive==5? 'select':''" @click="click(5)">转办</span>
64 </div>
65 <div style="float: right">
66 <el-input style="width:300px;margin-right: 20px" placeholder="请输入搜索的内容"></el-input>
67 <el-button type="success" size="mini" icon="el-icon-search">查询</el-button>
68 </div>
69 </div>
70 <!-- 表格区域-->
71 <el-table
72 v-if="isActive==1"
73 :data="tabaledata"
74 style="width: 100%;"
75 height="100%"
76 border
77 stripe
78 :default-sort = "{prop: 'xh', order: 'ascending'}"
79 >
80 <el-table-column
81 type="selection"
82 width="55">
83 </el-table-column>
84 <el-table-column
85 prop="xh"
86 label="序号"
87 width="55">
88 </el-table-column>
89 <el-table-column
90 prop="ajmc"
91 width="300"
92 label="案件名称"
93 align="center"
94 ></el-table-column>
95 <el-table-column
96 prop="anlx"
97 label="案件类型"
98 align="center"
99 width="100"
100 >
101 </el-table-column>
102 <el-table-column
103 prop="zrdw"
104 label="责任单位"
105 align="center"
106 width="200"
107 >
108 </el-table-column>
109 <el-table-column
110 prop="ssqy"
111 label="所属区域"
112 align="center"
113 width="200"
114 >
115 </el-table-column>
116 <el-table-column
117 prop="ljr"
118 label="来件人"
119 align="center"
120 width="400"
121 >
122 </el-table-column>
123 <el-table-column
124 prop="djsh"
125 label="登记时间"
126 align="center"
127 width="200"
128 >
129 </el-table-column>
130 <el-table-column
131 prop="jssi"
132 label="接受时间"
133 align="center"
134 width="200"
135 >
136 </el-table-column>
137 </el-table>
138 <el-table
139 v-if="isActive==2"
140 :data="tabaledata"
141 style="width: 100%;"
142 height="100%"
143 border
144 stripe
145 :default-sort = "{prop: 'xh', order: 'ascending'}"
146 >
147 <el-table-column
148 type="selection"
149 width="55">
150 </el-table-column>
151 <el-table-column
152 prop="xh"
153 label="序号"
154 width="55">
155 </el-table-column>
156 <el-table-column
157 prop="ajmc"
158 width="300"
159 label="案件名称"
160 align="center"
161 ></el-table-column>
162 <el-table-column
163 prop="anlx"
164 label="案件类型"
165 align="center"
166 width="100"
167 >
168 </el-table-column>
169 <el-table-column
170 prop="zrdw"
171 label="责任单位"
172 align="center"
173 width="200"
174 >
175 </el-table-column>
176 <el-table-column
177 prop="ssqy"
178 label="所属区域"
179 align="center"
180 width="200"
181 >
182 </el-table-column>
183 <el-table-column
184 prop="ljr"
185 label="来件人"
186 align="center"
187 width="400"
188 >
189 </el-table-column>
190 <el-table-column
191 prop="djsh"
192 label="登记时间"
193 align="center"
194 width="200"
195 >
196 </el-table-column>
197 <el-table-column
198 prop="jssi"
199 label="接受时间"
200 align="center"
201 width="200"
202 >
203 </el-table-column>
204 </el-table>
205 <el-table
206 v-if="isActive==3"
207 :data="tabaledata"
208 style="width: 100%;"
209 height="100%"
210 border
211 stripe
212 :default-sort = "{prop: 'xh', order: 'ascending'}"
213 >
214 <el-table-column
215 type="selection"
216 width="55">
217 </el-table-column>
218 <el-table-column
219 prop="xh"
220 label="序号"
221 width="55">
222 </el-table-column>
223 <el-table-column
224 prop="ajmc"
225 width="300"
226 label="案件名称"
227 align="center"
228 ></el-table-column>
229 <el-table-column
230 prop="anlx"
231 label="案件类型"
232 align="center"
233 width="100"
234 >
235 </el-table-column>
236 <el-table-column
237 prop="zrdw"
238 label="责任单位"
239 align="center"
240 width="200"
241 >
242 </el-table-column>
243 <el-table-column
244 prop="ssqy"
245 label="所属区域"
246 align="center"
247 width="200"
248 >
249 </el-table-column>
250 <el-table-column
251 prop="ljr"
252 label="来件人"
253 align="center"
254 width="400"
255 >
256 </el-table-column>
257 <el-table-column
258 prop="djsh"
259 label="登记时间"
260 align="center"
261 width="200"
262 >
263 </el-table-column>
264 <el-table-column
265 prop="jssi"
266 label="接受时间"
267 align="center"
268 width="200"
269 >
270 </el-table-column>
271 </el-table>
272 <el-table
273 v-if="isActive==4"
274 :data="tabaledata"
275 style="width: 100%;"
276 height="100%"
277 border
278 stripe
279 :default-sort = "{prop: 'xh', order: 'ascending'}"
280 >
281 <el-table-column
282 type="selection"
283 width="55">
284 </el-table-column>
285 <el-table-column
286 prop="xh"
287 label="序号"
288 width="55">
289 </el-table-column>
290 <el-table-column
291 prop="ajmc"
292 width="300"
293 label="案件名称"
294 align="center"
295 ></el-table-column>
296 <el-table-column
297 prop="anlx"
298 label="案件类型"
299 align="center"
300 width="100"
301 >
302 </el-table-column>
303 <el-table-column
304 prop="zrdw"
305 label="责任单位"
306 align="center"
307 width="200"
308 >
309 </el-table-column>
310 <el-table-column
311 prop="ssqy"
312 label="所属区域"
313 align="center"
314 width="200"
315 >
316 </el-table-column>
317 <el-table-column
318 prop="ljr"
319 label="来件人"
320 align="center"
321 width="400"
322 >
323 </el-table-column>
324 <el-table-column
325 prop="djsh"
326 label="登记时间"
327 align="center"
328 width="200"
329 >
330 </el-table-column>
331 <el-table-column
332 prop="jssi"
333 label="接受时间"
334 align="center"
335 width="200"
336 >
337 </el-table-column>
338 </el-table>
339 <el-table
340 v-if="isActive==5"
341 :data="tabaledata"
342 style="width: 100%;"
343 height="100%"
344 border
345 stripe
346 :default-sort = "{prop: 'xh', order: 'ascending'}"
347 >
348 <el-table-column
349 type="selection"
350 width="55">
351 </el-table-column>
352 <el-table-column
353 prop="xh"
354 label="序号"
355 width="55">
356 </el-table-column>
357 <el-table-column
358 prop="ajmc"
359 width="300"
360 label="案件名称"
361 align="center"
362 ></el-table-column>
363 <el-table-column
364 prop="anlx"
365 label="案件类型"
366 align="center"
367 width="100"
368 >
369 </el-table-column>
370 <el-table-column
371 prop="zrdw"
372 label="责任单位"
373 align="center"
374 width="200"
375 >
376 </el-table-column>
377 <el-table-column
378 prop="ssqy"
379 label="所属区域"
380 align="center"
381 width="200"
382 >
383 </el-table-column>
384 <el-table-column
385 prop="ljr"
386 label="来件人"
387 align="center"
388 width="400"
389 >
390 </el-table-column>
391 <el-table-column
392 prop="djsh"
393 label="登记时间"
394 align="center"
395 width="200"
396 >
397 </el-table-column>
398 <el-table-column
399 prop="jssi"
400 label="接受时间"
401 align="center"
402 width="200"
403 >
404 </el-table-column>
405 </el-table>
406 <!-- 分页区域-->
407 <div class="block">
408 <el-pagination
409 @size-change="handleSizeChange"
410 @current-change="handleCurrentChange"
411 :current-page="1"
412 :page-sizes="[2, 3, 5]"
413 :page-size="4"
414 layout="total, sizes, prev, pager, next, jumper"
415 :total="8">
416 </el-pagination>
417 </div>
418 </div>
419 </div>
420 <script src="./js/widget.js"></script>
421 </body>
422 </html>
...\ No newline at end of file ...\ No newline at end of file