完善tao订单拉取

microservices/tao-api/pom.xml

@@ -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>

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

@@ -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(appKey)) {
-
-        if(!StringUtils.hasText(shop.getAppKey())) {
             return ResultVo.error(HttpStatus.PARAMS_ERROR, "平台配置错误，没有找到AppKey");
         }
-        if(!StringUtils.hasText(shop.getAppSecret())) {
+        if(!StringUtils.hasText(appSecret)) {
-            return ResultVo.error(HttpStatus.PARAMS_ERROR, "第三方平台配置错误，没有找到AppSercet");
+            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) {
+//        if(sellId == null || sellId <= 0) {
-            return ResultVo.error(HttpStatus.PARAMS_ERROR,  "第三方平台配置错误，没有找到SellerUserId");
+//            return ResultVo.error(HttpStatus.PARAMS_ERROR,  "店铺配置错误，没有找到SellerUserId");
-        }
+//        }
 
         ShopApiParams params = new ShopApiParams();
-        params.setAppKey(shop.getAppKey());
+        params.setAppKey(appKey);
-        params.setAppSecret(shop.getAppSecret());
+        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());

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

@@ -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);
 

vue/src/views/order/index.vue

@@ -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-tabs v-model="activeName" @tab-click="handleClick">
-      <el-form-item label="订单号" prop="orderNum">
+      <el-tab-pane label="订单列表" name="orderList" >
-        <el-input
+        <order-list></order-list>
-          v-model="queryParams.orderNum"
+      </el-tab-pane>
-          placeholder="请输入订单号"
+      <el-tab-pane label="订单商品明细" name="orderItemList" lazy>
-          clearable
+        <order-item></order-item>
-          @keyup.enter.native="handleQuery"
+      </el-tab-pane>
-        />
+    </el-tabs>
-      </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 OrderList  from "@/views/order/order_list.vue";
-import { listShop } from "@/api/shop/shop";
+import OrderItem  from "@/views/order/item_list.vue";
-import Clipboard from "clipboard";
+
 
 export default {
   name: "Order",
+  components:{ OrderList, OrderItem},
   data() {
     return {
-      // 遮罩层
+      activeName: 'orderList',
-      loading: true,
+      typeList: [],
-      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;
+  },
-      });
+  mounted() {
-    this.getList();
+
   },
   methods: {
-    copyActiveCode(event,queryParams) {
+    handleClick(tab, event) {
-      console.log(queryParams)
+      console.log(tab, event);
-      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>
-

vue/src/views/order/order_list.vue

@@ -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>
+

vue/src/views/tao/order/index.vue

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