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

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <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" 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 label="操作" width="200" 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.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>

      <!-- 代金券记录 -->
      <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 RelatedVoucherLogs from './RelatedVoucherLogs'
import RelatedCommissionLogs from './RelatedCommissionLogs'
import UserDetails from './UserDetails'

export default {
  name: 'RelatedOrders',
  components: {
    RelatedVoucherLogs,
    RelatedCommissionLogs,
    UserDetails
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1120px',
        title: '关联订单'
      },
      visible: false,
      formData: {
        relatedSettlement: [],
        relatedOrders: {},
        relatedPresenterVoucherLogs: {},
        relatedCommissionLogs: {},
        relatedBuyerUsers: []
      },
      orderSn: ''
    }
  },
  methods: {
    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>