gypsy-crm-frontend-vu/pages/ib/reportInfo.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('vu.IbReport.title1')" />
    <view class="account-content">
      <cwg-tabel ref="tableRef" :columns="columns" :mobilePrimaryFields="mobilePrimaryFields" :queryParams="search"
                 :api="listApi" :show-operation="false" :showPagination="true" :immediate="false"
      >
      </cwg-tabel>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
  // 报告
  import { ref, computed, onMounted, watch, nextTick, reactive } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { onLoad } from '@dcloudio/uni-app'
  import Config from '@/config/index'
  import { ibApi } from '@/service/ib'
  import { useReportConst } from '@/pages/ib/const/report'
  import { useFilters } from '@/composables/useFilters'
  import { isAfterJuly28 } from '@/utils/dateUtils'
  import useUserStore from '@/stores/use-user-store'
  import dayjs from 'dayjs'

  const { numberFormat } = useFilters()
  const { t } = useI18n()
  const { groupCurrency1 } = useReportConst()

  const tableRef = ref(null)

  const search = reactive({
    login: '',
  })


  // 表格列配置 根据types 切换
  const columns = computed(() => {
    return [
      { prop: 'ibNo', label: t('Label.AttributionNumber') },
      { prop: 'login', label: t('Label.TradingAccount') },
      {
        prop: 'groupType', label: t('Label.Type'),
        type: 'tag',
        tagMap: {
          1: t('AccountType.ClassicAccount'),
          2: t('AccountType.SeniorAccount'),
          3: !isAfterJuly28() ? t('AccountType.AgencyAccount') : '',
          4: t('AccountType.ProfessionalAccount'),
          5: t('AccountType.SpeedAccount'),
          6: t('AccountType.SpeedAccount'),
          7: t('AccountType.StandardAccount'),
          8: t('AccountType.CentAccount'),
        },
      },
      { prop: 'symbol', label: t('Label.Varieties') },
      {
        prop: 'volume', label: t('Label.Volume'),
        formatter: ({ row }) => {
          return `${numberFormat(row.volume ?? '0')}/${t('Label.Lot')}`
        },
      },
      {
        prop: 'rebateAmount', label: t('Label.rebateAmount'),
        formatter: ({ row }) => {
          return `${groupCurrency1(row.currency)}${numberFormat(row.rebateAmount ?? '0')}`
        },
      },
      {
        prop: 'rebatePoint', label: t('Label.rebatePoint'),
        formatter: ({ row }) => {
          return `${groupCurrency1(row.currency)}${numberFormat(row.rebatePoint ?? '0')}/${t('Label.Lot')}`
        },
      },
      {
        prop: 'commissionAmount', label: t('Label.commissionAmount'),
        formatter: ({ row }) => {
          return `${groupCurrency1(row.currency)}${numberFormat(row.commissionAmount ?? '0')}`
        },
      },
      {
        prop: 'commissionPoint', label: t('Label.commissionPoint'),
        formatter: ({ row }) => {
          return `${groupCurrency1(row.currency)}${numberFormat(row.commissionPoint ?? '0')}/${t('Label.Lot')}`
        },
      },
      { prop: 'openTime', label: t('Label.OpenTime') },
      { prop: 'closeTime', label: t('Label.CloseTime') },
    ]
  })

  const mobilePrimaryFields = computed(() => {
    return [
      { prop: 'ibNo', label: t('Label.AttributionNumber') },
      { prop: 'login', label: t('Label.TradingAccount') },
      {
        prop: 'groupType', label: t('Label.Type'),
        type: 'tag',
        tagMap: {
          1: t('AccountType.ClassicAccount'),
          2: t('AccountType.SeniorAccount'),
          3: !isAfterJuly28() ? t('AccountType.AgencyAccount') : '',
          4: t('AccountType.ProfessionalAccount'),
          5: t('AccountType.SpeedAccount'),
          6: t('AccountType.SpeedAccount'),
          7: t('AccountType.StandardAccount'),
          8: t('AccountType.CentAccount'),
        },
      },
      {
        prop: 'more',
        type: 'more',
        width: 20,
        align: 'center',
      },
    ]
  })

  const listApi = ibApi.tradeAgentCommission


  onLoad((options) => {
    console.log(options)
    search.login = options.login
    search.date = [
      options.closeTime,
      options.closeTime,
    ]
    nextTick(() => {
      tableRef.value?.loadData()
    })
  })

</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .search-content {
    display: flex;
    justify-content: space-between;
  }

  .report-platform {
    display: flex;
    align-items: center;

    .checklist-box {
      cursor: pointer;
      box-sizing: border-box;
      padding: 0 px2rpx(20);
      border: 1px solid #DCDFE6;
      background-color: #f5f5f5;
      height: px2rpx(35);
      line-height: px2rpx(35);
      border-radius: px2rpx(4) 0 0 px2rpx(4);

      &:last-child {
        border-radius: 0 px2rpx(4) px2rpx(4) 0;
      }

      &.active {
        color: var(--color-white);
        background-color: var(--color-error);
        border-color: var(--color-error);
      }
    }
  }

  .search-input-box {
    .uni-input {
      height: px2rpx(35);
      border: 1px solid #DCDFE6;
      padding: 0 px2rpx(20);
      border-radius: px2rpx(4);
      background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    }
  }

  .agent-select {
    width: px2rpx(240);
  }

  .search-btn {
    height: px2rpx(36);
    line-height: px2rpx(36);
    margin: 0;
  }

  .btn {
    font-size: px2rpx(10);
    padding: px2rpx(4) px2rpx(8);
  }
</style>