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

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

    <view class="account-content">
      <view class="search-content">
        <view class="search-bar">
          <cwg-combox v-model:value="search.reportType" :options="typeList"
                      :placeholder="t('placeholder.choose')" />
          <cwg-combox v-if="search.reportType == 3" v-model:value="search.detail_type" :options="detailTypeList"
                      :placeholder="t('placeholder.choose')" />
          <view v-if="[1,3,4,7,24].includes(search.reportType)" class="report-platform">
            <view
              v-for="(item,index) in platformOptions"
              :key="index"
              class="checklist-box"
              :class="{
                'active': item.value === search.platform,
              }"
              @click="changePlatformType(item.value)"
            >
              {{ item.text }}
            </view>
          </view>
          <cwg-combox v-if="search.reportType == 24" v-model:value="search.customType" :options="customTypeList"
                      :placeholder="t('placeholder.choose')" />

          <uni-data-picker class="agent-select" v-model="search.agentId" :localdata="agentIdOpts"
                           :popup-title="t('State.All')" @change="handleItemChange" @nodeclick="onnodeclick"
                           :map="{value:'value',text:'label'}"></uni-data-picker>

          <view class="search-input-box">
            <uni-easyinput v-if="['1', '2', '3', '4', '7'].includes(String(search.reportType))"
                           v-model.trim="search.login" :placeholder="t('Label.TradingAccount')" />
          </view>

          <view class="search-input-box" v-if="search.reportType == 7">
            <uni-easyinput v-model.trim="search.cId" placeholder="CID" />
          </view>

          <cwg-combox v-if="search.reportType == 3 || search.reportType == 7" v-model:value="search.isShort"
                      :options="isShortList" :placeholder="t('placeholder.choose')" />

          <uni-datetime-picker type="daterange" v-model="search.date"
                               :placeholder="t('placeholder.Start') + ' - ' + t('placeholder.End')"
                               @change="handleDateChange" />
          <button class="search-btn" @click="toSearch">{{ t('Ib.Report.Btn') }}</button>
        </view>
        <view>

        </view>
      </view>

      <cwg-tabel
        ref="tableRef"
        :columns="columns"
        :mobilePrimaryFields="mobilePrimaryFields"
        :queryParams="search"
        :api="listApi"
        :show-operation="false"
        :showPagination="true"
        :showSummary="true"
        :summaryMethod="getSummaries"
      >
      </cwg-tabel>
    </view>
  </cwg-page-wrapper>
