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.
2420 lines
68 KiB
2420 lines
68 KiB
<template> |
|
<div v-loading="details.loadingObj.submitLoadingBtn"> |
|
<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 class="flex-c-sb"> |
|
<div class="flex-c-c"> |
|
<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.trainNumber }}</span> |
|
</div> |
|
</div> |
|
<div class="mt10"> |
|
<el-form-item class="mt10" label="运单号: " prop="waybillNo" label-width="80px"> |
|
<div> |
|
<el-input v-model.trim="query.waybillNo" placeholder="运单号" clearable /> |
|
</div> |
|
</el-form-item> |
|
</div> |
|
</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">{{ query.openOrderUserName }}</span> |
|
</div> |
|
<el-date-picker |
|
v-model="query.openOrderDate" |
|
:readonly="$route.query.type !== 'add'" |
|
prefix-icon="Calendar" |
|
type="datetime" |
|
placeholder="创建时间" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<!-- 第一排 --> |
|
<div class="table-row mt15 border-top"> |
|
<el-form-item label="发站仓:" prop="departureWarehouseName" class="el-times"> |
|
<el-input |
|
disabled |
|
v-model="query['departureWarehouseName']" |
|
placeholder="发站仓" |
|
></el-input> |
|
</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" |
|
: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="queryDestinationWarehouseName"> |
|
<el-select |
|
class="w100" |
|
v-model="query.queryDestinationWarehouseName" |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="目的仓" |
|
@change="destinationWarehouseNameChange" |
|
:remote-method="remoteMethod" |
|
:loading="details.loadingObj.loading" |
|
> |
|
<el-option |
|
v-for="item in details.options" |
|
:key="item.value" |
|
:label="item.warehouseName" |
|
:value="item.warehouseId" |
|
/> |
|
</el-select> |
|
</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"> |
|
<el-form-item label="订单自编号:" class="el-times"> |
|
<el-input |
|
v-model="details.query.orderCode" |
|
type="textarea" |
|
placeholder="订单自编号" |
|
disabled |
|
></el-input> |
|
<el-button |
|
v-if="details.pageInfo.type !== 'edit'" |
|
class="mt10" |
|
type="primary" |
|
@click="handleChooseOrder" |
|
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('shipper', 1)" |
|
v-model="query.shipper" |
|
placeholder="发货单位" |
|
ref="shipper" |
|
> |
|
<el-table |
|
:data="details.shipperOptions" |
|
style="width: 100%" |
|
@row-click="handleChooseShipper" |
|
:loading="details.loadingObj.consignerLoading" |
|
> |
|
<el-table-column prop="clientName" label="发货单位" width="130" /> |
|
<el-table-column prop="linkMan" label="发货人" width="130" /> |
|
<el-table-column prop="linkPhone" label="发货联系电话" width="130" /> |
|
<el-table-column prop="linkAddress" label="发货地址" width="200" /> |
|
</el-table> |
|
</SelectBox> |
|
</el-form-item> |
|
|
|
<el-form-item label="发货人:" prop="shipperName"> |
|
<SelectBox |
|
:input="() => handleFindClientInfo('shipper')" |
|
v-model="query.shipperName" |
|
placeholder="发货人" |
|
ref="shipperName" |
|
> |
|
<el-table |
|
:data="details.shipperOptions" |
|
style="width: 100%" |
|
@row-click="handleChooseShipper" |
|
:loading="details.loadingObj.consignerLoading" |
|
> |
|
<el-table-column prop="clientName" label="发货单位" width="130" /> |
|
<el-table-column prop="linkMan" label="发货人" width="130" /> |
|
<el-table-column prop="linkPhone" label="发货联系电话" width="130" /> |
|
<el-table-column prop="linkAddress" label="发货地址" width="200" /> |
|
</el-table> |
|
</SelectBox> |
|
</el-form-item> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-form-item label="联系电话:" prop="shipperMobile"> |
|
<SelectBox |
|
:input="() => handleFindClientInfo('shipper')" |
|
v-model="query.shipperMobile" |
|
placeholder="联系电话" |
|
ref="shipperMobile" |
|
> |
|
<el-table |
|
:data="details.shipperOptions" |
|
style="width: 100%" |
|
@row-click="handleChooseShipper" |
|
:loading="details.loadingObj.consignerLoading" |
|
> |
|
<el-table-column prop="clientName" label="发货单位" width="130" /> |
|
<el-table-column prop="linkMan" label="发货人" width="130" /> |
|
<el-table-column prop="linkPhone" label="发货联系电话" width="130" /> |
|
<el-table-column prop="linkAddress" label="发货地址" width="200" /> |
|
</el-table> |
|
</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 class="border-left"> |
|
<div class="flex-c table-row-title">收货方</div> |
|
<div> |
|
<el-row> |
|
<el-form-item label="发货单位:" prop="consignee"> |
|
<SelectBox |
|
:input="() => handleFindClientInfo('consignee', 1)" |
|
v-model="query.consignee" |
|
placeholder="收货人" |
|
ref="consignee" |
|
> |
|
<el-table |
|
:data="details.consignerOptions" |
|
style="width: 100%" |
|
@row-click="handleChooseConsigner" |
|
:loading="details.loadingObj.consignerLoading" |
|
> |
|
<el-table-column prop="clientName" label="发货单位" width="130" /> |
|
<el-table-column prop="linkMan" label="发货人" width="130" /> |
|
<el-table-column prop="linkPhone" label="发货联系电话" width="130" /> |
|
<el-table-column prop="linkAddress" label="发货地址" width="200" /> |
|
</el-table> |
|
</SelectBox> |
|
</el-form-item> |
|
|
|
<el-form-item label="收货人:" prop="consigneeName"> |
|
<SelectBox |
|
:input="() => handleFindClientInfo('consignee')" |
|
v-model="query.consigneeName" |
|
placeholder="收货人" |
|
ref="consigneeName" |
|
> |
|
<el-table |
|
:data="details.consignerOptions" |
|
style="width: 100%" |
|
@row-click="handleChooseConsigner" |
|
:loading="details.loadingObj.consignerLoading" |
|
> |
|
<el-table-column prop="clientName" label="发货单位" width="130" /> |
|
<el-table-column prop="linkMan" label="发货人" width="130" /> |
|
<el-table-column prop="linkPhone" label="发货联系电话" width="130" /> |
|
<el-table-column prop="linkAddress" label="发货地址" width="200" /> |
|
</el-table> |
|
</SelectBox> |
|
</el-form-item> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-form-item label="联系电话:" prop="consigneeMobile"> |
|
<SelectBox |
|
:input="() => handleFindClientInfo('consignee')" |
|
v-model="query.consigneeMobile" |
|
placeholder="联系电话" |
|
ref="consigneeMobile" |
|
> |
|
<el-table |
|
:data="details.consignerOptions" |
|
style="width: 100%" |
|
@row-click="handleChooseConsigner" |
|
:loading="details.loadingObj.consignerLoading" |
|
> |
|
<el-table-column prop="clientName" label="发货单位" width="130" /> |
|
<el-table-column prop="linkMan" label="发货人" width="130" /> |
|
<el-table-column prop="linkPhone" label="发货联系电话" width="130" /> |
|
<el-table-column prop="linkAddress" label="发货地址" width="200" /> |
|
</el-table> |
|
</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 |
|
: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 |
|
: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 |
|
: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 |
|
: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 |
|
:controls="false" |
|
@change="handlePayWay" |
|
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 }}(最大数: <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"> |
|
<!-- 合计运费 --> |
|
<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"> |
|
合计费用 |
|
<span class="red">{{ 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 |
|
: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 |
|
: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 |
|
: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 |
|
: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 |
|
: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 |
|
: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 |
|
: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 |
|
: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 |
|
: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">付款方式</div> |
|
</div> |
|
<div> |
|
<el-row> |
|
<el-form-item label-width="fit-content" label="支付方式:"> |
|
<el-select v-model="query.payType" class="m-2" placeholder="支付方式"> |
|
<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-width="fit-content" label="付款方式:" prop="payWay"> |
|
<el-select |
|
v-model="query.payWay" |
|
class="m-2" |
|
@change="handlePayWay" |
|
placeholder="付款方式" |
|
> |
|
<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-width="fit-content" label="现付:"> |
|
<el-input-number |
|
: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-width="fit-content" label="到付:"> |
|
<el-input-number |
|
: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-width="fit-content" label="月结:"> |
|
<el-input-number |
|
: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-width="fit-content" label="回付:"> |
|
<el-input-number |
|
:controls="false" |
|
controls-position="right" |
|
:precision="2" |
|
:min="0" |
|
:step="0.1" |
|
v-model="query.huiPay" |
|
></el-input-number> |
|
</el-form-item> |
|
</el-row> |
|
</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 |
|
: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 v-model="query.deliveryWay" class="m-2" placeholder="送货方式"> |
|
<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 v-model="query.urgency" class="m-2" placeholder="紧急度"> |
|
<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 |
|
: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 |
|
v-model="query.receipt" |
|
class="m-2" |
|
filterable |
|
multiple |
|
placeholder="回单要求" |
|
> |
|
<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 v-model="query.transportType" class="m-2" placeholder="运输方式"> |
|
<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" placeholder="备注"></el-input> |
|
</el-form-item> |
|
|
|
<div class="flex-c-c"> |
|
<el-button icon="Close" @click="back">关闭</el-button> |
|
|
|
<el-button |
|
type="primary" |
|
:loading="details.loadingObj.submitLoadingBtn" |
|
icon="Position" |
|
@click="handleSubmit(ruleFormRef)" |
|
>提交</el-button |
|
> |
|
<!-- <el-button type="primary" icon="Refresh" @click="handleRefresh">重置</el-button> --> |
|
</div> |
|
</div> |
|
</el-form> |
|
</basic-container> |
|
|
|
<!-- 选取订单 --> |
|
<el-dialog |
|
class="el-dialog-columnList" |
|
title="选取订单" |
|
:visible.sync="details.popUpShow.columnListVisited" |
|
width="80%" |
|
v-model="details.popUpShow.columnListVisited" |
|
> |
|
<div style="display: flex"> |
|
<el-tabs |
|
v-model="details.orderStatus" |
|
tab-position="left" |
|
style="height: 100%; width: fit-content; flex: none" |
|
class="demo-tabs" |
|
@tab-click="handleClickAll" |
|
> |
|
<el-tab-pane name="haveData" label="有数据"></el-tab-pane> |
|
<el-tab-pane name="notHaveData" label="无数据"></el-tab-pane> |
|
</el-tabs> |
|
|
|
<div class="overflow"> |
|
<el-row> |
|
<div class="avue-crud__header"> |
|
<!-- 头部左侧按钮模块 --> |
|
<div class="avue-crud__left"></div> |
|
<!-- 头部右侧按钮模块 --> |
|
<div class="avue-crud__right"> |
|
<el-button icon="el-icon-refresh" @click="init" circle></el-button> |
|
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button> |
|
<el-button icon="Search" @click="searchHide" circle></el-button> |
|
</div> |
|
</div> |
|
</el-row> |
|
<!-- 表格 --> |
|
<!-- 列表模块 --> |
|
<tablecmt |
|
:columnList="details.columnList" |
|
:tableData=" |
|
details.orderStatus === 'haveData' ? details.haveDataData : details.notHaveDataData |
|
" |
|
:loading=" |
|
details.orderStatus === 'haveData' |
|
? details.loadingObj.haveDataList |
|
: details.loadingObj.notHaveDataList |
|
" |
|
@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> |
|
</div> |
|
</div> |
|
|
|
<!-- 分页模块 --> |
|
<el-pagination |
|
align="right" |
|
class="mt10" |
|
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> |
|
|
|
<div class="flex-c-c mt10"> |
|
<el-button @click="details.popUpShow.columnListVisited = false">取 消</el-button> |
|
<el-button type="primary" @click="handleChoose">确 认</el-button> |
|
</div> |
|
</el-dialog> |
|
|
|
<!-- 选取订单 --> |
|
<el-dialog |
|
title="提示" |
|
:center="true" |
|
:align-center="true" |
|
:close-on-click-modal="false" |
|
:close-on-press-escape="false" |
|
:show-close="false" |
|
:visible.sync="details.popUpShow.titleVisited" |
|
width="30%" |
|
v-model="details.popUpShow.titleVisited" |
|
> |
|
<div style="text-align: center">是否继续开单</div> |
|
<div class="flex-c-c mt20"> |
|
<el-button icon="CircleClose" @click="back">取 消</el-button> |
|
<el-button type="primary" icon="CircleCheck" @click="handleRepetition">确 认</el-button> |
|
<el-button type="primary" icon="Printer" @click="handlePrint">打 印</el-button> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { |
|
ref, |
|
reactive, |
|
toRefs, |
|
computed, |
|
onMounted, |
|
nextTick, |
|
getCurrentInstance, |
|
watch, |
|
} from 'vue'; |
|
import functions from '@/utils/functions'; |
|
import dayjs from 'dayjs'; |
|
import { mapGetters, useStore } from 'vuex'; |
|
/** 获取字典 */ |
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
import { |
|
downloadXls, |
|
computeNumber, |
|
deepClone, |
|
isNumber, |
|
setNodeHeight, |
|
getWinHeight, |
|
debounce, |
|
getObjType, |
|
} from '@/utils/util'; |
|
import { columnList, packageListColumnList } from '@/option/waybill/TemporaryStorageList'; |
|
import { getopenOrderAdvancePageList } from '@/api/waybill/TemporaryStorageList'; |
|
import { getLazyTreeAll } from '@/api/base/region'; |
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
import type { FormInstance, FormRules } from 'element-plus'; |
|
import { useRouter, useRoute } from 'vue-router'; |
|
import { |
|
postOpenOrderFindClientInfo, |
|
getOpenOrderAdvanceToWaybillInfo, |
|
postOpenOrderOpenWaybill, |
|
getOpenOrderAdvanceFindWarehouseList, |
|
postFindWaybillDetail, |
|
postUpdateWaybill, |
|
postUpdateWaybillVerify, |
|
} from '@/api/distribution/CreateOrder.js'; |
|
|
|
// 获取vue实例 |
|
const instance = getCurrentInstance(); |
|
|
|
// 获取表单实例 |
|
const ruleFormRef = ref<FormInstance>(); |
|
|
|
// 获取路由实例 |
|
const $router = useRouter(); |
|
const $route = useRoute(); |
|
|
|
// 获取vuex |
|
let useStores = useStore(); |
|
|
|
const details = reactive<any>({ |
|
/** 页面数据 */ |
|
pageInfo: {}, |
|
/** 表格搜索条件 */ |
|
query: { |
|
/** 品牌 */ |
|
brand: '', |
|
/** 创建时间 */ |
|
openOrderDate: new Date(), |
|
/** 客户车次号 */ |
|
customerTrain: '', |
|
/** 运单号 */ |
|
waybillNo: '', |
|
/** 发站仓id */ |
|
departureWarehouseId: '', |
|
/** 发站仓名称 */ |
|
departureWarehouseName: '', |
|
/** 到站 */ |
|
destination: [], |
|
/** 货号 */ |
|
'-totalNum': 0, |
|
/** 订单自编号 */ |
|
orderCode: '', |
|
/** 目的站名称 */ |
|
destinationWarehouseName: '', |
|
/** 目的仓Id */ |
|
destinationWarehouseId: '', |
|
queryDestinationWarehouseName: '', |
|
/** 货物号 */ |
|
goodsCode: '', |
|
/** 发货单位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, |
|
/** 安装费 */ |
|
installFee: 0, |
|
/** 申明价值 */ |
|
claimingValue: 0, |
|
/** 支付方式 */ |
|
payType: '', |
|
/** 付款方式 */ |
|
payWay: '2', |
|
/** 现付 */ |
|
xianPay: 0, |
|
/** 到付 */ |
|
daoPay: 0, |
|
/** 月付 */ |
|
yuePay: 0, |
|
/** 回付 */ |
|
huiPay: 0, |
|
huilaiPay: 0, |
|
/** 三方操作费 */ |
|
thirdOperationFee: 0, |
|
/** 送货方式 */ |
|
deliveryWay: '1', |
|
/** 紧急度 */ |
|
urgency: '1', |
|
/** 回单方式(多选) */ |
|
receipt: '', |
|
/** 运输方式 */ |
|
transportType: '', |
|
/** 开单人 */ |
|
openOrderUserName: '', |
|
/** 回单数 */ |
|
receiptNum: 0, |
|
/** 备注 */ |
|
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.subtotalFreight) return computeNumber(curr, '+', item.subtotalFreight).result; |
|
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: [], |
|
/** 支付字典 */ |
|
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, |
|
}, |
|
], |
|
/** 收货方 */ |
|
consignerOptions: [], |
|
/** 发货方 */ |
|
shipperOptions: [], |
|
/** 必填 */ |
|
rules: { |
|
/** 发站仓名称 */ |
|
departureWarehouseName: [ |
|
{ |
|
required: true, |
|
message: '请填写或选择发站仓', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 到站 */ |
|
destination: [ |
|
{ |
|
required: true, |
|
message: '请填写或选择到站地', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 目的站名称 */ |
|
queryDestinationWarehouseName: [ |
|
{ |
|
required: true, |
|
message: '请选择目的仓', |
|
trigger: ['blur', 'change'], |
|
}, |
|
], |
|
/** 发货单位 */ |
|
shipper: [ |
|
{ |
|
required: true, |
|
message: '请选择或输入发货单位', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 发货人 */ |
|
shipperName: [ |
|
{ |
|
required: true, |
|
message: '请选择或输入收货人', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 发货人电话 */ |
|
shipperMobile: [ |
|
{ |
|
required: true, |
|
message: '请选择或输入发货人电话', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 收货单位 */ |
|
consignee: [ |
|
{ |
|
required: true, |
|
message: '请选择或输入收货单位', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 收货人 */ |
|
consigneeName: [ |
|
{ |
|
required: true, |
|
message: '请选择或输入收货人', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 收货人电话 */ |
|
consigneeMobile: [ |
|
{ |
|
required: true, |
|
message: '请选择或输入收货人电话', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 付款方式 */ |
|
payWay: [ |
|
{ |
|
required: true, |
|
message: '请选择付款方式', |
|
trigger: ['change'], |
|
}, |
|
], |
|
/** 送货方式 */ |
|
deliveryWay: [ |
|
{ |
|
required: true, |
|
message: '请选择送货方式', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
/** 紧急度 */ |
|
urgency: [ |
|
{ |
|
required: true, |
|
message: '请选择紧急度', |
|
trigger: ['change', 'blur'], |
|
}, |
|
], |
|
}, |
|
/** 列表 */ |
|
columnList, |
|
/** 列表数据 */ |
|
haveDataData: [], |
|
notHaveDataData: [], |
|
/** 页面loading */ |
|
loadingObj: { |
|
loading: false, |
|
/** 列表加载loading */ |
|
haveDataList: false, |
|
notHaveDataList: false, |
|
/** 配载信息loading */ |
|
stowageLoading: false, |
|
/** 收货方 */ |
|
consignerLoading: false, |
|
/** 提交按钮 */ |
|
submitLoadingBtn: false, |
|
}, |
|
/** 列表复选框选中的数据 */ |
|
selectionList: [], |
|
/** 是否显示设置表格 */ |
|
drawerShow: false, |
|
/** 分页参数 */ |
|
page: { |
|
pageNum: 1, |
|
pageSize: 30, |
|
total: 0, |
|
}, |
|
/** 弹出层显示 */ |
|
popUpShow: { |
|
/** 订单选择 */ |
|
columnListVisited: false, |
|
titleVisited: false, |
|
}, |
|
/** 列表Dom节点 */ |
|
listNode: '', |
|
// 页面请求的问题 |
|
form: {}, |
|
/** 修改 -- 深拷贝goodsList, 区别：新增 / 删除 / 修改 */ |
|
deepCloneGoodsList: [], |
|
/** 提交数据 */ |
|
submitData: {}, |
|
/** tab标签有无数据 */ |
|
orderStatus: 'haveData', |
|
}); |
|
|
|
const info = ref<any>({}); |
|
|
|
const { query, data, drawerShow, page, loadingObj } = toRefs(details); |
|
|
|
// 组件实例 |
|
const consignee = ref(); |
|
const consigneeName = ref(); |
|
const consigneeMobile = ref(); |
|
// 存放收货方节点的数组 |
|
const consigneeNodeList = [consignee, consigneeName, consigneeMobile]; |
|
|
|
const shipper = ref(); |
|
const shipperName = ref(); |
|
const shipperMobile = ref(); |
|
// 存放发货方节点的数组 |
|
const shipperNodeList = [shipper, shipperName, shipperMobile]; |
|
|
|
// 合计费用 |
|
const totalCost = computed(() => { |
|
// let _num = 0; |
|
const _num = computeNumber(0, '+', details.totalObj.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; |
|
return _num; |
|
}); |
|
|
|
/** vuex */ |
|
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList'])); |
|
console.log('permission :>> ', permission); |
|
|
|
onMounted(() => {}); |
|
|
|
// 改单时, 对数据库内到站值进行转译 |
|
const handleTranslationLocation = () => { |
|
// 获取数据库中地址值 |
|
const _location = details.query.destination; |
|
|
|
console.log('_location :>> ', _location); |
|
|
|
let _arr = []; |
|
|
|
// 循环查找匹配的到站地址 |
|
for (const iterator of details.regionOptione) { |
|
let isBreak = false; |
|
|
|
if (iterator.label === _location) { |
|
_arr = [iterator.value]; |
|
isBreak = true; |
|
} else if (getObjType(iterator.children) === 'array') { |
|
for (const item of iterator.children) { |
|
if (item.label === _location) { |
|
_arr = [iterator.value, item.value]; |
|
isBreak = true; |
|
break; |
|
} else if (getObjType(item.children) === 'array') { |
|
for (const value of item.children) { |
|
if (value.label === _location) { |
|
_arr = [iterator.value, item.value, value.value]; |
|
isBreak = true; |
|
break; |
|
} |
|
} |
|
} |
|
} |
|
if (isBreak) break; |
|
} |
|
|
|
if (isBreak) break; |
|
} |
|
|
|
details.query.destination = _arr; |
|
}; |
|
|
|
// 获取省市区信息 |
|
getLazyTreeAll().then(res => { |
|
if (res.data.success) { |
|
details.regionOptione = res.data.data; |
|
|
|
if (details.query.destination) handleTranslationLocation(); |
|
} |
|
}); |
|
|
|
/** 初始化获取暂存单转运单信息 */ |
|
const onLoad = async (idsArr = []) => { |
|
let ids = []; |
|
if (idsArr.length === 0) ids = JSON.parse($route.query.ids as any); |
|
else ids = idsArr; |
|
const res = await getOpenOrderAdvanceToWaybillInfo({ advanceIds: ids }); |
|
const { code, data } = res.data; |
|
console.log('data :>> ', data); |
|
if (code !== 200) return; |
|
// 存储请求的数据 |
|
info.value = deepClone(data); |
|
console.log('info.value :>> ', info.value === data); |
|
|
|
for (let key in data) { |
|
if (data[key]) details.query[key] = data[key]; |
|
} |
|
info.value.maxNum = 0; |
|
|
|
details.goodsList = data.goodsList.map(val => { |
|
for (let valKey in val) { |
|
console.log('val[valKey] :>> ', val[valKey]); |
|
const _item = Number(val[valKey]); |
|
// 判断是否为数字并将字符串的数字转为数字 |
|
if (isNumber(_item)) { |
|
val[valKey] = _item; |
|
} |
|
} |
|
|
|
val.chargeType = val.chargeType || 1; |
|
|
|
// 计算运费小计 |
|
handleComputed(val); |
|
|
|
// 计算件数最大值 |
|
info.value.maxNum += val.num; |
|
|
|
// val.subtotalFreight = |
|
console.log('val :>> ', val); |
|
return val; |
|
}); |
|
if (data.defaultPayWay) { |
|
data.payWay = data.defaultPayWay; |
|
} else { |
|
details.query.payWay = data.payWayList.find(val => val.dictValue === '到付').dictKey || '2'; |
|
} |
|
details.query.transportType = '1'; |
|
// instance.proxy.$forceUpdate(); |
|
}; |
|
|
|
/** 获取页面信息 */ |
|
const initPageInfo = async () => { |
|
details.pageInfo = { ...$route.query }; |
|
console.log('details.pageInfo :>> ', details.pageInfo); |
|
if (details.pageInfo.type !== 'edit') onLoad(); |
|
else { |
|
const res = await postFindWaybillDetail({ waybillId: details.pageInfo.id }); |
|
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; |
|
// 转译到站 |
|
if (details.regionOptione.length !== 0) handleTranslationLocation(); |
|
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; |
|
}); |
|
} |
|
} |
|
}; |
|
|
|
/** 新增货物 */ |
|
const handleAdd = () => { |
|
if (info.value.maxNum <= details.totalObj.totalCount) { |
|
ElMessage({ |
|
message: '件数已用完, 无法再新增', |
|
type: 'warning', |
|
}); |
|
return; |
|
} |
|
|
|
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 initOrderList = async (params = {}) => { |
|
const status = details.orderStatus; |
|
|
|
try { |
|
if (status === 'haveData') details.loadingObj.haveDataList = true; |
|
else details.loadingObj.notHaveDataList = true; |
|
|
|
details.form.freezeStatus = '0'; |
|
|
|
params.hasPackage = status === 'haveData' ? 1 : 0; |
|
|
|
const res = await getopenOrderAdvancePageList(details.page, { ...details.form, ...params }); |
|
// 获取暂存单列表 |
|
console.log('res :>> ', res); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
|
|
if (status === 'haveData') details.haveDataData = data.records; |
|
else details.notHaveDataData = data.records; |
|
details.data = data.records; |
|
details.page.total = data.total; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
// 开启列表loading动画 |
|
if (status === 'haveData') details.loadingObj.haveDataList = false; |
|
else details.loadingObj.notHaveDataList = false; |
|
return null; |
|
} |
|
}; |
|
|
|
const init = (params = {}) => { |
|
details.page.pageNum = 1; |
|
details.page.total = 0; |
|
initOrderList(params); |
|
}; |
|
|
|
/** 开启订单列表 */ |
|
const handleChooseOrder = async () => { |
|
try { |
|
details.popUpShow.columnListVisited = true; |
|
// 开启列表loading动画 |
|
details.loadingObj.loading = true; |
|
|
|
await init(); |
|
|
|
nextTick(() => { |
|
const _node = document.querySelector('.el-dialog-columnList .maboxhi'); |
|
setNodeHeight(_node, '60vh'); |
|
}); |
|
|
|
// return res.data; |
|
} catch (error) { |
|
} finally { |
|
// 开启列表loading动画 |
|
details.loadingObj.loading = false; |
|
} |
|
}; |
|
|
|
/** 选择订单 */ |
|
const handleChoose = () => { |
|
try { |
|
if (details.selectionList.length === 0) { |
|
return ElMessage({ |
|
type: 'warning', |
|
message: '请选择一条数据', |
|
}); |
|
} |
|
|
|
const _dealerName = details.selectionList[0].dealerName; |
|
const _flag = details.selectionList.every(item => _dealerName === item.dealerName); |
|
|
|
if (!_flag) { |
|
return ElMessage({ |
|
type: 'warning', |
|
message: '请选择统一商场开单', |
|
}); |
|
} |
|
|
|
const ids = details.selectionList.map(val => val.id); |
|
// 请求页面数据 |
|
onLoad(ids); |
|
details.popUpShow.columnListVisited = false; |
|
details.popUpShow.titleVisited = false; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
} |
|
}; |
|
|
|
/** 表格表头输入框搜索 */ |
|
const inputsc = (index, row) => { |
|
details.query[row.prop] = index; |
|
init(); |
|
}; |
|
|
|
/** 表格表头时间选择 */ |
|
const timesc = (index, row) => { |
|
if (!!index) { |
|
index = dayjs(index).format('YYYY-MM-DD'); |
|
} |
|
details.query[row.prop] = index; |
|
if (!index) { |
|
delete details.query[row.prop]; |
|
} |
|
init(); |
|
}; |
|
|
|
/** 表格表头输入框搜索 */ |
|
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']; |
|
} |
|
init(); |
|
}; |
|
|
|
/** 表格表头复选框选择 */ |
|
const selectionChange = (list: any) => { |
|
details.selectionList = list; |
|
}; |
|
|
|
/** 每页数量改变执行的回调 */ |
|
const sizeChange = (pageSize: number) => { |
|
details.page.pageSize = pageSize; |
|
init(); |
|
}; |
|
|
|
/** 页码改变执行的回调 */ |
|
const currentChange = current => { |
|
details.page.pageNum = current; |
|
init(); |
|
}; |
|
|
|
/** 查看包明细 */ |
|
const handleShowPackageOrderList = ({ row }) => { |
|
$router.push({ |
|
path: '/waybill/orderPackageListDetails?name=包明细', |
|
query: { |
|
id: row.id, |
|
name: `订单 -- ${row.orderCode} 包明细`, |
|
}, |
|
}); |
|
}; |
|
|
|
/** 移除 */ |
|
const handleRemove = (index: number) => { |
|
details.goodsList.splice(index, 1); |
|
}; |
|
|
|
/** 查询目的仓 */ |
|
const remoteMethod = val => { |
|
debounce(async () => { |
|
if (val) { |
|
try { |
|
details.loadingObj.loading = true; |
|
const res = await getOpenOrderAdvanceFindWarehouseList({ warehouseName: val }); |
|
const { data, code } = res.data; |
|
if (code !== 200) return; |
|
details.options = data || []; |
|
} catch (error) { |
|
} finally { |
|
details.loadingObj.loading = false; |
|
} |
|
} |
|
}, 500)(); |
|
}; |
|
|
|
/** 目的仓选择时给目的仓名称赋值 */ |
|
const destinationWarehouseNameChange = val => { |
|
console.log('val :>> ', val); |
|
const _item = details.options.find(value => value.warehouseId === val); |
|
details.query.destinationWarehouseName = _item.warehouseName; |
|
details.query.destinationWarehouseId = _item.warehouseId; |
|
details.query.queryDestinationWarehouseName = details.query.destinationWarehouseName; |
|
}; |
|
|
|
/** 计算行合计 */ |
|
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; |
|
handlePayWay(); |
|
}; |
|
|
|
/** 查询客户信息 */ |
|
const handleFindClientInfo = async (type, isClearId) => { |
|
try { |
|
// 是否清除id |
|
if (isClearId) { |
|
type === 'consignee' ? (details.query.consigneeId = '') : (details.query.shipperId = ''); |
|
} |
|
|
|
details.loadingObj.consignerLoading = true; |
|
|
|
/** 发货人搜索信息 */ |
|
let shipperQuery = { |
|
clientName: details.query.shipper, |
|
linkMan: details.query.shipperName, |
|
linkPhone: details.query.shipperMobile, |
|
}; |
|
/** 寄货人搜索信息 */ |
|
let consignerQuery = { |
|
clientName: details.query.consignee, |
|
linkMan: details.query.consigneeName, |
|
linkPhone: details.query.consigneeMobile, |
|
}; |
|
|
|
const submitData = type === 'consignee' ? consignerQuery : shipperQuery; |
|
|
|
const res = await postOpenOrderFindClientInfo(submitData); |
|
const { code, data } = res.data; |
|
if (code !== 200) return; |
|
if (type === 'consignee') { |
|
details.consignerOptions = data || []; |
|
} else { |
|
details.shipperOptions = data || []; |
|
} |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.consignerLoading = false; |
|
} |
|
}; |
|
|
|
/** 客户选择 */ |
|
const handleChooseShipper = (column, prop, order) => { |
|
// 赋值 |
|
details.query.shipper = column.clientName; |
|
details.query.shipperId = column.clientId; |
|
details.query.shipperAddress = column.linkAddress; |
|
details.query.shipperName = column.linkMan; |
|
details.query.shipperMobile = column.linkPhone; |
|
shipperNodeList.forEach(val => val.value.handleClose()); |
|
}; |
|
|
|
/** 收货客户选择 */ |
|
const handleChooseConsigner = (column, prop, order) => { |
|
// 赋值 |
|
details.query.consignee = column.clientName; |
|
details.query.consigneeId = column.clientId; |
|
details.query.consigneeAddress = column.linkAddress; |
|
details.query.consigneeName = column.linkMan; |
|
details.query.consigneeMobile = column.linkPhone; |
|
consigneeNodeList.forEach(val => val.value.handleClose()); |
|
}; |
|
|
|
/** 切换tabBar */ |
|
const handleClickAll = e => { |
|
console.log('e :>> ', e); |
|
const _name = e.props.name; |
|
details.orderStatus = _name; |
|
initOnLoad(); |
|
}; |
|
|
|
/** 返回上一个页面 */ |
|
function back() { |
|
useStores.commit('DEL_TAG_CURRENT'); |
|
if (details.pageInfo.backPath) return $router.push(details.pageInfo.backPath); |
|
$router.back(); |
|
} |
|
|
|
/** 重置数据 */ |
|
const handleRefresh = () => { |
|
for (let key in details.query) { |
|
const _value = details.query[key]; |
|
const _type = Object.prototype.toString.call(_value); |
|
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] = []; |
|
} |
|
|
|
console.log('details.info :>> ', info.value.goodsList === details.goodsList); |
|
|
|
for (let key in info.value) { |
|
details.query[key] = info.value[key]; |
|
} |
|
|
|
const _cloneGoodsList = deepClone(info.value.goodsList); |
|
|
|
details.goodsList = _cloneGoodsList.map(val => { |
|
handleComputed(val); |
|
return val; |
|
}); |
|
}; |
|
|
|
/** 检测支付金额 */ |
|
const handleDetectionPayWay = () => { |
|
const minNum = 0; |
|
const payType = Number(details.query.payWay); |
|
let content = ''; |
|
|
|
switch (payType) { |
|
// 现付 |
|
case 1: |
|
if (Number(details.query.xianPay) <= minNum) content = '请输入大于0的现付金额'; |
|
break; |
|
|
|
// 到付 |
|
case 2: |
|
if (Number(details.query.daoPay) <= minNum) content = '请输入大于0的到付金额'; |
|
break; |
|
|
|
// 月结 |
|
case 3: |
|
if (Number(details.query.yuePay) <= minNum) content = '请输入大于0的月结金额'; |
|
break; |
|
|
|
// 回付 |
|
case 4: |
|
if (Number(details.query.huiPay) <= minNum) content = '请输入大于0的回付金额'; |
|
break; |
|
|
|
default: |
|
break; |
|
} |
|
|
|
return content; |
|
}; |
|
|
|
const handlePayWay = () => { |
|
const payType = Number(details.query.payWay); |
|
const enumPayType = { |
|
1: 'xianPay', |
|
2: 'daoPay', |
|
3: 'yuePay', |
|
4: 'huiPay', |
|
}; |
|
|
|
for (const key in enumPayType) { |
|
const value = enumPayType[key]; |
|
details.query[value] = 0; |
|
} |
|
|
|
console.log('Object.keys(enumPayType) :>> ', Object.keys(enumPayType)); |
|
const _item = enumPayType[payType]; |
|
|
|
if (_item) { |
|
details.query[_item] = details.totalObj.totalFreight; |
|
} |
|
}; |
|
|
|
/** 提交 */ |
|
const handleSubmit = (formEl: FormInstance | undefined) => { |
|
if (!formEl) return; |
|
formEl.validate(async valid => { |
|
if (valid) { |
|
try { |
|
// 开启loading |
|
details.loadingObj.submitLoadingBtn = true; |
|
|
|
// 检测货物名称和件数是否正确填写 |
|
const _flag = details.goodsList.every(val => { |
|
console.log('val :>> ', val); |
|
if (!val.goodsName || !isNumber(val.num) || val.num === 0) return false; |
|
return true; |
|
}); |
|
|
|
if (!_flag) { |
|
return ElMessage({ |
|
type: 'warning', |
|
message: '请填写正确的货物名称和件数', |
|
}); |
|
} |
|
|
|
console.log('submit!'); |
|
const submitData = { |
|
...details.query, |
|
waybillDetailList: details.goodsList, |
|
advanceIds: info.value.advanceIds, |
|
...details.totalObj, |
|
huilaiPay: 1, |
|
addList: [], |
|
removeList: [], |
|
}; |
|
|
|
submitData.customerTrain = details.query.trainNumber; |
|
|
|
const { destination } = submitData; |
|
|
|
console.log('destination :>> ', destination); |
|
if (destination.length === 1) { |
|
return ElMessage({ message: '请选择正确到站地址', type: 'warning' }); |
|
} |
|
|
|
// 筛选到站 |
|
const _findeLocation = details.regionOptione |
|
.find(val => val.value === destination[0]) |
|
.children.find(val => val.value === destination[1]); |
|
if (destination.length === 2) { |
|
submitData.destination = _findeLocation.label; |
|
} else { |
|
submitData.destination = _findeLocation.children.find( |
|
val => val.value === destination[2] |
|
).label; |
|
} |
|
|
|
let numFlag = false; |
|
|
|
for (const iterator of details.goodsList) { |
|
if (iterator.subtotalFreight <= 0 || !iterator.subtotalFreight) { |
|
numFlag = true; |
|
break; |
|
} |
|
} |
|
|
|
if (numFlag) return ElMessage.warning('小计费用存在异常'); |
|
|
|
const _content = handleDetectionPayWay(); |
|
if (_content) return ElMessage.warning(_content); |
|
submitData.goodsName = submitData.waybillDetailList.map(val => val.goodsName).join(','); |
|
|
|
let res: any = {}; |
|
// 新增提交 |
|
if (details.pageInfo.type !== 'edit') { |
|
submitData.addList = submitData.goodsList; |
|
submitData.removeList = []; |
|
|
|
delete submitData.goodsList; |
|
|
|
submitData.waybillType = 1; |
|
if (typeof submitData.receipt === 'object') |
|
submitData.receipt = submitData.receipt.join(','); |
|
console.log('submitData :>> ', submitData); |
|
|
|
// 记录提交参数 |
|
details.submitData = submitData; |
|
|
|
res = await postOpenOrderOpenWaybill(submitData); |
|
} else { |
|
submitData.waybillId = details.pageInfo.id; |
|
|
|
const oldGoodsList = [...details.deepCloneGoodsList]; |
|
|
|
for (let iterator of details.goodsList) { |
|
// 查看每一项是否存在Id updateType: 1新增; 2修改 |
|
if (iterator.id) { |
|
// 存在则证明为老数据 |
|
|
|
// 根据存在的数据, 筛选被删除的数据 |
|
const _item = oldGoodsList.splice( |
|
oldGoodsList.findIndex(val => val.id === iterator.id), |
|
1 |
|
); |
|
|
|
// 检测是否被修改 |
|
let _flag = false; |
|
|
|
for (const key in iterator) { |
|
_flag = iterator[key] !== _item[key]; |
|
// 检测到不一致则退出循环 |
|
if (_flag) break; |
|
} |
|
|
|
if (_flag) submitData.addList.push({ ...iterator, updateType: 2 }); |
|
} else { |
|
submitData.addList.push({ ...iterator, updateType: 1 }); |
|
} |
|
} |
|
|
|
submitData.removeList = oldGoodsList; |
|
|
|
delete submitData.goodsList; |
|
|
|
submitData.waybillType = 1; |
|
if (typeof submitData.receipt === 'object') |
|
submitData.receipt = submitData.receipt.join(','); |
|
console.log('submitData :>> ', submitData); |
|
|
|
// 记录提交参数 |
|
details.submitData = submitData; |
|
const response = await postUpdateWaybillVerify(submitData); |
|
if (response.data.code !== 200) return; |
|
|
|
if (!response.data.data) return ElMessage.warning('没有更改的数据'); |
|
|
|
// console.log( |
|
// 'response.data.data.replaceAll :>> ', |
|
// response.data.data.replaceAll(';', '</ br>') |
|
// ); |
|
|
|
ElMessageBox.alert(response.data.data.replaceAll(';', ' <br /> '), '被更改数据', { |
|
// if you want to disable its autofocus |
|
// autofocus: false, |
|
dangerouslyUseHTMLString: true, |
|
confirmButtonText: '确认', |
|
callback: async (action: Action) => { |
|
try { |
|
details.loadingObj.submitLoadingBtn = true; |
|
|
|
const res = await postUpdateWaybill(submitData); |
|
const { code, msg } = res.data; |
|
if (code !== 200) return; |
|
if (msg) ElMessage.success(msg); |
|
|
|
back(); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.submitLoadingBtn = false; |
|
} |
|
}, |
|
}); |
|
} |
|
const { code, msg } = res.data; |
|
if (code !== 200) return; |
|
if (msg) ElMessage.success(msg); |
|
|
|
// 开启提示框, 是否继续开单 |
|
if (details.pageInfo.type === 'add') details.popUpShow.titleVisited = true; |
|
console.log('res :>> ', res); |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
details.loadingObj.submitLoadingBtn = false; |
|
} |
|
} else { |
|
console.log('error submit!'); |
|
return false; |
|
} |
|
}); |
|
}; |
|
|
|
/** 重复开单 */ |
|
const handleRepetition = () => { |
|
handleChooseOrder(); |
|
}; |
|
|
|
watch( |
|
$route, |
|
() => { |
|
if ($route.path !== '/distribution/inventory/CreateOrder') return; |
|
|
|
initPageInfo(); |
|
}, |
|
{ immediate: true } |
|
); |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
$borderColor: #172e60; |
|
: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 $borderColor; |
|
border-radius: 0; |
|
} |
|
|
|
.border-left { |
|
border-left: 1px dashed $borderColor; |
|
} |
|
|
|
// 页面字体大小 |
|
.avue-crud { |
|
font-size: 12px !important; |
|
} |
|
|
|
.form_top { |
|
margin-bottom: 10px; |
|
} |
|
|
|
.border-top { |
|
border-top: 1px dashed $borderColor; |
|
} |
|
|
|
.table-row { |
|
width: 100%; |
|
display: flex; |
|
// border-top: 1px dashed $borderColor; |
|
border-left: 1px dashed $borderColor; |
|
border-bottom: none; |
|
box-sizing: border-box; |
|
|
|
&:first-child { |
|
display: block; |
|
border-top: 1px dashed $borderColor; |
|
border-left: 1px dashed $borderColor; |
|
|
|
> div { |
|
width: 100%; |
|
border: none; |
|
} |
|
} |
|
|
|
&:last-child { |
|
display: block; |
|
border-bottom: 1px dashed $borderColor; |
|
border-right: 1px dashed $borderColor; |
|
box-sizing: border-box; |
|
|
|
> div { |
|
width: 100%; |
|
border: none; |
|
} |
|
} |
|
|
|
> div { |
|
flex: 1; |
|
padding: 5px; |
|
border-bottom: 1px dashed $borderColor; |
|
border-right: 1px dashed $borderColor; |
|
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-title-item { |
|
display: flex; |
|
align-items: center; |
|
font-size: 14px; |
|
|
|
&::before { |
|
content: ''; |
|
display: block; |
|
width: 2px; |
|
height: 25px; |
|
background-color: var(--el-color-primary); |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.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; |
|
} |
|
|
|
.w100 { |
|
width: 100%; |
|
} |
|
|
|
.mt15 { |
|
margin-top: 15px; |
|
} |
|
|
|
.mt20 { |
|
margin-top: 20px; |
|
color: var(--el-color-primary); |
|
} |
|
|
|
.red { |
|
color: var(--token-simulation-red-base-62); |
|
} |
|
|
|
:deep(.el-divider__text.is-center) { |
|
font-size: 28px; |
|
} |
|
|
|
.overflow { |
|
overflow: hidden; |
|
} |
|
|
|
:deep(.el-form-item__label) { |
|
color: var(--el-color-primary); |
|
font-weight: bold; |
|
} |
|
</style>
|
|
|