whm
/
BookingHeChuanFront
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1/4

Browse Source
dev
张同海 2 years ago
parent 3f0cd206f1
commit 848445649b
1 changed files with 109 additions and 100 deletions
Show Stats Download Patch File Download Diff File

209
src/views/main/BookingLedger/list/index.vue
Unescape Escape View File

@ -22,7 +22,8 @@
:xl="4"
:key="findex"
v-if="(findex < 4 && !advanced) || advanced"
class="from-label">
class="from-label"
>
<a-form-item :label="formLabel.title" v-if="ResetType">
<formLabel
:ref="`fromlabel-${formLabel.label}`"
@ -85,7 +86,7 @@
<div class="nav"><i class="iconfont icon-shujushangchuan-shixin"></i>批量VGM</div>
<div class="nav"><i class="iconfont icon-shishijifei"></i>定时订舱</div>
<div class="nav"><i class="iconfont icon-xiaopiaodayin"></i>小票状态</div>
<div class="nav" @click="openTraceModel"> <i class="iconfont icon-yunshu1"></i>运踪订阅</div>
<div class="nav" @click="openTraceModel"><i class="iconfont icon-yunshu1"></i>运踪订阅</div>
</div>
</template>
<template #tools>
@ -130,14 +131,14 @@
<span class="book-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex"> {{ enmuBookingBtn(btn.staCode) }}<i>/</i></span>
</template> -->
<template #bookstatus="{ row, column }">
<div class="billtrace-box" :class=" column.resizeWidth > 240 ? 'normal-box' : 'flex-box'">
<div class="billtrace-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex">
<div class="billtrace-box" :class="column.resizeWidth > 240 ? 'normal-box' : 'flex-box'">
<div class="billtrace-btn" v-for="(btn, bindex) in row.bookstatus" :class="btn.staCode" :key="bindex">
<a-popover placement="topLeft" v-if="btn.staTime">
<div slot="content">{{ btn.staTime }}</div>
<span :class="{'active': btn.isChecked}">{{ enmuBookingBtn(btn.staCode) }}</span>
<span :class="{ active: btn.isChecked }">{{ enmuBookingBtn(btn.staCode) }}</span>
</a-popover>
<span :class="{'active': btn.isChecked}" v-else>{{ enmuBookingBtn(btn.staCode) }}</span>
<i class="iconfont icon-xiaoyoujiantou" :class="{'hide': bindex===row.bookstatus.length-1}"></i>
<span :class="{ active: btn.isChecked }" v-else>{{ enmuBookingBtn(btn.staCode) }}</span>
<i class="iconfont icon-xiaoyoujiantou" :class="{ hide: bindex === row.bookstatus.length - 1 }"></i>
</div>
</div>
</template>
@ -192,7 +193,14 @@
</a-radio-group>
</a-modal>
<a-modal title="多提单号查询" :maskClosable="false" :width="400" :visible="moreNumVisible" @ok="moreNumSubmit" @cancel="moreNumCancel">
<a-modal
title="多提单号查询"
:maskClosable="false"
:width="400"
:visible="moreNumVisible"
@ok="moreNumSubmit"
@cancel="moreNumCancel"
>
<div>
<a-textarea v-model="moreNumVal" style="height: 200px" />
</div>
@ -216,9 +224,11 @@
v-if="formMoreTableData"
></setFormModel>
<div class="hovers-list" :style="{ top:`${remarkScreenY}px`, left: `${remarkScreenX}px` }" v-if="remarkShow">
<div class="hovers-list" :style="{ top: `${remarkScreenY}px`, left: `${remarkScreenX}px` }" v-if="remarkShow">
<div class="title">备注内容：</div>
<div class="list" v-for="(remarkItem, rindex) in remarkData" :key="rindex"> <i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }}</div>
<div class="list" v-for="(remarkItem, rindex) in remarkData" :key="rindex">
<i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }}
</div>
</div>
<!-- 运踪弹窗 start -->
<a-modal width="50vw" :maskClosable="false" v-model="traceModalVisible" title="运踪订阅">
@ -359,7 +369,7 @@ export default {
this.getFormData()
this.getTableList()
},
mounted () {
mounted() {
window.onresize = () => {
this.screenWidth = document.body.clientWidth
}
@ -634,7 +644,7 @@ export default {
PageSize: pageSize
},
...{
SortOrder: this.tableOrderLabel,
SortOrder: this.tableOrderLabel
}
}
Object.keys(query).map((item, index) => {
@ -660,7 +670,7 @@ export default {
{ staCode: 'sta_zhuangzai', isChecked: false },
{ staCode: 'sta_mafang', isChecked: false },
{ staCode: 'sta_zhuangchuan', isChecked: false },
{ staCode: 'sta_atd', isChecked: false },
{ staCode: 'sta_atd', isChecked: false }
]
if (item.bookstatus.length > 0) {
bookstatus.map((book, bindex) => {
@ -767,13 +777,13 @@ export default {
moreNumCancel() {
this.moreNumVisible = false
},
tableSortChange (e) {
tableSortChange(e) {
const { property, order } = e
this.tableOrderLabel = property || ''
this.tableOrderType = order || ''
this.getList(this.formRes)
},
enmuBookingBtn (val) {
enmuBookingBtn(val) {
switch (val) {
case 'sta_cangdan':
return '舱单'
@ -799,10 +809,10 @@ export default {
return '--'
}
},
pressEnterFun () {
pressEnterFun() {
this.tableRefresh()
},
remarkhover (e, data) {
remarkhover(e, data) {
if (data.bookremark.length > 0) {
const maxWidth = window.innerWidth
if (maxWidth - e.pageX > 230) {
@ -815,11 +825,11 @@ export default {
this.remarkShow = true
}
},
remarkLeave (e, data) {
remarkLeave(e, data) {
this.remarkShow = false
this.remarkData = null
},
openTraceModel () {
openTraceModel() {
const select = this.$refs.xGrid.getCheckboxRecords()
if (select.length === 0) {
this.$message.error('请选择操作订单')
@ -827,10 +837,10 @@ export default {
}
this.traceModalVisible = !this.traceModalVisible
},
onTraceChange (values) {
onTraceChange(values) {
console.log(this.traceValue)
},
traceSend () {
traceSend() {
if (!this.traceValue) {
this.$message.error('请选择订阅内容')
return false
@ -880,7 +890,7 @@ export default {
this.traceValue = []
}
})
.catch((err) => {
.catch(err => {
console.log(err)
})
}
@ -902,7 +912,7 @@ export default {
}
}
/*列表表头 */
.vxe-header--row{
.vxe-header--row {
position: relative;
background: #fff !important;
.vxe-cell--sort {
@ -1190,163 +1200,161 @@ export default {
color: @primary-color !important;
opacity: 0.7;
}
.book-btn{
.book-btn {
display: inline-block;
padding: 0 10px;
height: 24px;
margin-right: 8px;
border: 1px solid #eee;
color:#999;
color: #999;
font-size: 12px;
line-height: 24px;
i{
i {
display: none;
}
&.sta_so{
color: #8BC34A;
border: 1px solid #8BC34A;
&.sta_so {
color: #8bc34a;
border: 1px solid #8bc34a;
}
&.sta_bc{
color: #FBC02D;
border: 1px solid #FBC02D;
&.sta_bc {
color: #fbc02d;
border: 1px solid #fbc02d;
}
&.sta_letter_yard{
color: #00BCD4;
border: 1px solid #00BCD4;
&.sta_letter_yard {
color: #00bcd4;
border: 1px solid #00bcd4;
}
&.sta_xhz{
color: #E64A19;
border: 1px solid #E64A19;
&.sta_xhz {
color: #e64a19;
border: 1px solid #e64a19;
}
}
.billtrace-box{
width:100%;
.billtrace-box {
width: 100%;
// display: flex;
// height: 48px;
// flex-wrap:wrap;
// padding:3px 0;
// text-align: center;
.billtrace-btn{
.billtrace-btn {
display: inline-block;
font-size:12px;
font-size: 12px;
height: 16px;
// width:30%;
// display: flex;
span{
span {
// flex: 1;
text-align: right;
color: #999;
}
i{
i {
font-size: 12px;
color: #ccc;
// flex: 1;
text-align: center;
&.hide{
&.hide {
opacity: 0;
}
}
.active{
.active {
cursor: pointer;
color: @primary-color;
}
}
}
.normal-box{
.billtrace-btn{
.normal-box {
.billtrace-btn {
display: inline-block;
}
}
.flex-box{
.flex-box {
display: flex;
height: 48px;
flex-wrap:wrap;
padding:3px 0;
flex-wrap: wrap;
padding: 3px 0;
text-align: center;
justify-content:center;
.billtrace-btn{
font-size:12px;
justify-content: center;
.billtrace-btn {
font-size: 12px;
height: 16px;
width:30%;
width: 30%;
display: flex;
span{
span {
flex: 1;
text-align: right;
color: #999;
}
i{
i {
font-size: 12px;
color: #ccc;
flex: 1;
text-align: center;
&.hide{
&.hide {
opacity: 0;
}
}
.active{
.active {
cursor: pointer;
color: @primary-color;
}
&:nth-of-type(3){
i{
&:nth-of-type(3) {
i {
opacity: 0;
}
}
}
}
/deep/ .ant-form-item{
/deep/ .ant-form-item {
margin-bottom: 10px !important;
}
/deep/ .table-page-search-submitButtons{
/deep/ .table-page-search-submitButtons {
margin-bottom: 10px !important;
}
/deep/ .ant-input{
/deep/ .ant-input {
height: 28px;
margin-top: 4px;
// transform: scaleY(.8);
}
/deep/ .ant-card-body{
/deep/ .ant-card-body {
padding-top: 10px;
}
/deep/ .ant-calendar-picker-input{
/deep/ .ant-calendar-picker-input {
padding: 0 4px;
}
/deep/ .ant-calendar-range-picker-input{
/deep/ .ant-calendar-range-picker-input {
height: 28px;
font-size: 12px;
vertical-align: top;
text-align: center;
// background: #f99;
}
.reamrk-btns{
.reamrk-btns {
overflow: visible;
}
@media (min-width: 1200px) and (max-width:1600px){
@media (min-width: 1200px) and (max-width: 1600px) {
.from-label {
padding-right: 0 !important;
}
}
@media (min-width: 1200px) and (max-width:1438px){
@media (min-width: 1200px) and (max-width: 1438px) {
.table-page-search-submitButtons {
.ant-btn{
.ant-btn {
margin-left: 4px;
margin-right: 4px;
}
}
.table-page-search-submitButtons .senior-search{
.table-page-search-submitButtons .senior-search {
margin-left: 20px;
&::before{
left:-7px;
&::before {
left: -7px;
}
}
}
/deep/ .book-remark-box {
>.vxe-cell {
> .vxe-cell {
overflow: visible !important;
}
/deep/ .vxe-cell {
@ -1354,9 +1362,9 @@ export default {
}
}
.bookremark{
.bookremark {
position: relative;
.reamrk-label{
.reamrk-label {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
@ -1365,21 +1373,21 @@ export default {
cursor: pointer;
}
}
/deep/ .line-box:nth-last-of-type(-n+5){
.book-remark-box{
.bookremark{
.reamrk-list{
/deep/ .line-box:nth-last-of-type(-n + 5) {
.book-remark-box {
.bookremark {
.reamrk-list {
top: inherit;
bottom: calc(100% + 8px)
bottom: calc(100% + 8px);
}
}
}
}
/deep/.line-box:nth-of-type(2n){
/deep/.line-box:nth-of-type(2n) {
position: relative;
background: #fff;
>*{
> * {
z-index: 1;
}
&::after {
@ -1393,47 +1401,48 @@ export default {
background: @primary-color;
opacity: 0.04;
}
.book-remark-box{
.bookremark{
.reamrk-list{
.book-remark-box {
.bookremark {
.reamrk-list {
top: inherit;
bottom: calc(100% + 8px)
bottom: calc(100% + 8px);
}
}
}
}
.hovers-list{
.hovers-list {
max-height: 400px;
position: fixed;
top:0; left: 0;
z-index:999;
top: 0;
left: 0;
z-index: 999;
width: 300px;
background: #fff;
box-shadow: 0 0 10px #eee;
border-radius: 4px;
border: 1px solid #eee;
padding:5px 20px 10px 20px;
padding: 5px 20px 10px 20px;
white-space: normal;
text-align: left;
z-index: 999 !important;
.title{
.title {
height: 30px;
line-height: 30px;
font-size: 12px;
font-weight: 600;
}
.list{
.list {
border-bottom: 1px solid #eee;
padding: 6px 0;
line-height: 18px;
font-size: 12px;
color: #666;
word-break:break-all;
&:nth-last-of-type(1){
word-break: break-all;
&:nth-last-of-type(1) {
border: none;
}
.icon{
.icon {
margin-right: 4px;
color: @primary-color;
}
@ -1441,7 +1450,7 @@ export default {
}
@media (min-width: 1192px) and (max-width: 1591px) {
.booking-from-box{
.booking-from-box {
padding-right: 24px;
}
}

Write Preview
Loading…
Cancel
Save