Pre Merge pull request !103 from 子夜/feature/bpm-process-instance
子夜
Gitee
commit
b32ca8d37b
|
|
@ -0,0 +1,48 @@
|
|||
import type { PageParam, PageResult } from '@vben/request';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace BpmFormApi {
|
||||
export interface FormVO {
|
||||
id?: number | undefined;
|
||||
name: string;
|
||||
conf: string;
|
||||
fields: string[];
|
||||
status: number;
|
||||
remark: string;
|
||||
createTime: string;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取表单分页列表 */
|
||||
export async function getFormPage(params: PageParam) {
|
||||
return requestClient.get<PageResult<BpmFormApi.FormVO>>('/bpm/form/page', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取表单详情 */
|
||||
export async function getFormDetail(id: number) {
|
||||
return requestClient.get<BpmFormApi.FormVO>(`/bpm/form/get?id=${id}`);
|
||||
}
|
||||
|
||||
/** 创建表单 */
|
||||
export async function createForm(data: BpmFormApi.FormVO) {
|
||||
return requestClient.post('/bpm/form/create', data);
|
||||
}
|
||||
|
||||
/** 更新表单 */
|
||||
export async function updateForm(data: BpmFormApi.FormVO) {
|
||||
return requestClient.put('/bpm/form/update', data);
|
||||
}
|
||||
|
||||
/** 删除表单 */
|
||||
export async function deleteForm(id: number) {
|
||||
return requestClient.delete(`/bpm/form/delete?id=${id}`);
|
||||
}
|
||||
|
||||
/** 获取表单简单列表 */
|
||||
export async function getFormSimpleList() {
|
||||
return requestClient.get<BpmFormApi.FormVO[]>('/bpm/form/simple-list');
|
||||
}
|
||||
|
|
@ -47,6 +47,24 @@ const routes: RouteRecordRaw[] = [
|
|||
};
|
||||
},
|
||||
},
|
||||
|
||||
/** 编辑流程表单 */
|
||||
{
|
||||
path: '/bpm/manager/form/edit',
|
||||
name: 'BpmFormEditor',
|
||||
component: () => import('#/views/bpm/form/editor.vue'),
|
||||
meta: {
|
||||
title: '编辑流程表单',
|
||||
activePath: '/bpm/manager/form',
|
||||
},
|
||||
props: (route) => {
|
||||
return {
|
||||
id: route.query.id,
|
||||
type: route.query.type,
|
||||
copyId: route.query.copyId,
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { BpmFormApi } from '#/api/bpm/form';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 新增/修改的表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
triggerFields: [''],
|
||||
show: () => false,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '表单名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入表单名称',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
|
||||
buttonStyle: 'solid',
|
||||
optionType: 'button',
|
||||
},
|
||||
rules: z.number().default(CommonStatusEnum.ENABLE),
|
||||
},
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '表单名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入表单名称',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = BpmFormApi.FormVO>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '表单名称',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
minWidth: 200,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.COMMON_STATUS },
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
minWidth: 200,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 150,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '流程名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'copy',
|
||||
text: $t('ui.actionTitle.copy'),
|
||||
show: hasAccessByCodes(['bpm:form:update']),
|
||||
},
|
||||
{
|
||||
code: 'edit',
|
||||
text: $t('ui.actionTitle.edit'),
|
||||
show: hasAccessByCodes(['bpm:form:update']),
|
||||
},
|
||||
{
|
||||
code: 'detail',
|
||||
text: $t('ui.actionTitle.detail'),
|
||||
show: hasAccessByCodes(['bpm:form:query']),
|
||||
},
|
||||
{
|
||||
code: 'delete',
|
||||
text: $t('ui.actionTitle.delete'),
|
||||
show: hasAccessByCodes(['bpm:form:delete']),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import FcDesigner from '@form-create/antd-designer';
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
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';
|
||||
|
||||
defineOptions({ name: 'BpmFormEditor' });
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Props {
|
||||
copyId?: number;
|
||||
id?: number;
|
||||
type: 'copy' | 'create' | 'edit';
|
||||
}
|
||||
|
||||
// 流程表单详情
|
||||
const flowFormConfig = ref();
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const designerRef = ref<InstanceType<typeof FcDesigner>>();
|
||||
|
||||
// 表单设计器配置
|
||||
const designerConfig = ref({
|
||||
switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
|
||||
autoActive: true, // 是否自动选中拖入的组件
|
||||
useTemplate: false, // 是否生成vue2语法的模板组件
|
||||
formOptions: {
|
||||
form: {
|
||||
labelWidth: '100px', // 设置默认的 label 宽度为 100px
|
||||
},
|
||||
}, // 定义表单配置默认值
|
||||
fieldReadonly: false, // 配置field是否可以编辑
|
||||
hiddenDragMenu: false, // 隐藏拖拽操作按钮
|
||||
hiddenDragBtn: false, // 隐藏拖拽按钮
|
||||
hiddenMenu: [], // 隐藏部分菜单
|
||||
hiddenItem: [], // 隐藏部分组件
|
||||
hiddenItemConfig: {}, // 隐藏组件的部分配置项
|
||||
disabledItemConfig: {}, // 禁用组件的部分配置项
|
||||
showSaveBtn: false, // 是否显示保存按钮
|
||||
showConfig: true, // 是否显示右侧的配置界面
|
||||
showBaseForm: true, // 是否显示组件的基础配置表单
|
||||
showControl: true, // 是否显示组件联动
|
||||
showPropsForm: true, // 是否显示组件的属性配置表单
|
||||
showEventForm: true, // 是否显示组件的事件配置表单
|
||||
showValidateForm: true, // 是否显示组件的验证配置表单
|
||||
showFormConfig: true, // 是否显示表单配置
|
||||
showInputData: true, // 是否显示录入按钮
|
||||
showDevice: true, // 是否显示多端适配选项
|
||||
appendConfigData: [], // 定义渲染规则所需的formData
|
||||
});
|
||||
|
||||
useFormCreateDesigner(designerRef); // 表单设计器增强
|
||||
|
||||
// 计算属性：获取当前需要加载的表单ID
|
||||
const currentFormId = computed(() => {
|
||||
switch (props.type) {
|
||||
case 'copy': {
|
||||
return props.copyId;
|
||||
}
|
||||
case 'create':
|
||||
case 'edit': {
|
||||
return props.id;
|
||||
}
|
||||
default: {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 加载表单配置
|
||||
async function loadFormConfig(id: number) {
|
||||
try {
|
||||
const formDetail = await getFormDetail(id);
|
||||
flowFormConfig.value = formDetail;
|
||||
if (designerRef.value) {
|
||||
setConfAndFields(designerRef, formDetail.conf, formDetail.fields);
|
||||
}
|
||||
} catch {
|
||||
message.error('加载表单配置失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化设计器
|
||||
async function initializeDesigner() {
|
||||
const id = currentFormId.value;
|
||||
|
||||
if (props.type === 'copy' && !id) {
|
||||
message.error('复制ID不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
if (id) {
|
||||
await loadFormConfig(id);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
formModalApi
|
||||
.setData({
|
||||
designer: designerRef.value,
|
||||
formConfig: flowFormConfig.value,
|
||||
action: props.type,
|
||||
})
|
||||
.open();
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
router.push({
|
||||
path: '/bpm/manager/form',
|
||||
query: {
|
||||
refresh: '1',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initializeDesigner();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormModal @success="onBack" />
|
||||
|
||||
<FcDesigner class="my-designer" ref="designerRef" :config="designerConfig">
|
||||
<template #handle>
|
||||
<Button size="small" type="primary" @click="handleSave">
|
||||
<IconifyIcon icon="mdi:content-save" />
|
||||
保存
|
||||
</Button>
|
||||
</template>
|
||||
</FcDesigner>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-designer {
|
||||
height: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,34 +1,215 @@
|
|||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { BpmFormApi } from '#/api/bpm/form';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { deleteForm, getFormDetail, getFormPage } from '#/api/bpm/form';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { router } from '#/router';
|
||||
import { setConfAndFields2 } from '#/utils';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmForm' });
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getFormPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
cellConfig: {
|
||||
height: 64,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmFormApi.FormVO>,
|
||||
});
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({ code, row }: OnActionClickParams<BpmFormApi.FormVO>) {
|
||||
switch (code) {
|
||||
case 'copy': {
|
||||
onCopy(row);
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
onDelete(row);
|
||||
break;
|
||||
}
|
||||
case 'detail': {
|
||||
onDetail(row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 复制 */
|
||||
function onCopy(row: BpmFormApi.FormVO) {
|
||||
router.push({
|
||||
name: 'BpmFormEditor',
|
||||
query: {
|
||||
copyId: row.id,
|
||||
type: 'copy',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除 */
|
||||
async function onDelete(row: BpmFormApi.FormVO) {
|
||||
const hideLoading = message.loading({
|
||||
content: $t('ui.actionMessage.deleting', [row.id]),
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
try {
|
||||
await deleteForm(row.id as number);
|
||||
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
|
||||
onRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
/** 详情 */
|
||||
const formConfig = ref<any>({});
|
||||
async function onDetail(row: BpmFormApi.FormVO) {
|
||||
formConfig.value = await getFormDetail(row.id as number);
|
||||
|
||||
setConfAndFields2(
|
||||
formConfig.value,
|
||||
formConfig.value.conf,
|
||||
formConfig.value.fields,
|
||||
);
|
||||
detailModalApi.open();
|
||||
}
|
||||
|
||||
/** 编辑 */
|
||||
function onEdit(row: BpmFormApi.FormVO) {
|
||||
console.warn(row);
|
||||
router.push({
|
||||
name: 'BpmFormEditor',
|
||||
query: {
|
||||
id: row.id,
|
||||
type: 'edit',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 新增 */
|
||||
function onCreate() {
|
||||
router.push({
|
||||
name: 'BpmFormEditor',
|
||||
query: {
|
||||
type: 'create',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 详情弹窗 */
|
||||
const [DetailModal, detailModalApi] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
footer: false,
|
||||
});
|
||||
|
||||
/** 检测路由参数 */
|
||||
const route = useRoute();
|
||||
watch(
|
||||
() => route.query.refresh,
|
||||
(val) => {
|
||||
if (val === '1') {
|
||||
onRefresh();
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Page auto-content-height>
|
||||
<DocAlert
|
||||
title="审批接入（流程表单）"
|
||||
url="https://doc.iocoder.cn/bpm/use-bpm-form/"
|
||||
/>
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="流程表单">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
{{ $t('ui.actionTitle.create', ['流程表单']) }}
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<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
|
||||
title="流程表单详情"
|
||||
class="w-[800px]"
|
||||
:body-style="{
|
||||
maxHeight: '100px',
|
||||
}"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/form/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/form/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
<div class="mx-4">
|
||||
<form-create :option="formConfig.option" :rule="formConfig.rule" />
|
||||
</div>
|
||||
</DetailModal>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
<script lang="ts" setup>
|
||||
import type { FcDesigner } from '@form-create/antd-designer';
|
||||
|
||||
import type { BpmFormApi } from '#/api/bpm/form';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createForm, updateForm } from '#/api/bpm/form';
|
||||
import { $t } from '#/locales';
|
||||
import { encodeConf, encodeFields } from '#/utils';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const designerComponent = ref<InstanceType<typeof FcDesigner>>();
|
||||
const formData = ref<BpmFormApi.FormVO>();
|
||||
const editorAction = ref<string>();
|
||||
|
||||
const getTitle = computed(() => {
|
||||
if (!formData.value?.id) {
|
||||
return $t('ui.actionTitle.create', ['流程表单']);
|
||||
}
|
||||
return editorAction.value === 'copy'
|
||||
? $t('ui.actionTitle.copy', ['流程表单'])
|
||||
: $t('ui.actionTitle.edit', ['流程表单']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
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);
|
||||
|
||||
const saveForm = async () => {
|
||||
if (!formData.value?.id) {
|
||||
return createForm(data);
|
||||
}
|
||||
return editorAction.value === 'copy'
|
||||
? createForm(data)
|
||||
: updateForm(data);
|
||||
};
|
||||
|
||||
await saveForm();
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
designerComponent.value = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
const data = modalApi.getData<any>();
|
||||
if (!data) return;
|
||||
|
||||
designerComponent.value = data.designer;
|
||||
formData.value = data.formConfig;
|
||||
editorAction.value = data.action;
|
||||
|
||||
if (editorAction.value === 'copy' && formData.value) {
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
name: `${formData.value.name}_copy`,
|
||||
id: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
if (formData.value) {
|
||||
await formApi.setValues(formData.value);
|
||||
}
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-[600px]">
|
||||
<Form class="mx-4" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -42,6 +42,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
|
|||
...formValues,
|
||||
});
|
||||
},
|
||||
querySuccess: (params) => {
|
||||
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: {
|
||||
|
|
@ -126,16 +141,8 @@ onMounted(async () => {
|
|||
</Button>
|
||||
</template>
|
||||
|
||||
<!-- TODO @ziye：可以在 data 里翻译哈。 -->
|
||||
<template #userIds-cell="{ row }">
|
||||
<span
|
||||
v-for="(userId, index) in row.userIds"
|
||||
:key="userId"
|
||||
class="pr-5px"
|
||||
>
|
||||
{{ userList.find((user) => user.id === userId)?.nickname }}
|
||||
<span v-if="index < row.userIds.length - 1">、</span>
|
||||
</span>
|
||||
<span>{{ row.nicknames }}</span>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -265,18 +265,18 @@ onMounted(() => {
|
|||
width: '100%',
|
||||
}"
|
||||
>
|
||||
<!-- TODO @ziye：使用名字作为图标，缺少了 -->
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
v-if="definition.icon"
|
||||
:src="definition.icon"
|
||||
class="h-12 w-12 object-contain"
|
||||
class="flow-icon-img object-contain"
|
||||
alt="流程图标"
|
||||
/>
|
||||
|
||||
<div v-else class="flow-icon flex-shrink-0">
|
||||
<Tooltip :title="definition.name">
|
||||
<span class="text-xs text-white">
|
||||
{{ definition.name }}
|
||||
{{ definition.name?.slice(0, 2) }}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
@ -325,19 +325,26 @@ onMounted(() => {
|
|||
<style lang="scss" scoped>
|
||||
.process-definition-container {
|
||||
.definition-item-card {
|
||||
.flow-icon-img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.flow-icon {
|
||||
@apply bg-primary;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #3f73f7;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&.search-match {
|
||||
background-color: rgb(63 115 247 / 10%);
|
||||
border: 1px solid #3f73f7;
|
||||
border: 1px solid var(--primary);
|
||||
animation: bounce 0.5s ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@ import type { SystemUserApi } from '#/api/system/user';
|
|||
import { nextTick, onMounted, ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import {
|
||||
SvgBpmApproveIcon,
|
||||
SvgBpmCancelIcon,
|
||||
SvgBpmRejectIcon,
|
||||
SvgBpmRunningIcon,
|
||||
} from '@vben/icons';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import {
|
||||
|
|
@ -38,6 +32,12 @@ import {
|
|||
registerComponent,
|
||||
setConfAndFields2,
|
||||
} from '#/utils';
|
||||
import {
|
||||
SvgBpmApproveIcon,
|
||||
SvgBpmCancelIcon,
|
||||
SvgBpmRejectIcon,
|
||||
SvgBpmRunningIcon,
|
||||
} from '#/views/bpm/processInstance/detail/modules/icons';
|
||||
|
||||
import ProcessInstanceTimeline from './modules/time-line.vue';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { createIconifyIcon } from '@vben/icons';
|
||||
|
||||
// bpm 图标
|
||||
const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
|
||||
const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
|
||||
const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');
|
||||
const SvgBpmCancelIcon = createIconifyIcon('svg:bpm-cancel');
|
||||
|
||||
export {
|
||||
SvgBpmApproveIcon,
|
||||
SvgBpmCancelIcon,
|
||||
SvgBpmRejectIcon,
|
||||
SvgBpmRunningIcon,
|
||||
};
|
||||
|
|
@ -8,7 +8,7 @@ import { useRouter } from 'vue-router';
|
|||
import { IconifyIcon } from '@vben/icons';
|
||||
import { formatDateTime, isEmpty } from '@vben/utils';
|
||||
|
||||
import { Avatar, Button, Image, Tooltip } from 'ant-design-vue';
|
||||
import { Avatar, Button, Image, Timeline, Tooltip } from 'ant-design-vue';
|
||||
|
||||
import { UserSelectModal } from '#/components/user-select-modal';
|
||||
import {
|
||||
|
|
@ -215,12 +215,11 @@ const handleUserSelectCancel = () => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<!-- TODO @ziye：antd 组件，使用大写哈；目前项目风格是这样的 -->
|
||||
<template>
|
||||
<div>
|
||||
<a-timeline class="pt-20px">
|
||||
<Timeline class="pt-20px">
|
||||
<!-- 遍历每个审批节点 -->
|
||||
<a-timeline-item
|
||||
<Timeline.Item
|
||||
v-for="(activity, index) in activityNodes"
|
||||
:key="index"
|
||||
:color="getApprovalNodeColor(activity.status)"
|
||||
|
|
@ -449,8 +448,8 @@ const handleUserSelectCancel = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</Timeline.Item>
|
||||
</Timeline>
|
||||
|
||||
<!-- 用户选择弹窗 -->
|
||||
<UserSelectModal
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import { BpmProcessInstanceStatus, DICT_TYPE } from '#/utils';
|
|||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceManager' });
|
||||
defineOptions({ name: 'BpmProcessInstanceMy' });
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
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 { getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '流程名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程名称',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '抄送时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = BpmTaskApi.TaskVO>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'processInstanceName',
|
||||
title: '流程名称',
|
||||
minWidth: 200,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
field: 'summary',
|
||||
title: '摘要',
|
||||
minWidth: 200,
|
||||
slots: {
|
||||
default: 'slot-summary',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'startUser.nickname',
|
||||
title: '流程发起人',
|
||||
minWidth: 120,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstanceStartTime',
|
||||
title: '流程发起时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'activityName',
|
||||
title: '抄送节点',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createUser.nickname',
|
||||
title: '抄送人',
|
||||
minWidth: 180,
|
||||
slots: {
|
||||
default: 'slot-createUser',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'reason',
|
||||
title: '抄送意见',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '抄送时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '流程名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'detail',
|
||||
text: '详情',
|
||||
show: hasAccessByCodes(['bpm:task:query']),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,34 +1,114 @@
|
|||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getProcessInstanceCopyPage } from '#/api/bpm/processInstance';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { router } from '#/router';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmCopyTask' });
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getProcessInstanceCopyPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
cellConfig: {
|
||||
height: 64,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
|
||||
});
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({
|
||||
code,
|
||||
row,
|
||||
}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
|
||||
switch (code) {
|
||||
case 'detail': {
|
||||
onDetail(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 办理任务 */
|
||||
function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
|
||||
const query = {
|
||||
id: row.processInstanceId,
|
||||
...(row.activityId && { activityId: row.activityId }),
|
||||
};
|
||||
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query,
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Page auto-content-height>
|
||||
<DocAlert
|
||||
title="审批转办、委派、抄送"
|
||||
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
|
||||
/>
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="抄送任务">
|
||||
<!-- 摘要 -->
|
||||
<template #slot-summary="{ row }">
|
||||
<div
|
||||
class="flex flex-col py-2"
|
||||
v-if="row.summary && row.summary.length > 0"
|
||||
>
|
||||
<div v-for="(item, index) in row.summary" :key="index">
|
||||
<span class="text-gray-500">
|
||||
{{ item.key }} : {{ item.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</template>
|
||||
|
||||
<!-- 抄送人 -->
|
||||
<template #slot-createUser="{ row }">
|
||||
<span class="text-gray-500">
|
||||
{{ row.createUser.nickname || '系统' }}
|
||||
</span>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
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,
|
||||
formatPast2,
|
||||
getDictOptions,
|
||||
getRangePickerDefaultProps,
|
||||
} from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '流程名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程名称',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'processDefinitionId',
|
||||
label: '所属流程',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程定义的编号',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
// 流程分类
|
||||
{
|
||||
fieldName: 'category',
|
||||
label: '流程分类',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程分类',
|
||||
allowClear: true,
|
||||
api: getCategorySimpleList,
|
||||
labelField: 'name',
|
||||
valueField: 'code',
|
||||
},
|
||||
},
|
||||
// 流程状态
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '流程状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(
|
||||
DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
|
||||
'number',
|
||||
),
|
||||
placeholder: '请选择流程状态',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
// 发起时间
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '发起时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = BpmTaskApi.TaskVO>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'name',
|
||||
title: '流程名称',
|
||||
minWidth: 200,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
field: 'processInstance.summary',
|
||||
title: '摘要',
|
||||
minWidth: 200,
|
||||
slots: {
|
||||
default: 'slot-summary',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstance.startUser.nickname',
|
||||
title: '发起人',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '发起时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '当前任务',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '任务开始时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'endTime',
|
||||
title: '任务结束时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'status',
|
||||
title: '审批状态',
|
||||
minWidth: 180,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.BPM_TASK_STATUS },
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'reason',
|
||||
title: '审批建议',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
// 耗时
|
||||
{
|
||||
field: 'durationInMillis',
|
||||
title: '耗时',
|
||||
minWidth: 180,
|
||||
formatter: ({ row }) => {
|
||||
return `${formatPast2(row.durationInMillis)}`;
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstanceId',
|
||||
title: '流程编号',
|
||||
minWidth: 280,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'id',
|
||||
title: '任务编号',
|
||||
minWidth: 280,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '流程名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'history',
|
||||
text: '历史',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,13 +1,83 @@
|
|||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { BpmTaskApi } from '#/api/bpm/task';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getTaskDonePage } from '#/api/bpm/task';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { router } from '#/router';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmDoneTask' });
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getTaskDonePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
cellConfig: {
|
||||
height: 64,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
|
||||
});
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
|
||||
switch (code) {
|
||||
case 'history': {
|
||||
onHistory(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看历史 */
|
||||
function onHistory(row: BpmTaskApi.TaskVO) {
|
||||
console.warn(row);
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: {
|
||||
id: row.processInstance.id,
|
||||
taskId: row.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Page auto-content-height>
|
||||
<DocAlert
|
||||
title="审批通过、不通过、驳回"
|
||||
url="https://doc.iocoder.cn/bpm/task-todo-done/"
|
||||
|
|
@ -18,23 +88,29 @@ import { DocAlert } from '#/components/doc-alert';
|
|||
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
|
||||
/>
|
||||
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="已办任务">
|
||||
<!-- 摘要 -->
|
||||
<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>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { BpmTaskApi } from '#/api/bpm/task';
|
||||
|
||||
import { DICT_TYPE, formatPast2, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '任务名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入任务名称',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = BpmTaskApi.TaskVO>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'name',
|
||||
title: '流程名称',
|
||||
minWidth: 200,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
field: 'processInstance.summary',
|
||||
title: '摘要',
|
||||
minWidth: 200,
|
||||
slots: {
|
||||
default: 'slot-summary',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstance.startUser.nickname',
|
||||
title: '发起人',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '发起时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '当前任务',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '任务开始时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'endTime',
|
||||
title: '任务结束时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
// 审批人
|
||||
{
|
||||
field: 'assigneeUser.nickname',
|
||||
title: '审批人',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'status',
|
||||
title: '审批状态',
|
||||
minWidth: 180,
|
||||
cellRender: {
|
||||
name: 'CellDict',
|
||||
props: { type: DICT_TYPE.BPM_TASK_STATUS },
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'reason',
|
||||
title: '审批建议',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
// 耗时
|
||||
{
|
||||
field: 'durationInMillis',
|
||||
title: '耗时',
|
||||
minWidth: 180,
|
||||
formatter: ({ row }) => {
|
||||
return `${formatPast2(row.durationInMillis)}`;
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstanceId',
|
||||
title: '流程编号',
|
||||
minWidth: 280,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'id',
|
||||
title: '任务编号',
|
||||
minWidth: 280,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '流程名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'history',
|
||||
text: '历史',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,31 +1,105 @@
|
|||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { BpmTaskApi } from '#/api/bpm/task';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getTaskManagerPage } from '#/api/bpm/task';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { router } from '#/router';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmManagerTask' });
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getTaskManagerPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
cellConfig: {
|
||||
height: 64,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
|
||||
});
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
|
||||
switch (code) {
|
||||
case 'history': {
|
||||
onHistory(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看历史 */
|
||||
function onHistory(row: BpmTaskApi.TaskVO) {
|
||||
console.warn(row);
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: {
|
||||
id: row.processInstance.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Page auto-content-height>
|
||||
<DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="流程任务">
|
||||
<!-- 摘要 -->
|
||||
<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>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
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, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '流程名称',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程名称',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'processDefinitionId',
|
||||
label: '所属流程',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程定义的编号',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
// 流程分类
|
||||
{
|
||||
fieldName: 'category',
|
||||
label: '流程分类',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
placeholder: '请输入流程分类',
|
||||
allowClear: true,
|
||||
api: getCategorySimpleList,
|
||||
labelField: 'name',
|
||||
valueField: 'code',
|
||||
},
|
||||
},
|
||||
// 流程状态
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '流程状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions(
|
||||
DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
|
||||
'number',
|
||||
),
|
||||
placeholder: '请选择流程状态',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
// 发起时间
|
||||
{
|
||||
fieldName: 'createTime',
|
||||
label: '发起时间',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
...getRangePickerDefaultProps(),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns<T = BpmTaskApi.TaskVO>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'name',
|
||||
title: '流程名称',
|
||||
minWidth: 200,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
field: 'processInstance.summary',
|
||||
title: '摘要',
|
||||
minWidth: 200,
|
||||
slots: {
|
||||
default: 'slot-summary',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstance.startUser.nickname',
|
||||
title: '发起人',
|
||||
minWidth: 120,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '发起时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'name',
|
||||
title: '当前任务',
|
||||
minWidth: 180,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '任务时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
|
||||
{
|
||||
field: 'processInstanceId',
|
||||
title: '流程编号',
|
||||
minWidth: 280,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'id',
|
||||
title: '任务编号',
|
||||
minWidth: 280,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'operation',
|
||||
title: '操作',
|
||||
minWidth: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '流程名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
options: [
|
||||
{
|
||||
code: 'audit',
|
||||
text: '办理',
|
||||
show: hasAccessByCodes(['bpm:task:query']),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -1,13 +1,83 @@
|
|||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { BpmTaskApi } from '#/api/bpm/task';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getTaskTodoPage } from '#/api/bpm/task';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { router } from '#/router';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmTodoTask' });
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getTaskTodoPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
},
|
||||
cellConfig: {
|
||||
height: 64,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmTaskApi.TaskVO>,
|
||||
});
|
||||
|
||||
/** 表格操作按钮的回调函数 */
|
||||
function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
|
||||
switch (code) {
|
||||
case 'audit': {
|
||||
onAudit(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 办理任务 */
|
||||
function onAudit(row: BpmTaskApi.TaskVO) {
|
||||
console.warn(row);
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: {
|
||||
id: row.processInstance.id,
|
||||
taskId: row.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Page auto-content-height>
|
||||
<DocAlert
|
||||
title="审批通过、不通过、驳回"
|
||||
url="https://doc.iocoder.cn/bpm/task-todo-done/"
|
||||
|
|
@ -18,23 +88,29 @@ import { DocAlert } from '#/components/doc-alert';
|
|||
url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
|
||||
/>
|
||||
<DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
|
||||
<FormModal @success="onRefresh" />
|
||||
<Grid table-title="待办任务">
|
||||
<!-- 摘要 -->
|
||||
<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>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,6 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
|
|||
const SvgCakeIcon = createIconifyIcon('svg:cake');
|
||||
const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
|
||||
|
||||
// bpm 图标
|
||||
// TODO @ziye：这个看看，是不是拿到 bpm 模块里，不放在这里；因为有些团队，用不到 bpm 哈
|
||||
const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
|
||||
const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
|
||||
const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');
|
||||
const SvgBpmCancelIcon = createIconifyIcon('svg:bpm-cancel');
|
||||
|
||||
export {
|
||||
SvgAntdvLogoIcon,
|
||||
SvgAvatar1Icon,
|
||||
|
|
@ -26,10 +19,6 @@ export {
|
|||
SvgAvatar3Icon,
|
||||
SvgAvatar4Icon,
|
||||
SvgBellIcon,
|
||||
SvgBpmApproveIcon,
|
||||
SvgBpmCancelIcon,
|
||||
SvgBpmRejectIcon,
|
||||
SvgBpmRunningIcon,
|
||||
SvgCakeIcon,
|
||||
SvgCardIcon,
|
||||
SvgDownloadIcon,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"mobile": "Please input a valid {0}"
|
||||
},
|
||||
"actionTitle": {
|
||||
"copy": "Copy {0}",
|
||||
"cancel": "Cancel {0}",
|
||||
"edit": "Modify {0}",
|
||||
"create": "Create {0}",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"mobile": "请输入正确的{0}"
|
||||
},
|
||||
"actionTitle": {
|
||||
"copy": "复制{0}",
|
||||
"cancel": "取消{0}",
|
||||
"edit": "修改{0}",
|
||||
"create": "新增{0}",
|
||||
|
|
|
|||
Loading…
Reference in New Issue