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

订舱

Browse Source
dev
lilu 2 years ago
parent 2e9257b496
commit 62c8502ec6
2 changed files with 362 additions and 241 deletions
Show Stats Download Patch File Download Diff File

365
src/views/main/BookingLedger/detail/modules/goodsTable.vue
Unescape Escape View File

@ -38,38 +38,30 @@
@ok="handleModelSubmit" @ok="handleModelSubmit"
@cancel="handleModelCancel" @cancel="handleModelCancel"
> >
<div class="content"> <div class="model-content">
<div> <ve-table
<div class="parent-table parent-table-title"> style="width:100%"
<span>箱型</span> :columns="modelColumns"
<span>箱量</span> :table-data="tableData"
<span>箱号</span> :radio-option="radioOption"
<span>封号</span> row-key-field-name="rowKey"
<span>件数</span> />
<span>包装</span> <div class="model-botton-box">
<span>重量</span> <a-button class="btn" type="primary" @click="addChildData">新增</a-button>
<span>尺码</span> <a-button class="btn" @click="removeChildData">删除</a-button>
<span>箱皮重</span> <a-button class="btn" type="primary" @click="saveChildData">保存</a-button>
<span>称重方式</span> </div>
<span>称重重量</span> <div class="model-child-table">
</div> <ve-table
<a-radio-group default-value="a" size="large"> :columns="childColumns"
<a-radio-button value="a" :style="radioStyle" v-for="(pitem,pindex) in tableData" :key="pindex"> :table-data="childTableData"
<div class="parent-table"> borderY
<span>{{ pitem.ctnall }}</span> :cell-autofill-option="cellAutofillOption"
<span>{{ pitem.ctnnum }}</span> :editOption="editChildOption"
<span>{{ pitem.cntrno }}</span> rowKeyFieldName="rowKey"
<span>{{ pitem.sealno }}</span> :rowStyleOption="rowStyleOption"
<span>{{ pitem.pkgs }}</span> :checkbox-option="checkChildboxOption"
<span>{{ pitem.kindpkgs }}</span> />
<span>{{ pitem.kgs }}</span>
<span>{{ pitem.cbm }}</span>
<span>{{ pitem.tareweight }}</span>
<span>{{ pitem.weightype }}</span>
<span>{{ pitem.weighkgs }}</span>
</div>
</a-radio-button>
</a-radio-group>
</div> </div>
</div> </div>
</a-modal> </a-modal>
@ -259,6 +251,153 @@ export default {
edit: true edit: true
}, },
], ],
modelColumns: [
{
field: '',
key: 'radio',
type: 'radio',
title: '',
width: 40,
operationColumn: true,
align: 'center',
},
{
field: 'ctnall',
key: 'ctnall',
title: '箱型',
align: 'left',
width: 80,
},
{
field: 'ctnnum',
key: 'ctnnum ',
title: '箱量',
align: 'left',
},
{
field: 'cntrno',
key: 'cntrno',
title: '箱号',
align: 'left',
},
{
field: 'sealno',
key: 'sealno',
title: '封号',
align: 'left',
},
{
field: 'pkgs',
key: 'pkgs',
title: '件数',
align: 'left',
},
{
field: 'kindpkgs',
key: 'kindpkgs',
title: '包装',
align: 'left',
width: 130
},
{
field: 'weighkgs',
key: 'weighkgs',
title: '毛重',
align: 'left',
},
{
field: 'cbm',
key: 'cbm',
title: '尺码',
align: 'left',
},
],
childColumns: [
{
field: '',
key: 'checkbox',
type: 'checkbox',
title: '',
width: 40,
operationColumn: true,
align: 'center',
},
{
field: 'pkgs',
key: 'pkgs',
title: '件数',
align: 'left',
edit: true,
},
{
field: 'kindpkgs',
key: 'kindpkgs',
title: '包装',
align: 'left',
edit: false,
width: 130,
renderBodyCell: ({ row, column, rowIndex }, h) => {
return (
<a-select
show-search
value={row['kindpkgs']}
placeholder="请输入包装"
option-filter-prop="children"
style="width: 120px"
on-change={(val) => {
const data = this.packageList[val]
row['kindpkgs'] = data.name
this.childTableData[rowIndex].kindpkgs = data.name
this.details.ctnInputs[this.childModelSelectIndex].ctnDetailInputs[rowIndex].kindpkgs = data.name
console.log(this.childTableData[rowIndex])
this.$forceUpdate()
}}
>
{
this.packageList.map((item, index) => {
return (<a-select-option value={index}>{item.name}</a-select-option>)
})
}
</a-select>
)
}
},
{
field: 'weighkgs',
key: 'weighkgs',
title: '毛重',
align: 'left',
edit: true
},
{
field: 'cbm',
key: 'cbm',
title: '尺码',
align: 'left',
edit: true,
},
{
field: 'hscode',
key: 'hscode',
title: 'HS代码',
align: 'left',
edit: true,
},
{
field: 'marks',
key: 'marks',
title: '唛头',
align: 'left',
edit: true,
},
{
field: 'description',
key: 'description',
title: '货描',
align: 'left',
edit: true,
},
],
tableData: [], tableData: [],
editOption: { editOption: {
beforeCellValueChange: ({ row, column, changeValue }) => { beforeCellValueChange: ({ row, column, changeValue }) => {
@ -313,6 +452,69 @@ export default {
console.log('编辑', row, column) console.log('编辑', row, column)
}, },
}, },
editChildOption: {
beforeCellValueChange: ({ row, column, changeValue }) => {
console.log('beforeCellValueChange')
console.log('row::', row)
console.log('column::', column)
console.log('changeValue::', changeValue)
if (['pkgs', 'kgs', 'cbm'].includes(column.field) && !/^\d+$/.test(changeValue)) {
const height = document.body.clientHeight - 100
this.$message.config({
top: `${height}px`,
duration: 2,
maxCount: 3
});
this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
row['cntrno'] = ''
setTimeout(() => {
this.$message.destroy()
}, 2000)
return false
}
},
afterCellValueChange: ({ row, column, changeValue }) => {
console.log('afterCellValueChange')
console.log('row::', row)
console.log('column::', column)
console.log('changeValue::', changeValue)
let num = null
this.childTableData.map((item, index) => {
if (row.rowKey === item.rowKey) {
// eslint-disable-next-line no-const-assign
num = index
}
})
this.childTableData[num][column.field] = changeValue
this.details.ctnInputs[this.childModelSelectIndex].ctnDetailInputs[num][column.field] = changeValue
this.$forceUpdate()
// if (column.field === 'pkgs') {
// let num = 0
// this.tableData.map((item, index) => {
// num += Number(item.pkgs)
// })
// this.totalPkgs = num
// }
// if (column.field === 'kgs') {
// let num = 0
// this.tableData.map((item, index) => {
// num += Number(item.kgs)
// })
// this.totalKgs = num
// }
// if (column.field === 'cbm') {
// let num = 0
// this.tableData.map((item, index) => {
// num += Number(item.cbm)
// })
// this.totalCbm = num
// }
console.log('---')
},
cellValueChange: ({ row, column }) => {
console.log('编辑', row, column)
},
},
// 可控单元格编辑 // 可控单元格编辑
rowStyleOption: { rowStyleOption: {
clickHighlight: false, clickHighlight: false,
@ -336,6 +538,23 @@ export default {
console.log('全选', isSelected, selectedRowKeys) console.log('全选', isSelected, selectedRowKeys)
}, },
}, },
checkChildboxOption: {
hideSelectAll: false,
// 行选择改变事件
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
console.log('行选择', row, isSelected, selectedRowKeys)
this.selectChildArr = selectedRowKeys
},
// 全选改变事件
selectedAllChange: ({ isSelected, selectedRowKeys }) => {
if (isSelected) {
this.selectChildArr = selectedRowKeys
} else {
this.selectChildArr = []
}
console.log('全选', isSelected, selectedRowKeys)
},
},
tableLoaded: false, tableLoaded: false,
ctnList: [], ctnList: [],
packageList: [], packageList: [],
@ -346,14 +565,24 @@ export default {
totalCbm: 0, totalCbm: 0,
moreVisible: false, moreVisible: false,
moreModelconfirm: false, moreModelconfirm: false,
radioStyle: { radioOption: {
display: 'block', // 行选择改变事件
height: '40px', selectedRowChange: ({ row }) => {
lineHeight: '40px', console.log(row);
marginBottom: '10px', this.childModelSelect = row
width: '1200px', this.tableData.map((item, index) => {
padding: '0' if (item.rowKey === row.rowKey) {
this.childModelSelectIndex = index
}
})
this.childTableData = this.tableData[this.childModelSelectIndex].ctnDetailInputs || []
// 写到这里了，有个报错
},
}, },
childTableData: [],
childModelSelect: null,
childModelSelectIndex: null,
selectChildArr: []
} }
}, },
watch: { watch: {
@ -451,7 +680,7 @@ export default {
tareweight: '', tareweight: '',
weightype: '', weightype: '',
weighkgs: '', weighkgs: '',
rowKey: Number(this.tableData[this.tableData.length - 1].rowKey) + 1 rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
} }
this.tableData.push(data) this.tableData.push(data)
}, },
@ -467,10 +696,33 @@ export default {
openDialog() { openDialog() {
this.moreVisible = true this.moreVisible = true
}, },
// 多品名维护保存
handleModelSubmit() { handleModelSubmit() {
}, },
handleModelCancel() { handleModelCancel() {
this.moreVisible = false
},
addChildData() {
if (!this.childModelSelect) {
this.$message.error('请选择数据')
}
const data = {
rowKey: this.childTableData.length > 0 ? Number(this.childTableData[this.childTableData.length - 1].rowKey) + 1 : 0,
pkgs: '',
kindpkgs: '',
weighkgs: '',
cbm: '',
hscode: this.details.hscode,
marks: this.details.marks,
description: this.details.marks
}
this.childTableData.push(data)
},
removeChildData() {
},
saveChildData() {
} }
}, },
@ -498,34 +750,11 @@ export default {
} }
} }
.parent-table{ .model-content{
display: flex; .model-botton-box{
span{ margin: 40px 0;
display: inline-block; .btn{
flex:1; margin-right: 10px;
border-right: 1px solid #eee;
text-align: center;
&:nth-last-child(1){
border: none;
}
}
}
.parent-table-title{
display: block;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
width: 1200px;
display: flex;
background: #f4f4f4;
margin-bottom: 0;
span{
display: inline-block;
flex:1;
border-right: 1px solid #eee;
text-align: center;
&:nth-last-child(1){
border: none;
} }
} }
} }

