WFC/agt-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 客户管理和项目管理导入支持

Browse Source
This commit is contained in:
caiyuchao
2025-08-07 15:37:06 +08:00
parent a66b84b8ba
commit 9e776ec06b
9 changed files with 355 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web-antd/src/api/license/customer/index.ts
View File

@@ -72,6 +72,19 @@ export function exportCustomer(params: any) {
return requestClient.download('/license/customer/export-excel', params);
}
/** 下载导入模板 */
export function importTemplate() {
return requestClient.download('/license/customer/get-import-template');
}
/** 导入客户 */
export function importCustomer(file: File, updateSupport: boolean) {
return requestClient.upload('/license/customer/import', {
file,
updateSupport,
});
}
/** 客户名称是否唯一 */
export async function isCustomerNameUnique(
name: string,

13
apps/web-antd/src/api/license/project/index.ts
View File

@@ -67,6 +67,19 @@ export function exportProject(params: any) {
return requestClient.download('/license/project/export-excel', params);
}
/** 下载导入模板 */
export function importTemplate() {
return requestClient.download('/license/project/get-import-template');
}
/** 导入项目 */
export function importProject(file: File, updateSupport: boolean) {
return requestClient.upload('/license/project/import', {
file,
updateSupport,
});
}
/** 项目名称是否唯一 */
export async function isProjectNameUnique(
name: string,

24
apps/web-antd/src/views/license/customer/data.ts
View File

@@ -281,3 +281,27 @@ export function useGridColumns(
},
];
}
/** 客户导入的表单 */
export function useImportFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'file',
label: '客户数据',
component: 'Upload',
rules: 'required',
help: '仅允许导入 xls、xlsx 格式文件',
},
{
fieldName: 'updateSupport',
label: '是否覆盖',
component: 'Switch',
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
rules: z.boolean().default(false),
help: '是否更新已经存在的客户数据',
},
];
}

19
apps/web-antd/src/views/license/customer/index.vue
View File

@@ -20,12 +20,18 @@ import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [ImportModal, importModalApi] = useVbenModal({
connectedComponent: ImportForm,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
@@ -67,6 +73,11 @@ async function onExport() {
});
}
/** 导入客户 */
function handleImport() {
importModalApi.open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
@@ -124,6 +135,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<ImportModal @success="onRefresh" />
<Grid :table-title="$t('customer.customerList')">
<template #toolbar-tools>
@@ -143,6 +155,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
auth: ['license:customer:export'],
onClick: onExport,
},
{
label: $t('ui.actionTitle.import', [$t('customer.customer')]),
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['license:customer:export'],
onClick: handleImport,
},
]"
/>
</template>

121
apps/web-antd/src/views/license/customer/modules/import-form.vue Normal file
View File

@@ -0,0 +1,121 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import { h } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message, UploadDragger } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { importCustomer, importTemplate } from '#/api/license/customer';
import { useImportFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: useImportFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = await formApi.getValues();
try {
const result = await importCustomer(data.file, data.updateSupport);
// 关闭并提示
await modalApi.close();
emit('success');
let failuresMsg: any;
if (result.creates && result.creates.length > 0) {
failuresMsg = h(
'div',
{
style: {
color: 'green',
},
},
[failuresMsg, `新增成功：${result.creates.join('，')}`],
);
}
if (result.updates && result.updates.length > 0) {
failuresMsg = h(
'div',
{
style: {
color: 'blue',
},
},
[failuresMsg, `更新成功：${result.updates.join('，')}`],
);
}
for (const key in result.failures) {
failuresMsg = h(
'div',
{
style: {
color: 'red',
},
},
[failuresMsg, `导入失败：${key}，失败原因：${result.failures[key]}`],
);
}
message.info(failuresMsg, 10);
} finally {
modalApi.unlock();
}
},
});
/** 上传前 */
function beforeUpload(file: FileType) {
formApi.setFieldValue('file', file);
return false;
}
/** 下载模版 */
async function handleDownload() {
const data = await importTemplate();
downloadFileFromBlobPart({ fileName: '客户导入模板.xlsx', source: data });
}
</script>
<template>
<Modal title="导入客户" class="w-1/3">
<Form class="mx-4">
<template #file>
<div class="w-full">
<UploadDragger
:max-count="1"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
>
<p class="ant-upload-drag-icon">
<span class="icon-[ep--upload-filled] size-12"></span>
</p>
<p class="ant-upload-text">点击或拖拽Excel文件上传</p>
</UploadDragger>
</div>
</template>
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<Button @click="handleDownload"> 下载导入模板 </Button>
</div>
</template>
</Modal>
</template>

