feat(crm/erp): 新增采购申请、合同管理导入弹窗

tuqin

4 天以前 d1013ed3371659c2835106fffeb772309607a451

feat(crm/erp): 新增采购申请、合同管理导入弹窗

- 采购申请导入弹窗（下载模板/上传/进度条/导入结果/自动关闭）
- 合同管理导入弹窗（同上）

 src/api/crm/contract/index.ts

@@ -160,3 +160,23 @@
export function generateSaleOrder(id: number) {
  return requestClient.post<number>('/crm/contract/generate-sale-order', null, { params: { id } });
}

/** åˆåŒå¯¼å…¥ç»“æžœ */
export interface ImportResult {
  /** åˆ›å»ºæˆåŠŸçš„合同编号 */
  createList?: string[];
  /** æ›´æ–°æˆåŠŸçš„合同编号 */
  updateList?: string[];
  /** å¯¼å…¥å¤±è´¥é›†åˆï¼Œkey ä¸ºåˆåŒç¼–号或行号，value ä¸ºå¤±è´¥åŽŸå›  */
  failureList?: Record<string, string>;
}

/** ä¸‹è½½åˆåŒå¯¼å…¥æ¨¡æ¿ */
export function importContractTemplate() {
  return requestClient.download('/crm/contract/get-import-template');
}

/** å¯¼å…¥åˆåŒ */
export function importContract(file: File) {
  return requestClient.upload<ImportResult>('/crm/contract/import', { file });
}

 src/api/erp/purchase/request/index.ts

@@ -46,6 +46,16 @@
  }
}

/** é‡‡è´­ç”³è¯·å¯¼å…¥ç»“æžœ */
export interface ImportResult {
  /** åˆ›å»ºæˆåŠŸçš„采购申请单号 */
  createList?: string[];
  /** æ›´æ–°æˆåŠŸçš„采购申请单号 */
  updateList?: string[];
  /** å¯¼å…¥å¤±è´¥é›†åˆï¼Œkey ä¸ºé‡‡è´­ç”³è¯·å•å·æˆ–行号，value ä¸ºå¤±è´¥åŽŸå›  */
  failureList?: Record<string, string>;
}

/** åˆ›å»ºé‡‡è´­ç”³è¯· */
export function createPurchaseRequest(data: ErpPurchaseRequestApi.PurchaseRequest) {
  return requestClient.post('/erp/purchase-request/create', data);
@@ -134,3 +144,13 @@
    }
  }
}

/** ä¸‹è½½é‡‡è´­ç”³è¯·å¯¼å…¥æ¨¡æ¿ */
export function importPurchaseRequestTemplate() {
  return requestClient.download('/erp/purchase-request/get-import-template');
}

/** å¯¼å…¥é‡‡è´­ç”³è¯· */
export function importPurchaseRequest(file: File) {
  return requestClient.upload<ImportResult>('/erp/purchase-request/import', { file });
}

 src/views/crm/contract/index.vue

@@ -23,12 +23,18 @@

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';

const { push } = useRouter();
const sceneType = ref('1');

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [ImportModal, importModalApi] = useVbenModal({
  connectedComponent: ImportForm,
  destroyOnClose: true,
});

@@ -51,6 +57,11 @@
    ...formValues,
  });
  downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
}

/** å¯¼å…¥åˆåŒ */
function handleImport() {
  importModalApi.open();
}

/** åˆ›å»ºåˆåŒ */
@@ -205,6 +216,7 @@
<template>
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <ImportModal @success="handleRefresh" />
    <Grid>
      <template #toolbar-actions>
        <Tabs class="w-full" @change="handleChangeSceneType">
@@ -230,6 +242,13 @@
              auth: ['crm:contract:export'],
              onClick: handleExport,
            },
            {
              label: '导入',
              type: 'primary',
              icon: ACTION_ICON.UPLOAD,
              auth: ['crm:contract:import'],
              onClick: handleImport,
            },
          ]"
        />
      </template>

 src/views/crm/contract/modules/import-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,155 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import type { ImportResult } from '#/api/crm/contract';

import { computed, ref } from 'vue';

