huangyujie
/
qihang-ecom-erp-open
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善tao订单拉取

This commit is contained in:
启航老齐 2025-10-02 08:47:42 +08:00
parent 31047f4925
commit cc53b811ed
7 changed files with 672 additions and 1696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
microservices/tao-api/pom.xml
View File

@ -25,6 +25,11 @@
<scope>system</scope>
<systemPath>${project.basedir}/libs/open-sdk-1.10.1.jar</systemPath>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>4.12.0</version>
</dependency>
<dependency>
<groupId>cn.qihangerp.service</groupId>
<artifactId>tao</artifactId>

33
microservices/tao-api/src/main/java/cn/qihangerp/api/tao/TaoApiCommon.java
View File

@ -6,6 +6,7 @@ import cn.qihangerp.common.api.ShopApiParams;
import cn.qihangerp.common.enums.EnumShopType;
import cn.qihangerp.common.enums.HttpStatus;
import cn.qihangerp.model.entity.OShopPlatform;
import cn.qihangerp.module.service.OShopPlatformService;
import cn.qihangerp.module.service.OShopService;
import lombok.AllArgsConstructor;
import org.springframework.stereotype.Component;
@ -14,7 +15,7 @@ import org.springframework.util.StringUtils;
@Component
public class TaoApiCommon {
private final OShopService shopService;
// private final OShopPlatformService platformService;
private final OShopPlatformService platformService;
/**
* 更新前的检查
@ -35,26 +36,36 @@ public class TaoApiCommon {
// return ApiResult.build(HttpStatus.PARAMS_ERROR, "参数错误，店铺不是淘系店铺");
return ResultVo.error(HttpStatus.PARAMS_ERROR, "参数错误，店铺不是淘系店铺");
}
String appKey = shop.getAppKey();
String appSecret = shop.getAppSecret();
Long sellId = shop.getSellerId();
if(StringUtils.isEmpty(appKey) || StringUtils.isEmpty(appSecret)){
OShopPlatform platform = platformService.selectById(EnumShopType.TAO.getIndex());
if(platform != null){
appKey = platform.getAppKey();
appSecret = platform.getAppSecret();
}
}
//
// OShopPlatform platform = platformService.selectById(EnumShopType.TAO.getIndex());
if(!StringUtils.hasText(shop.getAppKey())) {
if(!StringUtils.hasText(appKey)) {
return ResultVo.error(HttpStatus.PARAMS_ERROR, "平台配置错误，没有找到AppKey");
}
if(!StringUtils.hasText(shop.getAppSecret())) {
return ResultVo.error(HttpStatus.PARAMS_ERROR, "第三方平台配置错误，没有找到AppSercet");
if(!StringUtils.hasText(appSecret)) {
return ResultVo.error(HttpStatus.PARAMS_ERROR, "平台配置错误，没有找到AppSercet");
}
// if(!StringUtils.hasText(platform.getServerUrl())) {
// return ResultVo.error(HttpStatus.PARAMS_ERROR, "第三方平台配置错误，没有找到ServerUrl");
// }
if(shop.getSellerId() == null || shop.getSellerId() <= 0) {
return ResultVo.error(HttpStatus.PARAMS_ERROR, "第三方平台配置错误，没有找到SellerUserId");
}
// if(sellId == null || sellId <= 0) {
// return ResultVo.error(HttpStatus.PARAMS_ERROR, "店铺配置错误，没有找到SellerUserId");
// }
ShopApiParams params = new ShopApiParams();
params.setAppKey(shop.getAppKey());
params.setAppSecret(shop.getAppSecret());
params.setAppKey(appKey);
params.setAppSecret(appSecret);
params.setAccessToken(shop.getAccessToken());
params.setSellerId(sellId);
// params.setRedirectUri(serverConfig.getUrl()+"/taoapi2/tao_oauth");
params.setRedirectUri(shop.getApiRedirectUrl());
params.setServerUrl(shop.getApiRequestUrl());

2
microservices/tao-api/src/main/java/cn/qihangerp/api/tao/controller/TaoOrderApiController.java
View File

@ -40,7 +40,7 @@ import java.util.Date;
*/
@AllArgsConstructor
@RestController
@RequestMapping("/api/open-api/tao/order")
@RequestMapping("/tao/order")
public class TaoOrderApiController {
private static Logger log = LoggerFactory.getLogger(TaoOrderApiController.class);

1085
serviceImpl/order/src/main/java/cn/qihangerp/module/order/service/impl/OOrderServiceImpl.java
View File

File diff suppressed because it is too large Load Diff

622
vue/src/views/order/index.vue
View File

@ -1,620 +1,40 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="订单号" prop="orderNum">
<el-input
v-model="queryParams.orderNum"
placeholder="请输入订单号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="店铺" prop="shopId">
<el-select v-model="queryParams.shopId" placeholder="请选择店铺" clearable @change="handleQuery">
<el-option
v-for="item in shopList"
:key="item.id"
:label="item.name"
:value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 500">微信小店</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 200">京东POP</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 280">京东自营</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 100">淘宝天猫</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 300">拼多多</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 400">抖店</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 999">线下渠道</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下单时间" prop="orderTime">
<el-date-picker clearable
v-model="orderTime" value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="queryParams.orderStatus" placeholder="请选择状态" clearable @change="handleQuery">
<el-option label="待发货" value="1" ></el-option>
<el-option label="已发货" value="2"></el-option>
<el-option label="已完成" value="3"> </el-option>
<el-option label="已取消" value="11"></el-option>
</el-select>
</el-form-item>
<el-form-item label="退款状态" prop="refundStatus">
<el-select v-model="queryParams.refundStatus" placeholder="请选择状态" clearable @change="handleQuery">
<el-option label="无售后或售后关闭" value="1" ></el-option>
<el-option label="售后处理中" value="2"></el-option>
<el-option label="退款中" value="3"> </el-option>
<el-option label="退款成功" value="4"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="推送ERP状态" prop="hasLink">-->
<!-- <el-select v-model="queryParams.erpPushStatus" placeholder="推送ERP状态" clearable @change="handleQuery">-->
<!-- <el-option label="订单推送成功" value="200"></el-option>-->
<!-- <el-option label="订单取消成功" value="100"></el-option>-->
<!-- <el-option label="推送失败" value="500"></el-option>-->
<!-- <el-option label="未推送" value="0"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- :loading="pushLoading"-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-refresh"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handlePushErp"-->
<!-- >手动将选中订单推送到ERP</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['shop:order:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" >
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="订单ID" align="center" prop="id" />-->
<el-table-column label="订单号" align="left" prop="orderNum" width="200px">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>{{scope.row.orderNum}} </el-button>
<i class="el-icon-copy-document tag-copy" :data-clipboard-text="scope.row.orderNum" @click="copyActiveCode($event,scope.row.orderNum)" ></i>
<br/>
<el-tag type="info">{{ shopList.find(x=>x.id === scope.row.shopId) ? shopList.find(x=>x.id === scope.row.shopId).name : '' }}</el-tag>
</template>>
</el-table-column>
<!-- <el-table-column label="店铺" align="center" prop="shopId" >-->
<!-- <template slot-scope="scope">-->
<!-- <el-tag >{{ shopList.find(x=>x.id === scope.row.shopId) ? shopList.find(x=>x.id === scope.row.shopId).name : '' }}</el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="商品明细" align="center" width="900px" >
<template slot="header">
<table>
<th>
<td width="50px">图片</td>
<td width="250px" align="left">标题</td>
<td width="200" align="left">规格</td>
<td width="150" align="left">Sku编码</td>
<td width="150" align="left">电商平台SKUID</td>
<td width="50" align="left">数量</td>
</th>
</table>
</template>
<template slot-scope="scope" >
<el-table :data="scope.row.itemVoList" :show-header="false" :cell-style="{border:0 + 'px' }" :row-style="{border:0 + 'px' }" >
<el-table-column label="商品图片" width="50px">
<template slot-scope="scope">
<!-- <el-image style="width: 40px; height: 40px;" :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>-->
<image-preview :src="scope.row.goodsImg" :width="40" :height="40"/>
</template>
</el-table-column>
<el-table-column label="商品名" align="left" width="250px" prop="goodsTitle" >
<template slot-scope="scope">
{{scope.row.goodsTitle}}
<!-- <el-tag size="small" v-if="scope.row.refundStatus === 1">无售后或售后关闭</el-tag>-->
<el-tag size="small" v-if="scope.row.refundStatus === 2">售后处理中</el-tag>
<el-tag size="small" v-if="scope.row.refundStatus === 3">退款中</el-tag>
<el-tag size="small" v-if="scope.row.refundStatus === 4">退款成功</el-tag>
</template>
</el-table-column>
<el-table-column label="SKU名" align="left" prop="goodsSpec" width="150" :show-overflow-tooltip="true">
<el-table-column label="规格" align="left" prop="goodsSpec" width="200">
<template slot-scope="scope">
{{ getSkuValues(scope.row.goodsSpec)}}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="Sku编码" align="left" prop="skuNum" width="150"/>
<el-table-column label="电商平台SKUID" align="left" prop="skuId" width="150"/>
<el-table-column label="商品数量" align="center" prop="quantity" width="50px">
<template slot-scope="scope">
<el-tag size="small" type="danger">{{scope.row.quantity}}</el-tag>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<!-- <el-table-column label="商品" width="350">-->
<!-- <template slot-scope="scope">-->
<!-- <el-row v-for="item in scope.row.itemVoList" :key="item.id" :gutter="20">-->
<!-- <div style="float: left;display: flex;align-items: center;" >-->
<!-- <el-image style="width: 70px; height: 70px;" :src="item.goodsImg"></el-image>-->
<!-- <div style="margin-left:10px">-->
<!-- <p>{{item.goodsTitle}}【{{item.goodsSpec}}&nbsp;】</p>-->
<!-- <p>SKU编码：{{item.skuNum}}-->
<!-- <el-tag size="small">x {{item.quantity}}</el-tag>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-row>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="订单金额" align="center" prop="amount" :formatter="amountFormatter" >-->
<!-- </el-table-column>-->
<!-- <el-table-column label="实付" align="center" prop="payment" :formatter="amountFormatter" ></el-table-column>-->
<!-- <el-table-column label="平台优惠" align="center" prop="platformDiscount" :formatter="amountFormatter" ></el-table-column>-->
<!-- <el-table-column label="商家优惠" align="center" prop="sellerDiscount" :formatter="amountFormatter" ></el-table-column>-->
<el-table-column label="订单金额" align="center" prop="amount" :formatter="amountFormatter" >
<template slot-scope="scope">
<!-- <div>-->
<!-- <span style="font-size: 10px">商品总额：</span>-->
<!-- <span>{{amountFormatter(null,null,scope.row.goodsAmount)}}</span>-->
<!-- </div>-->
<div>
<span style="font-size: 10px">实付：</span>
<span>{{amountFormatter(null,null,scope.row.payment)}}</span>
</div>
<div><span style="font-size: 10px">平台优惠：</span>
<span>{{amountFormatter(null,null,scope.row.platformDiscount)}}</span>
</div>
<div><span style="font-size: 10px">商家优惠：</span>
<span>{{amountFormatter(null,null,scope.row.sellerDiscount)}}</span>
</div>
<!-- <p>商品总额：{{amountFormatter(null,null,scope.row.goodsAmount)}}</p>-->
<!-- <p>实付金额：{{amountFormatter(null,null,scope.row.payment)}}</p>-->
<!-- <p>平台优惠：{{amountFormatter(null,null,scope.row.platformDiscount)}}</p>-->
<!-- <p>商家优惠：{{amountFormatter(null,null,scope.row.sellerDiscount)}}</p>-->
</template>
</el-table-column>
<!-- <el-table-column label="实付金额" align="center" prop="payment" :formatter="amountFormatter" />-->
<!-- <el-table-column label="订单备注" align="center" prop="remark" :show-overflow-tooltip="true">-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.buyerMemo}}<br />-->
<!-- {{scope.row.sellerMemo}}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="收件人" prop="receiverName" width="200px">
<template slot-scope="scope">
{{scope.row.receiverName}}&nbsp;
{{scope.row.receiverMobile}} <br />
{{scope.row.province}} {{scope.row.city}} {{scope.row.town}} <br />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="orderStatus" >
<template slot-scope="scope">
<el-tag v-if="scope.row.orderStatus === 0" style="margin-bottom: 6px;">新订单</el-tag>
<el-tag v-if="scope.row.orderStatus === 1" style="margin-bottom: 6px;">待发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 2" style="margin-bottom: 6px;">已发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 3" style="margin-bottom: 6px;">已完成</el-tag>
<el-tag v-if="scope.row.orderStatus === 21" style="margin-bottom: 6px;">待付款</el-tag>
<el-tag v-if="scope.row.orderStatus === 22" style="margin-bottom: 6px;">锁定</el-tag>
<el-tag v-if="scope.row.orderStatus === 29" style="margin-bottom: 6px;">删除</el-tag>
<el-tag v-if="scope.row.orderStatus === 11" style="margin-bottom: 6px;">已取消</el-tag>
<br />
<!-- <el-tag style="margin-bottom: 6px;" v-if="scope.row.erpPushStatus === 200">订单推送成功</el-tag>-->
<!-- <el-tag style="margin-bottom: 6px;" v-if="scope.row.erpPushStatus === 100">订单取消推送成功</el-tag>-->
<!-- <el-tag type="danger" style="margin-bottom: 6px;" v-if="!scope.row.erpPushStatus || scope.row.erpPushStatus === 0">待推送到ERP</el-tag>-->
<!-- <el-tag type="danger" style="margin-bottom: 6px;" v-if="scope.row.erpPushStatus > 200">推送错误</el-tag>-->
<!-- <div style="margin-bottom: 6px;color:red" v-if="scope.row.erpPushStatus > 200">{{scope.row.erpPushResult}}</div>-->
<!-- <br />-->
<!-- &lt;!&ndash; 1：无售后或售后关闭，2：售后处理中，3：退款中，4： 退款成功 &ndash;&gt;-->
<!-- <el-tag v-if="scope.row.refundStatus === 1">无售后或售后关闭</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 2">售后处理中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 3">退款中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 4">退款成功</el-tag>-->
</template>
</el-table-column>
<!-- <el-table-column label="发货信息" align="center" prop="shippingNumber" >-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.shippingNumber}}&nbsp; {{scope.row.shippingCompany}}<br />-->
<!-- {{ parseTime(scope.row.shippingTime, '{y}-{m}-{d} {h}:{m}:{s}') }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="下单时间" align="center" prop="orderTime" >
<template slot-scope="scope">
{{ parseTime(scope.row.orderTime) }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button style="padding-right: 6px;padding-left: 6px"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
<el-button v-if="scope.row.orderStatus===1"
size="mini" style="padding-right: 6px;padding-left: 6px"
type="text"
icon="el-icon-delete"
@click="handleCancel(scope.row)"
>取消订单</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 订单详情对话框 -->
<el-dialog :title="detailTitle" :visible.sync="detailOpen" width="1100px" append-to-body>
<el-tabs v-model="activeName" >
<el-tab-pane label="订单详情" name="orderDetail">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" inline>
<el-descriptions title="订单信息">
<el-descriptions-item label="ID">{{form.id}}</el-descriptions-item>
<el-descriptions-item label="订单号">{{form.orderNum}}</el-descriptions-item>
<el-descriptions-item label="店铺">
{{ shopList.find(x=>x.id === form.shopId)?shopList.find(x=>x.id === form.shopId).name:'' }}
<el-tag size="small" v-if="form.shopType === 1">天猫</el-tag>
<el-tag size="small" v-if="form.shopType === 4">拼多多</el-tag>
<el-tag size="small" v-if="form.shopType === 3">抖店</el-tag>
<el-tag size="small" v-if="form.shopType === 2">京东POP</el-tag>
<el-tag size="small" v-if="form.shopType === 5">京东自营</el-tag>
</el-descriptions-item>
<el-descriptions-item label="买家留言">
{{form.buyerMemo}}
</el-descriptions-item>
<el-descriptions-item label="卖家留言">
{{form.sellerMemo}}
</el-descriptions-item>
<el-descriptions-item label="备注">
{{form.remark}}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ parseTime(form.createTime) }}
<!-- <el-date-picker
disabled
v-model="form.orderCreateTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择订单创建时间">
</el-date-picker> -->
</el-descriptions-item>
<el-descriptions-item label="支付时间"> {{ parseTime(form.payTime) }}</el-descriptions-item>
<el-descriptions-item label="最后更新时间"> {{ parseTime(form.updateTime) }}</el-descriptions-item>
<el-descriptions-item label="订单状态">
<el-tag v-if="form.orderStatus === 1" style="margin-bottom: 6px;">待发货</el-tag>
<el-tag v-if="form.orderStatus === 2" style="margin-bottom: 6px;">已出库</el-tag>
<el-tag v-if="form.orderStatus === 3" style="margin-bottom: 6px;">已发货</el-tag>
</el-descriptions-item>
<el-descriptions-item label="退款状态">
<el-tag v-if="form.refundStatus === 1">无售后或售后关闭</el-tag>
<el-tag v-if="form.refundStatus === 2">售后处理中</el-tag>
<el-tag v-if="form.refundStatus === 3">退款中</el-tag>
<el-tag v-if="form.refundStatus === 4">退款成功</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-descriptions title="付款信息">
<el-descriptions-item label="商品总额">{{amountFormatter(null,null,form.goodsAmount,0)}}</el-descriptions-item>
<el-descriptions-item label="订单金额">{{amountFormatter(null,null,form.amount,0)}}</el-descriptions-item>
<el-descriptions-item label="实际支付金额">{{amountFormatter(null,null,form.payment,0)}}</el-descriptions-item>
<el-descriptions-item label="平台优惠金额">{{amountFormatter(null,null,form.platformDiscount,0)}}</el-descriptions-item>
<el-descriptions-item label="商家优惠金额">{{amountFormatter(null,null,form.sellerDiscount,0)}}</el-descriptions-item>
</el-descriptions>
<el-descriptions title="收货信息">
<el-descriptions-item label="收件人姓名">{{form.receiverName}}</el-descriptions-item>
<el-descriptions-item label="收件人手机号">{{form.receiverMobile}}</el-descriptions-item>
<el-descriptions-item label="省市区">{{form.province}}{{form.city}}{{form.town}}</el-descriptions-item>
<el-descriptions-item label="详细地址">{{form.address}}</el-descriptions-item>
</el-descriptions>
<el-descriptions title="发货信息">
<el-descriptions-item label="物流公司">{{form.shippingCompany}}</el-descriptions-item>
<el-descriptions-item label="物流单号">{{form.shippingNumber}}</el-descriptions-item>
<el-descriptions-item label="发货时间">{{form.shippingTime}}</el-descriptions-item>
</el-descriptions>
</el-form>
</el-tab-pane>
<el-tab-pane label="商品列表" name="orderItems" lazy>
<el-table :data="form.itemVoList" style="margin-bottom: 10px;">
<!-- <el-table-column type="selection" width="50" align="center" /> -->
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="商品图片" prop="goodsImg" width="80">
<template slot-scope="scope">
<el-image style="width: 70px; height: 70px" :src="scope.row.goodsImg"></el-image>
</template>
</el-table-column>
<el-table-column label="商品标题" prop="goodsTitle" ></el-table-column>
<el-table-column label="规格" prop="goodsSpec" width="150">
<template slot-scope="scope">
{{ getSkuValues(scope.row.goodsSpec)}}
</template>
</el-table-column>
<el-table-column label="sku编码" prop="skuNum"></el-table-column>
<el-table-column label="商品库SKUID" prop="goodsSkuId"></el-table-column>
<el-table-column label="单价" prop="goodsPrice"></el-table-column>
<el-table-column label="子订单金额" prop="itemAmount"></el-table-column>
<el-table-column label="实付金额" prop="payment"></el-table-column>
<el-table-column label="数量" prop="quantity"></el-table-column>
<el-table-column label="状态" prop="orderStatus">
<template slot-scope="scope">
<el-tag v-if="scope.row.orderStatus === 1">待发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 2">已发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 3">已完成</el-tag>
<el-tag v-if="scope.row.orderStatus === 11">已取消</el-tag>
</template>
</el-table-column>
<!-- <el-table-column label="退款状态" prop="refundStatus">-->
<!-- <template slot-scope="scope">-->
<!-- &lt;!&ndash; 1：无售后或售后关闭，2：售后处理中，3：退款中，4： 退款成功 &ndash;&gt;-->
<!-- <el-tag v-if="scope.row.refundStatus === 1">无售后或售后关闭</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 2">售后处理中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 3">退款中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 4">退款成功</el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-tab-pane>
<el-tab-pane label="优惠明细" name="orderCou" lazy>
<el-table :data="form.discounts" style="margin-bottom: 10px;">
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="优惠名称" prop="name" ></el-table-column>
<el-table-column label="优惠金额" prop="discountAmount"></el-table-column>
<el-table-column label="优惠描述" prop="description"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="物流单" name="orderLog" lazy>
</el-tab-pane>
</el-tabs>
</el-dialog>
<!-- 取消订单 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" >
<el-form-item label="取消理由" prop="cancelReason" >
<el-input v-model="form.cancelReason" type="textarea" placeholder="请输入内容" style="width:300px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitCancelForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="订单列表" name="orderList" >
<order-list></order-list>
</el-tab-pane>
<el-tab-pane label="订单商品明细" name="orderItemList" lazy>
<order-item></order-item>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {listOrder, getOrder, delOrder, addOrder, updateOrder, pushErp,cancelOrder} from "@/api/order/order";
import { listShop } from "@/api/shop/shop";
import Clipboard from "clipboard";
import OrderList from "@/views/order/order_list.vue";
import OrderItem from "@/views/order/item_list.vue";
export default {
name: "Order",
components:{ OrderList, OrderItem},
data() {
return {
// 遮罩层
loading: true,
pushLoading: false,
// 选中数组
ids: [],
// 子表选中数据
checkedSShopOrderItem: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 店铺订单表格数据
orderList: [],
// ${subTable.functionName}表格数据
sShopOrderItemList: [],
shopList:[],
// 弹出层标题
detailTitle:'订单详情',
title:'',
detailOpen:false,
open:false,
isAudit:false,
activeName: 'orderDetail',
orderTime: null,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderNum: null,
shopId: null,
startTime: null,
endTime: null,
refundStatus: null,
orderStatus: null
},
// 表单参数
form: {},
// 表单校验
rules: {
cancelReason:[{ required: true, message: '不能为空' }],
}
activeName: 'orderList',
typeList: [],
};
},
created() {
listShop({}).then(response => {
this.shopList = response.rows;
});
this.getList();
},
mounted() {
},
methods: {
copyActiveCode(event,queryParams) {
console.log(queryParams)
const clipboard = new Clipboard(".tag-copy")
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' })
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
// 释放内存
clipboard.destroy()
})
},
getSkuValues(spec){
try {
// 解析 JSON，返回一个数组
const parsedSpec = JSON.parse(spec) || [];
// 使用 map 提取所有 value，使用 join() 用逗号连接
return parsedSpec.map(item => item.attr_value || item.value).join(', ') || '';
} catch (error) {
return spec; // 如果 JSON 解析出错，返回空字符串
}
},
amountFormatter(row, column, cellValue, index) {
return '￥' + parseFloat(cellValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
},
/** 新增按钮操作 */
handleAdd() {
this.$router.push('/order/create');
},
/** 查询店铺订单列表 */
getList() {
console.log('=====搜索条件：=====',this.queryParams)
if(this.orderTime){
this.queryParams.startTime = this.orderTime[0]
this.queryParams.endTime = this.orderTime[1]
}else {
this.queryParams.startTime = null
this.queryParams.endTime = null
}
this.loading = true;
listOrder(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.orderTime=null
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
cancel(){
this.open = false
this.detailOpen = false
},
reset(){
},
handlePushErp(row){
const id = row.id || this.ids
this.pushLoading = true
pushErp(id).then(response => {
console.log('======返回====',response)
this.$modal.msgSuccess("推送成功！请在订单详情查看推送结果！");
this.pushLoading = false
this.getList()
});
},
handleShip(row){
},
//取消订单
handleCancel(row){
this.form.id = row.id
this.form.remark=''
this.open = true;
this.title = "取消订单";
},
/** 提交按钮 */
submitCancelForm() {
this.$refs["form"].validate(valid => {
if (valid) {
cancelOrder(this.form).then(response => {
this.$modal.msgSuccess("订单取消成功");
this.open = false;
this.getList();
});
}
});
},
/** 详情按钮操作 */
handleDetail(row) {
this.reset();
const id = row.id || this.ids
getOrder(id).then(response => {
this.form = response.data;
// this.$nextTick(()=>{
// this.form.shipType = response.data.shipType
// })
this.detailOpen = true;
this.detailTitle = "订单详情";
});
this.isAudit = false
},
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>

620
vue/src/views/order/order_list.vue Normal file
View File

@ -0,0 +1,620 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="订单号" prop="orderNum">
<el-input
v-model="queryParams.orderNum"
placeholder="请输入订单号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="店铺" prop="shopId">
<el-select v-model="queryParams.shopId" placeholder="请选择店铺" clearable @change="handleQuery">
<el-option
v-for="item in shopList"
:key="item.id"
:label="item.name"
:value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 500">微信小店</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 200">京东POP</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 280">京东自营</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 100">淘宝天猫</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 300">拼多多</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 400">抖店</span>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="item.type === 999">线下渠道</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下单时间" prop="orderTime">
<el-date-picker clearable
v-model="orderTime" value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-select v-model="queryParams.orderStatus" placeholder="请选择状态" clearable @change="handleQuery">
<el-option label="待发货" value="1" ></el-option>
<el-option label="已发货" value="2"></el-option>
<el-option label="已完成" value="3"> </el-option>
<el-option label="已取消" value="11"></el-option>
</el-select>
</el-form-item>
<el-form-item label="退款状态" prop="refundStatus">
<el-select v-model="queryParams.refundStatus" placeholder="请选择状态" clearable @change="handleQuery">
<el-option label="无售后或售后关闭" value="1" ></el-option>
<el-option label="售后处理中" value="2"></el-option>
<el-option label="退款中" value="3"> </el-option>
<el-option label="退款成功" value="4"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="推送ERP状态" prop="hasLink">-->
<!-- <el-select v-model="queryParams.erpPushStatus" placeholder="推送ERP状态" clearable @change="handleQuery">-->
<!-- <el-option label="订单推送成功" value="200"></el-option>-->
<!-- <el-option label="订单取消成功" value="100"></el-option>-->
<!-- <el-option label="推送失败" value="500"></el-option>-->
<!-- <el-option label="未推送" value="0"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- :loading="pushLoading"-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-refresh"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handlePushErp"-->
<!-- >手动将选中订单推送到ERP</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['shop:order:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" >
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="订单ID" align="center" prop="id" />-->
<el-table-column label="订单号" align="left" prop="orderNum" width="200px">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>{{scope.row.orderNum}} </el-button>
<i class="el-icon-copy-document tag-copy" :data-clipboard-text="scope.row.orderNum" @click="copyActiveCode($event,scope.row.orderNum)" ></i>
<br/>
<el-tag type="info">{{ shopList.find(x=>x.id === scope.row.shopId) ? shopList.find(x=>x.id === scope.row.shopId).name : '' }}</el-tag>
</template>>
</el-table-column>
<!-- <el-table-column label="店铺" align="center" prop="shopId" >-->
<!-- <template slot-scope="scope">-->
<!-- <el-tag >{{ shopList.find(x=>x.id === scope.row.shopId) ? shopList.find(x=>x.id === scope.row.shopId).name : '' }}</el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="商品明细" align="center" width="900px" >
<template slot="header">
<table>
<th>
<td width="50px">图片</td>
<td width="250px" align="left">标题</td>
<td width="200" align="left">规格</td>
<td width="150" align="left">Sku编码</td>
<td width="150" align="left">电商平台SKUID</td>
<td width="50" align="left">数量</td>
</th>
</table>
</template>
<template slot-scope="scope" >
<el-table :data="scope.row.itemVoList" :show-header="false" :cell-style="{border:0 + 'px' }" :row-style="{border:0 + 'px' }" >
<el-table-column label="商品图片" width="50px">
<template slot-scope="scope">
<!-- <el-image style="width: 40px; height: 40px;" :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>-->
<image-preview :src="scope.row.goodsImg" :width="40" :height="40"/>
</template>
</el-table-column>
<el-table-column label="商品名" align="left" width="250px" prop="goodsTitle" >
<template slot-scope="scope">
{{scope.row.goodsTitle}}
<!-- <el-tag size="small" v-if="scope.row.refundStatus === 1">无售后或售后关闭</el-tag>-->
<el-tag size="small" v-if="scope.row.refundStatus === 2">售后处理中</el-tag>
<el-tag size="small" v-if="scope.row.refundStatus === 3">退款中</el-tag>
<el-tag size="small" v-if="scope.row.refundStatus === 4">退款成功</el-tag>
</template>
</el-table-column>
<el-table-column label="SKU名" align="left" prop="goodsSpec" width="150" :show-overflow-tooltip="true">
<el-table-column label="规格" align="left" prop="goodsSpec" width="200">
<template slot-scope="scope">
{{ getSkuValues(scope.row.goodsSpec)}}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="Sku编码" align="left" prop="skuNum" width="150"/>
<el-table-column label="电商平台SKUID" align="left" prop="skuId" width="150"/>
<el-table-column label="商品数量" align="center" prop="quantity" width="50px">
<template slot-scope="scope">
<el-tag size="small" type="danger">{{scope.row.quantity}}</el-tag>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<!-- <el-table-column label="商品" width="350">-->
<!-- <template slot-scope="scope">-->
<!-- <el-row v-for="item in scope.row.itemVoList" :key="item.id" :gutter="20">-->
<!-- <div style="float: left;display: flex;align-items: center;" >-->
<!-- <el-image style="width: 70px; height: 70px;" :src="item.goodsImg"></el-image>-->
<!-- <div style="margin-left:10px">-->
<!-- <p>{{item.goodsTitle}}【{{item.goodsSpec}}&nbsp;】</p>-->
<!-- <p>SKU编码：{{item.skuNum}}-->
<!-- <el-tag size="small">x {{item.quantity}}</el-tag>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-row>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="订单金额" align="center" prop="amount" :formatter="amountFormatter" >-->
<!-- </el-table-column>-->
<!-- <el-table-column label="实付" align="center" prop="payment" :formatter="amountFormatter" ></el-table-column>-->
<!-- <el-table-column label="平台优惠" align="center" prop="platformDiscount" :formatter="amountFormatter" ></el-table-column>-->
<!-- <el-table-column label="商家优惠" align="center" prop="sellerDiscount" :formatter="amountFormatter" ></el-table-column>-->
<el-table-column label="订单金额" align="center" prop="amount" :formatter="amountFormatter" >
<template slot-scope="scope">
<!-- <div>-->
<!-- <span style="font-size: 10px">商品总额：</span>-->
<!-- <span>{{amountFormatter(null,null,scope.row.goodsAmount)}}</span>-->
<!-- </div>-->
<div>
<span style="font-size: 10px">实付：</span>
<span>{{amountFormatter(null,null,scope.row.payment)}}</span>
</div>
<div><span style="font-size: 10px">平台优惠：</span>
<span>{{amountFormatter(null,null,scope.row.platformDiscount)}}</span>
</div>
<div><span style="font-size: 10px">商家优惠：</span>
<span>{{amountFormatter(null,null,scope.row.sellerDiscount)}}</span>
</div>
<!-- <p>商品总额：{{amountFormatter(null,null,scope.row.goodsAmount)}}</p>-->
<!-- <p>实付金额：{{amountFormatter(null,null,scope.row.payment)}}</p>-->
<!-- <p>平台优惠：{{amountFormatter(null,null,scope.row.platformDiscount)}}</p>-->
<!-- <p>商家优惠：{{amountFormatter(null,null,scope.row.sellerDiscount)}}</p>-->
</template>
</el-table-column>
<!-- <el-table-column label="实付金额" align="center" prop="payment" :formatter="amountFormatter" />-->
<!-- <el-table-column label="订单备注" align="center" prop="remark" :show-overflow-tooltip="true">-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.buyerMemo}}<br />-->
<!-- {{scope.row.sellerMemo}}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="收件人" prop="receiverName" width="200px">
<template slot-scope="scope">
{{scope.row.receiverName}}&nbsp;
{{scope.row.receiverMobile}} <br />
{{scope.row.province}} {{scope.row.city}} {{scope.row.town}} <br />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="orderStatus" >
<template slot-scope="scope">
<el-tag v-if="scope.row.orderStatus === 0" style="margin-bottom: 6px;">新订单</el-tag>
<el-tag v-if="scope.row.orderStatus === 1" style="margin-bottom: 6px;">待发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 2" style="margin-bottom: 6px;">已发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 3" style="margin-bottom: 6px;">已完成</el-tag>
<el-tag v-if="scope.row.orderStatus === 21" style="margin-bottom: 6px;">待付款</el-tag>
<el-tag v-if="scope.row.orderStatus === 22" style="margin-bottom: 6px;">锁定</el-tag>
<el-tag v-if="scope.row.orderStatus === 29" style="margin-bottom: 6px;">删除</el-tag>
<el-tag v-if="scope.row.orderStatus === 11" style="margin-bottom: 6px;">已取消</el-tag>
<br />
<!-- <el-tag style="margin-bottom: 6px;" v-if="scope.row.erpPushStatus === 200">订单推送成功</el-tag>-->
<!-- <el-tag style="margin-bottom: 6px;" v-if="scope.row.erpPushStatus === 100">订单取消推送成功</el-tag>-->
<!-- <el-tag type="danger" style="margin-bottom: 6px;" v-if="!scope.row.erpPushStatus || scope.row.erpPushStatus === 0">待推送到ERP</el-tag>-->
<!-- <el-tag type="danger" style="margin-bottom: 6px;" v-if="scope.row.erpPushStatus > 200">推送错误</el-tag>-->
<!-- <div style="margin-bottom: 6px;color:red" v-if="scope.row.erpPushStatus > 200">{{scope.row.erpPushResult}}</div>-->
<!-- <br />-->
<!-- &lt;!&ndash; 1：无售后或售后关闭，2：售后处理中，3：退款中，4： 退款成功 &ndash;&gt;-->
<!-- <el-tag v-if="scope.row.refundStatus === 1">无售后或售后关闭</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 2">售后处理中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 3">退款中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 4">退款成功</el-tag>-->
</template>
</el-table-column>
<!-- <el-table-column label="发货信息" align="center" prop="shippingNumber" >-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.shippingNumber}}&nbsp; {{scope.row.shippingCompany}}<br />-->
<!-- {{ parseTime(scope.row.shippingTime, '{y}-{m}-{d} {h}:{m}:{s}') }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="下单时间" align="center" prop="orderTime" >
<template slot-scope="scope">
{{ parseTime(scope.row.orderTime) }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button style="padding-right: 6px;padding-left: 6px"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
<el-button v-if="scope.row.orderStatus===1"
size="mini" style="padding-right: 6px;padding-left: 6px"
type="text"
icon="el-icon-delete"
@click="handleCancel(scope.row)"
>取消订单</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 订单详情对话框 -->
<el-dialog :title="detailTitle" :visible.sync="detailOpen" width="1100px" append-to-body>
<el-tabs v-model="activeName" >
<el-tab-pane label="订单详情" name="orderDetail">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" inline>
<el-descriptions title="订单信息">
<el-descriptions-item label="ID">{{form.id}}</el-descriptions-item>
<el-descriptions-item label="订单号">{{form.orderNum}}</el-descriptions-item>
<el-descriptions-item label="店铺">
{{ shopList.find(x=>x.id === form.shopId)?shopList.find(x=>x.id === form.shopId).name:'' }}
<el-tag size="small" v-if="form.shopType === 1">天猫</el-tag>
<el-tag size="small" v-if="form.shopType === 4">拼多多</el-tag>
<el-tag size="small" v-if="form.shopType === 3">抖店</el-tag>
<el-tag size="small" v-if="form.shopType === 2">京东POP</el-tag>
<el-tag size="small" v-if="form.shopType === 5">京东自营</el-tag>
</el-descriptions-item>
<el-descriptions-item label="买家留言">
{{form.buyerMemo}}
</el-descriptions-item>
<el-descriptions-item label="卖家留言">
{{form.sellerMemo}}
</el-descriptions-item>
<el-descriptions-item label="备注">
{{form.remark}}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ parseTime(form.createTime) }}
<!-- <el-date-picker
disabled
v-model="form.orderCreateTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择订单创建时间">
</el-date-picker> -->
</el-descriptions-item>
<el-descriptions-item label="支付时间"> {{ parseTime(form.payTime) }}</el-descriptions-item>
<el-descriptions-item label="最后更新时间"> {{ parseTime(form.updateTime) }}</el-descriptions-item>
<el-descriptions-item label="订单状态">
<el-tag v-if="form.orderStatus === 1" style="margin-bottom: 6px;">待发货</el-tag>
<el-tag v-if="form.orderStatus === 2" style="margin-bottom: 6px;">已出库</el-tag>
<el-tag v-if="form.orderStatus === 3" style="margin-bottom: 6px;">已发货</el-tag>
</el-descriptions-item>
<el-descriptions-item label="退款状态">
<el-tag v-if="form.refundStatus === 1">无售后或售后关闭</el-tag>
<el-tag v-if="form.refundStatus === 2">售后处理中</el-tag>
<el-tag v-if="form.refundStatus === 3">退款中</el-tag>
<el-tag v-if="form.refundStatus === 4">退款成功</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-descriptions title="付款信息">
<el-descriptions-item label="商品总额">{{amountFormatter(null,null,form.goodsAmount,0)}}</el-descriptions-item>
<el-descriptions-item label="订单金额">{{amountFormatter(null,null,form.amount,0)}}</el-descriptions-item>
<el-descriptions-item label="实际支付金额">{{amountFormatter(null,null,form.payment,0)}}</el-descriptions-item>
<el-descriptions-item label="平台优惠金额">{{amountFormatter(null,null,form.platformDiscount,0)}}</el-descriptions-item>
<el-descriptions-item label="商家优惠金额">{{amountFormatter(null,null,form.sellerDiscount,0)}}</el-descriptions-item>
</el-descriptions>
<el-descriptions title="收货信息">
<el-descriptions-item label="收件人姓名">{{form.receiverName}}</el-descriptions-item>
<el-descriptions-item label="收件人手机号">{{form.receiverMobile}}</el-descriptions-item>
<el-descriptions-item label="省市区">{{form.province}}{{form.city}}{{form.town}}</el-descriptions-item>
<el-descriptions-item label="详细地址">{{form.address}}</el-descriptions-item>
</el-descriptions>
<el-descriptions title="发货信息">
<el-descriptions-item label="物流公司">{{form.shippingCompany}}</el-descriptions-item>
<el-descriptions-item label="物流单号">{{form.shippingNumber}}</el-descriptions-item>
<el-descriptions-item label="发货时间">{{form.shippingTime}}</el-descriptions-item>
</el-descriptions>
</el-form>
</el-tab-pane>
<el-tab-pane label="商品列表" name="orderItems" lazy>
<el-table :data="form.itemVoList" style="margin-bottom: 10px;">
<!-- <el-table-column type="selection" width="50" align="center" /> -->
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="商品图片" prop="goodsImg" width="80">
<template slot-scope="scope">
<el-image style="width: 70px; height: 70px" :src="scope.row.goodsImg"></el-image>
</template>
</el-table-column>
<el-table-column label="商品标题" prop="goodsTitle" ></el-table-column>
<el-table-column label="规格" prop="goodsSpec" width="150">
<template slot-scope="scope">
{{ getSkuValues(scope.row.goodsSpec)}}
</template>
</el-table-column>
<el-table-column label="sku编码" prop="skuNum"></el-table-column>
<el-table-column label="商品库SKUID" prop="goodsSkuId"></el-table-column>
<el-table-column label="单价" prop="goodsPrice"></el-table-column>
<el-table-column label="子订单金额" prop="itemAmount"></el-table-column>
<el-table-column label="实付金额" prop="payment"></el-table-column>
<el-table-column label="数量" prop="quantity"></el-table-column>
<el-table-column label="状态" prop="orderStatus">
<template slot-scope="scope">
<el-tag v-if="scope.row.orderStatus === 1">待发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 2">已发货</el-tag>
<el-tag v-if="scope.row.orderStatus === 3">已完成</el-tag>
<el-tag v-if="scope.row.orderStatus === 11">已取消</el-tag>
</template>
</el-table-column>
<!-- <el-table-column label="退款状态" prop="refundStatus">-->
<!-- <template slot-scope="scope">-->
<!-- &lt;!&ndash; 1：无售后或售后关闭，2：售后处理中，3：退款中，4： 退款成功 &ndash;&gt;-->
<!-- <el-tag v-if="scope.row.refundStatus === 1">无售后或售后关闭</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 2">售后处理中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 3">退款中</el-tag>-->
<!-- <el-tag v-if="scope.row.refundStatus === 4">退款成功</el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-tab-pane>
<el-tab-pane label="优惠明细" name="orderCou" lazy>
<el-table :data="form.discounts" style="margin-bottom: 10px;">
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="优惠名称" prop="name" ></el-table-column>
<el-table-column label="优惠金额" prop="discountAmount"></el-table-column>
<el-table-column label="优惠描述" prop="description"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="物流单" name="orderLog" lazy>
</el-tab-pane>
</el-tabs>
</el-dialog>
<!-- 取消订单 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" >
<el-form-item label="取消理由" prop="cancelReason" >
<el-input v-model="form.cancelReason" type="textarea" placeholder="请输入内容" style="width:300px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitCancelForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listOrder, getOrder, delOrder, addOrder, updateOrder, pushErp,cancelOrder} from "@/api/order/order";
import { listShop } from "@/api/shop/shop";
import Clipboard from "clipboard";
export default {
name: "Order",
data() {
return {
// 遮罩层
loading: true,
pushLoading: false,
// 选中数组
ids: [],
// 子表选中数据
checkedSShopOrderItem: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 店铺订单表格数据
orderList: [],
// ${subTable.functionName}表格数据
sShopOrderItemList: [],
shopList:[],
// 弹出层标题
detailTitle:'订单详情',
title:'',
detailOpen:false,
open:false,
isAudit:false,
activeName: 'orderDetail',
orderTime: null,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderNum: null,
shopId: null,
startTime: null,
endTime: null,
refundStatus: null,
orderStatus: null
},
// 表单参数
form: {},
// 表单校验
rules: {
cancelReason:[{ required: true, message: '不能为空' }],
}
};
},
created() {
listShop({}).then(response => {
this.shopList = response.rows;
});
this.getList();
},
methods: {
copyActiveCode(event,queryParams) {
console.log(queryParams)
const clipboard = new Clipboard(".tag-copy")
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' })
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
// 释放内存
clipboard.destroy()
})
},
getSkuValues(spec){
try {
// 解析 JSON，返回一个数组
const parsedSpec = JSON.parse(spec) || [];
// 使用 map 提取所有 value，使用 join() 用逗号连接
return parsedSpec.map(item => item.attr_value || item.value).join(', ') || '';
} catch (error) {
return spec; // 如果 JSON 解析出错，返回空字符串
}
},
amountFormatter(row, column, cellValue, index) {
return '￥' + parseFloat(cellValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
},
/** 新增按钮操作 */
handleAdd() {
this.$router.push('/order/create');
},
/** 查询店铺订单列表 */
getList() {
console.log('=====搜索条件：=====',this.queryParams)
if(this.orderTime){
this.queryParams.startTime = this.orderTime[0]
this.queryParams.endTime = this.orderTime[1]
}else {
this.queryParams.startTime = null
this.queryParams.endTime = null
}
this.loading = true;
listOrder(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.orderTime=null
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
cancel(){
this.open = false
this.detailOpen = false
},
reset(){
},
handlePushErp(row){
const id = row.id || this.ids
this.pushLoading = true
pushErp(id).then(response => {
console.log('======返回====',response)
this.$modal.msgSuccess("推送成功！请在订单详情查看推送结果！");
this.pushLoading = false
this.getList()
});
},
handleShip(row){
},
//取消订单
handleCancel(row){
this.form.id = row.id
this.form.remark=''
this.open = true;
this.title = "取消订单";
},
/** 提交按钮 */
submitCancelForm() {
this.$refs["form"].validate(valid => {
if (valid) {
cancelOrder(this.form).then(response => {
this.$modal.msgSuccess("订单取消成功");
this.open = false;
this.getList();
});
}
});
},
/** 详情按钮操作 */
handleDetail(row) {
this.reset();
const id = row.id || this.ids
getOrder(id).then(response => {
this.form = response.data;
// this.$nextTick(()=>{
// this.form.shipType = response.data.shipType
// })
this.detailOpen = true;
this.detailTitle = "订单详情";
});
this.isAudit = false
},
}
};
</script>

1
vue/src/views/tao/order/index.vue
View File

@ -318,6 +318,7 @@ export default {
},
/** 搜索按钮操作 */
handleQuery() {
this.pullLoading = false
this.queryParams.pageNum = 1;
this.getList();
},