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

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Documentary.console.item23')" />

    <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
        class="table-container"
        ref="tableRef"
        :columns="columns"
        :mobilePrimaryFields="mobilePrimaryFields"
        :queryParams="search"
        :api="listApi"
        :show-operation="true"
        :showPagination="true"
      >
      </cwg-tabel>
    </view>

    <!-- 专属手续费分配/展示设置确认弹窗 -->
    <cwg-popup
      :visible="dialogInfoTradingAddTc"
      :title="t('Ib.Custom.Btn')"
      :cancelText="t('Btn.Cancel')"
      :confirmText="t('Btn.Confirm')"
      @close="dialogInfoTradingAddCanle"
      @confirm="dialogInfoTradingAddOpen"
    >
      <view class="dia-content custom-dialog-content">
        <view class="desc-text">
          <view class="desc-p">{{ t('news_add_field1.CustomerManagement.item1') }}</view>
          <view class="desc-p">{{ t('news_add_field1.CustomerManagement.item2') }}</view>
        </view>
        
        <view class="agree-box">
          <checkbox-group @change="onAgreeChange">
            <label class="agree-label">
              <checkbox :value="1" :checked="dialogInfoTradingAddTcAgree" color="#2b5aed" style="transform:scale(0.8)" />
              <view class="agree-des">
                <text>{{ t('news_add_field1.CustomerManagement.item3') }}</text>
              </view>
            </label>
          </checkbox-group>
        </view>
      </view>
    </cwg-popup>

  </cwg-page-wrapper>
</template>

<script setup lang="ts">
  // 信号源管理
  import { ref, reactive, computed, onMounted, onUnmounted,nextTick } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
  import Config from '@/config/index'
  import { lang } from '@/composables/config'
  import { ibApi } from '@/service/ib'
  import { useFilters } from '@/composables/useFilters'

  const { numberFormat, numberDecimal } = useFilters()

  const searchParams = ref({})
  const search = ref({
    name:''
  })

  const filterFields = computed(() => [
    { key: 'name', type: 'input', label: t('Ib.Custom.NameLabel'), placeholder: t('Ib.Custom.NameLabel'), defaultValue: '' },
  ])
  const tableRef = ref<any>(null)

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

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

  const formInfo = ref({})
  const dialogInfoTradingAddTc = ref(false)
  const dialogInfoTradingAddTcAgree = ref(false)
  const dialogInfoTradingAdd = ref(false)
  const { t, locale } = useI18n()
  // 表格列配置
  const columns = ref([
    {
      prop: 'dealCId',
      label: t('Label.CidAccount'),
      align: 'center',
    },
    {
      prop: 'pIbNo',
      label: t('Label.AgentNumber'),
      align: 'center',
    },
    {
      prop: 'nickname',
      label: t('Documentary.console.item20'),
      align: 'center',
    },
    {
      prop: 'dealLogin',
      label: t('Documentary.tradingCenter.item18'),
      align: 'center',
    },
    {
      prop: 'dealPlatform',
      label: t('Label.Platform'),
      align: 'center',
    },
    {
      prop: 'dealLeverage',
      label: t('Label.Leverage'),
      align: 'center',
    },
    {
      prop: 'dealLoginType',
      type: 'tag',
      label: t('Label.AccountType'),
      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: 'distributionType',
      label: t('Documentary.AgentBackground.item11'),
      align: 'center',
      formatter: ({ row }) => row.distributionType === 1 ? t('Documentary.TundManagement.item59') : '--',
    },
    {
      prop: 'distributionRatio',
      label: t('Documentary.Report.item5'),
      align: 'center',
    },
    {
      prop: 'settlementCycle',
      label: t('Documentary.AgentBackground.item13'),
      align: 'center',
    },
    {
      prop: 'approveTime',
      label: t('Label.ApplyTime'),
      align: 'center',
    },
    {
      prop: 'permissionDisplay',
      type: 'tag',
      label: t('Documentary.AgentBackground.item14'),
      align: 'center',
      tagMap: {
        1: t('Documentary.AgentBackground.item16'),
        2: t('Documentary.AgentBackground.item15'),
      },
    },
    {
      prop: 'action',
      label: t('Label.Action'),
      type: 'action',
      align: 'center',
      menuList: [
        {
          label: t('Ib.Custom.Btn'),
          type: 'DisplaySettings',
          btnClick: (row) => handleMenuClick({ type: 'DisplaySettings', row }),
          show: (row) => row.agentUpdatePurview == '1',
        },
      ]
    },
  ])

  const mobilePrimaryFields = ref([
    {
      prop: 'cId',
      label: t('Label.CidAccount'),
      align: 'center',
    },
    {
      prop: 'ibNo',
      label: t('Label.IbAccount'),
      align: 'center',
    },
    {
      prop: 'name',
      label: t('Ib.Custom.NameLabel'),
      align: 'center',
    },
    {
      prop: 'more',
      type: 'more',
      width: 20,
      align: 'right',
    },
  ])


  const listApi = ref(ibApi.followDealAgentSearchList)
  const handleDateChange = (val) => {
    search.value.startDate = val[0]
    search.value.endDate = val[1]
  }

  const handleMenuClick = (item) => {
    if (item.type == 'DisplaySettings') {
      const { dealLogin, id,permissionDisplay,pIbNo,agentDistributionRatio} = item.row
      formInfo.value = {
        dealLogin, id,permissionDisplay,
        ibNo: pIbNo,
        agentDistributionRatio: agentDistributionRatio== null? '': agentDistributionRatio.toString()
      }
      dialogInfoTradingAddTcAgree.value = false
      dialogInfoTradingAddTc.value = true
    }
  }

  const onAgreeChange = (e: any) => {
    dialogInfoTradingAddTcAgree.value = e.detail.value.length > 0
  }

  const dialogInfoTradingAddCanle = () => {
    dialogInfoTradingAddTc.value = false
    dialogInfoTradingAddTcAgree.value = false
  }

  const dialogInfoTradingAddOpen = () => {
    if (!dialogInfoTradingAddTcAgree.value) {
      uni.showToast({ title: t('Msg.Read'), icon: 'none' })
      return
    }
    dialogInfoTradingAddTc.value = false
    dialogInfoTradingAdd.value = true
    dialogInfoTradingAddTcAgree.value = false
  }

  onMounted(()=>{
    // dialogInfoTradingAddTc.value = true
  })
</script>
<style lang="scss" scoped>
  @import "@/uni.scss";

  .search-content {
    display: flex;
    justify-content: space-between;
  }
  .search-button{
    display: flex;
    align-items: center;
    height: px2rpx(36);
    line-height: px2rpx(36);
  }

  .custom-dialog-content {
    padding: px2rpx(20);
  }

  .desc-text {
    text-align: initial;
    line-height: 1.5;
    margin-bottom: px2rpx(20);
    color: #333;
    font-size: px2rpx(14);
    
    .desc-p {
      margin-bottom: px2rpx(10);
    }
  }

  .agree-box {
    margin-top: px2rpx(15);
    
    .agree-label {
      display: flex;
      align-items: flex-start;
      cursor: pointer;
    }
    
    .agree-des {
      flex: 1;
      font-size: px2rpx(14);
      color: #606266;
      line-height: 1.5;
      margin-left: px2rpx(5);
      margin-top: px2rpx(3);
    }
  }
</style>