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.
1754 lines
45 KiB
1754 lines
45 KiB
<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>
|
|
|