clearticket_ota/src/views/selfManage/thirdParty/BalanceLogDialog.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="余额流水"
    width="860px">
    <div class="form-wrap">
      <div class="searchBox">
        <el-form
          :inline="true"
          :model="form"
          ref="form"
          size="mini"
          label-width="80px">
          <el-form-item
            prop="type"
            label="类型">
            <el-select
              v-model="form.type"
              placeholder="全部"
              clearable
              style="width: 140px">
              <el-option
                v-for="(label, value) in SELF_BALANCE_LOG_TYPE"
                :key="value"
                :label="label"
                :value="Number(value)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="timeRange"
            label="交易时间">
            <el-date-picker
              v-model="form.timeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 360px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="btn-wrap">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="reload">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          row-class-name="is-center"
          max-height="420">
          <el-table-column
            label="类型"
            width="100"
            align="center">
            <template slot-scope="{ row }">
              <el-tag
                :type="tagType(row.type)"
                size="small">{{ SELF_BALANCE_LOG_TYPE[row.type] || row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="发生额(元)"
            width="110"
            align="right">
            <template slot-scope="{ row }">{{ fmtMoney(row.amount) }}</template>
          </el-table-column>
          <el-table-column
            label="变动前(元)"
            width="110"
            align="right">
            <template slot-scope="{ row }">{{ fmtMoney(row.beforeBalance) }}</template>
          </el-table-column>
          <el-table-column
            label="变动后(元)"
            width="110"
            align="right">
            <template slot-scope="{ row }">{{ fmtMoney(row.afterBalance) }}</template>
          </el-table-column>
          <el-table-column
            prop="orderId"
            label="关联订单"
            width="180"
            show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="operatorAdminName"
            label="操作人"
            width="100"></el-table-column>
          <el-table-column
            prop="tradeTime"
            label="交易时间"
            width="160">
            <template slot-scope="{ row }">{{ parseTime(row.tradeTime) }}</template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page.sync="form.pageNum"
          :page-size="form.pageSize"
          :total="total"
          @current-change="reload"
        ></el-pagination>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-btn-wrap">
      <el-button @click="visible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getThirdPartyBalanceLog } from '@/api/selfManage'
import { SELF_BALANCE_LOG_TYPE } from '@/const'
import { parseTime } from '@/utils'

const TAG_MAP = { 1: 'success', 2: 'warning', 3: 'info', 4: 'danger' }

export default {
  name: 'SelfThirdPartyBalanceLogDialog',
  data () {
    return {
      visible: false,
      loading: false,
      SELF_BALANCE_LOG_TYPE,
      form: {
        pageNum: 1,
        pageSize: 10,
        userThirdPartyId: '',
        type: '',
        timeRange: []
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    parseTime,
    fmtMoney (v) {
      return Number(v || 0).toFixed(2)
    },
    tagType (type) {
      return TAG_MAP[type] || 'info'
    },
    show (row) {
      this.visible = true
      this.form = {
        pageNum: 1,
        pageSize: 10,
        userThirdPartyId: row.id,
        type: '',
        timeRange: []
      }
      this.reload()
    },
    reload () {
      this.loading = true
      const params = {
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize,
        userThirdPartyId: this.form.userThirdPartyId,
        type: this.form.type
      }
      if (this.form.timeRange && this.form.timeRange.length === 2) {
        params.tradeTimeStart = this.form.timeRange[0]
        params.tradeTimeEnd = this.form.timeRange[1]
      }
      getThirdPartyBalanceLog(params)
        .then(res => {
          const data = res.data || {}
          this.tableData = data.records || []
          this.total = data.total || 0
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>