云
4 天以前 ec8ff4f6259404460a0b4437e29a40986c2c4b9d
src/views/crm/customer/pool/index.vue
@@ -2,24 +2,86 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmCustomerApi } from '#/api/crm/customer';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button } from 'ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportCustomer, getCustomerPage } from '#/api/crm/customer';
import {
  exportCustomer,
  getCustomerPage,
  receiveCustomer,
} from '#/api/crm/customer';
import { $t } from '#/locales';
import DistributeForm from '../detail/modules/distribute-form.vue';
import { useGridColumns, useGridFormSchema } from './data';
const { push } = useRouter();
const receiving = ref(false);
const [DistributeModal, distributeModalApi] = useVbenModal({
  connectedComponent: DistributeForm,
  destroyOnClose: true,
});
function handleRefresh() {
  gridApi.grid.clearCheckboxRow();
  gridApi.query();
}
function getCustomerIds(row?: CrmCustomerApi.Customer): number[] {
  const records: CrmCustomerApi.Customer[] = row
    ? [row]
    : gridApi.grid.getCheckboxRecords();
  const ids = records.map((item) => item.id!);
  if (ids.length === 0) {
    message.warning('请先勾选客户');
  }
  return ids;
}
/** 领取单条或勾选的公海客户 */
async function handleReceive(row?: CrmCustomerApi.Customer) {
  if (receiving.value) return;
  const ids = getCustomerIds(row);
  if (ids.length === 0) return;
  receiving.value = true;
  try {
    try {
      await confirm(
        row
          ? `确定领取客户【${row.name}】吗?`
          : `确定领取选中的 ${ids.length} 个客户吗?`,
      );
    } catch {
      return;
    }
    await receiveCustomer(ids);
    message.success('领取客户成功');
    handleRefresh();
  } finally {
    receiving.value = false;
  }
}
/** 分配单条或勾选的公海客户 */
function handleDistribute(row?: CrmCustomerApi.Customer) {
  const ids = getCustomerIds(row);
  if (ids.length === 0) return;
  distributeModalApi.setData({ ids }).open();
}
/** 导出表格 */
async function handleExport() {
  const data = await exportCustomer(await gridApi.formApi.getValues());
  const data = await exportCustomer({
    ...(await gridApi.formApi.getValues()),
    pool: true,
    sceneType: 4,
  });
  downloadFileFromBlobPart({ fileName: '客户公海.xls', source: data });
}
@@ -62,10 +124,25 @@
</script>
<template>
  <Page auto-content-height><Grid>
  <Page auto-content-height>
    <DistributeModal @success="handleRefresh" />
    <Grid>
      <template #toolbar-tools>
        <TableAction
          :actions="[
            {
              label: '领取客户',
              type: 'primary',
              auth: ['crm:customer:receive'],
              disabled: receiving,
              onClick: () => handleReceive(),
            },
            {
              label: '分配客户',
              auth: ['crm:customer:distribute'],
              disabled: receiving,
              onClick: () => handleDistribute(),
            },
            {
              label: $t('ui.actionTitle.export'),
              type: 'primary',
@@ -76,6 +153,26 @@
          ]"
        />
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
            {
              label: '领取',
              type: 'link',
              auth: ['crm:customer:receive'],
              disabled: receiving,
              onClick: () => handleReceive(row),
            },
            {
              label: '分配',
              type: 'link',
              auth: ['crm:customer:distribute'],
              disabled: receiving,
              onClick: () => handleDistribute(row),
            },
          ]"
        />
      </template>
      <template #name="{ row }">
        <Button type="link" @click="handleDetail(row)">
          {{ row.name }}