oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'yudao/dev' into dev

Browse Source
This commit is contained in:
jason
2025-05-26 16:44:20 +08:00
parent 11f32258e6 67af898baf
commit ef93c9824a
96 changed files with 5288 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>

2
apps/web-antd/src/views/bpm/form/data.ts
View File

@@ -105,7 +105,7 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
{
field: 'operation',
title: '操作',
minWidth: 150,
minWidth: 200,
align: 'center',
fixed: 'right',
cellRender: {

22
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;
id?: number;
const props = defineProps<{
copyId?: number | string;
id?: number | string;
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>

35
apps/web-antd/src/views/bpm/oa/leave/data.ts
View File

@@ -1,9 +1,15 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmCategoryApi } from '#/api/bpm/category';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { useAccess } from '@vben/access';
import dayjs from 'dayjs';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
@@ -198,3 +204,32 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
},
];
}
/** 详情 */
export function useDetailFormSchema(): DescriptionItemSchema[] {
return [
{
label: '请假类型',
field: 'type',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
value: data?.type,
}),
},
{
label: '开始时间',
field: 'startTime',
content: (data) => dayjs(data?.startTime).format('YYYY-MM-DD HH:mm:ss'),
},
{
label: '结束时间',
field: 'endTime',
content: (data) => dayjs(data?.endTime).format('YYYY-MM-DD HH:mm:ss'),
},
{
label: '原因',
field: 'reason',
},
];
}

57
apps/web-antd/src/views/bpm/oa/leave/detail.vue
View File

@@ -1,11 +1,54 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
<script setup lang="ts">
import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getLeave } from '#/api/bpm/oa/leave';
import { ContentWrap } from '#/components/content-wrap';
import { Description } from '#/components/description';
import { useDetailFormSchema } from './data';
const props = defineProps<{
id: string;
}>();
const datailLoading = ref(false);
const detailData = ref<BpmOALeaveApi.LeaveVO>();
const { query } = useRoute();
const queryId = computed(() => query.id as string);
const getDetailData = async () => {
try {
datailLoading.value = true;
detailData.value = await getLeave(Number(props.id || queryId.value));
} finally {
datailLoading.value = false;
}
};
onMounted(() => {
getDetailData();
});
</script>
<template>
<Page>
<div>
<h1>请假详情</h1>
</div>
</Page>
<ContentWrap class="m-2">
<Description
:data="detailData"
:schema="useDetailFormSchema()"
:component-props="{
column: 1,
bordered: true,
size: 'small',
}"
/>
</ContentWrap>
</template>
<style lang="scss" scoped>
:deep(.ant-descriptions-item-label) {
width: 150px;
}
</style>

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>

