|
|
|
|
<template>
|
|
|
|
|
<basic-container v-loading="details.loadingObj.pageLoading">
|
|
|
|
|
<div class="avue-crud">
|
|
|
|
|
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
|
|
|
|
|
<el-tab-pane label="详 情 信 息" name="tab1">
|
|
|
|
|
<el-divider style="font-size: 28px">货物托运单</el-divider>
|
|
|
|
|
|
|
|
|
|
<div class="flex-c-sb form_top">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex-c-sb" style="font-size: 16px">
|
|
|
|
|
<div class="flex-c-c" style="margin-right: 50px" v-if="query.brand">
|
|
|
|
|
<el-icon color="#172e60"><User /></el-icon>
|
|
|
|
|
品牌:
|
|
|
|
|
<span class="red">{{ query.brand }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-c-c">
|
|
|
|
|
<el-icon color="#172e60"><Van /></el-icon>
|
|
|
|
|
车次号:
|
|
|
|
|
<span class="red">{{ query.customerTrain }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt10">
|
|
|
|
|
<el-form-item class="mt10" label="运单号: " prop="waybillNo" label-width="80px">
|
|
|
|
|
<div>
|
|
|
|
|
<el-input v-model="query.waybillNo" readonly placeholder="运单号" clearable />
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<div v-if="details.query.orderCode" class="flex-c-sb mb10">
|
|
|
|
|
<div class="flex-c-c" style="margin-right: 50px">
|
|
|
|
|
<el-icon color="#172e60"><Shop /></el-icon>
|
|
|
|
|
商场名称：
|
|
|
|
|
<span class="red">{{ query.dealerName || '暂无数据' }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex-c-c">
|
|
|
|
|
<el-icon color="#172e60"><Shop /></el-icon>
|
|
|
|
|
商场编码：
|
|
|
|
|
<span class="red">{{ query.dealerCode || '暂无数据' }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex-c-c">
|
|
|
|
|
<div style="margin-right: 10px" class="flex-c-c">
|
|
|
|
|
<el-icon size="1rem"><User /></el-icon>
|
|
|
|
|
<span style="margin-left: 10px">{{ query.agent }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="query.documentMakingTime"
|
|
|
|
|
prefix-icon="Calendar"
|
|
|
|
|
readonly
|
|
|
|
|
type="datetime"
|
|
|
|
|
placeholder="创建时间"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form :inline="true" :model="query" class="el-fr-d" label-width="100px">
|
|
|
|
|
<!-- 顶部 -->
|
|
|
|
|
|
|
|
|
|
<!-- 第一排 -->
|
|
|
|
|
<div class="table-row mt15 border-top">
|
|
|
|
|
<el-form-item label="发站仓:" prop="departureWarehouseName" class="el-times">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query['departureWarehouseName']"
|
|
|
|
|
placeholder="发站仓"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="到站:" prop="destination">
|
|
|
|
|
<el-input readonly v-model="query['destination']" placeholder="到站地址"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="目的仓:" class="el-times" prop="queryDestinationWarehouseName">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query['queryDestinationWarehouseName']"
|
|
|
|
|
placeholder="发站仓"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="货号:" prop="goodsCode">
|
|
|
|
|
<el-input v-model="query.goodsCode" readonly placeholder="货号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 订单自编号 -->
|
|
|
|
|
<div class="table-row" v-if="details.query.orderCode">
|
|
|
|
|
<el-form-item label="订单自编号:" class="el-times">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="details.query.orderCode"
|
|
|
|
|
type="textarea"
|
|
|
|
|
placeholder="订单自编号"
|
|
|
|
|
disabled
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 发货方 && 收货方 -->
|
|
|
|
|
<div class="table-row">
|
|
|
|
|
<div style="margin-right: 10px">
|
|
|
|
|
<div class="flex-c table-row-title">发货方</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="发货单位:" prop="shipper">
|
|
|
|
|
<el-input readonly v-model="query.shipper" placeholder="发货单位"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="发货人:" prop="shipperName">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.shipperName"
|
|
|
|
|
placeholder="发货人"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="联系电话:" prop="shipperMobile">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.shipperMobile"
|
|
|
|
|
placeholder="联系电话"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="发货地址:">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.shipperAddress"
|
|
|
|
|
placeholder="发货地址"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="border-left">
|
|
|
|
|
<div class="flex-c table-row-title">收货方</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="收货单位:" prop="consignee">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.consignee"
|
|
|
|
|
placeholder="收货单位"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="收货人:" prop="consigneeName">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.consigneeName"
|
|
|
|
|
placeholder="收货人"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="联系电话:" prop="consigneeMobile">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.consigneeMobile"
|
|
|
|
|
placeholder="联系电话"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="收货地址:">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
v-model="query.consigneeAddress"
|
|
|
|
|
placeholder="发货地址"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 计价方式行 -->
|
|
|
|
|
<div
|
|
|
|
|
class="table-row table_row_number"
|
|
|
|
|
style="display: flex"
|
|
|
|
|
v-for="(item, index) in details.goodsList"
|
|
|
|
|
:key="item"
|
|
|
|
|
>
|
|
|
|
|
<div style="width: 230px; flex: none">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="计价方式:"
|
|
|
|
|
label-width="fit-content"
|
|
|
|
|
prop="chargeType"
|
|
|
|
|
class="el-times"
|
|
|
|
|
>
|
|
|
|
|
<el-radio-group
|
|
|
|
|
disabled
|
|
|
|
|
v-model="item.chargeType"
|
|
|
|
|
@change="handleComputed(item)"
|
|
|
|
|
style="display: flex"
|
|
|
|
|
>
|
|
|
|
|
<el-radio :label="1">件</el-radio>
|
|
|
|
|
<el-radio :label="2">方</el-radio>
|
|
|
|
|
<el-radio :label="3">公斤</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="货物名称:"
|
|
|
|
|
label-width="fit-content"
|
|
|
|
|
prop="goodsName"
|
|
|
|
|
class="el-times"
|
|
|
|
|
>
|
|
|
|
|
<el-input readonly v-model="item.goodsName" placeholder="货物名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="件数:" label-width="fit-content" prop="num" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="item.num"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:min="0"
|
|
|
|
|
:max="info.maxNum + item.num - details.totalObj.totalCount"
|
|
|
|
|
:precision="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
@change="handleComputed(item)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="体积(方):" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="item.volume"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:min="0"
|
|
|
|
|
:precision="4"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
@change="handleComputed(item)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="重量(kg):" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="item.weight"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:min="0"
|
|
|
|
|
:precision="3"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
@change="handleComputed(item)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="单价:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="item.price"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:min="0"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
@change="handleComputed(item)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="运费小计:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="item.subtotalFreight"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
:disabled="item.price > 0 || Number(item.price) !== Number(item.price)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 合计行 -->
|
|
|
|
|
<div class="table-row table_row_number table_row_total">
|
|
|
|
|
<div style="width: 230px; flex: none">合计</div>
|
|
|
|
|
<!-- 货物名称 -->
|
|
|
|
|
<div>{{ details.goodsList.length }}</div>
|
|
|
|
|
<!-- 件数 -->
|
|
|
|
|
<div>
|
|
|
|
|
{{ details.totalObj.totalCount }}(最大数: <span class="red">{{ info.maxNum }}</span
|
|
|
|
|
>)
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 体积 -->
|
|
|
|
|
<div>{{ details.totalObj.totalVolume }}</div>
|
|
|
|
|
<!-- 重量 -->
|
|
|
|
|
<div>{{ details.totalObj.totalWeghit }}</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
<!-- 运费 -->
|
|
|
|
|
<div>{{ details.totalObj.totalFreight }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 合计运费 && 支付方式 -->
|
|
|
|
|
<div class="table-row">
|
|
|
|
|
<!-- 定制品 -->
|
|
|
|
|
<template v-if="Number(query.waybillType) === 1 || details.query.orderCode">
|
|
|
|
|
<!-- 合计运费 -->
|
|
|
|
|
<div style="margin-right: 10px; width: 60%; flex: none">
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">
|
|
|
|
|
<div class="table-row-title-item fwb">
|
|
|
|
|
合计费用
|
|
|
|
|
<span class="red ml10">{{ totalCost }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form label-width="fit-content">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="运费:">
|
|
|
|
|
<el-input
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="details.totalObj.totalFreight"
|
|
|
|
|
disabled
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="送货费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.deliveryFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="提货费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.pickupFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="仓库管理费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.warehouseManagementFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="仓储费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.storageFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="装卸费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.handlingFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="其它费用:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.otherFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="保价费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.insuranceFee"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="申明价值:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.claimingValue"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="安装费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.installFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 付款方式 -->
|
|
|
|
|
<div class="border-left">
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">
|
|
|
|
|
<div class="table-row-title-item fwb">付款方式</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form label-width="fit-content" :rules="details.rules">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="支付方式:">
|
|
|
|
|
<el-select v-model="query.payType" disabled>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in query.payTypeList || []"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="付款方式:" prop="payWay">
|
|
|
|
|
<el-select v-model="query.payWay" disabled>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in query.payWayList || []"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="现付:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.xianPay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="到付:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.daoPay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="月结:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.yuePay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="回付:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.huiPay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-else>
|
|
|
|
|
<!-- 合计运费 -->
|
|
|
|
|
<div style="margin-right: 10px; width: 55%; flex: none; zoom: 0.9">
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">
|
|
|
|
|
<div class="table-row-title-item fwb">
|
|
|
|
|
合计费用
|
|
|
|
|
<span class="red" style="margin-left: 10px">{{ totalCost }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form label-width="fit-content">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="运费:">
|
|
|
|
|
<el-input
|
|
|
|
|
readonly
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="details.totalObj.totalFreight"
|
|
|
|
|
disabled
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="送货费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.deliveryFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="提货费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.pickupFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="仓库管理费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.warehouseManagementFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="仓储费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.storageFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="装卸费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.handlingFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="其它费用:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.otherFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="保价费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.insuranceFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="申明价值:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.claimingValue"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="回扣:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.rebate"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="安装费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
v-model="query.installFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 付款方式 -->
|
|
|
|
|
<div style="zoom: 0.9" class="border-left">
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">
|
|
|
|
|
<div class="table-row-title-item fwb">付款方式</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label-width="fit-content" label="支付方式:">
|
|
|
|
|
<el-select disabled v-model="query.payType" :teleported="false">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.info.payTypeList"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="付款方式:" label-width="fit-content" prop="payWay">
|
|
|
|
|
<el-select disabled v-model="query.payWay" :teleported="false">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.info.payWayList"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label-width="fit-content" label="现付:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.xianPay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label-width="fit-content" label="到付:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.daoPay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label-width="fit-content" label="月结:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.yuePay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label-width="fit-content" label="回付:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.huiPay"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 代收款 -->
|
|
|
|
|
<div style="width: 10%; flex: none; zoom: 0.9">
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">
|
|
|
|
|
<div class="table-row-title-item fwb">代收款</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form label-width="fit-content" :rules="details.rules">
|
|
|
|
|
<el-row>
|
|
|
|
|
<div style="font-size: 14px">代收货款:</div>
|
|
|
|
|
<el-form-item label-width="0">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:min="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.replacePrice"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 计价方式行 -->
|
|
|
|
|
<div class="table-row table_row_number">
|
|
|
|
|
<div>
|
|
|
|
|
<el-form-item label="开单人:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input v-model="query.agent" disabled />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="三方操作费:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="query.thirdOperationFee"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="送货方式:"
|
|
|
|
|
prop="deliveryWay"
|
|
|
|
|
label-width="fit-content"
|
|
|
|
|
class="el-times"
|
|
|
|
|
>
|
|
|
|
|
<el-select disabled v-model="query.deliveryWay">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in query.deliveryWayList"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="紧急度:"
|
|
|
|
|
prop="urgency"
|
|
|
|
|
label-width="fit-content"
|
|
|
|
|
class="el-times"
|
|
|
|
|
>
|
|
|
|
|
<el-select disabled v-model="query.urgency">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in query.urgencyList || []"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="回单" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
readonly
|
|
|
|
|
:controls="false"
|
|
|
|
|
v-model="query.receiptNum"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
:min="0"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="回单要求:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-select disabled v-model="query.receipt" filterable multiple>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in query.receiptList"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="运输方式:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-select disabled v-model="query.transportType">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in query.transportTypeList"
|
|
|
|
|
:key="item.dictValue"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 备注 -->
|
|
|
|
|
<div class="table-row">
|
|
|
|
|
<el-form-item label="备注:" class="el-times">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="pageInfo.remark"
|
|
|
|
|
type="textarea"
|
|
|
|
|
readonly
|
|
|
|
|
placeholder="备注"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-tabs class="mt10" @tab-click="handleTabItemClick" v-model="activeTabItem">
|
|
|
|
|
<!-- 支出费用 -->
|
|
|
|
|
<el-tab-pane label="支 出 费 用" name="tabItem1"></el-tab-pane>
|
|
|
|
|
<!-- 配载信息 -->
|
|
|
|
|
<el-tab-pane label="配 载 信 息" name="tabItem2">
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<WaybillStowage />
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="中 转 信 息" name="tabItem3">
|
|
|
|
|
<RelayInformation />
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
<!-- 提交按钮 -->
|
|
|
|
|
<div class="submitDataContainer">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
v-if="!query.checkUserId"
|
|
|
|
|
icon="el-icon-position"
|
|
|
|
|
@click="handleAudit"
|
|
|
|
|
>
|
|
|
|
|
审 核
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="primary" icon="el-icon-edit" @click="handleEdit"> 修 改</el-button>
|
|
|
|
|
<el-button type="primary" icon="el-icon-printer" @click="handlePrint"> 打 印</el-button>
|
|
|
|
|
<el-button type="primary" icon="el-icon-close" @click="back()"> 关 闭</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 底部顶位的容器 -->
|
|
|
|
|
<div class="footer"></div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="运 单 跟 踪" name="tab2">
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<tablecmt
|
|
|
|
|
class="StowageInfo"
|
|
|
|
|
:columnList="details.WaybillTrackingColumnList"
|
|
|
|
|
:tableData="data"
|
|
|
|
|
:loading="loadingObj.stowageLoading"
|
|
|
|
|
@inputTxt="inputsc"
|
|
|
|
|
@timeCheck="timesc"
|
|
|
|
|
@btnCheck="btnsc"
|
|
|
|
|
>
|
|
|
|
|
</tablecmt>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="财 务 记 录" name="tab3">
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<tablecmt
|
|
|
|
|
class="StowageInfo"
|
|
|
|
|
:columnList="details.FinancialRecordColumnList"
|
|
|
|
|
:tableData="data"
|
|
|
|
|
:loading="loadingObj.stowageLoading"
|
|
|
|
|
@inputTxt="inputsc"
|
|
|
|
|
@timeCheck="timesc"
|
|
|
|
|
>
|
|
|
|
|
</tablecmt>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="改 单 记 录" name="tab4">
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<tablecmt
|
|
|
|
|
class="StowageInfo"
|
|
|
|
|
:columnList="details.ChangeOrderColumnList"
|
|
|
|
|
:tableData="data"
|
|
|
|
|
:loading="loadingObj.stowageLoading"
|
|
|
|
|
@inputTxt="inputsc"
|
|
|
|
|
@timeCheck="timesc"
|
|
|
|
|
>
|
|
|
|
|
</tablecmt>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="回 单 跟 踪" name="tab5">
|
|
|
|
|
<div style="min-height: 300px">
|
|
|
|
|
<el-image
|
|
|
|
|
class="mr10 receipt_img"
|
|
|
|
|
v-for="(item, index) in details.receiptImgList"
|
|
|
|
|
style="width: 100px; height: 100px"
|
|
|
|
|
:src="item"
|
|
|
|
|
:zoom-rate="1.2"
|
|
|
|
|
:max-scale="7"
|
|
|
|
|
:min-scale="0.2"
|
|
|
|
|
:preview-src-list="details.receiptImgList"
|
|
|
|
|
:initial-index="index"
|
|
|
|
|
fit="cover"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="异 动 记 录" name="tab6">
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<tablecmt
|
|
|
|
|
class="StowageInfo"
|
|
|
|
|
:columnList="details.TransactionColumnList"
|
|
|
|
|
:tableData="data"
|
|
|
|
|
:loading="loadingObj.stowageLoading"
|
|
|
|
|
@inputTxt="inputsc"
|
|
|
|
|
@timeCheck="timesc"
|
|
|
|
|
>
|
|
|
|
|
</tablecmt>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="运单订单记录" name="tab7">
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<tablecmt
|
|
|
|
|
class="StowageInfo"
|
|
|
|
|
:columnList="details.columnList"
|
|
|
|
|
:tableData="data"
|
|
|
|
|
:loading="loadingObj.stowageLoading"
|
|
|
|
|
@inputTxt="inputsc"
|
|
|
|
|
@timeCheck="timesc"
|
|
|
|
|
>
|
|
|
|
|
</tablecmt>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</basic-container>
|
|
|
|
|
|
|
|
|
|
<!-- 运单打印 -->
|
|
|
|
|
<WaybillPrintTemplate
|
|
|
|
|
v-model="details.popUpShow.WaybillPrintTemplate"
|
|
|
|
|
:html="details.html"
|
|
|
|
|
width="70%"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<edittablehead
|
|
|
|
|
@setcolum="setnewcolum"
|
|
|
|
|
@closce="showdrawer"
|
|
|
|
|
:drawerShow="drawerShow"
|
|
|
|
|
:columnList="columnList"
|
|
|
|
|
>
|
|
|
|
|
</edittablehead>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import {
|
|
|
|
|
ref,
|
|
|
|
|
reactive,
|
|
|
|
|
toRefs,
|
|
|
|
|
computed,
|
|
|
|
|
onMounted,
|
|
|
|
|
nextTick,
|
|
|
|
|
watch,
|
|
|
|
|
defineAsyncComponent,
|
|
|
|
|
} from 'vue';
|
|
|
|
|
import functions from '@/utils/functions';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import { mapGetters } from 'vuex';
|
|
|
|
|
/** 获取字典 */
|
|
|
|
|
import { getDictionaryBiz } from '@/api/system/dict';
|
|
|
|
|
import { downloadXls, computeNumber, isNumber, getObjType } from '@/utils/util';
|
|
|
|
|
import { columnList } from '@/option/distribution/VehicleStowage';
|
|
|
|
|
import {
|
|
|
|
|
WaybillTrackingColumnList,
|
|
|
|
|
FinancialRecordColumnList,
|
|
|
|
|
ChangeOrderColumnList,
|
|
|
|
|
TransactionColumnList,
|
|
|
|
|
} from '@/option/distribution/BookingNote';
|
|
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
|
|
import { postFindWaybillDetail, postCheckWaybill } from '@/api/distribution/CreateOrder.js';
|
|
|
|
|
import { postPrintBatch } from '@/api/waybill/WaybillOrderList.js';
|
|
|
|
|
import { getLazyTreeAll } from '@/api/base/region';
|
|
|
|
|
import {
|
|
|
|
|
postWarehouseFindWaybillInfo,
|
|
|
|
|
postFindWaybillLog,
|
|
|
|
|
postFindWaybillReturnList,
|
|
|
|
|
postFindWaybillCarsLoadInfo,
|
|
|
|
|
postFindWaybillTransferInfo,
|
|
|
|
|
} from '@/api/distribution/BookingNote.js';
|
|
|
|
|
import { useStore } from 'vuex';
|
|
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
|
|
import { deepClone } from 'avue-plugin-ueditor/packages/ueditor/src/upload/util';
|
|
|
|
|
|
|
|
|
|
const WaybillStowage = defineAsyncComponent(
|
|
|
|
|
() => import('@/views/distribution/inventory/BookingNoteComponent/WaybillStowage.vue')
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const RelayInformation = defineAsyncComponent(
|
|
|
|
|
() => import('@/views/distribution/inventory/BookingNoteComponent/RelayInformation.vue')
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 获取路由实例
|
|
|
|
|
const $router = useRouter();
|
|
|
|
|
const $route = useRoute();
|
|
|
|
|
const $store = useStore();
|
|
|
|
|
|
|
|
|
|
const details = reactive<any>({
|
|
|
|
|
/** 表格表头 */
|
|
|
|
|
WaybillTrackingColumnList: deepClone(WaybillTrackingColumnList),
|
|
|
|
|
FinancialRecordColumnList: deepClone(FinancialRecordColumnList),
|
|
|
|
|
ChangeOrderColumnList: deepClone(ChangeOrderColumnList),
|
|
|
|
|
TransactionColumnList: deepClone(TransactionColumnList),
|
|
|
|
|
/** 页面表单数据 */
|
|
|
|
|
pageInfo: {},
|
|
|
|
|
info: {
|
|
|
|
|
/** 支付字典 */
|
|
|
|
|
payOption: [
|
|
|
|
|
{
|
|
|
|
|
label: '现金',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '银行卡',
|
|
|
|
|
value: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '微信',
|
|
|
|
|
value: 3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '支付宝',
|
|
|
|
|
value: 4,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '支票',
|
|
|
|
|
value: 5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '账本',
|
|
|
|
|
value: 6,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 开单付款字典 */
|
|
|
|
|
paymentOption: [
|
|
|
|
|
{
|
|
|
|
|
label: '现付',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '到付',
|
|
|
|
|
value: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '月结',
|
|
|
|
|
value: 3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '回付',
|
|
|
|
|
value: 4,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '内部结算',
|
|
|
|
|
value: 5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '多笔付',
|
|
|
|
|
value: 6,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 紧急度 */
|
|
|
|
|
emergencyOption: [
|
|
|
|
|
{
|
|
|
|
|
label: '正常',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '急',
|
|
|
|
|
value: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '特急',
|
|
|
|
|
value: 3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '加急',
|
|
|
|
|
value: 4,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 送货方式字典 */
|
|
|
|
|
shippingOption: [
|
|
|
|
|
{
|
|
|
|
|
label: '自提',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '送货',
|
|
|
|
|
value: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '送货上门',
|
|
|
|
|
value: 3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '送货上门(有电梯)',
|
|
|
|
|
value: 4,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '送货上门(无电梯)',
|
|
|
|
|
value: 5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '送货卸货',
|
|
|
|
|
value: 6,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '送货安装',
|
|
|
|
|
value: 7,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 开单回单方式 */
|
|
|
|
|
receiptOption: [
|
|
|
|
|
{
|
|
|
|
|
label: '签回单',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '打收条',
|
|
|
|
|
value: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '签信封',
|
|
|
|
|
value: 3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '签回单盖章',
|
|
|
|
|
value: 4,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '1份回单',
|
|
|
|
|
value: 5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '2份回单',
|
|
|
|
|
value: 6,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '3份回单',
|
|
|
|
|
value: 7,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '4份回单',
|
|
|
|
|
value: 8,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '5份回单',
|
|
|
|
|
value: 9,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 运输方式 */
|
|
|
|
|
transportationOption: [
|
|
|
|
|
{
|
|
|
|
|
label: '公路快运',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '海运',
|
|
|
|
|
value: 2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '卡车航班',
|
|
|
|
|
value: 3,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '空运',
|
|
|
|
|
value: 4,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '普通汽班',
|
|
|
|
|
value: 5,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '快递',
|
|
|
|
|
value: 6,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
/** 合计 */
|
|
|
|
|
totalObj: {
|
|
|
|
|
/** 总件数 */
|
|
|
|
|
totalCount: computed(() => {
|
|
|
|
|
return details.goodsList.reduce((curr, item) => {
|
|
|
|
|
if (item.num) return curr + item.num;
|
|
|
|
|
return curr;
|
|
|
|
|
}, 0);
|
|
|
|
|
}),
|
|
|
|
|
/** 总重量 */
|
|
|
|
|
totalWeghit: computed(() => {
|
|
|
|
|
return details.goodsList.reduce((curr, item) => {
|
|
|
|
|
if (item.weight) return computeNumber(curr, '+', item.weight).result;
|
|
|
|
|
return curr;
|
|
|
|
|
}, 0);
|
|
|
|
|
}),
|
|
|
|
|
/** 总体积 */
|
|
|
|
|
totalVolume: computed(() => {
|
|
|
|
|
return details.goodsList.reduce((curr, item) => {
|
|
|
|
|
if (item.volume) return computeNumber(curr, '+', item.volume).result;
|
|
|
|
|
return curr;
|
|
|
|
|
}, 0);
|
|
|
|
|
}),
|
|
|
|
|
/** 总运费 */
|
|
|
|
|
totalFreight: computed(() => {
|
|
|
|
|
return details.goodsList.reduce((curr, item) => {
|
|
|
|
|
if (item.subtotalFreight) return computeNumber(curr, '+', item.subtotalFreight).result;
|
|
|
|
|
return curr;
|
|
|
|
|
}, 0);
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
/** 是否开启搜索 */
|
|
|
|
|
search: true,
|
|
|
|
|
/** 表格搜索条件 */
|
|
|
|
|
query: {},
|
|
|
|
|
goodsList: [],
|
|
|
|
|
options: [],
|
|
|
|
|
/** 时间快捷选择设置 */
|
|
|
|
|
shortcuts: [
|
|
|
|
|
{
|
|
|
|
|
text: '最近一周',
|
|
|
|
|
value: () => {
|
|
|
|
|
const end = new Date();
|
|
|
|
|
const start = new Date();
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
|
return [start, end];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: '最近一个月',
|
|
|
|
|
value: () => {
|
|
|
|
|
const end = new Date();
|
|
|
|
|
const start = new Date();
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
|
return [start, end];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: '最近三个月',
|
|
|
|
|
value: () => {
|
|
|
|
|
const end = new Date();
|
|
|
|
|
const start = new Date();
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
|
|
return [start, end];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 时间选择器数据 */
|
|
|
|
|
stockupDate: [],
|
|
|
|
|
/** 列表 */
|
|
|
|
|
columnList: deepClone(columnList),
|
|
|
|
|
/** 列表数据 */
|
|
|
|
|
data: [],
|
|
|
|
|
/** 页面loading */
|
|
|
|
|
loadingObj: {
|
|
|
|
|
/** 配载信息loading */
|
|
|
|
|
stowageLoading: false,
|
|
|
|
|
pageLoading: false,
|
|
|
|
|
},
|
|
|
|
|
/** 列表复选框选中的数据 */
|
|
|
|
|
selectionList: [],
|
|
|
|
|
/** 是否显示设置表格 */
|
|
|
|
|
drawerShow: false,
|
|
|
|
|
/** 分页参数 */
|
|
|
|
|
page: {
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
pageSize: 30,
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
/** 弹出层显示 */
|
|
|
|
|
popUpShow: {
|
|
|
|
|
/** 打印弹窗 */
|
|
|
|
|
WaybillPrintTemplate: false,
|
|
|
|
|
},
|
|
|
|
|
/** 列表Dom节点 */
|
|
|
|
|
listNode: '',
|
|
|
|
|
form: {},
|
|
|
|
|
activeTab: 'tab1',
|
|
|
|
|
activeTabItem: 'tabItem1',
|
|
|
|
|
/** 回单列表 */
|
|
|
|
|
receiptImgList: [],
|
|
|
|
|
/** 打印html */
|
|
|
|
|
html: '',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const info = ref<any>({});
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
search,
|
|
|
|
|
query,
|
|
|
|
|
shortcuts,
|
|
|
|
|
stockupDate,
|
|
|
|
|
data,
|
|
|
|
|
drawerShow,
|
|
|
|
|
page,
|
|
|
|
|
activeTab,
|
|
|
|
|
activeTabItem,
|
|
|
|
|
loadingObj,
|
|
|
|
|
pageInfo,
|
|
|
|
|
} = toRefs(details);
|
|
|
|
|
|
|
|
|
|
/** vuex */
|
|
|
|
|
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
|
|
|
|
|
console.log('permission :>> ', permission);
|
|
|
|
|
|
|
|
|
|
// 合计费用
|
|
|
|
|
const totalCost = computed(() => {
|
|
|
|
|
console.log('details.pageInfo :>> ', details.pageInfo);
|
|
|
|
|
// let _num = 0;
|
|
|
|
|
const _num = computeNumber(0, '+', details.query.totalFreight || 0)
|
|
|
|
|
.next('+', details.query.deliveryFee || 0)
|
|
|
|
|
.next('+', details.query.pickupFee || 0)
|
|
|
|
|
.next('+', details.query.warehouseManagementFee || 0)
|
|
|
|
|
.next('+', details.query.storageFee || 0)
|
|
|
|
|
.next('+', details.query.handlingFee || 0)
|
|
|
|
|
.next('+', details.query.otherFee || 0)
|
|
|
|
|
.next('+', details.query.insuranceFee || 0)
|
|
|
|
|
.next('+', details.query.claimingValue || 0).result;
|
|
|
|
|
console.log('_num :>> ', _num);
|
|
|
|
|
return _num;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** 计算行合计 */
|
|
|
|
|
const handleComputed = (row: any) => {
|
|
|
|
|
// if (!row.price) return;
|
|
|
|
|
if (row.chargeType === 1) row.subtotalFreight = computeNumber(row.num, '*', row.price).result;
|
|
|
|
|
else if (row.chargeType === 2)
|
|
|
|
|
row.subtotalFreight = computeNumber(row.volume, '*', row.price).result;
|
|
|
|
|
else if (row.chargeType === 3)
|
|
|
|
|
row.subtotalFreight = computeNumber(row.weight, '*', row.price).result;
|
|
|
|
|
// row.subtotalFreight = 1;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 获取省市区信息
|
|
|
|
|
getLazyTreeAll().then(res => {
|
|
|
|
|
if (res.data.success) {
|
|
|
|
|
details.regionOptione = res.data.data;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** 请求页面数据 */
|
|
|
|
|
const onLoad = async () => {
|
|
|
|
|
try {
|
|
|
|
|
details.loadingObj.pageLoading = true;
|
|
|
|
|
|
|
|
|
|
details.pageInfo = { ...$route.query };
|
|
|
|
|
|
|
|
|
|
const res = await postFindWaybillDetail({ waybillId: details.pageInfo.id, isEdit: 0 });
|
|
|
|
|
const { code, data } = res.data;
|
|
|
|
|
if (code !== 200) return;
|
|
|
|
|
|
|
|
|
|
details.query = { ...data, ...data.warehouseWaybill };
|
|
|
|
|
delete details.query.warehouseWaybill;
|
|
|
|
|
details.query.queryDestinationWarehouseName = details.query.destinationWarehouseName;
|
|
|
|
|
console.log('data :>> ', data);
|
|
|
|
|
details.query.openOrderDate = data.warehouseWaybill.createTime;
|
|
|
|
|
details.query.orderCode = data.warehouseWaybill.orderNo;
|
|
|
|
|
details.query.transportType = '1';
|
|
|
|
|
details.query.receipt = data.warehouseWaybill.receipt
|
|
|
|
|
? data.warehouseWaybill.receipt.split(',')
|
|
|
|
|
: [];
|
|
|
|
|
|
|
|
|
|
details.query.xianPay = isNumber(data.warehouseWaybill.xpay)
|
|
|
|
|
? Number(data.warehouseWaybill.xpay)
|
|
|
|
|
: data.warehouseWaybill.xpay;
|
|
|
|
|
details.query.huiPay = isNumber(data.warehouseWaybill.hpay)
|
|
|
|
|
? Number(data.warehouseWaybill.hpay)
|
|
|
|
|
: data.warehouseWaybill.hpay;
|
|
|
|
|
details.query.yuePay = isNumber(data.warehouseWaybill.ypay)
|
|
|
|
|
? Number(data.warehouseWaybill.ypay)
|
|
|
|
|
: data.warehouseWaybill.ypay;
|
|
|
|
|
details.query.daoPay = isNumber(data.warehouseWaybill.dpay)
|
|
|
|
|
? Number(data.warehouseWaybill.dpay)
|
|
|
|
|
: data.warehouseWaybill.dpay;
|
|
|
|
|
// 转译到站
|
|
|
|
|
console.log('details.query :>> ', details.query);
|
|
|
|
|
|
|
|
|
|
// 初始化goodsList
|
|
|
|
|
if (data.warehouseWaybill.detailList.length === 0)
|
|
|
|
|
details.goodsList = [
|
|
|
|
|
{
|
|
|
|
|
index: 0,
|
|
|
|
|
/** 货物名称 */
|
|
|
|
|
goodsName: '',
|
|
|
|
|
/** 品类Id */
|
|
|
|
|
goodsId: '',
|
|
|
|
|
/** 计费方式 */
|
|
|
|
|
chargeType: 1,
|
|
|
|
|
/** 件数 */
|
|
|
|
|
num: 0,
|
|
|
|
|
/** 重量(kg) */
|
|
|
|
|
weight: 0,
|
|
|
|
|
/** 体积(方) */
|
|
|
|
|
volume: 0,
|
|
|
|
|
/** 单价 */
|
|
|
|
|
price: 0,
|
|
|
|
|
/** 运费小计 */
|
|
|
|
|
subtotalFreight: 0,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
else {
|
|
|
|
|
info.value.maxNum = 0;
|
|
|
|
|
details.deepCloneGoodsList = [];
|
|
|
|
|
details.goodsList = data.warehouseWaybill.detailList.map(val => {
|
|
|
|
|
val.num = Number(val.num);
|
|
|
|
|
val.volume = Number(val.volume);
|
|
|
|
|
val.weight = Number(val.weight);
|
|
|
|
|
val.price = Number(val.price);
|
|
|
|
|
val.subtotalFreight = Number(val.subtotalFreight);
|
|
|
|
|
|
|
|
|
|
val.goodsName = val.productName;
|
|
|
|
|
|
|
|
|
|
// 计算运费小计
|
|
|
|
|
if (!val.subtotalFreight) handleComputed(val);
|
|
|
|
|
|
|
|
|
|
// 计算件数最大值
|
|
|
|
|
info.value.maxNum += val.num;
|
|
|
|
|
details.deepCloneGoodsList.push({ ...val });
|
|
|
|
|
return val;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error :>> ', error);
|
|
|
|
|
} finally {
|
|
|
|
|
details.loadingObj.pageLoading = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 查看运单跟踪 */
|
|
|
|
|
const handleFindInfo = async type => {
|
|
|
|
|
try {
|
|
|
|
|
details.loadingObj.pageLoading = true;
|
|
|
|
|
details.data = [];
|
|
|
|
|
const submitData = {
|
|
|
|
|
waybillId: $route.query.id,
|
|
|
|
|
infoType: type,
|
|
|
|
|
};
|
|
|
|
|
const response = await postFindWaybillLog(submitData);
|
|
|
|
|
const { code, data } = response.data;
|
|
|
|
|
if (code !== 200) return;
|
|
|
|
|
|
|
|
|
|
details.data = data || [];
|
|
|
|
|
|
|
|
|
|
// 批次状态
|
|
|
|
|
const _batchStatus = [
|
|
|
|
|
{ label: '创建运单', value: 10 },
|
|
|
|
|
{ label: '已入库', value: 20 },
|
|
|
|
|
{ label: '干线装车', value: 30 },
|
|
|
|
|
{ label: '干线发车', value: 40 },
|
|
|
|
|
{ label: '干线取消发车', value: 50 },
|
|
|
|
|
{ label: '干线到达', value: 60 },
|
|
|
|
|
{ label: '干线取消达到', value: 70 },
|
|
|
|
|
{ label: '干线卸车', value: 80 },
|
|
|
|
|
{ label: '修改运单', value: 888 },
|
|
|
|
|
{ label: '审核运单', value: 999 },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 审核状态
|
|
|
|
|
const _checkStatus = [
|
|
|
|
|
{ label: '待审核', value: 0 },
|
|
|
|
|
{ label: '审核通过', value: 1 },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < details.data.length; i++) {
|
|
|
|
|
const value = details.data[i];
|
|
|
|
|
for (let i = 0; i < _batchStatus.length; i++) {
|
|
|
|
|
const item = _batchStatus[i];
|
|
|
|
|
|
|
|
|
|
if (item.value !== Number(value.trackType)) continue;
|
|
|
|
|
value.trackTypeName = item.label;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < _checkStatus.length; i++) {
|
|
|
|
|
const item = _checkStatus[i];
|
|
|
|
|
|
|
|
|
|
if (item.value !== Number(value.checkStatus)) continue;
|
|
|
|
|
value.checkStatusName = item.label;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error :>> ', error);
|
|
|
|
|
} finally {
|
|
|
|
|
details.loadingObj.pageLoading = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleTabClick = e => {
|
|
|
|
|
console.log('e :>> ', e);
|
|
|
|
|
const { name } = e.props;
|
|
|
|
|
|
|
|
|
|
switch (name) {
|
|
|
|
|
case 'tab2':
|
|
|
|
|
handleFindInfo(1);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'tab3':
|
|
|
|
|
handleFindInfo(2);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'tab4':
|
|
|
|
|
handleFindInfo(3);
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'tab5':
|
|
|
|
|
handleFindContractList();
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'tab6':
|
|
|
|
|
details.data = [];
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'tab7':
|
|
|
|
|
details.data = [];
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 搜索 */
|
|
|
|
|
const searchChange = () => {
|
|
|
|
|
onLoad();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 展开列表控件 */
|
|
|
|
|
const showdrawer = (_flag?: boolean) => {
|
|
|
|
|
details.drawerShow = _flag;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 是否开启搜索区 */
|
|
|
|
|
const searchHide = () => {
|
|
|
|
|
function getWinHight() {
|
|
|
|
|
var windowHight = 0;
|
|
|
|
|
if (document.body.clientHeight && document.documentElement.clientHeight) {
|
|
|
|
|
windowHight =
|
|
|
|
|
document.body.clientHeight < document.documentElement.clientHeight
|
|
|
|
|
? document.body.clientHeight
|
|
|
|
|
: document.documentElement.clientHeight;
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
return document.documentElement.clientHeight;
|
|
|
|
|
}
|
|
|
|
|
details.search = !details.search;
|
|
|
|
|
const timer = setTimeout(() => {
|
|
|
|
|
details.listNode.style.height =
|
|
|
|
|
getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
|
|
|
|
|
clearTimeout(timer);
|
|
|
|
|
}, 10);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头输入框搜索 */
|
|
|
|
|
const inputsc = (index, row) => {
|
|
|
|
|
details.query[row.prop] = index;
|
|
|
|
|
onLoad();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头时间选择 */
|
|
|
|
|
const timesc = (index, row) => {
|
|
|
|
|
console.log(index, row);
|
|
|
|
|
if (!!index) {
|
|
|
|
|
index = dayjs(index).format('YYYY-MM-DD');
|
|
|
|
|
}
|
|
|
|
|
details.query[row.prop] = index;
|
|
|
|
|
if (!index) {
|
|
|
|
|
delete details.query[row.prop];
|
|
|
|
|
}
|
|
|
|
|
onLoad();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头输入框搜索 */
|
|
|
|
|
const btnsc = () => {};
|
|
|
|
|
|
|
|
|
|
/** 表格表头下拉框选择 */
|
|
|
|
|
const selectsc = (index, row) => {
|
|
|
|
|
details.query[row.prop] = index;
|
|
|
|
|
if (!index && index !== 0) delete details.query[row.prop];
|
|
|
|
|
if (row.prop === 'certificateTypeName') {
|
|
|
|
|
details.query['certificateType'] = index;
|
|
|
|
|
if (!index) delete details.query['certificateType'];
|
|
|
|
|
}
|
|
|
|
|
onLoad();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头复选框选择 */
|
|
|
|
|
const selectionChange = (list: any) => {
|
|
|
|
|
details.selectionList = list;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 每页数量改变执行的回调 */
|
|
|
|
|
const sizeChange = (pageSize: number) => {
|
|
|
|
|
details.page.pageSize = pageSize;
|
|
|
|
|
onLoad();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 页码改变执行的回调 */
|
|
|
|
|
const currentChange = () => {};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 设置列表 -- 固定函数
|
|
|
|
|
* 弹窗的勾选回调，用于更改头部数组
|
|
|
|
|
* 固定搭配，只需要更换 columnList
|
|
|
|
|
* */
|
|
|
|
|
const setnewcolum = (newarr, headarr, type) => {
|
|
|
|
|
if (type == 1) {
|
|
|
|
|
details.columnList = newarr;
|
|
|
|
|
functions.setStorage(window.location.pathname + 'checkList', headarr);
|
|
|
|
|
} else if (type == 2) {
|
|
|
|
|
details.columnList = newarr;
|
|
|
|
|
functions.setStorage(window.location.pathname + 'flexList', headarr);
|
|
|
|
|
} else if (type == 3) {
|
|
|
|
|
details.columnList = newarr;
|
|
|
|
|
functions.setStorage(window.location.pathname + 'sortlist', headarr);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 切换tabber -- 支出费用 */
|
|
|
|
|
const getIncurExpenseInfo = () => {};
|
|
|
|
|
/** 切换tabber -- 配载信息 */
|
|
|
|
|
const getStowageInfo = () => {
|
|
|
|
|
const _node = document.querySelector('.StowageInfo');
|
|
|
|
|
_node.style.height = '400px';
|
|
|
|
|
console.log('_node :>> ', _node);
|
|
|
|
|
};
|
|
|
|
|
/** 切换tabber -- 中转信息 */
|
|
|
|
|
const getTransferInfo = () => {};
|
|
|
|
|
|
|
|
|
|
/** 详情信息页面tabber切换时执行的回调 */
|
|
|
|
|
const handleTabItemClick = tab => {
|
|
|
|
|
console.log('tab :>> ', tab);
|
|
|
|
|
const { name } = tab.props;
|
|
|
|
|
console.log('name :>> ', name);
|
|
|
|
|
switch (name) {
|
|
|
|
|
// 费用支出
|
|
|
|
|
case 'tabItem1':
|
|
|
|
|
getIncurExpenseInfo();
|
|
|
|
|
break;
|
|
|
|
|
// 配载信息
|
|
|
|
|
case 'tabItem2':
|
|
|
|
|
getStowageInfo();
|
|
|
|
|
break;
|
|
|
|
|
// 中转信息
|
|
|
|
|
case 'tabItem3':
|
|
|
|
|
getTransferInfo();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 返回页面 */
|
|
|
|
|
const back = () => {
|
|
|
|
|
$store.commit('DEL_TAG_CURRENT');
|
|
|
|
|
$router.back();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 前往修改页面 */
|
|
|
|
|
const handleEdit = () => {
|
|
|
|
|
if (Number(details.query.waybillType) === 1 || details.query.orderCode) {
|
|
|
|
|
// 暂存单转运单的数据
|
|
|
|
|
|
|
|
|
|
$store.commit('DEL_ONCE_TAG', '/distribution/inventory/CreateOrder');
|
|
|
|
|
|
|
|
|
|
$router.push({
|
|
|
|
|
path: '/distribution/inventory/CreateOrder',
|
|
|
|
|
query: {
|
|
|
|
|
name: '改单',
|
|
|
|
|
id: $route.query.id,
|
|
|
|
|
type: 'edit',
|
|
|
|
|
backPath: '/waybill/WaybillOrderList',
|
|
|
|
|
orderStatus: Number(details.query.waybillType) === 1 ? 'haveData' : 'notHaveData',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
} else if (Number(details.query.waybillType) === 2 && !details.query.orderCode) {
|
|
|
|
|
// 零担开单的数据
|
|
|
|
|
|
|
|
|
|
$router.push({
|
|
|
|
|
path: '/waybill/CreateZeroOrder',
|
|
|
|
|
query: {
|
|
|
|
|
name: '改单',
|
|
|
|
|
id: $route.query.id,
|
|
|
|
|
type: 'edit',
|
|
|
|
|
backPath: '/waybill/WaybillOrderList',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 审核 */
|
|
|
|
|
const handleAudit = () => {
|
|
|
|
|
ElMessageBox.confirm('确认审核?', '提示', {
|
|
|
|
|
confirmButtonText: '确认',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
details.loadingObj.pageLoading = true;
|
|
|
|
|
try {
|
|
|
|
|
const res = await postCheckWaybill({ waybillId: $route.query.id });
|
|
|
|
|
|
|
|
|
|
const { code, msg } = res.data;
|
|
|
|
|
if (code !== 200) return;
|
|
|
|
|
ElMessage.success({
|
|
|
|
|
message: msg,
|
|
|
|
|
});
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error :>> ', error);
|
|
|
|
|
} finally {
|
|
|
|
|
details.loadingObj.pageLoading = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 请求运输合同图片列表 */
|
|
|
|
|
const handleFindContractList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
details.loadingObj.pageLoading = true;
|
|
|
|
|
|
|
|
|
|
const submitData = { waybillId: $route.query.id };
|
|
|
|
|
const res = await postFindWaybillReturnList(submitData);
|
|
|
|
|
|
|
|
|
|
const { code, data } = res.data;
|
|
|
|
|
if (code !== 200) return;
|
|
|
|
|
|
|
|
|
|
const _imgArr = [];
|
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
|
const value = data[i];
|
|
|
|
|
_imgArr.push(...value.url.split(','));
|
|
|
|
|
}
|
|
|
|
|
details.receiptImgList = _imgArr;
|
|
|
|
|
console.log('_imgArr :>> ', _imgArr);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error :>> ', error);
|
|
|
|
|
} finally {
|
|
|
|
|
details.loadingObj.pageLoading = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 打印 */
|
|
|
|
|
const handlePrint = async () => {
|
|
|
|
|
try {
|
|
|
|
|
details.loadingObj.pageLoading = true;
|
|
|
|
|
|
|
|
|
|
const res = await postPrintBatch({
|
|
|
|
|
ids: $route.query.id,
|
|
|
|
|
tempId: 15,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const { code, data } = res.data;
|
|
|
|
|
|
|
|
|
|
if (code !== 200 || !data || data.length === 0) return;
|
|
|
|
|
|
|
|
|
|
let _html = '';
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
|
const value = data[i];
|
|
|
|
|
|
|
|
|
|
_html += JSON.parse(JSON.stringify(value.templateHtml));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('res :>> ', res);
|
|
|
|
|
|
|
|
|
|
details.html = _html;
|
|
|
|
|
|
|
|
|
|
details.popUpShow.WaybillPrintTemplate = true;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log('error :>> ', error);
|
|
|
|
|
} finally {
|
|
|
|
|
details.loadingObj.pageLoading = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => $route.query,
|
|
|
|
|
() => {
|
|
|
|
|
onLoad();
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true }
|
|
|
|
|
);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
$borderColor: var(--el-color-primary);
|
|
|
|
|
$borderType: 1px solid $borderColor;
|
|
|
|
|
|
|
|
|
|
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-form .el-input__wrapper) {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border-bottom: 1px solid $borderColor;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.border-left {
|
|
|
|
|
border-left: $borderType;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 页面字体大小
|
|
|
|
|
// .avue-crud {
|
|
|
|
|
// font-size: 12px !important;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
.form_top {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.border-top {
|
|
|
|
|
border-top: $borderType;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-row {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
// border-top: 1px solid $borderColor;
|
|
|
|
|
border-left: $borderType;
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
|
// display: block;
|
|
|
|
|
border-top: $borderType;
|
|
|
|
|
border-left: $borderType;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
display: block;
|
|
|
|
|
border-bottom: $borderType;
|
|
|
|
|
border-right: $borderType;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
border-bottom: $borderType;
|
|
|
|
|
border-right: $borderType;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-row-title {
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
|
|
& + div {
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
:deep(.el-form-item) {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-row) {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table_row_number {
|
|
|
|
|
> div {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table_row_total {
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #efefef;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.flex-c {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-select.m-2) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-form-item) {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-radio) {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-form-item__error) {
|
|
|
|
|
z-index: 99;
|
|
|
|
|
--el-color-danger: #f00;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// :deep(.el-form-item.is-error .el-input__wrapper) {
|
|
|
|
|
// --el-color-danger: #f00;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// :deep(
|
|
|
|
|
// .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
|
|
|
|
|
// .el-form-item.is-required:not(.is-no-asterisk).asterisk-left
|
|
|
|
|
// > .el-form-item__label-wrap
|
|
|
|
|
// > .el-form-item__label:before
|
|
|
|
|
// ) {
|
|
|
|
|
// --el-color-danger: #f00;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// 底部
|
|
|
|
|
.footer {
|
|
|
|
|
height: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 提交按钮容器
|
|
|
|
|
.submitDataContainer {
|
|
|
|
|
width: 80%;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.red {
|
|
|
|
|
color: var(--token-simulation-red-base-62);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-divider__text.is-center) {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: var(--el-color-danger);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-form-item__label) {
|
|
|
|
|
color: var(--el-color-danger) !important;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fwb {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: var(--el-color-danger) !important;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: 1rem;
|
|
|
|
|
background: #f00;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ml10 {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.receipt_img {
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// tab样式
|
|
|
|
|
:deep(.el-tabs__item.is-active) {
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs__item:hover) {
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs__item) {
|
|
|
|
|
color: #959a9e;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 禁止样式
|
|
|
|
|
:deep(.el-input.is-disabled .el-input__wrapper) {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-input.is-disabled .el-input__inner) {
|
|
|
|
|
-webkit-text-fill-color: var(--el-color-primary) !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
