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')" />
    <uni-loading v-if="loading" />
    <view v-else 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="false" :showPagination="true" :showSummary="true" :immediate="false"
        :summaryMethod="getSummaries">
      </cwg-tabel>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
// 报告
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
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'

const { numberFormat } = useFilters()
const { t } = useI18n()
const { columnList, mobileList, platformOptions, customTypeList, groupCurrency1, groupTypeName } = useReportConst()
let { Code } = Config
const { userInfo } = useUserStore()
const tableRef = ref(null)
const loading = ref(false)

const typeList = computed(() => [
  { 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 = computed(() => [
  { 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 = computed(() => [
  { text: t('State.All'), value: 0 },
  { text: t('Ib.Report.item1'), value: 1 },
  { text: t('Ib.Report.item2'), value: 2 },
])

const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const defaultDateRange = [`${year}-${month}-01`, `${year}-${month}-${day}`]

const searchParams = ref<any>({
  reportType: 1,
  detail_type: null,
  customType: 0,
  platform: 'MT4',
  agentId: '',
  login: '',
  cId: '',
  isShort: 0,
  date: defaultDateRange,
})

const filterFields = ref([])

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

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

const agentLevels = ref<Array<{ key: string, options: any[] }>>([
  {
    key: 'agentId_0',
    options: [
      { value: 0, text: t('news_add_field.IbReport.ALL') },
      { value: -1, text: t('news_add_field.IbReport.DirectlyUnder') },
    ],
  },
])

const handleAgentChange = async (val: any, levelIndex: number) => {
  console.log(val, 'change1`')
  // 截断当前层级之后的所有层级
  agentLevels.value.splice(levelIndex + 1)

  // 清理 searchParams 中被移除层级的值
  for (let key in searchParams.value) {
    if (key.startsWith('agentId_')) {
      const idx = parseInt(key.split('_')[1])
      if (idx > levelIndex) {
        delete searchParams.value[key]
      }
    }
  }
  handleSearch(searchParams.value)
  if (val === 0 || val === -1 || val === '') {
    return
  }

  try {
    const res = await ibApi.ibTree({ pid: val })
    if (res.code === Code.StatusOK && res.data && res.data.length > 0) {
      const nextOptions = []
      res.data.forEach((item: any) => {
        if (item.ibNo) {
          nextOptions.push({
            value: item.id,
            text: item.name ? `${item.ibNo} - ${item.name}` : item.ibNo,
          })
        }
      })
      if (nextOptions.length > 0) {
        agentLevels.value.push({
          key: `agentId_${levelIndex + 1}`,
          options: nextOptions,
        })
      }
    }
    setFields()

  } catch (error) {
    uni.showToast({ title: 'Error', icon: 'none' })
  }
}

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 handleSearch = (params: any) => {
  const payload: any = { ...params }

  let finalAgentId = payload.agentId_0
  for (let i = agentLevels.value.length - 1; i >= 0; i--) {
    const val = payload[`agentId_${i}`]
    if (val !== undefined && val !== '') {
      finalAgentId = val
      break
    }
  }
  payload.agentId = finalAgentId
  if (payload.date?.length) {
    payload.startDate = payload.date[0]
    payload.endDate = payload.date[1]
  }

  const type = Number(payload.reportType)
  if (![1, 3, 4, 7, 24].includes(type)) payload.platform = ''
  if (![1, 2, 3, 4, 7].includes(type)) payload.login = ''
  if (type !== 7) payload.cId = ''
  if (![3, 7].includes(type)) payload.isShort = 0
  if (type !== 3) payload.detail_type = null
  if (type !== 24) payload.customType = 0

  search.value = {
    reportType: payload.reportType,
    detail_type: payload.detail_type,
    customType: payload.customType,
    platform: payload.platform,
    startDate: payload.startDate,
    endDate: payload.endDate,
    date: payload.date,
    agentId: payload.agentId,
    login: payload.login,
    cId: payload.cId,
    isShort: payload.isShort,
  }
  nextTick(() => {
    tableRef.value?.refreshTable?.()
  })
}

const handleReset = (emptyParams: any) => {
  // 重置时清理级联菜单到只有第一层
  agentLevels.value.splice(1)
  handleSearch(emptyParams)
}

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

  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,
            text: item.name ? `${item.ibNo} - ${item.name}` : item.ibNo,
          }
          agentLevels.value[0].options.push(option)
        }
      })
    } else {
      uni.showToast({
        title: res.msg, icon: 'none',
      })
    }
  }
}

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

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

