tuanfeng-pc-admin/src/views/finance/withdrawal/components/RelatedOrders.vue

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <div style="display: flex; justify-content: flex-end;margin-bottom: 15px;">
          <el-button type="success" @click="exportRelatedOrders">导出关联订单数据</el-button>
        </div>
      <el-table
        v-loading="!formData.relatedOrders[orderSn]" height="60vh" element-loading-text="暂无关联订单数据"
        :data="formData.relatedOrders[orderSn]"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" min-width="80" prop="orderId" label="订单ID" show-overflow-tooltip />
        <el-table-column align="center" min-width="150" prop="orderFormid" label="订单编号" show-overflow-tooltip />
        <el-table-column align="center" min-width="150" prop="createTime" label="创建时间" show-overflow-tooltip />
        <el-table-column align="center" width="150" prop="cerePayLog.transactionId" label="三方交易流水号" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" label="订单状态" prop="state">
          <template slot-scope="{ row }">
            <span v-if="row.state === 1">待付款</span>
            <span v-else-if="row.state === 2">待发货</span>
            <span v-else-if="row.state === 3">待收货</span>
            <span v-else-if="row.state === 4">已完成</span>
            <span v-else-if="row.state === 5">交易关闭（已取消）</span>
            <span v-else-if="row.state === 6">待成团</span>
            <span v-else-if="row.state === 7">待售后</span>
            <span v-else-if="row.state === 8">待核销（未付款）</span>
            <span v-else-if="row.state === 9">待核销（已付款）</span>
            <span v-else-if="row.state === 10">已核销</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" prop="orderPrice" label="商品总价" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="price" label="支付金额" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" label="支付方式" prop="paymentMode">
          <template slot-scope="{ row }">
            <span v-if="row.paymentMode === 1">微信</span>
            <span v-else-if="row.paymentMode === 2">支付宝</span>
            <span v-else-if="row.paymentMode === 3">花呗分期</span>
            <span v-else-if="row.paymentMode === 4">通联支付</span>
            <span v-else-if="row.paymentMode === 5">平台余额支付</span>
            <span v-else-if="row.paymentMode === 6">商家余额支付</span>
            <span v-else-if="row.paymentMode === 7">佣金支付</span>
            <span v-else-if="row.paymentMode === 8">消费金支付</span>
            <span v-else-if="row.paymentMode === 9">惠市宝支付</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="是否支付" prop="paymentState">
          <template slot-scope="{ row }">
            <el-tag v-if="row.paymentState === 0" effect="plain" type="info">否</el-tag>
            <el-tag v-else-if="row.paymentState === 1" effect="plain" type="success">是</el-tag>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" prop="paymentTime" label="支付时间" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="logisticsPrice" label="物流费用" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" label="售后状态" prop="afterState">
          <template slot-scope="{ row }">
            <span v-if="row.afterState === -1">无退货</span>
            <span v-else-if="row.afterState === 1">审核中</span>
            <span v-else-if="row.afterState === 2">退款中</span>
            <span v-else-if="row.afterState === 3">退货中</span>
            <span v-else-if="row.afterState === 4">退款完成</span>
            <span v-else-if="row.afterState === 5">退款失败</span>
            <span v-else-if="row.afterState === 6">审核不通过</span>
            <span v-else-if="row.afterState === 7">评审中</span>
            <span v-else-if="row.afterState === 8">退货完成，拒绝退款</span>
            <span v-else-if="row.afterState === 9">撤销申请</span>
            <span v-else-if="row.afterState === 10">审核通过</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="120" label="客户ID" prop="buyerUserId">
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.buyerUserId }}</span>
              <el-button
                v-if="formData.relatedBuyerUsers.find((item) => item.buyerUserId === row.buyerUserId)"
                style="margin-left: 14px;"
                type="warning" size="mini"
                @click="handleOpenUserDetails(row.buyerUserId)"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" prop="customerName" label="下单账户" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" prop="customerPhone" label="下单账户手机号" show-overflow-tooltip />
        <el-table-column align="center" min-width="150" prop="receiveAdress" label="收货人地址" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="receiveName" label="收货人姓名" show-overflow-tooltip />
        <el-table-column align="center" min-width="150" prop="receivePhone" label="收货人手机号" show-overflow-tooltip />
        <el-table-column align="center" min-width="150" prop="address" label="详细地址" show-overflow-tooltip />
        <el-table-column align="center" min-width="120" prop="shopId" label="关联店铺ID" show-overflow-tooltip />
        <el-table-column align="center" label="操作" width="100" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <!-- <el-button
              v-if="formData.relatedPresenterVoucherLogs[row.orderFormid]" type="success" size="mini"
              @click="$refs.OrderCommission && $refs.OrderCommission.handleOpen(row)"
            >
              查看分佣
            </el-button> -->
            <el-button
              v-if="formData.relatedPresenterVoucherLogs[row.orderFormid]" type="success" size="mini"
              @click="$refs.RelatedVoucherLogs && $refs.RelatedVoucherLogs.handleOpen(formData.relatedPresenterVoucherLogs[row.orderFormid], { userList: formData.relatedBuyerUsers })"
            >
              代金券记录
            </el-button>
            <!-- <el-button
              v-if="formData.relatedCommissionLogs[row.orderFormid]" type="success" size="mini"
              @click="$refs.RelatedCommissionLogs && $refs.RelatedCommissionLogs.handleOpen(formData.relatedCommissionLogs[row.orderFormid], { userList: formData.relatedBuyerUsers })"
            >
              佣金记录
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 订单分佣 -->
      <OrderCommission ref="OrderCommission" />
      <!-- 代金券记录 -->
      <RelatedVoucherLogs ref="RelatedVoucherLogs" />
      <!-- 佣金记录 -->
      <RelatedCommissionLogs ref="RelatedCommissionLogs" />
      <!-- 用户详情 -->
      <UserDetails ref="UserDetails" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { exportWithdrawal } from '@/api/withdrawal'
