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-09-10 17:05:28 +08:00
parent 2f446fac55
commit 63e3792e6d
14 changed files with 391 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/src/locales/langs/en-US/menu.json
View File

@@ -89,6 +89,8 @@
"report": {
"base": "Report Center",
"progress": "Project Progress",
"license": "License Expire"
"member": "Member Progress",
"expire": "License Expiring",
"expired": "License Expired"
}
}

4
apps/web-antd/src/locales/langs/zh-CN/menu.json
View File

@@ -89,6 +89,8 @@
"report": {
"base": "报表中心",
"progress": "项目进展",
"license": "License到期"
"member": "成员进展",
"expire": "License即将到期",
"expired": "License已到期"
}
}

144
apps/web-antd/src/views/report/expire/data.ts
View File

@@ -89,6 +89,15 @@ export function useExpiringGridColumns(): VxeTableGridOptions<ProgressApi.Progre
props: { type: DICT_TYPE.LIC_PROJECT_STATUS },
},
},
{
field: 'businessStatus',
title: $t('project.businessStatus'),
minWidth: 40,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_BUSINESS_STATUS },
},
},
{
field: 'serialNo',
title: 'SN',
@@ -148,138 +157,3 @@ export function useExpiringGridColumns(): VxeTableGridOptions<ProgressApi.Progre
},
];
}
// ==================== 已过期 ====================
export function useExpiredGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'customerId',
label: $t('license.customer'),
component: 'ApiSelect',
componentProps: {
api: getCustomerList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'projectId',
label: $t('license.project'),
component: 'ApiSelect',
componentProps: {
api: getProjectList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'serialNo',
label: 'SN',
component: 'Input',
componentProps: {
allowClear: true,
},
},
{
fieldName: 'expiryDate',
label: '到期时间',
component: 'RangePicker',
defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
componentProps: {
...getRangePickerDefaultProps(),
format: 'YYYY-MM-DD',
showTime: false,
},
},
];
}
/** 列表的字段 */
export function useExpiredGridColumns(): VxeTableGridOptions<ProgressApi.Progress>['columns'] {
return [
{
field: 'customerName',
title: '客户名称',
showOverflow: false,
minWidth: 60,
},
{
field: 'projectName',
title: '项目名称',
showOverflow: false,
minWidth: 80,
},
{
field: 'status',
title: $t('project.status'),
minWidth: 40,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_PROJECT_STATUS },
},
},
{
field: 'serialNo',
title: 'SN',
showOverflow: false,
minWidth: 40,
},
{
field: 'businessOwnerName',
title: '业务负责人',
minWidth: 40,
},
{
field: 'technicalOwnerAName',
title: '技术负责人1',
minWidth: 40,
},
{
field: 'technicalOwnerBName',
title: '技术负责人2',
visible: false,
minWidth: 40,
},
{
field: 'startTime',
title: '项目开始时间',
minWidth: 80,
visible: false,
formatter: 'formatDateTime',
},
{
field: 'expiryDate',
title: '到期时间',
minWidth: 80,
formatter: 'formatDateTime',
},
{
field: 'expiryDateFormat',
title: '已到期',
minWidth: 80,
formatter: ({ cellValue }) => {
if (!cellValue) return '';
// const days = dayjs(cellValue).diff(dayjs(), 'day');
// if (days > 0) {
// return `${days} 天`;
// }
// if (days === 0) {
// return '今天到期';
// }
return dayjs(cellValue).fromNow(true);
},
},
{
field: 'applicationTime',
title: '申请时间',
minWidth: 80,
formatter: 'formatDateTime',
},
];
}

19
apps/web-antd/src/views/report/expire/index.vue
View File

@@ -1,30 +1,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Tabs } from 'ant-design-vue';
import ExpiredList from './modules/expired.vue';
import ExpiringList from './modules/expiring.vue';
const subTabsName = ref('project');
</script>
<template>
<Page auto-content-height>
<div class="card-container">
<Tabs
v-model:active-key="subTabsName"
:tab-bar-style="{ marginTop: '-10px' }"
>
<Tabs.TabPane key="project" tab="未过期">
<ExpiringList />
</Tabs.TabPane>
<Tabs.TabPane key="author" tab="已过期">
<ExpiredList />
</Tabs.TabPane>
</Tabs>
</div>
</Page>
</template>

3
apps/web-antd/src/views/report/expire/modules/expiring.vue
View File

