|
|
|
|
@ -6,26 +6,153 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="ds-sea-container-info">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<h4>集装箱信息</h4>
|
|
|
|
|
<a-button type="link" @click="addRow">
|
|
|
|
|
<span class="iconfont icon-icon_tianjia"></span>
|
|
|
|
|
添加
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-popconfirm
|
|
|
|
|
:visible="deleteFlag"
|
|
|
|
|
title="确定要删除勾选的数据?"
|
|
|
|
|
ok-text="确定"
|
|
|
|
|
cancel-text="取消"
|
|
|
|
|
@confirm="deleteRow"
|
|
|
|
|
@cancel="cancelDelete"
|
|
|
|
|
@click="checkDelete"
|
|
|
|
|
>
|
|
|
|
|
<a-button danger type="link" >
|
|
|
|
|
<span class="iconfont icon-shanchu1"></span>
|
|
|
|
|
删除
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
<a-button type="link">
|
|
|
|
|
<span class="iconfont icon-refresh-1-copy"></span>
|
|
|
|
|
更新合计
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="link">
|
|
|
|
|
<span class="iconfont icon-a-17Btuichu"></span>
|
|
|
|
|
调入主单信息
|
|
|
|
|
</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<hot-table ref="hotTb" :data="list" :settings="settings"></hot-table>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, reactive, defineProps } from 'vue'
|
|
|
|
|
import { GetSeaExportBillManageList } from '../../api/BookingLedger'
|
|
|
|
|
import { ref, nextTick, defineProps, defineComponent, onMounted } from 'vue'
|
|
|
|
|
import { HotTable } from '@handsontable/vue3'
|
|
|
|
|
import { registerAllModules } from 'handsontable/registry'
|
|
|
|
|
import 'handsontable/dist/handsontable.full.min.css'
|
|
|
|
|
import { GetCtnSelectList, GetPackageSelectList } from '/@/api/common'
|
|
|
|
|
// 引入提示信息
|
|
|
|
|
import { useMessage } from '/@/hooks/web/useMessage'
|
|
|
|
|
const { createMessage } = useMessage()
|
|
|
|
|
defineComponent({
|
|
|
|
|
HotTable,
|
|
|
|
|
})
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
id: {
|
|
|
|
|
type: String
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// 表格ref
|
|
|
|
|
const hotTb = ref(null)
|
|
|
|
|
// 存箱型数据
|
|
|
|
|
let ctnList = []
|
|
|
|
|
// 存包装数据
|
|
|
|
|
let packageList = []
|
|
|
|
|
// 表格列数据
|
|
|
|
|
const columns = [
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
data: 'selected',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
title: ' ',
|
|
|
|
|
width: 32,
|
|
|
|
|
className: 'htCenter',
|
|
|
|
|
readOnly: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '箱型',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'ctn',
|
|
|
|
|
type: 'dropdown',
|
|
|
|
|
source: async (query, process) => {
|
|
|
|
|
const results = await GetCtnSelectList()
|
|
|
|
|
ctnList = results.data
|
|
|
|
|
const dict = results.data.map((item) => {
|
|
|
|
|
return item.ctnName
|
|
|
|
|
})
|
|
|
|
|
process(dict)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '箱量',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'ctnNum',
|
|
|
|
|
type: 'numeric',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '箱号',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'cntrNo',
|
|
|
|
|
type: 'numeric',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '封号',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'sealNo',
|
|
|
|
|
type: 'numeric',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '件数',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'pkgs',
|
|
|
|
|
type: 'numeric',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '件数包装',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'kindPkgsName',
|
|
|
|
|
type: 'dropdown',
|
|
|
|
|
source: async (query, process) => {
|
|
|
|
|
const results = await GetPackageSelectList()
|
|
|
|
|
packageList = results.data
|
|
|
|
|
const dict = results.data.map((item) => {
|
|
|
|
|
return item.packageName
|
|
|
|
|
})
|
|
|
|
|
process(dict)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '重量',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'kgs',
|
|
|
|
|
type: 'numeric'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '尺码',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'cbm',
|
|
|
|
|
type: 'numeric'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '箱皮重',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'tareWeight',
|
|
|
|
|
type: 'numeric'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '备注',
|
|
|
|
|
width: 80,
|
|
|
|
|
data: 'note',
|
|
|
|
|
type: 'numeric'
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
// 表格绑定数据
|
|
|
|
|
const list = ref([])
|
|
|
|
|
// 表格配置项
|
|
|
|
|
const settings = {
|
|
|
|
|
height: '600',
|
|
|
|
|
width: '100%',
|
|
|
|
|
autoWrapRow: true,
|
|
|
|
|
autoWrapCol: true,
|
|
|
|
|
@ -50,156 +177,98 @@
|
|
|
|
|
if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
|
|
|
|
|
let dict = {}
|
|
|
|
|
changes.forEach((res) => {
|
|
|
|
|
// 修改费用名称
|
|
|
|
|
if (res[1] === 'feeName') {
|
|
|
|
|
// 获取当前选中的字典对象数据
|
|
|
|
|
const item = feeDict.value.filter((item) => {
|
|
|
|
|
return changes[0][3].includes(item.name)
|
|
|
|
|
// 修改箱型
|
|
|
|
|
if (changes[0][1] === 'ctn') {
|
|
|
|
|
const item = ctnList.filter((item) => {
|
|
|
|
|
return item.ctn === changes[0][3]
|
|
|
|
|
})
|
|
|
|
|
if (item) dict = item[0]
|
|
|
|
|
list.value[res[0]]['feeName'] = changes[0][3].split('-')[1]
|
|
|
|
|
list.value[res[0]]['feeEnName'] = dict['enName']
|
|
|
|
|
list.value[res[0]]['currency'] = dict['defaultCurrency']
|
|
|
|
|
list.value[res[0]]['unitText'] = dict['defaultUnitName']
|
|
|
|
|
list.value[res[0]]['unit'] = dict['defaultUnit']
|
|
|
|
|
list.value[res[0]]['customerTypeText'] = dict['defaultDebitName']
|
|
|
|
|
list.value[res[0]]['customerType'] = dict['defaultDebit']
|
|
|
|
|
list.value[res[0]]['isOpen'] = dict['isOpen']
|
|
|
|
|
list.value[res[0]]['isAdvancedPay'] = dict['isAdvancedPay']
|
|
|
|
|
list.value[res[0]]['isInvoice'] = dict['isInvoice']
|
|
|
|
|
list.value[res[0]]['feeFrt'] = dict['feeFrt']
|
|
|
|
|
list.value[res[0]]['feeCode'] = dict['code']
|
|
|
|
|
list.value[res[0]]['taxRate'] = dict['taxRate']
|
|
|
|
|
list.value[changes[0][0]]['ctnId'] = dict?.id
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// 修改费用英文名称
|
|
|
|
|
if (changes[0][1] === 'feeEnName') {
|
|
|
|
|
}
|
|
|
|
|
// 修改费用对象
|
|
|
|
|
if (changes[0][1] === 'customerName') {
|
|
|
|
|
const item = companyDict.value.filter((item) => {
|
|
|
|
|
return changes[0][3].includes(item.name)
|
|
|
|
|
// 修改包装类型
|
|
|
|
|
if (changes[0][1] === 'kindPkgsName') {
|
|
|
|
|
const item = ctnList.filter((item) => {
|
|
|
|
|
return item.packageName === changes[0][3]
|
|
|
|
|
})
|
|
|
|
|
if (item) dict = item[0]
|
|
|
|
|
list.value[changes[0][0]]['customerCode'] = dict?.value
|
|
|
|
|
list.value[changes[0][0]]['customerName'] = changes[0][3].split('-')[1]
|
|
|
|
|
}
|
|
|
|
|
// 修改客户类别
|
|
|
|
|
if (changes[0][1] === 'customerTypeText') {
|
|
|
|
|
getDictOption('djy_cust_prop').then((res) => {
|
|
|
|
|
const item = res.filter((item) => {
|
|
|
|
|
return changes[0][3].includes(item.name)
|
|
|
|
|
})
|
|
|
|
|
if (item) dict = item[0]
|
|
|
|
|
list.value[changes[0][0]]['customerType'] = dict?.value
|
|
|
|
|
list.value[changes[0][0]]['customerTypeText'] = changes[0][3].split('-')[1]
|
|
|
|
|
// 调用接口取费用对象
|
|
|
|
|
console.log(props.details)
|
|
|
|
|
GetClientSelectInfoByCode({ code: dict?.value, businessId: props.id, businessType: props.type }).then(res => {
|
|
|
|
|
list.value[changes[0][0]]['customerCode'] = res.data.clientId
|
|
|
|
|
list.value[changes[0][0]]['customerName'] = res.data.clientName
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
list.value[changes[0][0]]['kindPkgs'] = dict?.ediCode
|
|
|
|
|
}
|
|
|
|
|
// 修改单位
|
|
|
|
|
if (changes[0][1] === 'unitText') {
|
|
|
|
|
const item = unitDict.value.filter((item) => {
|
|
|
|
|
return changes[0][3].includes(item.name)
|
|
|
|
|
})
|
|
|
|
|
if (item) dict = item[0]
|
|
|
|
|
list.value[changes[0][0]]['unit'] = dict?.value
|
|
|
|
|
list.value[changes[0][0]]['unitText'] = changes[0][3].split('-')[1]
|
|
|
|
|
GetUnitSelectInfo({ code: dict?.value, businessId: props.id, businessType: props.type }).then(res => {
|
|
|
|
|
list.value[changes[0][0]]['quantity'] = res.data.quantity
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const row = {
|
|
|
|
|
selected: false,
|
|
|
|
|
ctn: '',
|
|
|
|
|
ctnId: '',
|
|
|
|
|
id: '',
|
|
|
|
|
ctnNum: '',
|
|
|
|
|
cntrNo: '',
|
|
|
|
|
sealNo: '',
|
|
|
|
|
pkgs: '',
|
|
|
|
|
kindPkgs: '',
|
|
|
|
|
kindPkgsName: '',
|
|
|
|
|
kgs: '',
|
|
|
|
|
cbm: '',
|
|
|
|
|
tareWeight: '',
|
|
|
|
|
note: ''
|
|
|
|
|
}
|
|
|
|
|
// 添加行
|
|
|
|
|
const addRow = () => {
|
|
|
|
|
const deepCopyRow = JSON.parse(JSON.stringify(row))
|
|
|
|
|
list.value.push(deepCopyRow)
|
|
|
|
|
}
|
|
|
|
|
// 删除
|
|
|
|
|
const deleteFlag = ref(false)
|
|
|
|
|
// 校验是否选中行
|
|
|
|
|
const checkDelete = () => {
|
|
|
|
|
let flag = false
|
|
|
|
|
list.value.forEach(item => {
|
|
|
|
|
if (item.selected) flag = true
|
|
|
|
|
})
|
|
|
|
|
// 业务数据有件数，修改单位，带出件数
|
|
|
|
|
// const text = list.value[changes[0][0]]['unitText']
|
|
|
|
|
// if (text == '单票') {
|
|
|
|
|
// list.value[changes[0][0]]['quantity'] = 1
|
|
|
|
|
// } else if (text == '件数') {
|
|
|
|
|
// list.value[changes[0][0]]['quantity'] = props.details.pkgs
|
|
|
|
|
// } else if (text == '重量') {
|
|
|
|
|
// list.value[changes[0][0]]['quantity'] = props.details.kgs
|
|
|
|
|
// } else if (text == '尺码') {
|
|
|
|
|
// list.value[changes[0][0]]['quantity'] = props.details.cbm
|
|
|
|
|
// } else if (text == '计费吨') {
|
|
|
|
|
// let r = props.details.kgs
|
|
|
|
|
// const k = (props.details.pkgs || 0) / 1000
|
|
|
|
|
// if (k > r) {
|
|
|
|
|
// r = k
|
|
|
|
|
// }
|
|
|
|
|
// list.value[changes[0][0]]['quantity'] = r
|
|
|
|
|
|
|
|
|
|
if (!flag) {
|
|
|
|
|
return createMessage.warning('请勾选要删除的数据！')
|
|
|
|
|
}
|
|
|
|
|
// 修改币别
|
|
|
|
|
if (changes[0][1] === 'currencyName') {
|
|
|
|
|
const item = currencyDict.value.filter((item) => {
|
|
|
|
|
return item.name === changes[0][3]
|
|
|
|
|
deleteFlag.value = true
|
|
|
|
|
}
|
|
|
|
|
// 删除选中行
|
|
|
|
|
const deleteRow = () => {
|
|
|
|
|
const res = list.value.filter(item => {
|
|
|
|
|
return !item.selected
|
|
|
|
|
})
|
|
|
|
|
if (item) dict = item[0]
|
|
|
|
|
list.value[changes[0][0]]['currency'] = dict?.codeName
|
|
|
|
|
}
|
|
|
|
|
// 当前操作的行
|
|
|
|
|
const index = changes[0][0]
|
|
|
|
|
// 修改不含税单价计算
|
|
|
|
|
if (changes[0][1] === 'noTaxPrice') {
|
|
|
|
|
// 单价
|
|
|
|
|
list.value[index].unitPrice = Number(
|
|
|
|
|
(changes[0][3] || 0) * ((list.value[index].taxRate || 0) / 100 + 1),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
// 金额
|
|
|
|
|
list.value[index].amount = Number(
|
|
|
|
|
(list.value[index].unitPrice || 0) * (list.value[index].quantity || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
// 不含税金额
|
|
|
|
|
list.value[index].noTaxAmount = Number(
|
|
|
|
|
(changes[0][3] || 0) * (list.value[index].quantity || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
}
|
|
|
|
|
// 修改单价计算
|
|
|
|
|
if (changes[0][1] === 'unitPrice') {
|
|
|
|
|
// 不含税单价
|
|
|
|
|
list.value[index].noTaxPrice = Number(
|
|
|
|
|
(changes[0][3] || 0) / ((list.value[index].taxRate || 0) / 100 + 1),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
// 金额
|
|
|
|
|
list.value[index].amount = Number(
|
|
|
|
|
(changes[0][3] || 0) * (list.value[index].quantity || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
// 不含税金额
|
|
|
|
|
list.value[index].noTaxAmount = Number(
|
|
|
|
|
(list.value[index].noTaxPrice || 0) * (list.value[index].quantity || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
}
|
|
|
|
|
// 修改数量
|
|
|
|
|
if (changes[0][1] === 'quantity') {
|
|
|
|
|
// 金额
|
|
|
|
|
list.value[index].amount = Number(
|
|
|
|
|
(changes[0][3] || 0) * (list.value[index].unitPrice || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
// 不含税金额
|
|
|
|
|
list.value[index].noTaxAmount = Number(
|
|
|
|
|
(changes[0][3] || 0) * (list.value[index].noTaxPrice || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
}
|
|
|
|
|
// 修改税率
|
|
|
|
|
if (changes[0][1] === 'taxRate') {
|
|
|
|
|
// 不含税单价
|
|
|
|
|
list.value[index].noTaxPrice = Number(
|
|
|
|
|
(list.value[index].unitPrice || 0) / ((changes[0][3] || 0) / 100 + 1),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
// 不含税金额
|
|
|
|
|
list.value[index].noTaxAmount = Number(
|
|
|
|
|
(list.value[index].noTaxPrice || 0) * (list.value[index].quantity || 0),
|
|
|
|
|
).toFixed(6)
|
|
|
|
|
deleteFlag.value = false
|
|
|
|
|
hotTb.value.hotInstance.loadData(res)
|
|
|
|
|
}
|
|
|
|
|
// 取消删除
|
|
|
|
|
const cancelDelete = () => {
|
|
|
|
|
deleteFlag.value = false
|
|
|
|
|
}
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
const hot = hotTb.value.hotInstance
|
|
|
|
|
hot.addHook('afterOnCellMouseDown', function (event, coords, TD) {})
|
|
|
|
|
// 定义表格按键处理逻辑
|
|
|
|
|
hot.addHook('beforeKeyDown', function (event) {
|
|
|
|
|
// 检查按下的是否是特定的键（例如 'Enter'）
|
|
|
|
|
if (event.key === 'ArrowDown') {
|
|
|
|
|
if (hot.getSelected()[0][0] == list.value.length - 1 && !hot.getActiveEditor()?._opened) {
|
|
|
|
|
list.value.push(JSON.parse(JSON.stringify(row)))
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
hot.selectCell(list.value.length - 1, 3)
|
|
|
|
|
})
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.ds-sea-container-info {
|
|
|
|
|
|
|
|
|
|
.flex {
|
|
|
|
|
align-items: center;
|
|
|
|
|
h4 {
|
|
|
|
|
margin: 0 15px 0 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