import { useVbenModal } from '#/packages/effects/common-ui/src';
import { downloadFileFromBlobPart } from '#/packages/utils/src';

import { Button, message, Progress, Upload } from 'ant-design-vue';

import { importContract, importContractTemplate } from '#/api/crm/contract';

const emit = defineEmits(['success']);

const fileList = ref<FileType[]>([]);
const importResult = ref<ImportResult>();
const importing = ref(false);
const progressPercent = ref(0);
let progressTimer: ReturnType<typeof setInterval> | undefined;

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    let shouldClose = false;
    if (fileList.value.length === 0) {
      message.warning('请选择要导入的文件');
      return;
    }
    if (importing.value) return;
    modalApi.lock();
    importing.value = true;
    startMockProgress();
    try {
      importResult.value = await importContract(fileList.value[0] as File);
      // å®Œæˆï¼šè¿›åº¦æ¡èµ°æ»¡
      stopMockProgress();
      progressPercent.value = 100;
      await delay(300);
      emit('success');
      const failedCount = Object.keys(importResult.value?.failureList ?? {}).length;
      if (failedCount > 0) {
        message.warning(
          `导入完成：新增 ${createCount.value} æ¡ï¼Œå¤±è´¥ ${failedCount} æ¡ï¼Œè¯·æŸ¥çœ‹ä¸‹æ–¹å¤±è´¥æ˜Žç»†`,
        );
      } else {
        message.success('导入完成');
        shouldClose = true;
      }
    } finally {
      stopMockProgress();
      importing.value = false;
      modalApi.unlock();
      if (shouldClose) {
        await modalApi.close();
      }
    }
  },
});

/** æ¨¡æ‹Ÿè¿›åº¦æ¡ï¼šè¯·æ±‚期间从 0 èµ°åˆ° 90% */
function startMockProgress() {
  progressPercent.value = 0;
  progressTimer = setInterval(() => {
    if (progressPercent.value < 90) {
      progressPercent.value = Math.min(
        90,
        progressPercent.value + Math.random() * 12,
      );
    }
  }, 300);
}

function stopMockProgress() {
  if (progressTimer) {
    clearInterval(progressTimer);
    progressTimer = undefined;
  }
}

