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

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Ib.Custom.Manage2')" />

    <view class="account-content">
      <view class="search-content">
        <view class="search-bar">
          <uni-easyinput v-model="search.ibNo" :placeholder="t('Label.IbAccount')" />
          <uni-easyinput v-model="search.name" :placeholder="t('Ib.Custom.NameLabel')" />
          <uni-easyinput v-model="search.cId" placeholder="CID" />
          <uni-datetime-picker type="daterange" v-model="search.date"
                               :placeholder="t('placeholder.Start') + ' - ' + t('placeholder.End')" @change="handleDateChange"/>
        </view>
        <view class="search-bar">
          <button type="primary" class="search-button" @click="addSub">
            <cwg-icon name="icon_add" :size="18" color="#fff"></cwg-icon>
            {{t('Ib.Report.Title5')}}
          </button>
        </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, computed, onMounted, onUnmounted } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
  import { customApi } from '@/service/custom'
  import { financialApi } from '@/service/financial'
  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 search = ref({
    ibNo: '',
    name: '',
    date: '',
    cId: '',
    startDate: '',
    endDate: '',
  })
  const { t, locale } = useI18n()
  // 表格列配置
  const columns = 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: 'agentNum',
      label: t('Ib.Custom.AgentNum'),
      align: 'center',
    },
    {
      prop: 'customNum',
      label: t('Ib.Custom.CustomerNum'),
      align: 'center',
    },
    {
      prop: 'addTime',
      label: t('Label.ApplyTime'),
      align: 'center',
    },
    {
      prop: 'lastTime',
      label: t('Ib.Custom.LastActiveTime'),
      align: 'center',
    },
    {
      prop: 'action',
      label: t('Label.Action'),
      align: 'center',
      slot: 'action',
    },
  ])

  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.IbSubs)
  const handleDateChange = (val) => {
    search.value.startDate = val[0]
    search.value.endDate = val[1]
  }

  // 下拉菜单配置
  const menuList = (row) => {
    return [
      {
        label: t('Ib.Custom.Commit3'),
        type: 'vietnamDistribution',
        row,
        show: true,
      },
      {
        label: t('Ib.Custom.Commit5'),
        type: 'exclusiveCommission',
        row,
        show: row.exclusiveCommissionOptions?.length > 0,
      },
    ].filter((item) => item.show)
  }
  const handleMenuClick = (item) => {
    if (item.type == 'vietnamDistribution') {
      const { cId, id, permissionDisplay } = item.row
      formInfoRow.value = {
        cId, id, permissionDisplay,
      }
      docVisible.value = true
    } else if (item.type == 'exclusiveCommission') {
      const { cId, id, comPoint1, hide1 } = item.row
      pointForm.value = {
        cId, id, comPoint1, hide1,
      }
      pointVisible.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;
    line-height: px2rpx(36);
    min-width: px2rpx(120);
  }
</style>