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

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Home.page_ib.item11')" />

    <view class="account-content">
      <view class="search-content">
        <view class="search-bar">
          <cwg-complex-search :fields="filterFields" v-model="searchParams" @search="handleSearch" @reset="handleReset" />
        </view>
      </view>
      <cwg-tabel
        ref="tableRef"
        :columns="columns"
        :mobilePrimaryFields="mobilePrimaryFields"
        :queryParams="search"
        :api="listApi"
        :show-operation="true"
        :showPagination="true"
        :showSummary="true"
        @sort-change="handleSortChange"
      >
        <template #action="{ row }">
          <cwg-dropdown :menu-list="menuList(row)" @menuClick="handleMenuClick">
            <view class="pc-header-btn">
              <cwg-icon name="crm-ellipsis" :size="24" />
            </view>
          </cwg-dropdown>
        </template>
      </cwg-tabel>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
  // 账户管理
  import { ref, nextTick, computed, reactive } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ibApi } from '@/service/ib'
  import { useFilters } from '@/composables/useFilters'

  const { numberDecimal } = useFilters()
  const { t } = useI18n()

  const searchParams = ref({})
  const search = reactive({
    cId: '',
    customName: '',
    login: '',
    groupType: 0,
    platform: null,
    date: null
  })

  const listApi = ref(ibApi.ComplexReport)
  const tableRef = ref<any>(null)
  const platformOptions = [
    { text: 'MT4', value: 'MT4' },
    { text: 'MT5', value: 'MT5' },
  ]

  const filterFields = computed(() => [
    { key: 'platform', type: 'select', label: t('Label.Platform'), placeholder: t('placeholder.choose'), options: platformOptions,defaultValue: null, clearable: true },
    { key: 'cId', type: 'input', label: t('Label.CidAccount'), placeholder: t('Label.CidAccount'), defaultValue: '' },
    { key: 'customName', type: 'input', label: t('Documentary.Report.item19'), placeholder: t('Documentary.Report.item19'), defaultValue: '' },
    { key: 'login', type: 'input', label: t('Label.TradingAccount'), placeholder: t('Label.TradingAccount'), defaultValue: '' },
    { 
      key: 'groupType', 
      type: 'select', 
      label: t('Documentary.Report.item20'),
      placeholder: t('Documentary.Report.item20'),
      options: [
        { text: t('State.All'), value: 0 },
        { text: t('AccountType.SeniorAccount'), value: 2 },
        // { text: t('AccountType.NewSpeedAccount'), value: 6 },
        { text: t('AccountType.StandardAccount'), value: 7 },
        { text: t('AccountType.CentAccount'), value: 8 },
        { text: t('AccountType.CommissionAccount'), value: -1 },
      ],
      defaultValue: 0,
      clearable: true
    },
    { key: 'date', label: t('placeholder.Start') + ' - ' + t('placeholder.End'), type: 'daterange' },
  ])
  // 表格列配置
  const columns = computed(() => [
    {
      prop: 'cId',
      label: t('Label.CidAccount'),
      align: 'center',
    },
    {
      prop: 'customName',
      label: t('Documentary.Report.item19'),
      align: 'center',
      formatter: ({ row }: any) => row.customName || '--',
    },
    {
      prop: 'login',
      label: t('Label.TradingAccount'),
      align: 'center',
      formatter: ({ row }: any) => row.login || '--',
    },
    {
      prop: 'groupType',
      type: 'tag',
      label: t('Documentary.Report.item20'),
      align: 'center',
      width: 110,
      tagMap: {
        1: t('AccountType.ClassicAccount'),
        2: t('AccountType.SeniorAccount'),
        5: t('AccountType.SpeedAccount'),
        6: t('AccountType.NewSpeedAccount'),
        7: t('AccountType.StandardAccount'),
        8: t('AccountType.CentAccount'),
        '-1': t('AccountType.CommissionAccount'),
      },
    },
    // {
    //   prop: 'ibNo',
    //   label: t('Label.AgentNumber'),
    //   align: 'center',
    //   formatter: ({ row }: any) => row.ibNo || '--',
    // },
    // {
    //   prop: 'salesNo',
    //   label: t('Label.Encode'),
    //   align: 'center',
    //   formatter: ({ row }: any) => row.salesNo || '--',
    // },
    // {
    //   prop: 'salesName',
    //   label: '销售姓名',
    //   align: 'center',
    //   formatter: ({ row }: any) => row.salesName || '--',
    // },
    {
      prop: 'deposit',
      label: t('Documentary.Report.item21'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.deposit ? numberDecimal(row.deposit) : '0.00',
    },
    {
      prop: 'withdrawal',
      label: t('Documentary.Report.item22'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.withdrawal ? numberDecimal(row.withdrawal) : '0.00',
    },
    {
      prop: 'netDeposit',
      label: t('Documentary.Report.item23'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.netDeposit ? numberDecimal(row.netDeposit) : '0.00',
    },
    {
      prop: 'volume',
      label: t('Documentary.Report.item24'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.volume ? numberDecimal(row.volume) : '0.00',
    },
    {
      prop: 'sumRebate',
      label: t('Documentary.Report.item25'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.sumRebate ? numberDecimal(row.sumRebate) : '0.00',
    },
    {
      prop: 'storage',
      label: t('Documentary.Report.item26'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.storage ? numberDecimal(row.storage) : '0.00',
    },
    {
      prop: 'balance',
      label: t('Label.Balance'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.balance != null && row.balance !== '' ? numberDecimal(row.balance) : '--',
    },
    {
      prop: 'equity',
      label: t('Label.equity'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.equity != null && row.equity !== '' ? numberDecimal(row.equity) : '--',
    },
    {
      prop: 'profit',
      label: t('Documentary.tradingCenter.item128'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.profit ? numberDecimal(row.profit) : '0.00',
    },
    {
      prop: 'marginLevel',
      label: t('Label.MarginLevel'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.marginLevel || '--',
    },
    {
      prop: 'credit',
      label: t('Label.Credit'),
      align: 'center',
      sortable: 'custom',
      formatter: ({ row }: any) => row.credit != null && row.credit !== '' ? numberDecimal(row.credit) : '--',
    },
    {
      prop: 'regDate',
      label: t('Label.RegDate'),
      align: 'center',
      formatter: ({ row }: any) => row.regDate || '--',
    },
  ])

  const mobilePrimaryFields = computed(()=>[
    {
      prop: 'cId',
      label: t('Label.CidAccount'),
      align: 'center',
    },
    {
      prop: 'customName',
      label: t('Documentary.Report.item19'),
      align: 'center',
      formatter: ({ row }: any) => row.customName || '--',
    },
    {
      prop: 'login',
      label: t('Label.TradingAccount'),
      align: 'center',
      formatter: ({ row }: any) => row.login || '--',
    },
    {
      prop: 'more',
      type: 'more',
      width: 20,
      align: 'right',
    },
  ])



  const handleSearch = (params: any) => {
    Object.assign(search, params)
    nextTick(() => {
      tableRef.value?.refreshTable?.()
    })
  }

  const handleReset = (params: any) => {
    Object.assign(search, {
      ...params,
      platform: null,
      groupType: 0,
    })
    nextTick(() => {
      tableRef.value?.refreshTable?.()
    })
  }

  const handleSortChange = (params: any) => {
    Object.assign(search, {
      orderColumn: params.prop,
      orderType: params.order,
    })
    nextTick(() => {
      tableRef.value?.refreshTable?.()
    })
  }

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

  .search-content {
    display: flex;
    justify-content: space-between;
  }
</style>