<template>
|
<basicContainer>
|
<avue-crud
|
:option="option"
|
:table-loading="pageF.loading"
|
:data="tableData"
|
:page="page"
|
:permission="permissionList"
|
:before-open="beforeOpen"
|
v-model="form" v-model:search="queryParams"
|
ref="crudRef"
|
@refresh-change="refreshChange"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@on-load="onLoad"
|
>
|
<template #menu-left>
|
|
<el-button
|
type="warning"
|
plain
|
icon="Download"
|
@click="handleExport"
|
v-hasPermi="['tms:tmsDriver:export']"
|
>导出
|
</el-button>
|
</template>
|
<template #address="{row}">
|
<div class="hot" @click="handleLogItinerary(row)">
|
<div>起：{{row.shipperRegionLabel?.split('/').pop()}}({{row.shipperAddress}})</div>
|
<div>抵：{{row.receiverRegionLabel?.split('/').pop()}}({{row.receiverAddress}})</div>
|
</div>
|
|
</template>
|
<template #license="{row}">
|
<div>{{row.licensePlate}}</div>
|
<div>{{row.licenseHk}}</div>
|
<div>{{row.licenseMo}}</div>
|
</template>
|
<template #shelfCodeAndContainerNo="{row}">
|
<div>{{row.shelfCode}}</div>
|
<div>{{row.containerNo}}</div>
|
</template>
|
<template #pShippingFee="{row}">
|
<div v-if="row.rshippingFeeRmb">{{row.rshippingFeeRmb}}RMB</div>
|
<div v-if="row.rshippingFeeHkd">{{row.rshippingFeeHkd}}HKD</div>
|
</template>
|
<template #pServerFee="{row}">
|
<div v-if="row.pserverFeeRmb">{{row.pserverFeeRmb}}RMB</div>
|
<div v-if="row.pserverFeeHkd">{{row.pserverFeeHkd}}HKD</div>
|
</template>
|
<template #pActualFee="{row}">
|
<div v-if="row.pactualFeeRmb">{{row.pactualFeeRmb}}RMB</div>
|
<div v-if="row.pactualFeeHkd">{{row.pactualFeeHkd}}HKD</div>
|
</template>
|
<template #pTotal="{row}">
|
<div class="hot" @click="handlePayableFeeView(row)">
|
|
<div v-if="row.ptotalRmb">{{row.ptotalRmb}}RMB</div>
|
<div v-if="row.ptotalHkd">{{row.ptotalHkd}}HKD</div>
|
</div>
|
</template>
|
|
<template #rShippingFee="{row}">
|
<div v-if="row.rshippingFeeRmb">{{row.rshippingFeeRmb}}RMB</div>
|
<div v-if="row.rshippingFeeHkd">{{row.rshippingFeeRmb}}HKD</div>
|
</template>
|
<template #rServerFee="{row}">
|
<div v-if="row.rserverFeeRmb">{{row.rserverFeeRmb}}RMB</div>
|
<div v-if="row.rserverFeeHkd ">{{row.rserverFeeHkd}}HKD</div>
|
</template>
|
<template #rActualFee="{row}">
|
<div v-if="row.ractualFeeRmb">{{row.ractualFeeRmb}}RMB</div>
|
<div v-if="row.ractualFeeHkd">{{row.ractualFeeHkd}}HKD</div>
|
</template>
|
<template #rTotal="{row}">
|
<div class="hot" @click="handleReceivableFeeView(row)">
|
<div v-if="row.rtotalRmb">{{row.rtotalRmb}}RMB</div>
|
<div v-if="row.rtotalHkd">{{row.rtotalHkd}}HKD</div>
|
</div>
|
</template>
|
|
<template #grossProfit="{row}">
|
<div v-if="row.grossProfitRmb">{{row.grossProfitRmb}}RMB</div>
|
<div v-if="row.grossProfitHkd">{{row.grossProfitHkd}}HKD</div>
|
</template>
|
<template #grossProfitRadio="{row}">
|
<div v-if="row.grossProfitRadioRmb">RMB:{{row.grossProfitRadioRmb}}%</div>
|
<div v-if="row.grossProfitRadioHkd">HKD:{{row.grossProfitRadioHkd}}%</div>
|
</template>
|
|
|
|
</avue-crud>
|
</basicContainer>
|
|
<el-dialog :title="pageF.title" v-model="pageF.open" class="avue-dialog avue-dialog--top" width="80%">
|
<div v-if="optionType == 'receivableFee'">
|
<el-descriptions :column="3" border>
|
<el-descriptions-item label="应收费用编号">{{form.systemNo}}</el-descriptions-item>
|
<el-descriptions-item label="调度单号">{{form.dispatchNo}}</el-descriptions-item>
|
<el-descriptions-item label="客户名称">{{form.customerName}}</el-descriptions-item>
|
<el-descriptions-item label="项目名称">{{form.projectName}}</el-descriptions-item>
|
<el-descriptions-item label="调度单确定时间">{{form.dispatchConfirmTime}}</el-descriptions-item>
|
<el-descriptions-item label="费用生成时间">{{form.costGenerateTime}}</el-descriptions-item>
|
<el-descriptions-item label="关联账单编号">{{form.billRelationNo}}</el-descriptions-item>
|
<el-descriptions-item label="应收金额人民币">{{form.receivableRMBAmount}}</el-descriptions-item>
|
<el-descriptions-item label="应收金额港币">{{form.receivableHKBAmount}}</el-descriptions-item>
|
</el-descriptions>
|
<h3>费用明细</h3>
|
</div>
|
<avue-crud
|
:option="boxTableOption" ref="itemsTableRef"
|
:data="boxTableData"
|
>
|
<template #expand="{row}">
|
<avue-crud
|
:option="boxItemTableOption" ref="itemsTableRef2"
|
:data="row.payableFeeItems"
|
>
|
</avue-crud>
|
</template>
|
<template #receivableAmount="{row}">
|
<div v-if="row.receivableAmountRMB > 0">{{row.receivableAmountRMB}}人民币</div>
|
<div v-if="row.receivableAmountHKD > 0">{{row.receivableAmountHKD}}港币</div>
|
|
</template>
|
|
<template #payableAmount="{row}">
|
<div v-if="row.payableRmbAmount > 0">{{row.payableRmbAmount}}人民币</div>
|
<div v-if="row.payableHkbAmount > 0">{{row.payableHkbAmount}}港币</div>
|
</template>
|
</avue-crud>
|
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="pageF.open = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
</template>
|
|
<script setup name="tmsDriver" lang="ts">
|
import {
|
listTmsDispatchFeeSummaryVi,exportTmsDispatchFeeSummaryVi
|
} from "@/api/tms/tmsDispatchFeeSummary";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import {computed, onMounted, reactive, ref, toRefs, watch} from "vue";
|
import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface";
|
import {usePagePlus} from "@/hooks/usePagePlus";
|
import {hasPermission} from "@/utils/permissionUtils";
|
import {getTmsServiceProvider, listTmsServiceProvider} from "@/api/tms/tmsServiceProvider";
|
import {listTmsTrip} from "@/api/tms/tmsTrip";
|
import {getTmsReceivableFeeByDispatchNo} from "@/api/tms/tmsReceivableFee";
|
import {getTmsPayableFeeByDispatchNo} from "@/api/tms/tmsPayableFee";
|
|
const {proxy} = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(() => {
|
return {
|
addBtn: hasPermission(["tms:tmsDriver:add"]),
|
delBtn: hasPermission(["tms:tmsDriver:remove"]),
|
editBtn: hasPermission(["tms:tmsDriver:edit"]),
|
viewBtn: hasPermission(["tms:tmsDriver:query"]),
|
}
|
})
|
|
const data = reactive({
|
form: <any>{},
|
queryParams: <any & PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList: [],
|
boxTableOption:<any>{},
|
boxTableData:<any>[],
|
optionType:<any>{},
|
boxItemTableOption:{},
|
})
|
const {queryParams, form, page, selectionList,boxTableOption,boxTableData,optionType,boxItemTableOption} = toRefs(data);
|
const option = ref({
|
pageKey: 'TmsDriver',
|
rowKey: 'id',
|
labelWidth: 120,
|
searchLabelWidth: 100,
|
addBtn: false,
|
selection: false,
|
menu: false,
|
column: [
|
{
|
label: '下单信息',
|
children:[
|
{label: '下单时间',prop: 'orderTime',width: 120},
|
{label: '客户',prop: 'customerName',width: 180},
|
{label: '项目名称',prop: 'projectName',width: 180},
|
{label: '运输路线',prop: 'address',width: 300},
|
{label: '下单车型',prop: 'requiredVehicleTypes',width: 120,type: 'select', dicUrl: '/system/dict/data/type/vehicle_type', dataType: 'string',},
|
]
|
},
|
{
|
label: '派车信息',
|
children:[
|
{label: '调度单号',prop: 'dispatchNo',width: 180},
|
{label: '状态',prop: 'status',width: 120, type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/tms_dispatch_order_status',
|
},
|
{label: '承运商',prop: 'providerName',width: 180},
|
{label: '车牌',prop: 'license',width: 120},
|
{label: '司机',prop: 'mainDriverName',width: 120},
|
{label: '承运车型',prop: 'actualVehicleType',width: 120,type: 'select', dicUrl: '/system/dict/data/type/vehicle_type', dataType: 'string',},
|
]
|
},
|
{
|
label: '承运信息',
|
children:[
|
{label: '托架/柜号',prop: 'shelfCodeAndContainerNo',width: 120},
|
{label: '口岸',prop: 'port',width: 120},
|
{label: '无缝供应商',prop: 'seamlessSupplierName',width: 120},
|
{label: '无缝号',prop: 'seamlessNumber',width: 120},
|
{label: '查验',prop: 'iscc',width: 120,type: 'select', dicUrl: '/system/dict/data/type/sys_number_is', dataType: 'string',},
|
{label: '报关服务商',prop: 'customsServiceProviderName',width: 120},
|
{label: '装卸服务商',prop: 'loadingServiceProviderName',width: 120},
|
|
]
|
},{
|
label: '应付',
|
children:[
|
{label: '运费',prop: 'pShippingFee',width: 120},
|
{label: '增值服务',prop: 'pServerFee',width: 120},
|
{label: '实报实销',prop: 'pActualFee',width: 120},
|
{label: '应付小计',prop: 'pTotal',width: 120},
|
]
|
},{
|
label: '应收',
|
children:[
|
{label: '运费',prop: 'rShippingFee',width: 120},
|
{label: '增值服务',prop: 'rServerFee',width: 120},
|
{label: '实报实销',prop: 'rActualFee',width: 120},
|
{label: '应收小计',prop: 'rTotal',width: 120},
|
]
|
},{
|
label: '利润',
|
children:[
|
{label: '毛利',prop: 'grossProfit',width: 120},
|
{label: '毛利率',prop: 'grossProfitRadio',width: 120},
|
]
|
},{
|
label: '备注',
|
children:[
|
{label: '',prop: 'remark',width: 120},
|
|
]
|
}
|
]
|
})
|
const itineraryTableOption = ref({
|
menu: false,
|
addBtn: false,
|
header: false, selection: false,
|
title: '历史行程',
|
column: {
|
dataSource: {
|
label: '数据来源',
|
display: false,
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/data_source',
|
|
},
|
driverName: {
|
label: '主驾驶员名称',
|
display: true, disabled: true,
|
},
|
vehicleNumber: {
|
label: '车牌号码',
|
display: true, disabled: true,
|
|
},
|
tripType: {
|
label: '行程类型',
|
display: true,
|
type: 'select', dataType: 'string', dicUrl: '/system/dict/data/type/trip_type',
|
|
},
|
tripTime: {
|
label: '时间',
|
type: 'date', valueFormat: 'YYYY-MM-DD',
|
display: true,
|
},
|
odometer: {
|
label: '仪表里程',
|
display: true,
|
},
|
address: {
|
label: '具体地址',
|
display: true,
|
},
|
voucherUrl: {
|
label: '凭证',
|
display: true,
|
span: 24, dataType: 'string',
|
type: 'img',
|
|
},
|
|
}
|
})
|
|
const YSGenerateItemTableOption = ref({
|
menu: false,
|
add: false,
|
header:false,
|
selection: false,
|
rowKey:'rowKey',
|
|
column:{
|
feeType:{
|
label: '费用类型',
|
type: 'radio', dataType: 'string', dicUrl: '/system/dict/data/type/receivable_fee_type',
|
|
},
|
feeName:{
|
label: '费用名称',
|
},
|
registerTime:{
|
label: '登记时间',
|
},
|
registerAmount:{
|
label: '登记金额',
|
},
|
currency:{
|
label: '币制',
|
type: 'radio', dataType: 'string', dicUrl: '/system/dict/data/type/sys_currency',
|
|
}
|
}
|
})
|
const YFGenerateTableOption = ref({
|
menu: false,
|
add: false,
|
header:false,
|
selection: false,
|
expand:true,
|
defaultExpandAll:true,
|
rowKey:'id',
|
column:{
|
dispatchNo:{
|
label: '调度单号',
|
},
|
serviceProviderType:{
|
label: '服务商类型',
|
type: 'radio', dicUrl: '/system/dict/data/type/provider_type', dataType: 'string',
|
},
|
serviceProviderName:{
|
label: '服务商名稱',
|
},
|
payableAmount:{
|
label: '应付费用',
|
}
|
}
|
})
|
const YFGenerateItemTableOption = ref({
|
menu: false,
|
add: false,
|
header:false,
|
selection: false,
|
rowKey:'rowKey',
|
|
column:{
|
feeType:{
|
label: '费用类型',
|
type: 'radio', dataType: 'string', dicUrl: '/system/dict/data/type/receivable_fee_type',
|
|
},
|
feeName:{
|
label: '费用名称',
|
},
|
registerTime:{
|
label: '登记时间',
|
},
|
registerAmount:{
|
label: '登记金额',
|
},
|
currency:{
|
label: '币制',
|
type: 'radio', dataType: 'string', dicUrl: '/system/dict/data/type/sys_currency',
|
|
}
|
}
|
})
|
const {
|
tableData,
|
pageF,
|
rowSave,
|
rowUpdate,
|
rowDel,
|
beforeOpen,
|
searchChange,
|
searchReset,
|
selectionChange,
|
onLoad,
|
currentChange,
|
sizeChange,
|
handleDelete,
|
handleExport,
|
handleUpdate,
|
refreshChange
|
} = usePagePlus({
|
form: form,
|
option: option,
|
queryParams: queryParams,
|
idKey: 'id',
|
page: page.value,
|
getListApi: listTmsDispatchFeeSummaryVi,
|
exportApi: exportTmsDispatchFeeSummaryVi,
|
handleUpdateFunc: () => {
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc: (selection: any) => {
|
selectionList.value = selection;
|
},
|
})
|
const handleLogItinerary = (row: any) => {
|
optionType.value = 'view';
|
boxTableOption.value = itineraryTableOption.value;
|
listTmsTrip({dispatchOrderId: row.dispatchId, pageNum: 1, pageSize: 999}).then(res => {
|
boxTableData.value = res.rows || [];
|
pageF.open = true;
|
pageF.title = '查看行程';
|
})
|
}
|
|
const handleReceivableFeeView = (row: any) => {
|
optionType.value = 'receivableFee';
|
boxTableOption.value = YSGenerateItemTableOption.value;
|
getTmsReceivableFeeByDispatchNo(row.dispatchNo).then(res=>{
|
form.value = res.data || {};
|
boxTableData.value = form.value.items || [];
|
pageF.open = true;
|
pageF.title = '应收费用明细';
|
|
})
|
}
|
const handlePayableFeeView = (row: any) => {
|
optionType.value = 'payableFee';
|
boxTableOption.value = YFGenerateTableOption.value;
|
boxItemTableOption.value = YFGenerateItemTableOption.value;
|
getTmsPayableFeeByDispatchNo(row.dispatchNo).then(res=>{
|
boxTableData.value = res.data || [];
|
pageF.open = true;
|
pageF.title = '应付费用明细';
|
|
|
|
})
|
}
|
|
|
</script>
|
<style scoped lang="scss">
|
.hot{
|
cursor: pointer;
|
text-align: left;
|
&:hover{
|
color: #f0ad4e;
|
}
|
}
|
</style>
|
