Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
88200887 by jiaozeping@pashanhoo.com
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents 3039b874 f41be3ee
Inline Side-by-side
Showing 2 changed files with 462 additions and 66 deletions
1 <template> 1 <template>
2 <div class="clxx"> 2 <div class="clxx">
3 <div class="clxx-box"> 3 <div class="left">
4 <div class="header"> 4 <div
5 <div class="title">{{ title }}</div> 5 v-for="item in menuList"
6 :key="item.id"
7 :class="['item', checkedId == item.id ? 'checked' : '']"
8 @click="menuClick(item)"
9 >
10 {{ item.label }}
6 </div> 11 </div>
7 <div class="img-box"> 12 </div>
8 <img :src="showImg.imgUrl" alt="" /> 13 <div class="right">
14 <!-- 材料目录明细 -->
15 <div class="clmlmx-box" v-if="checkedId == '1'">
16 <div class="title">申请材料目录</div>
17 <lb-table
18 :column="column"
19 border
20 :key="key"
21 heightNumSetting
22 :pagination="false"
23 :data="tableData"
24 >
25 </lb-table>
9 </div> 26 </div>
10 <div class="img-list"> 27
11 <div class="item" v-for="(item, index) in imgList" :key="index"> 28 <!-- 材料预览 -->
12 <img 29 <div class="clyl-box" v-if="checkedId == '2'">
13 :class="showImg.id == item.id ? 'active' : ''" 30 <div class="menu-tree">
14 :src="item.imgUrl" 31 <div class="item" v-for="item in treedata" :key="item.id">
15 alt="" 32 {{ item.label }}
16 @click="imgClick(item)" 33 <i :class="iclass" @click="iconClick()"></i>
17 /> 34 <el-collapse-transition>
35 <div v-show="menuOpen">
36 <div
37 v-for="item2 in item.children"
38 :key="item2.id"
39 :class="['child', treeCheckId == item2.id ? 'checked' : '']"
40 @click="treeClick(item2)"
41 >
42 {{ item2.label }}
43 </div>
44 </div>
45 </el-collapse-transition>
46 </div>
47 </div>
48 <div class="clyl-img">
49 <div class="header">
50 <div class="title">{{ title }}</div>
51 <div class="i-group">
52 <i class="el-icon-zoom-in"></i>
53 <i class="el-icon-zoom-out"></i>
54 <i class="el-icon-refresh-right"></i>
55 <i class="el-icon-refresh-left"></i>
56 <i class="el-icon-document"></i>
57 </div>
58 </div>
59 <div class="img-box">
60 <img :src="showImg.imgUrl" alt="" />
61 </div>
62 <div class="img-list">
63 <div class="item" v-for="(item, index) in imgList" :key="index">
64 <img
65 :class="showImg.id == item.id ? 'active' : ''"
66 :src="item.imgUrl"
67 alt=""
68 @click="imgClick(item)"
69 />
70 </div>
71 </div>
72 <div class="btn-group">
73 <el-button>扫描</el-button>
74 <el-button icon="el-icon-upload2">上传文件</el-button>
75 <el-button icon="el-icon-delete">删除</el-button>
76 </div>
18 </div> 77 </div>
19 </div>
20 <div class="btn-group">
21 <el-button>扫描</el-button>
22 <el-button>上传文件</el-button>
23 <el-button icon="el-icon-delete">删除</el-button>
24 </div> 78 </div>
25 </div> 79 </div>
80 <clxxAddDialog v-model="isDialog"/>
26 </div> 81 </div>
27 </template> 82 </template>
28 <script> 83 <script>
84 import clxxAddDialog from "./clxxAddDialog.vue"
29 export default { 85 export default {
30 /**注册组件*/ 86 components: {clxxAddDialog},
31 components: {},
32 data() { 87 data() {
33 return { 88 return {
89 isDialog:false,
90 menuList: [
91 {
92 id: "1",
93 label: "材料目录明细",
94 },
95 {
96 id: "2",
97 label: "材料预览",
98 },
99 ],
100 checkedId: "1",
101 column: [
102 {
103 width: "60",
104 renderHeader: (h, scope) => {
105 return (
106 <i
107 class="el-icon-plus pointer"
108 onClick={() => {
109 this.handleAdd();
110 }}
111 style="color:#409EFF"
112 ></i>
113 );
114 },
115 render: (h, scope) => {
116 if (scope.row.isAdd) {
117 return (
118 <i
119 class="el-icon-minus pointer"
120 onClick={() => {
121 this.handleMinus(scope.$index, scope.row);
122 }}
123 ></i>
124 );
125 }
126 },
127 },
128 {
129 width: "60",
130 label: "序号",
131 type: "index",
132 },
133 {
134 prop: "sfbx",
135 label: "是否必选",
136 width: "100",
137 },
138 {
139 prop: "clmc",
140 label: "材料名称",
141 },
142 {
143 prop: "cllx",
144 label: "材料类型",
145 },
146 {
147 prop: "fs",
148 label: "份数",
149 },
150 {
151 prop: "smzt",
152 label: "扫描状态",
153 },
154 {
155 prop: "smys",
156 label: "扫描页数",
157 },
158 {
159 label: "操作",
160 width: "90",
161 render: (h, scope) => {
162 return (
163 <div>
164 <el-button
165 type="text"
166 disabled={scope.$index == 0}
167 onClick={() => {
168 this.moveUpward(scope.$index, scope.row);
169 }}
170 >
171 上移
172 </el-button>
173 <el-button
174 type="text"
175 disabled={scope.$index + 1 == this.tableData.length}
176 onClick={() => {
177 this.moveDown(scope.$index, scope.row);
178 }}
179 >
180 下移
181 </el-button>
182 </div>
183 );
184 },
185 },
186 ],
187 tableData: [
188 {
189 sfbx: "必选",
190 clmc: "不动产登记申请书",
191 cllx: "原件正本",
192 fs: 2,
193 smzt: "已扫描",
194 smys: 4,
195 },
196 {
197 sfbx: "必选",
198 clmc: "申请人身份证明",
199 cllx: "正本复印件",
200 fs: 1,
201 smzt: "已扫描",
202 smys: 6,
203 },
204 {
205 sfbx: "必选",
206 clmc: "土地权属来源材",
207 cllx: "副本复印件",
208 fs: 1,
209 smzt: "未扫描",
210 smys: 0,
211 },
212 {
213 sfbx: "必选",
214 clmc: "不动产权籍调查表",
215 cllx: "副本复印件",
216 fs: 1,
217 smzt: "未扫描",
218 smys: 0,
219 },
220 {
221 sfbx: "必选",
222 clmc: "完税凭证",
223 cllx: "副本复印件",
224 fs: 1,
225 smzt: "未扫描",
226 smys: 0,
227 },
228 ],
229
230 treedata: [
231 {
232 id: "clml",
233 label: "材料目录",
234 children: [
235 {
236 id: "bdcdjsqs",
237 label: "不动产登记申请书",
238 },
239 {
240 id: "sqrsfzm",
241 label: "申请人身份证明",
242 },
243 {
244 id: "tdqslycl",
245 label: "土地权属来源材料",
246 },
247 {
248 id: "bdcqjdcb",
249 label: "不动产权籍调查表",
250 },
251 {
252 id: "wspz",
253 label: "完税凭证",
254 },
255 ],
256 },
257 ],
258 menuOpen: true,
259 treeCheckId: "bdcdjsqs",
260 defaultProps: {
261 children: "children",
262 label: "label",
263 },
264 defaultKey: "bdcdjsqs",
34 title: "不动产登记申请书 (1/2)", 265 title: "不动产登记申请书 (1/2)",
35 imgList: [ 266 imgList: [
36 { 267 {
...@@ -50,9 +281,30 @@ export default { ...@@ -50,9 +281,30 @@ export default {
50 id: "1", 281 id: "1",
51 imgUrl: require("../images/1.png"), 282 imgUrl: require("../images/1.png"),
52 }, 283 },
284 iclass: "itemIcon el-icon-caret-bottom",
53 }; 285 };
54 }, 286 },
55 methods: { 287 methods: {
288 // 左侧菜单点击
289 menuClick(item) {
290 this.checkedId = item.id;
291 },
292 // 添加材料目录
293 handleAdd() {},
294 // 材料目录关闭收起
295 iconClick() {
296 this.menuOpen = !this.menuOpen;
297 if (this.menuOpen) {
298 this.iclass = "itemIcon el-icon-caret-bottom close";
299 } else {
300 this.iclass = "itemIcon el-icon-caret-bottom open";
301 }
302 },
303 // 材料目录点击选中
304 treeClick(item) {
305 this.treeCheckId = item.id;
306 },
307 // 小图片点击
56 imgClick(item) { 308 imgClick(item) {
57 this.showImg = item; 309 this.showImg = item;
58 }, 310 },
...@@ -63,61 +315,185 @@ export default { ...@@ -63,61 +315,185 @@ export default {
63 .clxx { 315 .clxx {
64 width: 100%; 316 width: 100%;
65 height: 100%; 317 height: 100%;
66 &-box { 318 display: flex;
67 width: 800px; 319 padding-left: 15px;
68 height: 800px; 320 .left {
69 background: #e4e4e4; 321 width: 52px;
70 margin: 0 auto; 322 height: 780px;
71 .header { 323 background: #f3f4f7;
72 height: 30px; 324 border-radius: 1px;
73 background: #fff; 325 .item {
74 text-align: center; 326 width: 42px;
75 .title { 327 height: 50%;
76 height: 28px; 328 margin: 0 0 auto auto;
77 line-height: 28px; 329 writing-mode: tb;
78 font-size: 13px; 330 display: flex;
79 padding: 0 8px; 331 justify-content: center;
80 border: 1px solid #aaa; 332 align-items: center;
81 display: inline-block; 333 font-size: 16px;
82 } 334 font-family: PingFangSC-Medium, PingFang SC;
335 color: #7a7a7a;
336 cursor: pointer;
337 border-right: 1px solid #d9d9d9;
338 }
339 .item.checked {
340 background: #ffffff;
341 border-top: 1px solid #d9d9d9;
342 border-bottom: 1px solid #d9d9d9;
343 border-left: 2px solid #2b7ff1;
344 border-right: none;
345 font-size: 18px;
346 color: #4a4a4a;
83 } 347 }
84 .img-box { 348 }
85 width: 800px; 349 .right {
86 height: 610px; 350 width: calc(100% - 80px);
87 line-height: 610px; 351 height: 780px;
88 padding: 5px; 352 padding: 0 30px;
89 text-align: center; 353
90 img { 354 .clmlmx-box {
91 max-height: 600px; 355 width: 100%;
92 max-width: 790px; 356 height: 530px;
357 margin: 0 auto;
358 border: 1px solid #d9d9d9;
359 background: #f3f4f7;
360 padding: 20px;
361 .title {
362 text-align: center;
363 height: 60px;
364 line-height: 60px;
365 border: 1px solid #dfe6ec;
366 font-size: 20px;
367 background: #81d3f81a;
368 margin-bottom: -1px;
93 } 369 }
94 } 370 }
95 .img-list { 371
372 .clyl-box {
96 width: 100%; 373 width: 100%;
97 height: 80px; 374 height: 100%;
98 line-height: 80px; 375 display: flex;
99 background: #ccc; 376
100 text-align: center; 377 .menu-tree {
101 .item { 378 width: 20%;
102 display: inline-block; 379 height: 100%;
103 margin: 10px 5px; 380 margin-right: 30px;
104 img { 381 border-right: 1px dotted #d9d9d9;
105 width: 60px; 382 padding: 0 24px;
383 .item {
106 height: 60px; 384 height: 60px;
107 cursor: pointer; 385 line-height: 60px;
386 border-bottom: 1px solid #e8e8e8;
387 font-size: 16px;
388 color: #4a4a4a;
389 .itemIcon {
390 float: right;
391 line-height: 60px;
392 cursor: pointer;
393 }
394
395 @keyframes open {
396 100% {
397 transform: rotate(180deg);
398 }
399 }
400
401 @keyframes close {
402 0% {
403 transform: rotate(180deg);
404 }
405 100% {
406 transform: rotate(-0deg);
407 }
408 }
409
410 .open {
411 animation: open 0.5s;
412 animation-fill-mode: both;
413 }
414 .close {
415 animation: close 0.5s;
416 animation-fill-mode: both;
417 }
418 .child {
419 height: 60px;
420 line-height: 60px;
421 border-bottom: 1px solid #e8e8e8;
422 padding-left: 18px;
423 color: #6b6b6b;
424 cursor: pointer;
425 }
426 .checked {
427 border-radius: 6px;
428 border: 1px solid #4083f9;
429 }
430 }
431 }
432
433 .clyl-img {
434 width: 75%;
435 height: 800px;
436 background: #f3f4f7;
437 margin: 0 auto;
438 .header {
439 height: 54px;
440 line-height: 52px;
441 background: #eceef2;
442 border: 1px solid #ededed;
443 padding: 0 0 0 30px;
444 .title {
445 font-size: 13px;
446 display: inline-block;
447 }
448 .i-group {
449 float: right;
450 height: 100%;
451 i {
452 width: 50px;
453 height: 52px;
454 cursor: pointer;
455 }
456 }
457 }
458 .img-box {
459 width: 800px;
460 height: calc(100% - 214px);
461 padding: 5px;
462 text-align: center;
463 margin: 0 auto;
464 img {
465 max-height: 100%;
466 max-width: 100%;
467 }
108 } 468 }
109 .active { 469 .img-list {
110 border: 1px solid #fff; 470 width: 100%;
471 height: 80px;
472 line-height: 80px;
473 background: #eceef2;
474 text-align: center;
475 .item {
476 display: inline-block;
477 margin: 10px 5px;
478 img {
479 width: 60px;
480 height: 60px;
481 cursor: pointer;
482 }
483 .active {
484 border: 1px solid #fff;
485 }
486 }
487 }
488 .btn-group {
489 width: 100%;
490 height: 80px;
491 line-height: 80px;
492 background: #fff;
493 text-align: center;
111 } 494 }
112 } 495 }
113 } 496 }
114 .btn-group {
115 width: 100%;
116 height: 80px;
117 line-height: 80px;
118 background: #fff;
119 text-align: center;
120 }
121 } 497 }
122 } 498 }
123 </style> 499 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <dialogBox title="新建材料信息" width="60%">
3
4 </dialogBox>
5 </template>
6
7 <script>
8 export default {
9 props: {
10
11 },
12
13 data () {
14 return {}
15 },
16 methods: {}
17 }
18 </script>
19 <style scoped lang="scss">
20 </style>