You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2099 lines
64 KiB
2099 lines
64 KiB
<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="query.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="BookingNote_audit && !query.checkUserId" |
|
icon="el-icon-position" |
|
@click="handleAudit" |
|
> |
|
审 核 |
|
</el-button> |
|
<el-button |
|
type="primary" |
|
v-if="BookingNote_edit" |
|
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 |
|
@closce="showdrawer" |
|
:drawerShow="drawerShow" |
|
:columnList="columnList" |
|
v-model="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, |
|
handleInputQuery, |
|
handleSelectQuery, |
|
deepClone, |
|
ChecksWhetherTheWarehouseIsSelected, |
|
} 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'; |
|
|
|
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 BookingNote_edit = computed(() => { |
|
return $store.getters.permission.BookingNote_edit; |
|
}); |
|
|
|
// 审核按钮 |
|
const BookingNote_audit = computed(() => { |
|
return $store.getters.permission.BookingNote_audit; |
|
}); |
|
|
|
// 合计费用 |
|
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) => { |
|
handleInputQuery(index, row, details.query); |
|
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; |
|
handleSelectQuery(index, row, details.query); |
|
onLoad(); |
|
}; |
|
|
|
/** 表格表头复选框选择 */ |
|
const selectionChange = (list: any) => { |
|
details.selectionList = list; |
|
}; |
|
|
|
/** 切换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 (!ChecksWhetherTheWarehouseIsSelected()) |
|
return ElMessage.warning('多仓权限无法操作，请选择仓库'); |
|
|
|
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) { |
|
// 零担开单的数据 |
|
$store.commit('DEL_ONCE_TAG', '/waybill/CreateZeroOrder'); |
|
|
|
$router.push({ |
|
path: '/waybill/CreateZeroOrder', |
|
query: { |
|
name: '改单', |
|
id: $route.query.id, |
|
type: 'edit', |
|
backPath: '/waybill/WaybillOrderList', |
|
}, |
|
}); |
|
} |
|
}; |
|
|
|
/** 审核 */ |
|
const handleAudit = () => { |
|
if (!ChecksWhetherTheWarehouseIsSelected()) |
|
return ElMessage.warning('多仓权限无法操作，请选择仓库'); |
|
|
|
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: 16, |
|
}); |
|
|
|
const { code, data } = res.data; |
|
|
|
if (code !== 200 || !data || data.length === 0) return; |
|
let _html = ''; |
|
|
|
if (getObjType(data) !== 'object') return; |
|
|
|
for (const key in data) { |
|
const element = data[key]; |
|
|
|
for (let i = 0; i < element.length; i++) { |
|
const value = element[i]; |
|
|
|
let template = value.templateHtml; |
|
|
|
console.log('value.templateHtml :>> ', value.templateHtml); |
|
|
|
template = template.replace('第n页', `第${i + 1}页`); |
|
template = template.replace('共n页', `共${element.length}页`); |
|
// template = template.replaceAll('0.00', ``); |
|
|
|
_html += JSON.parse(JSON.stringify(template)); |
|
} |
|
} |
|
|
|
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>
|
|
|