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

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <el-table
        v-loading="!formData.relatedCommissionLogsList || !formData.relatedCommissionLogsList.length"
        height="60vh" element-loading-text="暂无佣金记录数据" :data="formData.relatedCommissionLogsList"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" min-width="80" prop="recordId" label="ID" show-overflow-tooltip />
        <!-- <el-table-column align="center" min-width="150" prop="acquirerId" label="得到方ID" show-overflow-tooltip /> -->
        <el-table-column align="center" min-width="100" label="类型" prop="type">
          <template slot-scope="{ row }">
            <span v-if="row.type === 1">关系链</span>
            <span v-else-if="row.type === 2">商城</span>
            <span v-else-if="row.type === 3">本地</span>
            <span v-else-if="row.type === 4">服务</span>
            <span v-else-if="row.type === 5">支付</span>
            <span v-else-if="row.type === 6">退款</span>
            <span v-else-if="row.type === 7">提现</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="变化金额" prop="amount">
          <template slot-scope="{ row }">
            <span>
              {{ [5, 7].includes(row.type) ? '-' : [1, 2, 3, 4, 6].includes(row.type) ? '+' : '' }}
              {{ row.amount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" prop="orderSn" label="订单编号" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="totalAmount" 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="80" prop="buyerUserId" label="用户ID" show-overflow-tooltip />
        <el-table-column align="center" width="100" label="来源用户头像" prop="imgOne">
          <template slot-scope="{ row }">
            <el-image
              v-if="row.imgOne" lazy :src="common.seamingImgUrl(row.imgOne)"
              style="width:40px; height:40px" fit="cover"
              :preview-src-list="[ common.seamingImgUrl(row.imgOne) ]"
            />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" prop="userNameOne" label="来源用户名称" show-overflow-tooltip />
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

export default {
  name: 'RelatedCommissionLogs',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '920px',
        title: '佣金记录'
      },
      visible: false,
      formData: {
        relatedCommissionLogsList: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = []) {
      this.formData.relatedCommissionLogsList = params
      this.visible = true
      this.$forceUpdate()
      // this.$refs.formData && this.$refs.formData.resetFields()
    },
    handleSubmit() {
    }
  }
}
</script>

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

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