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.
2622 lines
69 KiB
2622 lines
69 KiB
<template> |
|
<el-card class="box-card"> |
|
<template #header> |
|
<div class="card-header"> |
|
<span>当前签收单状态</span> |
|
</div> |
|
<el-steps :active="active" finish-status="success"> |
|
<el-step title="待签收" /> |
|
<el-step title="司机签收" /> |
|
<el-step title="文员审核" /> |
|
</el-steps> |
|
</template> |
|
|
|
<!-- 基础信息 --> |
|
<el-divider content-position="left"> 基本信息</el-divider> |
|
<div class="Basic-information"> |
|
<div class="el-txt"> |
|
<el-icon><List /></el-icon> |
|
<span class="title-name">预约单号:</span> |
|
<el-tooltip |
|
:content="form.reservationCode ? form.reservationCode : '暂无商场名称'" |
|
placement="top" |
|
> |
|
<el-input v-model="form.reservationCode" disabled placeholder="预约单号" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><School /></el-icon> |
|
<span class="title-name">商场名称:</span> |
|
<el-tooltip :content="form.mallName ? form.mallName : '暂无商场名称'" placement="top"> |
|
<el-input v-model="form.mallName" disabled placeholder="商场名称" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><Calendar /></el-icon> |
|
<span class="title-name"> 预约时间:</span> |
|
<el-tooltip |
|
:content="form.reservationDate ? form.reservationDate : '暂无预约时间'" |
|
placement="top" |
|
> |
|
<el-input v-model="form.reservationDate" disabled placeholder="预约时间" /> |
|
</el-tooltip> |
|
</div> |
|
</div> |
|
|
|
<!-- 配送信息 --> |
|
<el-divider content-position="left">配送信息</el-divider> |
|
<div class="Basic-information"> |
|
<div class="el-txt"> |
|
<el-icon><Van /></el-icon> |
|
<span class="title-name">配送车次:</span> |
|
<el-tooltip :content="form.trainNumber ? form.trainNumber : '暂无司机姓名'" placement="top"> |
|
<el-input v-model="form.trainNumber" disabled placeholder="配送车次" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><User /></el-icon> |
|
<span class="title-name">司机姓名:</span> |
|
<el-tooltip :content="form.driverName ? form.driverName : '暂无司机姓名'" placement="top"> |
|
<el-input v-model="form.driverName" disabled placeholder="司机姓名" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><Postcard /></el-icon> |
|
<span class="title-name"> 车辆牌照:</span> |
|
<el-tooltip :content="form.vehicleName ? form.vehicleName : '暂无车辆牌照'" placement="top"> |
|
<el-input v-model="form.vehicleName" disabled placeholder="车辆牌照" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><Van /></el-icon> |
|
<span class="title-name"> 装车班组:</span> |
|
<el-tooltip |
|
:content="form.loadingTeamName ? form.loadingTeamName : '暂无装车班组'" |
|
placement="top" |
|
> |
|
<el-input v-model="form.loadingTeamName" disabled placeholder="装车班组" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt" style="margin-top: 20px"> |
|
<el-icon><Van /></el-icon> |
|
<span class="title-name"> 卸车班组:</span> |
|
<el-tooltip |
|
:content="form.unLoadingTeamName ? form.unLoadingTeamName : '暂无卸车班组'" |
|
placement="top" |
|
> |
|
<el-input v-model="form.unLoadingTeamName" disabled placeholder="卸车班组" /> |
|
</el-tooltip> |
|
</div> |
|
</div> |
|
|
|
<!-- 收货人信息 --> |
|
<el-divider content-position="left">收货人信息</el-divider> |
|
<div class="Basic-information"> |
|
<div class="el-txt"> |
|
<el-icon><User /></el-icon> |
|
<span class="title-name">收货人姓名:</span> |
|
<el-tooltip :content="form.consignee ? form.consignee : '暂无收货人姓名'" placement="top"> |
|
<el-input v-model="form.consignee" disabled placeholder="收货人姓名" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><User /></el-icon> |
|
<span class="title-name">收货人号码:</span> |
|
<el-tooltip |
|
:content="form.deliveryPhone ? form.deliveryPhone : '暂无收货人号码'" |
|
placement="top" |
|
> |
|
<el-input v-model="form.deliveryPhone" disabled placeholder="收货人号码" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><Postcard /></el-icon> |
|
<span class="title-name"> 收货人地址:</span> |
|
<el-tooltip |
|
:content="form.deliveryAddress ? form.deliveryAddress : '暂无收货人地址'" |
|
placement="top" |
|
> |
|
<el-input v-model="form.deliveryAddress" disabled placeholder="收货人地址" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt"> |
|
<el-icon><Van /></el-icon> |
|
<span class="title-name"> 是否加急:</span> |
|
<el-tooltip :content="form.isUrgent ? form.isUrgent : '暂无加急信息'" placement="top"> |
|
<el-input v-model="form.isUrgent" disabled placeholder="是否加急" /> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-txt notes"> |
|
<el-icon><Edit /></el-icon> |
|
<span class="title-name title-notes"> 客户备注:</span> |
|
<el-tooltip :content="form.remarks ? form.remarks : '暂无备注信息'" placement="top"> |
|
<el-input v-model="form.remarks" disabled placeholder="客户备注" /> |
|
</el-tooltip> |
|
</div> |
|
</div> |
|
<!-- 签收信息 --> |
|
<el-divider content-position="left">签收信息</el-divider> |
|
<div class="Basic-information"> |
|
<div class="el-txt"> |
|
<el-icon><Star /></el-icon> |
|
<span class="title-name">签收类型:</span> |
|
<el-radio-group v-model="form.signingType" disabled> |
|
<el-radio label="1" size="large" border>签收</el-radio> |
|
<el-radio label="2" size="large" border>待签收</el-radio> |
|
</el-radio-group> |
|
</div> |
|
<div class="el-txt el-positioning"> |
|
<el-icon><LocationInformation /></el-icon> |
|
<span class="title-name">定位打卡:</span> |
|
<el-tooltip |
|
:content="form.positioningAdr ? form.positioningAdr : '暂无定位打卡'" |
|
placement="top" |
|
> |
|
<el-input |
|
class="positioning" |
|
v-model="form.positioningAdr" |
|
disabled |
|
placeholder="定位打卡位置" |
|
/> |
|
</el-tooltip> |
|
</div> |
|
<div class="el-sw"> |
|
<div class="el-box"> |
|
<div class="icon-tit"> |
|
<el-icon><LocationInformation /></el-icon> |
|
<span class="title-name">文员备注:</span> |
|
</div> |
|
<el-tooltip |
|
:content="form.clerkSignRemarks ? form.clerkSignRemarks : '暂无文员备注'" |
|
placement="top" |
|
> |
|
<el-input |
|
class="positioning" |
|
v-model="form.clerkSignRemarks" |
|
disabled |
|
placeholder="文员备注" |
|
/> |
|
</el-tooltip> |
|
</div> |
|
|
|
<div class="el-box"> |
|
<div class="icon-tit"> |
|
<el-icon><LocationInformation /></el-icon> |
|
<span class="title-name">司机备注:</span> |
|
</div> |
|
<el-tooltip |
|
:content="form.driverRemarks ? form.driverRemarks : '暂无司机备注'" |
|
placement="top" |
|
> |
|
<el-input |
|
class="positioning" |
|
v-model="form.driverRemarks" |
|
disabled |
|
placeholder="司机备注" |
|
/> |
|
</el-tooltip> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="FImg"> |
|
<div class="imgName"> |
|
<span |
|
><el-icon><PictureFilled /></el-icon>上门照</span |
|
> |
|
<!-- DoorstepPhoto --> |
|
<el-upload |
|
v-model:file-list="DoorstepPhoto" |
|
:action="doubledCount" |
|
list-type="picture-card" |
|
:on-preview="EnlargeTheTmageA" |
|
:on-remove="handleRemove" |
|
:on-success="ImgSuccessA" |
|
:headers="headers" |
|
disabled |
|
> |
|
<el-icon><Plus /></el-icon> |
|
</el-upload> |
|
<el-dialog v-model="dialogVisibleA"> |
|
<!-- <img w-full :src="dialogImageUrlA" alt="IMG" /> --> |
|
<el-image |
|
style="width: 100px; height: 100px" |
|
:src="dialogImageUrlA" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="srcListA" |
|
:initial-index="1" |
|
fit="cover" |
|
/> |
|
</el-dialog> |
|
</div> |
|
|
|
<div class="imgName"> |
|
<span |
|
><el-icon><PictureFilled /></el-icon>堆码照</span |
|
> |
|
<!-- StackingPhoto --> |
|
<el-upload |
|
v-model:file-list="StackingPhoto" |
|
:action="doubledCount" |
|
list-type="picture-card" |
|
:on-preview="EnlargeTheTmageB" |
|
:on-remove="handleRemove" |
|
:on-success="ImgSuccessB" |
|
:headers="headers" |
|
disabled |
|
> |
|
<el-icon><Plus /></el-icon> |
|
</el-upload> |
|
<el-dialog v-model="dialogVisibleB"> |
|
<div class="tc-img"> |
|
<!-- <img w-full :src="dialogImageUrlB" alt="IMG" /> --> |
|
<el-image |
|
style="width: 100px; height: 100px" |
|
:src="dialogImageUrlB" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="srcListB" |
|
:initial-index="1" |
|
fit="cover" |
|
/> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
|
|
<div class="imgName"> |
|
<span |
|
><el-icon><PictureFilled /></el-icon>易碎照</span |
|
> |
|
<!-- FragilePhotos --> |
|
<el-upload |
|
v-model:file-list="FragilePhotos" |
|
:action="doubledCount" |
|
list-type="picture-card" |
|
:on-preview="EnlargeTheTmageC" |
|
:on-remove="handleRemove" |
|
:on-success="ImgSuccessC" |
|
:headers="headers" |
|
disabled |
|
> |
|
<el-icon><Plus /></el-icon> |
|
</el-upload> |
|
<el-dialog v-model="dialogVisibleC"> |
|
<!-- <img w-full :src="dialogImageUrlC" alt="IMG" /> --> |
|
<el-image |
|
style="width: 100px; height: 100px" |
|
:src="dialogImageUrlC" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="srcListC" |
|
:initial-index="1" |
|
fit="cover" |
|
/> |
|
</el-dialog> |
|
</div> |
|
|
|
<div class="imgName"> |
|
<span |
|
><el-icon><PictureFilled /></el-icon>家配照</span |
|
> |
|
<!-- HomePhotos --> |
|
<el-upload |
|
v-model:file-list="HomePhotos" |
|
:action="doubledCount" |
|
list-type="picture-card" |
|
:on-preview="EnlargeTheTmageD" |
|
:on-remove="handleRemove" |
|
:on-success="ImgSuccessD" |
|
:headers="headers" |
|
disabled |
|
> |
|
<el-icon><Plus /></el-icon> |
|
</el-upload> |
|
<el-dialog v-model="dialogVisibleD"> |
|
<!-- <img w-full :src="dialogImageUrlD" alt="IMG" /> |
|
<el-dialog v-model="dialogVisibleC"> --> |
|
<el-image |
|
style="width: 100px; height: 100px" |
|
:src="dialogImageUrlD" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="srcListD" |
|
:initial-index="1" |
|
fit="cover" |
|
/> |
|
</el-dialog> |
|
</div> |
|
|
|
<div class="imgName"> |
|
<span |
|
><el-icon><PictureFilled /></el-icon>签收照</span |
|
> |
|
<!-- SignForPhotos --> |
|
<el-upload |
|
v-model:file-list="SignForPhotos" |
|
:action="doubledCount" |
|
list-type="picture-card" |
|
:on-preview="EnlargeTheTmageE" |
|
:on-remove="handleRemove" |
|
:on-success="ImgSuccessE" |
|
:headers="headers" |
|
disabled |
|
> |
|
<el-icon><Plus /></el-icon> |
|
</el-upload> |
|
<el-dialog v-model="dialogVisibleE"> |
|
<!-- <img w-full :src="dialogImageUrlE" alt="IMG" /> --> |
|
<el-image |
|
style="width: 100px; height: 100px" |
|
:src="dialogImageUrlE" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="srcListE" |
|
:initial-index="1" |
|
fit="cover" |
|
/> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
|
|
<!-- 签收信息 --> |
|
|
|
<el-collapse class="el_commodity" v-model="activeNames" style="margin-top: 10px"> |
|
<el-collapse-item title="商品信息" name="1"> |
|
<el-tabs |
|
v-loading="editLoading" |
|
element-loading-text="加载中..." |
|
type="border-card" |
|
@tab-click="tabClick" |
|
> |
|
<el-button type="primary" @click="Signforexport">导出</el-button> |
|
<template v-for="item in Tabs" :key="item.name"> |
|
<el-tab-pane :label="item.label" :name="item.name"> |
|
<template v-if="item.type === 'package'"> |
|
<el-tabs |
|
tabPosition="left" |
|
v-model="item.activeName" |
|
class="demo-tabs" |
|
@tab-change="handleChooseSigneState" |
|
> |
|
<el-tab-pane label="已签收" name="haveBeenSigned"></el-tab-pane> |
|
<el-tab-pane label="未签收" name="unreceipted"></el-tab-pane> |
|
</el-tabs> |
|
</template> |
|
|
|
<tablecmt |
|
class="goodsTable" |
|
:columnList="item.columnList" |
|
:tableData="item.renderData" |
|
:loading="false" |
|
@inputTxt="(value, row) => inputsc(value, row, item.type)" |
|
> |
|
</tablecmt> |
|
</el-tab-pane> |
|
</template> |
|
</el-tabs> |
|
<!-- <span class="gx_num">勾选数量：{{ sptemp.length }}</span> --> |
|
</el-collapse-item> |
|
</el-collapse> |
|
|
|
<!-- 增值服务信息 --> |
|
<el-collapse @change="ServiceChange" style="margin-top: 10px"> |
|
<el-collapse-item title="增值服务信息" name="2"> |
|
<el-tabs |
|
v-loading="ZCeditLoading" |
|
element-loading-text="加载中..." |
|
type="border-card" |
|
@tab-click="tabClickB" |
|
> |
|
<template v-for="item in TabB" :key="item.name"> |
|
<el-tab-pane :label="item.label" :name="item.name"> |
|
<div class="tab-title"> |
|
<div class="BatchDelete"> |
|
<el-button type="primary" @click="newlyAdded(item.name)"> 新增 </el-button> |
|
<el-button |
|
v-if="ZCTableData.length > 0" |
|
type="primary" |
|
@click="BatchDelete(item.name)" |
|
> |
|
批量移除 |
|
</el-button> |
|
<!-- :disabled="ZcBtnDis"--> |
|
</div> |
|
<template v-for="(item, index) in TabTitle" :key="index"> |
|
<span> |
|
<el-icon><component :is="item.icon" /></el-icon> {{ item.name }} |
|
{{ item.value }} |
|
{{ item.tap }} |
|
</span> |
|
</template> |
|
</div> |
|
<div class="el-Cart"> |
|
<!-- 表格列开始 --> |
|
<el-table |
|
:data="dataAdded" |
|
row-key="name" |
|
border |
|
height="500" |
|
style="width: 100%" |
|
ref="tableRef" |
|
@select-all="DataSelectAll" |
|
@select="ZcSelectChange" |
|
> |
|
<el-table-column type="selection" width="55" fixed /> |
|
<el-table-column |
|
type="index" |
|
fixed |
|
width="50" |
|
height="100" |
|
label="#" |
|
align="center" |
|
/> |
|
|
|
<!-- |
|
Type ===1 普通文本 |
|
Type ===2 图片显示 |
|
Type ===3 操作功能 |
|
label: 标题 |
|
width: 宽度 |
|
prop: 数据字段 |
|
--> |
|
<el-table-column |
|
:prop="item.prop" |
|
:label="item.label" |
|
:width="item.width" |
|
:fixed="item.fixed" |
|
align="center" |
|
v-for="(item, index) in menuDataB" |
|
:key="item.label" |
|
> |
|
<template #default="props"> |
|
<!-- <div :class="ElBtnClass" v-if="item.type === 3">--> |
|
<!--<!– <span>aaa</span>–>--> |
|
<!-- <el-button--> |
|
<!-- :disabled="props.row.checkbox"--> |
|
<!-- :link="ElButtonS[0].link"--> |
|
<!-- :class="ElButtonS[0].class"--> |
|
<!-- :auto-insert-space="ElButtonS[0].space"--> |
|
<!-- :size="ElButtonS[0].size"--> |
|
<!-- :icon="ElButtonS[0].icon"--> |
|
<!-- @click="DeleteEvent(props.row)"--> |
|
<!-- >移除</el-button--> |
|
<!-- >--> |
|
<!-- </div>--> |
|
<span v-if="item.type == 6">{{ |
|
props.row[item.prop] == 1 |
|
? '定制品' |
|
: props.row[item.prop] == 2 |
|
? '库存品' |
|
: props.row[item.prop] == 3 |
|
? '零担' |
|
: '/' |
|
}}</span> |
|
|
|
<span v-if="item.type == 4">{{ |
|
props.row[item.prop] ? props.row[item.prop] : '/' |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
|
|
<!-- 表格翻页功能 --> |
|
<!-- <div class="demo-pagination-block"> |
|
<el-pagination |
|
v-model:current-page="currentPage" |
|
v-model:page-size="pageSize" |
|
:page-sizes="pageList" |
|
:disabled="disabled" |
|
:background="background" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="total" |
|
@size-change="PageSizeChange" |
|
@current-change="SizeChange" |
|
/> |
|
</div> --> |
|
</div> |
|
</el-tab-pane> |
|
</template> |
|
</el-tabs> |
|
<span class="gx_num">勾选数量:{{ ZCTableData.length }}</span> |
|
</el-collapse-item> |
|
</el-collapse> |
|
<!-- 增值服务弹窗信息 --> |
|
|
|
<el-dialog @close="TzClose" v-model="dialogBatchDelete" :title="TcServices" width="80%"> |
|
<!-- 搜索功能 --> |
|
<el-form v-if="tcSo" :inline="true" :model="TcSoInput" style="display: flex"> |
|
<el-form-item label="订单自编号:"> |
|
<el-input v-model="TcSoInput.orderCode" placeholder="请输入订单自编号" clearable /> |
|
</el-form-item> |
|
|
|
<el-form-item label="包条码:"> |
|
<el-input v-model="TcSoInput.orderPackageCode" placeholder="请输入包条码" clearable /> |
|
</el-form-item> |
|
|
|
<el-form-item label="物料名称:"> |
|
<el-input v-model="TcSoInput.materialName" placeholder="请输入物料名称" clearable /> |
|
</el-form-item> |
|
|
|
<el-form-item label="物料编码:"> |
|
<el-input v-model="TcSoInput.materialCode" placeholder="请输入物料名称" clearable /> |
|
</el-form-item> |
|
|
|
<el-form-item class="el-BtnSoInput"> |
|
<el-button @click="ServiceReset">重置</el-button> |
|
<el-button type="primary" @click="serviceSearch">搜索</el-button> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<!-- 头部右侧按钮模块 --> |
|
<div class="avue-crud__right"> |
|
<el-button icon="el-icon-refresh" @click="searchChange" circle></el-button> |
|
<el-button icon="el-icon-search" @click="searchHide" circle></el-button> |
|
</div> |
|
<!-- 表格列开始 --> |
|
<el-table |
|
:data="TcDataAdded" |
|
border |
|
height="500" |
|
style="width: 100%" |
|
ref="tableRefs" |
|
v-loading="TCeditLoading" |
|
element-loading-text="加载中..." |
|
@select-all="selectAll" |
|
@select="selectChange" |
|
> |
|
<el-table-column type="selection" width="55" fixed /> |
|
<el-table-column type="index" fixed width="50" height="100" label="#" align="center" /> |
|
|
|
<!-- |
|
Type ===1 普通文本 |
|
Type ===2 图片显示 |
|
Type ===3 操作功能 |
|
label: 标题 |
|
width: 宽度 |
|
prop: 数据字段 |
|
--> |
|
<el-table-column |
|
:prop="item.prop" |
|
:label="item.label" |
|
:width="item.width" |
|
:fixed="item.fixed" |
|
align="center" |
|
v-for="(item, index) in menuDataB" |
|
:key="item.label" |
|
> |
|
<template #default="props"> |
|
<span v-if="item.type == 6">{{ |
|
props.row[item.prop] == 1 |
|
? '定制品' |
|
: props.row[item.prop] == 2 |
|
? '库存品' |
|
: props.row[item.prop] == 3 |
|
? '零担' |
|
: '/' |
|
}}</span> |
|
<span v-if="item.type == 7 && props.row.conditions == 3"> |
|
<el-input-number |
|
:placeholder="'请输入' + props.row.firsts + '数量'" |
|
v-model="props.row.zeroQuantity" |
|
:disabled="props.row.checkbox" |
|
:min="0" |
|
:max="props.row.maxQuantity" |
|
/> |
|
</span> |
|
<span v-if="item.type == 4">{{ |
|
props.row[item.prop] ? props.row[item.prop] : '/' |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<span class="gx_num">勾选数量:{{ TcTemp.length }}</span> |
|
<template #footer> |
|
<!-- 表格翻页功能 --> |
|
<div class="demo-pagination-block"> |
|
<!-- <el-pagination |
|
v-model:current-page="currentPage" |
|
v-model:page-size="pageSize" |
|
:page-sizes="pageList" |
|
:disabled="disabled" |
|
:background="background" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="total" |
|
@size-change="PageSizeChange" |
|
@current-change="SizeChange" |
|
/> --> |
|
<span></span> |
|
<span class="dialog-footer"> |
|
<el-button @click="TCdialogBatchDelete">取消</el-button> |
|
<el-button type="primary" @click="addedSubmission"> 提交 </el-button> |
|
</span> |
|
</div> |
|
</template> |
|
</el-dialog> |
|
<el-dialog v-model="ConfirmationInformation" title="数据确认" width="50%"> |
|
<el-form :inline="true" :model="TcZcInput" style="display: flex" class="tcSoInput"> |
|
<el-form-item label="包件总数:"> |
|
<el-input v-model="TcTemp.length" disabled placeholder="已选择包件总数" /> |
|
</el-form-item> |
|
|
|
<el-form-item :label="TcServices == '上楼' ? TcServices : '距离'"> |
|
<el-input |
|
v-if="TcServices == '上楼'" |
|
v-model="TcZcInput.floolNum" |
|
placeholder="请输入楼层" |
|
style="width: 200px" |
|
/> |
|
<el-input |
|
v-if="TcServices == '超区'" |
|
v-model="TcZcInput.distance" |
|
placeholder="请输入距离 单位:公里" |
|
style="width: 200px" |
|
/> |
|
|
|
<el-input |
|
v-if="TcServices == '平移'" |
|
v-model="TcZcInput.distance" |
|
placeholder="请输入距离 单位:米" |
|
style="width: 200px" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item label="费用:" width="200px"> |
|
<el-input v-model="TcZcInput.fee" placeholder="请输入费用" /> |
|
</el-form-item> |
|
</el-form> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="TCancellation">取消</el-button> |
|
<el-button type="primary" @click="ConfirmSubmission"> 确认提交 </el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
</el-card> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, computed, nextTick } from 'vue'; |
|
import { useRoute, useRouter } from 'vue-router'; |
|
import { |
|
getDetail, |
|
signforPackageList, |
|
signforInventoryList, |
|
addvalueInfoList, |
|
$_checkAddValuePackageList, |
|
$_saveSignAddValuePackage, |
|
$_cancelSignAddValuePackage, |
|
$_updateSignAddValuePackage, |
|
$_distributionSignforPackageList, |
|
$_distributionSignforOrderList, |
|
} from '@/api/distribution/distributionSignfor'; |
|
import { getToken } from '@/utils/auth'; |
|
import { ElMessage } from 'element-plus'; |
|
import { ElMessageBox } from 'element-plus'; |
|
import { setNodeHeight } from '@/utils/util'; |
|
import { onMounted } from 'vue'; |
|
import { downloadXls } from '@/utils/util'; |
|
const form = ref({}); //基础信息 |
|
const RouterId = ref(null); //编辑ID |
|
const RouterReservationId = ref(null); //编辑参数 |
|
const DoorstepPhoto = ref([]); // 上门照 |
|
const StackingPhoto = ref([]); // 堆门照 |
|
const sptemp = ref([]); //签收表格选中的 |
|
const FragilePhotos = ref([]); // 易碎照 |
|
const HomePhotos = ref([]); // 家配照 |
|
const SignForPhotos = ref([]); //签收照 |
|
const data = ref([]); //表格数据展示切换 |
|
const InitializeTable = ref([]); //初始化展示信息（不可被修改） |
|
const menuData = ref([]); //表格头部 |
|
const menuDataB = ref([]); //增值服务表格头部 |
|
const editLoading = ref(false); //表格切换加载 |
|
const tableRefs = ref(null); //增值服务表格实例 |
|
const currentPage = ref(1); // 默认页码 |
|
const pageSize = ref(30); // 默认每一页几条 |
|
const SignforMenu = ref({ |
|
closable: false, |
|
disabled: false, |
|
label: '订单列表', |
|
lazy: false, |
|
name: '0', |
|
}); //商品信息菜单 |
|
const total = ref(0); //页码总页数 |
|
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条 |
|
const background = ref(true); // 是否开启背景颜色 |
|
const disabled = ref(false); // 是否禁止使用页码功能 |
|
const dialogImageUrlA = ref(''); |
|
const dialogImageUrlB = ref(''); |
|
const dialogImageUrlC = ref(''); |
|
const dialogImageUrlD = ref(''); |
|
const dialogImageUrlE = ref(''); |
|
const dialogVisibleA = ref(false); //是否显放大图片 |
|
const dialogVisibleB = ref(false); |
|
const dialogVisibleC = ref(false); |
|
const dialogVisibleD = ref(false); |
|
const dialogVisibleE = ref(false); |
|
const activeNames = ref(['1']); |
|
const ElBtnClass = ref('el-Btn-link'); //按钮样式风格类名 |
|
const active = ref(1); //签收状态 |
|
const route = useRoute(); |
|
const router = useRouter(); //参数ID |
|
const dataAdded = ref([]); //增值服务表格渲染参数 |
|
const ZCeditLoading = ref(false); //增值表格渲染 |
|
const TcDataAdded = ref([]); //弹窗表格渲染的数据 |
|
// const TabIndex = ref(0); //增值服务标题默认显示 |
|
const TCeditLoading = ref(false); //弹窗的加载Load |
|
const dialogBatchDelete = ref(false); |
|
const TcSoInput = ref({}); //增值服务弹窗搜索表单 |
|
const TcServices = ref('上楼'); //增值服务弹窗标题 |
|
const TcIndex = ref(1); //Tab栏下标，用于重新渲染表格展示数据 |
|
const tcSo = ref(false); //搜索框 |
|
const ZcBtnDis = ref(true); //增值服务按钮禁止 |
|
const ConfirmationInformation = ref(false); //增值服务确认框 |
|
const TcZcInput = ref({}); //增值服务距离费用包间确认信息 |
|
const TcTemp = ref([]); //弹窗临时存储 |
|
const TcData = ref([]); //弹窗要提交的数据 |
|
const state = ref(false); //状态表格勾选 |
|
const ZCTableData = ref([]); //增值服务表格数据 |
|
const ServiceRadioSelection = ref([]); //增值服务单选删除 |
|
const TabInfo = ref(null); //标题栏切换的参数 |
|
const addvalueDetailId = ref(null); //增值服务新增必要参数 |
|
const TcBtn = ref(false); //增值服务弹窗去掉操作栏 |
|
const enlargeImage = (dialogImageUrl, dialogVisible) => { |
|
return uploadFile => { |
|
console.log(uploadFile, '点击放大的内容'); |
|
dialogImageUrl.value = uploadFile.url; |
|
dialogVisible.value = true; |
|
}; |
|
}; |
|
// 点击放大图片 |
|
const EnlargeTheTmageA = enlargeImage(dialogImageUrlA, dialogVisibleA); |
|
const EnlargeTheTmageB = enlargeImage(dialogImageUrlB, dialogVisibleB); |
|
const EnlargeTheTmageC = enlargeImage(dialogImageUrlC, dialogVisibleC); |
|
const EnlargeTheTmageD = enlargeImage(dialogImageUrlD, dialogVisibleD); |
|
const EnlargeTheTmageE = enlargeImage(dialogImageUrlE, dialogVisibleE); |
|
const srcListA = ref([]); |
|
const srcListB = ref([]); |
|
const srcListC = ref([]); |
|
const srcListD = ref([]); |
|
const srcListE = ref([]); |
|
const srcList = []; |
|
const TabTitle = ref([ |
|
{ name: '公里数:', value: '暂无数据', tap: '公里', icon: 'Van', btn: '新增' }, |
|
{ name: '费用:', value: '暂无数据', tap: '￥', icon: 'Coin', btn: '新增' }, |
|
{ name: '楼层:', value: '暂无数据', tap: '层', icon: 'School', btn: '新增' }, |
|
{ name: '件数:', value: '暂无数据', tap: '件', icon: 'Box', btn: '新增' }, |
|
]); |
|
// 订单列表 |
|
const menuData1 = ref([ |
|
|
|
|
|
{ |
|
prop: 'waybillNumber', |
|
label: '运单号', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'serviceNumber', |
|
label: '服务号', |
|
type: 2, |
|
values: '', |
|
width: '250', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderCode', |
|
label: '订单自编号', |
|
type: 2, |
|
values: '', |
|
width: '130', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'warehouse', |
|
label: '仓库', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'totalNumber', |
|
label: '总数量', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'handQuantity', |
|
label: '在库数量', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'reservationNum', |
|
label: '计划数量', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'loadingNumber', |
|
label: '装车数量', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'signingNumber', |
|
label: '签收数量', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
|
|
{ |
|
prop: 'brand', |
|
label: '品牌', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'consigneeUnit', |
|
label: '收货单位', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'mallName', |
|
label: '商场名称', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'storeName', |
|
label: '门店名称', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'consigneePerson', |
|
label: '运单收货人', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'consigneeAddress', |
|
label: '运单收货地址', |
|
type: 2, |
|
values: '', |
|
width: '250', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
|
|
|
|
{ |
|
prop: 'consigneeMobile', |
|
label: '运单收货电话', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'customerName', |
|
label: '终端收货人', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'customerAddress', |
|
label: '终端收货地址', |
|
type: 2, |
|
values: '', |
|
width: '400', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'customerTelephone', |
|
label: '终端收货电话', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
|
|
prop: 'descriptionGoods', |
|
label: '货物名称', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'reservationNum', |
|
label: '计划包件数', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
|
|
|
|
|
|
]); |
|
// 包件列表 |
|
// 包件列表 |
|
// 包件列表 |
|
// 包件列表 |
|
// 包件列表 |
|
// 包件列表 |
|
// 包件列表 |
|
// 包件列表 |
|
const menuData2 = ref([ |
|
{ |
|
prop: 'waybillNumber', |
|
label: '运单号', |
|
type: 2, |
|
values: '', |
|
width: '100', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'serviceNumber', |
|
label: '服务号', |
|
type: 2, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderCode', |
|
label: '订单自编号', |
|
type: 2, |
|
values: '', |
|
width: '160', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderPackageCode', |
|
label: '包条码', |
|
type: 2, |
|
values: '', |
|
width: '130', |
|
checkarr: [], |
|
fixed: true, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'warehouse', |
|
label: '仓库', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'sendWarehouseName', |
|
label: '发站仓', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'acceptWarehouseName', |
|
label: '目的地', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
|
|
// { |
|
// prop: 'waybillNumber', |
|
// label: '发货时间', |
|
// type: 1, |
|
// values: '', |
|
// width: '150', |
|
// checkarr: [], |
|
// fixed: false, |
|
// sortable: true, |
|
// head: false, |
|
// }, |
|
{ |
|
prop: 'warehouseEntryTimeEnd', |
|
label: '入库时间', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'trainNumber', |
|
label: '进库车次', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'materialName', |
|
label: '物料名称', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'firsts', |
|
label: '一级品类', |
|
type: 2, |
|
values: '', |
|
width: '100', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'second', |
|
label: '二级品类', |
|
type: 2, |
|
values: '', |
|
width: '100', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'thirdProduct', |
|
label: '三级品类', |
|
type: 2, |
|
values: '', |
|
width: '100', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'materialName', |
|
label: '物料名称', |
|
type: 2, |
|
values: '', |
|
width: '100', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderPackageStatusName', |
|
label: '包件状态', |
|
type: 1, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderPackageFreezeStatusName', |
|
label: '冻结状态', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
// { |
|
// prop: 'orderPackageGroundingStatusName', |
|
// label: '上架状态', |
|
// type: 1, |
|
// values: '', |
|
// width: '200', |
|
// checkarr: [], |
|
// fixed: false, |
|
// sortable: true, |
|
// head: false, |
|
// }, |
|
{ |
|
prop: 'orderPackageStockupStatusName', |
|
label: '备货状态', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderPackageReservationStatusName', |
|
label: '预约状态', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderPackageLoadingStatusName', |
|
label: '装车状态 ', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'reservationNum', |
|
label: '计划数量', |
|
type: 1, |
|
values: '', |
|
width: '40', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
isshowSummary: true, |
|
}, |
|
{ |
|
prop: 'loadingNub', |
|
label: '装车数量', |
|
type: 1, |
|
values: '', |
|
width: '40', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'signingNub', |
|
label: '签收数量', |
|
type: 1, |
|
values: '', |
|
width: '40', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'loadingTime', |
|
label: '装车时间', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'signingUser', |
|
label: '签收人', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
// { |
|
// prop: 'trainNumber', |
|
// label: '包件类型', |
|
// type: 2, |
|
// values: '', |
|
// width: '150', |
|
// checkarr: [], |
|
// fixed: false, |
|
// sortable: true, |
|
// head: false, |
|
// }, |
|
|
|
|
|
|
|
|
|
|
|
|
|
{ |
|
prop: 'scanStatus', |
|
label: '装车方式', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'driverName', |
|
label: '计划装车人', |
|
type: 2, |
|
values: '', |
|
width: '80', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'scanUser', |
|
label: '实际装车人', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'signingTime', |
|
label: '签收扫描时间', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
]); |
|
// 库存品列表 |
|
const menuData3 = ref([ |
|
{ |
|
prop: 'sku', |
|
label: 'sku', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'descriptionGoods', |
|
label: '物料名称', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'cargoNumber', |
|
label: '物料编号', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'cargoNorms', |
|
label: '物料规格', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'cargoUnit', |
|
label: '物料单位', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'category', |
|
label: '品分类', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'reservationNum', |
|
label: '计划出库数', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'loadedinNumber', |
|
label: '实际出库数', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
isshowSummary: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'loadingStatusName', |
|
label: '装车状态', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'signingStatusName', |
|
label: '签收状态', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'signUser', |
|
label: '签收人', |
|
type: 2, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
]); |
|
const ElButtonS = ref([ |
|
// 1.class 按钮样式名(用于切换按钮样式) |
|
// 2.space 是否开启按钮文子直接间距(true开启 ,false关闭) |
|
// 3.size 按钮尺寸默认小尺寸('large'| 'default'| 'small') |
|
// 4.icon 按钮图标 |
|
// 5.table 按钮名称 |
|
{ |
|
class: 'el-btn-danger', |
|
space: true, |
|
size: 'small', |
|
icon: 'el-icon-delete', |
|
table: '删除', |
|
}, |
|
{ |
|
class: 'el-btn-view', |
|
space: true, |
|
size: 'small', |
|
icon: 'el-icon-view', |
|
table: '查看', |
|
}, |
|
{ |
|
class: 'el-btn-success', |
|
space: true, |
|
size: 'small', |
|
icon: 'Edit', |
|
table: '编辑', |
|
}, |
|
]); |
|
|
|
// menuDataB 增值服务公共表头 |
|
|
|
const menuDataB1 = ref([ |
|
{ |
|
prop: 'orderCode', |
|
label: '订单自编号', |
|
type: 1, |
|
values: '', |
|
width: '300', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'materialName', |
|
label: '货物名称', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'firsts', |
|
label: '一级品', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'second', |
|
label: '二级品', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'thirdProduct', |
|
label: '二级品', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'orderPackageCode', |
|
label: '包条码', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'quantity', |
|
label: '数量', |
|
type: 7, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'conditions', |
|
label: '包条类型', |
|
type: 6, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'sku', |
|
label: 'SKU', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
{ |
|
prop: 'materialCode', |
|
label: '物料编码', |
|
type: 1, |
|
values: '', |
|
width: '200', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: false, |
|
}, |
|
// { |
|
// prop: '', |
|
// label: '操作', |
|
// type: 3, |
|
// values: '', |
|
// width: '200', |
|
// checkarr: [], |
|
// fixed: 'right', |
|
// sortable: true, |
|
// head: false, |
|
// }, |
|
]); |
|
|
|
const Tabs = ref([ |
|
{ |
|
label: '订单列表', |
|
name: '0', |
|
columnList: menuData1.value, |
|
type: 'order', |
|
query: {}, |
|
data: [], |
|
renderData: [], |
|
}, |
|
{ |
|
label: '包件列表', |
|
name: '1', |
|
/** 列表表头 */ |
|
columnList: menuData2.value, |
|
type: 'package', |
|
/** 搜索值 */ |
|
query: {}, |
|
/** 所有值 */ |
|
data: [], |
|
/** 已签收数组 */ |
|
signeData: [], |
|
/** 未签收数组 */ |
|
noSigneData: [], |
|
/** 渲染值 */ |
|
renderData: [], |
|
/** 把内部激活Tab值 */ |
|
activeName: 'haveBeenSigned', |
|
}, |
|
{ |
|
label: '库存品列表', |
|
name: '2', |
|
columnList: menuData3.value, |
|
type: 'inventory', |
|
query: {}, |
|
data: [], |
|
renderData: [], |
|
}, |
|
]); |
|
// 增值服务标题栏 |
|
const TabB = ref([ |
|
{ |
|
label: '上楼', |
|
name: '0', |
|
}, |
|
{ |
|
label: '超区', |
|
name: '1', |
|
}, |
|
{ |
|
label: '平移', |
|
name: '2', |
|
}, |
|
{ |
|
label: '搬运', |
|
name: '3', |
|
}, |
|
{ |
|
label: '分拣', |
|
name: '4', |
|
}, |
|
{ |
|
label: '专车', |
|
name: '5', |
|
}, |
|
]); |
|
|
|
// 按钮样式风格切换 |
|
const btnClass = type => { |
|
// 切换链接样式风格 |
|
if (type == 1) { |
|
ElBtnClass.value = 'el-Btn-link'; |
|
} |
|
// 切换按钮样式风格 |
|
if (type == 2) { |
|
ElBtnClass.value = 'el-Btn-btn'; |
|
} |
|
}; |
|
// 页面初始化需要请求的参数 |
|
const onLoad = () => { |
|
menuData.value = menuData1.value; //页面初始化默认显示第一个表格 |
|
data.value = InitializeTable.value; //默认显示第一个表格数据 |
|
}; |
|
// RouterId.value = '1721707916601487362'; |
|
// RouterReservationId.value = '1721707896171032578'; |
|
// 获取路由必要参数 |
|
RouterId.value = route.query.id; //获取当前路由参数ID |
|
RouterReservationId.value = route.query.reservationId; //获取当前路由的参数 |
|
console.log(route.query.id, '当前路由参数'); |
|
console.log(route.query.RouterReservationId, '当前路由参数'); |
|
// 图片上传必须携带TOKEN |
|
const headers = computed(() => { |
|
return { 'Blade-Auth': 'Bearer ' + getToken() }; |
|
}); |
|
// 图片上传接口 |
|
const doubledCount = computed(() => { |
|
return '/api/blade-resource/oss/endpoint/put-file'; |
|
}); |
|
|
|
const setTableHeight = () => { |
|
const node = document.querySelectorAll('.goodsTable'); |
|
|
|
setNodeHeight(node, '600px'); |
|
}; |
|
|
|
onMounted(async () => { |
|
// 等待子组件渲染完成 |
|
await nextTick(); |
|
|
|
setTableHeight(); |
|
}); |
|
|
|
const findIndexById = (A, B) => { |
|
const indexArray = []; |
|
for (const itemA of A) { |
|
const matchingItem = B.find(itemB => itemB.packageId === itemA.packageId); |
|
if (matchingItem) { |
|
indexArray.push(B.indexOf(matchingItem)); |
|
} |
|
} |
|
return indexArray; |
|
}; |
|
// 增值服务请求函数 |
|
const ValueAddedFunction = val => { |
|
TCeditLoading.value = true; //开启load加载效果 |
|
$_checkAddValuePackageList(val).then(res => { |
|
TCeditLoading.value = false; //关闭load加载效果 |
|
TcDataAdded.value = res.data.records; |
|
console.log(res, '新增返回的信息'); |
|
total.value = res.data.total; //总条数 |
|
res.data.records.forEach(item => { |
|
item.checkbox = true; //添加标识用于处理零担数量修改 |
|
item.zeroQuantity = 0; //设置默认值 |
|
}); |
|
// 数据回显 |
|
// const setIn = setTimeout(() => { |
|
// let dataX = findIndexById(dataAdded.value, TcDataAdded.value); |
|
// console.log(dataX, '返回的对应下标'); |
|
// // 对有的数据进行勾选 |
|
// TcDataAdded.value.forEach((row, i) => { |
|
// const dataIndex = dataX[i]; |
|
// if (typeof dataIndex !== 'undefined') { |
|
// TcDataAdded.value[i] = TcDataAdded.value[dataIndex]; |
|
// tableRefs.value.toggleRowSelection(TcDataAdded.value[i], true); |
|
// TcDataAdded.value[i].checkbox = false; //禁止修改 |
|
// console.log(row, '要处理的数据'); |
|
// } |
|
// }); |
|
// clearTimeout(setIn); |
|
// }, 0); |
|
}); |
|
}; |
|
// 增值服务是否禁用勾选 |
|
const selectable = (row, index) => { |
|
// if (!row.checkbox) { |
|
// return false; //禁用状态 |
|
// } else { |
|
// return true; //非禁用状态 |
|
// } |
|
}; |
|
// 新增按钮展开增值服务弹窗 |
|
const newlyAdded = val => { |
|
TcTemp.value = []; //新增之前先重置勾选的数量防止累加 |
|
let menData = menuDataB1.value.slice(0, -1); //移除menuDataB1.value数组最后一个下标的值 |
|
menuDataB.value = menData; //字段切换 |
|
dialogBatchDelete.value = true; //开启弹窗 |
|
// 调用增值服务请求接口函数 |
|
ValueAddedFunction({ |
|
reservationId: RouterReservationId.value, |
|
current: currentPage.value, |
|
size: pageSize.value, |
|
}); |
|
}; |
|
// 增值服务清空 |
|
const ServiceReset = val => { |
|
console.log('增值服务清空'); |
|
TcSoInput.value = {}; //重置搜索表单 |
|
TcDataAdded.value = []; //重置增值服务表格 |
|
ValueAddedFunction({ |
|
reservationId: RouterReservationId.value, |
|
}); |
|
}; |
|
// 增值服务取消 |
|
const TCdialogBatchDelete = () => { |
|
dialogBatchDelete.value = false; //关闭弹窗 |
|
}; |
|
// 增值服务 |
|
const addedSubmission = val => { |
|
if (!TcTemp.value.length) { |
|
ElMessage({ |
|
message: '暂未选择包件', |
|
type: 'warning', |
|
}); |
|
return; |
|
} |
|
ConfirmationInformation.value = true; //开启确认信息 |
|
}; |
|
|
|
const qsselectAll = select => { |
|
console.log(select, '商品全选'); |
|
sptemp.value = select; |
|
}; |
|
const qsselectChange = select => { |
|
console.log(select, '商品单选'); |
|
sptemp.value = select; |
|
}; |
|
// 取消增值服务包件函数 |
|
const cancellation = val => { |
|
if (!Array.isArray(val)) { |
|
// 判断是单选删除，还是全选删除 |
|
let Read = []; |
|
console.log(Read, 'Read'); |
|
Read.push(val); |
|
console.log(Read); |
|
TcData.value = Read; // 表格临时数据放入正式提交里面 |
|
} else { |
|
TcData.value = val; // 表格临时数据放入正式提交里面 |
|
} |
|
let data = JSON.parse(JSON.stringify(TcData.value)); |
|
let DataInfo = {}; //创建一个空对象用于存放请求参数 |
|
DataInfo.reservationId = RouterReservationId.value; //预约客户ID |
|
DataInfo.addvalueDetailId = addvalueDetailId.value; //增值服务详情ID |
|
DataInfo.packageEntityList = data; //取消包件列表 |
|
DataInfo.addvalueType = TcIndex.value; //增值服务项类型 （必带参数） |
|
$_cancelSignAddValuePackage(DataInfo).then(res => { |
|
console.log(res, '删除之后的返回值'); |
|
if (res.data.code == 200) { |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
valueAddedServices(TcIndex.value); |
|
ZcBtnDis.value = true; //禁止使用批量删除按钮 |
|
// 删除成功重置表单结构 |
|
TcData.value = []; //正式结构 |
|
ZCTableData.value = []; //临时存储 |
|
} |
|
}); |
|
}; |
|
|
|
// 取消增值服务包件(批量删除) |
|
const BatchDelete = row => { |
|
ElMessageBox.confirm('是否取消包件数?') |
|
.then(() => { |
|
cancellation(ZCTableData.value); |
|
}) |
|
.catch(() => { |
|
// catch error |
|
}); |
|
}; |
|
// 增值服务弹窗关闭回调 |
|
const TzClose = () => { |
|
menuDataB.value = menuDataB1.value; //字段切换 |
|
TcZcInput.value = {}; //清空搜索框数据 |
|
}; |
|
// 增值服务单选删除 |
|
const DeleteEvent = row => { |
|
cancellation(row); //单选删除，把当前行的数据传入 |
|
TitleBarSwitch(TabInfo.value); |
|
}; |
|
// 增值服务表格全选触发 |
|
const DataSelectAll = (select, val) => { |
|
if (!select.length) { |
|
//表示当前没有数据 |
|
dataAdded.value.forEach(item => { |
|
item.checkbox = true; |
|
}); |
|
ZcBtnDis.value = true; //禁用批量删除 |
|
} else { |
|
select.forEach(item => { |
|
item.checkbox = false; //让删除按钮处于激活状态 |
|
}); |
|
ZcBtnDis.value = false; //启用批量删除 |
|
} |
|
ZCTableData.value = select; //把勾选的数据存临时存放表格地方 |
|
console.log(select, val); |
|
}; |
|
// 增值服务表格单选触发 |
|
const ZcSelectChange = (select, val) => { |
|
val.checkbox = !val.checkbox; |
|
ZCTableData.value = select; //把勾选的数据存临时存放表格地方 |
|
if (select.length > 0) { |
|
ZcBtnDis.value = false; //可以使用批量删除按钮 |
|
} else { |
|
ZcBtnDis.value = true; //禁止用批量删除按钮 |
|
} |
|
console.log(select, val); |
|
}; |
|
// 重置函数 |
|
const TcIReset = () => { |
|
TcData.value = []; //重置表格数据 |
|
TcTemp.value = []; //重置表格临时数据 |
|
ConfirmationInformation.value = false; //关闭弹窗 |
|
dialogBatchDelete.value = false; //关闭弹窗 |
|
TcZcInput.value = {}; |
|
ElMessage({ |
|
message: '操作成功', |
|
type: 'success', |
|
}); |
|
menuDataB.value = menuDataB1.value; //移除menuDataB1.value数组最后一个下标的值 |
|
}; |
|
// 增值服务确认提交 |
|
const ConfirmSubmission = () => { |
|
// 判断零担是否已经输入数量 |
|
let state = true; |
|
TcTemp.value.forEach(item => { |
|
console.log(item, '零担数据处理'); |
|
if (item.conditions == 3) { |
|
//表示当前是零担数据 |
|
item.quantity = item.zeroQuantity; //把输入的值给quantity |
|
if (!item.zeroQuantity) { |
|
ElMessage({ |
|
message: item.firsts + '没有输入数量', |
|
type: 'warning', |
|
}); |
|
state = false; |
|
} |
|
} |
|
}); |
|
// 没有输入数量不继续走流程 |
|
if (!state) { |
|
return; |
|
} |
|
TcData.value = TcTemp.value; //临时存储的数据给到正式提交的表格 |
|
TcZcInput.value.num = TcTemp.value.length; //增加的包件总数 |
|
let data = JSON.parse(JSON.stringify(TcData.value)); |
|
|
|
let DataInfo = { |
|
...TcZcInput.value, //弹窗信息 |
|
}; |
|
DataInfo.reservationId = RouterReservationId.value; //预约客户ID（必带参数） |
|
DataInfo.deliveryId = RouterId.value; //配送任务ID（必带参数） |
|
DataInfo.addvalueType = TcIndex.value; //增值服务项类型 （必带参数） |
|
DataInfo.packageEntityList = data; //选中的所有包件信息 |
|
console.log(DataInfo, '最后要提交的值'); |
|
|
|
// 如果增值服务表格有参数就走下面新增接口 |
|
// addvalueDetailId存在表示增值服务列表有值，说明不是新增，是修改 |
|
if (addvalueDetailId.value) { |
|
//修改接口 |
|
DataInfo.addvalueDetailId = addvalueDetailId.value; //增值服务详情ID |
|
$_updateSignAddValuePackage(DataInfo).then(res => { |
|
TcIReset(); |
|
valueAddedServices(TcIndex.value); |
|
}); |
|
} else { |
|
// 新增接口 |
|
$_saveSignAddValuePackage(DataInfo).then(res => { |
|
TcIReset(); |
|
|
|
valueAddedServices(TcIndex.value); |
|
}); |
|
} |
|
}; |
|
// 增值服务取消 |
|
const TCancellation = () => { |
|
TcZcInput.value = {}; //重置 |
|
ConfirmationInformation.value = false; //关闭表单弹窗 |
|
console.log(TcZcInput.value, '表单数据'); |
|
}; |
|
// 刷新按钮 |
|
const searchChange = () => { |
|
ValueAddedFunction({ |
|
reservationId: RouterReservationId.value, |
|
}); |
|
}; |
|
// 搜索按钮 |
|
const searchHide = () => { |
|
tcSo.value = !tcSo.value; //搜索框显示/隐藏 |
|
}; |
|
// 增值服务弹窗搜索 |
|
const serviceSearch = val => { |
|
console.log('增值服务搜索'); |
|
ValueAddedFunction({ |
|
reservationId: RouterReservationId.value, |
|
...TcSoInput.value, |
|
}); |
|
}; |
|
// 获取基础信息 |
|
editLoading.value = true; //表格开始加载 |
|
getDetail(RouterId.value).then(res => { |
|
editLoading.value = false; //表格加载结束 |
|
console.log(res, '基础信息'); |
|
// 当前订单状态 |
|
if (res.data.data.sijiSigningStatus == '2') { |
|
active.value = 2; //司机已签收 |
|
} |
|
// if (res.data.data.sijiSigningStatus == && res.data.data.wenyuanSigningStatus) { |
|
// active.value = 3; //文员已签收 |
|
// } |
|
|
|
// 文员签收单独判断 |
|
if (res.data.data.wenyuanSigningStatus == '2') { |
|
active.value = 3; //文员已签收 |
|
} |
|
form.value = res.data.data; //基础信息 |
|
// InitializeTable.value = res.data.data.orderInfo; //表格数据(订单列表) |
|
Tabs.value[0].data = res.data.data.orderInfo || []; //表格数据(订单列表) |
|
Tabs.value[0].renderData = res.data.data.orderInfo || []; |
|
onLoad(); |
|
// 照片回显分类 |
|
DoorstepPhoto.value = []; |
|
StackingPhoto.value = []; |
|
FragilePhotos.value = []; |
|
HomePhotos.value = []; |
|
SignForPhotos.value = []; |
|
const photoTypes = { |
|
photo_1: DoorstepPhoto.value, |
|
photo_2: StackingPhoto.value, |
|
photo_3: FragilePhotos.value, |
|
photo_4: HomePhotos.value, |
|
photo_5: SignForPhotos.value, |
|
}; |
|
|
|
const photoTypesList = { |
|
photo_1: srcListA.value, |
|
photo_2: srcListB.value, |
|
photo_3: srcListC.value, |
|
photo_4: srcListD.value, |
|
photo_5: srcListE.value, |
|
}; |
|
|
|
if (res.data.data.printVOList) { |
|
res.data.data.printVOList.forEach(item => { |
|
const { type, name, urlRoute } = item; |
|
if (type in photoTypes) { |
|
photoTypes[type].push({ name, url: urlRoute }); |
|
} |
|
// 图片预览处理 |
|
if (type in photoTypesList) { |
|
photoTypesList[type].push(urlRoute); |
|
} |
|
}); |
|
} |
|
console.log(srcListC.value, 'srcListC'); |
|
}); |
|
const handleRemove = () => { |
|
console.log('图片移除事件'); |
|
}; |
|
// 包件列表 |
|
function PackageList() { |
|
editLoading.value = true; //表格加载开启 |
|
data.value = []; |
|
signforPackageList(RouterId.value).then(res => { |
|
const { code } = res.data; |
|
if (code !== 200) return; |
|
console.log(res.data.data, '包件列表'); |
|
// data.value = res.data.data || []; |
|
|
|
const data = res.data.data || []; |
|
|
|
const _item = Tabs.value[1]; |
|
|
|
_item.signeData = []; |
|
_item.noSigneData = []; |
|
|
|
data.forEach(val => { |
|
if (Number(val.orderPackageStatus) === 70) _item.signeData.push(val); |
|
else _item.noSigneData.push(val); |
|
}); |
|
|
|
_item.data = _item.activeName === 'haveBeenSigned' ? _item.signeData : _item.noSigneData; |
|
|
|
_item.renderData = _item.data; |
|
editLoading.value = false; //表格加载结束 |
|
}); |
|
} |
|
// 库存品列表 |
|
function InventoryList() { |
|
editLoading.value = true; //表格加载开启 |
|
data.value = []; |
|
signforInventoryList(RouterId.value).then(res => { |
|
if (res.data.code !== 200) return; |
|
console.log(res, '库存品列表'); |
|
// data.value = res.data.data || []; |
|
Tabs.value[2].data = data || []; |
|
Tabs.value[2].renderData = data || []; |
|
editLoading.value = false; //表格加载结束 |
|
}); |
|
} |
|
//商品信息切换 |
|
const tabClick = val => { |
|
console.log(val.props, '菜单标记'); |
|
SignforMenu.value = val.props; |
|
sptemp.value = []; //切换表头重置选中数组 |
|
switch (val.props.name) { |
|
case '0': |
|
console.log(data.value, 'datavalue'); |
|
switchTableFields(menuData1.value); |
|
// data.value = InitializeTable.value; |
|
break; |
|
case '1': |
|
switchTableFields(menuData2.value); |
|
PackageList(); |
|
break; |
|
case '2': |
|
switchTableFields(menuData3.value); |
|
InventoryList(); |
|
console.log(menuData.value, '当前表格参数'); |
|
break; |
|
default: |
|
break; |
|
} |
|
}; |
|
|
|
// 导出 |
|
const Signforexport = () => { |
|
if(SignforMenu.value.label == '库存品列表'){ |
|
ElMessage({ |
|
message: '库存品导出维护中', |
|
type: 'warning', |
|
}) |
|
return |
|
} |
|
console.log(SignforMenu.value); |
|
ElMessageBox.confirm(`是否导出${SignforMenu.value.label}`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}) |
|
.then(() => { |
|
let data = { |
|
signforId: RouterId.value, |
|
}; |
|
editLoading.value = true; |
|
// 订单列表 |
|
if (SignforMenu.value.label == '订单列表') { |
|
return $_distributionSignforOrderList(data) |
|
.then(res => { |
|
downloadXls(res.data, `订单列表.xlsx`); |
|
ElMessage({ |
|
type: 'success', |
|
message: '导出成功', |
|
}); |
|
}) |
|
.catch(() => {}) |
|
.finally(() => { |
|
editLoading.value = false; |
|
}); |
|
} |
|
|
|
// 包件列表 |
|
if (SignforMenu.value.label == '包件列表') { |
|
return $_distributionSignforPackageList(data) |
|
.then(res => { |
|
downloadXls(res.data, `包件列表.xlsx`); |
|
ElMessage({ |
|
type: 'success', |
|
message: '导出成功', |
|
}); |
|
}) |
|
.catch(() => {}) |
|
.finally(() => { |
|
editLoading.value = false; |
|
}); |
|
} |
|
// 库存品列表 |
|
if (SignforMenu.value.label == '库存品列表') { |
|
} |
|
}) |
|
.catch(() => {}); |
|
}; |
|
// 增值服务切换查询函数 |
|
const valueAddedServices = val => { |
|
dataAdded.value = []; //清空展示表单 |
|
addvalueDetailId.value = null; //清空新增标识 |
|
console.log(addvalueDetailId.value, '当前是否为新增还是编辑'); |
|
TabTitle.value[0].value = '暂无数据'; //距离 |
|
TabTitle.value[1].value = '暂无数据'; //费用 |
|
TabTitle.value[2].value = '暂无数据'; //楼层 |
|
TabTitle.value[3].value = '暂无数据'; //件数 |
|
ZCeditLoading.value = true; //开启加载 |
|
addvalueInfoList({ |
|
addvalueId: val, |
|
signforId: RouterId.value, |
|
reservationId: RouterReservationId.value, |
|
}).then(res => { |
|
ZCeditLoading.value = false; //关闭加载效果 |
|
console.log(res, '增值服务上楼的返回值'); |
|
if (res.data.data) { |
|
if (res.data.data.addvalueDetailId) { |
|
addvalueDetailId.value = res.data.data.addvalueDetailId; |
|
console.log('当前不是第一次，为新增操作'); |
|
} |
|
res.data.data.packageEntityList.forEach(item => { |
|
item.checkbox = true; |
|
console.log(item); |
|
}); |
|
const packageList = res.data.data ? res.data.data.packageEntityList : []; |
|
dataAdded.value = packageList; |
|
TabTitle.value[0].value = res.data.data?.distance ?? '暂无数据'; //距离 |
|
TabTitle.value[1].value = res.data.data?.fee ?? '暂无数据'; //费用 |
|
TabTitle.value[2].value = res.data.data?.floolNum ?? '暂无数据'; //楼层 |
|
TabTitle.value[3].value = packageList.length ? packageList.length : '暂无数据'; //件数 |
|
} |
|
}); |
|
}; |
|
// 展开增值服务默认加载第一项 |
|
const ServiceChange = val => { |
|
menuDataB.value = menuDataB1.value; |
|
setTimeout(() => { |
|
valueAddedServices(1); |
|
}, 0); |
|
}; |
|
// 增值服务标题栏切换函数 |
|
const TitleBarSwitch = data => { |
|
ZCTableData.value = []; //切换标签重置勾选数量（重置勾选的内容） |
|
TcServices.value = data.props.label; //增值服务弹窗标题 |
|
TcIndex.value = Number(data.props.name); //存储tab栏下标用于重新渲染参数 |
|
TcIndex.value++; |
|
console.log(TcIndex.value, '当前的tab下标'); |
|
ZCeditLoading.value = true; //开启加载效果 |
|
if (data.props.name == 0) { |
|
menuDataB.value = menuDataB1.value; |
|
valueAddedServices(1); |
|
} |
|
if (data.props.name == 1) { |
|
menuDataB.value = menuDataB1.value; |
|
valueAddedServices(2); |
|
} |
|
if (data.props.name == 2) { |
|
menuDataB.value = menuDataB1.value; |
|
valueAddedServices(3); |
|
} |
|
if (data.props.name == 3) { |
|
menuDataB.value = menuDataB1.value; |
|
valueAddedServices(4); |
|
} |
|
if (data.props.name == 4) { |
|
menuDataB.value = menuDataB1.value; |
|
valueAddedServices(5); |
|
} |
|
if (data.props.name == 5) { |
|
menuDataB.value = menuDataB1.value; |
|
valueAddedServices(6); |
|
} |
|
}; |
|
// 增值服务信息tab切换 |
|
const tabClickB = val => { |
|
TabInfo.value = val; //把当前信息保存起来 |
|
TitleBarSwitch(val); |
|
}; |
|
//商品信息切换 |
|
const switchTableFields = fields => { |
|
menuData.value = fields; //切换表格展示字段 |
|
}; |
|
// 表格全选功能触发 |
|
const selectAll = val => { |
|
console.log(val); |
|
TcTemp.value = val; //吧选中的信息放到准备提交的地方 |
|
console.log(TcTemp.value, '准备提交的数据'); |
|
}; |
|
// 表格单个选中触发事件 |
|
const selectChange = (selection, row) => { |
|
console.log(row, '表格单选触发'); |
|
row.checkbox = !row.checkbox; |
|
// 1.selection 选中的数组 |
|
// 2.row 选中的当前行 |
|
TcTemp.value = selection; //吧选中的信息放到准备提交的地方 |
|
}; |
|
// 每页多少条触发 |
|
const PageSizeChange = val => { |
|
console.log('每一页', val, '条'); |
|
// 调用增值服务请求接口函数 |
|
ValueAddedFunction({ |
|
reservationId: RouterReservationId.value, |
|
current: currentPage.value, |
|
size: pageSize.value, |
|
}); |
|
}; |
|
// 页码翻页触发 |
|
const SizeChange = val => { |
|
console.log('当前是第', val, '页'); |
|
// 调用增值服务请求接口函数 |
|
ValueAddedFunction({ |
|
reservationId: RouterReservationId.value, |
|
current: currentPage.value, |
|
size: pageSize.value, |
|
}); |
|
}; |
|
// 上门照图片上传成功 |
|
const ImgSuccessA = (response, uploadFile) => { |
|
if (response.success == true) { |
|
console.log(response, '上门图片上传成功'); |
|
DoorstepPhoto.value[DoorstepPhoto.value.length - 1].url = response.data.link; |
|
} |
|
}; |
|
// 堆门图片上传成功 |
|
const ImgSuccessB = (response, uploadFile) => { |
|
if (response.success == true) { |
|
console.log(response, '堆门图片上传成功'); |
|
StackingPhoto.value[StackingPhoto.value.length - 1].url = response.data.link; |
|
} |
|
}; |
|
// 易碎图片上传成功 |
|
const ImgSuccessC = (response, uploadFile) => { |
|
if (response.success == true) { |
|
console.log(response, '易碎图片上传成功'); |
|
FragilePhotos.value[FragilePhotos.value.length - 1].url = response.data.link; |
|
} |
|
}; |
|
// 家配图片上传成功 |
|
const ImgSuccessD = (response, uploadFile) => { |
|
if (response.success == true) { |
|
console.log(response, '家配图片上传成功'); |
|
HomePhotos.value[HomePhotos.value.length - 1].url = response.data.link; |
|
} |
|
}; |
|
// 签收图片上传成功 |
|
const ImgSuccessE = (response, uploadFile) => { |
|
if (response.success == true) { |
|
console.log(response, '签收图片上传成功'); |
|
SignForPhotos.value[SignForPhotos.value.length - 1].url = response.data.link; |
|
} |
|
}; |
|
|
|
/** 输入框筛选 */ |
|
const inputsc = (value, row, type) => { |
|
editLoading.value = true; |
|
try { |
|
const _item = Tabs.value.find(val => val.type === type); |
|
|
|
// 动态设置正则 |
|
const reg = new RegExp(value, 'i'); |
|
|
|
_item.query[row.prop] = reg; |
|
|
|
if (value === '') delete _item.query[row.prop]; |
|
|
|
if (Object.keys(_item.query).length === 0) return (_item.renderData = _item.data); |
|
|
|
const _data = _item.data.filter(value => { |
|
let _flag = true; |
|
for (let key in _item.query) { |
|
if (!_item.query[key].test(value[key])) _flag = false; |
|
if (!_flag) break; |
|
} |
|
|
|
return _flag; |
|
}); |
|
|
|
_item.renderData = _data; |
|
} catch (error) { |
|
console.log('error :>> ', error); |
|
} finally { |
|
editLoading.value = false; |
|
} |
|
}; |
|
|
|
/** 选择签收状态 */ |
|
const handleChooseSigneState = val => { |
|
console.log('val :>> ', val); |
|
console.log('Tabs.value :>> ', Tabs.value); |
|
const _item = Tabs.value[1]; |
|
console.log('_item :>> ', _item); |
|
_item.data = val === 'haveBeenSigned' ? _item.signeData : _item.noSigneData; |
|
|
|
if (Object.keys(_item.query).length === 0) return (_item.renderData = _item.data); |
|
|
|
const _data = _item.data.filter(value => { |
|
let _flag = true; |
|
for (let key in _item.query) { |
|
console.log('_item.query[key].test(value[key]) :>> ', _item.query[key].test(value[key])); |
|
if (!_item.query[key].test(value[key])) _flag = false; |
|
if (!_flag) break; |
|
} |
|
|
|
return _flag; |
|
}); |
|
|
|
console.log('_data :>> ', _data); |
|
_item.renderData = _data; |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.el-card { |
|
.el-card__header { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
.el-steps { |
|
width: 100%; |
|
margin-top: 25px; |
|
} |
|
} |
|
|
|
.card-header { |
|
font-size: 18px; |
|
font-weight: 500; |
|
} |
|
:deep(.el-divider__text) { |
|
font-weight: bold; |
|
font-size: 16px; |
|
} |
|
.Basic-information { |
|
display: flex; |
|
justify-content: flex-start; |
|
margin-bottom: 50px; |
|
flex-wrap: wrap; |
|
} |
|
.el-txt:first-of-type { |
|
/* 样式 */ |
|
// margin-top: 0; |
|
} |
|
.title-name { |
|
min-width: 120px; |
|
font-weight: 500; |
|
font-size: 16px; |
|
} |
|
.el-txt { |
|
min-width: 280px; |
|
margin-right: 1%; |
|
display: flex; |
|
align-items: center; |
|
i { |
|
margin-right: 5px; |
|
} |
|
|
|
.el-cont { |
|
font-weight: 400; |
|
padding: 0 10px; |
|
} |
|
} |
|
.notes { |
|
width: 100%; |
|
margin-top: 30px; |
|
margin-right: 0; |
|
} |
|
.title-notes { |
|
width: 90px; |
|
} |
|
.el-positioning { |
|
margin-left: auto; |
|
width: 59%; |
|
} |
|
.FImg { |
|
display: flex; |
|
} |
|
.imgName { |
|
width: 30%; |
|
span { |
|
font-size: 16px; |
|
position: relative; |
|
font-weight: 500; |
|
color: #958d8d; |
|
display: inline-block; |
|
border: 1px solid #ccc; |
|
padding: 0 10px; |
|
border-radius: 4px; |
|
margin-bottom: 2px; |
|
display: flex; |
|
align-items: center; |
|
width: fit-content; |
|
} |
|
} |
|
} |
|
:deep(.el-dialog__body) { |
|
img { |
|
width: 100%; |
|
} |
|
} |
|
.tab-title { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
span { |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
.el-sw { |
|
width: 100%; |
|
margin-top: 15px; |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 82px; |
|
justify-content: space-between; |
|
} |
|
.icon-tit { |
|
display: flex; |
|
min-width: 138px; |
|
align-items: center; |
|
} |
|
.el-box { |
|
display: flex; |
|
} |
|
.el-BtnSoInput { |
|
margin-left: auto; |
|
margin-right: 0; |
|
} |
|
.avue-crud__right { |
|
display: flex; |
|
justify-content: flex-end; |
|
margin-bottom: 10px; |
|
} |
|
:deep(.el-dialog__body) { |
|
width: 100%; |
|
height: 100%; |
|
box-sizing: border-box; |
|
} |
|
.demo-pagination-block { |
|
display: flex; |
|
width: 100%; |
|
justify-content: space-between; |
|
} |
|
:deep(.el-input-number) { |
|
width: 100%; |
|
} |
|
.tcSoInput { |
|
:deep(.el-input__wrapper) { |
|
width: 120px; |
|
} |
|
} |
|
:deep(.el-image) { |
|
width: 100% !important; |
|
height: 100% !important; |
|
} |
|
.gx_num { |
|
font-size: 14px; |
|
margin-top: 20px; |
|
display: block; |
|
} |
|
|
|
// 标签页 |
|
:deep(.el-tab-pane) { |
|
display: flex; |
|
} |
|
|
|
:deep(.el-tabs--left) { |
|
flex: none; |
|
} |
|
|
|
// 表格 |
|
.goodsTable { |
|
flex: 1; |
|
} |
|
</style>
|
|
|