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: var(--bs-heading-color);
  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>