238
src/views/main/BookingLedger/detail/modules/rightContent.vue
Unescape Escape View File

@ -13,7 +13,7 @@
<a-card :bodyStyle="tstyle" :bordered="false"> <a-card :bodyStyle="tstyle" :bordered="false">
<div class="title"><i class="iconfont icon-fuwu"></i><span>服务项目</span></div> <div class="title"><i class="iconfont icon-fuwu"></i><span>服务项目</span></div>
<div class="content"> <div class="content">
<div class="items" v-for="(serive, sindex) in serviceLabel" :key="sindex">{{ serive.fieldLabel }}</div> <div class="items" v-for="(serive, sindex) in bookingServiceItem" :key="sindex">{{ serive.name }}</div>
</div> </div>
</a-card> </a-card>
<a-card :bodyStyle="tstyle" :bordered="false"> <a-card :bodyStyle="tstyle" :bordered="false">
@ -121,25 +121,24 @@
title="添加附件" title="添加附件"
:width="900" :width="900"
:visible="fileModelvisible" :visible="fileModelvisible"
:confirmLoading="fileModelconfirm" :confirmLoading="uploading"
cancelText="关闭" cancelText="关闭"
okText="保存" okText="保存"
@ok="fileModelSubmit" @ok="handleUpload"
@cancel="fileModelCancel" @cancel="fileModelCancel"
> >
<div class="clearfix"> <div class="clearfix">
<a-upload :file-list="upFileList" :remove="handleRemove" :before-upload="beforeUpload"> <a-upload :file-list="upFileList" :remove="handleRemove" :before-upload="beforeUpload">
<a-button> <a-icon type="upload" /> 选择文件 </a-button> <a-button> <a-icon type="upload" /> 选择文件 </a-button>
</a-upload> </a-upload>
<a-button <div class="uplad-type">
type="primary" <div class="upload-label">附件类型：</div>
:disabled="upFileList.length === 0" <a-select style="width: 120px" @change="handleAttachChange" placeholder="请输入附件类型">
:loading="uploading" <a-select-option v-for="(attach, aindex) in bookingAttachType" :key="aindex" :value="aindex">
style="margin-top: 16px" {{ attach.name }}
@click="handleUpload" </a-select-option>
> </a-select>
{{ uploading ? '上传中' : '确定' }} </div>
</a-button>
</div> </div>
</a-modal> </a-modal>
</div> </div>
@ -147,7 +146,7 @@
<script> <script>
import { GetRemark, AddRemark, GetFile, GetBookingLog, GetLog } from '@/api/modular/main/BookingLedger' import { GetRemark, AddRemark, GetFile, GetBookingLog, GetLog } from '@/api/modular/main/BookingLedger'
import Vue from 'vue' import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types' import { ACCESS_TOKEN, DICT_TYPE_TREE_DATA } from '@/store/mutation-types'
import axios from 'axios' import axios from 'axios'
export default { export default {
@ -164,73 +163,6 @@ export default {
return { return {
id: this.$route.query.id, id: this.$route.query.id,
tstyle: { padding: '0 15px 20px', 'margin-bottom': '10px', background: '#fff' }, tstyle: { padding: '0 15px 20px', 'margin-bottom': '10px', background: '#fff' },
serviceLabel: [
{
xtype: 'checkboxfield',
fieldLabel: '熏蒸',
flex: 1,
labelAlign: 'right',
readOnly: true,
frame: true,
name: 'ISFUMIGATION',
},
{
xtype: 'checkboxfield',
fieldLabel: '仓储',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISSTORAGE',
},
{
xtype: 'checkboxfield',
fieldLabel: '陆运',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISLAND',
},
{
xtype: 'checkboxfield',
fieldLabel: '报关',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISCUSTOMES',
},
{
xtype: 'checkboxfield',
fieldLabel: '报检',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISINSPECTION',
},
{
xtype: 'checkboxfield',
fieldLabel: '订舱',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISBOOKING',
},
{
xtype: 'checkboxfield',
fieldLabel: '使用代理',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISAGENT',
},
{
xtype: 'checkboxfield',
fieldLabel: '分单签单',
flex: 1,
labelAlign: 'right',
readOnly: true,
name: 'ISHBLNO',
},
],
remarkModelvisible: false, remarkModelvisible: false,
bookingModelconfirm: false, bookingModelconfirm: false,
remarkVal: '', remarkVal: '',
@ -245,7 +177,11 @@ export default {
file: {}, file: {},
upFileList: [], upFileList: [],
uploading: false, uploading: false,
realTimePercent: null realTimePercent: null,
bookingServiceItem: [],
bookingAttachType: [],
attachName: '',
attachCode: '',
} }
}, },
created() { created() {
@ -253,8 +189,20 @@ export default {
this.getFile() this.getFile()
this.getBookingLog() this.getBookingLog()
this.getLog() this.getLog()
this.getLocal()
}, },
methods: { methods: {
getLocal() {
const dictTypeTree = Vue.ls.get(DICT_TYPE_TREE_DATA)
dictTypeTree.map((item, index) => {
if (item.code === 'booking_service_item') {
this.bookingServiceItem = item.children
}
if (item.code === 'booking_attach_type') {
this.bookingAttachType = item.children
}
})
},
// 备注 - start // 备注 - start
getRemark() { getRemark() {
GetRemark({ GetRemark({
@ -322,6 +270,9 @@ export default {
this.handleUpload() this.handleUpload()
}, },
fileModelCancel() { fileModelCancel() {
this.upFileList = []
this.attachCode = ''
this.attachName = ''
this.fileModelvisible = false this.fileModelvisible = false
}, },
handleRemove(file) { handleRemove(file) {
@ -334,20 +285,21 @@ export default {
this.upFileList = [...this.upFileList, file]; this.upFileList = [...this.upFileList, file];
return false; return false;
}, },
binary2base64(bi) {
let str = '';
for (let i = 0, len = bi.length; i < len; i++) {
str += String.fromCharCode(bi[i]);
}
return btoa(str);
},
handleUpload() { handleUpload() {
const { upFileList } = this; const { upFileList, attachCode, attachName } = this;
if (!upFileList) {
this.$message.error('请上传文件')
return false
}
if (!attachCode || !attachName) {
this.$message.error('请选择附件类型')
return false
}
const formData = new FormData(); const formData = new FormData();
formData.append('file', upFileList[0]) formData.append('file', upFileList[0])
formData.append('BookingId', this.id) formData.append('BookingId', this.id)
formData.append('TypeCode', '') formData.append('TypeCode', attachCode)
formData.append('TypeName', '') formData.append('TypeName', attachName)
console.log('formData', formData, formData.get('file')) console.log('formData', formData, formData.get('file'))
this.uploading = true; this.uploading = true;
const token = Vue.ls.get(ACCESS_TOKEN) const token = Vue.ls.get(ACCESS_TOKEN)
@ -360,91 +312,17 @@ export default {
}, },
data: formData data: formData
}).then((res) => { }).then((res) => {
console.log(res.data) this.uploading = false;
if (res.data.success) {
this.$message.success('上传成功')
this.getFile()
} else {
this.$message.error(res.data.message)
}
this.fileModelCancel()
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })
// 默认接口上传
// AddFile({
// file: formData,
// BookingId: this.id,
// TypeCode: '',
// TypeName: ''
// })
// .then((res) => {
// if (res.success) {
// this.fileList = res.data
// }
// })
// .catch((err) => {
// console.log(err)
// })
// 普通上传
// const xml = new XMLHttpRequest();
// const token = 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
// const url = process.env.VUE_APP_API_BASE_URL + '/BookingOrder/addFile'
// debugger
// xml.open('POST', url, true) // 第三个值指定接口是否异步
// // 设置请求头信息
// xml.setRequestHeader('Authorization', token);
// // 监控上传进度
// xml.upload.onprogress = this.onprogressEvent
// // 接口调用成功回调
// xml.onload = this.onloadEvent
// // 接口调用失败处理
// xml.onerror = this.onerrorEvent
// xml.send({
// file: formData,
// BookingId: this.id,
// TypeCode: '',
// TypeName: ''
// })
// 二进制上传
// const _this = this;
// const reader = new FileReader();
// reader.readAsArrayBuffer(upFileList[0]);
// reader.onload = function () {
// const file = this.result;
// const view = new Uint8Array(file);
// const str = _this.binary2base64(view);
// console.log('读取', str);
// AddFile({
// file: str,
// BookingId: _this.id,
// TypeCode: '',
// TypeName: ''
// })
// .then((res) => {
// debugger
// if (res.success) {
// _this.upFileList = [];
// _this.uploading = false;
// _this.$message.success('upload successfully.');
// }
// })
// .catch((err) => {
// console.log(err)
// })
// }
},
onprogressEvent(e) {
if (e.lengthComputable) {
// 可以获取到实时的接口进度
this.realTimePercent = +parseInt((e.loaded / e.total) * 100);
console.log('可以获取到实时的接口进度', this.realTimePercent)
}
},
onloadEvent(e) {
// 获取到接口调用成功后的返回数据
const res = JSON.parse(e.currentTarget.response);
console.log('获取到接口调用成功后的返回数据', res)
this.uploading = false
},
onerrorEvent(e) {
// 接口调用失败后的处理
console.log('接口调用失败后的处理', e)
this.uploading = false
}, },
// 附件 - end // 附件 - end
@ -476,6 +354,10 @@ export default {
console.log(err) console.log(err)
}) })
}, },
handleAttachChange(index) {
this.attachCode = this.bookingAttachType[index].code
this.attachName = this.bookingAttachType[index].name
}
}, },
} }
</script> </script>
@ -747,4 +629,14 @@ export default {
} }
} }
} }
.uplad-type{
display: flex;
margin-top: 20px;
.upload-label{
height: 30px;
line-height: 30px;
font-size: 14px;
color: #666;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save