|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<basic-container>
|
|
|
|
|
<el-divider style="font-size: 28px">货物托运单</el-divider>
|
|
|
|
|
|
|
|
|
|
<el-form
|
|
|
|
|
ref="ruleFormRef"
|
|
|
|
|
:inline="true"
|
|
|
|
|
:rules="details.rules"
|
|
|
|
|
:model="query"
|
|
|
|
|
class="el-fr-d"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
>
|
|
|
|
|
<!-- 顶部 -->
|
|
|
|
|
<div class="flex-c-sb form_top">
|
|
|
|
|
<div>
|
|
|
|
|
<div>品牌: {{ details.info.brand }} 车次号: {{ details.info.trainNumber }}</div>
|
|
|
|
|
<el-form-item class="mt10" label="运单号: " prop="waybillNo" label-width="80px">
|
|
|
|
|
<div><el-input v-model="query.waybillNo" placeholder="运单号" clearable /></div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex-c-c">
|
|
|
|
|
<div style="margin-right: 10px" class="flex-c-c">
|
|
|
|
|
<el-icon><User /></el-icon>
|
|
|
|
|
<span style="margin-left: 10px">{{ details.info.openOrderUserName }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-date-picker v-model="query.openOrderDate" type="datetime" placeholder="创建时间" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 第一排 -->
|
|
|
|
|
<div class="table-row mt15">
|
|
|
|
|
<el-form-item label="发站仓:" prop="departureWarehouseName" class="el-times">
|
|
|
|
|
<SelectBox
|
|
|
|
|
v-model="details.query.departureWarehouseName"
|
|
|
|
|
className="departureWarehouseName"
|
|
|
|
|
placeholder="发站仓"
|
|
|
|
|
>
|
|
|
|
|
暂无数据
|
|
|
|
|
</SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="到站:" prop="destination">
|
|
|
|
|
<div class="w100">
|
|
|
|
|
<el-cascader
|
|
|
|
|
pleceholder="请选择到站地址"
|
|
|
|
|
:options="details.regionOptione"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-model="query.destination"
|
|
|
|
|
@change="change"
|
|
|
|
|
:props="{
|
|
|
|
|
checkStrictly: true,
|
|
|
|
|
}"
|
|
|
|
|
filterable
|
|
|
|
|
clearable
|
|
|
|
|
>
|
|
|
|
|
<template #default="{ node, data }">
|
|
|
|
|
<span>{{ data.label }}</span>
|
|
|
|
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-cascader>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="目的仓:" class="el-times" prop="destinationWarehouseName">
|
|
|
|
|
<el-select v-model="query.destinationWarehouseName" class="m-2" placeholder="目的仓">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="货号:" prop="goodsCode">
|
|
|
|
|
<el-input v-model="query.goodsCode" disabled placeholder="货号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 订单自编号 -->
|
|
|
|
|
<div class="table-row">
|
|
|
|
|
<el-form-item label="订单自编号:" class="el-times">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="details.query.orderCode"
|
|
|
|
|
type="textarea"
|
|
|
|
|
placeholder="订单自编号"
|
|
|
|
|
disabled
|
|
|
|
|
></el-input>
|
|
|
|
|
<el-button class="mt10" type="primary" icon="Plus">选取订单</el-button>
|
|
|
|
|
</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">
|
|
|
|
|
<SelectBox
|
|
|
|
|
:input="handleFindClientInfo(query.shipper)"
|
|
|
|
|
v-model="query.shipper"
|
|
|
|
|
placeholder="发货单位"
|
|
|
|
|
>
|
|
|
|
|
暂无数据
|
|
|
|
|
</SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="发货人:" prop="shipperName">
|
|
|
|
|
<SelectBox v-model="query.shipperName" placeholder="发货人"> 暂无数据 </SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="联系电话:" prop="shipperMobile">
|
|
|
|
|
<SelectBox v-model="query.shipperMobile" placeholder="联系电话">
|
|
|
|
|
暂无数据
|
|
|
|
|
</SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="发货地址:">
|
|
|
|
|
<el-input v-model="query.shipperAddress" placeholder="发货地址"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex-c table-row-title">收货方</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="收货单位:" prop="consignee">
|
|
|
|
|
<SelectBox v-model="query.consignee" placeholder="收货单位"> 暂无数据 </SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="收货人:" prop="consigneeName">
|
|
|
|
|
<SelectBox v-model="query.consigneeName" placeholder="收货人">
|
|
|
|
|
暂无数据
|
|
|
|
|
</SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="联系电话:" prop="consigneeMobile">
|
|
|
|
|
<SelectBox v-model="query.consigneeMobile" placeholder="联系电话">
|
|
|
|
|
暂无数据
|
|
|
|
|
</SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="发货地址:">
|
|
|
|
|
<el-input 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: 55px; flex: none" class="flex-c-c">
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="index === 0"
|
|
|
|
|
@click="handleAdd"
|
|
|
|
|
icon="Plus"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small"
|
|
|
|
|
circle
|
|
|
|
|
></el-button>
|
|
|
|
|
|
|
|
|
|
<el-button
|
|
|
|
|
v-else
|
|
|
|
|
@click="handleRemove(index)"
|
|
|
|
|
icon="Minus"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="small"
|
|
|
|
|
circle
|
|
|
|
|
></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 230px; flex: none">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="计价方式:"
|
|
|
|
|
label-width="fit-content"
|
|
|
|
|
prop="chargeType"
|
|
|
|
|
class="el-times"
|
|
|
|
|
>
|
|
|
|
|
<el-radio-group
|
|
|
|
|
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"
|
|
|
|
|
>
|
|
|
|
|
<SelectBox className="goodsName" v-model="item.goodsName" placeholder="货物名称">
|
|
|
|
|
暂无数据
|
|
|
|
|
</SelectBox>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="件数:" label-width="fit-content" prop="num" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="item.num"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:min="0"
|
|
|
|
|
:precision="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
@change="handleComputed(item)"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="体积(方):" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
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: 55px; flex: none" class="flex-c-c"></div>
|
|
|
|
|
<div style="width: 230px; flex: none">合计</div>
|
|
|
|
|
<!-- 货物名称 -->
|
|
|
|
|
<div>{{ details.goodsList.length }}</div>
|
|
|
|
|
<!-- 件数 -->
|
|
|
|
|
<div>{{ details.totalObj.totalCount }}</div>
|
|
|
|
|
<!-- 体积 -->
|
|
|
|
|
<div>{{ details.totalObj.totalVolume }}</div>
|
|
|
|
|
<!-- 重量 -->
|
|
|
|
|
<div>{{ details.totalObj.totalWeghit }}</div>
|
|
|
|
|
<!-- 单价 -->
|
|
|
|
|
<div>{{ details.totalObj.totalCount }}</div>
|
|
|
|
|
<!-- 运费 -->
|
|
|
|
|
<div>{{ details.totalObj.totalFreight }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 合计运费 && 支付方式 -->
|
|
|
|
|
<div class="table-row">
|
|
|
|
|
<!-- 合计运费 -->
|
|
|
|
|
<div style="margin-right: 10px; width: 60%; flex: none">
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">合计费用</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
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.deliveryFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="提货费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.pickupFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="仓库管理费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.warehouseManagementFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="仓储费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.storageFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="装卸费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.handlingFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="其它费用:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.otherFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="保价费:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.insuranceFee"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="申明价值:">
|
|
|
|
|
<el-input-number
|
|
|
|
|
controls-position="right"
|
|
|
|
|
v-model="query.claimingValue"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 付款方式 -->
|
|
|
|
|
<div>
|
|
|
|
|
<div style="flex: 1">
|
|
|
|
|
<div class="table-row-title" style="margin-bottom: 10px">合计费用</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form label-width="fit-content" :rules="details.rules">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="支付方式:">
|
|
|
|
|
<el-select v-model="query.payType" class="m-2" placeholder="Select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="付款方式:" prop="payWay">
|
|
|
|
|
<el-select v-model="query.payWay" class="m-2" placeholder="Select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="现付:">
|
|
|
|
|
<el-input v-model="query.xPay"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="到付:">
|
|
|
|
|
<el-input v-model="query.dPay"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="月结:">
|
|
|
|
|
<el-input v-model="query.yPay"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="回付:">
|
|
|
|
|
<el-input v-model="query.hPay"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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.openOrderUserName" disabled />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="三方操作费:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="query.thirdOperationFee"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="0"
|
|
|
|
|
:step="0.1"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="送货方式:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-select v-model="query.deliveryWay" class="m-2" placeholder="Select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="紧急度:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-select v-model="query.urgency" class="m-2" placeholder="Select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="回单" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="query.receiptNum"
|
|
|
|
|
controls-position="right"
|
|
|
|
|
:precision="0"
|
|
|
|
|
:step="1"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="回单要求:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-select v-model="query.receipt" class="m-2" placeholder="Select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item label="运输方式:" label-width="fit-content" class="el-times">
|
|
|
|
|
<el-select v-model="query.transportType" class="m-2" placeholder="Select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in details.options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</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" placeholder="备注"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<div class="flex-c-c">
|
|
|
|
|
<el-button type="primary" icon="Position" @click="handleSubmit">提交</el-button>
|
|
|
|
|
<el-button type="primary" icon="Refresh" @click="handleRefresh">重置</el-button>
|
|
|
|
|
<el-button type="primary" icon="Close">关闭</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form>
|
|
|
|
|
</basic-container>
|
|
|
|
|
|
|
|
|
|
<!-- 选取订单 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
class="el-dialog-QRCode"
|
|
|
|
|
title="选取订单"
|
|
|
|
|
:visible.sync="details.popUpShow.truckLoadingDetailVisited"
|
|
|
|
|
width="780px"
|
|
|
|
|
v-model="details.popUpShow.truckLoadingDetailVisited"
|
|
|
|
|
>
|
|
|
|
|
<!-- 列表模块 -->
|
|
|
|
|
<tablecmt
|
|
|
|
|
:columnList="details.columnList"
|
|
|
|
|
:tableData="data"
|
|
|
|
|
:loading="loadingObj.list"
|
|
|
|
|
@inputTxt="inputsc"
|
|
|
|
|
@timeCheck="timesc"
|
|
|
|
|
@btnCheck="btnsc"
|
|
|
|
|
@selectCheck="selectsc"
|
|
|
|
|
@selection="selectionChange"
|
|
|
|
|
>
|
|
|
|
|
<template #default="slotProps">
|
|
|
|
|
<template v-if="slotProps.scope.column.label === '操作'">
|
|
|
|
|
<el-button type="text" @click="handleShowPackageOrderList(slotProps.scope)">
|
|
|
|
|
包明细
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</tablecmt>
|
|
|
|
|
|
|
|
|
|
<!-- 分页模块 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
align="right"
|
|
|
|
|
background
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page="page.pageNum"
|
|
|
|
|
:page-sizes="[30, 50, 80, 120]"
|
|
|
|
|
:page-size="page.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="page.total"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<!-- <el-button type="primary" @click="ddd">导 出</el-button>-->
|
|
|
|
|
<el-button type="primary" @click="printTemplate">确 认</el-button>
|
|
|
|
|
<el-button @click="details.popUpShow.truckLoadingDetailVisited = false">取 消</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, reactive, toRefs, computed, onMounted, nextTick, getCurrentInstance } from 'vue';
|
|
|
|
|
import functions from '@/utils/functions';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import { mapGetters } from 'vuex';
|
|
|
|
|
/** 获取字典 */
|
|
|
|
|
import { getDictionaryBiz } from '@/api/system/dict';
|
|
|
|
|
import { downloadXls, computeNumber } from '@/utils/util';
|
|
|
|
|
import { columnList, detailsColumnList } from '@/option/distribution/VehicleStowage';
|
|
|
|
|
import { getLazyTreeAll } from '@/api/base/region';
|
|
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
import type { FormInstance, FormRules } from 'element-plus';
|
|
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
|
|
import {
|
|
|
|
|
postOpenOrderFindClientInfo,
|
|
|
|
|
getOpenOrderAdvanceToWaybillInfo,
|
|
|
|
|
postOpenOrderOpenWaybill,
|
|
|
|
|
} from '@/api/distribution/CreateOrder.js';
|
|
|
|
|
|
|
|
|
|
// 获取vue实例
|
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
|
|
|
|
|
|
// 获取表单实例
|
|
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
|
|
|
|
|
|
|
|
// 获取路由实例
|
|
|
|
|
const $router = useRouter();
|
|
|
|
|
const $route = useRoute();
|
|
|
|
|
|
|
|
|
|
const details = reactive<any>({
|
|
|
|
|
/** 请求的数据 */
|
|
|
|
|
info: {},
|
|
|
|
|
/** 表格搜索条件 */
|
|
|
|
|
query: {
|
|
|
|
|
/** 品牌 */
|
|
|
|
|
brand: '',
|
|
|
|
|
/** 创建时间 */
|
|
|
|
|
openOrderDate: new Date(),
|
|
|
|
|
/** 客户车次号 */
|
|
|
|
|
customerTrain: '',
|
|
|
|
|
/** 运单号 */
|
|
|
|
|
waybillNo: '',
|
|
|
|
|
/** 发站仓id */
|
|
|
|
|
departureWarehouseId: '',
|
|
|
|
|
/** 发站仓名称 */
|
|
|
|
|
departureWarehouseName: '',
|
|
|
|
|
/** 到站 */
|
|
|
|
|
destination: '',
|
|
|
|
|
/** 订单自编号 */
|
|
|
|
|
orderCode: '',
|
|
|
|
|
/** 目的站名称 */
|
|
|
|
|
destinationWarehouseName: '',
|
|
|
|
|
/** 目的仓Id */
|
|
|
|
|
destinationWarehouseId: '',
|
|
|
|
|
/** 货物号 */
|
|
|
|
|
goodsCode: '',
|
|
|
|
|
/** 订单号 */
|
|
|
|
|
orderNo: '',
|
|
|
|
|
/** 发货单位id */
|
|
|
|
|
shipperId: '',
|
|
|
|
|
/** 发货单位 */
|
|
|
|
|
shipper: '',
|
|
|
|
|
/** 发货人 */
|
|
|
|
|
shipperName: '',
|
|
|
|
|
/** 发货人电话 */
|
|
|
|
|
shipperMobile: '',
|
|
|
|
|
/** 发货人地址 */
|
|
|
|
|
shipperAddress: '',
|
|
|
|
|
/** 收货单位id */
|
|
|
|
|
consigneeId: '',
|
|
|
|
|
/** 收货单位 */
|
|
|
|
|
consignee: '',
|
|
|
|
|
/** 收货人 */
|
|
|
|
|
consigneeName: '',
|
|
|
|
|
/** 收货人电话 */
|
|
|
|
|
consigneeMobile: '',
|
|
|
|
|
/** 收货人地址 */
|
|
|
|
|
consigneeAddress: '',
|
|
|
|
|
/** 货物品类 */
|
|
|
|
|
waybillDetailList: [],
|
|
|
|
|
/** 送货费 */
|
|
|
|
|
deliveryFee: 0,
|
|
|
|
|
/** 提货费 */
|
|
|
|
|
pickupFee: 0,
|
|
|
|
|
/** 仓库管理费 */
|
|
|
|
|
warehouseManagementFee: 0,
|
|
|
|
|
/** 仓储费 */
|
|
|
|
|
storageFee: 0,
|
|
|
|
|
/** 装卸费 */
|
|
|
|
|
handlingFee: 0,
|
|
|
|
|
/** 其他费 */
|
|
|
|
|
otherFee: 0,
|
|
|
|
|
/** 保价费 */
|
|
|
|
|
insuranceFee: 0,
|
|
|
|
|
/** 申明价值 */
|
|
|
|
|
claimingValue: 0,
|
|
|
|
|
/** 支付方式 */
|
|
|
|
|
payType: '',
|
|
|
|
|
/** 付款方式 */
|
|
|
|
|
payWay: '',
|
|
|
|
|
/** 现付 */
|
|
|
|
|
xPay: 0,
|
|
|
|
|
/** 到付 */
|
|
|
|
|
dPay: 0,
|
|
|
|
|
/** 月付 */
|
|
|
|
|
yPay: 0,
|
|
|
|
|
/** 回付 */
|
|
|
|
|
hPay: 0,
|
|
|
|
|
/** 三方操作费 */
|
|
|
|
|
thirdOperationFee: 0,
|
|
|
|
|
/** 送货方式 */
|
|
|
|
|
deliveryWay: '',
|
|
|
|
|
/** 紧急度 */
|
|
|
|
|
urgency: '',
|
|
|
|
|
/** 回单方式(多选) */
|
|
|
|
|
receipt: '',
|
|
|
|
|
/** 运输方式 */
|
|
|
|
|
transportType: '',
|
|
|
|
|
/** 开单人 */
|
|
|
|
|
openOrderUserName: '',
|
|
|
|
|
/** 回单数 */
|
|
|
|
|
receiptNum: '',
|
|
|
|
|
/** 备注 */
|
|
|
|
|
remark: '',
|
|
|
|
|
/** 运单类型 */
|
|
|
|
|
waybillType: 1,
|
|
|
|
|
},
|
|
|
|
|
/** 合计 */
|
|
|
|
|
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.freight) return curr + item.subtotalFreight;
|
|
|
|
|
return curr;
|
|
|
|
|
}, 0);
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
/** 暂存单Id集合 */
|
|
|
|
|
advanceIds: [],
|
|
|
|
|
/** 货物集合 */
|
|
|
|
|
goodsList: [
|
|
|
|
|
{
|
|
|
|
|
index: 0,
|
|
|
|
|
/** 货物名称 */
|
|
|
|
|
goodsName: '',
|
|
|
|
|
/** 品类Id */
|
|
|
|
|
goodsId: '',
|
|
|
|
|
/** 计费方式 */
|
|
|
|
|
chargeType: 1,
|
|
|
|
|
/** 件数 */
|
|
|
|
|
num: 0,
|
|
|
|
|
/** 重量(kg) */
|
|
|
|
|
weight: 0,
|
|
|
|
|
/** 体积(方) */
|
|
|
|
|
volume: 0,
|
|
|
|
|
/** 单价 */
|
|
|
|
|
price: 0,
|
|
|
|
|
/** 运费小计 */
|
|
|
|
|
subtotalFreight: 0,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
options: [],
|
|
|
|
|
/** 到站地区数组 */
|
|
|
|
|
regionOptione: [],
|
|
|
|
|
/** 必填 */
|
|
|
|
|
rules: {
|
|
|
|
|
/** 运单号 */
|
|
|
|
|
waybillNo: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 发站仓名称 */
|
|
|
|
|
departureWarehouseName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写或选择发站仓',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 到站 */
|
|
|
|
|
destination: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写或选择目的仓',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 订单自编号 */
|
|
|
|
|
orderCode: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 目的站名称 */
|
|
|
|
|
destinationWarehouseName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 货物号 */
|
|
|
|
|
goodsCode: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 发货单位 */
|
|
|
|
|
shipper: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 发货人 */
|
|
|
|
|
shipperName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 发货人电话 */
|
|
|
|
|
shipperMobile: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 收货单位 */
|
|
|
|
|
consignee: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 收货人 */
|
|
|
|
|
consigneeName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 收货人电话 */
|
|
|
|
|
consigneeMobile: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 收货人地址 */
|
|
|
|
|
consigneeAddress: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
/** 付款方式 */
|
|
|
|
|
payWay: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
itemRules: {
|
|
|
|
|
/** 计价方式 */
|
|
|
|
|
chargeType: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
/** 收货人地址 */
|
|
|
|
|
goodsName: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
/** 收货人地址 */
|
|
|
|
|
num: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写运单号',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 列表 */
|
|
|
|
|
columnList,
|
|
|
|
|
/** 列表数据 */
|
|
|
|
|
data: [{}],
|
|
|
|
|
/** 页面loading */
|
|
|
|
|
loadingObj: {
|
|
|
|
|
/** 配载信息loading */
|
|
|
|
|
stowageLoading: false,
|
|
|
|
|
},
|
|
|
|
|
/** 列表复选框选中的数据 */
|
|
|
|
|
selectionList: [],
|
|
|
|
|
/** 是否显示设置表格 */
|
|
|
|
|
drawerShow: false,
|
|
|
|
|
/** 分页参数 */
|
|
|
|
|
page: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 30,
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
/** 弹出层显示 */
|
|
|
|
|
popUpShow: {
|
|
|
|
|
/** 包明细 */
|
|
|
|
|
truckLoadingDetailVisited: false,
|
|
|
|
|
},
|
|
|
|
|
/** 列表Dom节点 */
|
|
|
|
|
listNode: '',
|
|
|
|
|
form: {},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const { query, data, drawerShow, page, loadingObj } = toRefs(details);
|
|
|
|
|
|
|
|
|
|
/** vuex */
|
|
|
|
|
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
|
|
|
|
|
console.log('permission :>> ', permission);
|
|
|
|
|
|
|
|
|
|
onMounted(() => {});
|
|
|
|
|
|
|
|
|
|
getLazyTreeAll().then(res => {
|
|
|
|
|
if (res.data.success) {
|
|
|
|
|
details.regionOptione = res.data.data;
|
|
|
|
|
// this.onLoad(this.page);
|
|
|
|
|
console.log('details.regionOptione :>> ', details.regionOptione);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** 初始化获取暂存单转运单信息 */
|
|
|
|
|
const onLoad = async () => {
|
|
|
|
|
const ids = JSON.parse($route.query.ids);
|
|
|
|
|
const res = await getOpenOrderAdvanceToWaybillInfo({ advanceIds: ids });
|
|
|
|
|
const { code, data } = res.data;
|
|
|
|
|
console.log('data :>> ', data);
|
|
|
|
|
if (code !== 200) return;
|
|
|
|
|
// 存储请求的数据
|
|
|
|
|
details.info = data;
|
|
|
|
|
|
|
|
|
|
for (let key in query.value) {
|
|
|
|
|
console.log('key :>> ', key);
|
|
|
|
|
details.query[key] = data[key];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
details.goodsList = data.goodsList.map(val => {
|
|
|
|
|
handleComputed(val);
|
|
|
|
|
return val;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// instance.proxy.$forceUpdate();
|
|
|
|
|
};
|
|
|
|
|
onLoad();
|
|
|
|
|
|
|
|
|
|
/** 新增 */
|
|
|
|
|
const handleAdd = () => {
|
|
|
|
|
const _flag = details.goodsList.every(val => {
|
|
|
|
|
// 件数和名称必填
|
|
|
|
|
if (val.goodsName === '' || !val.num) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
message: '请填写完整件数和名称',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (val.chargeType === 2 && val.weight === 0) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
message: '请填写重量',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (val.chargeType === 3 && val.price === 0) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
message: '请填写价格',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!_flag) return;
|
|
|
|
|
|
|
|
|
|
details.goodsList.push({
|
|
|
|
|
/** 货物名称 */
|
|
|
|
|
goodsName: '',
|
|
|
|
|
/** 品类Id */
|
|
|
|
|
goodsId: '',
|
|
|
|
|
/** 货物品类 */
|
|
|
|
|
waybillDetailList: '',
|
|
|
|
|
/** 计费方式 */
|
|
|
|
|
chargeType: 1,
|
|
|
|
|
/** 件数 */
|
|
|
|
|
num: 0,
|
|
|
|
|
/** 重量(kg) */
|
|
|
|
|
weight: 0,
|
|
|
|
|
/** 体积(方) */
|
|
|
|
|
volume: 0,
|
|
|
|
|
/** 单价 */
|
|
|
|
|
price: 0,
|
|
|
|
|
/** 运费小计 */
|
|
|
|
|
subtotalFreight: 0,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头输入框搜索 */
|
|
|
|
|
const inputsc = (index, row) => {
|
|
|
|
|
details.query[row.prop] = index;
|
|
|
|
|
onLoad(details.page);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头时间选择 */
|
|
|
|
|
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(details.page);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头输入框搜索 */
|
|
|
|
|
const btnsc = () => {};
|
|
|
|
|
|
|
|
|
|
/** 表格表头下拉框选择 */
|
|
|
|
|
const selectsc = (index, row) => {
|
|
|
|
|
details.query[row.prop] = index;
|
|
|
|
|
if (!index) delete details.query[row.prop];
|
|
|
|
|
if (row.prop === 'certificateTypeName') {
|
|
|
|
|
details.query['certificateType'] = index;
|
|
|
|
|
if (!index) delete details.query['certificateType'];
|
|
|
|
|
}
|
|
|
|
|
onLoad(details.page);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 表格表头复选框选择 */
|
|
|
|
|
const selectionChange = (list: any) => {
|
|
|
|
|
details.selectionList = list;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 每页数量改变执行的回调 */
|
|
|
|
|
const sizeChange = (pageSize: number) => {
|
|
|
|
|
details.page.pageSize = pageSize;
|
|
|
|
|
onLoad(details.page);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 页码改变执行的回调 */
|
|
|
|
|
const currentChange = current => {
|
|
|
|
|
details.page.pageNum = current;
|
|
|
|
|
onLoad(details.page);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 移除 */
|
|
|
|
|
const handleRemove = (index: number) => {
|
|
|
|
|
details.goodsList.splice(index, 1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 计算行合计 */
|
|
|
|
|
const handleComputed = (row: any) => {
|
|
|
|
|
console.log('row :>> ', row);
|
|
|
|
|
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;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let _ant = null;
|
|
|
|
|
/** 查询客户信息 */
|
|
|
|
|
const handleFindClientInfo = value => {
|
|
|
|
|
if (_ant) clearTimeout(_ant);
|
|
|
|
|
_ant = setTimeout(async () => {
|
|
|
|
|
if (value) {
|
|
|
|
|
const res = await postOpenOrderFindClientInfo({ clientName: value });
|
|
|
|
|
console.log('res :>> ', res);
|
|
|
|
|
}
|
|
|
|
|
clearTimeout(_ant);
|
|
|
|
|
}, 1000);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** 重置数据 */
|
|
|
|
|
const handleRefresh = () => {
|
|
|
|
|
for (let key in details.query) {
|
|
|
|
|
const _value = details.query[key];
|
|
|
|
|
const _type = Object.prototype.toString.call(_value);
|
|
|
|
|
console.log('_type :>> ', _type);
|
|
|
|
|
if (_type === '[object String]' || _type === '[object Undefined]' || _type === '[object Null]')
|
|
|
|
|
details.query[key] = '';
|
|
|
|
|
else if (_type === '[object Number]') details.query[key] = 0;
|
|
|
|
|
else if (_type === '[object Array]') details.query[key] = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let key in query.value) {
|
|
|
|
|
console.log('key :>> ', key);
|
|
|
|
|
details.query[key] = details.info[key];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
details.goodsList = details.info.goodsList.map(val => {
|
|
|
|
|
handleComputed(val);
|
|
|
|
|
return val;
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSubmit = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
formEl.validate(valid => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log('submit!');
|
|
|
|
|
const submitData = {
|
|
|
|
|
...details.query,
|
|
|
|
|
goodsList: details.goodsList,
|
|
|
|
|
advanceIds: details.advanceIds,
|
|
|
|
|
};
|
|
|
|
|
// postOpenOrderOpenWaybill()
|
|
|
|
|
} else {
|
|
|
|
|
console.log('error submit!');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border-bottom: 1px solid #777;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 页面字体大小
|
|
|
|
|
.avue-crud {
|
|
|
|
|
font-size: 12px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form_top {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-row {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
// border: 1px solid #ddd;
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
display: block;
|
|
|
|
|
border: 1px solid #777;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
> div {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
border: 1px solid #777;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 底部
|
|
|
|
|
.footer {
|
|
|
|
|
height: 80px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 提交按钮容器
|
|
|
|
|
.submitDataContainer {
|
|
|
|
|
width: 80%;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w100 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mt15 {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
