ylrz_his_scrm_companyUI/src/views/store/thirdOrder/index.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeStatus" @tab-click="handleTabClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="未审核" name="1"></el-tab-pane>
      <el-tab-pane label="审核通过" name="2"></el-tab-pane>
      <el-tab-pane label="已发货" name="3"></el-tab-pane>
      <el-tab-pane label="已回款" name="4"></el-tab-pane>
      <el-tab-pane label="已取消" name="-3"></el-tab-pane>
    </el-tabs>

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px" size="small">
      <el-form-item label="订单编号" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="会员ID" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入会员ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入收货人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人电话" prop="userPhone">
        <el-input v-model="queryParams.userPhone" placeholder="请输入收货人电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="工号" prop="companyUserId">
        <el-input v-model="queryParams.companyUserId" placeholder="请输入工号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="下单日期" prop="createTime">
        <el-date-picker
          v-model="createTime"
          style="width: 220px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleCreateTimeChange"
        />
      </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
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['store:thirdOrder:create']"
        >创建订单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-s-check"
          size="mini"
          :disabled="selectedRows.length === 0"
          :loading="batchAuditLoading"
          @click="handleBatchAudit"
          v-hasPermi="['store:thirdOrder:audit']"
        >批量审核</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['store:thirdOrder:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" border :data="orderList" style="width: 100%" height="500" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" :selectable="checkAuditSelectable" fixed="left" />
      <el-table-column label="订单编号" align="center" prop="orderCode" width="170" fixed="left" show-overflow-tooltip />
      <el-table-column label="收货人" align="center" prop="userName" width="90" />
      <el-table-column label="收货人电话" align="center" prop="userPhone" width="130" />
      <el-table-column label="收货地址" align="center" prop="userAddress" width="220" show-overflow-tooltip />
      <el-table-column label="商品总额" align="center" prop="totalPrice" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.totalPrice != null">{{ Number(scope.row.totalPrice).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="定金" align="center" prop="payPrice" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.payPrice != null">{{ Number(scope.row.payPrice).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="代收金额" align="center" prop="collectionPrice" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.collectionPrice != null">{{ Number(scope.row.collectionPrice).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回款金额" align="center" prop="returnPrice" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.returnPrice != null">{{ Number(scope.row.returnPrice).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="warning" size="mini">未审核</el-tag>
          <el-tag v-else-if="scope.row.status == 2" type="primary" size="mini">审核通过</el-tag>
          <el-tag v-else-if="scope.row.status == 3" type="success" size="mini">已发货</el-tag>
          <el-tag v-else-if="scope.row.status == 4" type="success" size="mini">已回款</el-tag>
          <el-tag v-else-if="scope.row.status == -3" type="danger" size="mini">已取消</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="销售" align="center" prop="companyUserName" width="100" />
      <el-table-column label="下单时间" align="center" prop="createTime" width="160" />
      <el-table-column label="审核人" align="center" prop="auditor" width="90" />
      <el-table-column label="审核时间" align="center" prop="auditTime" width="160" />
      <el-table-column label="快递单号" align="center" prop="deliverySn" width="150" show-overflow-tooltip />
      <el-table-column label="物流状态" align="center" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deliveryStatus == 3" type="success" size="mini">已签收</el-tag>
          <el-tag v-else-if="scope.row.deliveryStatus == 1" size="mini">已揽收</el-tag>
          <el-tag v-else-if="scope.row.deliveryStatus == 2" type="warning" size="mini">在途</el-tag>
          <el-tag v-else-if="scope.row.deliveryStatus == 4" type="danger" size="mini">问题件</el-tag>
          <el-tag v-else-if="scope.row.deliveryStatus == 0" type="info" size="mini">暂无轨迹</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="发货时间" align="center" prop="deliveryTime" width="160" />
      <el-table-column label="备注" align="center" prop="remark" width="150" show-overflow-tooltip />
      <el-table-column label="操作" align="center" fixed="right" width="280" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleView(scope.row)" v-hasPermi="['store:thirdOrder:query']">详情</el-button>
          <el-button size="mini" type="text" @click="handleAudit(scope.row)" v-if="scope.row.status == 1" v-hasPermi="['store:thirdOrder:audit']">审核</el-button>
          <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-hasPermi="['store:thirdOrder:edit']">订单修改</el-button>
          <el-button size="mini" type="text" @click="handleExpress(scope.row)" v-if="scope.row.deliverySn">物流</el-button>
          <el-button size="mini" type="text" @click="handleCancel(scope.row)" v-if="scope.row.status != -3" v-hasPermi="['store:thirdOrder:cancel']">取消</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="['store:thirdOrder:remove']">删除</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="创建第三方订单" v-if="open" :visible.sync="open" width="1100px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="会员信息" prop="userId">
          <el-row>
            <el-col>
              <el-input placeholder="请输入会员手机号" style="width:240px;" v-model="phone" clearable @keyup.enter.native="searchUser" />
              <el-button plain style="margin-left:10px;" @click="searchUser()">查询</el-button>
            </el-col>
          </el-row>
          <el-radio-group v-model="form.userId" style="width:100%" @change="handleUserChange">
            <el-table border style="margin-top:5px;" v-loading="userloading" :data="users">
              <el-table-column label="选择" align="center" width="80">
                <template slot-scope="scope">
                  <el-radio :label="scope.row.userId"></el-radio>
                </template>
              </el-table-column>
              <el-table-column label="ID" align="center" prop="userId" width="80" />
              <el-table-column label="会员头像" align="center" width="80">
                <template slot-scope="scope">
                  <el-popover v-if="scope.row.avatar" placement="right" title="" trigger="hover">
                    <img slot="reference" :src="scope.row.avatar" width="50">
                    <img :src="scope.row.avatar" style="max-width: 120px;">
                  </el-popover>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="昵称" align="center" prop="nickName" />
              <el-table-column label="手机号" align="center" prop="phone" />
              <el-table-column label="状态" align="center" prop="status" width="90">
                <template slot-scope="scope">
                  <dict-tag :options="userStatusOptions" :value="scope.row.status"/>
                </template>
              </el-table-column>
            </el-table>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="收货信息" prop="addressId">
          <el-row>
            <el-col>
              <el-button plain type="primary" icon="el-icon-plus" @click="handleAddUserAddress">添加收货地址</el-button>
            </el-col>
          </el-row>
          <el-radio-group v-model="form.addressId" style="width:100%">
            <el-table border style="margin-top:5px;" v-loading="addressloading" :data="address">
              <el-table-column label="选择" align="center" width="80">
                <template slot-scope="scope">
                  <el-radio :label="scope.row.addressId"></el-radio>
                </template>
              </el-table-column>
              <el-table-column label="收货人姓名" align="center" prop="realName" />
              <el-table-column label="收货人电话" align="center" prop="phone" width="130" />
              <el-table-column label="收货人所在省" align="center" prop="province" />
              <el-table-column label="收货人所在市" align="center" prop="city" />
              <el-table-column label="收货人所在区" align="center" prop="district" />
              <el-table-column label="收货人详细地址" align="center" prop="detail" show-overflow-tooltip />
            </el-table>
          </el-radio-group>
        </el-form-item>

        <el-divider content-position="left">商品选择</el-divider>
        <el-row style="margin-bottom: 10px;" :gutter="10">
          <el-col :span="8">
            <el-select
              v-model="productQuery.storeId"
              placeholder="请选择店铺"
              clearable
              filterable
              size="small"
              style="width: 100%"
              @change="handleStoreChange"
            >
              <el-option
                v-for="dict in storeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="productSearchKeyword"
              placeholder="请输入商品名称搜索"
              clearable
              size="small"
              :disabled="!productQuery.storeId"
              @keyup.enter.native="searchProduct"
            />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" :disabled="!productQuery.storeId" @click="searchProduct">搜索</el-button>
          </el-col>
        </el-row>
        <el-alert
          v-if="!productQuery.storeId"
          title="请先选择店铺后再选择商品"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 10px;"
        />
        <el-table border :data="productList" size="small" style="margin-bottom: 10px;">
          <el-table-column label="商品图片" align="center" width="90">
            <template slot-scope="scope">
              <el-popover v-if="scope.row.productImage" placement="right" title="" trigger="hover">
                <img slot="reference" :src="scope.row.productImage" width="50">
                <img :src="scope.row.productImage" style="max-width: 150px;">
              </el-popover>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
          <el-table-column label="商品规格" align="center" prop="productSpec" width="140" show-overflow-tooltip />
          <el-table-column label="售价" align="center" prop="price" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.price != null">{{ Number(scope.row.price).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存" align="center" prop="stock" width="80" />
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain @click="handleSelectProduct(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="productTotal > 0"
          :total="productTotal"
          :page.sync="productQuery.pageNum"
          :limit.sync="productQuery.pageSize"
          @pagination="getProductList"
        />

        <el-divider content-position="left">已选商品</el-divider>
        <el-table border :data="selectedProducts" size="small">
          <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
          <el-table-column label="商品规格" align="center" prop="productSpec" width="140" show-overflow-tooltip />
          <el-table-column label="单价" align="center" width="160">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.price" @change="calcTotalPrice" size="small" :min="0" :precision="2" controls-position="right" style="width: 140px;" />
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center" width="160">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.num" @change="calcTotalPrice" size="small" :min="1" controls-position="right" style="width: 140px;" />
            </template>
          </el-table-column>
          <el-table-column label="小计" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ (scope.row.price * scope.row.num).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRemoveProduct(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row style="margin-top: 10px;">
          <el-col :span="8">
            <el-form-item label="商品总额">
              <el-input v-model="form.totalPrice" disabled style="width: 200px;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="定金" prop="payPrice">
              <el-input-number v-model="form.payPrice" :precision="2" :min="0" controls-position="right" style="width: 200px;" @change="handlePayPriceChange" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代收金额" prop="collectionPrice">
              <el-input-number v-model="form.collectionPrice" :precision="2" :min="0" controls-position="right" style="width: 200px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" style="width: 500px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确认下单</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="userAddress.title" v-if="userAddress.open" :visible.sync="userAddress.open" width="800px" append-to-body>
      <add-user-address ref="addUserAddress" @addUserAddress="addUserAddress" />
    </el-dialog>

    <!-- 订单详情弹窗 -->
    <el-dialog title="订单详情" v-if="detailOpen" :visible.sync="detailOpen" width="1000px" append-to-body>
      <el-descriptions :column="3" border size="small">
        <el-descriptions-item label="订单编号">{{ detailData.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag v-if="detailData.status == 1" type="warning" size="mini">未审核</el-tag>
          <el-tag v-else-if="detailData.status == 2" type="primary" size="mini">审核通过</el-tag>
          <el-tag v-else-if="detailData.status == 3" type="success" size="mini">已发货</el-tag>
          <el-tag v-else-if="detailData.status == 4" type="success" size="mini">已回款</el-tag>
          <el-tag v-else-if="detailData.status == -3" type="danger" size="mini">已取消</el-tag>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="会员ID">{{ detailData.userId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ detailData.userName }}</el-descriptions-item>
        <el-descriptions-item label="收货人电话">{{ detailData.userPhone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="3">{{ detailData.userAddress }}</el-descriptions-item>
        <el-descriptions-item label="商品总额">{{ detailData.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="定金">{{ detailData.payPrice }}</el-descriptions-item>
        <el-descriptions-item label="代收金额">{{ detailData.collectionPrice != null ? detailData.collectionPrice : '-' }}</el-descriptions-item>
        <el-descriptions-item label="回款金额">{{ detailData.returnPrice != null ? detailData.returnPrice : '-' }}</el-descriptions-item>
        <el-descriptions-item label="销售">{{ detailData.companyUserName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{ detailData.companyUserId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ detailData.createTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审核人">{{ detailData.auditor || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审核时间">{{ detailData.auditTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="快递单号">{{ detailData.deliverySn || '-' }}</el-descriptions-item>
        <el-descriptions-item label="物流状态">
          <el-tag v-if="detailData.deliveryStatus == 3" type="success" size="mini">已签收</el-tag>
          <el-tag v-else-if="detailData.deliveryStatus == 1" size="mini">已揽收</el-tag>
          <el-tag v-else-if="detailData.deliveryStatus == 2" type="warning" size="mini">在途</el-tag>
          <el-tag v-else-if="detailData.deliveryStatus == 4" type="danger" size="mini">问题件</el-tag>
          <el-tag v-else-if="detailData.deliveryStatus == 0" type="info" size="mini">暂无轨迹</el-tag>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">{{ detailData.deliveryTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="3">{{ detailData.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="left">商品信息</el-divider>
      <el-table border :data="orderItems" size="small">
        <el-table-column label="商品图片" align="center" width="100">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.productImage" placement="right" title="" trigger="hover">
              <img slot="reference" :src="scope.row.productImage" width="50">
              <img :src="scope.row.productImage" style="max-width: 150px;">
            </el-popover>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
        <el-table-column label="商品规格" align="center" prop="productSpec" width="140" show-overflow-tooltip />
        <el-table-column label="数量" align="center" prop="num" width="90" />
        <el-table-column label="单价" align="center" prop="price" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.price != null">{{ Number(scope.row.price).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总价" align="center" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.price != null && scope.row.num != null">{{ (scope.row.price * scope.row.num).toFixed(2) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 物流信息弹窗 -->
    <el-dialog title="物流信息" :visible.sync="expressOpen" width="700px" append-to-body>
      <div style="margin-bottom: 10px;">
        <span style="margin-right: 15px;">快递公司：{{ expressData.deliveryName || '-' }}</span>
        <span style="margin-right: 15px;">快递单号：{{ expressData.deliverySn || '-' }}</span>
        <el-button
          size="mini"
          type="primary"
          v-hasPermi="['store:thirdOrder:syncExpress']"
          v-if="expressData.orderId && expressData.deliverySn"
          @click="handleSyncExpress"
        >同步快递鸟物流状态</el-button>
      </div>
      <el-table style="width: 100%" :data="expressTraces" border v-loading="expressLoading">
        <el-table-column label="操作时间" width="160" align="center" prop="AcceptTime" />
        <el-table-column label="位置" align="center" prop="Location" />
        <el-table-column label="描述" align="center" prop="AcceptStation" />
      </el-table>
      <el-empty v-if="!expressLoading && (!expressTraces || expressTraces.length === 0)" description="暂无物流信息" />
    </el-dialog>

    <!-- 订单修改弹窗 -->
    <el-dialog title="订单修改" :visible.sync="editOpen" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="editForm" :model="editForm" label-width="120px">
        <el-form-item label="订单状态">
          <el-select v-model="editForm.status" placeholder="请选择订单状态" clearable size="small" style="width:200px;">
            <el-option label="未审核" :value="1" />
            <el-option label="审核通过" :value="2" />
            <el-option label="已发货" :value="3" />
            <el-option label="已回款" :value="4" />
            <el-option label="已取消" :value="-3" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品总额">
          <el-input-number v-model="editForm.totalPrice" :precision="2" :min="0" size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="定金">
          <el-input-number v-model="editForm.payPrice" :precision="2" :min="0" size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="代收金额">
          <el-input-number v-model="editForm.collectionPrice" :precision="2" :min="0" size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="回款金额">
          <el-input-number v-model="editForm.returnPrice" :precision="2" :min="0" size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="回款时间" v-if="editForm.status == 4" required>
          <el-date-picker v-model="editForm.updateTime" type="datetime" placeholder="请选择回款时间" size="small" style="width:200px;" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="快递公司">
          <el-input v-model="editForm.deliveryName" placeholder="请输入快递公司" clearable size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="快递公司编号">
          <el-input v-model="editForm.deliveryCode" placeholder="请输入快递公司编号" clearable size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="快递单号">
          <el-input v-model="editForm.deliverySn" placeholder="请输入快递单号" clearable size="small" style="width:200px;" />
        </el-form-item>
        <el-form-item label="物流状态">
          <el-select v-model="editForm.deliveryStatus" placeholder="请选择物流状态" clearable size="small" style="width:200px;">
            <el-option label="暂无轨迹" :value="0" />
            <el-option label="已揽收" :value="1" />
            <el-option label="在途" :value="2" />
            <el-option label="已签收" :value="3" />
            <el-option label="问题件" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editForm.remark" type="textarea" :rows="3" placeholder="请输入备注" style="width:350px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitEditConfirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="确认修改" :visible.sync="editConfirmOpen" width="360px" append-to-body>
      <span>确认修改该订单信息吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editConfirmOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listThirdOrder, getThirdOrder, getThirdOrderItems, createThirdOrder, editThirdOrder, deleteThirdOrder, auditThirdOrder, batchAuditThirdOrder, cancelThirdOrder, exportThirdOrder, listThirdProductForOrder, getExpress, syncExpress } from "@/api/store/thirdOrder";
import { userList } from "@/api/store/user";
import { getAddressList } from "@/api/users/userAddress";
import { listStore } from "@/api/store/storeProduct";
import addUserAddress from "@/views/store/components/addUserAddress.vue";

export default {
  name: "ThirdOrder",
  components: { addUserAddress },
  data() {
    return {
      // 当前tab
      activeStatus: "all",
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 选中数组
      selectedRows: [],
      // 弹出层标题
      title: "",
      // 是否显示创建订单弹窗
      open: false,
      // 是否显示订单详情弹窗
      detailOpen: false,
      // 订单详情数据
      detailData: {},
      // 订单明细列表
      orderItems: [],
      // 导出loading
      exportLoading: false,
      // 批量审核loading
      batchAuditLoading: false,
      // 物流信息弹窗
      expressOpen: false,
      expressLoading: false,
      expressData: {},
      expressTraces: [],
      // 订单修改
      editOpen: false,
      editConfirmOpen: false,
      editForm: {},
      // 创建时间范围
      createTime: null,
      // 商品搜索关键字
      productSearchKeyword: null,
      // 店铺下拉
      storeOptions: [],
      // 商品列表
      productList: [],
      // 商品总数
      productTotal: 0,
      // 商品查询参数
      productQuery: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        productName: null,
        status: 1
      },
      // 已选商品列表
      selectedProducts: [],
      // 会员手机号搜索
      phone: null,
      users: [],
      userloading: false,
      address: [],
      addressloading: false,
      userStatusOptions: [],
      userAddress: {
        open: false,
        title: "创建收货地址"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        userId: null,
        userName: null,
        userPhone: null,
        companyUserId: null,
        status: null,
        sTime: null,
        eTime: null
      },
      // 表单参数
      form: {
        userId: null,
        addressId: null,
        collectionPrice: 0,
        payPrice: 0,
        totalPrice: 0,
        remark: null
      },
      // 表单校验
      rules: {
        userId: [{ required: true, message: "请选择会员", trigger: "change" }],
        addressId: [{ required: true, message: "请选择收货地址", trigger: "change" }]
      }
    };
  },
  created() {
    this.getDicts("sys_company_status").then(response => {
      this.userStatusOptions = response.data || [];
    });
    this.getStoreList();
    this.getList();
  },
  methods: {
    /** Tab切换 */
    handleTabClick(tab) {
      if (tab.name === "all") {
        this.queryParams.status = null;
      } else {
        this.queryParams.status = tab.name;
      }
      this.handleQuery();
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      listThirdOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.createTime = null;
      this.queryParams.sTime = null;
      this.queryParams.eTime = null;
      this.queryParams.status = null;
      this.activeStatus = "all";
      this.handleQuery();
    },
    /** 下单日期范围变化 */
    handleCreateTimeChange(val) {
      if (val) {
        this.queryParams.sTime = val[0];
        this.queryParams.eTime = val[1];
      } else {
        this.queryParams.sTime = null;
        this.queryParams.eTime = null;
      }
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    /** 判断是否可审核（用于禁用选择框） */
    checkAuditSelectable(row) {
      return row.status == 1;
    },
    /** 创建订单弹窗 */
    handleAdd() {
      this.reset();
      this.selectedProducts = [];
      this.productSearchKeyword = null;
      this.productList = [];
      this.productTotal = 0;
      this.productQuery.pageNum = 1;
      this.productQuery.storeId = null;
      this.productQuery.productName = null;
      this.productQuery.status = 1;
      this.open = true;
    },
    /** 表单重置 */
    reset() {
      this.phone = null;
      this.users = [];
      this.address = [];
      this.form = {
        userId: null,
        addressId: null,
        collectionPrice: 0,
        payPrice: 0,
        totalPrice: 0,
        remark: null
      };
      this.resetForm("form");
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
      this.selectedProducts = [];
      this.productList = [];
      this.productTotal = 0;
      this.productQuery.storeId = null;
    },
    getStoreList() {
      listStore().then(response => {
        this.storeOptions = (response.rows || []).map(item => ({
          ...item,
          dictValue: item.dictValue != null ? Number(item.dictValue) : item.dictValue
        }));
      });
    },
    handleStoreChange(storeId) {
      this.selectedProducts = [];
      this.calcTotalPrice();
      this.productSearchKeyword = null;
      this.productQuery.pageNum = 1;
      this.productQuery.productName = null;
      if (!storeId) {
        this.productList = [];
        this.productTotal = 0;
        return;
      }
      this.getProductList();
    },
    /** 按手机号查询正常会员 */
    searchUser() {
      if (this.phone == null || this.phone === "") {
        this.msgError("请输入会员手机号");
        return;
      }
      this.userloading = true;
      this.users = [];
      this.address = [];
      this.form.userId = null;
      this.form.addressId = null;
      userList({ phone: this.phone }).then(response => {
        this.users = response.rows || [];
        this.userloading = false;
        if (this.users.length === 1) {
          this.form.userId = this.users[0].userId;
          this.getAddressList(this.form.userId);
        }
      }).catch(() => {
        this.userloading = false;
      });
    },
    handleUserChange(userId) {
      this.form.addressId = null;
      if (userId != null) {
        this.getAddressList(userId);
      } else {
        this.address = [];
      }
    },
    handleAddUserAddress() {
      if (this.form.userId == null) {
        this.msgError("请选择会员");
        return;
      }
      this.userAddress.open = true;
      setTimeout(() => {
        this.$refs.addUserAddress.init(this.form.userId);
      }, 500);
    },
    addUserAddress() {
      this.userAddress.open = false;
      this.getAddressList(this.form.userId);
    },
    getAddressList(userId) {
      this.addressloading = true;
      this.address = [];
      getAddressList({ userId: userId }).then(response => {
        this.address = response.data || [];
        this.addressloading = false;
      }).catch(() => {
        this.addressloading = false;
      });
    },
    /** 查询商品列表 */
    getProductList() {
      if (!this.productQuery.storeId) {
        this.productList = [];
        this.productTotal = 0;
        return;
      }
      this.productQuery.productName = this.productSearchKeyword;
      this.productQuery.status = 1;
      listThirdProductForOrder(this.productQuery).then(response => {
        this.productList = response.rows;
        this.productTotal = response.total;
      });
    },
    /** 搜索商品 */
    searchProduct() {
      if (!this.productQuery.storeId) {
        this.msgError("请先选择店铺");
        return;
      }
      this.productQuery.pageNum = 1;
      this.getProductList();
    },
    /** 选择商品 */
    handleSelectProduct(row) {
      if (!this.productQuery.storeId) {
        this.msgError("请先选择店铺");
        return;
      }
      const exists = this.selectedProducts.find(item => item.productId === row.productId);
      if (exists) {
        this.msgError("该商品已选择");
        return;
      }
      this.selectedProducts.push({
        productId: row.productId,
        productName: row.productName,
        productSpec: row.productSpec,
        productImage: row.productImage,
        storeId: row.storeId,
        price: row.price || 0,
        num: 1
      });
      this.calcTotalPrice();
    },
    /** 移除已选商品 */
    handleRemoveProduct(index) {
      this.selectedProducts.splice(index, 1);
      this.calcTotalPrice();
    },
    /** 计算商品总额，并同步代收金额 = 总额 - 定金 */
    calcTotalPrice() {
      let total = 0;
      this.selectedProducts.forEach(item => {
        total += (item.price || 0) * (item.num || 0);
      });
      this.form.totalPrice = Number(total.toFixed(2));
      this.syncCollectionPrice();
    },
    handlePayPriceChange() {
      this.syncCollectionPrice();
    },
    syncCollectionPrice() {
      const total = Number(this.form.totalPrice) || 0;
      const pay = Number(this.form.payPrice) || 0;
      this.form.collectionPrice = Number(Math.max(0, total - pay).toFixed(2));
    },
    /** 提交创建订单 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.selectedProducts.length === 0) {
            this.msgError("请至少选择一个商品");
            return;
          }
          const submitData = {
            userId: this.form.userId,
            addressId: this.form.addressId,
            collectionPrice: parseFloat(this.form.collectionPrice) || 0,
            freightPrice: 0,
            payMoney: parseFloat(this.form.payPrice) || 0,
            totalPrice: parseFloat(this.form.totalPrice) || 0,
            remark: this.form.remark,
            products: this.selectedProducts.map(item => ({
              productId: item.productId,
              productName: item.productName,
              productSpec: item.productSpec,
              price: item.price,
              num: item.num
            }))
          };
          createThirdOrder(submitData).then(response => {
            if (response.code === 200) {
              this.msgSuccess("创建成功");
              this.open = false;
              this.reset();
              this.selectedProducts = [];
              this.getList();
            }
          });
        }
      });
    },
    /** 查看订单详情 */
    handleView(row) {
      getThirdOrder(row.orderId).then(response => {
        this.detailData = response.data;
        this.detailOpen = true;
        getThirdOrderItems(row.orderId).then(res => {
          this.orderItems = res.data || [];
        });
      });
    },
    /** 审核订单 */
    handleAudit(row) {
      this.$confirm("确认审核该订单？审核后订单将变为审核通过状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        auditThirdOrder(row.orderId).then(response => {
          if (response.code === 200) {
            this.msgSuccess("审核成功");
            this.getList();
          }
        });
      }).catch(() => {});
    },
    /** 批量审核 */
    handleBatchAudit() {
      if (this.selectedRows.length === 0) {
        this.msgError("请至少选择一条未审核订单");
        return;
      }
      const orderIds = this.selectedRows.map(r => r.orderId);
      this.$confirm("确认批量审核选中的 " + orderIds.length + " 条订单？审核后将变为审核通过状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.batchAuditLoading = true;
        return batchAuditThirdOrder(orderIds);
      }).then(response => {
        this.batchAuditLoading = false;
        if (response.code === 200) {
          this.msgSuccess(response.msg || "批量审核成功");
          this.getList();
        }
      }).catch(() => {
        this.batchAuditLoading = false;
      });
    },
    /** 取消订单 */
    handleCancel(row) {
      this.$confirm("确认取消该订单？取消后订单将变为已取消状态", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        cancelThirdOrder(row.orderId).then(response => {
          if (response.code === 200) {
            this.msgSuccess("取消订单成功");
            this.getList();
          }
        });
      }).catch(() => {});
    },
    /** 订单修改 */
    handleEdit(row) {
      getThirdOrder(row.orderId).then(response => {
        const d = response.data || {};
        this.editForm = {
          orderId: d.orderId,
          status: d.status,
          totalPrice: d.totalPrice != null ? Number(d.totalPrice) : null,
          payPrice: d.payPrice != null ? Number(d.payPrice) : null,
          collectionPrice: d.collectionPrice != null ? Number(d.collectionPrice) : null,
          returnPrice: d.returnPrice != null ? Number(d.returnPrice) : null,
          updateTime: d.updateTime || null,
          deliveryName: d.deliveryName || null,
          deliveryCode: d.deliveryCode || null,
          deliverySn: d.deliverySn || null,
          deliveryStatus: d.deliveryStatus != null ? Number(d.deliveryStatus) : null,
          remark: d.remark || null
        };
        this.editOpen = true;
      });
    },
    submitEditConfirm() {
      if (this.editForm.status == 4 && !this.editForm.updateTime) {
        this.msgError("选择已回款时，回款时间不能为空");
        return;
      }
      this.editConfirmOpen = true;
    },
    submitEdit() {
      const payload = {
        ...this.editForm,
        params: Object.assign({}, this.editForm.params || {}, { allowNull: true })
      };
      ["deliveryName", "deliveryCode", "deliverySn", "remark"].forEach(key => {
        if (payload[key] === "" || payload[key] === undefined) {
          payload[key] = null;
        }
      });
      if (payload.deliveryStatus === "" || payload.deliveryStatus === undefined) {
        payload.deliveryStatus = null;
      }
      editThirdOrder(payload).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.editConfirmOpen = false;
          this.editOpen = false;
          this.getList();
        } else {
          this.msgError(response.msg || "修改失败");
        }
      }).catch(() => {
        this.editConfirmOpen = false;
      });
    },
    /** 删除订单 */
    handleDelete(row) {
      const orderId = row.orderId;
      this.$confirm("是否确认删除该订单？删除后不可恢复", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return deleteThirdOrder(orderId);
      }).then(response => {
        if (response.code === 200) {
          this.msgSuccess("删除成功");
          this.getList();
        }
      }).catch(() => {});
    },
    /** 导出 */
    handleExport() {
      this.$confirm("是否确认导出第三方订单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        const params = { ...this.queryParams };
        delete params.pageNum;
        delete params.pageSize;
        return exportThirdOrder(params);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
        this.exportLoading = false;
      });
    },
    /** 查看物流信息（快递鸟） */
    handleExpress(row) {
      this.expressData = {
        orderId: row.orderId,
        deliveryName: row.deliveryName,
        deliveryCode: row.deliveryCode,
        deliverySn: row.deliverySn
      };
      this.expressTraces = [];
      this.expressOpen = true;
      this.expressLoading = true;
      getExpress(row.orderId).then(res => {
        this.expressLoading = false;
        this.expressTraces = (res.data && res.data.Traces) ? res.data.Traces : [];
      }).catch(() => {
        this.expressLoading = false;
        this.expressTraces = [];
      });
    },
    /** 同步快递鸟物流状态到订单 */
    handleSyncExpress() {
      if (!this.expressData.orderId) {
        this.msgError("请选择订单");
        return;
      }
      this.$confirm("确定同步物流状态吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return syncExpress(this.expressData.orderId);
      }).then(() => {
        this.msgSuccess("操作成功");
        this.expressOpen = false;
        this.getList();
      }).catch(() => {});
    }
  }
};
</script>