function delay(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function beforeUpload(file: FileType) {
  fileList.value = [file];
  importResult.value = undefined;
  return false;
}

function handleRemove() {
  fileList.value = [];
  importResult.value = undefined;
}

async function handleDownloadTemplate() {
  const data = await importContractTemplate();
  downloadFileFromBlobPart({ fileName: '合同导入模板.xls', source: data });
}

const createCount = computed(() => importResult.value?.createList?.length ?? 0);
const updateCount = computed(() => importResult.value?.updateList?.length ?? 0);
const failureCount = computed(
  () => Object.keys(importResult.value?.failureList ?? {}).length,
);
</script>

<template>
  <Modal title="导入合同" class="w-[720px]">
    <div class="mx-4">
      <Upload
        :max-count="1"
        accept=".xls,.xlsx"
        :file-list="fileList"
        :before-upload="beforeUpload"
        @remove="handleRemove"
      >
        <Button type="primary">选择 Excel æ–‡ä»¶</Button>
      </Upload>
      <div class="mt-2 rounded-md bg-gray-50 p-2 text-xs leading-5 text-gray-500">
        <p>仅允许导入 xls、xlsx æ ¼å¼æ–‡ä»¶ï¼›å¿…填列：合同名称、客户名称、产品编码、数量。“客户名称”需与 CRM å®¢æˆ·ä¸€è‡´ï¼›â€œäº§å“ç¼–码”按物料编码填写（“产品名称”列仅供对照）；“合同单价(元)”留空则取物料销售价。</p>
        <p>一张合同可含多条明细：相同“合同编号”的多行会合并为一张合同（主表字段取该组首行）；“合同编号”留空时每一行各生成一张新合同。合同编号已存在时会导入失败。</p>
        <p>合同金额按“明细单价×数量 âˆ’ ä¼˜æƒ çŽ‡â€è‡ªåŠ¨è®¡ç®—；定金金额可填；负责人 = å½“前登录用户；状态为“未提交”，可在列表中继续编辑或提交审批。</p>
      </div>
      <!-- å¯¼å…¥è¿›åº¦æ¡ -->
      <div v-if="importing" class="mt-4">
        <div class="mb-2 text-sm text-gray-600">正在导入合同数据，请稍候...</div>
        <Progress :percent="progressPercent" status="active" />
      </div>
      <!-- å¯¼å…¥ç»“æžœ -->
      <div
        v-if="importResult"
        class="mt-4 rounded-md border border-gray-200 bg-gray-50 p-3"
      >
        <div class="mb-2 font-medium">导入结果</div>
        <div class="mb-2 flex gap-4">
          <span class="text-green-600">新增：{{ createCount }} æ¡</span>
          <span class="text-blue-600">覆盖更新：{{ updateCount }} æ¡</span>
          <span class="text-red-600">失败：{{ failureCount }} æ¡</span>
        </div>
        <div v-if="failureCount > 0" class="max-h-40 overflow-y-auto">
          <div
            v-for="(reason, name) in importResult.failureList"
            :key="name"
            class="text-sm leading-6 text-red-500"
          >
            {{ name }}：{{ reason }}
          </div>
        </div>
      </div>
    </div>
    <template #prepend-footer>
      <Button @click="handleDownloadTemplate">下载导入模板</Button>
    </template>
  </Modal>
</template>

 src/views/erp/purchase/request/index.vue

@@ -23,6 +23,7 @@

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
import OrderForm from './modules/order-form.vue';
import ProcessSelectModal from './modules/process-select-modal.vue';

@@ -33,6 +34,11 @@

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [ImportModal, importModalApi] = useVbenModal({
  connectedComponent: ImportForm,
  destroyOnClose: true,
});

@@ -55,6 +61,11 @@
async function handleExport() {
  const data = await exportPurchaseRequest(await gridApi.formApi.getValues());
  downloadFileFromBlobPart({ fileName: '采购申请.xls', source: data });
}

/** å¯¼å…¥é‡‡è´­ç”³è¯· */
function handleImport() {
  importModalApi.open();
}

/** æ–°å¢žé‡‡è´­ç”³è¯· */
@@ -180,6 +191,7 @@
<template>
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <ImportModal @success="handleRefresh" />
    <OrderFormModal @success="handleRefresh" />
    <ProcessModal @success="handleRefresh" />
    <Grid table-title="采购申请列表">
@@ -201,6 +213,13 @@
              onClick: handleExport,
            },
            {
              label: '导入',
              type: 'primary',
              icon: ACTION_ICON.UPLOAD,
              auth: ['erp:purchase-request:import'],
              onClick: handleImport,
            },
            {
              label: '批量删除',
              type: 'primary',
              danger: true,

 src/views/erp/purchase/request/modules/import-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,158 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import type { ImportResult } from '#/api/erp/purchase/request';

import { computed, ref } from 'vue';

import { useVbenModal } from '#/packages/effects/common-ui/src';
import { downloadFileFromBlobPart } from '#/packages/utils/src';

import { Button, message, Progress, Upload } from 'ant-design-vue';

import {
  importPurchaseRequest,
  importPurchaseRequestTemplate,
} from '#/api/erp/purchase/request';

const emit = defineEmits(['success']);

const fileList = ref<FileType[]>([]);
const importResult = ref<ImportResult>();
const importing = ref(false);
const progressPercent = ref(0);
let progressTimer: ReturnType<typeof setInterval> | undefined;

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    let shouldClose = false;
    if (fileList.value.length === 0) {
      message.warning('请选择要导入的文件');
      return;
    }
    if (importing.value) return;
    modalApi.lock();
    importing.value = true;
    startMockProgress();
    try {
      importResult.value = await importPurchaseRequest(fileList.value[0] as File);
      // å®Œæˆï¼šè¿›åº¦æ¡èµ°æ»¡
      stopMockProgress();
      progressPercent.value = 100;
      await delay(300);
      emit('success');
      const failedCount = Object.keys(importResult.value?.failureList ?? {}).length;
      if (failedCount > 0) {
        message.warning(
          `导入完成：新增 ${createCount.value} æ¡ï¼Œå¤±è´¥ ${failedCount} æ¡ï¼Œè¯·æŸ¥çœ‹ä¸‹æ–¹å¤±è´¥æ˜Žç»†`,
        );
      } else {
        message.success('导入完成');
        shouldClose = true;
      }
    } finally {
      stopMockProgress();
      importing.value = false;
      modalApi.unlock();
      if (shouldClose) {
        await modalApi.close();
      }
    }
  },
});

