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

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

    <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"
      >
        <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,reactive, nextTick,computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ibApi } from '@/service/ib'
  import { useFilters } from '@/composables/useFilters'

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

  const searchParams = ref({})
  const search = reactive({
    cId: '',
    login: '',
    platform: 'MT4',
    startDate: '',
    endDate: '',
  })

  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: 'MT4', isSelect: true },
    { key: 'login', type: 'input', label: t('Label.Login'), placeholder: t('Label.Login'), defaultValue: '' },
    { key: 'cId', type: 'input', label: 'CID', placeholder: 'CID', defaultValue: '' },
    { key: 'date', label: t('placeholder.Start') + ' - ' + t('placeholder.End'), type: 'daterange' },
  ])

  const tableRef = ref<any>(null)

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

  const handleReset = (params: any) => {
    Object.assign(search, params,{platform: 'MT4'})
    nextTick(() => {
      tableRef.value?.refreshTable?.()
    })
  }
  // 表格列配置
  const columns = computed(()=>[
    {
      prop: 'login',
      label: t('Label.Login'),
      align: 'center',
    },
    {
      prop: 'name',
      label: t('Ib.Custom.NameLabel'),
      align: 'center',
    },
    {
      prop: 'platform',
      label: t('Label.Platform'),
      align: 'center',
    },
    {
      prop: 'groupName',
      label: t('Label.GroupName'),
      align: 'center',
    },
    {
      prop: 'type',
      type: 'tag',
      label: t('Label.LoginType'),
      align: 'center',
      tagMap: {
        1: t('AccountType.ClassicAccount'),
        2: t('AccountType.SeniorAccount'),
        5: t('AccountType.SpeedAccount'),
        6: t('AccountType.SpeedAccount'),
        7: t('AccountType.StandardAccount'),
        8: t('AccountType.CentAccount'),
      },
    },
    {
      prop: 'Leverage',
      label: t('Label.Leverage'),
      align: 'center',
      formatter: ({ row }) => row.leverage ? `1:${row.leverage}` : '--',
    },
    {
      prop: 'currency',
      label: t('Label.Currency'),
      align: 'center',
    },
    {
      prop: 'balance',
      label: t('Label.LoginBalance'),
      align: 'center',
      formatter: ({ row }) => numberFormat(row.balance ?? 0),
    },
    {
      prop: 'countryEnName',
      label: t('Label.Country'),
      align: 'center',
    },
    {
      prop: 'registration',
      label: t('Label.ApplyTime'),
      align: 'center',
    },
  ])

  const mobilePrimaryFields = computed(()=>[
    {
      prop: 'login',
      label: t('Label.Login'),
      align: 'center',
    },
    {
      prop: 'name',
      label: t('Ib.Custom.NameLabel'),
      align: 'center',
    },
    {
      prop: 'platform',
      label: t('Label.Platform'),
      align: 'center',
    },
    {
      prop: 'more',
      type: 'more',
      width: 20,
      align: 'right',
    },
  ])


  const listApi = ref(ibApi.accountSubs)
</script>
<style lang="scss" scoped>
  @import "@/uni.scss";

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