eduerpos_ui_manage/src/components/page/admin/order/OrderManage.vue

<template>
  <div class="table" style="color: #666">
    <div class="crumbs">
     	<el-breadcrumb separator="/">
        	<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 订单处理</el-breadcrumb-item>
      	</el-breadcrumb>
    </div>
		<div class="container" style="margin-top:10px">
      <div class="handle-box-top">
        <div class="condition-box">
          <span>订单状态</span>
          <el-radio-group v-model="tabIndex" @change="getDataList">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="0">待支付</el-radio-button>
            <el-radio-button label="10">待接单</el-radio-button>
            <el-radio-button label="20">
              已接单
              <div class="high-light-number" v-if="receivedNum != 0 && receivedNum != null">{{receivedNum}}</div>
            </el-radio-button>
            <el-radio-button label="30">待配送</el-radio-button>
            <el-radio-button label="40">配送中</el-radio-button>
            <el-radio-button label="60">已完成</el-radio-button>
            <el-radio-button label="-20">
              已完成 (退款)
              <div class="high-light-number" v-if="refundNum != 0 && refundNum != null">{{refundNum}}</div>
            </el-radio-button>
            <el-radio-button label="50">待自取</el-radio-button>
            <!-- <el-radio-button label="9">退款申请</el-radio-button> -->
          </el-radio-group>
        </div>
        <div class="handle-box-top">
          <div class="condition-box">
            <span >所属门店</span>
            <el-select  v-model="storeId" style="widht:200px;" clearable filterable >
              <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId"></el-option>
            </el-select>
          </div>
          <div class="condition-box">
            <span>下单时间</span>
            <el-date-picker style="max-width: 200px;" v-model="createDateS"></el-date-picker>
          </div>
          <div class="condition-box">
            <span>-</span>
            <el-date-picker style="max-width: 200px;" v-model="createDateE"></el-date-picker>
          </div>
          <div class="condition-box">
            <span>顾客姓名</span>
            <el-input v-model="orderName" class="handle-input mr10" style="width: 200px;"  placeholder="根据顾客姓名查询"/>
          </div>
          <div class="condition-box">
            <span>手机号</span>
            <el-input v-model="orderTel" class="handle-input mr10" style="width: 200px;"  placeholder="根据顾客手机号查询"/>
          </div>
        </div>
        <div class="handle-box-top">
          <div class="handle-box">
            <el-button type="primary" @click="getDataList">
              查询
            </el-button>
          </div>
        </div>
      </div>

      <div class="order-table" style="margin-top: 20px;">
        <table style="margin-top: 15px;width:100%;border-collapse: collapse;">
          <tbody v-for="(order, index) in tableData" :key="order.orderId">
            <tr class="sep"></tr>
            <tr class="trhead">
              <td colspan="4" class="td1">
                <span style="font-size: 24px; font-weight: bolder; color: rgb(25, 137, 250);margin-left: 13px;">{{ order.takeupCode }}</span>
                <span style="padding-left: 20px; font-size: 14px; font-weight: bold;">{{typeFormatter(order.orderType)}}</span>
                <span style="float:right;margin-top: 5px;margin-right: 12px;">{{order.statusName}}({{order.sourceTypeStr}})</span>
              </td>
            </tr>
            <tr class="tr-border">
              <td class="first-td">
               <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE1IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTcuNSA4YTMuNSAzLjUgMCAxIDAgMC03IDMuNSAzLjUgMCAwIDAgMCA3em0wIDFhNC41IDQuNSAwIDEgMSAwLTkgNC41IDQuNSAwIDAgMSAwIDl6bTYuMzYgNmMuNjg1LTMuMTIyLTEuMjEtNC41NDUtNi4zNTMtNC41NDVTLjQ2MiAxMS44NzkgMS4xMzYgMTVIMTMuODZ6TTcuNTA3IDkuNDU1YzYuMTEgMCA4LjQ4NCAyLjE4MSA3LjEyIDYuNTQ1SC4zNjdjLTEuMzUtNC4zNjQgMS4wMy02LjU0NSA3LjE0LTYuNTQ1eiIvPgo8L3N2Zz4K">
              </td>
              <td colspan="3" style="min-height: 60px; height: 60px;">
                <span style="display: block; text-align: left;">
                  {{ order.orderName }}&nbsp;&nbsp;{{ order.orderTel }}
                  <b style="float:right">{{order.storeName}}</b>
                </span>
                <p style="text-align: left;">{{ order.orderAddress }}</p>
              </td>
            </tr>
            <tr class="tr-border">
              <td style="text-align:right;">
                备注:
              </td>
              <td colspan="3" style="min-height: 60px; height: 60px;">
                <span style="display: block; text-align: left;">
                  {{ order.customerMes }}
                </span>
              </td>
            </tr>
            <tr class="tr-border" >
              <td class="first-td">
                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDIwIDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE0LjgyNiA5LjY5NGwtMi4zNTYgMS4yNDhhLjUuNSAwIDAgMS0uMjM0LjA1OEg3LjVhLjUuNSAwIDAgMS0uNS0uNXYtM2EuNS41IDAgMCAwLS41LS41aC01YS41LjUgMCAwIDAtLjUuNVYxMmEzIDMgMCAwIDAgNS42IDEuNWwuMjg4LS41aDYuMjI0bC4yODkuNWEzIDMgMCAxIDAgMy45OC00LjE2M2wtLjM4Mi0uMi0xLjY1LTUuNzc0QS41LjUgMCAwIDAgMTQuODcgM2gtLjg4NGEuNS41IDAgMCAwLS40OC42MzhsMS41NjggNS40NzZhLjUuNSAwIDAgMS0uMjQ3LjU4ek0yMCAxMmE0IDQgMCAwIDEtNy40NjUgMmgtNS4wN0E0IDQgMCAwIDEgMCAxMlY3YTEgMSAwIDAgMSAxLTFoNmExIDEgMCAwIDEgMSAxdjNoNC4xMTFMMTQgOWwtMS43MTgtNmgtMS42OTZhLjUuNSAwIDAgMS0uMDAyLTFIMTZsMS44NDIgNi40NDlBNCA0IDAgMCAxIDIwIDEyek0xIDBoNWExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMCAxLTEgMUgxYTEgMSAwIDAgMS0xLTFWMWExIDEgMCAwIDEgMS0xem0uNSA0aDRhLjUuNSAwIDAgMCAuNS0uNXYtMmEuNS41IDAgMCAwLS41LS41aC00YS41LjUgMCAwIDAtLjUuNXYyYS41LjUgMCAwIDAgLjUuNXoiLz4KPC9zdmc+Cg==">
              </td>
              <td colspan="3" style="text-align: left;">
                <p><span>{{deliveryTypeFormatter( order.orderType )}}</span></p>
              </td>
            </tr>
            <tr class="tr-border">
              <td class="first-td">
                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEuNSA2aDRhLjUuNSAwIDAgMCAuNS0uNXYtNGEuNS41IDAgMCAwLS41LS41aC00YS41LjUgMCAwIDAtLjUuNXY0YS41LjUgMCAwIDAgLjUuNXpNMSAwaDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFIMWExIDEgMCAwIDEtMS0xVjFhMSAxIDAgMCAxIDEtMXptOS41IDZoNGEuNS41IDAgMCAwIC41LS41di00YS41LjUgMCAwIDAtLjUtLjVoLTRhLjUuNSAwIDAgMC0uNS41djRhLjUuNSAwIDAgMCAuNS41ek0xMCAwaDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFoLTVhMSAxIDAgMCAxLTEtMVYxYTEgMSAwIDAgMSAxLTF6TTEuNSAxNWg0YS41LjUgMCAwIDAgLjUtLjV2LTRhLjUuNSAwIDAgMC0uNS0uNWgtNGEuNS41IDAgMCAwLS41LjV2NGEuNS41IDAgMCAwIC41LjV6TTEgOWg1YTEgMSAwIDAgMSAxIDF2NWExIDEgMCAwIDEtMSAxSDFhMSAxIDAgMCAxLTEtMXYtNWExIDEgMCAwIDEgMS0xem0xMCA2aDNhMSAxIDAgMCAwIDEtMXYtM2ExIDEgMCAwIDAtMS0xaC0zYTEgMSAwIDAgMC0xIDF2M2ExIDEgMCAwIDAgMSAxem0tMS02aDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFoLTVhMSAxIDAgMCAxLTEtMXYtNWExIDEgMCAwIDEgMS0xeiIvPgo8L3N2Zz4K">
              </td>
              <td colspan="3" style="text-align: left;">
                <span style="display: block; font: 15px bolder; color: rgb(45, 47, 51);">
                  {{order.buyCount}}&nbsp;件商品 <b class="state_b_3168206771703696" style="color: rgb(25, 137, 250);float:right;margin-right: 12px;" @click="expand(index)">{{ !order.buttonText ? '展开' : order.buttonText }}</b>
                </span>
              </td>
            </tr>
              <tr v-show="order.isExpand" v-for="item in order.detailList" :key="item.orderDetailId" class="product_table_3168206771703696 tr-border" style="display: table-row;">
                <td></td>
                <td style="text-align: left;padding: 10px 0;">
                  {{item.goodsName}}<span>{{item.propertys == '' ? '' : '(' + item.propertys + ')'}}</span>
                </td>
                <td style="text-align: right;">× {{item.buyCount}}</td>
                <td style="text-align: right;padding-right: 12px;padding-left: 5px;">{{moneyConverter(item.salesPrice)}}</td>
              </tr>
            <tr v-if="order.isExpand" class="product_table_3168206771703696 tr-border" style="display: table-row;">
              <td></td>
              <td class="first-td" colspan="3" style="text-align: left;">
                <span style="font-size: 12px; color: rgb(135, 141, 153);">其他</span>
                <p>餐盒费
                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.packingFee )}}</span>
                </p>
                <p>配送费
                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
                </p>
                <p v-if="order.deliveryDiscountsFlag == 1" >免配送费
                  <span style="float: right; margin-right: 15px;">{{-moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
                </p>
                <p>新客立减
                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.newcusDiscounts) }}</span>
                </p>
                <p>满减
                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.fullDiscounts) }}</span>
                </p>
                <p>优惠券
                  <span style="float: right; margin-right: 15px;">{{order.couponName == '' || order.couponName == null ? '' : '（' + order.couponName + '）'}}{{moneyConverter(order.couponCost) }}</span>
                </p>
              </td>
            </tr>
            <tr class="tr-border">
              <td class="first-td">
                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE1IDE2Ij4KICAgIDxnIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMSAwaDEzYTEgMSAwIDAgMSAxIDF2MTRhMSAxIDAgMCAxLTEgMUgxYTEgMSAwIDAgMS0xLTFWMWExIDEgMCAwIDEgMS0xem0wIDEuNXYxM2EuNS41IDAgMCAwIC41LjVoMTJhLjUuNSAwIDAgMCAuNS0uNXYtMTNhLjUuNSAwIDAgMC0uNS0uNWgtMTJhLjUuNSAwIDAgMC0uNS41eiIvPgogICAgICAgIDxwYXRoIGQ9Ik02Ljg0NCA3SDVhLjUuNSAwIDAgMCAwIDFoMnYxSDVhLjUuNSAwIDAgMCAwIDFoMnYyLjVhLjUuNSAwIDEgMCAxIDBWMTBoMmEuNS41IDAgMSAwIDAtMUg4VjhoMmEuNS41IDAgMSAwIDAtMUg4LjE1MmwyLjQzLTIuODc3YS41LjUgMCAxIDAtLjc2NC0uNjQ2bC0yLjMyIDIuNzQ4LTIuMzItMi43NDhhLjUuNSAwIDEgMC0uNzY0LjY0Nkw2Ljg0NCA3eiIvPgogICAgPC9nPgo8L3N2Zz4K">
              </td>
              <td style="text-align: left; font: 15px bolder; color: rgb(45, 47, 51);">顾客实付</td>
              <td colspan="2" style="text-align: right;"><b style="color: rgb(90, 94, 102);padding-right: 12px;">¥{{moneyConverter(order.orderFee)}}</b></td>
            </tr>
            <tr class="tr-border">
              <td></td>
              <td style="text-align: left; font: 15px bolder; color: rgb(45, 47, 51);padding: 10px 0;">
                商家预计收入
                <el-tooltip class="item" effect="dark" placement="top-end">
                  <div slot="content" class="shouru_div sr_tc_3168206771703696">
                    <p>订单总额<span>¥{{moneyConverter(order.orderFee)}}</span></p>
                    <p>配送费<span>¥-{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span></p>
                    <p v-if="order.deliveryDiscountsFlag == 1" >免配送费
                      <span>¥-{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
                    </p>
                    <p>微信扣点<span>¥-{{moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee ))}}</span></p>
                    <p>平台扣点<span>¥-{{moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee)))}}</span></p>
                    <p style="border-bottom: none;">商家预计收入<span>¥{{toFixed2(moneyConverter( order.orderFee) - moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) - moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee)) - moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee))))}}</span></p> <i class="layui-edge"></i>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </td>
              <td colspan="2" style="text-align: right;">
                <b style="color: rgb(250, 85, 85);padding-right: 12px;">¥{{toFixed2(moneyConverter( order.orderFee) - moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) - moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee)) - moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee))))}}</b>
              </td>
            </tr>
            <tr class="tr-border">
              <td></td>
              <td colspan="2" style="text-align: left;padding: 10px 0;">
                <p>下单时间:{{order.createDateStr}}</p>
                <p>订单号:{{order.orderCode}}</p>
              </td>
            </tr>
            <tr class="tr-border" v-if="order.reason != null && order.reason.length > 0">
              <td style="text-align:right;">
                退款原因:
              </td>
              <td colspan="3" style="min-height: 60px; height: 60px;">
                <span style="display: block; text-align: left;">
                  {{ order.reason }}
                </span>
              </td>
            </tr>
            <tr class="tr-border">
              <td></td>
              <td colspan="2" style="text-align: right;padding: 10px 0;width: 100%;">
                <el-button v-if="order.status == 10" @click="printOrder(order.orderId)">
                  打印订单
                </el-button>
                <el-button style="margin-right: 20px;" @click="orderPayedInfo(order.orderCode)">
                  查询支付状态
                </el-button>
                <el-button v-if="order.status == 10" style="margin-right: 20px;" v-action="'edit'" @click="refuseOrder(order.orderId)">
                  拒绝
                </el-button>
                <el-button v-action="'edit'" v-if="order.status != 50 && order.status > 0 && order.status != 0 && order.status != 10" style="margin-right: 20px;" @click="allRefund(order.orderId)">
                  全部退单
                </el-button>
                <el-button v-action="'edit'" v-if="order.status == 50" style="margin-right: 20px;" @click="completeOrder(order.orderId)">
                  客户已取货
                </el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination
        style="margin-top: 10px;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
		</div>
    <el-dialog title="全部退款" :visible.sync="dialogVisible" :before-close="closeDialog" width="500px">
      <div style="line-height: 72px;">
        <span>退款原因</span>
        <el-input type="textarea" rows="3" placeholder="请输入退款原因" v-model="refundReason" style="margin-left: 15px;width: 350px;"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="doRefund">保存</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="支付明细" :visible.sync="payedDialogVisible" :before-close="closePayedDialog" width="80%">
      <div style="padding-bottom: 30px">
        <div>
            <div>
                  <div>
                      <div class="crumbs">
                          <el-breadcrumb separator="/">
                              <el-breadcrumb-item style="font-size: 16px;"><i class="el-icon-lx-calendar"></i>支付信息</el-breadcrumb-item>
                          </el-breadcrumb>
                      </div>
                      <el-form ref="form" :model="payedInfo" label-width="120px">
                          <el-row>
                              <el-col :span="8">
                                  <el-form-item label="通信标识：">
                                  <span>{{payedInfo.return_code}}</span>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="业务结果： ">
                                      <span>{{payedInfo.result_code}}</span>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="错误描述： ">
                                      <span>{{payedInfo.err_code_des}}</span>
                                  </el-form-item>
                              </el-col>
                          </el-row>
                          <el-row>
                              <el-col :span="8">
                                  <el-form-item label="交易状态：">
                                      <span>{{payedInfo.trade_state}}</span>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="状态描述： ">
                                      <span>{{payedInfo.trade_state_desc}}</span>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="付款银行：">
                                          <span>{{payedInfo.bank_type}}</span>
                                  </el-form-item>
                              </el-col>
                          </el-row>
                          <el-row>
                              <el-col :span="8">
                                  <el-form-item label="付款金额(分)： ">
                                      <span>{{payedInfo.total_fee}}</span>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="交易时间：">
                                      <span>{{payedInfo.time_end}}</span>
                                  </el-form-item>
                              </el-col>
                          </el-row>
                      </el-form>
                  </div>
            </div>
        </div>
        <el-button style="margin-top: 20px;" v-if="payedInfo.trade_state == 'REFUND' && refundFlg" type="primary" @click="orderRefundInfo(cOrderCode)">查询退款信息</el-button>
        <div v-if="refundShow" style="margin-top:20px">
            <div>
                <div>
                    <div class="crumbs">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item style="font-size: 16px;"><i class="el-icon-lx-calendar"></i>退款信息</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <el-form ref="form" :model="refundInfo" label-width="120px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="订单金额(分)：">
                                  <span>{{refundInfo.total_fee}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="总退货额(分)： ">
                                    <span>{{refundInfo.refund_fee}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <dptable :columns="columns3" :dataSource="refundList" :options="options3"/>
                </div>
            </div>
        </div>
      </div>
    </el-dialog>
	</div>
</template>
<script>
import dptable from '@/components/common/Dptable.vue'
export default {
  components: {
    dptable
  },
	data(){
		return {
      tabIndex: "all",
      storeList: [],
      url: '/orderManage/orderPage',
      numUrl: '/orderManage/getReceivedAndRefundOrderNum',
      detailUrl: '/orderManage/getOrderDetails',
      refundUrl: '/refund/orderRefund',
      printUrl: '/orderManage/printOrder',
      refuseUrl: '/orderManage/refuseOrder',
      completeUrl: '/orderManage/completeOrder',
      storeUrl: '/storeManage/getStoreList',
      payedInfoUrl: '/orderManage/getOrderPayedInfo',
      refundInfoUrl: '/orderManage/getOrderRefundInfo',
      storeId: '',
      dateArray: [],
      orderName: '',
      orderTel: '',
      dialogVisible: false,
      receivedNum: 0,
      refundNum: 0,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      createDateS: null,
      createDateE: null,
      refundOrderId: null,
      refundReason: null,
      payedDialogVisible: false,
      payedInfo: {
        return_code: '',
        result_code: '',
        err_code_des: '',
        trade_state: '',
        trade_state_desc: '',
        bank_type: '',
        total_fee: '',
        time_end: ''
      },
      cOrderCode: '',
      refundFlg: true,
      refundShow: false,
      refundInfo: {
        total_fee: '',
        refund_fee: ''
      },
      refundList: [],
      columns3: [
          {
              prop: 'refund_fee', label: '申请退款金额(分)', width: 200
          },
          {
              prop: 'refund_status', label: '退款状态', width: 200
          },
          {
              prop: 'refund_channel', label: '退款渠道', width: 250
          },
          {
              prop: 'refund_recv_accout', label: '退款入账账户', width: 250
          },
          {
              prop: 'refund_success_time', label: '退款成功时间',
          }
      ],
      options3: {
          index: false, // 显示序号， 多选则 mutiSelect
          initTable: false, // 是否一挂载就加载数据
          border:true
      },
		};
	},
  created() {
      const date = new Date();
      this.createDateS = this.$moment(date).format("YYYY-MM-DD");
      this.createDateE = this.$moment(date).format("YYYY-MM-DD");
      this.getStoreList();
      this.getDataList();
  },
	methods: {
		closeDialog() {
      this.dialogVisible = false
      this.refundReason = null;
    },
    expand(index) {
      let order = this.tableData[index]
      if (!order.isExpand) {
        if (!!order.detailList && order.detailList.length > 0) {
          this.$set(order, 'buttonText', '收起')
          this.$set(order, 'isExpand', true)
        } else {
          // 获取详情数据
          const querystring = require('querystring');
          this.$axios.post(this.detailUrl, querystring.stringify({orderId: order.orderId})).then(res => {
            if (res.data.rtnBean.rtnCode == 0) {
              this.$set(order, 'detailList', res.data.list);
              this.$set(order, 'buttonText', '收起')
              this.$set(order, 'isExpand', true)
            }
          }).catch((error) => {
            console.log(error);
          })
        }
      } else if (order.isExpand) {
        this.$set(order, 'buttonText', '展开')
        this.$set(order, 'isExpand', false)
      }
    },
    allRefund(id) {
      this.refundOrderId = id;
      this.dialogVisible = true;
    },
    doRefund() {
      const querystring = require("querystring");
      this.$confirm('确认退单并退款给用户?', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.refundUrl, querystring.stringify({
          orderId: this.refundOrderId, reason: this.refundReason
        })).then(res => {
          this.$message({
            type: 'success',
            message: '退款成功!'
          });
          this.dialogVisible = false;
          this.getDataList();
        }).catch(error => {
        });
      });
    },
    toFixed2(money) {
			return Math.round(money * 100) / 100
		},
    getDataList() {
      var dateS;
      var dateE;
      if (this.createDateS != "" && this.createDateS != null) {
        dateS = this.$moment(this.createDateS).format("YYYY/MM/DD");
      }
      if (this.createDateE != "" && this.createDateE != null) {
        dateE = this.$moment(this.createDateE).format("YYYY/MM/DD");
      }
      // 开始时间不能大于结束时间
      if(dateS !='' && dateS != null && dateE != '' && dateE != null){
        if(dateS > dateE){
          this.$message.error("开始时间不能大于结束时间，请更换查询条件重新再试");
          return;
        }
      }
      const querystring = require("querystring");
      let obj = {
        storeId: this.storeId,
        beginDate: dateS,
        endDate: dateE,
        orderName: this.orderName,
        orderTel: this.orderTel,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }
      if (this.tabIndex != "all") {
        obj.status = this.tabIndex
      }
      this.$axios.post(this.url, querystring.stringify(obj)).then(res => {
        if (res.data.list.length == 0) {
          this.$message("数据不存在，请更换查询条件重新再试");
        }
        this.tableData = res.data.list;
        this.receivedNum = res.data.obj.receivedNum;
        this.refundNum = res.data.obj.refundNum;
        this.total = res.data.page.resultCount;
        this.currentPage = res.data.page.currentPage;
      }).catch(error => {
      });
    },
    getStoreList() {
      this.$axios.post(this.storeUrl, {}).then(res => {
        this.storeList = res.data.list;
      }).catch(error => {
      });

    },
    typeFormatter(type) {
      let str = (type == 1 || type == 2) ? '配送订单' : '自提订单'
      return str;
    },
    statusFormatter(status) {
      if (status == 0 || status == -1 || status == 5 || status == 10 || status == -10 || status == -30 || status == -40) {
        return "未生效订单"
      } else if (status == 20 || status == 30 || status == 40 || status == 50 || status == 60) {
        return "已生效订单"
      } else if (status == -20 || status == -50) {
        return "退款订单"
      }
    },
    deliveryTypeFormatter(type) {
      if (type == 1) {
        return '楼下自提'
      } else if (type == 2) {
        return '直达宿舍'
      } else if (type == 3) {
        return '自提外带'
      } else if (type == 4) {
        return '自提堂食'
      }
    },
    dateChange() {
      if (null != this.dateArray && this.dateArray.length > 0) {
        this.createDateS = this.dateArray[0];
        this.createDateE = this.dateArray[1];
      } else {
        this.createDateS = null;
        this.createDateE = null;
      }
    },
    printOrder(orderId) {
      const querystring = require("querystring");
      this.$axios.post(this.printUrl, querystring.stringify({
        orderId: orderId
      })).then(res => {
        this.$message({
          type: 'success',
          message: '已成功发起打印!'
        });
        this.getDataList();
      }).catch(error => {
      });
    },
    refuseOrder(orderId) {
      const querystring = require("querystring");
      this.$confirm('确认拒绝接单并退款给用户?', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.refuseUrl, querystring.stringify({
          orderId: orderId
        })).then(res => {
          this.$message({
            type: 'success',
            message: '拒绝成功!'
          });
          this.getDataList();
        }).catch(error => {
        });
      });
    },
    completeOrder(orderId) {
      const querystring = require("querystring");
      this.$confirm('确认客户已取货?', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.completeUrl, querystring.stringify({
          orderId: orderId
        })).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getDataList();
        }).catch(error => {
        });
      });
    },
    handleSizeChange(size) { // 切换每页显示的数量
			this.pageSize = size;
			this.getDataList();
		},
		handleCurrentChange(current) { // 切换页码
			this.currentPage = current;
			this.getDataList();
		},
    calcPoints(rate, orderFee) {
      return (Number(orderFee) * Number(rate));
    },
    orderPayedInfo(orderCode) {
      const querystring = require("querystring");
      this.$axios.post(this.payedInfoUrl, querystring.stringify({
        orderCode: orderCode
      })).then(res => {
        this.cOrderCode = orderCode;
        this.payedDialogVisible = true;
        if (res.data.rtnBean.rtnCode == 0) {
          this.payedInfo = res.data.obj
        }
      }).catch(error => {
      });
    },
    closePayedDialog() {
      this.payedDialogVisible = false;
      this.refundFlg = true;
      this.refundShow = false;
    },
    orderRefundInfo(orderCode) {
      this.refundFlg = false;
      this.refundShow = true;
      const querystring = require("querystring");
      this.$axios.post(this.refundInfoUrl, querystring.stringify({
        orderCode: orderCode
      })).then(res => {
        if (res.data.rtnBean.rtnCode == 0) {
          this.refundInfo = res.data.obj;
          this.refundList = res.data.obj.refundList;
        }
      }).catch(error => {
      });
    }
  }
};
</script>

<style scoped>

  .order-table {
    min-height: 400px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 13px;
  }
  .order-info {
    margin-top: 15px;
  }
  .trhead {
    background: #f2f2f2;
    width: 100%;
    height: 36px;
  }
  .tr-border {
    border-bottom: 1px solid #E6E6E6;
  }
  .first-td {
    width: 50px;
    padding: 10px 17px;
  }
  table {
    font-size: 13px;
  }

</style>