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

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <div>
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="店铺名称：">
          {{ formData.shopName }}
        </el-descriptions-item>
        <el-descriptions-item label="店铺编码：">
          {{ formData.shopCode }}
        </el-descriptions-item>
        <el-descriptions-item label="银行名称：">
          {{ formData.bankName }}
        </el-descriptions-item>
        <el-descriptions-item label="银行卡号：">
          {{ formData.bankCard }}
        </el-descriptions-item>
        <el-descriptions-item label="收款人姓名：">
          {{ formData.collectionName }}
        </el-descriptions-item>
        <el-descriptions-item label="提现金额：">
          {{ formData.withdrawalMoney }}
        </el-descriptions-item>
        <el-descriptions-item label="处理编号：">
          {{ formData.handleSn }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间：">
          {{ formData.applyTime }}
        </el-descriptions-item>
        <el-descriptions-item v-if="formData.handleTime" label="处理时间：">
          {{ formData.handleTime }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <div>
            <span v-if="formData.state === 0">待处理</span>
            <span v-else-if="formData.state === 1">已处理</span>
            <span v-else-if="formData.state === 2">通过</span>
            <span v-else-if="formData.state === 3">拒绝</span>
            <span v-else-if="formData.state === 4">待确认</span>
            <span v-else>--</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="备注：">
          {{ formData.cause || '--' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-tabs value="relatedSettlement">
      <el-tab-pane label="结算列表" name="relatedSettlement">
        <div v-if="formData.relatedSettlement && formData.relatedSettlement.length" style="margin-top: 32px;">
          <el-table
            v-loading="!formData.relatedSettlement.length" height="60vh" element-loading-text="暂无结算数据" :data="formData.relatedSettlement"
            v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
          >
            <el-table-column align="center" min-width="80" prop="id" label="ID" show-overflow-tooltip />
            <el-table-column align="center" width="120" prop="canWithdrawalAmount" label="可提现金额" show-overflow-tooltip />
            <el-table-column align="center" prop="createTime" label="创建时间" width="150" />
            <el-table-column align="center" min-width="150" prop="curWithdrawalAmount" label="占关联提现申请总额的金额" show-overflow-tooltip />
            <el-table-column align="center" min-width="120" prop="refundAmount" label="回退金额" show-overflow-tooltip />
            <el-table-column align="center" width="100" prop="shopId" label="关联店铺ID" show-overflow-tooltip />
            <el-table-column align="center" width="150" prop="sn" label="结算编号" show-overflow-tooltip />
            <el-table-column align="center" label="结算状态" prop="state">
              <template slot-scope="{ row }">
                <el-tag v-if="row.state === '0'" effect="plain" type="info">未清算</el-tag>
                <el-tag v-else-if="row.state === '1'" effect="plain" type="success">已清算</el-tag>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="140" label="是否惠市宝订单结算" prop="isHsb">
              <template slot-scope="{ row }">
                <div style="display: flex;justify-content: center;align-items: center;">
                  <div>
                    <el-tag v-if="row.isHsb === '0'" effect="plain" type="info">否</el-tag>
                    <el-tag v-else-if="row.isHsb === '1'" effect="plain" type="success">是</el-tag>
                    <span v-else>--</span>
                  </div>
                  <el-button
                    v-if="row.isHsb === '1'"
                    style="margin-left: 6px;" type="warning" size="mini"
                    @click="$refs.LedgerInformation && $refs.LedgerInformation.handleOpen(formData, row.sn)"
                  >
                    分账状态
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" prop="totalPrice" label="总金额" />
            <el-table-column align="center" width="100" prop="withdrawaledAmount" label="已提现金额" show-overflow-tooltip />
            <el-table-column align="center" width="100" prop="withdrawalingAmount" label="提现中的金额" show-overflow-tooltip />
            <el-table-column align="center" label="操作" width="120" fixed="right" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button
                  v-if="formData.relatedOrders[row.sn]" type="success" size="mini"
                  @click="$refs.RelatedOrders && $refs.RelatedOrders.handleOpen(formData, row.sn)"
                >
                  关联订单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 关联订单 -->
          <RelatedOrders ref="RelatedOrders" />
          <!-- 订单的分账状态信息 -->
          <LedgerInformation ref="LedgerInformation" @success="getInfo(formData.withdrawalId)" />
        </div>
        <div v-else style="font-size: 16px;font-weight: bold;">无结算数据</div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import RelatedOrders from './RelatedOrders'
import LedgerInformation from './LedgerInformation'
import { withdrawalGetById } from '@/api/withdrawal'

export default {
  name: 'DetailModal',
  components: {
    RelatedOrders,
    LedgerInformation
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1220px',
        title: '查看提现详情'
      },
      visible: false,
      formData: {
        withdrawalId: '',
        shopName: '',
        shopCode: '',
        bankName: '',
        bankCard: '',
        collectionName: '',
        withdrawalMoney: '',
        handleSn: '',
        applyTime: '',
        handleTime: '',
        state: '',
        cause: '',
        relatedSettlement: [], // 结算记录
        relatedOrders: {}, // 相关订单
        relatedPresenterVoucherLogs: {}, // 代金券记录
        relatedCommissionLogs: {}, // 佣金记录
        relatedBuyerUsers: [] // 用户列表
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.withdrawalId) {
        this.getInfo(params.withdrawalId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await withdrawalGetById({ withdrawalId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          withdrawalId: res.data.withdrawalId || '',
          shopName: res.data.shopName || '',
          shopCode: res.data.shopCode || '',
          bankName: res.data.bankName || '',
          bankCard: res.data.bankCard || '',
          collectionName: res.data.collectionName || '',
          withdrawalMoney: res.data.withdrawalMoney || 0,
          handleSn: res.data.handleSn || '',
          applyTime: res.data.applyTime || '',
          handleTime: res.data.handleTime || '',
          state: res.data.state || 0,
          cause: res.data.cause || '',
          relatedSettlement: res.data.relatedSettlement || [],
          relatedOrders: res.data.relatedOrders || {},
          relatedPresenterVoucherLogs: res.data.relatedPresenterVoucherLogs || {},
          relatedCommissionLogs: res.data.relatedCommissionLogs || {},
          relatedBuyerUsers: res.data.relatedBuyerUsers || []
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-collapse {
// 	.el-collapse-item__header {
// 		height: auto;
// 	}

// 	.el-descriptions {
// 		flex: 1;
// 		margin-right: 20px;
// 	}
// }
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

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