@@ -35,6 +35,7 @@ const [Grid] = useVbenVxeGrid({
search: true,
// export: true,
},
height: 'auto',
rowConfig: {
keyField: 'id',
isHover: false,
@@ -56,5 +57,5 @@ const [Grid] = useVbenVxeGrid({
</script>
<template>
<Grid table-title="License到期" />
<Grid table-title="License即将到期" />
</template>

157
apps/web-antd/src/views/report/expired/data.ts Normal file
View File

@@ -0,0 +1,157 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ProgressApi } from '#/api/report/progress';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { getCustomerList } from '#/api/license/customer';
import { getProjectList } from '#/api/license/project';
import { $t } from '#/locales';
import { DICT_TYPE, getRangePickerDefaultProps } from '#/utils';
dayjs.extend(relativeTime);
// ==================== 已过期 ====================
export function useExpiredGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'customerId',
label: $t('license.customer'),
component: 'ApiSelect',
componentProps: {
api: getCustomerList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'projectId',
label: $t('license.project'),
component: 'ApiSelect',
componentProps: {
api: getProjectList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'serialNo',
label: 'SN',
component: 'Input',
componentProps: {
allowClear: true,
},
},
{
fieldName: 'expiryDate',
label: '到期时间',
component: 'RangePicker',
defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
componentProps: {
...getRangePickerDefaultProps(),
format: 'YYYY-MM-DD',
showTime: false,
},
},
];
}
/** 列表的字段 */
export function useExpiredGridColumns(): VxeTableGridOptions<ProgressApi.Progress>['columns'] {
return [
{
field: 'customerName',
title: '客户名称',
showOverflow: false,
minWidth: 60,
},
{
field: 'projectName',
title: '项目名称',
showOverflow: false,
minWidth: 80,
},
{
field: 'status',
title: $t('project.status'),
minWidth: 40,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_PROJECT_STATUS },
},
},
{
field: 'businessStatus',
title: $t('project.businessStatus'),
minWidth: 40,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_BUSINESS_STATUS },
},
},
{
field: 'serialNo',
title: 'SN',
showOverflow: false,
minWidth: 40,
},
{
field: 'businessOwnerName',
title: '业务负责人',
minWidth: 40,
},
{
field: 'technicalOwnerAName',
title: '技术负责人1',
minWidth: 40,
},
{
field: 'technicalOwnerBName',
title: '技术负责人2',
visible: false,
minWidth: 40,
},
{
field: 'startTime',
title: '项目开始时间',
minWidth: 80,
visible: false,
formatter: 'formatDateTime',
},
{
field: 'expiryDate',
title: '到期时间',
minWidth: 80,
formatter: 'formatDateTime',
},
{
field: 'expiryDateFormat',
title: '已到期',
minWidth: 80,
formatter: ({ cellValue }) => {
if (!cellValue) return '';
// const days = dayjs(cellValue).diff(dayjs(), 'day');
// if (days > 0) {
// return `${days} 天`;
// }
// if (days === 0) {
// return '今天到期';
// }
return dayjs(cellValue).fromNow(true);
},
},
{
field: 'applicationTime',
title: '申请时间',
minWidth: 80,
formatter: 'formatDateTime',
},
];
}

11
apps/web-antd/src/views/report/expired/index.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import ExpiredList from './modules/expired.vue';
</script>
<template>
<Page auto-content-height>
<ExpiredList />
</Page>
</template>

3
apps/web-antd/src/views/report/expire/modules/expired.vue → apps/web-antd/src/views/report/expired/modules/expired.vue
View File

@@ -35,6 +35,7 @@ const [Grid] = useVbenVxeGrid({
search: true,
// export: true,
},
height: 'auto',
rowConfig: {
keyField: 'id',
isHover: false,
@@ -56,5 +57,5 @@ const [Grid] = useVbenVxeGrid({
</script>
<template>
<Grid table-title="License到期" />
<Grid table-title="License已到期" />
</template>

164
apps/web-antd/src/views/report/member/data.ts Normal file
View File

@@ -0,0 +1,164 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ProgressApi } from '#/api/report/progress';
import dayjs from 'dayjs';
import { getCustomerList } from '#/api/license/customer';
import { getProjectList } from '#/api/license/project';
import { getSimpleUserList } from '#/api/system/user';
import { $t } from '#/locales';
import { DICT_TYPE, getRangePickerDefaultProps } from '#/utils';
// ==================== 项目进展（项目维度） ====================
/** 列表的搜索表单 */
export function useStaffGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'authorId',
label: '处理人',
component: 'ApiSelect',
componentProps: {
allowClear: true,
api: async () => {
const data = await getSimpleUserList();
return data.filter((item) => item.nickname !== '管理员');
},
fieldNames: { label: 'nickname', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.nickname.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'customerId',
label: $t('license.customer'),
component: 'ApiSelect',
componentProps: {
api: getCustomerList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'projectId',
label: $t('license.project'),
component: 'ApiSelect',
componentProps: {
api: getProjectList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'serialNo',
label: 'SN',
component: 'Input',
componentProps: {
allowClear: true,
},
},
{
fieldName: 'updateTime',
label: '更新时间',
component: 'RangePicker',
defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
componentProps: {
...getRangePickerDefaultProps(),
format: 'YYYY-MM-DD',
showTime: false,
},
},
];
}
/** 列表的字段 */
export function useStaffGridColumns(): VxeTableGridOptions<ProgressApi.Progress>['columns'] {
return [
{
field: 'author',
title: '处理人',
minWidth: 60,
},
{
field: 'customerName',
title: '客户名称',
showOverflow: false,
minWidth: 80,
},
{
field: 'projectName',
title: '项目名称',
showOverflow: false,
minWidth: 80,
},
{
field: 'status',
title: $t('project.status'),
minWidth: 60,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_PROJECT_STATUS },
},
},
{
field: 'businessStatus',
title: $t('project.businessStatus'),
minWidth: 60,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_BUSINESS_STATUS },
},
},
{
field: 'serialNo',
title: 'SN',
showOverflow: false,
minWidth: 70,
},
{
field: 'businessOwnerName',
title: '业务负责人',
minWidth: 60,
},
{
field: 'technicalOwnerAName',
title: '技术负责人1',
minWidth: 60,
},
{
field: 'technicalOwnerBName',
title: '技术负责人2',
visible: false,
minWidth: 60,
},
{
field: 'startTime',
title: '项目开始时间',
minWidth: 130,
visible: false,
formatter: 'formatDateTime',
},
{
field: 'content',
title: '进展记录',
type: 'html',
showOverflow: false,
align: 'left',
// headerAlign: 'center',
minWidth: 600,
},
{
field: 'updateTime',
title: '更新时间',
minWidth: 130,
formatter: 'formatDateTime',
},
];
}

11
apps/web-antd/src/views/report/member/index.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import StaffList from './modules/staff.vue';
</script>
<template>
<Page auto-content-height>
<StaffList />
</Page>
</template>

4
apps/web-antd/src/views/report/progress/modules/staff.vue → apps/web-antd/src/views/report/member/modules/staff.vue
View File

@@ -34,6 +34,7 @@ const [Grid] = useVbenVxeGrid({
search: true,
// export: true,
},
height: 'auto',
rowConfig: {
keyField: 'id',
isHover: false,
@@ -56,6 +57,7 @@ const [Grid] = useVbenVxeGrid({
const mergeFields = [
'serialNo',
'status',
'businessStatus',
'businessOwnerName',
'technicalOwnerAName',
'technicalOwnerBName',
@@ -93,5 +95,5 @@ const [Grid] = useVbenVxeGrid({
</script>
<template>
<Grid table-title="项目进展" />
<Grid table-title="成员进展" />
</template>

179
apps/web-antd/src/views/report/progress/data.ts
View File

@@ -86,7 +86,7 @@ export function useProjectGridColumns(): VxeTableGridOptions<ProgressApi.Progres
field: 'customerName',
title: '客户名称',
showOverflow: false,
minWidth: 60,
minWidth: 80,
},
{
field: 'projectName',
@@ -97,190 +97,55 @@ export function useProjectGridColumns(): VxeTableGridOptions<ProgressApi.Progres
{
field: 'status',
title: $t('project.status'),
minWidth: 40,
minWidth: 60,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_PROJECT_STATUS },
},
},
{
field: 'businessStatus',
title: $t('project.businessStatus'),
minWidth: 60,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_BUSINESS_STATUS },
},
},
{
field: 'serialNo',
title: 'SN',
showOverflow: false,
minWidth: 40,
minWidth: 70,
},
{
field: 'businessOwnerName',
title: '业务负责人',
minWidth: 40,
},
{
field: 'technicalOwnerAName',
title: '技术负责人1',
minWidth: 40,
},
{
field: 'technicalOwnerBName',
title: '技术负责人2',
visible: false,
minWidth: 40,
},
{
field: 'startTime',
title: '项目开始时间',
minWidth: 80,
visible: false,
formatter: 'formatDateTime',
},
{
field: 'author',
title: '处理人',
minWidth: 40,
},
{
field: 'content',
title: '进展记录',
type: 'html',
showOverflow: false,
align: 'left',
// headerAlign: 'center',
minWidth: 800,
},
{
field: 'updateTime',
title: '更新时间',
minWidth: 80,
formatter: 'formatDateTime',
},
];
}
// ==================== 项目进展（项目维度） ====================
/** 列表的搜索表单 */
export function useStaffGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'authorId',
label: '处理人',
component: 'ApiSelect',
componentProps: {
allowClear: true,
api: async () => {
const data = await getSimpleUserList();
return data.filter((item) => item.nickname !== '管理员');
},
fieldNames: { label: 'nickname', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.nickname.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'customerId',
label: $t('license.customer'),
component: 'ApiSelect',
componentProps: {
api: getCustomerList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'projectId',
label: $t('license.project'),
component: 'ApiSelect',
componentProps: {
api: getProjectList,
allowClear: true,
fieldNames: { label: 'name', value: 'id' },
showSearch: true,
filterOption: (input: string, option: any) =>
option.name.toLowerCase().includes(input.toLowerCase()),
},
},
{
fieldName: 'serialNo',
label: 'SN',
component: 'Input',
componentProps: {
allowClear: true,
},
},
{
fieldName: 'updateTime',
label: '更新时间',
component: 'RangePicker',
defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
componentProps: {
...getRangePickerDefaultProps(),
format: 'YYYY-MM-DD',
showTime: false,
},
},
];
}
/** 列表的字段 */
export function useStaffGridColumns(): VxeTableGridOptions<ProgressApi.Progress>['columns'] {
return [
{
field: 'author',
title: '处理人',
minWidth: 40,
},
{
field: 'customerName',
title: '客户名称',
showOverflow: false,
minWidth: 60,
},
{
field: 'projectName',
title: '项目名称',
showOverflow: false,
minWidth: 80,
},
{
field: 'status',
title: $t('project.status'),
minWidth: 40,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.LIC_PROJECT_STATUS },
},
},
{
field: 'serialNo',
title: 'SN',
showOverflow: false,
minWidth: 40,
},
{
field: 'businessOwnerName',
title: '业务负责人',
minWidth: 40,
},
{
field: 'technicalOwnerAName',
title: '技术负责人1',
minWidth: 40,
minWidth: 60,
},
{
field: 'technicalOwnerBName',
title: '技术负责人2',
visible: false,
minWidth: 40,
minWidth: 60,
},
{
field: 'startTime',
title: '项目开始时间',
minWidth: 80,
minWidth: 130,
visible: false,
formatter: 'formatDateTime',
},
{
field: 'author',
title: '处理人',
minWidth: 60,
},
{
field: 'content',
title: '进展记录',
@@ -288,12 +153,12 @@ export function useStaffGridColumns(): VxeTableGridOptions<ProgressApi.Progress>
showOverflow: false,
align: 'left',
// headerAlign: 'center',
minWidth: 800,
minWidth: 600,
},
{
field: 'updateTime',
title: '更新时间',
minWidth: 80,
minWidth: 130,
formatter: 'formatDateTime',
},
];

19
apps/web-antd/src/views/report/progress/index.vue
View File

@@ -1,30 +1,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Tabs } from 'ant-design-vue';
import ProjectList from './modules/project.vue';
import StaffList from './modules/staff.vue';
const subTabsName = ref('project');
</script>
<template>
<Page auto-content-height>
<div class="card-container">
<Tabs
v-model:active-key="subTabsName"
:tab-bar-style="{ marginTop: '-10px' }"
>
<Tabs.TabPane key="project" tab="项目分组">
<ProjectList />
</Tabs.TabPane>
<Tabs.TabPane key="author" tab="人员分组">
<StaffList />
</Tabs.TabPane>
</Tabs>
</div>
</Page>
</template>

2
apps/web-antd/src/views/report/progress/modules/project.vue
View File

@@ -34,6 +34,7 @@ const [Grid] = useVbenVxeGrid({
search: true,
// export: true,
},
height: 'auto',
rowConfig: {
keyField: 'id',
isHover: false,
@@ -56,6 +57,7 @@ const [Grid] = useVbenVxeGrid({
const mergeFields = [
'serialNo',
'status',
'businessStatus',
'businessOwnerName',
'technicalOwnerAName',
'technicalOwnerBName',