2
apps/web-antd/src/views/license/license/index.vue
View File

@@ -186,7 +186,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: $t('ui.actionTitle.import', ['License']),
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['system:user:import'],
auth: ['license:license:export'],
onClick: handleImport,
},
]"

24
apps/web-antd/src/views/license/project/data.ts
View File

@@ -463,3 +463,27 @@ export function useGridColumns(
},
];
}
/** 项目导入的表单 */
export function useImportFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'file',
label: '项目数据',
component: 'Upload',
rules: 'required',
help: '仅允许导入 xls、xlsx 格式文件',
},
{
fieldName: 'updateSupport',
label: '是否覆盖',
component: 'Switch',
componentProps: {
checkedChildren: '是',
unCheckedChildren: '否',
},
rules: z.boolean().default(false),
help: '是否更新已经存在的项目数据',
},
];
}

19
apps/web-antd/src/views/license/project/index.vue
View File

@@ -20,6 +20,7 @@ import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
import Progress from './modules/progress.vue';
const [FormModal, formModalApi] = useVbenModal({
@@ -32,6 +33,11 @@ const [ProgressDrawer, progressDrawerApi] = useVbenDrawer({
destroyOnClose: true,
});
const [ImportModal, importModalApi] = useVbenModal({
connectedComponent: ImportForm,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
@@ -78,6 +84,11 @@ async function onExport() {
});
}
/** 导入项目 */
function handleImport() {
importModalApi.open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<ProjectApi.Project>) {
switch (code) {
@@ -139,6 +150,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Page auto-content-height>
<FormModal @success="onRefresh" />
<ProgressDrawer @success="onRefresh" />
<ImportModal @success="onRefresh" />
<Grid :table-title="$t('project.list')">
<template #toolbar-tools>
@@ -158,6 +170,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
auth: ['license:project:export'],
onClick: onExport,
},
{
label: $t('ui.actionTitle.import', [$t('project.project')]),
type: 'primary',
icon: ACTION_ICON.UPLOAD,
auth: ['license:project:export'],
onClick: handleImport,
},
]"
/>
</template>

121
apps/web-antd/src/views/license/project/modules/import-form.vue Normal file
View File

@@ -0,0 +1,121 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import { h } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message, UploadDragger } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { importProject, importTemplate } from '#/api/license/project';
import { useImportFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: useImportFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = await formApi.getValues();
try {
const result = await importProject(data.file, data.updateSupport);
// 关闭并提示
await modalApi.close();
emit('success');
let failuresMsg: any;
if (result.creates && result.creates.length > 0) {
failuresMsg = h(
'div',
{
style: {
color: 'green',
},
},
[failuresMsg, `新增成功：${result.creates.join('，')}`],
);
}
if (result.updates && result.updates.length > 0) {
failuresMsg = h(
'div',
{
style: {
color: 'blue',
},
},
[failuresMsg, `更新成功：${result.updates.join('，')}`],
);
}
for (const key in result.failures) {
failuresMsg = h(
'div',
{
style: {
color: 'red',
},
},
[failuresMsg, `导入失败：${key}，失败原因：${result.failures[key]}`],
);
}
message.info(failuresMsg, 10);
} finally {
modalApi.unlock();
}
},
});
/** 上传前 */
function beforeUpload(file: FileType) {
formApi.setFieldValue('file', file);
return false;
}
/** 下载模版 */
async function handleDownload() {
const data = await importTemplate();
downloadFileFromBlobPart({ fileName: '项目导入模板.xlsx', source: data });
}
</script>
<template>
<Modal title="导入项目" class="w-1/3">
<Form class="mx-4">
<template #file>
<div class="w-full">
<UploadDragger
:max-count="1"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
>
<p class="ant-upload-drag-icon">
<span class="icon-[ep--upload-filled] size-12"></span>
</p>
<p class="ant-upload-text">点击或拖拽Excel文件上传</p>
</UploadDragger>
</div>
</template>
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<Button @click="handleDownload"> 下载导入模板 </Button>
</div>
</template>
</Modal>
</template>