/** æ¨¡æ‹Ÿè¿›åº¦æ¡ï¼šè¯·æ±‚期间从 0 èµ°åˆ° 90% */
function startMockProgress() {
  progressPercent.value = 0;
  progressTimer = setInterval(() => {
    if (progressPercent.value < 90) {
      progressPercent.value = Math.min(
        90,
        progressPercent.value + Math.random() * 12,
      );
    }
  }, 300);
}

function stopMockProgress() {
  if (progressTimer) {
    clearInterval(progressTimer);
    progressTimer = undefined;
  }
}

function delay(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function beforeUpload(file: FileType) {
  fileList.value = [file];
  importResult.value = undefined;
  return false;
}

function handleRemove() {
  fileList.value = [];
  importResult.value = undefined;
}

async function handleDownloadTemplate() {
  const data = await importPurchaseRequestTemplate();
  downloadFileFromBlobPart({ fileName: '采购申请导入模板.xls', source: data });
}

const createCount = computed(() => importResult.value?.createList?.length ?? 0);
const updateCount = computed(() => importResult.value?.updateList?.length ?? 0);
const failureCount = computed(
  () => Object.keys(importResult.value?.failureList ?? {}).length,
);
</script>

<template>
  <Modal title="导入采购申请" class="w-[720px]">
    <div class="mx-4">
      <Upload
        :max-count="1"
        accept=".xls,.xlsx"
        :file-list="fileList"
        :before-upload="beforeUpload"
        @remove="handleRemove"
      >
        <Button type="primary">选择 Excel æ–‡ä»¶</Button>
      </Upload>
      <div class="mt-2 rounded-md bg-gray-50 p-2 text-xs leading-5 text-gray-500">
        <p>仅允许导入 xls、xlsx æ ¼å¼æ–‡ä»¶ï¼›å¿…填列：产品编码、数量。“产品编码”按物料编码填写（“产品名称”列仅供对照），供应商可空（填了需与系统供应商一致），“需求日期”格式如 2026-01-01，“是否来料检验”填“是/否”。</p>
        <p>一张采购申请可含多条明细：相同“采购申请单号”的多行会合并为一张申请（主表字段取该组首行）；“采购申请单号”留空时每一行各生成一张新申请。采购申请单号已存在时会导入失败。</p>
        <p>导入的申请，其「申请人 / ç”³è¯·éƒ¨é—¨ã€æŒ‰å½“前登录用户自动带出；状态为“未提交”，可在列表中继续编辑或提交审批。</p>
      </div>
      <!-- å¯¼å…¥è¿›åº¦æ¡ -->
      <div v-if="importing" class="mt-4">
        <div class="mb-2 text-sm text-gray-600">正在导入采购申请数据，请稍候...</div>
        <Progress :percent="progressPercent" status="active" />
      </div>
      <!-- å¯¼å…¥ç»“æžœ -->
      <div
        v-if="importResult"
        class="mt-4 rounded-md border border-gray-200 bg-gray-50 p-3"
      >
        <div class="mb-2 font-medium">导入结果</div>
        <div class="mb-2 flex gap-4">
          <span class="text-green-600">新增：{{ createCount }} æ¡</span>
          <span class="text-blue-600">覆盖更新：{{ updateCount }} æ¡</span>
          <span class="text-red-600">失败：{{ failureCount }} æ¡</span>
        </div>
        <div v-if="failureCount > 0" class="max-h-40 overflow-y-auto">
          <div
            v-for="(reason, name) in importResult.failureList"
            :key="name"
            class="text-sm leading-6 text-red-500"
          >
            {{ name }}：{{ reason }}
          </div>
        </div>
      </div>
    </div>
    <template #prepend-footer>
      <Button @click="handleDownloadTemplate">下载导入模板</Button>
    </template>
  </Modal>
</template>