// 接口 根据types 切换（动态代理不同类型报表API）
const listApi = computed(() => {
  return async (params: any) => {
    let apiFn = ibApi.tradeDw
    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)
    }
  }
})

watch(() => searchParams.value.reportType, (val) => {
  const type = Number(val)
  search.value.reportType = type
  if (type === 24) {
    searchParams.value.customType = 0
    searchParams.value.detail_type = null
    search.value.customType = 0
    search.value.detail_type = null
  } else if (type === 3) {
    if (searchParams.value.detail_type == null) searchParams.value.detail_type = 1
    if (search.value.detail_type == null) search.value.detail_type = 1
  } else {
    searchParams.value.detail_type = null
    search.value.detail_type = null
    searchParams.value.customType = 0
    search.value.customType = 0
  }
}, { immediate: true })

watch(() => searchParams.value.detail_type, (val) => {
  search.value.detail_type = val == null ? null : Number(val)
})

watch(() => searchParams.value.platform, (val) => {
  search.value.platform = val
})

watch(() => searchParams.value.customType, (val) => {
  search.value.customType = val
})

watch(() => searchParams.value.isShort, (val) => {
  search.value.isShort = val
})

onMounted(async () => {
  loading.value = true
  await initIbTree()
  setFields()
  loading.value = false
})
const setFields = () => {
  const type = Number(searchParams.value.reportType ?? 1)
  const fields: any[] = [
    {
      key: 'reportType',
      type: 'select',
      label: t('Home.page_ib.item3'),
      placeholder: t('placeholder.choose'),
      options: typeList.value,
      defaultValue: 1,
      isSelect: true,
    },
  ]

  if (type === 3) {
    fields.push({
      key: 'detail_type',
      type: 'select',
      label: t('placeholder.choose'),
      placeholder: t('placeholder.choose'),
      options: detailTypeList.value,
      defaultValue: 1,
      isSelect: true,
    })
  }

  if ([1, 3, 4, 7, 24].includes(type)) {
    fields.push({
      key: 'platform',
      type: 'select',
      label: t('Label.Platform'),
      placeholder: t('placeholder.choose'),
      options: platformOptions,
      defaultValue: 'MT4',
    })
  }

  if (type === 24) {
    fields.push({
      key: 'customType',
      type: 'select',
      label: t('placeholder.choose'),
      placeholder: t('placeholder.choose'),
      options: customTypeList.value,
      defaultValue: 0,
      isSelect: true,
    })
  }

  console.log(agentLevels.value)
  agentLevels.value.forEach((level, index) => {
    fields.push({
      key: level.key,
      type: 'select',
      label: t('State.All'),
      options: level.options,
      placeholder: t('State.All'),
      onChange: (val: any) => handleAgentChange(val, index),
      defaultValue: index === 0 ? 0 : '',
    })
  })

  if ([1, 2, 3, 4, 7].includes(type)) {
    fields.push({
      key: 'login',
      type: 'input',
      label: t('Label.TradingAccount'),
      placeholder: t('Label.TradingAccount'),
      defaultValue: '',
    })
  }

  if (type === 7) {
    fields.push({ key: 'cId', type: 'input', label: 'CID', placeholder: 'CID', defaultValue: '' })
  }

  if ([3, 7].includes(type)) {
    fields.push({
      key: 'isShort',
      type: 'select',
      label: t('placeholder.choose'),
      placeholder: t('placeholder.choose'),
      options: isShortList.value,
      defaultValue: 0,
      isSelect: true,
    })
  }

  fields.push({ key: 'date', label: t('placeholder.Start') + ' - ' + t('placeholder.End'), type: 'daterange' })
  filterFields.value = fields
}

</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;
}
</style>