</template>

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

  const { numberFormat } = useFilters()
  const { t, locale } = useI18n()
  const lang = locale.value
  let { Code } = Config
  const { userInfo } = useUserStore()
  const tableRef = ref(null)

  const typeList = ref([
    { text: t('Ib.Report.Title1'), value: 1 },
    { text: t('Ib.Report.Title2'), value: 2 },
    { text: t('Ib.Report.Title3'), value: 3 },
    { text: t('Ib.Report.Title6'), value: 4 },
    { text: t('Ib.Report.Title5'), value: 5 },
    { text: t('news_add_field.IbReport.Title6'), value: 6 },
    { text: t('Ib.Report.Title7'), value: 7 },
    { text: t('Ib.Report.Title8'), value: 24 },
  ])

  const detailTypeList = ref([
    { text: t('Ib.Report.Tit1'), value: 1 },
    { text: t('Ib.Report.Tit2'), value: 2 },
    { text: t('Ib.Report.Tit3'), value: 3 },
    { text: t('Ib.Report.Tit4'), value: 4 },
  ])

  const isShortList = ref([
    { text: t('State.All'), value: 0 },
    { text: t('Ib.Report.item1'), value: 1 },
    { text: t('Ib.Report.item2'), value: 2 },
  ])

  const search = ref({
    reportType: 1,
    detail_type: null as number | null,
    customType: 0,
    platform: 'MT4',
    date: [] as string[],
    startDate: '',
    endDate: '',
    agentId: '',
    login: '',
    cId: '',
    isShort: 0,
  })

  const country = computed(() => {
    return userInfo.customInfo.country
  })

  const agentIdOpts = ref<any[]>([
    { value: 0, label: t('news_add_field.IbReport.ALL'), children: [] },
    {
      value: -1,
      label: t('news_add_field.IbReport.DirectlyUnder'),
      children: [],
    },
  ])
  const toSearch = () => {
    tableRef.value?.refreshTable()
  }

  const handleItemChange = (e: any) => {
  }

  const getSummaries = (param: any) => {
    const { columns, summaryData } = param
    const sums: string[] = []
    if (!summaryData || Object.keys(summaryData).length === 0) return sums

    columns.forEach((column: any, index: number) => {
      if (index === 0) {
        sums[index] = t("Label.Total")
        return
      }

      const type = search.value.reportType
      const detailType = search.value.detail_type

      // 根据不同的列 prop 进行合计数据显示和格式化
      const prop = column.prop
      if (!prop) {
        sums[index] = ""
        return
      }

      if (type == 1) {
        if (['deposit', 'withdrawal', 'credit'].includes(prop)) {
          sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
        } else {
          sums[index] = ""
        }
      } else if (type == 2) {
        if (['volume', 'rebateAmount', 'commissionAmount'].includes(prop)) {
          sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
        } else {
          sums[index] = ""
        }
      } else if (type == 3) {
        if (detailType == 4) {
          if (['volume', 'storage', 'taxes', 'profit'].includes(prop)) {
            sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
          } else {
            sums[index] = ""
          }
        } else {
          if (['commission', 'volume', 'storage', 'taxes', 'profit', 'totalProfit'].includes(prop)) {
            sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
          } else {
            sums[index] = ""
          }
        }
      } else if (type == 4) {
        if (['credit', 'balance', 'equity', 'floating'].includes(prop)) {
          sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
        } else {
          sums[index] = ""
        }
      } else if (type == 6) {
        if (prop === 'amount') {
          sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
        } else {
          sums[index] = ""
        }
      } else if (type == 7) {
        if (['fxVolume', 'cfdVolume', 'indexVolume', 'metalVolume'].includes(prop)) {
          sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) : "0"
        } else {
          sums[index] = ""
        }
      } else if (type == 24) {
        if (prop === 'volume') {
          sums[index] = summaryData[prop] ? numberFormat(summaryData[prop]) + " /手" : "0"
        } else if (prop === 'rebate') {
          sums[index] = summaryData[prop] ? "$" + numberFormat(summaryData[prop]) : "0"
        } else {
          sums[index] = ""
        }
      } else {
        sums[index] = ""
      }
    })

    return sums
  }
  const initIbTree = async () => {
    const res = await ibApi.ibTree({ pid: val })

    if (res.code === Code.StatusOK) {
      if (res.data && res.data.length > 0) {
        res.data.forEach((item: any) => {
          if (item.ibNo) {
            let option = {
              value: item.id,
              label: item.name ? `${item.ibNo} - ${item.name}` : item.ibNo,
              name: item.name,
              children: [],
            }
            agentIdOpts.value.push(option)
          }
        })
      } else {
        uni.showToast({
          title: res.msg, icon: 'none',
        })
      }

    }
  }

  const onnodeclick = async (node: any) => {
    const val = node.value

    if (node.children && node.children.length > 0) {
      return
    }

    try {
      // uni.showLoading({ title: t('Msg.Loading') || 'Loading...', mask: true })
      const res = await ibApi.ibTree({ pid: val })

      if (res.code === Code.StatusOK) {
        if (res.data && res.data.length > 0) {
          const newChildren: any[] = []
          res.data.forEach((item: any) => {
            if (item.ibNo) {
              newChildren.push({
                value: item.id,
                label: item.name ? `${item.ibNo} - ${item.name}` : item.ibNo,
                name: item.name,
                children: [],
              })
            }
          })
          node.children = newChildren
        } else {
          delete node.children
        }
      } else {
        uni.showToast({
          title: res.msg || 'Error',
          icon: 'none',
        })
      }
    } catch (error) {
      uni.showToast({ title: 'Error', icon: 'none' })
    } finally {
      // uni.hideLoading()
    }
  }

  // 表格列配置 根据types 切换
  const columns = computed(() => {
    if (search.value.reportType === 3) {
      return columnList[`3_${search.value.detail_type}` as keyof typeof columnList] || []
    }
    return columnList[search.value.reportType as keyof typeof columnList] || []
  })

  const mobilePrimaryFields = computed(() => {
    let list: any[] = []
    if (search.value.reportType === 3) {
      list = mobileList[`3_${search.value.detail_type}` as keyof typeof mobileList] || []
    } else {
      list = mobileList[search.value.reportType as keyof typeof mobileList] || []
    }
    return [
      ...list,
      {
        prop: 'more',
        type: 'more',
        width: 20,
        align: 'right',
      },
    ]
  })

  // 接口 根据types 切换（动态代理不同类型报表API）
  const listApi = computed(() => {
    return async (params: any) => {
      let apiFn: any
      const type = search.value.reportType
      const detailType = search.value.detail_type

      if (type == 1) apiFn = ibApi.tradeDw
      else if (type == 2) apiFn = ibApi.tradeAgentCommission
      else if (type == 3) {
        if (detailType == 1) apiFn = ibApi.tradeHistory
        else if (detailType == 2) apiFn = ibApi.tradePendingHistory
        else if (detailType == 3) apiFn = ibApi.tradePending
        else if (detailType == 4) apiFn = ibApi.tradePosition
      } else if (type == 4) apiFn = ibApi.tradeAccount
      else if (type == 5) apiFn = ibApi.tradeIb
      else if (type == 6) apiFn = ibApi.ibReportBalance
      else if (type == 7) apiFn = ibApi.tradeSymbolCategory
      else if (type == 24) apiFn = ibApi.tradeSalesHidden

      if (apiFn) {
        if (type == 2) {
          const isVietnam = country.value === 'VN' // 这里需要你实际的取国家逻辑
          return await apiFn(params, isVietnam)
        }
        return await apiFn(params)
      }
      return Promise.reject('No API found')
    }
  })

  const handleDateChange = (val: any) => {
    if (val && val.length === 2) {
      search.value.startDate = val[0]
      search.value.endDate = val[1]
    } else {
      search.value.startDate = ''
      search.value.endDate = ''
    }
  }

  const changePlatformType = (type: string) => {
    search.value.platform = type
  }

  const groupCurrency1 = (type: string) => {
    if (type == 'GBP') return '£'
    if (type == 'USD') return '$'
    if (type == 'EUR') return '€'
    if (type == 'USC') return '￠'
    return '$'
  }

  const groupTypeName = (type: string | number) => {
    if (type == '1') return t('AccountType.ClassicAccount')
    if (type == '2') return t('AccountType.SeniorAccount')
    if (type == '3') return isAfterJuly28() ? '--' : t('AccountType.AgencyAccount')
    if (type == '5') return t('AccountType.SpeedAccount')
    if (type == '6') return t('AccountType.SpeedAccount')
    if (type == '7') return t('AccountType.StandardAccount')
    if (type == '8') return t('AccountType.CentAccount')
    return '--'
  }

  watch(() => search.value.reportType, (val) => {
    if (val == 24) {
      search.value.customType = 0
      search.value.detail_type = null
    } else if (val == 3) {
      search.value.detail_type = 1
    } else {
      search.value.detail_type = null
    }
  })

  onMounted(() => {
    initIbTree()

    // 默认当月时间
    const now = new Date()
    const year = now.getFullYear()
    let month: string | number = now.getMonth() + 1
    if (month < 10) month = '0' + month
    const day = now.getDate()
    let dayStr = day < 10 ? '0' + day : day.toString()
    search.value.date = [`${year}-${month}-01`, `${year}-${month}-${dayStr}`]
    search.value.startDate = search.value.date[0]
    search.value.endDate = search.value.date[1]

  })
</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: #fff;
    }
  }

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

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