Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
766225de by renchao@pashanhoo.com
Options

style:材料信息

1 parent 31b19a98
Inline Side-by-side
Showing 1 changed file with 0 additions and 608 deletions
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-07-28 09:35:31
5 -->
6 <template>
7 <div class="clxx">
8 <div class="left">
9 <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'active' : '']"
10 @click="menuClick(item)">
11 {{ item.label }}
12 </div>
13 </div>
14 <div class="right">
15 <!-- 材料目录明细 -->
16 <div class="clmlmx-box" v-if="checkedId == '1'">
17 <div class="title">申请材料目录</div>
18 <lb-table :column="column" :key="key" :heightNum="150" :pagination="false" :data="tableData">
19 </lb-table>
20 </div>
21 <!-- 材料预览 -->
22 <div class="clyl-box" v-else>
23 <div class="menu-tree">
24 <div class="item">
25 材料目录({{tableData.length}})
26 <div>
27 <div v-for="(item,index) in tableData" :key="item.bsmSj"
28 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item,index)">
29 <span v-if="item.isrequired==1" class="required">必选</span>
30 {{ item.sjmc }}
31 <span class="cl_number">({{item.children.length}})</span>
32 </div>
33 </div>
34 </div>
35 </div>
36 <image-preview ref='imageRef' v-if="tableData.length>0" :ableOperation="ableOperation" :previewImg="previewImg" @updateList="updateList"
37 @nextPriview="nextPriview"
38 @prevPriview="prevPriview" />
39 </div>
40 </div>
41 <clxxAddDialog v-model="isDialog" />
42 </div>
43 </template>
44 <script>
45 import { mapGetters } from "vuex";
46 import clxxAddDialog from "../dialog/clxxAddDialog.vue";
47 import imagePreview from '@/views/components/imagePreview.vue'
48 import { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.js";
49 export default {
50 components: { clxxAddDialog, imagePreview },
51 data () {
52 return {
53 //表单是否可操作
54 ableOperation: true,
55 isDialog: false,
56 menuList: [
57 {
58 id: "1",
59 label: "材料目录明细",
60 },
61 {
62 id: "2",
63 label: "材料预览",
64 },
65 ],
66 iclass: "",
67 // 材料目录选中
68 treeCheckIndex: 0,
69 treeCheckId: "",
70 checkedId: "1",
71 column: [
72 {
73 width: "50",
74 renderHeader: (h, scope) => {
75 return (
76 <div>
77 {
78 this.ableOperation ? '序号' :
79 <i
80 class="el-icon-plus pointer"
81 onClick={() => {
82 this.handleAdd()
83 }}
84 ></i>
85 }
86 </div>
87 )
88 },
89 render: (h, scope) => {
90 // 新建的材料,可删除
91 // v-show='scope.row.sfxjcl == 1'
92 return (
93 <div>
94 {
95 this.ableOperation ? <span>{scope.$index + 1}</span> :
96 <i
97 class="el-icon-minus pointer"
98
99 onClick={() => {
100 this.handleDelete(scope.$index, scope.row);
101 }}
102 ></i>
103 }
104 </div>
105 )
106 }
107 },
108 {
109 prop: "isrequired",
110 label: "是否必选",
111 width: "50",
112 render: (h, scope) => {
113 if (scope.row.sfxjcl === "1") {
114 return (
115 <div>
116 <span>可选</span>
117 </div>
118 );
119 }
120 else {
121 return (
122 <div>
123 <span>必选</span>
124 </div>
125 );
126 }
127 },
128 },
129 {
130 prop: "sjmc",
131 label: "材料名称",
132 },
133 {
134 prop: "sjlx",
135 label: "材料类型",
136 width: "80",
137 render: (h, scope) => {
138 return (
139 <div>
140 <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
141 </div>
142 );
143 },
144 },
145 {
146 prop: "sjsl",
147 label: "份数",
148 width: "50"
149 },
150 {
151 prop: "smzt",
152 label: "扫描状态",
153 width: "80",
154 render: (h, scope) => {
155 if (scope.row.children.length > 0) {
156 return (
157 <div>
158 <span>已扫描</span>
159 </div>
160 );
161 } else {
162 return (
163 <div>
164 <span>未扫描</span>
165 </div>
166 );
167 }
168 },
169 },
170 {
171 prop: "ys",
172 label: "扫描页数",
173 width: "50"
174 },
175 {
176 label: "操作",
177 width: "80",
178 render: (h, scope) => {
179 return (
180 <div>
181 <el-button
182 type="text"
183 disabled={scope.$index == 0}
184 onClick={() => {
185 this.moveUpward(scope.$index, scope.row);
186 }}
187 >
188 上移
189 </el-button>
190 <el-button
191 type="text"
192 disabled={scope.$index + 1 == this.tableData.length}
193 onClick={() => {
194 this.moveDown(scope.$index, scope.row);
195 }}
196 >
197 下移
198 </el-button>
199 </div>
200 );
201 },
202 },
203 ],
204 key: 0,
205 tableData: [],
206 previewImg: {
207 // 收件标识码
208 bsmSj: '',
209 bsmSlsq: this.$parent.bsmSlsq,
210 index: 0,
211 selectedIndex: 0,
212 imgList: []
213 }
214 }
215 },
216 computed: {
217 ...mapGetters(["dictData"])
218 },
219 created () {
220 this.ableOperation = this.$parent.currentSelectTab.ableOperation
221 this.clmlInitList()
222 },
223 methods: {
224 // 自动预览
225 /**
226 * @description: 自动预览
227 * @author: renchao
228 */
229 nextPriview () {
230 if (this.treeCheckIndex < this.tableData.length) {
231 this.treeCheckIndex++
232 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
233 this.previewImg.index = 0
234 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
235 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
236 }
237 },
238 /**
239 * @description: prevPriview
240 * @author: renchao
241 */
242 prevPriview () {
243 if (this.treeCheckIndex >= 1) {
244 this.treeCheckIndex--
245 this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj
246 this.previewImg.index = this.previewImg.imgList.length
247 this.previewImg.imgList = this.tableData[this.treeCheckIndex].children
248 this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj
249 }
250 },
251 // 材料目录明细初始化
252 /**
253 * @description: 材料目录明细初始化
254 * @author: renchao
255 */
256 clmlInitList () {
257 return new Promise(resolve => {
258 this.unitData = this.$parent.unitData;
259 var formdata = new FormData();
260 formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
261 formdata.append("bsmSlsq", this.$parent.bsmSlsq);
262 formdata.append("clfl", 2);
263 InitClml(formdata).then((res) => {
264 if (res.result.code == 200) {
265 resolve(res.code)
266 if (res.result.result && res.result.result.length > 0) {
267 this.tableData = res.result.result;
268 this.treeCheckId = this.tableData[0].bsmSj;
269 this.title = this.tableData[0].sjmc;
270 this.titleYs = 1;
271 this.titleNum = this.tableData[0].children.length;
272
273 this.previewImg.imgList = this.tableData[0]?.children;
274 this.previewImg.bsmSj = this.tableData[0]?.bsmSj;
275 }
276 } else {
277 this.$message.error(res.result.message)
278 }
279 })
280 })
281 },
282 /**
283 * @description: updateList
284 * @param {*} val
285 * @author: renchao
286 */
287 updateList (val) {
288 let that = this
289 if (val != null) { //删除最后一张图片时 val=null
290 this.tableData.forEach(item => {
291 if (item.bsmSj === val.bsmSj) {
292 item.children = val.children
293 }
294 })
295 this.previewImg.imgList = _.cloneDeep(val.children)
296 if (this.previewImg.index == this.previewImg.imgList.length) {
297 this.previewImg.index = this.previewImg.index - 1
298 }
299 } else {
300 this.previewImg.imgList = []
301 this.tableData.forEach((item, index) => {
302 if (this.treeCheckId == item.bsmSj) {
303 item.children = []
304 that.treeCheckIndex = index
305 }
306 })
307 }
308
309 },
310 // 左侧菜单点击
311 /**
312 * @description: 左侧菜单点击
313 * @param {*} item
314 * @author: renchao
315 */
316 menuClick (item) {
317 this.checkedId = item.id
318 },
319 // 添加材料目录
320 /**
321 * @description: 添加材料目录
322 * @author: renchao
323 */
324 handleAdd () {
325 this.isDialog = true;
326 },
327 // 上移
328 /**
329 * @description: 上移
330 * @param {*} index
331 * @param {*} row
332 * @author: renchao
333 */
334 moveUpward (index, row) {
335 let obj = {
336 xh: row.xh,
337 bsmSlsq: row.bsmSlsq,
338 moveDirection: "UP",
339 };
340 // 接口待调
341 moveClml(obj).then(async (res) => {
342 if (res.code == 200) {
343 let res = await this.clmlInitList()
344 if (res == 200) this.$message({
345 message: '上移成功',
346 type: 'success'
347 })
348 } else {
349 this.$message.error(res.message);
350 }
351 })
352 },
353 // 下移
354 /**
355 * @description: 下移
356 * @param {*} index
357 * @param {*} row
358 * @author: renchao
359 */
360 moveDown (index, row) {
361 let obj = {
362 xh: row.xh,
363 bsmSlsq: row.bsmSlsq,
364 moveDirection: "DOWN",
365 }
366 // 接口待调
367 moveClml(obj).then(async (res) => {
368 if (res.code == 200) {
369 let res = await this.clmlInitList()
370 if (res == 200) this.$message({
371 message: '下移成功',
372 type: 'success'
373 })
374 } else {
375 this.$message.error(res.message);
376 }
377 })
378 },
379 // 新增弹窗保存
380 /**
381 * @description: 新增弹窗保存
382 * @param {*} data
383 * @author: renchao
384 */
385 addSave (data) {
386 let obj = {
387 bsmSlsq: this.$parent.bsmSlsq,
388 isrequired: "1",
389 sjmc: data.clmc,
390 sjsl: 0,
391 smzt: '',
392 ys: 0,
393 sjlx: data.cllx,
394 sfxjcl: "1", // 是否必选
395 };
396 saveClml(obj).then(async (res) => {
397 if (res.code == 200) {
398 let res = await this.clmlInitList()
399 if (res == 200) this.$message({
400 message: "新增成功",
401 type: "success",
402 })
403 }
404 });
405 },
406 // 材料目录删除
407 /**
408 * @description: 材料目录删除
409 * @param {*} index
410 * @param {*} row
411 * @author: renchao
412 */
413 handleDelete (index, row) {
414 let that = this
415 this.$confirm('此操作将永久删除该 是否继续?', '提示', {
416 confirmButtonText: '确定',
417 cancelButtonText: '取消',
418 type: 'warning'
419 }).then(() => {
420 deleteSjClml({ sjBsm: row.bsmSj }).then(async (res) => {
421 if (res.code == 200) {
422 let res = await that.clmlInitList()
423 if (res == 200) that.$message({
424 message: "删除成功",
425 type: "success",
426 })
427 }
428 })
429 }).catch(() => {
430 this.$message({
431 type: 'info',
432 message: '已取消删除'
433 })
434 })
435 },
436 // 材料目录点击选中
437 /**
438 * @description: 材料目录点击选中
439 * @param {*} item
440 * @param {*} index
441 * @author: renchao
442 */
443 treeClick (item, index) {
444 this.previewImg.index = 0
445 this.treeCheckId = item?.bsmSj
446 this.treeCheckIndex = index
447 this.previewImg.imgList = item.children ? item.children : []
448 this.previewImg.bsmSj = item?.bsmSj
449 },
450 // 小图片点击
451 /**
452 * @description: 小图片点击
453 * @param {*} item
454 * @param {*} index
455 * @author: renchao
456 */
457 imgClick (item, index) {
458 this.showImg = item;
459 this.titleYs = index + 1;
460 },
461 // 字典
462 /**
463 * @description: 字典
464 * @param {*} val
465 * @param {*} code
466 * @author: renchao
467 */
468 dicStatus (val, code) {
469 let data = this.$store.getters.dictData[code],
470 name = "暂无";
471 if (data) {
472 data.map((item) => {
473 if (item.dcode == val) {
474 name = item.dname;
475 }
476 });
477 return name;
478 }
479 },
480 },
481 };
482 </script>
483 <style scoped lang='scss'>
484 @import "~@/styles/mixin.scss";
485
486 .active {
487 background: $light-blue !important;
488 color: #fff;
489 }
490
491 .required {
492 font-size: 12px;
493 color: $pink;
494 float: left;
495 }
496
497 .cl_number {
498 float: right;
499 }
500
501 .clxx {
502 width: 100%;
503 display: flex;
504 padding-left: 5px;
505 height: calc(100vh - 125px);
506
507 .left {
508 display: flex;
509 flex-direction: column;
510 justify-content: space-between;
511
512 .item {
513 width: 28px;
514 height: 49%;
515 @include flex-center;
516 background-color: #e4e7ed;
517 border-bottom-right-radius: 10px;
518 padding: 5px;
519 cursor: pointer;
520 transition: all 0.3s;
521
522 &:hover {
523 @extend .active;
524 }
525 }
526 }
527
528 .right {
529 width: 100%;
530 height: 100%;
531
532 .clmlmx-box {
533 margin: 0 auto;
534
535 .title {
536 text-align: center;
537 height: 60px;
538 line-height: 60px;
539 border: 1px solid #dfe6ec;
540 font-size: 20px;
541 background: #81d3f81a;
542 margin-bottom: -1px;
543 }
544 }
545
546 .clyl-box {
547 width: 100%;
548 height: 100%;
549 display: flex;
550
551 .menu-tree {
552 width: 20%;
553 min-width: 160px;
554 height: 100%;
555 margin-right: 10px;
556 border-right: 1px dotted #d9d9d9;
557 padding: 0 15px;
558
559 .item {
560 line-height: 30px;
561 padding-top: 5px;
562 border-bottom: 1px solid #e8e8e8;
563 font-size: 16px;
564 text-align: center;
565 color: $light-blue;
566
567 .itemIcon {
568 float: right;
569 line-height: 60px;
570 cursor: pointer;
571 }
572
573 .child {
574 line-height: 32px;
575 border-bottom: 1px solid #e8e8e8;
576 padding-left: 10px;
577 color: #6b6b6b;
578 cursor: pointer;
579 box-sizing: border-box;
580 border-radius: 6px;
581 line-height: 20px;
582 transition: all 0.3s;
583 padding: 8px 0;
584 }
585
586 .child:hover {
587 color: $light-blue;
588 transform: scale(1.1);
589 }
590
591 .checked {
592 border: 1px solid $light-blue;
593 color: $light-blue;
594 }
595 }
596 }
597
598 .clyl-img {
599 width: 75%;
600 height: 100%;
601 background: #f3f4f7;
602 margin: 0 auto;
603 position: relative;
604 }
605 }
606 }
607 }
608 </style>