import OrderCommission from './OrderCommission'
import RelatedVoucherLogs from './RelatedVoucherLogs'
import RelatedCommissionLogs from './RelatedCommissionLogs'
import UserDetails from './UserDetails'

export default {
  name: 'RelatedOrders',
  props: {
    orderInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    OrderCommission,
    RelatedVoucherLogs,
    RelatedCommissionLogs,
    UserDetails
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1120px',
        title: '关联订单'
      },
      visible: false,
      formData: {
        relatedSettlement: [],
        relatedOrders: {},
        relatedPresenterVoucherLogs: {},
        relatedCommissionLogs: {},
        relatedBuyerUsers: []
      },
      orderSn: ''
    }
  },
  methods: {

    //  下载关联订单列表
    async exportRelatedOrders() {
      console.log(this.orderInfo)
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      const res = await exportWithdrawal({page:1,pageSize:1,withdrawalId: this.orderInfo.withdrawalId})
      if (!res) {
        return
      }
     this.xlsDownload(res,`${this.orderInfo.shopName}关联订单.xls`)
    },
        //  封装下载函数
        xlsDownload(res,name){
      const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
      const fileName = name
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}, orderSn) {
      console.log(params)
      this.formData = Object.assign(this.$options.data().formData, params)
      this.orderSn = orderSn
      this.visible = true
      this.$forceUpdate()
      // this.$refs.formData && this.$refs.formData.resetFields()
    },
    handleOpenUserDetails(buyerUserId) {
      const userMsg = this.formData.relatedBuyerUsers.find((item) => item.buyerUserId === buyerUserId)
      if (userMsg) {
        this.$refs.UserDetails && this.$refs.UserDetails.handleOpen(userMsg)
      }
    },
    handleSubmit() {
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>