39
apps/web-antd/src/views/bpm/processInstance/create/index.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import type { BpmCategoryApi } from '#/api/bpm/category';
import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
import { computed, nextTick, onMounted, ref } from 'vue';
@@ -33,7 +34,9 @@ const processInstanceId: any = route.query.processInstanceId; // 流程实例编
const loading = ref(true); // 加载中
const categoryList: any = ref([]); // 分类的列表
const activeCategory = ref(''); // 当前选中的分类
const processDefinitionList = ref([]); // 流程定义的列表
const processDefinitionList = ref<
BpmProcessDefinitionApi.ProcessDefinitionVO[]
>([]); // 流程定义的列表
// 实现 groupBy 功能
const groupBy = (array: any[], key: string) => {
@@ -107,8 +110,12 @@ const handleGetProcessDefinitionList = async () => {
}
};
/** 用于存储搜索过滤后的流程定义 */
const filteredProcessDefinitionList = ref<
BpmProcessDefinitionApi.ProcessDefinitionVO[]
>([]);
/** 搜索流程 */
const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
const handleQuery = () => {
if (searchName.value.trim()) {
// 如果有搜索关键字，进行过滤
@@ -150,10 +157,15 @@ const processDefinitionGroup: any = computed(() => {
const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
// 按照 categoryList 的顺序重新组织数据
const orderedGroup = {};
categoryList.value.forEach((category: any) => {
const orderedGroup: Record<
string,
BpmProcessDefinitionApi.ProcessDefinitionVO[]
> = {};
categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
if (grouped[category.code]) {
orderedGroup[category.code] = grouped[category.code];
orderedGroup[category.code] = grouped[
category.code
] as BpmProcessDefinitionApi.ProcessDefinitionVO[];
}
});
return orderedGroup;
@@ -191,7 +203,7 @@ const availableCategories = computed(() => {
const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
// 过滤出有流程的分类
return categoryList.value.filter((category: CategoryVO) =>
return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
availableCategoryCodes.includes(category.code),
);
});
@@ -229,11 +241,7 @@ onMounted(() => {
allow-clear
@input="handleQuery"
@clear="handleQuery"
>
<template #prefix>
<IconifyIcon icon="mdi:search-web" />
</template>
</InputSearch>
/>
</div>
</template>
@@ -289,15 +297,6 @@ onMounted(() => {
</Tooltip>
</span>
</div>
<!-- TODO: 发起流程按钮 -->
<!-- <template #actions>
<div class="flex justify-end px-4">
<Button type="link" @click="handleSelect(definition)">
发起流程
</Button>
</div>
</template> -->
</Card>
</Col>
</Row>

35
apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
View File

@@ -20,13 +20,14 @@ import {
BpmCandidateStrategyEnum,
BpmFieldPermissionType,
BpmModelFormType,
BpmModelType,
BpmNodeIdEnum,
BpmNodeTypeEnum,
decodeFields,
setConfAndFields2,
} from '#/utils';
import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
// 类型定义
interface ProcessFormData {
rule: any[];
@@ -80,8 +81,8 @@ const detailForm = ref<ProcessFormData>({
const fApi = ref<ApiAttrs>();
const startUserSelectTasks = ref<UserTask[]>([]);
const startUserSelectAssignees = ref<Record<number, string[]>>({});
const tempStartUserSelectAssignees = ref<Record<number, string[]>>({});
const startUserSelectAssignees = ref<Record<string, string[]>>({});
const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
const bpmnXML = ref<string | undefined>(undefined);
const simpleJson = ref<string | undefined>(undefined);
const timelineRef = ref<any>();
@@ -273,9 +274,7 @@ const handleCancel = () => {
/** 选择发起人 */
const selectUserConfirm = (activityId: string, userList: any[]) => {
if (!activityId || !Array.isArray(userList)) return;
startUserSelectAssignees.value[Number(activityId)] = userList.map(
(item) => item.id,
);
startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
};
defineExpose({ initProcessInfo });
@@ -284,12 +283,11 @@ defineExpose({ initProcessInfo });
<template>
<Card
:title="getTitle"
class="h-full overflow-hidden"
:body-style="{
padding: '12px',
height: '100%',
display: 'flex',
flexDirection: 'column',
paddingBottom: '62px', // 预留 actions 区域高度
height: 'calc(100% - 112px)',
paddingTop: '12px',
overflowY: 'auto',
}"
>
<template #extra>
@@ -334,18 +332,25 @@ defineExpose({ initProcessInfo });
</Tabs.TabPane>
<Tabs.TabPane tab="流程图" key="flow" class="flex flex-1 overflow-hidden">
<div>待开发</div>
<div class="w-full">
<ProcessInstanceSimpleViewer
:simple-json="simpleJson"
v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
/>
</div>
</Tabs.TabPane>
</Tabs>
<template #actions>
<template v-if="activeTab === 'form'">
<Space wrap class="flex h-[50px] w-full justify-center">
<Space wrap class="flex w-full justify-center">
<Button plain type="primary" @click="submitForm">
<IconifyIcon icon="mdi:check" />&nbsp; 发起
<IconifyIcon icon="icon-park-outline:check" />
发起
</Button>
<Button plain type="default" @click="handleCancel">
<IconifyIcon icon="mdi:close" />&nbsp; 取消
<IconifyIcon icon="icon-park-outline:close" />
取消
</Button>
</Space>
</template>

152
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@@ -2,21 +2,12 @@
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import type { SystemUserApi } from '#/api/system/user';
import { nextTick, onMounted, ref } from 'vue';
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import {
Avatar,
Button,
Card,
Col,
message,
Row,
TabPane,
Tabs,
} from 'ant-design-vue';
import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
import {
getApprovalDetail as getApprovalDetailApi,
@@ -39,6 +30,10 @@ import {
SvgBpmRunningIcon,
} from '#/views/bpm/processInstance/detail/modules/icons';
import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
import ProcessInstanceOperationButton from './modules/operation-button.vue';
import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
import BpmProcessInstanceTaskList from './modules/task-list.vue';
import ProcessInstanceTimeline from './modules/time-line.vue';
defineOptions({ name: 'BpmProcessInstanceDetail' });
@@ -71,7 +66,7 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
const processDefinition = ref<any>({}); // 流程定义
const processModelView = ref<any>({}); // 流程模型视图
// const operationButtonRef = ref(); // 操作按钮组件 ref
const operationButtonRef = ref(); // 操作按钮组件 ref
const auditIconsMap: {
[key: string]:
| typeof SvgBpmApproveIcon
@@ -99,7 +94,7 @@ const detailForm = ref({
const writableFields: Array<string> = []; // 表单可以编辑的字段
/** 加载流程实例 */
const BusinessFormComponent = ref<any>(null); // 异步组件
const BusinessFormComponent = shallowRef<any>(null); // 异步组件
/** 获取详情 */
async function getDetail() {
@@ -161,6 +156,7 @@ async function getApprovalDetail() {
});
} else {
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
BusinessFormComponent.value = registerComponent(
data?.processDefinition?.formCustomViewPath || '',
);
@@ -168,6 +164,9 @@ async function getApprovalDetail() {
// 获取审批节点，显示 Timeline 的数据
activityNodes.value = data.activityNodes;
// 获取待办任务显示操作按钮
operationButtonRef.value?.loadTodoTask(data.todoTask);
} catch {
message.error('获取审批详情失败！');
} finally {
@@ -221,6 +220,20 @@ const setFieldPermission = (field: string, permission: string) => {
/** 当前的Tab */
const activeTab = ref('form');
const taskListRef = ref();
// 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表
watch(
() => activeTab.value,
(newVal) => {
if (newVal === 'record') {
// 如果切换到流转记录标签，刷新任务列表
nextTick(() => {
taskListRef.value?.refresh();
});
}
},
);
/** 初始化 */
const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
@@ -234,9 +247,7 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<Card
class="h-full"
:body-style="{
height: 'calc(100% - 140px)',
overflowY: 'auto',
paddingTop: '12px',
}"
@@ -291,18 +302,25 @@ onMounted(async () => {
</div>
<!-- 流程操作 -->
<div class="flex-1">
<Tabs v-model:active-key="activeTab" class="mt-0">
<TabPane tab="审批详情" key="form">
<Row :gutter="[48, 24]">
<Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
<div class="process-tabs-container flex flex-1 flex-col">
<Tabs v-model:active-key="activeTab" class="mt-0 h-full">
<TabPane tab="审批详情" key="form" class="tab-pane-content">
<Row :gutter="[48, 24]" class="h-full">
<Col
:xs="24"
:sm="24"
:md="18"
:lg="18"
:xl="16"
class="h-full"
>
<!-- 流程表单 -->
<div
v-if="
processDefinition?.formType === BpmModelFormType.NORMAL
"
class="h-full"
>
<!-- v-model="detailForm.value" -->
<form-create
v-model="detailForm.value"
v-model:api="fApi"
@@ -315,40 +333,110 @@ onMounted(async () => {
v-if="
processDefinition?.formType === BpmModelFormType.CUSTOM
"
class="h-full"
>
<BusinessFormComponent :id="processInstance?.businessKey" />
</div>
</Col>
<Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
<div class="mt-2">
<Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
<div class="mt-4 h-full">
<ProcessInstanceTimeline :activity-nodes="activityNodes" />
</div>
</Col>
</Row>
</TabPane>
<TabPane tab="流程图" key="diagram">
<div>待开发</div>
<TabPane tab="流程图" key="diagram" class="tab-pane-content">
<div class="h-full">
<ProcessInstanceSimpleViewer
v-show="
processDefinition.modelType &&
processDefinition.modelType === BpmModelType.SIMPLE
"
:loading="processInstanceLoading"
:model-view="processModelView"
/>
<ProcessInstanceBpmnViewer
v-show="
processDefinition.modelType &&
processDefinition.modelType === BpmModelType.BPMN
"
:loading="processInstanceLoading"
:model-view="processModelView"
/>
</div>
</TabPane>
<TabPane tab="流转记录" key="record">
<div>待开发</div>
<TabPane tab="流转记录" key="record" class="tab-pane-content">
<div class="h-full">
<BpmProcessInstanceTaskList
ref="taskListRef"
:loading="processInstanceLoading"
:id="id"
/>
</div>
</TabPane>
<!-- TODO 待开发 -->
<TabPane tab="流转评论" key="comment" v-if="false">
<div>待开发</div>
<TabPane
tab="流转评论"
key="comment"
v-if="false"
class="tab-pane-content"
>
<div class="h-full">待开发</div>
</TabPane>
</Tabs>
</div>
</div>
<template #actions>
<div class="flex justify-start gap-x-2 p-4">
<Button type="primary">驳回</Button>
<Button type="primary">同意</Button>
<div class="px-4">
<ProcessInstanceOperationButton
ref="operationButtonRef"
:process-instance="processInstance"
:process-definition="processDefinition"
:user-options="userOptions"
:normal-form="detailForm"
:normal-form-api="fApi"
:writable-fields="writableFields"
@success="getDetail"
/>
</div>
</template>
</Card>
</Page>
</template>
<style lang="scss" scoped>
.ant-tabs-content {
height: 100%;
}
.process-tabs-container {
display: flex;
flex-direction: column;
height: 100%;
}
:deep(.ant-tabs) {
display: flex;
flex-direction: column;
height: 100%;
}
:deep(.ant-tabs-content) {
flex: 1;
overflow-y: auto;
}
:deep(.ant-tabs-tabpane) {
height: 100%;
}
.tab-pane-content {
height: calc(100vh - 420px);
padding-right: 12px;
overflow: hidden auto;
}
</style>

9
apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
defineOptions({ name: 'ProcessInstanceBpmnViewer' });
</script>
<template>
<div>
<h1>BPMN Viewer</h1>
</div>
</template>

1392
apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue Normal file
View File

File diff suppressed because it is too large Load Diff

88
apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue Normal file
View File

@@ -0,0 +1,88 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Button, message, Space, Tooltip } from 'ant-design-vue';
import Vue3Signature from 'vue3-signature';
import { uploadFile } from '#/api/infra/file';
import { download } from '#/utils';
defineOptions({
name: 'BpmProcessInstanceSignature',
});
const emits = defineEmits(['success']);
const [Modal, modalApi] = useVbenModal({
title: '流程签名',
onOpenChange(visible) {
if (!visible) {
modalApi.close();
}
},
onConfirm: () => {
submit();
},
});
const signature = ref<InstanceType<typeof Vue3Signature>>();
const open = async () => {
modalApi.open();
};
defineExpose({ open });
const submit = async () => {
message.success({
content: '签名上传中请稍等。。。',
});
const signFileUrl = await uploadFile({
file: download.base64ToFile(
signature?.value?.save('image/jpeg') || '',
'签名',
),
});
emits('success', signFileUrl);
modalApi.close();
};
</script>
<template>
<Modal class="h-[500px] w-[900px]">
<div class="mb-2 flex justify-end">
<Space>
<Tooltip title="撤销上一步操作">
<Button @click="signature?.undo()">
<template #icon>
<IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
</template>
撤销
</Button>
</Tooltip>
<Tooltip title="清空画布">
<Button @click="signature?.clear()">
<template #icon>
<IconifyIcon
icon="mdi:delete-outline"
class="mb-[4px] size-[16px]"
/>
</template>
<span>清除</span>
</Button>
</Tooltip>
</Space>
</div>
<Vue3Signature
class="mx-auto border-[1px] border-solid border-gray-300"
ref="signature"
w="874px"
h="324px"
/>
</Modal>
</template>

9
apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup lang="ts">
defineOptions({ name: 'ProcessInstanceSimpleViewer' });
</script>
<template>
<div>
<h1>Simple BPM Viewer</h1>
</div>
</template>

222
apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue Normal file
View File

@@ -0,0 +1,222 @@
<script setup lang="ts">
import type { formCreate } from '@form-create/antd-designer';
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';
import { nextTick, onMounted, ref, shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
defineOptions({
name: 'BpmProcessInstanceTaskList',
});
const props = defineProps<{
id: string;
loading: boolean;
}>();
// 使用shallowRef减少不必要的深度响应
const columns = shallowRef([
{
field: 'name',
title: '审批节点',
minWidth: 150,
},
{
field: 'approver',
title: '审批人',
slots: {
default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
return row.assigneeUser?.nickname || row.ownerUser?.nickname;
},
},
minWidth: 180,
},
{
field: 'createTime',
title: '开始时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'endTime',
title: '结束时间',
formatter: 'formatDateTime',
minWidth: 180,
},
{
field: 'status',
title: '审批状态',
minWidth: 150,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.BPM_TASK_STATUS },
},
},
{
field: 'reason',
title: '审批建议',
slots: {
default: 'slot-reason',
},
minWidth: 200,
},
{
field: 'durationInMillis',
title: '耗时',
minWidth: 180,
slots: {
default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
return formatPast2(row.durationInMillis);
},
},
},
]);
// Grid配置和API
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: columns.value,
keepSource: true,
showFooter: true,
border: true,
height: 'auto',
proxyConfig: {
ajax: {
query: async () => {
return await getTaskListByProcessInstanceId(props.id);
},
},
},
rowConfig: {
keyField: 'id',
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
cellConfig: {
height: 60,
},
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
});
/**
* 刷新表格数据
*/
const refresh = (): void => {
gridApi.query();
};
// 表单相关
interface TaskForm {
rule: any[];
option: Record<string, any>;
value: Record<string, any>;
}
// 定义表单组件引用类型
// 使用明确的类型定义
const formRef = ref<formCreate>();
const taskForm = ref<TaskForm>({
rule: [],
option: {},
value: {},
});
/**
* 显示表单详情
* @param row 任务数据
*/
async function showFormDetail(row: BpmTaskApi.TaskManagerVO): Promise<void> {
// 设置表单配置和表单字段
taskForm.value = {
rule: [],
option: {},
value: row,
};
setConfAndFields2(
taskForm,
row.formConf,
row.formFields || [],
row.formVariables || {},
);
// 打开弹窗
modalApi.open();
// 等待表单渲染
await nextTick();
// 获取表单API实例
const formApi = formRef.value?.fapi;
if (!formApi) return;
// 设置表单不可编辑
formApi.btn.show(false);
formApi.resetBtn.show(false);
formApi.disabled(true);
}
// 表单查看模态框
const [Modal, modalApi] = useVbenModal({
title: '查看表单',
footer: false,
});
onMounted(() => {
refresh();
});
// 暴露刷新方法给父组件
defineExpose({
refresh,
});
</script>
<template>
<div class="flex h-full flex-col">
<Grid>
<template #slot-reason="{ row }">
<div class="flex flex-wrap items-center justify-center">
<span v-if="row.reason">{{ row.reason }}</span>
<span v-else>-</span>
<Button
v-if="row.formId > 0"
type="primary"
@click="showFormDetail(row)"`
size="small"
ghost
class="ml-1"
>
<IconifyIcon icon="ep:document" />
<span class="!ml-[2px] text-[12px]">查看表单</span>
</Button>
</div>
</template>
</Grid>
<Modal class="w-[800px]">
<form-create
ref="formRef"
v-model="taskForm.value"
:option="taskForm.option"
:rule="taskForm.rule"
/>
</Modal>
</div>
</template>

2
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@@ -43,7 +43,7 @@ const statusIconMap: Record<
// 审批未开始
'-1': { color: '#909398', icon: 'mdi:clock-outline' },
// 待审批
'0': { color: '#00b32a', icon: 'mdi:loading' },
'0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
// 审批中
'1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
// 审批通过

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

@@ -105,7 +105,9 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
content: '请输入取消原因',
title: '取消流程',
modelPropName: 'value',
});
})
.then(() => {})
.catch(() => {});
}
/** 查看流程实例 */
@@ -125,9 +127,10 @@ 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="流程实例" />
</Page>
</template>

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>

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

@@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
cellConfig: {
height: 64,
},
} as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
} as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
});
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
switch (code) {
case 'detail': {
onDetail(row);
@@ -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>

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

@@ -2,6 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmTaskApi } from '#/api/bpm/task';
import { h } from 'vue';
import { useAccess } from '@vben/access';
import { getCategorySimpleList } from '#/api/bpm/category';
@@ -14,10 +16,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '流程名称',
label: '任务名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称',
placeholder: '请输入任务名称',
allowClear: true,
},
},
@@ -72,8 +74,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
): VxeTableGridOptions['columns'] {
return [
{
field: 'name',
title: '流程名称',
field: 'processInstance.name',
title: '流程',
minWidth: 200,
fixed: 'left',
},
@@ -82,7 +84,28 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
title: '摘要',
minWidth: 200,
slots: {
default: 'slot-summary',
default: ({ row }) => {
const summary = row?.processInstance?.summary;
if (!summary || summary.length === 0) {
return '-';
}
return summary.map((item: any) => {
return h(
'div',
{
key: item.key,
},
h(
'span',
{
class: 'text-gray-500',
},
`${item.key} : ${item.value}`,
),
);
});
},
},
},
{

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

@@ -78,40 +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" />
<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/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="待办任务" />
</Page>
</template>