From e536e2674bb15591e76f714a726bf32e3d47a630 Mon Sep 17 00:00:00 2001 From: lilu Date: Tue, 20 Dec 2022 17:49:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=A4=87=E6=B3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detail/modules/rightContent.vue | 12 +- src/views/main/BookingLedger/list/index.vue | 161 ++++++++++++++++-- .../BookingLedger/list/modules/initData.js | 1 + 3 files changed, 154 insertions(+), 20 deletions(-) diff --git a/src/views/main/BookingLedger/detail/modules/rightContent.vue b/src/views/main/BookingLedger/detail/modules/rightContent.vue index 76fd368..4d44fcf 100644 --- a/src/views/main/BookingLedger/detail/modules/rightContent.vue +++ b/src/views/main/BookingLedger/detail/modules/rightContent.vue @@ -285,7 +285,8 @@ export default { bookingAttachType: [], attachName: '', attachCode: '', - locaService: [] + locaService: [], + editRemarkVal: null } }, created() { @@ -373,12 +374,14 @@ export default { }, handleModelSubmit() { AddRemark({ + id: this.editRemarkVal ? this.editRemarkVal.id : 0, pId: this.id, remark: this.remarkVal }) .then(res => { if (res.success) { this.$message.info('备注提交成功') + this.editRemarkVal = null this.handleModelCancel() this.getRemark() } @@ -389,10 +392,13 @@ export default { }, editRemark (data) { console.log('=== 暂无接口， 需要添加编辑备注 ===') - // 需要新增接口 + this.remarkModelvisible = true + this.remarkVal = data.remark + this.editRemarkVal = data }, handleModelCancel() { this.remarkModelvisible = false + this.editRemarkVal = null }, // 备注 - end @@ -589,6 +595,7 @@ export default { .no-data { text-align: center; line-height: 20px; + display: block; .iconfont { font-size: 40px; line-height: 70px; @@ -899,6 +906,7 @@ export default { color: #999; padding: 20px 0; line-height: 30px; + display: block; .text { display: inline-block; } diff --git a/src/views/main/BookingLedger/list/index.vue b/src/views/main/BookingLedger/list/index.vue index de3c5da..436a868 100644 --- a/src/views/main/BookingLedger/list/index.vue +++ b/src/views/main/BookingLedger/list/index.vue @@ -103,6 +103,7 @@ + @@ -1011,24 +1025,24 @@ export default { transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } /*列表双列背景色 */ -/deep/ .vxe-table--render-default .vxe-body--row.row--stripe { - // background: #f5f9fe; - position: relative; - background: #fff; - z-index: 1; - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - background: @primary-color; - opacity: 0.04; - z-index: -1; - } -} +// /deep/ .vxe-table--render-default .vxe-body--row.row--stripe { +// // background: #f5f9fe; +// position: relative; +// background: #fff; +// z-index: 1; +// &::after { +// content: ''; +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// z-index: 0; +// background: @primary-color; +// opacity: 0.04; +// z-index: -1; +// } +// } /*列表操作按钮颜色 */ /deep/ .operate-btn { color: @primary-color; @@ -1160,6 +1174,12 @@ export default { text-align: center; // background: #f99; } +.reamrk-btns{ + overflow: visible; +} + + + @media (min-width: 1200px) and (max-width:1600px){ .from-label { padding-right: 0 !important; @@ -1180,4 +1200,109 @@ export default { } } } + +/deep/ .book-remark-box { + >.vxe-cell { + overflow: visible !important; + } + /deep/ .vxe-cell { + overflow: visible !important; + } +} + +.bookremark{ + position: relative; + .reamrk-label{ + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: block; + } + .reamrk-list{ + position: absolute; + top:26px; left: 0; + width: 300px; + background: #fff; + box-shadow: 0 0 10px #eee; + border-radius: 4px; + border: 1px solid #eee; + padding:5px 20px 10px 20px; + z-index: 999; + white-space: normal; + text-align: left; + display: none; + z-index: 999 !important; + .title{ + height: 30px; + line-height: 30px; + font-size: 12px; + font-weight: 600; + } + .list{ + border-bottom: 1px solid #eee; + padding: 6px 0; + line-height: 18px; + font-size: 12px; + color: #666; + &:nth-last-of-type(1){ + border: none; + } + .icon{ + margin-right: 4px; + color: @primary-color; + } + } + } + &:hover{ + .reamrk-list{ + display: block; + } + } +} +/deep/ .line-box:nth-last-of-type(-n+5){ + .book-remark-box{ + .bookremark{ + .reamrk-list{ + top: inherit; + bottom: calc(100% + 8px) + } + } + } +} + +// /deep/ .vxe-body--row.row--stripe::nth-of-type(1){ +// .reamrk-list{ +// display: block; +// } +// } + +/deep/.line-box:nth-of-type(2n){ + position: relative; + background: #fff; + >*{ + z-index: 1; + } + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + background: @primary-color; + opacity: 0.04; + z-index: 0; + } + .book-remark-box{ + .bookremark{ + .reamrk-list{ + top: inherit; + bottom: calc(100% + 8px) + } + } + } +} + diff --git a/src/views/main/BookingLedger/list/modules/initData.js b/src/views/main/BookingLedger/list/modules/initData.js index 30d29c7..2b0a5c1 100644 --- a/src/views/main/BookingLedger/list/modules/initData.js +++ b/src/views/main/BookingLedger/list/modules/initData.js @@ -57,6 +57,7 @@ export default { }, { field: 'etd', label: 'ETD', width: 110, title: '开船日期', showHeaderOverflow: true, sortable: true, slots: { default: 'etd' } }, { field: 'voyno', label: 'VOYNO', width: 120, title: '海关航次', showHeaderOverflow: true }, + { field: 'bookremark', label: 'BOOKREMARK', width: 120, title: '备注', className: 'book-remark-box', showOverflow: false, slots: { default: 'bookremark' } }, { field: 'bookingStatus', label: 'BOOKINGSTATUS', width: 120, title: '订舱状态', showHeaderOverflow: true }, { field: 'vgm', label: 'VGM', width: 120, title: 'VGM', showHeaderOverflow: true }, { field: 'billStatus', label: 'BILLSTATUS', width: 120, title: '提单状态', showHeaderOverflow: true },