台账，详情
parent
d33de5398c
commit
b749a8713f
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
详情
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { BookingOrderPage } from '@/api/modular/main/BookingLedger'
|
||||
export default {
|
||||
name: 'BookingLedger',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <a-page-header
|
||||
style="margin: -24px -24px 24px"
|
||||
title="订舱台账"
|
||||
:backIcon="false"
|
||||
:ghost="false"
|
||||
@back="() => null"
|
||||
/> -->
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="24" :sm="24" style="padding: 0 0 0 0">
|
||||
<div class="nav-box">
|
||||
<div class="nav" @click="addBooking"><i class="iconfont icon-jiahao2fill"></i>新建</div>
|
||||
<div class="nav"><i class="iconfont icon-fuzhi"></i>复制</div>
|
||||
<div class="nav"><i class="iconfont icon-fuzhi1"></i>复制多票</div>
|
||||
<div class="nav"><i class="iconfont icon-bianjiwenjian"></i>批量编辑</div>
|
||||
<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>
|
||||
<a-card :bordered="false" :bodyStyle="tstyle">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" :form="form">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="提单号">
|
||||
<a-input
|
||||
placeholder="请输入提单号"
|
||||
v-decorator="['MBLNO', { rules: [{ required: false, message: '请输入提单号' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="ETD">
|
||||
<a-range-picker
|
||||
format="YYYY-MM-DD"
|
||||
:placeholder="['开始时间', '结束时间']"
|
||||
v-decorator="['ETD', { rules: [{ required: false }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24" v-if="advanced">
|
||||
<a-form-item label="航名">
|
||||
<a-input
|
||||
placeholder="请输入航名"
|
||||
v-decorator="['VESSEL', { rules: [{ required: false, message: '请输入航名' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<template v-if="advanced">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="航次">
|
||||
<a-input
|
||||
placeholder="请输入航次"
|
||||
v-decorator="['VOYNO', { rules: [{ required: false, message: '请输入航次' }] }]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="截单状态">
|
||||
<a-select
|
||||
style="width: 160px"
|
||||
placeholder="请选择截单状态"
|
||||
v-decorator="['CLOSEDOC', { rules: [{ required: false, message: '请选择截单状态!' }] }]"
|
||||
>
|
||||
<a-select-option value="1"> 全部 </a-select-option>
|
||||
<a-select-option value="0"> 已截单 </a-select-option>
|
||||
<a-select-option value="0"> 未截单 </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订舱状态">
|
||||
<a-select
|
||||
style="width: 160px"
|
||||
placeholder="请选择订舱状态"
|
||||
v-decorator="['FORWARDER', { rules: [{ required: false, message: '请选择订舱状态!' }] }]"
|
||||
>
|
||||
<a-select-option value="1"> 未订舱 </a-select-option>
|
||||
<a-select-option value="0"> 已订舱无BC </a-select-option>
|
||||
<a-select-option value="0"> 有BC未放舱 </a-select-option>
|
||||
<a-select-option value="0"> 已放舱 </a-select-option>
|
||||
<a-select-option value="0"> 无下货纸 </a-select-option>
|
||||
<a-select-option value="0"> 有下货纸 </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="VGM状态">
|
||||
<a-select
|
||||
style="width: 160px"
|
||||
placeholder="请选择VGM状态"
|
||||
v-decorator="['isDebugOutput', { rules: [{ required: false, message: '请选择VGM状态!' }] }]"
|
||||
>
|
||||
<a-select-option value="1"> 未提交 </a-select-option>
|
||||
<a-select-option value="0"> 提交成功 </a-select-option>
|
||||
<a-select-option value="0"> 成功 </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item>
|
||||
<a-checkbox v-decorator="['isDebugOutput']"> 包含退舱 </a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</template>
|
||||
<a-col :md="(!advanced && 12) || 24" :sm="24">
|
||||
<span
|
||||
class="table-page-search-submitButtons"
|
||||
:style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
|
||||
>
|
||||
<a-button type="primary" @click="tableRefresh">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="tableReset">重置</a-button>
|
||||
<a-button style="margin-left: 8px" @click="tableMoreRefresh">多提单号查询</a-button>
|
||||
<a @click="toggleAdvanced" style="margin-left: 8px">
|
||||
{{ advanced ? '收起' : '展开' }}
|
||||
<a-icon :type="advanced ? 'up' : 'down'" />
|
||||
</a>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card :bordered="false" :bodyStyle="tstyle">
|
||||
<div class="table-page-search-wrapper">
|
||||
<vxe-grid ref="xGrid" v-bind="gridOptions" @page-change="handlePageChange">
|
||||
<template #operate="{ row }">
|
||||
<vxe-button type="text" icon="vxe-icon-edit" @click="editColumns(row)"></vxe-button>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-modal
|
||||
title="新增船公司"
|
||||
:width="200"
|
||||
:visible="addVisible"
|
||||
:confirmLoading="confirmLoading"
|
||||
>
|
||||
<a-radio-group v-model="carrierRadio" @change="onChange">
|
||||
<a-radio :style="radioStyle" :value="1">
|
||||
CMA
|
||||
</a-radio>
|
||||
<a-radio :style="radioStyle" :value="2">
|
||||
ONE
|
||||
</a-radio>
|
||||
<a-radio :style="radioStyle" :value="3">
|
||||
ESL
|
||||
</a-radio>
|
||||
<a-radio :style="radioStyle" :value="4">
|
||||
MAC
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { BookingOrderPage } from '@/api/modular/main/BookingLedger'
|
||||
import initData from './modules/initData'
|
||||
export default {
|
||||
name: 'BookingLedger',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
|
||||
// 高级搜索 展开/关闭
|
||||
advanced: false,
|
||||
// 查询参数
|
||||
form: this.$form.createForm(this),
|
||||
// 表格
|
||||
setVisible: false,
|
||||
showColumns: null,
|
||||
gridOptions: {
|
||||
border: true,
|
||||
resizable: true,
|
||||
showOverflow: true,
|
||||
// height: 530,
|
||||
loading: true,
|
||||
stripe: true,
|
||||
round: true,
|
||||
autoResize: true,
|
||||
columnConfig: { resizable: true },
|
||||
importConfig: {},
|
||||
exportConfig: {},
|
||||
pagerConfig: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100, 200, 500]
|
||||
},
|
||||
columns: JSON.parse(JSON.stringify(initData.columns)),
|
||||
data: [],
|
||||
treeConfig: {
|
||||
transform: true,
|
||||
rowField: 'id',
|
||||
parentField: 'parentId'
|
||||
}
|
||||
},
|
||||
addVisible: false,
|
||||
carrierRadio: 1,
|
||||
radioStyle: {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.showColumns = JSON.parse(JSON.stringify(initData.columns))
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
init (queryParam = {}) {
|
||||
this.gridOptions.pagerConfig = {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100, 200, 500]
|
||||
}
|
||||
this.gridOptions.data = []
|
||||
this.getList(queryParam)
|
||||
},
|
||||
|
||||
handlePageChange ({ currentPage, pageSize }) {
|
||||
console.log(currentPage, pageSize)
|
||||
this.gridOptions.pagerConfig.currentPage = currentPage
|
||||
this.gridOptions.pagerConfig.pageSize = pageSize
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// from
|
||||
toggleAdvanced() {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
tableRefresh() {
|
||||
const {
|
||||
form: { validateFields }
|
||||
} = this
|
||||
validateFields((err, values) => {
|
||||
if (!err) {
|
||||
if (values.genDate) {
|
||||
const time = values.genDate.map((item, index) => {
|
||||
const str = this.dateFtt('YYYY-MM-DD', item._d)
|
||||
return str
|
||||
})
|
||||
console.log(time)
|
||||
values.genDate = time
|
||||
}
|
||||
if (values.upDate) {
|
||||
const _time = values.upDate.map((item, index) => {
|
||||
const str = this.dateFtt('YYYY-MM-DD', item._d)
|
||||
return str
|
||||
})
|
||||
console.log(_time)
|
||||
values.upDate = _time
|
||||
}
|
||||
if (values.entryDate) {
|
||||
const _time = values.entryDate.map((item, index) => {
|
||||
const str = this.dateFtt('YYYY-MM-DD', item._d)
|
||||
return str
|
||||
})
|
||||
console.log(_time)
|
||||
values.entryDate = _time
|
||||
}
|
||||
if (values.publishDate) {
|
||||
const _time = values.publishDate.map((item, index) => {
|
||||
const str = this.dateFtt('YYYY-MM-DD', item._d)
|
||||
return str
|
||||
})
|
||||
console.log(_time)
|
||||
values.publishDate = _time
|
||||
}
|
||||
console.log('== 获取到的values == ', values)
|
||||
this.init(values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
tableMoreRefresh () {
|
||||
|
||||
},
|
||||
|
||||
dateFtt(fmt, date) {
|
||||
const o = {
|
||||
'Y+': date.getFullYear(),
|
||||
'M+': date.getMonth() + 1,
|
||||
'D+': date.getDate(),
|
||||
'h+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds(),
|
||||
}
|
||||
for (const k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt)) {
|
||||
const str = o[k] + ''
|
||||
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padZero(str))
|
||||
}
|
||||
}
|
||||
return fmt
|
||||
},
|
||||
|
||||
padZero(num) {
|
||||
return new RegExp(/^\d$/g).test(num) ? `0${num}` : num
|
||||
},
|
||||
|
||||
tableReset() {
|
||||
this.form.resetFields()
|
||||
// this.init()
|
||||
},
|
||||
|
||||
// table
|
||||
getList (queryParam = {}) {
|
||||
const { currentPage, pageSize } = this.gridOptions.pagerConfig
|
||||
BookingOrderPage({
|
||||
PageNo: currentPage,
|
||||
PageSize: pageSize,
|
||||
sort: '',
|
||||
order: '', // asc - desc
|
||||
MBLNO: '',
|
||||
ETD_START: '',
|
||||
ETD_END: '',
|
||||
PORTDISCHARGE: '',
|
||||
VESSEL: '',
|
||||
VOYNO: '',
|
||||
SISTATUS: '',
|
||||
BusinessStatus: '',
|
||||
VgmStatus: '',
|
||||
UnBook: false
|
||||
}).then(res => {
|
||||
const _data = res.data.rows.map((item, index) => {
|
||||
item.id = (currentPage - 1) * pageSize + index
|
||||
return item
|
||||
})
|
||||
this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalPage)
|
||||
this.$set(this.gridOptions, 'data', JSON.parse(JSON.stringify(_data)))
|
||||
this.$set(this.gridOptions, 'loading', false)
|
||||
debugger
|
||||
this.$forceUpdate()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
|
||||
addBooking () {
|
||||
// this.addVisible = true
|
||||
this.$router.push({ name: 'BookingDetail' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.nav-box {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.nav {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
padding: 0 10px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
.iconfont {
|
||||
color: #2095f2;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
.iconfont {
|
||||
color: #404dbd;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
.iconfont {
|
||||
color: #ff9702;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
.iconfont {
|
||||
color: #f9cf23;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(5) {
|
||||
.iconfont {
|
||||
color: #ff1062;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(6) {
|
||||
.iconfont {
|
||||
color: #1ebeca;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(7) {
|
||||
.iconfont {
|
||||
color: #82c93d;
|
||||
}
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.table-page-search-submitButtons {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
columns: [
|
||||
{ type: 'checkbox', width: 60, noDraggable: true },
|
||||
{ field: 'YARD', title: '场站', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'MBLNO', title: '提单号', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'nameVoyage', title: '船名航次', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'ETD', title: '开船日期', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'wharf', title: '海关码头', showHeaderOverflow: true },
|
||||
{ field: 'bookingStatus', title: '定舱状态', showHeaderOverflow: true },
|
||||
{ field: 'VGM', title: 'VGM', showHeaderOverflow: true },
|
||||
{ field: 'billStatus', title: '提单状态', showHeaderOverflow: true },
|
||||
{ field: 'PORTDISCHARGE', title: '卸货港', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'createdBy', title: '创建人', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'createdTime', title: '创建时间', showHeaderOverflow: true, sortable: true },
|
||||
{ field: 'boxType', title: '箱型箱量', showHeaderOverflow: true, sortable: true },
|
||||
{ title: '操作', width: 80, noDraggable: true, slots: { default: 'operate' }, fixed: 'right' }
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue