yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor:【BPM 工作流】 针对TODO 更新流程相关接口和组件，优化文档提示，调整表单字段类型

pull/113/head
ziye 2025-05-21 01:29:03 +08:00
parent 7a54f7767a
commit a4839416fe
22 changed files with 182 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/src/api/bpm/definition/index.ts
View File

@ -4,6 +4,7 @@ import { requestClient } from '#/api/request';
/** 流程定义 */
export namespace BpmProcessDefinitionApi {
// 流程定义
export interface ProcessDefinitionVO {
id: string;
version: number;

6
apps/web-antd/src/api/bpm/form/index.ts
View File

@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace BpmFormApi {
// TODO @siye：注释加一个。。嘿嘿
// 流程表单
export interface FormVO {
id?: number | undefined;
name: string;
@ -11,7 +11,7 @@ export namespace BpmFormApi {
fields: string[];
status: number;
remark: string;
createTime: string;
createTime: number;
}
}
@ -23,7 +23,7 @@ export async function getFormPage(params: PageParam) {
}
/** 获取表单详情 */
export async function getFormDetail(id: number) {
export async function getFormDetail(id: number | string) {
return requestClient.get<BpmFormApi.FormVO>(`/bpm/form/get?id=${id}`);
}

21
apps/web-antd/src/api/bpm/processInstance/index.ts
View File

@ -40,6 +40,7 @@ export namespace BpmProcessInstanceApi {
tasks: ApprovalTaskInfo[];
};
// 流程实例
export type ProcessInstanceVO = {
businessKey: string;
category: string;
@ -59,6 +60,7 @@ export namespace BpmProcessInstanceApi {
tasks?: BpmProcessInstanceApi.Task[];
};
// 审批详情
export type ApprovalDetail = {
activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
formFieldsPermission: any;
@ -66,6 +68,25 @@ export namespace BpmProcessInstanceApi {
processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
status: number;
};
// 抄送流程实例 VO
export type CopyVO = {
id: number;
startUser: User;
processInstanceId: string;
processInstanceName: string;
processInstanceStartTime: number;
activityId: string;
activityName: string;
taskId: string;
reason: string;
createUser: User;
createTime: number;
summary: {
key: string;
value: string;
}[];
};
}
/** 查询我的流程实例分页 */

30
apps/web-antd/src/api/bpm/task/index.ts
View File

@ -1,5 +1,7 @@
import type { PageParam, PageResult } from '@vben/request';
import type { BpmProcessInstanceApi } from '../processInstance';
import { requestClient } from '#/api/request';
export namespace BpmTaskApi {
@ -11,7 +13,33 @@ export namespace BpmTaskApi {
status: number; // 监听器状态
event: string; // 监听事件
valueType: string; // 监听器值类型
value: string; // 监听器值
}
// 流程任务 VO
export interface TaskManagerVO {
id: string; // 编号
name: string; // 任务名称
createTime: number; // 创建时间
endTime: number; // 结束时间
durationInMillis: number; // 持续时间
status: number; // 状态
reason: string; // 原因
ownerUser: any; // 负责人
assigneeUser: any; // 处理人
taskDefinitionKey: string; // 任务定义key
processInstanceId: string; // 流程实例id
processInstance: BpmProcessInstanceApi.ProcessInstanceVO; // 流程实例
parentTaskId: any; // 父任务id
children: any; // 子任务
formId: any; // 表单id
formName: any; // 表单名称
formConf: any; // 表单配置
formFields: any; // 表单字段
formVariables: any; // 表单变量
buttonsSetting: any; // 按钮设置
signEnable: any; // 签名设置
reasonRequire: any; // 原因设置
nodeType: any; // 节点类型
}
}

2
apps/web-antd/src/router/routes/modules/bpm.ts
View File

@ -49,7 +49,7 @@ const routes: RouteRecordRaw[] = [
{
path: '/bpm/manager/form/edit',
name: 'BpmFormEditor',
component: () => import('#/views/bpm/form/editor.vue'),
component: () => import('#/views/bpm/form/designer/index.vue'),
meta: {
title: '编辑流程表单',
activePath: '/bpm/manager/form',

2
apps/web-antd/src/utils/formCreate.ts
View File

@ -34,7 +34,7 @@ export const decodeFields = (fields: string[]) => {
export const setConfAndFields = (
designerRef: object,
conf: string,
fields: string,
fields: string | string[],
) => {
// @ts-ignore designerRef.value is dynamically added by form-create-designer
designerRef.value.setOption(JSON.parse(conf));

6
apps/web-antd/src/views/bpm/category/index.vue
View File

@ -6,11 +6,13 @@ import type {
import type { BpmCategoryApi } from '#/api/bpm/category';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@ -100,6 +102,10 @@ async function onDelete(row: BpmCategoryApi.CategoryVO) {
<template>
<Page auto-content-height>
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程分类">
<template #toolbar-tools>

20
apps/web-antd/src/views/bpm/form/editor.vue → apps/web-antd/src/views/bpm/form/designer/index.vue
View File

@ -1,5 +1,4 @@
<script lang="ts" setup>
// TODO @siye：editor 要不要放到独立的目录？form/designer ？
import { computed, onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
@ -12,19 +11,15 @@ import { getFormDetail } from '#/api/bpm/form';
import { useFormCreateDesigner } from '#/components/form-create';
import { router } from '#/router';
import { setConfAndFields } from '#/utils';
import Form from './modules/form.vue';
import Form from '#/views/bpm/form/modules/form.vue';
defineOptions({ name: 'BpmFormEditor' });
// TODO @siye：这里有 lint 告警
const props = defineProps<Props>();
interface Props {
copyId?: number;
const props = defineProps<{
copyId?: number | string;
id?: number;
type: 'copy' | 'create' | 'edit';
}
}>();
// 流程表单详情
const flowFormConfig = ref();
@ -85,7 +80,7 @@ const currentFormId = computed(() => {
});
// 加载表单配置
async function loadFormConfig(id: number) {
async function loadFormConfig(id: number | string) {
try {
const formDetail = await getFormDetail(id);
flowFormConfig.value = formDetail;
@ -107,10 +102,11 @@ async function initializeDesigner() {
}
if (id) {
await loadFormConfig(id);
await loadFormConfig(Number(id));
}
}
// 保存表单
function handleSave() {
formModalApi
.setData({
@ -121,7 +117,7 @@ function handleSave() {
.open();
}
// TODO @siye：一些必要的注释，稍微写写哈。保持风格的一致性；
// 返回列表页
function onBack() {
router.push({
path: '/bpm/manager/form',

37
apps/web-antd/src/views/bpm/form/index.vue
View File

@ -12,6 +12,7 @@ import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { $t } from '@vben/locales';
import FormCreate from '@form-create/ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
@ -119,7 +120,6 @@ async function onDetail(row: BpmFormApi.FormVO) {
/** 编辑 */
function onEdit(row: BpmFormApi.FormVO) {
console.warn(row);
router.push({
name: 'BpmFormEditor',
query: {
@ -165,11 +165,12 @@ watch(
<template>
<Page auto-content-height>
<DocAlert
title="审批接入（流程表单）"
url="https://doc.iocoder.cn/bpm/use-bpm-form/"
/>
<FormModal @success="onRefresh" />
<template #doc>
<DocAlert
title="审批接入（流程表单）"
url="https://doc.iocoder.cn/bpm/use-bpm-form/"
/>
</template>
<Grid table-title="流程表单">
<template #toolbar-tools>
<Button type="primary" @click="onCreate">
@ -177,28 +178,6 @@ watch(
{{ $t('ui.actionTitle.create', ['流程表单']) }}
</Button>
</template>
<!-- 摘要 -->
<!-- TODO @siye：这个是不是不应该有呀？ -->
<template #slot-summary="{ row }">
<div
class="flex flex-col py-2"
v-if="
row.processInstance.summary &&
row.processInstance.summary.length > 0
"
>
<div
v-for="(item, index) in row.processInstance.summary"
:key="index"
>
<span class="text-gray-500">
{{ item.key }} : {{ item.value }}
</span>
</div>
</div>
<div v-else>-</div>
</template>
</Grid>
<DetailModal
@ -209,7 +188,7 @@ watch(
}"
>
<div class="mx-4">
<form-create :option="formConfig.option" :rule="formConfig.rule" />
<FormCreate :option="formConfig.option" :rule="formConfig.rule" />
</div>
</DetailModal>
</Page>

24
apps/web-antd/src/views/bpm/form/modules/form.vue
View File

@ -39,28 +39,29 @@ const [Form, formApi] = useVbenForm({
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
// 表单验证
const { valid } = await formApi.validate();
if (!valid) return;
// 锁定模态框
modalApi.lock();
try {
// 获取表单数据
const data = (await formApi.getValues()) as BpmFormApi.FormVO;
// 编码表单配置和表单字段
data.conf = encodeConf(designerComponent);
data.fields = encodeFields(designerComponent);
// TODO @siye：这个是不是不用抽方法呀，直接写逻辑就完事啦。
const saveForm = async () => {
if (!formData.value?.id) {
return createForm(data);
}
return editorAction.value === 'copy'
// 保存表单数据
if (formData.value?.id) {
await (editorAction.value === 'copy'
? createForm(data)
: updateForm(data);
};
: updateForm(data));
} else {
await createForm(data);
}
await saveForm();
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@ -76,14 +77,15 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
const data = modalApi.getData<any>();
if (!data) return;
// 设置表单设计器组件
designerComponent.value = data.designer;
formData.value = data.formConfig;
editorAction.value = data.action;
// 如果是复制，表单名称后缀添加 _copy ，id 置空
if (editorAction.value === 'copy' && formData.value) {
formData.value = {
...formData.value,

5
apps/web-antd/src/views/bpm/group/data.ts
View File

@ -101,6 +101,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
onActionClick: OnActionClickFn<T>,
getMemberNames: (userIds: number[]) => string,
): VxeTableGridOptions['columns'] {
return [
{
@ -122,8 +123,8 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
field: 'userIds',
title: '成员',
minWidth: 200,
slots: {
default: 'userIds-cell',
formatter: (row) => {
return getMemberNames(row.cellValue);
},
},
{

33
apps/web-antd/src/views/bpm/group/index.vue
View File

@ -16,6 +16,7 @@ import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
import { getSimpleUserList } from '#/api/system/user';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
@ -30,7 +31,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(onActionClick, getMemberNames),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -42,21 +43,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
...formValues,
});
},
querySuccess: (params) => {
// TODO @siye：getLeaderName?: (userId: number) => string | undefined, 参考这个哈。
const { list } = params.response;
const userMap = new Map(
userList.value.map((user) => [user.id, user.nickname]),
);
list.forEach(
(item: BpmUserGroupApi.UserGroupVO & { nicknames?: string }) => {
item.nicknames = item.userIds
.map((userId) => userMap.get(userId))
.filter(Boolean)
.join('、');
},
);
},
},
},
rowConfig: {
@ -69,6 +55,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
} as VxeTableGridOptions<BpmUserGroupApi.UserGroupVO>,
});
/** 获取分组成员姓名 */
function getMemberNames(userIds: number[]) {
const userMap = new Map(
userList.value.map((user) => [user.id, user.nickname]),
);
return userIds
.map((userId) => userMap.get(userId))
.filter(Boolean)
.join('、');
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
@ -128,6 +125,10 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="用户分组">
<template #toolbar-tools>

8
apps/web-antd/src/views/bpm/processExpression/index.vue
View File

@ -106,8 +106,12 @@ async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
<template>
<Page auto-content-height>
<DocAlert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
<template #doc>
<DocAlert
title="流程表达式"
url="https://doc.iocoder.cn/bpm/expression/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程表达式">
<template #toolbar-tools>

4
apps/web-antd/src/views/bpm/processInstance/manager/index.vue
View File

@ -125,7 +125,9 @@ function onRefresh() {
<template>
<Page auto-content-height>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程实例" />

10
apps/web-antd/src/views/bpm/processListener/index.vue
View File

@ -108,10 +108,12 @@ async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
<template>
<Page auto-content-height>
<DocAlert
title="执行监听器、任务监听器"
url="https://doc.iocoder.cn/bpm/listener/"
/>
<template #doc>
<DocAlert
title="执行监听器、任务监听器"
url="https://doc.iocoder.cn/bpm/listener/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="流程监听器">
<template #toolbar-tools>

16
apps/web-antd/src/views/bpm/task/copy/index.vue
View File

@ -61,9 +61,8 @@ function onActionClick({
}
}
/** 办理任务 */
function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
// TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
/** 任务详情 */
function onDetail(row: BpmProcessInstanceApi.CopyVO) {
const query = {
id: row.processInstanceId,
...(row.activityId && { activityId: row.activityId }),
@ -82,11 +81,12 @@ function onRefresh() {
<template>
<Page auto-content-height>
<!-- TODO @siye：应该用 <template #doc>，这样高度可以被用进去哈 -->
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<template #doc>
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="抄送任务">

13
apps/web-antd/src/views/bpm/task/done/data.ts
View File

@ -2,8 +2,6 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';
import { useAccess } from '@vben/access';
import { getCategorySimpleList } from '#/api/bpm/category';
import {
DICT_TYPE,
@ -12,18 +10,15 @@ import {
getRangePickerDefaultProps,
} from '#/utils';
// TODO @siye：这个要去掉么？没用到
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '流程名称',
label: '任务名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称',
placeholder: '请输入任务名称',
allowClear: true,
},
},
@ -79,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},

23
apps/web-antd/src/views/bpm/task/done/index.vue
View File

@ -78,18 +78,19 @@ function onRefresh() {
<template>
<Page auto-content-height>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<template #doc>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
</template>
<FormModal @success="onRefresh" />
<Grid table-title="已办任务">
<!-- 摘要 -->
<template #slot-summary="{ row }">

12
apps/web-antd/src/views/bpm/task/manager/data.ts
View File

@ -33,19 +33,11 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},
{
field: 'processInstance.summary',
title: '摘要',
minWidth: 200,
slots: {
default: 'slot-summary',
},
},
{
field: 'processInstance.startUser.nickname',
title: '发起人',

47
apps/web-antd/src/views/bpm/task/manager/index.vue
View File

@ -16,7 +16,7 @@ import { useGridColumns, useGridFormSchema } from './data';
defineOptions({ name: 'BpmManagerTask' });
const [Grid, gridApi] = useVbenVxeGrid({
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
@ -45,11 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
cellConfig: {
height: 64,
},
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
} as VxeTableGridOptions<BpmTaskApi.TaskManagerVO>,
});
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
function onActionClick({
code,
row,
}: OnActionClickParams<BpmTaskApi.TaskManagerVO>) {
switch (code) {
case 'history': {
onHistory(row);
@ -59,50 +62,22 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
}
/** 查看历史 */
function onHistory(row: BpmTaskApi.TaskVO) {
function onHistory(row: BpmTaskApi.TaskManagerVO) {
console.warn(row);
router.push({
name: 'BpmProcessInstanceDetail',
query: {
// TODO @siye：数据类型，会爆红哈；
id: row.processInstance.id,
},
});
}
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
</script>
<template>
<Page auto-content-height>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
<FormModal @success="onRefresh" />
<Grid table-title="流程任务">
<!-- 摘要 -->
<!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
<template #slot-summary="{ row }">
<div
class="flex flex-col py-2"
v-if="
row.processInstance.summary &&
row.processInstance.summary.length > 0
"
>
<div
v-for="(item, index) in row.processInstance.summary"
:key="index"
>
<span class="text-gray-500">
{{ item.key }} : {{ item.value }}
</span>
</div>
</div>
<div v-else>-</div>
</template>
</Grid>
<template #doc>
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
</template>
<Grid table-title="流程任务" />
</Page>
</template>

14
apps/web-antd/src/views/bpm/task/todo/data.ts
View File

@ -14,10 +14,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '流程名称',
label: '任务名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称',
placeholder: '请输入任务名称',
allowClear: true,
},
},
@ -72,8 +72,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},
@ -81,9 +81,9 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
field: 'processInstance.summary',
title: '摘要',
minWidth: 200,
slots: {
default: 'slot-summary',
},
// slots: {
// default: 'slot-summary',
// },
},
{
field: 'processInstance.startUser.nickname',

24
apps/web-antd/src/views/bpm/task/todo/index.vue
View File

@ -78,18 +78,18 @@ function onRefresh() {
<template>
<Page auto-content-height>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<FormModal @success="onRefresh" />
<template #doc>
<DocAlert
title="审批通过、不通过、驳回"
url="https://doc.iocoder.cn/bpm/task-todo-done/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
<DocAlert
title="审批转办、委派、抄送"
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
/>
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
</template>
<Grid table-title="待办任务">
<!-- 摘要 -->
<!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->