|
|
|
<template>
|
|
|
|
<el-card class="box-card">
|
|
|
|
<template #header>
|
|
|
|
<div class="card-header">
|
|
|
|
<span>当前签收单状态</span>
|
|
|
|
</div>
|
|
|
|
<el-steps :active="1" 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">
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<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-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" />
|
|
|
|
</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-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>
|
|
|
|
</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-dialog>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 签收信息 -->
|
|
|
|
|
|
|
|
<el-collapse 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"
|
|
|
|
>
|
|
|
|
<template v-for="item in Tabs" :key="item.name">
|
|
|
|
<el-tab-pane :label="item.label" :name="item.name">
|
|
|
|
<div class="el-Cart">
|
|
|
|
<!-- 表格列开始 -->
|
|
|
|
<el-table
|
|
|
|
:data="data"
|
|
|
|
row-key="name"
|
|
|
|
border
|
|
|
|
height="500"
|
|
|
|
style="width: 100%"
|
|
|
|
ref="tableRef"
|
|
|
|
@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 menuData"
|
|
|
|
:key="item.label"
|
|
|
|
>
|
|
|
|
<template #default="props">
|
|
|
|
<img :src="props.row[item.prop]" class="el-Img" v-if="item.type === 2" />
|
|
|
|
<!-- <div :class="ElBtnClass" v-if="item.type === 3">
|
|
|
|
<el-button
|
|
|
|
:link="ElButtonS[0].link"
|
|
|
|
:class="ElButtonS[0].class"
|
|
|
|
:auto-insert-space="ElButtonS[0].space"
|
|
|
|
:size="ElButtonS[0].size"
|
|
|
|
:icon="ElButtonS[0].icon"
|
|
|
|
@click="DeleteEvent(scope.row)"
|
|
|
|
>删除</el-button
|
|
|
|
>
|
|
|
|
<el-button
|
|
|
|
:link="ElButtonS[1].link"
|
|
|
|
:class="ElButtonS[1].class"
|
|
|
|
:auto-insert-space="ElButtonS[1].space"
|
|
|
|
:size="ElButtonS[1].size"
|
|
|
|
:icon="ElButtonS[1].icon"
|
|
|
|
@click="EditEvent(scope.row)"
|
|
|
|
>编辑</el-button
|
|
|
|
>
|
|
|
|
<el-button
|
|
|
|
:link="ElButtonS[2].link"
|
|
|
|
:class="ElButtonS[2].class"
|
|
|
|
:auto-insert-space="ElButtonS[2].space"
|
|
|
|
:size="ElButtonS[2].size"
|
|
|
|
:icon="ElButtonS[2].icon"
|
|
|
|
@click="ViewEvent(scope.row)"
|
|
|
|
>查看</el-button
|
|
|
|
>
|
|
|
|
</div> -->
|
|
|
|
<span v-else>{{ props.row[item.prop] ? props.row[item.prop] : '/' }}</span>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<el-table-column
|
|
|
|
v-if="item.head"
|
|
|
|
fixed="right"
|
|
|
|
label="操作"
|
|
|
|
width="280"
|
|
|
|
align="center "
|
|
|
|
>
|
|
|
|
<!-- <template #default="scope">
|
|
|
|
|
|
|
|
</template> -->
|
|
|
|
</el-table-column>
|
|
|
|
</template>
|
|
|
|
</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>
|
|
|
|
</el-collapse-item>
|
|
|
|
</el-collapse>
|
|
|
|
<!-- 增值服务信息 -->
|
|
|
|
<el-collapse @change="ServiceChange" style="margin-top: 10px">
|
|
|
|
<el-collapse-item title="增值服务信息" name="2">
|
|
|
|
<el-tabs
|
|
|
|
v-loading="editLoading"
|
|
|
|
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 type="primary" @click="BatchDelete(item.name)"> 批量删除 </el-button>
|
|
|
|
</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="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">
|
|
|
|
<img :src="props.row[item.prop]" class="el-Img" v-if="item.type === 2" />
|
|
|
|
<div :class="ElBtnClass" v-if="item.type === 3">
|
|
|
|
<!-- <el-button
|
|
|
|
:link="ElButtonS[0].link"
|
|
|
|
:class="ElButtonS[0].class"
|
|
|
|
:auto-insert-space="ElButtonS[0].space"
|
|
|
|
:size="ElButtonS[0].size"
|
|
|
|
:icon="ElButtonS[0].icon"
|
|
|
|
@click="DeleteEvent(scope.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-else>{{ 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>
|
|
|
|
</el-collapse-item>
|
|
|
|
</el-collapse>
|
|
|
|
<!-- 弹窗信息 -->
|
|
|
|
<el-dialog v-model="dialogBatchDelete" title="标题" width="60%" :before-close="handleClose">
|
|
|
|
<!-- 表格列开始 -->
|
|
|
|
<el-table
|
|
|
|
:data="dataAdded"
|
|
|
|
row-key="name"
|
|
|
|
border
|
|
|
|
height="500"
|
|
|
|
style="width: 100%"
|
|
|
|
ref="tableRef"
|
|
|
|
@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">
|
|
|
|
<img :src="props.row[item.prop]" class="el-Img" v-if="item.type === 2" />
|
|
|
|
<div :class="ElBtnClass" v-if="item.type === 3">
|
|
|
|
<!-- <el-button
|
|
|
|
:link="ElButtonS[0].link"
|
|
|
|
:class="ElButtonS[0].class"
|
|
|
|
:auto-insert-space="ElButtonS[0].space"
|
|
|
|
:size="ElButtonS[0].size"
|
|
|
|
:icon="ElButtonS[0].icon"
|
|
|
|
@click="DeleteEvent(scope.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-else>{{ props.row[item.prop] ? props.row[item.prop] : '/' }}</span>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<template #footer>
|
|
|
|
<span class="dialog-footer">
|
|
|
|
<el-button @click="dialogBatchDelete = false">取消</el-button>
|
|
|
|
<el-button type="primary" @click="dialogVisible = false"> 提交 </el-button>
|
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
</el-dialog>
|
|
|
|
</el-card>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { ref } from 'vue';
|
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import {
|
|
|
|
getDetail,
|
|
|
|
signforPackageList,
|
|
|
|
signforInventoryList,
|
|
|
|
addvalueInfoList,
|
|
|
|
} from '@/api/distribution/distributionSignfor';
|
|
|
|
import { getToken } from '@/utils/auth';
|
|
|
|
const form = ref({}); //基础信息
|
|
|
|
const RouterId = ref(null); //编辑ID
|
|
|
|
const RouterReservationId = ref(null); //编辑参数
|
|
|
|
const DoorstepPhoto = ref([]); // 上门照
|
|
|
|
const StackingPhoto = 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 currentPage = ref(1); // 默认页码
|
|
|
|
const pageSize = ref(30); // 默认每一页几条
|
|
|
|
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 active = ref(1); //签收状态
|
|
|
|
const route = useRoute();
|
|
|
|
const router = useRouter(); //参数ID
|
|
|
|
const dataAdded = ref([]); //增值服务表格渲染参数
|
|
|
|
const TcDataAdded = ref([]); //弹窗表格渲染的数据
|
|
|
|
const TabIndex = ref(0); //增值服务标题默认显示
|
|
|
|
const dialogBatchDelete = 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 Tabs = ref([
|
|
|
|
{
|
|
|
|
label: '订单列表',
|
|
|
|
name: '0',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '包件列表',
|
|
|
|
name: '1',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '库存品列表',
|
|
|
|
name: '2',
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
// 增值服务标题栏
|
|
|
|
const TabB = ref([
|
|
|
|
{
|
|
|
|
label: '上楼',
|
|
|
|
name: '0',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '超区',
|
|
|
|
name: '1',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '平移',
|
|
|
|
name: '2',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '搬运',
|
|
|
|
name: '3',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '分拣',
|
|
|
|
name: '4',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '专车',
|
|
|
|
name: '5',
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
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: 'orderCode',
|
|
|
|
label: '订单自编号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '280',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'serviceNumber',
|
|
|
|
label: '服务号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '250',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'waybillNumber',
|
|
|
|
label: '运单号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'warehouse',
|
|
|
|
label: '仓库',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'brand',
|
|
|
|
label: '品牌',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'mallName',
|
|
|
|
label: '商场名称',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'storeName',
|
|
|
|
label: '门店名称',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
prop: 'descriptionGoods',
|
|
|
|
label: '货物名称',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'reservationNum',
|
|
|
|
label: '计划包件数',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'consigneeUnit',
|
|
|
|
label: '收获单位',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'consigneePerson',
|
|
|
|
label: '运单收货人',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'consigneeAddress',
|
|
|
|
label: '运单收货地址',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '250',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'consigneeMobile',
|
|
|
|
label: '运单收获电话',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'customerName',
|
|
|
|
label: '终端收货人',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'customerAddress',
|
|
|
|
label: '终端收获地址',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '400',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'customerTelephone',
|
|
|
|
label: '终端收获电话',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
// 包件列表
|
|
|
|
const menuData2 = ref([
|
|
|
|
{
|
|
|
|
prop: 'waybillNumber',
|
|
|
|
label: '运单号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'serviceNumber',
|
|
|
|
label: '服务号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '250',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderCode',
|
|
|
|
label: '订单自编号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '280',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageCode',
|
|
|
|
label: '包条码',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'warehouse',
|
|
|
|
label: '仓库',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'sendWarehouseName',
|
|
|
|
label: '发站仓',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'acceptWarehouseName',
|
|
|
|
label: '目的地',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
prop: 'waybillNumber',
|
|
|
|
label: '发货时间',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'warehouseEntryTimeEnd',
|
|
|
|
label: '入库时间',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'trainNumber',
|
|
|
|
label: '进库车次',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'trainNumber',
|
|
|
|
label: '包件类型',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'reservationNum',
|
|
|
|
label: '计划数量',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'loadingNub',
|
|
|
|
label: '装车数量',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'signingNub',
|
|
|
|
label: '签收数量',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'firsts',
|
|
|
|
label: '一级品类',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '150',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'second',
|
|
|
|
label: '二级品类',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'thirdProduct',
|
|
|
|
label: '三级品类',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageStatusName',
|
|
|
|
label: '包件状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageFreezeStatusName',
|
|
|
|
label: '冻结状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageGroundingStatusName',
|
|
|
|
label: '上架状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageStockupStatusName',
|
|
|
|
label: '备货状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageReservationStatusName',
|
|
|
|
label: '预约状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageLoadingStatusName',
|
|
|
|
label: '装车状态 ',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'scanStatus',
|
|
|
|
label: '装车方式',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'driverName',
|
|
|
|
label: '计划装车人',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'scanUser',
|
|
|
|
label: '实际装车人',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'signingTime',
|
|
|
|
label: '签收扫描时间',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
// 库存品列表
|
|
|
|
const menuData3 = ref([
|
|
|
|
{
|
|
|
|
prop: 'sku',
|
|
|
|
label: 'sku',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'descriptionGoods',
|
|
|
|
label: '物料名称',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'cargoNumber',
|
|
|
|
label: '物料编号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'cargoNorms',
|
|
|
|
label: '物料规格',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'cargoUnit',
|
|
|
|
label: '物料单位',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'category',
|
|
|
|
label: '品分类',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'reservationNum',
|
|
|
|
label: '计划出库数',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'loadedinNumber',
|
|
|
|
label: '实际出库数',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'loadingStatusName',
|
|
|
|
label: '装车状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'signingStatusName',
|
|
|
|
label: '签收状态',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'signUser',
|
|
|
|
label: '签收人',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
const ElButtonS = ref([
|
|
|
|
// 1.class 按钮样式名(用于切换按钮样式)
|
|
|
|
// 2.space 是否开启按钮文子直接间距(true开启 ,false关闭)
|
|
|
|
// 3.size 按钮尺寸默认小尺寸('large'| 'default'| 'small')
|
|
|
|
// 4.icon 按钮图标
|
|
|
|
// 5.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: '编辑',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
class: 'el-btn-danger',
|
|
|
|
space: true,
|
|
|
|
size: 'small',
|
|
|
|
icon: 'el-icon-delete',
|
|
|
|
table: '删除',
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
// menuDataB 增值服务公共表头
|
|
|
|
|
|
|
|
const menuDataB1 = ref([
|
|
|
|
{
|
|
|
|
prop: 'orderCode',
|
|
|
|
label: '订单自编号',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'materialName',
|
|
|
|
label: '货物名称',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'firsts',
|
|
|
|
label: '一级品',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'second',
|
|
|
|
label: '二级品',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'thirdProduct',
|
|
|
|
label: '二级品',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'orderPackageCode',
|
|
|
|
label: '包条码',
|
|
|
|
type: 5,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'quantity',
|
|
|
|
label: '数量',
|
|
|
|
type: 4,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
prop: 'conditions',
|
|
|
|
label: '包条类型',
|
|
|
|
type: 6,
|
|
|
|
values: '',
|
|
|
|
width: '200',
|
|
|
|
checkarr: [],
|
|
|
|
fixed: false,
|
|
|
|
sortable: true,
|
|
|
|
head: true,
|
|
|
|
},
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 页面初始化需要请求的参数
|
|
|
|
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 newlyAdded = val => {
|
|
|
|
dialogBatchDelete.value = true;
|
|
|
|
console.log(val, '触发了新增按钮');
|
|
|
|
};
|
|
|
|
// 批量删除按钮
|
|
|
|
const BatchDelete = val => {
|
|
|
|
console.log(val);
|
|
|
|
};
|
|
|
|
// 获取基础信息
|
|
|
|
editLoading.value = true; //表格开始加载
|
|
|
|
getDetail(RouterId.value).then(res => {
|
|
|
|
editLoading.value = false; //表格加载结束
|
|
|
|
console.log(res, '基础信息');
|
|
|
|
// 当前订单状态
|
|
|
|
if (res.data.data.sijiSigningStatus) {
|
|
|
|
active.value = 2; //司机已签收
|
|
|
|
}
|
|
|
|
if (res.data.data.sijiSigningStatus && res.data.data.wenyuanSigningStatus) {
|
|
|
|
active.value = 3; //文员已签收
|
|
|
|
}
|
|
|
|
form.value = res.data.data; //基础信息
|
|
|
|
InitializeTable.value = 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,
|
|
|
|
};
|
|
|
|
|
|
|
|
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 });
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const handleRemove = () => {
|
|
|
|
console.log('图片移除事件');
|
|
|
|
};
|
|
|
|
// 包件列表
|
|
|
|
function PackageList() {
|
|
|
|
editLoading.value = true; //表格加载开启
|
|
|
|
data.value = [];
|
|
|
|
signforPackageList(RouterId.value).then(res => {
|
|
|
|
console.log(res.data.data, '包件列表');
|
|
|
|
data.value = res.data.data;
|
|
|
|
editLoading.value = false; //表格加载结束
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// 库存品列表
|
|
|
|
function InventoryList() {
|
|
|
|
editLoading.value = true; //表格加载开启
|
|
|
|
data.value = [];
|
|
|
|
signforInventoryList(RouterId.value).then(res => {
|
|
|
|
console.log(res, '库存品列表');
|
|
|
|
data.value = res.data.data;
|
|
|
|
editLoading.value = false; //表格加载结束
|
|
|
|
});
|
|
|
|
}
|
|
|
|
//商品信息切换
|
|
|
|
const tabClick = val => {
|
|
|
|
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 valueAddedServices = val => {
|
|
|
|
addvalueInfoList({
|
|
|
|
addvalueId: val,
|
|
|
|
signforId: RouterId.value,
|
|
|
|
reservationId: RouterReservationId.value,
|
|
|
|
}).then(res => {
|
|
|
|
editLoading.value = false; //关闭加载效果
|
|
|
|
console.log(res, '增值服务上楼的返回值');
|
|
|
|
// if (!res.data.data) {
|
|
|
|
// dataAdded.value = [];
|
|
|
|
// TabTitle.value[0].value = '暂无数据'; //距离
|
|
|
|
// TabTitle.value[1].value = '暂无数据'; //费用
|
|
|
|
// TabTitle.value[2].value = '暂无数据'; //楼层
|
|
|
|
// TabTitle.value[3].value = '暂无数据'; //件数
|
|
|
|
// } else {
|
|
|
|
// dataAdded.value = res.data.data.packageEntityList;
|
|
|
|
// TabTitle.value[0].value = res.data.data.distance ? res.data.data.distance : '暂无数据'; //距离
|
|
|
|
// TabTitle.value[1].value = res.data.data.fee ? res.data.data.fee : '暂无数据'; //费用
|
|
|
|
// TabTitle.value[2].value = res.data.data.floolNum ? res.data.data.floolNum : '暂无数据'; //楼层
|
|
|
|
// TabTitle.value[3].value = res.data.data.packageEntityList ? res.data.data.packageEntityList.length : '暂无数据'; //件数
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 => {
|
|
|
|
console.log(val, '增值服务点击');
|
|
|
|
};
|
|
|
|
// 增值服务信息tab切换
|
|
|
|
const tabClickB = val => {
|
|
|
|
console.log(val, 'val当前信息');
|
|
|
|
|
|
|
|
editLoading.value = true; //开启加载效果
|
|
|
|
TabIndex.value = val.props.name;
|
|
|
|
if (val.props.name == 0) {
|
|
|
|
menuDataB.value = menuDataB1.value;
|
|
|
|
valueAddedServices(1);
|
|
|
|
}
|
|
|
|
if (val.props.name == 1) {
|
|
|
|
menuDataB.value = menuDataB1.value;
|
|
|
|
valueAddedServices(2);
|
|
|
|
}
|
|
|
|
if (val.props.name == 2) {
|
|
|
|
menuDataB.value = menuDataB1.value;
|
|
|
|
valueAddedServices(3);
|
|
|
|
}
|
|
|
|
if (val.props.name == 3) {
|
|
|
|
menuDataB.value = menuDataB1.value;
|
|
|
|
valueAddedServices(4);
|
|
|
|
}
|
|
|
|
if (val.props.name == 4) {
|
|
|
|
menuDataB.value = menuDataB1.value;
|
|
|
|
valueAddedServices(5);
|
|
|
|
}
|
|
|
|
if (val.props.name == 5) {
|
|
|
|
menuDataB.value = menuDataB1.value;
|
|
|
|
valueAddedServices(6);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
//商品信息切换
|
|
|
|
const switchTableFields = fields => {
|
|
|
|
menuData.value = fields; //切换表格展示字段
|
|
|
|
};
|
|
|
|
// 表格全选功能触发
|
|
|
|
const selectAll = val => {
|
|
|
|
console.log(val);
|
|
|
|
};
|
|
|
|
// 表格单个选中触发事件
|
|
|
|
const selectChange = (selection, row) => {
|
|
|
|
// 1.selection 选中的数组
|
|
|
|
// 2.row 选中的当前行
|
|
|
|
console.log(selection);
|
|
|
|
};
|
|
|
|
// 每页多少条触发
|
|
|
|
const PageSizeChange = val => {
|
|
|
|
console.log('每一页', val, '条');
|
|
|
|
};
|
|
|
|
// 页码翻页触发
|
|
|
|
const SizeChange = val => {
|
|
|
|
console.log('当前是第', val, '页');
|
|
|
|
};
|
|
|
|
// 上门照图片上传成功
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</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;
|
|
|
|
}
|
|
|
|
.el-txt {
|
|
|
|
min-width: 280px;
|
|
|
|
margin-right: 1%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
i {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
.title-name {
|
|
|
|
min-width: 120px;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|