Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
7a9a289c by 任超
Options

style;样式

1 parent 2ed542b4
Inline Side-by-side
Showing 4 changed files with 59 additions and 78 deletions
...@@ -12,12 +12,7 @@ export default { ...@@ -12,12 +12,7 @@ export default {
12 }, 12 },
13 data () { 13 data () {
14 return { 14 return {
15 tableData: [{ 15 tableData: [],
16 xm: '12',
17 zjzl: '32',
18 zjh: '123',
19 fr: "213123",
20 }],
21 InformationTable: [ 16 InformationTable: [
22 { 17 {
23 width: '60', 18 width: '60',
...@@ -54,7 +49,7 @@ export default { ...@@ -54,7 +49,7 @@ export default {
54 return ( 49 return (
55 <el-select value={scope.row[scope.column.property]}> 50 <el-select value={scope.row[scope.column.property]}>
56 { 51 {
57 this.dictData['A30'].map(option => { 52 this.dictData && this.dictData['A30'].map(option => {
58 return ( 53 return (
59 <el-option label={option.label} value={option.value}></el-option> 54 <el-option label={option.label} value={option.value}></el-option>
60 ) 55 )
......
1 <template> 1 <template>
2 <div class="clxx"> 2 <div class="clxx">
3 <div class="left"> 3 <div class="left">
4 <div 4 <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'checked' : '']"
5 v-for="item in menuList" 5 @click="menuClick(item)">
6 :key="item.id"
7 :class="['item', checkedId == item.id ? 'checked' : '']"
8 @click="menuClick(item)"
9 >
10 {{ item.label }} 6 {{ item.label }}
11 </div> 7 </div>
12 </div> 8 </div>
...@@ -14,14 +10,7 @@ ...@@ -14,14 +10,7 @@
14 <!-- 材料目录明细 --> 10 <!-- 材料目录明细 -->
15 <div class="clmlmx-box" v-if="checkedId == '1'"> 11 <div class="clmlmx-box" v-if="checkedId == '1'">
16 <div class="title">申请材料目录</div> 12 <div class="title">申请材料目录</div>
17 <lb-table 13 <lb-table :column="column" :key="key" :pagination="false" :data="tableData">
18 :column="column"
19 border
20 :key="key"
21 heightNumSetting
22 :pagination="false"
23 :data="tableData"
24 >
25 </lb-table> 14 </lb-table>
26 </div> 15 </div>
27 16
...@@ -33,12 +22,8 @@ ...@@ -33,12 +22,8 @@
33 <i :class="iclass" @click="iconClick()"></i> 22 <i :class="iclass" @click="iconClick()"></i>
34 <el-collapse-transition> 23 <el-collapse-transition>
35 <div v-show="menuOpen"> 24 <div v-show="menuOpen">
36 <div 25 <div v-for="item in tableData" :key="item.bsmSj"
37 v-for="item in tableData" 26 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
38 :key="item.bsmSj"
39 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
40 @click="treeClick(item)"
41 >
42 {{ item.sjmc }} 27 {{ item.sjmc }}
43 </div> 28 </div>
44 </div> 29 </div>
...@@ -72,12 +57,8 @@ ...@@ -72,12 +57,8 @@
72 </div> 57 </div>
73 <div class="img-list"> 58 <div class="img-list">
74 <div class="item" v-for="(item, index) in imgList" :key="index"> 59 <div class="item" v-for="(item, index) in imgList" :key="index">
75 <img 60 <img :class="showImg.id == item.id ? 'active' : ''" :src="item.imgUrl" alt=""
76 :class="showImg.id == item.id ? 'active' : ''" 61 @click="imgClick(item, index)" />
77 :src="item.imgUrl"
78 alt=""
79 @click="imgClick(item, index)"
80 />
81 </div> 62 </div>
82 </div> 63 </div>
83 <div class="btn-group"> 64 <div class="btn-group">
...@@ -100,7 +81,7 @@ import filter from "@/utils/filter.js"; ...@@ -100,7 +81,7 @@ import filter from "@/utils/filter.js";
100 81
101 export default { 82 export default {
102 components: { clxxAddDialog }, 83 components: { clxxAddDialog },
103 data() { 84 data () {
104 return { 85 return {
105 isDialog: false, 86 isDialog: false,
106 menuList: [ 87 menuList: [
...@@ -122,9 +103,8 @@ export default { ...@@ -122,9 +103,8 @@ export default {
122 <i 103 <i
123 class="el-icon-plus pointer" 104 class="el-icon-plus pointer"
124 onClick={() => { 105 onClick={() => {
125 this.handleAdd(); 106 this.handleAdd()
126 }} 107 }}
127 style="color:#409EFF"
128 ></i> 108 ></i>
129 ); 109 );
130 }, 110 },
...@@ -252,30 +232,30 @@ export default { ...@@ -252,30 +232,30 @@ export default {
252 title: "", 232 title: "",
253 titleYs: 1, 233 titleYs: 1,
254 titleNum: 0, 234 titleNum: 0,
255 imgList:[], 235 imgList: [],
256 showImg:{}, 236 showImg: {},
257 iclass: "itemIcon el-icon-caret-bottom", 237 iclass: "itemIcon el-icon-caret-bottom",
258 }; 238 };
259 }, 239 },
260 computed: { 240 computed: {
261 ...mapGetters(["dictData"]), 241 ...mapGetters(["dictData"]),
262 }, 242 },
263 mounted() { 243 mounted () {
264 if (this.$parent.index == 1) { 244 if (this.$parent.index == 1) {
265 this.clmlmxInit(); 245 this.clmlmxInit();
266 } 246 }
267 }, 247 },
268 methods: { 248 methods: {
269 // 左侧菜单点击 249 // 左侧菜单点击
270 menuClick(item) { 250 menuClick (item) {
271 this.checkedId = item.id; 251 this.checkedId = item.id;
272 }, 252 },
273 // 添加材料目录 253 // 添加材料目录
274 handleAdd() { 254 handleAdd () {
275 this.isDialog = true; 255 this.isDialog = true;
276 }, 256 },
277 // 上移 257 // 上移
278 moveUpward(index, row) { 258 moveUpward (index, row) {
279 let obj = { 259 let obj = {
280 xh: row.xh, 260 xh: row.xh,
281 bsmSlsq: row.bsmSlsq, 261 bsmSlsq: row.bsmSlsq,
...@@ -288,7 +268,7 @@ export default { ...@@ -288,7 +268,7 @@ export default {
288 }); 268 });
289 }, 269 },
290 // 下移 270 // 下移
291 moveDown(index, row) { 271 moveDown (index, row) {
292 let obj = { 272 let obj = {
293 xh: row.xh, 273 xh: row.xh,
294 bsmSlsq: row.bsmSlsq, 274 bsmSlsq: row.bsmSlsq,
...@@ -301,7 +281,7 @@ export default { ...@@ -301,7 +281,7 @@ export default {
301 }); 281 });
302 }, 282 },
303 // 材料目录明细初始化 283 // 材料目录明细初始化
304 clmlmxInit() { 284 clmlmxInit () {
305 this.id = this.$parent.$parent.$parent.id; 285 this.id = this.$parent.$parent.$parent.id;
306 this.unitData = this.$parent.$parent.$parent.unitData; 286 this.unitData = this.$parent.$parent.$parent.unitData;
307 var formdata = new FormData(); 287 var formdata = new FormData();
...@@ -318,7 +298,7 @@ export default { ...@@ -318,7 +298,7 @@ export default {
318 }); 298 });
319 }, 299 },
320 // 新增弹窗保存 300 // 新增弹窗保存
321 addSave(data) { 301 addSave (data) {
322 let maxXh = 0; 302 let maxXh = 0;
323 this.tableData.forEach((item) => { 303 this.tableData.forEach((item) => {
324 if (item.xh > maxXh) { 304 if (item.xh > maxXh) {
...@@ -346,7 +326,7 @@ export default { ...@@ -346,7 +326,7 @@ export default {
346 }); 326 });
347 }, 327 },
348 // 材料目录删除 328 // 材料目录删除
349 handleDelete(index, row) { 329 handleDelete (index, row) {
350 clmlDelete({ sjBsm: row.bsmSj }).then((res) => { 330 clmlDelete({ sjBsm: row.bsmSj }).then((res) => {
351 if (res.code == 200) { 331 if (res.code == 200) {
352 this.$message({ 332 this.$message({
...@@ -359,7 +339,7 @@ export default { ...@@ -359,7 +339,7 @@ export default {
359 }); 339 });
360 }, 340 },
361 // 材料目录关闭收起 341 // 材料目录关闭收起
362 iconClick() { 342 iconClick () {
363 this.menuOpen = !this.menuOpen; 343 this.menuOpen = !this.menuOpen;
364 if (this.menuOpen) { 344 if (this.menuOpen) {
365 this.iclass = "itemIcon el-icon-caret-bottom close"; 345 this.iclass = "itemIcon el-icon-caret-bottom close";
...@@ -368,27 +348,27 @@ export default { ...@@ -368,27 +348,27 @@ export default {
368 } 348 }
369 }, 349 },
370 // 材料目录点击选中 350 // 材料目录点击选中
371 treeClick(item) { 351 treeClick (item) {
372 this.treeCheckId = item.bsmSj; 352 this.treeCheckId = item.bsmSj;
373 this.title = item.sjmc; 353 this.title = item.sjmc;
374 this.titleYs = 1; 354 this.titleYs = 1;
375 this.titleNum = item.children.length; 355 this.titleNum = item.children.length;
376 }, 356 },
377 // 小图片点击 357 // 小图片点击
378 imgClick(item, index) { 358 imgClick (item, index) {
379 this.showImg = item; 359 this.showImg = item;
380 this.titleYs = index + 1; 360 this.titleYs = index + 1;
381 }, 361 },
382 // 图片上一张 362 // 图片上一张
383 imgPrev(){ 363 imgPrev () {
384 364
385 }, 365 },
386 // 图片下一张 366 // 图片下一张
387 imgNext(){ 367 imgNext () {
388 368
389 }, 369 },
390 // 字典 370 // 字典
391 dicStatus(val, code) { 371 dicStatus (val, code) {
392 let data = this.$store.getters.dictData[code], 372 let data = this.$store.getters.dictData[code],
393 name = "暂无"; 373 name = "暂无";
394 if (data) { 374 if (data) {
...@@ -409,11 +389,13 @@ export default { ...@@ -409,11 +389,13 @@ export default {
409 height: 100%; 389 height: 100%;
410 display: flex; 390 display: flex;
411 padding-left: 15px; 391 padding-left: 15px;
392
412 .left { 393 .left {
413 width: 52px; 394 width: 52px;
414 height: 780px; 395 height: calc(100vh - 150px);
415 background: #f3f4f7; 396 background: #f3f4f7;
416 border-radius: 1px; 397 border-radius: 1px;
398
417 .item { 399 .item {
418 width: 42px; 400 width: 42px;
419 height: 50%; 401 height: 50%;
...@@ -428,6 +410,7 @@ export default { ...@@ -428,6 +410,7 @@ export default {
428 cursor: pointer; 410 cursor: pointer;
429 border-right: 1px solid #d9d9d9; 411 border-right: 1px solid #d9d9d9;
430 } 412 }
413
431 .item.checked { 414 .item.checked {
432 background: #ffffff; 415 background: #ffffff;
433 border-top: 1px solid #d9d9d9; 416 border-top: 1px solid #d9d9d9;
...@@ -438,18 +421,15 @@ export default { ...@@ -438,18 +421,15 @@ export default {
438 color: #4a4a4a; 421 color: #4a4a4a;
439 } 422 }
440 } 423 }
424
441 .right { 425 .right {
442 width: calc(100% - 80px); 426 width: calc(100% - 80px);
443 height: 780px; 427 height: 100%;
444 padding: 0 30px; 428 padding: 0 30px;
445 429
446 .clmlmx-box { 430 .clmlmx-box {
447 width: 100%;
448 height: 530px;
449 margin: 0 auto; 431 margin: 0 auto;
450 border: 1px solid #d9d9d9; 432
451 background: #f3f4f7;
452 padding: 20px;
453 .title { 433 .title {
454 text-align: center; 434 text-align: center;
455 height: 60px; 435 height: 60px;
...@@ -472,12 +452,14 @@ export default { ...@@ -472,12 +452,14 @@ export default {
472 margin-right: 30px; 452 margin-right: 30px;
473 border-right: 1px dotted #d9d9d9; 453 border-right: 1px dotted #d9d9d9;
474 padding: 0 24px; 454 padding: 0 24px;
455
475 .item { 456 .item {
476 height: 60px; 457 height: 60px;
477 line-height: 60px; 458 line-height: 60px;
478 border-bottom: 1px solid #e8e8e8; 459 border-bottom: 1px solid #e8e8e8;
479 font-size: 16px; 460 font-size: 16px;
480 color: #4a4a4a; 461 color: #4a4a4a;
462
481 .itemIcon { 463 .itemIcon {
482 float: right; 464 float: right;
483 line-height: 60px; 465 line-height: 60px;
...@@ -494,6 +476,7 @@ export default { ...@@ -494,6 +476,7 @@ export default {
494 0% { 476 0% {
495 transform: rotate(180deg); 477 transform: rotate(180deg);
496 } 478 }
479
497 100% { 480 100% {
498 transform: rotate(-0deg); 481 transform: rotate(-0deg);
499 } 482 }
...@@ -503,10 +486,12 @@ export default { ...@@ -503,10 +486,12 @@ export default {
503 animation: open 0.5s; 486 animation: open 0.5s;
504 animation-fill-mode: both; 487 animation-fill-mode: both;
505 } 488 }
489
506 .close { 490 .close {
507 animation: close 0.5s; 491 animation: close 0.5s;
508 animation-fill-mode: both; 492 animation-fill-mode: both;
509 } 493 }
494
510 .child { 495 .child {
511 height: 60px; 496 height: 60px;
512 line-height: 60px; 497 line-height: 60px;
...@@ -515,6 +500,7 @@ export default { ...@@ -515,6 +500,7 @@ export default {
515 color: #6b6b6b; 500 color: #6b6b6b;
516 cursor: pointer; 501 cursor: pointer;
517 } 502 }
503
518 .checked { 504 .checked {
519 border-radius: 6px; 505 border-radius: 6px;
520 border: 1px solid #4083f9; 506 border: 1px solid #4083f9;
...@@ -528,19 +514,23 @@ export default { ...@@ -528,19 +514,23 @@ export default {
528 background: #f3f4f7; 514 background: #f3f4f7;
529 margin: 0 auto; 515 margin: 0 auto;
530 position: relative; 516 position: relative;
517
531 .header { 518 .header {
532 height: 54px; 519 height: 54px;
533 line-height: 52px; 520 line-height: 52px;
534 background: #eceef2; 521 background: #eceef2;
535 border: 1px solid #ededed; 522 border: 1px solid #ededed;
536 padding: 0 0 0 30px; 523 padding: 0 0 0 30px;
524
537 .title { 525 .title {
538 font-size: 13px; 526 font-size: 13px;
539 display: inline-block; 527 display: inline-block;
540 } 528 }
529
541 .i-group { 530 .i-group {
542 float: right; 531 float: right;
543 height: 100%; 532 height: 100%;
533
544 i { 534 i {
545 width: 50px; 535 width: 50px;
546 height: 52px; 536 height: 52px;
...@@ -548,6 +538,7 @@ export default { ...@@ -548,6 +538,7 @@ export default {
548 } 538 }
549 } 539 }
550 } 540 }
541
551 .prev, 542 .prev,
552 .next { 543 .next {
553 width: 60px; 544 width: 60px;
...@@ -559,8 +550,9 @@ export default { ...@@ -559,8 +550,9 @@ export default {
559 cursor: pointer; 550 cursor: pointer;
560 position: absolute; 551 position: absolute;
561 } 552 }
553
562 .prev:hover, 554 .prev:hover,
563 .next:hover{ 555 .next:hover {
564 background: #7a7a7a; 556 background: #7a7a7a;
565 } 557 }
566 558
...@@ -568,40 +560,48 @@ export default { ...@@ -568,40 +560,48 @@ export default {
568 top: 40%; 560 top: 40%;
569 left: 10px; 561 left: 10px;
570 } 562 }
563
571 .next { 564 .next {
572 top: 40%; 565 top: 40%;
573 right: 10px; 566 right: 10px;
574 } 567 }
568
575 .img-box { 569 .img-box {
576 width: 800px; 570 width: 800px;
577 height: calc(100% - 214px); 571 height: calc(100% - 214px);
578 padding: 5px; 572 padding: 5px;
579 text-align: center; 573 text-align: center;
580 margin: 0 auto; 574 margin: 0 auto;
575
581 img { 576 img {
582 max-height: 100%; 577 max-height: 100%;
583 max-width: 100%; 578 max-width: 100%;
584 } 579 }
585 } 580 }
581
586 .img-list { 582 .img-list {
587 width: 100%; 583 width: 100%;
588 height: 80px; 584 height: 80px;
589 line-height: 80px; 585 line-height: 80px;
590 background: #eceef2; 586 background: #eceef2;
591 text-align: center; 587 text-align: center;
588
592 .item { 589 .item {
593 display: inline-block; 590 display: inline-block;
594 margin: 10px 5px; 591 margin: 10px 5px;
592
595 img { 593 img {
596 width: 60px; 594 width: 60px;
597 height: 60px; 595 height: 60px;
598 cursor: pointer; 596 cursor: pointer;
599 } 597 }
598
600 .active { 599 .active {
601 border: 1px solid #fff; 600 border: 1px solid #fff;
602 } 601 }
603 } 602 }
604 } 603 }
604
605 .btn-group { 605 .btn-group {
606 width: 100%; 606 width: 100%;
607 height: 80px; 607 height: 80px;
......
...@@ -191,11 +191,8 @@ export default { ...@@ -191,11 +191,8 @@ export default {
191 gyfs: "", 191 gyfs: "",
192 }, 192 },
193 rules: { 193 rules: {
194 // ywh: [ 194 }
195 // { required: true, message: '业务号', trigger: 'blur' } 195 }
196 // ],
197 },
198 };
199 }, 196 },
200 methods: { 197 methods: {
201 list (bsmSldy) { 198 list (bsmSldy) {
...@@ -204,18 +201,7 @@ export default { ...@@ -204,18 +201,7 @@ export default {
204 formdata.append("bsmSldy", bsmSldy); 201 formdata.append("bsmSldy", bsmSldy);
205 Init(formdata).then((res) => { 202 Init(formdata).then((res) => {
206 if (res.code === 200) { 203 if (res.code === 200) {
207 console.log(res, 1111); 204 this.ruleForm = { ...res.result, ...res.result.zdjbxxdatas, ...res.result.qlxxdatas, ...res.result.jsydsyqdatas }
208 this.ruleForm = res.result;
209 this.ruleForm.zddm = res.result.zdjbxxdatas.zddm;
210 this.ruleForm.zdmj = res.result.zdjbxxdatas.zdmj;
211 this.ruleForm.zl = res.result.qlxxdatas.zl;
212 this.ruleForm.tdyt = res.result.qlxxdatas.ytmc;
213 this.ruleForm.qlsdfs = res.result.zdjbxxdatas.qlsdfsmc;
214 this.ruleForm.qdjg = res.result.jsydsyqdatas.qdjg;
215 this.ruleForm.fj = res.result.jsydsyqdatas.fj;
216 this.ruleForm.syqqzsj = res.result.jsydsyqdatas.syqqzsj;
217 this.ruleForm.tdsyqx = res.result.jsydsyqdatas.tdsyqx;
218 this.ruleForm.qlxzmc = res.result.zdjbxxdatas.qlxzmc;
219 } 205 }
220 }); 206 });
221 }, 207 },
......
...@@ -153,7 +153,6 @@ export default { ...@@ -153,7 +153,6 @@ export default {
153 watch: { 153 watch: {
154 activeName: { 154 activeName: {
155 handler (newName, oldName) { 155 handler (newName, oldName) {
156 console.log(newName, 'newName');
157 let itemObj = { '1': 'slxx', '2': 'clxx', '3': 'spyj' } 156 let itemObj = { '1': 'slxx', '2': 'clxx', '3': 'spyj' }
158 this.editItem = this.loadView(itemObj[newName]) 157 this.editItem = this.loadView(itemObj[newName])
159 }, 158 },
...@@ -358,6 +357,7 @@ export default { ...@@ -358,6 +357,7 @@ export default {
358 position: relative; 357 position: relative;
359 width: 250px; 358 width: 250px;
360 box-sizing: border-box; 359 box-sizing: border-box;
360
361 ul { 361 ul {
362 position: relative; 362 position: relative;
363 363
......