zfire-newmall-admin/src/views/mallManagement/order/order_detail/index.vue

<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="订单详情"></el-page-header>
    <div class="order-main">
      <el-row style="padding: 15px 15px 10px">
        <el-col :span="24">
          <div class="order-main-title">
            <span>订单编号：{{ orderDetail.orderId }}</span>
            <span>下单时间：{{ orderDetail.createTime }}</span>
            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
            <!-- <span>网点：{{ orderDetail.websitName || '无' }}</span> -->
            <el-tag v-if="orderDetail.isOld == 'YES'">以旧换新</el-tag>
            <div class="fr">
              <el-link type="primary" :underline="false" @click="showDialog('remark')">订单备注</el-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100%; padding: 10px 15px 15px 15px">
        <el-row>
          <el-col :span="10">
            <div style="display: flex">
              <div>
                <div class="order-main-status">
                  <span>{{ orderDetail.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
                </div>
                <div class="order-main-opt-btn">
                  <template v-if="orderDetail.orderStatus === 'NOPAY'">
                    <el-popconfirm title="确定收款吗？" @confirm="confirmOrder">
                      <el-button slot="reference" size="small">确认收款</el-button>
                    </el-popconfirm>
                    <el-button size="small" @click="showDialog('price')" style="margin-left: 10px">修改价格</el-button>
                    <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder" style="margin-left: 10px">
                      <el-button slot="reference" size="small" type="danger">取消订单</el-button>
                    </el-popconfirm>
                  </template>
                  <template v-if="['SPTG', 'DFH'].includes(orderDetail.orderStatus)">
                    <el-popconfirm
                      v-if="['PART_PAID', 'NO_PAID'].includes(orderDetail.payStatus)"
                      title="是否确定操作发货？"
                      @confirm="
                        () => {
                          showDialog('send')
                        }
                      "
                      style="margin-left: 10px"
                    >
                      <el-button slot="reference" size="small" type="primary">发货</el-button>
                    </el-popconfirm>
                    <el-button v-else size="small" type="primary" @click="showDialog('send')">发货</el-button>
                  </template>
                  <template v-if="['DFH'].includes(orderDetail.orderStatus)">
                    <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder" style="margin-left: 10px">
                      <el-button slot="reference" size="small" type="danger">取消订单</el-button>
                    </el-popconfirm>
                  </template>
                  <template v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
                    <el-button size="small" @click="showDialog('query')">查看物流</el-button>
                  </template>
                </div>
              </div>
              <el-table
                class="specTable"
                style="margin-left: 30px"
                height="120px"
                :data="printList"
                element-loading-text="Loading"
                border
                highlight-current-row
                stripe
              >
                <el-table-column
                  align="center"
                  label="打印人"
                  prop="createBy"
                  min-width="120"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column align="center" label="打印时间" prop="createTime" width="160"></el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="14" style="padding-top: 10px">
            <el-steps :active="orderDetail.orderStatus != 'CLOSE' ? curOrderStatus : -1" align-center>
              <el-step title="买家下单" :description="orderDetail.createTime"></el-step>
              <el-step title="审核通过" :description="orderDetail.payTime ? orderDetail.payTime : ''"></el-step>
              <el-step title="商家发货" :description="orderDetail.deliverTime ? orderDetail.deliverTime : ''"></el-step>
              <el-step title="交易成功" :description="orderDetail.overTime ? orderDetail.overTime : ''"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="order-receive-info">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="main-detail">
            <h3>订单信息</h3>
            <div class="item">
              <div class="label">收货人信息：</div>
              <div class="value">{{ orderDetail.receUserName }} ({{ orderDetail.recePhone }})</div>
            </div>
            <div class="item">
              <div class="label">收货人地址：</div>
              <div class="value">
                {{
                  orderDetail.province +
                  orderDetail.city +
                  orderDetail.area +
                  orderDetail.street +
                  orderDetail.receAddress +
                  (orderDetail.houseNo || '')
                }}
              </div>
            </div>
            <div class="item">
              <div class="label">销售员信息：</div>
              <div class="value">{{ orderDetail.workerName }} ({{ orderDetail.workerPhone }})</div>
            </div>
            <div class="item">
              <div class="label">业务员信息：</div>
              <div class="value">{{ orderDetail.saleName }} ({{ orderDetail.saleMobile }})</div>
            </div>
            <div class="item">
              <div class="label">下单渠道：</div>
              <div class="value">{{ orderDetail.source }}</div>
            </div>
            <div class="item">
              <div class="label">支付方式：</div>
              <div class="value">
                {{ orderDetail.payType }}--{{
                  { NO_PAID: '待收款', PART_PAID: '部分收款', PAID: '完成收款' }[orderDetail.payStatus]
                }}
              </div>
            </div>
            <div class="item">
              <div class="label">是否开票：</div>
              <div class="value">{{ orderDetail.tax ? '是' : '否' }}</div>
            </div>
            <div class="item" v-if="orderDetail.dispatchType">
              <div class="label">工单派单方式：</div>
              <div class="value">{{ orderDetail.dispatchType }}</div>
            </div>
          </div>
        </el-col>
        <el-col
          :xs="24"
          :sm="12"
          :lg="12"
          v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'"
        >
          <div class="main-detail">
            <h3>物流信息</h3>
            <div class="item">
              <div class="label">快递单号：</div>
              <div class="value">{{ orderDetail.logisticsNo }}</div>
            </div>
            <div class="item">
              <div class="label">快递公司：</div>
              <div class="value">{{ orderDetail.companyName }}</div>
            </div>
            <div class="item">
              <div class="label">货件仓储：</div>
              <div class="value">{{ orderDetail.storageName }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div
      v-if="orderDetail.orderOldProductDTOList && orderDetail.orderOldProductDTOList.length > 0"
      style="margin-bottom: 30px"
    >
      <h3>旧机信息</h3>
      <div class="order-detail">
        <!-- 回收 -->
        <el-table :data="orderDetail.orderOldProductDTOList" style="width: 100%" size="small" border>
          <el-table-column prop="mainName" label="大类" align="center"></el-table-column>
          <el-table-column prop="smallName" label="小类" align="center"></el-table-column>
          <el-table-column prop="specName" label="型号" align="center"></el-table-column>
          <el-table-column prop="itemList" label="属性" align="center">
            <template slot-scope="scope">
              {{ scope.row.itemList.map(o => o.dictName).join('、') }}
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="单位" align="center">
            <template>台</template>
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center"></el-table-column>
          <el-table-column prop="payAmount" label="旧机金额" align="center"></el-table-column>
          <el-table-column prop="yjhxDkFlag" label="支付方式" align="center">
            <template slot-scope="scope">
              {{ { 1: '线上支付抵扣订单货款', 2: '仅线上展示旧机价值' }[scope.row.yjhxDkFlag] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="compensateList.length > 0" style="margin-bottom: 30px">
      <h3>理赔信息</h3>
      <div class="order-detail">
        <!-- 理赔表格 -->
        <el-table :data="compensateList" style="width: 100%" size="small" border>
          <el-table-column prop="goodsName" label="理赔商品" align="center"></el-table-column>
          <el-table-column prop="num" label="理赔数量" align="center"></el-table-column>
          <el-table-column prop="createTime" label="理赔时间" align="center"></el-table-column>
          <el-table-column prop="refundAmount" label="理赔金额" align="center"></el-table-column>
          <el-table-column prop="operatorUser" label="操作人" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <h3>商品信息</h3>
    <div class="order-detail" style="margin-bottom: 30px">
      <!-- 订单表格 -->
      <el-table :data="orderDetail.orderDetails" style="width: 100%" border>
        <el-table-column label="商品信息" min-width="200">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="6">
                <el-image style="width: 40px; height: 40px" :src="$showImgUrl(scope.row.imgUrl)">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="18">
                <div>
                  <el-tag
                    type="danger"
                    effect="plain"
                    size="mini"
                    style="margin-right: 4px"
                    v-if="scope.row.promotionFullPieceId"
                    >满件打折</el-tag
                  >{{ scope.row.goodsName }}
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSpecValue" label="规格" align="center">
          <template slot-scope="scope"> {{ scope.row.goodsSpecName }}{{ scope.row.goodsSpecValue }} </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column prop="sendStockNum" label="已发货数量" min-width="100" align="center"></el-table-column>
        <el-table-column prop="shareAmount" label="分销金额" align="center">
          <template slot-scope="scope">
            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.shareAmount : '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="discountAmount" label="优惠金额" align="center"></el-table-column>
        <!-- <el-table-column prop="zkAmount" label="折扣优惠" align="center"></el-table-column> -->
        <el-table-column prop="applyAmount" label="优惠价格申请" align="center" min-width="110"></el-table-column>
        <el-table-column prop="profitAmount" label="实际销售金额" align="center" min-width="110">
          <template slot-scope="scope">
            {{
              orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.profitAmount : scope.row.payAmount
            }}
          </template>
        </el-table-column>
        <el-table-column prop="payAmount" label="商品总金额" align="center" min-width="100"></el-table-column>
        <el-table-column prop="freight" label="运费" align="center"></el-table-column>
        <el-table-column prop="userRefundNum" label="用户维权数量" align="center" min-width="110"></el-table-column>
        <el-table-column prop="userRefundAmount" label="用户维权金额" align="center" min-width="110"></el-table-column>
        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column prop="refundBy" label="退款人" align="center"></el-table-column>
        <el-table-column prop="refundTime" label="退款时间" align="center" min-width="160"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="160"
          v-if="orderDetail.orderStatus != 'CLOSE' && orderDetail.payTypeId == 'WECHAT'"
        >
          <template slot-scope="scope">
            <!-- <el-button v-if="!~['TIMEOUT', 'CLOSE'].indexOf(orderDetail.orderStatus)" size="mini" type="primary"
              @click="handleRefund(scope.row)"
              :disabled="!orderDetail.refundAble || scope.row.refundNum >= scope.row.num">退款</el-button> -->
            <!-- <el-button v-if="!~['TIMEOUT'].indexOf(orderDetail.orderStatus)" size="mini"
              @click="handleCompensate(scope.row)">理赔</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="deliverList.length > 0" style="margin-bottom: 30px">
      <h3>发货记录</h3>
      <div class="order-detail">
        <!-- 发货记录 -->
        <el-table :data="deliverList" style="width: 100%" size="small" border>
          <el-table-column prop="deliveryId" align="center" label="发货单号" width="160"></el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
              {{
                { SEND: '已发货', REFUND: '已退货', PART_REFUND: '部分退货', REFUND_PRICE: '仅退款' }[scope.row.status]
              }}
            </template>
          </el-table-column>
          <el-table-column prop="sendNum" align="center" label="发货数量"></el-table-column>
          <el-table-column prop="refundNum" align="center" label="退货数量"></el-table-column>
          <el-table-column prop="num" align="center" label="订单数量"></el-table-column>
          <el-table-column prop="sendInsideCodeQty" align="center" label="内机数量"></el-table-column>
          <el-table-column prop="sendOutCodeQty" align="center" label="外机数量"></el-table-column>
          <el-table-column prop="sendPartsCodeQty" align="center" label="配件数量"></el-table-column>
          <el-table-column prop="storageStockName" align="center" label="发货仓库" width="100"></el-table-column>
          <el-table-column prop="pickType" align="center" label="发货方式">
            <template slot-scope="scope">
              {{ scope.row.pickType == 'YES' ? '自提' : '快递物流' }}
            </template>
          </el-table-column>
          <el-table-column prop="logisticsNo" align="center" label="快递单号" width="100"></el-table-column>
          <el-table-column prop="companyName" align="center" label="物流公司" width="100"></el-table-column>
          <el-table-column prop="pickName" align="center" label="提货人"></el-table-column>
          <el-table-column prop="pickPhone" align="center" label="提货人电话" width="110"></el-table-column>
          <el-table-column align="center" prop="deliverTime" label="发货时间" min-width="160"></el-table-column>
          <el-table-column prop="createBy" align="center" label="操作人" width="140"></el-table-column>
          <el-table-column prop="createTime" align="center" label="操作时间" width="160"></el-table-column>
          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <!-- <el-button v-if="!~['TIMEOUT', 'CLOSE'].indexOf(orderDetail.orderStatus)" size="mini" type="text"
			    @click="handleRefund(scope.row)" :disabled="!orderDetail.refundAble || scope.row.refundNum >= scope.row.num">退款
			  </el-button> -->
              <el-button type="text" size="small" @click="toDeliverDetail(scope.row.deliveryId)">详情</el-button>
              <el-button
                type="text"
                size="small"
                @click="returnOrder(scope.row.deliveryId)"
                v-if="!~['TIMEOUT', 'CLOSE'].indexOf(orderDetail.orderStatus) && scope.row.status == 'SEND'"
                >发起退货</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="order-detail">
      <div class="order-amount-info">
        <el-row>
          <el-col :span="19">
            <div style="width: 1px; height: 1px"></div>
          </el-col>
          <el-col :span="5">
            <div style="padding-bottom: 10px">商品总价：¥ {{ orderDetail.totalAmount }}</div>
            <div style="padding-bottom: 10px">运费：¥ {{ orderDetail.freight }}</div>
            <div style="padding-bottom: 10px" v-if="orderDetail.discountAmount">
              优惠：¥ {{ orderDetail.discountAmount }}
              <span v-if="orderDetail.exchangeCode">（优惠码：{{ orderDetail.exchangeCode }}）</span>
              <span v-if="orderDetail.promotionDiscountRate">（{{ orderDetail.promotionDiscountRate * 10 }}折）</span>
              <span v-if="orderDetail.promotionFullPieceId">（{{ orderDetail.promotionFullPieceRemark }}）</span>
            </div>
            <div style="font-size: 14px">
              <span style="padding-right: 15px">实际收款</span
              ><span style="color: red; font-size: 18px">¥ {{ orderDetail.payAmount }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="order-evaluate-info" v-if="evaluateDetail">
      <div class="title">
        <div class="left">
          评价信息<span>{{ evaluateDetail.createTime }}</span>
        </div>
        <div class="right">
          <span>是否客户端展示</span>
          <el-switch v-model="evaluateDetail.isShow" @change="changeShow"></el-switch>
        </div>
      </div>
      <div class="main">
        <div class="rate-list">
          <div style="display: flex; align-items: center; margin-bottom: 5px">
            商品质量：<el-rate :value="evaluateDetail.commentGoods" disabled disabled-void-color="#DDDDDD"></el-rate>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 5px">
            服务质量：<el-rate :value="evaluateDetail.commentService" disabled disabled-void-color="#DDDDDD"></el-rate>
          </div>
          <div style="display: flex; align-items: center">
            配送质量：<el-rate :value="evaluateDetail.commentExpress" disabled disabled-void-color="#DDDDDD"></el-rate>
          </div>
        </div>
        <div class="tag-list" v-if="orderDetail.orderCommentTags && orderDetail.orderCommentTags.length > 0">
          <el-tag v-for="(item, index) in orderDetail.orderCommentTags" :key="index">{{ item }}</el-tag>
        </div>
      </div>
      <div class="content">{{ evaluateDetail.content }}</div>
      <div class="img-list" v-if="orderDetail.orderCommentImgs && orderDetail.orderCommentImgs.length > 0">
        <el-image
          v-for="(item, index) in orderDetail.orderCommentImgs"
          :key="index"
          :src="$showImgUrl(item)"
          :preview-src-list="orderDetail.orderCommentImgs.map(u => $showImgUrl(u))"
          fit="cover"
        ></el-image>
      </div>
    </div>

    <!-- 收款记录 -->
    <div style="margin-top: 20px" v-if="!(orderDetail.payTypeId == 'WECHAT')">
      <h3>收款记录</h3>
      <!-- 列表 -->
      <div style="margin-bottom: 20px">
        <div>
          <span style="margin-right: 30px; font-size: 18px">订单总金额：{{ orderDetail.payAmount }}</span>
          <span style="margin-right: 30px; font-size: 18px"
            >待收款金额：{{
              (Math.ceil(((orderDetail.payAmount || 0) - (orderDetail.paidAmount || 0)) * 100) / 100).toFixed(2)
            }}</span
          >
          <span style="margin-right: 30px; font-size: 18px">已收款金额：{{ orderDetail.paidAmount }}</span>
        </div>
        <el-table
          v-if="orderPaymentRecordListData.length"
          :data="orderPaymentRecordListData"
          style="width: 100%"
          border
        >
          <el-table-column prop="payStatus" label="收款标志" align="center">
            <template slot-scope="scope">
              <div>
                {{ { NO_PAID: '待收款', PART_PAID: '部分收款', PAID: '完成收款' }[scope.row.payStatus] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="paidBy" label="收款人" align="center"></el-table-column>
          <el-table-column prop="paidTime" label="收款时间" align="center"></el-table-column>
          <el-table-column prop="paidAmount" label="收款金额" align="center"></el-table-column>
          <el-table-column prop="fileUrl" label="收款凭证" align="center">
            <template slot-scope="scope">
              <div>
                <el-image
                  v-for="(url, index) in (scope.row.fileUrl || '').split(',').filter(url => !!url)"
                  :key="index"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="[url]"
                ></el-image>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表单 -->
      <el-card
        class="box-card"
        v-if="
          pageType === 'shoukuan' &&
          orderDetail.payStatus !== 'PAID' &&
          !['DQR', 'CLOSE'].includes(orderDetail.orderStatus)
        "
      >
        <div>
          <el-form size="mini" :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="*收款人" prop="paidBy">
                  <el-input style="width: 100%" v-model="ruleForm.paidBy"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="*收款金额" prop="paidAmount">
                  <el-input style="width: 100%" type="number" v-model="ruleForm.paidAmount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="*收款时间" prop="paidTime">
                  <el-date-picker
                    style="width: 100%"
                    v-model="ruleForm.paidTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="凭证">
                  <ImageUpload :fileList="ruleForm.fileUrls" :limit="100" :isEdit="true" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div style="text-align: right">
          <el-button size="mini" type="primary" @click="shoukuanhs('PART_PAID')">部分收款</el-button>
          <el-button size="mini" type="primary" @click="shoukuanhs('PAID')">完成收款</el-button>
        </div>
      </el-card>
    </div>
    <!-- -------------------------------------------------------------------------------------------- -->

    <el-dialog
      :title="dialogTitle"
      :visible.sync="remarkVisible"
      :show-close="false"
      :width="dialogWidth"
      :close-on-click-modal="false"
    >
      <el-form
        :model="orderForm"
        :rules="orderFormRules"
        ref="orderForm"
        v-if="curOpenDialogType !== 'query'"
        label-width="100px"
        label-position="left"
      >
        <el-form-item prop="remark" v-if="curOpenDialogType === 'remark'">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 16 }"
            placeholder="请输入备注内容"
            v-model="remark"
            maxlength="100"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="payAmount" v-if="curOpenDialogType === 'price'">
          <el-input v-model="orderForm.payAmount" autocomplete="off" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="receUserName" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.receUserName" autocomplete="off" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="收货电话" prop="recePhone" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.recePhone" autocomplete="off" placeholder="请输入收货电话"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="receAddress" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.receAddress" autocomplete="off" placeholder="请输入收货地址"></el-input>
        </el-form-item>
        <template v-if="curOpenDialogType === 'send'">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="发货方式" prop="pickType">
                <el-radio-group v-model="orderForm.pickType">
                  <el-radio label="YES">自提/自送</el-radio>
                  <el-radio label="NO">快递物流</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-if="orderForm.pickType == 'YES'"
                label="提货人"
                prop="pickName"
                :rules="[{ required: true, message: '提货人不能为空', trigger: 'blur' }]"
              >
                <el-input v-model="orderForm.pickName" placeholder="请输入提货人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-if="orderForm.pickType == 'YES'"
                label="提货人电话"
                prop="pickPhone"
                :rules="[
                  { required: true, message: '提货人电话不能为空', trigger: 'blur' },
                  { pattern: /^((1[3456789]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
                ]"
              >
                <el-input v-model="orderForm.pickPhone" placeholder="请输入提货人电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-if="orderForm.pickType == 'NO'" label="快递单号" prop="logisticsNo">
                <el-input v-model="orderForm.logisticsNo" autocomplete="off" placeholder="请输入快递单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-if="orderForm.pickType == 'NO'" label="物流公司" prop="companyCode">
                <el-select v-model="orderForm.companyCode" placeholder="请选择物流公司" style="width: 100%">
                  <el-option
                    :label="item.name"
                    :value="item.code"
                    v-for="(item, index) in companyList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仓储" prop="storageId">
                <el-select
                  v-model="orderForm.storageId"
                  placeholder="请选择仓储"
                  @change="
                    e => {
                      storageName = storageList.find(item => item.storageId == e).storageName
                      getDetail()
                    }
                  "
                  style="width: 100%"
                >
                  <el-option
                    :label="item.storageName"
                    :value="item.storageId"
                    v-for="(item, index) in storageList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否派单" prop="workOrder">
                <el-radio-group v-model="orderForm.workOrder">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-card class="box-card">
                <el-tabs v-model="typeIndex">
                  <el-tab-pane
                    v-if="orderDetail.orderStatus != 'YFH' && orderDetail.orderStatus != 'OVER'"
                    label="发货数量"
                    name="1"
                  ></el-tab-pane>
                  <el-tab-pane v-if="joinCode == 'CODE'" label="发货条码" name="2"></el-tab-pane>
                </el-tabs>
                <br />
                <el-button size="small" v-show="typeIndex == 2 && joinCode == 'CODE'" type="primary" @click="addCode()"
                  >新增</el-button
                >
                <el-button
                  size="small"
                  v-show="typeIndex == 1 && joinCode == 'CODE'"
                  type="primary"
                  @click="handleDownload('导入条码模板')"
                  >导入条码模板下载</el-button
                >
                <div class="table">
                  <!-- 发货数量 -->
                  <el-form
                    v-show="typeIndex == 1"
                    ref="formData1"
                    :model="formData1"
                    label-width="0"
                    size="small"
                    label-position="left"
                  >
                    <el-table
                      :data="formData1.list"
                      element-loading-text="Loading"
                      border
                      fit
                      highlight-current-row
                      stripe
                      @selection-change="deliverSelectionChange"
                    >
                      <el-table-column type="selection" width="40"></el-table-column>
                      <el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
                      <el-table-column prop="mainName" align="center" label="大类"></el-table-column>
                      <el-table-column prop="smallName" align="center" label="小类"></el-table-column>
                      <el-table-column prop="goodsName" align="center" label="商品名称"></el-table-column>
                      <el-table-column prop="goodsMaterialName" align="center" label="物料名称"></el-table-column>
                      <el-table-column prop="goodsMaterialSpecsName" align="center" label="规格型号"></el-table-column>
                      <el-table-column prop="goodsMaterialUnit" align="center" label="单位">
                        <template slot-scope="scope">
                          {{
                            scope.row.goodsMaterialUnit == 'C'
                              ? '整套'
                              : scope.row.goodsMaterialUnit == 'I'
                              ? '单个'
                              : ''
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="num" align="center" label="订单数量">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.num" placeholder="请输入" type="number"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sendStockNum" align="center" label="发货数量"></el-table-column>
                      <el-table-column v-if="joinCode != 'NO'" prop="" align="center" label="发货仓库">
                        <template slot-scope="scope">
                          {{ storageName }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        v-if="joinCode != 'NO'"
                        prop="stockOnQty"
                        align="center"
                        label="发货仓库库存"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        v-if="joinCode != 'NO'"
                        prop="allStockQty"
                        align="center"
                        label="库存总数量"
                        width="100"
                      ></el-table-column>
                      <el-table-column prop="insideNum" align="center" label="内机数量"></el-table-column>
                      <el-table-column prop="outNum" align="center" label="外机数量"></el-table-column>
                      <el-table-column prop="partNum" align="center" label="配件数量"></el-table-column>
                      <el-table-column
                        prop="insideCodeQty"
                        align="center"
                        label="导入内机条码数量"
                        width="140"
                      ></el-table-column>
                      <el-table-column
                        prop="outCodeQty"
                        align="center"
                        label="导入外机条码数量"
                        width="140"
                      ></el-table-column>
                      <el-table-column
                        prop="partsCodeQty"
                        align="center"
                        label="导入配件条码数量"
                        width="140"
                      ></el-table-column>
                      <el-table-column label="操作" align="center" width="140" fixed="right">
                        <template slot-scope="scope" v-if="joinCode == 'CODE'">
                          <el-upload action="_" :show-file-list="false" :http-request="importCode">
                            <el-button @click="orderDetailId = scope.row.orderDetailId" size="mini" type="text"
                              >导入条码</el-button
                            >
                          </el-upload>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                  <!-- 发货条码 -->
                  <el-form ref="formData2" :model="formData2">
                    <el-table
                      v-show="typeIndex == 2"
                      :data="formData2.list"
                      element-loading-text="Loading"
                      border
                      fit
                      highlight-current-row
                      stripe
                    >
                      <el-table-column label="品牌" align="center">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input
                              type="text"
                              v-model="scope.row.brandName"
                              :disabled="true"
                              placeholder="请输入"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="商品大类" align="center">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input
                              type="text"
                              v-model="scope.row.mainName"
                              :disabled="true"
                              placeholder="请输入"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="商品小类" align="center">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input
                              type="text"
                              v-model="scope.row.smallName"
                              :disabled="true"
                              placeholder="请输入"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column prop="" align="center" label="商品名称">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input
                              type="text"
                              v-model="scope.row.goodsMaterialName"
                              :disabled="true"
                              placeholder="请输入"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="规格型号" align="center">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'list.' + scope.$index + '.specs'"
                            :rules="[{ required: true, message: `请选择规格型号`, trigger: 'blur' }]"
                          >
                            <el-select
                              v-model="scope.row.specs"
                              @change="
                                e => {
                                  changeSpecs(e, scope.row)
                                }
                              "
                              value-key="orderDetailId"
                              :disabled="isEdit2 != scope.$index"
                              placeholder="请选择"
                              style="width: 100%"
                            >
                              <el-option
                                v-for="(item, ind) in formData1.list"
                                :key="ind"
                                :label="item.goodsMaterialSpecsName"
                                :value="item"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="物料类型" align="center">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'list.' + scope.$index + '.goodsMaterialItemType'"
                            :rules="[{ required: true, message: `请选择物料类型`, trigger: 'blur' }]"
                          >
                            <el-select
                              v-model="scope.row.goodsMaterialItemType"
                              @change="
                                e => {
                                  changeMaterial(e, scope.row)
                                }
                              "
                              :disabled="isEdit2 != scope.$index"
                              placeholder="请选择"
                              style="width: 100%"
                            >
                              <el-option
                                v-for="(item, ind) in [
                                  { name: '内机', id: 'INSIDE' },
                                  { name: '外机', id: 'OUT' },
                                  { name: '配件', id: 'PARTS' }
                                ]"
                                :key="ind"
                                :label="item.name"
                                :value="item.id"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="物料名称" align="center">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'list.' + scope.$index + '.material'"
                            :rules="[{ required: true, message: `请选择物料名称`, trigger: 'blur' }]"
                          >
                            <el-select
                              v-model="scope.row.material"
                              @focus="
                                e => {
                                  if (!scope.row.goodsMaterialItemType) {
                                    return $message.warning('请先选择物料类型！')
                                  }
                                }
                              "
                              @change="
                                e => {
                                  scope.row.materialName = e.name
                                  scope.row.stockQty = e.uniqueCode == 'YES' ? 1 : null
                                  scope.row.uniqueCode = e.uniqueCode
                                  scope.row.goodsMaterialItemId = e.itemId
                                }
                              "
                              value-key="name"
                              :disabled="isEdit2 != scope.$index"
                              placeholder="请选择"
                              style="width: 100%"
                            >
                              <el-option
                                v-for="(item, ind) in scope.row.materialList"
                                :key="ind"
                                :label="item.name"
                                :value="item"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column prop="" align="center" label="是否一物一码">
                        <template slot-scope="scope">
                          <el-form-item>
                            {{ scope.row.uniqueCode == 'YES' ? '是' : scope.row.uniqueCode == 'NO' ? '否' : '' }}
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column prop="" align="center" label="条码">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'list.' + scope.$index + '.materialCode'"
                            :rules="[{ required: true, message: `请输入条码`, trigger: 'blur' }]"
                          >
                            <el-input
                              type="text"
                              v-model="scope.row.materialCode"
                              :disabled="isEdit2 != scope.$index"
                              placeholder="请输入"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column prop="" align="center" label="数量">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'list.' + scope.$index + '.stockQty'"
                            :rules="[{ required: true, message: `请输入数量`, trigger: 'blur' }]"
                          >
                            <el-input
                              type="number"
                              v-model="scope.row.stockQty"
                              :disabled="isEdit2 != scope.$index || scope.row.uniqueCode == 'YES'"
                              placeholder="请输入"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="right" width="140" fixed="right">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="primary"
                            v-if="scope.$index == isEdit2"
                            @click="saveCode(scope.row)"
                            >保存</el-button
                          >
                          <el-button
                            size="mini"
                            type="primary"
                            v-if="scope.$index != isEdit2"
                            @click="isEdit2 = scope.$index"
                            >编辑</el-button
                          >
                          <el-popconfirm
                            title="确定删除吗？"
                            @confirm="delCode(scope.row.orderDetailCodeId, scope.$index)"
                          >
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                          </el-popconfirm>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <el-table
        v-loading="logisticsLoading"
        :data="logistics"
        style="width: 100%"
        size="mini"
        v-if="curOpenDialogType === 'query'"
      >
        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
        <el-table-column prop="areaName" label="地区名称" align="center"></el-table-column>
        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
        <el-table-column prop="state" label="物流状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
          </template>
        </el-table-column>
        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveForm" v-if="curOpenDialogType !== 'query' && curOpenDialogType !== 'send'"
          >保 存</el-button
        >
        <el-button type="primary" @click="deliverGoods" v-if="curOpenDialogType == 'send'">发 货</el-button>
        <el-button @click="cancelForm">{{ curOpenDialogType === 'query' ? '关 闭' : '取 消' }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="理赔" :visible.sync="compensateFormVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="compensateForm" :model="compensateForm" :rules="compensateFormRules" label-position="left">
        <el-form-item label="理赔数量" prop="num">
          <el-input v-model="compensateForm.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="理赔金额" prop="amount">
          <el-input v-model="compensateForm.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="compensateForm.remark" autocomplete="off" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCompensateForm">取 消</el-button>
        <el-button type="primary" @click="submitCompensateForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImageUpload from '@/components/file-upload'
import {
  cancelOrder,
  changePrice,
  changeReceiveInfo,
  confirmOrder,
  getOrderDetail,
  orderDeliver,
  saveRemark,
  orderRefund,
  orderCompensate,
  getCompensateList,
  changeShow,
  getCodeDetail,
  getMaterialList,
  listImport,
  saveCode,
  delCode,
  getPrintList,
  getDeliverList,
  orderPaymentRecordList,
  orderPaymentRecordAdd
} from '@/api/order'
import { getExpress, getCompanyList } from '@/api/common'
import { commonTemplateDownload } from '@/api/common.js'
import * as Storage from '@/api/storage'
import { mapGetters } from 'vuex'

export default {
  components: { ImageUpload },
  name: 'detail',
  data() {
    return {
      orderId: '',
      orderDetail: {},
      evaluateDetail: null,
      dialogTitle: '',
      remarkVisible: false,
      remark: '',
      price: 0,
      orderForm: {
        orderId: '',
        payAmount: '',
        receAddress: '',
        receUserName: '',
        recePhone: '',
        logisticsNo: '',
        companyCode: '',
        workOrder: true,
        pickType: 'YES',
        pickName: '',
        pickPhone: ''
      },
      orderFormRules: {
        payAmount: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'price') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请输入价格'))
                } else {
                  if (!this.isNumber(value)) {
                    callback(new Error('请输入数字值'))
                  } else {
                    callback()
                  }
                }
              }
            },
            trigger: 'blur'
          }
        ],
        receUserName: [{ require: true, message: '请输入收货人', trigger: 'blur' }],
        recePhone: [{ require: true, message: '请输入收货电话', trigger: 'blur' }],
        receAddress: [{ require: true, message: '请输入收货地址', trigger: 'blur' }],
        logisticsNo: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请输入快递单号'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        storageId: [
          {
            validator: (rule, value, callback) => {
              let joinCode = JSON.parse(localStorage.getItem('greemall_user')).joinCode
              if (this.curOpenDialogType !== 'send' || joinCode == 'NO') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请选择仓储'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }
        ],
        companyCode: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请选择快递公司'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'change'
          }
        ]
      },
      curOpenDialogType: 'order',
      logistics: [],
      storageList: [],
      dialogWidth: '50%',
      logisticsLoading: false,
      companyList: [],
      compensateFormVisible: false,
      compensateForm: {
        id: null,
        num: '',
        amount: '',
        remark: ''
      },
      compensateFormRules: {
        num: [
          { required: true, message: '请输入理赔数量', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value > this.compensateItem.num - this.compensateItem.refundNum) {
                callback(
                  new Error('最多还可以理赔' + (this.compensateItem.num - this.compensateItem.refundNum) + '件商品')
                )
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        amount: [{ required: true, message: '请输入理赔金额', trigger: 'blur' }]
      },
      compensateItem: {
        num: '',
        refundNum: ''
      },
      compensateList: [],
      typeIndex: '1',
      formData1: {
        list: []
      },
      formData2: {
        list: []
      },
      isEdit1: 0,
      isEdit2: 0,
      joinCode: JSON.parse(localStorage.getItem('greemall_user')).joinCode,
      orderDetailId: '',
      printList: [],
      deliverList: [],
      deliverSelection: [],
      storageName: '',
      pageType: '',
      orderPaymentRecordListData: [],
      ruleForm: {
        paidAmount: '',
        paidBy: '',
        paidTime: '',
        fileUrls: []
      },
      rules: {
        paidAmount: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        paidBy: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        paidTime: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        fileUrls: []
      }
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.pageType = this.$route.query.type
    this.getDetail()
    this.getStorageList()
    this.getCompanyList()
    this.getCompensateList()
    this.getPrintList()
    this.getDeliverList()
    setTimeout(() => {
      if (this.pageType === 'shoukuan') {
        var elements = document.getElementsByClassName('app-main-view-div')
        for (var el of elements) {
          el.scrollTo(1000, 10000000000000000000)
        }
      }
    }, 500)
  },
  methods: {
    shoukuanhs(type) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          orderPaymentRecordAdd({
            payStatus: type,
            orderId: this.orderId,
            ...this.ruleForm,
            fileUrls: undefined,
            fileUrl: this.ruleForm.fileUrls.map(item => item.url).join(',')
          }).then(res => {
            this.ruleForm = {
              paidAmount: '',
              paidBy: '',
              paidTime: '',
              fileUrls: []
            }
            this.$successMsg('记录成功')
            this.getDetail()
          })
        }
      })
    },
    getDetail() {
      orderPaymentRecordList({ orderId: this.orderId }).then(res => {
        this.orderPaymentRecordListData = res.data
      })
      getOrderDetail({ orderId: this.orderId, storageId: this.orderForm.storageId }).then(res => {
        this.orderDetail = res.data
        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
        this.evaluateDetail = res.data.orderComment
        let arr = []
        res.data.orderDetails.forEach(item => {
          arr.push(item)
        })
        this.formData1.list = arr
      })
    },

    getDeliverList() {
      getDeliverList({
        pageNum: 1,
        pageSize: -1,
        params: [{ param: 'a.order_id', compare: '=', value: this.orderId }]
      }).then(res => {
        this.deliverList = res.data.records
      })
    },

    getPrintList() {
      getPrintList({ orderId: this.orderId }).then(res => {
        this.printList = res.data || []
      })
    },

    showDialog(type) {
      this.dialogWidth = type === 'query' ? '80%' : type === 'send' ? '80%' : '50%'
      this.remarkVisible = true
      this.curOpenDialogType = type
      if (type === 'remark') {
        this.dialogTitle = '订单备注'
        this.remark = this.orderDetail.remark
      } else if (type === 'price') {
        this.dialogTitle = '修改价格'
        this.orderForm.payAmount = this.orderDetail.payAmount
      } else if (type === 'info') {
        this.dialogTitle = '收货人信息'
        this.orderForm.receUserName = this.orderDetail.receUserName
        this.orderForm.recePhone = this.orderDetail.recePhone
        this.orderForm.receAddress = this.orderDetail.receAddress
      } else if (type === 'send') {
        this.dialogTitle = '发货信息'
      } else if (type === 'query') {
        this.logisticsLoading = true
        this.dialogTitle = '物流信息'
        getExpress({
          logisticsNo: this.orderDetail.logisticsNo,
          companyCode: this.orderDetail.companyCode
        }).then(res => {
          this.logistics = res.data
          this.logisticsLoading = false
        })
      }
    },
    cancelForm() {
      this.remarkVisible = false
      if (this.curOpenDialogType === 'query') {
        return
      }
      this.$refs.orderForm.resetFields()
      if (this.curOpenDialogType === 'remark') {
        this.remark = ''
      } else if (this.curOpenDialogType === 'price') {
        this.price = ''
      }
    },
    saveForm() {
      const params = {
        orderId: this.orderId
      }
      if (this.curOpenDialogType === 'remark') {
        params.remark = this.remark
        saveRemark(params).then(() => {
          this.cancelForm()
          this.getDetail()
          this.$successMsg('保存成功')
        })
      } else if (this.curOpenDialogType === 'price') {
        params.price = this.orderForm.payAmount
        this.$refs.orderForm.validate(valid => {
          if (valid) {
            changePrice(params).then(() => {
              this.cancelForm()
              this.getDetail()
              this.$successMsg('保存成功')
            })
          }
        })
      } else if (this.curOpenDialogType === 'info') {
        params.receUserName = this.orderForm.receUserName
        params.recePhone = this.orderForm.recePhone
        params.receAddress = this.orderForm.receAddress
        params.orderStatus = this.orderDetail.orderStatus
        this.$refs.orderForm.validate(valid => {
          if (valid) {
            changeReceiveInfo(params).then(() => {
              this.cancelForm()
              this.getDetail()
              this.$successMsg('保存成功')
            })
          }
        })
      } else if (this.curOpenDialogType === 'send') {
        params.logisticsNo = this.orderForm.logisticsNo
        params.storageId = this.orderForm.storageId
        params.companyCode = this.orderForm.companyCode
        params.workOrder = this.orderForm.workOrder
        this.$refs.orderForm.validate(valid => {
          if (valid) {
            orderDeliver(params).then(() => {
              this.cancelForm()
              this.getDetail()
              this.$successMsg('保存成功')
            })
          }
        })
      }
    },
    cancelOrder() {
      cancelOrder({ orderId: this.orderId }).then(() => {
        this.getDetail()
        this.$successMsg('取消成功')
      })
    },
    confirmOrder() {
      confirmOrder({ orderId: this.orderId }).then(() => {
        this.getDetail()
        this.$successMsg('确认收款成功')
      })
    },

    toDeliverDetail(deliveryId) {
      this.$router.push({
        name: 'sales_deliver_order_list',
        query: {
          deliverId: deliveryId
        }
      })
    },

    // 发起退货
    returnOrder(deliveryId) {
      this.$router.push({
        name: 'sales_return_order_list',
        query: {
          deliverId: deliveryId
        }
      })
    },
    goBack() {
      // this.$router.go(-1);
      this.$router.push({
        name: 'order_list'
      })
    },
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },

    getStorageList() {
      Storage.getList({ pageNum: 1, pageSize: -1, type: '商品' }).then(res => {
        this.storageList = res.data.records
      })
    },

    // 获取物流公司列表
    getCompanyList() {
      getCompanyList().then(res => {
        this.companyList = res.data
      })
    },

    // 退款
    handleRefund(row) {
      console.log(row)
      if (row.num == 1) {
        this.$confirm('此操作将退款此商品, 是否继续?', '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.orderRefund(1, row.orderDetailId)
          })
          .catch(() => {})
      } else {
        this.$prompt('请输入退款数量', '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: function (value) {
            if (!value) return '请输入退款数量'
            if (value == 0) return '退款数量不能小于1'
            if (value > row.num - row.refundNum) {
              return '最多还可以退款' + (row.num - row.refundNum) + '件商品'
            }
          }
        })
          .then(({ value }) => {
            this.orderRefund(value, row.orderDetailId)
          })
          .catch(() => {})
      }
    },

    // 退款
    orderRefund(num, id) {
      orderRefund({
        num: num,
        orderDetailId: id
      }).then(res => {
        this.getDetail()
        this.$successMsg('退款成功')
      })
    },

    // 理赔
    handleCompensate(row) {
      this.compensateFormVisible = true
      this.compensateForm.id = row.orderDetailId
      this.compensateItem.num = row.num
      this.compensateItem.refundNum = row.refundNum
    },

    // 取消 理赔
    cancelCompensateForm() {
      this.compensateFormVisible = false
      this.compensateForm = {
        id: null,
        num: '',
        amount: '',
        remark: ''
      }
    },

    // 提交 理赔
    submitCompensateForm() {
      this.$refs.compensateForm.validate(valid => {
        if (valid) {
          let params = {
            adminUserId: this.userid,
            orderDetailId: this.compensateForm.id,
            num: this.compensateForm.num,
            refundAmount: this.compensateForm.amount,
            remark: this.compensateForm.remark
          }
          orderCompensate(params).then(res => {
            this.cancelCompensateForm()
            this.getDetail()
            this.getCompensateList()
            this.$successMsg('理赔成功')
          })
        }
      })
    },

    // 获取理赔列表
    getCompensateList() {
      getCompensateList({ orderId: this.orderId }).then(res => {
        this.compensateList = res.data
      })
    },

    // 切换评价信息是否显示
    changeShow() {
      changeShow({
        isShow: this.evaluateDetail.isShow,
        orderId: this.orderId
      }).then(res => {
        this.getDetail()
        this.$successMsg()
      })
    },

    async getCodeDetail() {
      getCodeDetail({ orderId: this.orderId }).then(async res => {
        for (var item of res.data) {
          item.specs = { goodsMaterialSpecsName: item.specsName, orderDetailId: item.orderDetailId }
          item.material = { name: item.materialName }
          item.materialList = await this.getMaterialList(item.specsName, item.goodsMaterialItemType)
        }
        this.formData2.list = res.data
      })
    },
    async getMaterialList(specsName, type) {
      return new Promise((resolve, reject) => {
        getMaterialList({
          pageNum: 1,
          pageSize: -1,
          specsName,
          type
        }).then(async res => {
          resolve(res.data.records)
        })
      })
    },
    async changeSpecs(e, row) {
      row.brandName = e.brandName
      row.brandId = e.brandId
      row.mainName = e.mainName
      row.mainId = e.mainNumber
      row.smallName = e.smallName
      row.smallId = e.smallNumber
      row.specsName = e.goodsMaterialSpecsName
      row.goodsMaterialName = e.goodsName
      row.goodsMaterialId = e.goodsMaterialId
      row.material = null
      row.materialName = ''
      row.stockQty = ''
      row.uniqueCode = ''
      row.materialList = await this.getMaterialList(row.specsName, row.goodsMaterialItemType)
      row.orderDetailId = e.orderDetailId
    },
    async changeMaterial(e, row) {
      if (!row.specs) {
        return this.$message.warning('请先选择规格型号！')
      }
      row.material = null
      row.materialName = ''
      row.stockQty = ''
      row.uniqueCode = ''
      row.materialList = await this.getMaterialList(row.specsName, row.goodsMaterialItemType)
    },
    //发货新增条码
    addCode() {
      this.$refs.formData2.validate(valid => {
        if (valid) {
          this.isEdit2 = 0
          this.formData2.list.unshift({
            brandId: '',
            brandName: '',
            mainId: '',
            mainName: '',
            stockQty: '',
            smallId: '',
            smallName: '',
            goodsMaterialItemType: '',
            goodsMaterialName: '',
            goodsMaterialId: '',
            materialCode: '',
            uniqueCode: '',
            specs: null,
            specsName: '',
            materialName: '',
            material: null,
            materialList: [],
            orderDetailId: '',
            goodsMaterialItemId: ''
          })
        }
      })
    },
    delCode(orderDetailCodeId, index) {
      if (orderDetailCodeId) {
        delCode({
          orderDetailCodeId
        }).then(res => {
          if (res.code == 200) {
            this.$message({ type: 'success', message: '删除成功!' })
            this.getOrderDetail()
            this.getCodeDetail()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        this.formData2.list.splice(index, 1)
      }
    },
    saveCode(orderDetailCodes) {
      const that = this
      let params = [
        {
          ...orderDetailCodes,
          orderId: this.orderId
        }
      ]
      delete params[0].material
      delete params[0].specs
      this.$refs.formData2.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          saveCode(params).then(res => {
            if (res.code == 200) {
              that.$message.success('保存成功!')
              this.getOrderDetail()
              this.getCodeDetail()
            }
          })
        }
      })
    },

    deliverSelectionChange(val) {
      this.deliverSelection = val
    },

    deliverGoods() {
      this.$refs.orderForm.validate(valid => {
        if (valid) {
          if (this.deliverSelection.length < 1) return this.$errorMsg('请选择一个发货信息')

          for (let i = 0; i < this.deliverSelection.length; i++) {
            const item = this.deliverSelection[i]
            if (!item.num || item.num == 0) return this.$errorMsg('请填写发货数量-订单数量')
          }

          orderDeliver({
            orderId: this.orderId,
            logisticsNo: this.orderForm.pickType == 'NO' ? this.orderForm.logisticsNo : '',
            storageId: this.orderForm.storageId,
            companyCode: this.orderForm.pickType == 'NO' ? this.orderForm.companyCode : '',
            workOrder: this.orderForm.workOrder,
            pickName: this.orderForm.pickType == 'YES' ? this.orderForm.pickName : '',
            pickPhone: this.orderForm.pickType == 'YES' ? this.orderForm.pickPhone : '',
            pickType: this.orderForm.pickType,
            orderDeliveryDetailList: this.deliverSelection.map(item => {
              return {
                orderDetailId: item.orderDetailId,
                sendNum: item.num,
                sendInsideCodeQty: item.insideCodeQty,
                sendOutCodeQty: item.outCodeQty,
                sendPartsCodeQty: item.partsCodeQty
              }
            })
          }).then(() => {
            this.cancelForm()
            this.getDetail()
            this.getDeliverList()
            this.$successMsg('发货成功')
          })
        }
      })
    },
    importCode(data) {
      const loading = this.$loading({
        lock: true,
        text: '正在导入',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var formdata = new FormData()
      formdata.append('file', data.file)
      let params = {
        orderDetailId: this.orderDetailId
      }
      if (!!params) {
        for (const key in params) {
          if (Object.hasOwnProperty.call(params, key)) {
            formdata.append(key, params[key])
          }
        }
      }
      listImport({ formdata })
        .then(res => {
          this.getOrderDetail()
          loading.close()
          this.$message({
            type: 'success',
            message: '导入成功!'
          })
        })
        .catch(err => {
          loading.close()
          this.$message({
            type: 'error',
            message: err.message || '导入失败'
          })
        })
    },

    // 下载导入模版
    handleDownload(title) {
      commonTemplateDownload({ name: '导入条码.xlsx' }, title)
        .then(res => {
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$message.error('下载失败')
        })
    }
  },
  computed: {
    ...mapGetters(['userid', 'name']),
    curOrderStatus() {
      switch (this.orderDetail.orderStatus) {
        case 'NOPAY':
          return 1
          break
        case 'DFH':
          return 2
          break
        case 'YFH':
          return 3
          break
        case 'OVER':
          return 4
          break
        default:
          return 1
      }
    },
    totalAmountCompute() {
      if (!this.orderDetail.totalAmount) {
        return 0
      }
      const totalAmount = parseFloat(this.orderDetail.totalAmount)
      const freight = parseFloat(this.orderDetail.freight)
      return (totalAmount - freight).toFixed(2)
    }
  }
}
</script>

<style scoped lang="scss">
.order-main {
  margin-top: 15px;
  border: 1px solid #e5e5e5;

  .order-main-title {
    font-size: 14px;
  }

  .order-main-title span {
    margin-right: 15px;
  }

  .order-main-status {
    padding: 15px 0;
    font-size: 24px;
    color: #409eff;
  }

  .order-main-opt-btn {
    padding: 15px 0;
  }
}

.order-receive-info {
  margin: 15px 0 30px;
  padding: 15px;
  background: #f5f7fa;

  :first-child div span {
    padding-right: 15px;
  }
}

.order-detail {
  background: #f5f7fa;

  .order-amount-info {
    padding: 15px 0;
    font-size: 12px;
    font-weight: bold;
  }

  ::v-deep .el-table tr,
  ::v-deep .el-table th {
    background-color: #f5f7fa;
  }
}

.main-detail {
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .item {
    display: flex;
    font-size: 14px;
    color: #666;
    padding-bottom: 12px;

    .label {
      white-space: nowrap;
    }
  }
}

.order-evaluate-info {
  margin: 15px 0;
  padding: 30px 15px;
  background: #f5f7fa;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 16px;
      font-weight: 700;

      span {
        font-weight: normal;
        margin-left: 20px;
        font-size: 14px;
        color: #666;
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 14px;

      span {
        margin-right: 10px;
      }
    }
  }

  .main {
    margin-top: 20px;
    display: flex;

    .rate-list {
      font-size: 14px;
      flex-shrink: 0;
    }

    .tag-list {
      margin-left: 30px;

      ::v-deep .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .content {
    width: 400px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    ::v-deep .el-image {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #eaeaea;
    }
  }
}
</style>