feat: [bpm][ele] 新建流程模型 20%
This commit is contained in:
jason
@@ -62,30 +62,30 @@ const routes: RouteRecordRaw[] = [
|
||||
};
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: 'manager/model/create',
|
||||
// component: () => import('#/views/bpm/model/form/index.vue'),
|
||||
// name: 'BpmModelCreate',
|
||||
// meta: {
|
||||
// title: '创建流程',
|
||||
// activePath: '/bpm/manager/model',
|
||||
// icon: 'carbon:flow-connection',
|
||||
// hideInMenu: true,
|
||||
// keepAlive: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: 'manager/model/:type/:id',
|
||||
// component: () => import('#/views/bpm/model/form/index.vue'),
|
||||
// name: 'BpmModelUpdate',
|
||||
// meta: {
|
||||
// title: '修改流程',
|
||||
// activePath: '/bpm/manager/model',
|
||||
// icon: 'carbon:flow-connection',
|
||||
// hideInMenu: true,
|
||||
// keepAlive: true,
|
||||
// },
|
||||
// },
|
||||
{
|
||||
path: 'manager/model/create',
|
||||
component: () => import('#/views/bpm/model/form/index.vue'),
|
||||
name: 'BpmModelCreate',
|
||||
meta: {
|
||||
title: '创建流程',
|
||||
activePath: '/bpm/manager/model',
|
||||
icon: 'carbon:flow-connection',
|
||||
hideInMenu: true,
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'manager/model/:type/:id',
|
||||
component: () => import('#/views/bpm/model/form/index.vue'),
|
||||
name: 'BpmModelUpdate',
|
||||
meta: {
|
||||
title: '修改流程',
|
||||
activePath: '/bpm/manager/model',
|
||||
icon: 'carbon:flow-connection',
|
||||
hideInMenu: true,
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'manager/definition',
|
||||
component: () => import('#/views/bpm/model/definition/index.vue'),
|
||||
|
||||
498
apps/web-ele/src/views/bpm/model/form/index.vue
Normal file
498
apps/web-ele/src/views/bpm/model/form/index.vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<script setup lang="ts">
|
||||
import type { BpmCategoryApi } from '#/api/bpm/category';
|
||||
import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
|
||||
import type { BpmFormApi } from '#/api/bpm/form';
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { confirm, Page } from '@vben/common-ui';
|
||||
import {
|
||||
BpmAutoApproveType,
|
||||
BpmModelFormType,
|
||||
BpmModelType,
|
||||
} from '@vben/constants';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
import { ElButton, ElCard, ElMessage } from 'element-plus';
|
||||
|
||||
import { getCategorySimpleList } from '#/api/bpm/category';
|
||||
import { getProcessDefinition } from '#/api/bpm/definition';
|
||||
import { getFormSimpleList } from '#/api/bpm/form';
|
||||
import {
|
||||
createModel,
|
||||
deployModel,
|
||||
getModel,
|
||||
updateModel,
|
||||
} from '#/api/bpm/model';
|
||||
import { getSimpleDeptList } from '#/api/system/dept';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
|
||||
import BasicInfo from './modules/basic-info.vue';
|
||||
import ExtraSetting from './modules/extra-setting.vue';
|
||||
import FormDesign from './modules/form-design.vue';
|
||||
import ProcessDesign from './modules/process-design.vue';
|
||||
|
||||
defineOptions({ name: 'BpmModelCreate' });
|
||||
|
||||
type BpmProcessDefinitionType = Omit<
|
||||
BpmProcessDefinitionApi.ProcessDefinition,
|
||||
'modelId' | 'modelType'
|
||||
> & {
|
||||
id?: string;
|
||||
type?: number;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
const tabs = useTabs();
|
||||
|
||||
const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
|
||||
const formDesignRef = ref<InstanceType<typeof FormDesign>>(); // 表单设计组件引用
|
||||
const processDesignRef = ref<InstanceType<typeof ProcessDesign>>(); // 流程设计组件引用
|
||||
const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>(); // 更多设置组件引用
|
||||
|
||||
const actionType = route.params.type as string; // 操作类型：create、copy、update
|
||||
const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
|
||||
const steps = [
|
||||
{ title: '基本信息', validator: validateBasic },
|
||||
{ title: '表单设计', validator: validateForm },
|
||||
{ title: '流程设计', validator: validateProcess },
|
||||
{ title: '更多设置', validator: validateExtra },
|
||||
];
|
||||
|
||||
const formData: any = ref({
|
||||
id: undefined,
|
||||
name: '',
|
||||
key: '',
|
||||
category: undefined,
|
||||
icon: undefined,
|
||||
description: '',
|
||||
type: BpmModelType.SIMPLE,
|
||||
formType: BpmModelFormType.NORMAL,
|
||||
formId: '',
|
||||
formCustomCreatePath: '',
|
||||
formCustomViewPath: '',
|
||||
visible: true,
|
||||
startUserType: undefined,
|
||||
startUserIds: [],
|
||||
startDeptIds: [],
|
||||
managerUserIds: [],
|
||||
allowCancelRunningProcess: true,
|
||||
processIdRule: {
|
||||
enable: false,
|
||||
prefix: '',
|
||||
infix: '',
|
||||
postfix: '',
|
||||
length: 5,
|
||||
},
|
||||
autoApprovalType: BpmAutoApproveType.NONE,
|
||||
titleSetting: {
|
||||
enable: false,
|
||||
title: '',
|
||||
},
|
||||
summarySetting: {
|
||||
enable: false,
|
||||
summary: [],
|
||||
},
|
||||
allowWithdrawTask: false,
|
||||
}); // 表单数据
|
||||
const processData = ref<any>(); // 流程数据
|
||||
|
||||
const formList = ref<BpmFormApi.Form[]>([]);
|
||||
const categoryList = ref<BpmCategoryApi.Category[]>([]);
|
||||
const userList = ref<SystemUserApi.User[]>([]);
|
||||
const deptList = ref<SystemDeptApi.Dept[]>([]);
|
||||
|
||||
provide('processData', processData);
|
||||
provide('modelData', formData);
|
||||
|
||||
/** 步骤校验函数 */
|
||||
async function validateBasic() {
|
||||
await basicInfoRef.value?.validate();
|
||||
}
|
||||
|
||||
/** 表单设计校验 */
|
||||
async function validateForm() {
|
||||
await formDesignRef.value?.validate();
|
||||
}
|
||||
|
||||
/** 流程设计校验 */
|
||||
async function validateProcess() {
|
||||
await processDesignRef.value?.validate();
|
||||
}
|
||||
|
||||
/** 更多设置校验 */
|
||||
async function validateExtra() {
|
||||
await extraSettingRef.value?.validate();
|
||||
}
|
||||
|
||||
/** 初始化数据 */
|
||||
async function initData() {
|
||||
if (actionType === 'definition') {
|
||||
// 情况一：流程定义场景（恢复）
|
||||
const definitionId = route.params.id as string;
|
||||
const data = await getProcessDefinition(definitionId);
|
||||
const processDefinition: BpmProcessDefinitionType = data;
|
||||
// 将 definition => model
|
||||
processDefinition.type = data.modelType;
|
||||
processDefinition.id = data.modelId;
|
||||
if (data.simpleModel) {
|
||||
processDefinition.simpleModel = JSON.parse(data.simpleModel);
|
||||
}
|
||||
formData.value = processDefinition;
|
||||
|
||||
// 设置 startUserType
|
||||
if (formData.value.startUserIds?.length > 0) {
|
||||
formData.value.startUserType = 1;
|
||||
} else if (formData.value.startDeptIds?.length > 0) {
|
||||
formData.value.startUserType = 2;
|
||||
} else {
|
||||
formData.value.startUserType = 0;
|
||||
}
|
||||
} else if (['copy', 'update'].includes(actionType)) {
|
||||
// 情况二：修改场景/复制场景
|
||||
const modelId = route.params.id as string;
|
||||
formData.value = await getModel(modelId);
|
||||
|
||||
// 设置 startUserType
|
||||
if (formData.value.startUserIds?.length > 0) {
|
||||
formData.value.startUserType = 1;
|
||||
} else if (formData.value.startDeptIds?.length > 0) {
|
||||
formData.value.startUserType = 2;
|
||||
} else {
|
||||
formData.value.startUserType = 0;
|
||||
}
|
||||
|
||||
// 特殊：复制场景
|
||||
if (route.params.type === 'copy') {
|
||||
delete formData.value.id;
|
||||
if (formData.value.bpmnXml) {
|
||||
formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
|
||||
formData.value.name,
|
||||
`${formData.value.name}副本`,
|
||||
);
|
||||
formData.value.bpmnXml = formData.value.bpmnXml.replaceAll(
|
||||
formData.value.key,
|
||||
`${formData.value.key}_copy`,
|
||||
);
|
||||
}
|
||||
formData.value.name += '副本';
|
||||
formData.value.key += '_copy';
|
||||
}
|
||||
} else {
|
||||
// 情况三：新增场景
|
||||
formData.value.startUserType = 0; // 全体
|
||||
formData.value.managerUserIds.push(userStore.userInfo?.id);
|
||||
}
|
||||
|
||||
// 获取表单列表
|
||||
formList.value = await getFormSimpleList();
|
||||
categoryList.value = await getCategorySimpleList();
|
||||
// 获取用户列表
|
||||
userList.value = await getSimpleUserList();
|
||||
// 获取部门列表
|
||||
deptList.value = await getSimpleDeptList();
|
||||
|
||||
// 最终，设置 currentStep 切换到第一步
|
||||
currentStep.value = 0;
|
||||
// 以前未配置更多设置的流程
|
||||
extraSettingRef.value?.initData();
|
||||
}
|
||||
|
||||
/** 根据类型切换流程数据 */
|
||||
watch(
|
||||
async () => formData.value.type,
|
||||
() => {
|
||||
if (formData.value.type === BpmModelType.BPMN) {
|
||||
processData.value = formData.value.bpmnXml;
|
||||
} else if (formData.value.type === BpmModelType.SIMPLE) {
|
||||
processData.value = formData.value.simpleModel;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
/** 校验所有步骤数据是否完整 */
|
||||
async function validateAllSteps() {
|
||||
// 基本信息校验
|
||||
try {
|
||||
await validateBasic();
|
||||
} catch {
|
||||
currentStep.value = 0;
|
||||
ElMessage.warning('请完善基本信息');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 表单设计校验
|
||||
try {
|
||||
await validateForm();
|
||||
} catch {
|
||||
currentStep.value = 1;
|
||||
ElMessage.warning('请完善自定义表单信息');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 流程设计校验
|
||||
try {
|
||||
await validateProcess();
|
||||
} catch {
|
||||
currentStep.value = 2;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 更多设置校验
|
||||
try {
|
||||
await validateExtra();
|
||||
} catch {
|
||||
currentStep.value = 3;
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 保存操作 */
|
||||
async function handleSave() {
|
||||
try {
|
||||
// 保存前校验所有步骤的数据
|
||||
const result = await validateAllSteps();
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新表单数据
|
||||
const modelData = {
|
||||
...formData.value,
|
||||
};
|
||||
|
||||
switch (actionType) {
|
||||
case 'copy': {
|
||||
// 情况三：复制场景
|
||||
formData.value.id = await createModel(modelData);
|
||||
// 提示成功
|
||||
ElMessage.success('复制成功，可点击【发布】按钮，进行发布模型');
|
||||
break;
|
||||
}
|
||||
case 'definition': {
|
||||
// 情况一：流程定义场景（恢复）
|
||||
await updateModel(modelData);
|
||||
// 提示成功
|
||||
ElMessage.success('恢复成功，可点击【发布】按钮，进行发布模型');
|
||||
break;
|
||||
}
|
||||
case 'update': {
|
||||
// 情况二：修改场景
|
||||
await updateModel(modelData);
|
||||
// 提示成功
|
||||
ElMessage.success('修改成功，可点击【发布】按钮，进行发布模型');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
// 情况四：新增场景
|
||||
formData.value.id = await createModel(modelData);
|
||||
// 提示成功
|
||||
ElMessage.success('新建成功，可点击【发布】按钮，进行发布模型');
|
||||
}
|
||||
}
|
||||
|
||||
// 返回列表页（排除更新的情况）
|
||||
if (actionType !== 'update') {
|
||||
await router.push({ name: 'BpmModel' });
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('保存失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 发布操作 */
|
||||
async function handleDeploy() {
|
||||
try {
|
||||
// 1.1 修改场景下直接发布，新增场景下需要先确认
|
||||
if (!formData.value.id) {
|
||||
await confirm('是否确认发布该流程？');
|
||||
}
|
||||
// 1.2 校验所有步骤
|
||||
await validateAllSteps();
|
||||
|
||||
// 2.1 更新表单数据
|
||||
const modelData = {
|
||||
...formData.value,
|
||||
};
|
||||
// 2.2 先保存所有数据
|
||||
if (formData.value.id) {
|
||||
await updateModel(modelData);
|
||||
} else {
|
||||
const result = await createModel(modelData);
|
||||
formData.value.id = result.id;
|
||||
}
|
||||
// 2.3 发布
|
||||
await deployModel(formData.value.id);
|
||||
|
||||
// 3. 路由并提示
|
||||
ElMessage.success('发布成功');
|
||||
await router.push({ name: 'BpmModel' });
|
||||
} catch (error: any) {
|
||||
console.error('发布失败:', error);
|
||||
ElMessage.warning(error.message || '发布失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 步骤切换处理 */
|
||||
async function handleStepClick(index: number) {
|
||||
try {
|
||||
if (index !== 0) {
|
||||
await validateBasic();
|
||||
}
|
||||
if (index !== 1) {
|
||||
await validateForm();
|
||||
}
|
||||
if (index !== 2) {
|
||||
await validateProcess();
|
||||
}
|
||||
if (index !== 3) {
|
||||
await validateExtra();
|
||||
}
|
||||
// 切换步骤
|
||||
currentStep.value = index;
|
||||
} catch (error) {
|
||||
console.error('步骤切换失败:', error);
|
||||
if (currentStep.value !== 2) {
|
||||
ElMessage.warning('请先完善当前步骤必填信息');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 返回列表页 */
|
||||
function handleBack() {
|
||||
tabs.closeCurrentTab();
|
||||
router.push({ name: 'BpmModel' });
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await initData();
|
||||
});
|
||||
|
||||
/** 添加组件卸载前的清理 */
|
||||
onBeforeUnmount(() => {
|
||||
// 清理所有的引用
|
||||
basicInfoRef.value = undefined;
|
||||
formDesignRef.value = undefined;
|
||||
processDesignRef.value = undefined;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="mx-auto">
|
||||
<!-- 头部导航栏 -->
|
||||
<div
|
||||
class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
|
||||
>
|
||||
<!-- 左侧标题 -->
|
||||
<div class="flex w-48 items-center overflow-hidden">
|
||||
<IconifyIcon
|
||||
icon="lucide:arrow-left"
|
||||
class="size-5 flex-shrink-0 cursor-pointer"
|
||||
@click="handleBack"
|
||||
/>
|
||||
<span
|
||||
class="ml-2.5 truncate text-base"
|
||||
:title="formData.name || '创建流程'"
|
||||
>
|
||||
{{ formData.name || '创建流程' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 步骤条 -->
|
||||
<div class="flex h-full flex-1 items-center justify-center">
|
||||
<div class="flex h-full w-auto items-center justify-center">
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
class="relative mx-6 flex h-full cursor-pointer items-center"
|
||||
:class="[
|
||||
currentStep === index
|
||||
? 'border-b-2 border-solid border-blue-500 text-blue-500'
|
||||
: 'text-gray-500',
|
||||
]"
|
||||
@click="handleStepClick(index)"
|
||||
>
|
||||
<div
|
||||
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
|
||||
:class="[
|
||||
currentStep === index
|
||||
? 'border-blue-500 bg-blue-500 text-white'
|
||||
: 'border-gray-300 bg-white text-gray-500',
|
||||
]"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<span class="whitespace-nowrap text-base font-bold">
|
||||
{{ step.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧按钮 -->
|
||||
<div class="flex w-48 items-center justify-end gap-2">
|
||||
<ElButton
|
||||
v-if="actionType === 'update'"
|
||||
type="primary"
|
||||
@click="handleDeploy"
|
||||
>
|
||||
发 布
|
||||
</ElButton>
|
||||
<ElButton type="primary" @click="handleSave">
|
||||
<span v-if="actionType === 'definition'">恢 复</span>
|
||||
<span v-else>保 存</span>
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主体内容 -->
|
||||
<ElCard body-style="padding: 10px" class="mb-4">
|
||||
<div class="mt-12">
|
||||
<!-- 第一步：基本信息 -->
|
||||
<div v-if="currentStep === 0" class="mx-auto w-4/6">
|
||||
<BasicInfo
|
||||
v-model="formData"
|
||||
:category-list="categoryList"
|
||||
:user-list="userList"
|
||||
:dept-list="deptList"
|
||||
ref="basicInfoRef"
|
||||
/>
|
||||
</div>
|
||||
<!-- 第二步：表单设计 -->
|
||||
<div v-if="currentStep === 1" class="mx-auto w-4/6">
|
||||
<FormDesign
|
||||
v-model="formData"
|
||||
:form-list="formList"
|
||||
ref="formDesignRef"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 第三步：流程设计 -->
|
||||
<ProcessDesign
|
||||
v-if="currentStep === 2"
|
||||
v-model="formData"
|
||||
ref="processDesignRef"
|
||||
/>
|
||||
|
||||
<!-- 第四步：更多设置 -->
|
||||
<div v-if="currentStep === 3" class="mx-auto w-4/6">
|
||||
<ExtraSetting v-model="formData" ref="extraSettingRef" />
|
||||
</div>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
442
apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
Normal file
442
apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FormItemRule } from 'element-plus';
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
import type { BpmCategoryApi } from '#/api/bpm/category';
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
ElAvatar,
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElOption,
|
||||
ElRadio,
|
||||
ElRadioGroup,
|
||||
ElSelect,
|
||||
ElTooltip,
|
||||
} from 'element-plus';
|
||||
|
||||
// import { DeptSelectModal, UserSelectModal } from '#/components/select-modal';
|
||||
import { ImageUpload } from '#/components/upload';
|
||||
|
||||
const props = defineProps({
|
||||
categoryList: {
|
||||
type: Array as PropType<BpmCategoryApi.Category[]>,
|
||||
required: true,
|
||||
},
|
||||
userList: {
|
||||
type: Array as PropType<SystemUserApi.User[]>,
|
||||
required: true,
|
||||
},
|
||||
deptList: {
|
||||
type: Array as PropType<SystemDeptApi.Dept[]>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
// const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
|
||||
// connectedComponent: UserSelectModal,
|
||||
// destroyOnClose: true,
|
||||
// });
|
||||
|
||||
// const [DeptSelectModalComp, deptSelectModalApi] = useVbenModal({
|
||||
// connectedComponent: DeptSelectModal,
|
||||
// destroyOnClose: true,
|
||||
// });
|
||||
|
||||
const formRef = ref(); // 表单引用
|
||||
const modelData = defineModel<any>(); // 创建本地数据副本
|
||||
|
||||
const selectedStartUsers = ref<SystemUserApi.User[]>([]); // 选中的发起人
|
||||
const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]); // 选中的发起部门
|
||||
|
||||
const selectedManagerUsers = ref<SystemUserApi.User[]>([]); // 选中的流程管理员
|
||||
const currentSelectType = ref<'manager' | 'start'>('start');
|
||||
const selectedUsers = ref<number[]>(); // 选中的用户
|
||||
const rules: Record<string, FormItemRule[]> = {
|
||||
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
|
||||
key: [
|
||||
{ required: true, message: '流程标识不能为空', trigger: 'blur' },
|
||||
{
|
||||
validator: (_rule: any, value: string, callback: any) => {
|
||||
if (!value) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
if (!/^[a-z_][-\w.$]*$/i.test(value)) {
|
||||
callback(
|
||||
new Error(
|
||||
'只能包含字母、数字、下划线、连字符和点号，且必须以字母或下划线开头',
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '流程类型不能为空', trigger: 'blur' }],
|
||||
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
|
||||
managerUserIds: [
|
||||
{ required: true, message: '流程管理员不能为空', trigger: 'blur' },
|
||||
],
|
||||
};
|
||||
|
||||
/** 初始化选中的用户 */
|
||||
watch(
|
||||
() => modelData.value,
|
||||
(newVal) => {
|
||||
selectedStartUsers.value = newVal.startUserIds?.length
|
||||
? (props.userList.filter((user: SystemUserApi.User) =>
|
||||
newVal.startUserIds.includes(user.id),
|
||||
) as SystemUserApi.User[])
|
||||
: [];
|
||||
selectedStartDepts.value = newVal.startDeptIds?.length
|
||||
? (props.deptList.filter((dept: SystemDeptApi.Dept) =>
|
||||
newVal.startDeptIds.includes(dept.id),
|
||||
) as SystemDeptApi.Dept[])
|
||||
: [];
|
||||
selectedManagerUsers.value = newVal.managerUserIds?.length
|
||||
? (props.userList.filter((user: SystemUserApi.User) =>
|
||||
newVal.managerUserIds.includes(user.id),
|
||||
) as SystemUserApi.User[])
|
||||
: [];
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
/** 打开发起人选择 */
|
||||
function openStartUserSelect() {
|
||||
currentSelectType.value = 'start';
|
||||
selectedUsers.value = selectedStartUsers.value.map(
|
||||
(user) => user.id,
|
||||
) as number[];
|
||||
// userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
|
||||
}
|
||||
|
||||
/** 打开部门选择 */
|
||||
function openStartDeptSelect() {
|
||||
// deptSelectModalApi.setData({ selectedList: selectedStartDepts.value }).open();
|
||||
}
|
||||
|
||||
// /** 处理部门选择确认 */
|
||||
// function handleDeptSelectConfirm(depts: SystemDeptApi.Dept[]) {
|
||||
// modelData.value = {
|
||||
// ...modelData.value,
|
||||
// startDeptIds: depts.map((d) => d.id),
|
||||
// };
|
||||
// }
|
||||
|
||||
/** 打开管理员选择 */
|
||||
function openManagerUserSelect() {
|
||||
currentSelectType.value = 'manager';
|
||||
selectedUsers.value = selectedManagerUsers.value.map(
|
||||
(user) => user.id,
|
||||
) as number[];
|
||||
// userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
|
||||
}
|
||||
|
||||
// /** 处理用户选择确认 */
|
||||
// function handleUserSelectConfirm(userList: SystemUserApi.User[]) {
|
||||
// modelData.value =
|
||||
// currentSelectType.value === 'start'
|
||||
// ? {
|
||||
// ...modelData.value,
|
||||
// startUserIds: userList.map((u) => u.id),
|
||||
// }
|
||||
// : {
|
||||
// ...modelData.value,
|
||||
// managerUserIds: userList.map((u) => u.id),
|
||||
// };
|
||||
// }
|
||||
|
||||
// /** 用户选择弹窗关闭 */
|
||||
// function handleUserSelectClosed() {
|
||||
// selectedUsers.value = [];
|
||||
// }
|
||||
|
||||
// /** 用户选择弹窗取消 */
|
||||
// function handleUserSelectCancel() {
|
||||
// selectedUsers.value = [];
|
||||
// }
|
||||
|
||||
/** 处理发起人类型变化 */
|
||||
function handleStartUserTypeChange(value: number) {
|
||||
switch (value) {
|
||||
case 0: {
|
||||
modelData.value = {
|
||||
...modelData.value,
|
||||
startUserIds: [],
|
||||
startDeptIds: [],
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
modelData.value = {
|
||||
...modelData.value,
|
||||
startDeptIds: [],
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
modelData.value = {
|
||||
...modelData.value,
|
||||
startUserIds: [],
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 移除发起人 */
|
||||
function handleRemoveStartUser(user: SystemUserApi.User) {
|
||||
modelData.value = {
|
||||
...modelData.value,
|
||||
startUserIds: modelData.value.startUserIds.filter(
|
||||
(id: number) => id !== user.id,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
/** 移除部门 */
|
||||
function handleRemoveStartDept(dept: SystemDeptApi.Dept) {
|
||||
modelData.value = {
|
||||
...modelData.value,
|
||||
startDeptIds: modelData.value.startDeptIds.filter(
|
||||
(id: number) => id !== dept.id,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
/** 移除管理员 */
|
||||
function handleRemoveManagerUser(user: SystemUserApi.User) {
|
||||
modelData.value = {
|
||||
...modelData.value,
|
||||
managerUserIds: modelData.value.managerUserIds.filter(
|
||||
(id: number) => id !== user.id,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
/** 表单校验 */
|
||||
async function validate() {
|
||||
await formRef.value?.validate();
|
||||
}
|
||||
|
||||
defineExpose({ validate });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ElForm ref="formRef" :model="modelData" :rules="rules" label-width="100px">
|
||||
<ElFormItem label="流程标识" prop="key">
|
||||
<div class="flex w-full items-center">
|
||||
<ElInput
|
||||
v-model="modelData.key"
|
||||
:disabled="!!modelData.id"
|
||||
placeholder="请输入流程标识，以字母或下划线开头"
|
||||
class="flex-1"
|
||||
/>
|
||||
<ElTooltip
|
||||
:content="
|
||||
modelData.id ? '流程标识不可修改！' : '新建后，流程标识不可修改！'
|
||||
"
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIcon icon="lucide:circle-help" class="ml-1 size-5" />
|
||||
</ElTooltip>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="流程名称" prop="name">
|
||||
<ElInput
|
||||
v-model="modelData.name"
|
||||
:disabled="!!modelData.id"
|
||||
clearable
|
||||
placeholder="请输入流程名称"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="流程分类" prop="category">
|
||||
<ElSelect
|
||||
v-model="modelData.category"
|
||||
clearable
|
||||
placeholder="请选择流程分类"
|
||||
class="w-full"
|
||||
>
|
||||
<ElOption
|
||||
v-for="category in categoryList"
|
||||
:key="category.code"
|
||||
:value="category.code"
|
||||
:label="category.name"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="流程图标">
|
||||
<ImageUpload v-model:value="modelData.icon" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="流程描述" prop="description">
|
||||
<ElInput v-model="modelData.description" type="textarea" clearable />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="流程类型" prop="type">
|
||||
<ElRadioGroup v-model="modelData.type">
|
||||
<ElRadio
|
||||
v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
|
||||
:key="dict.value as number"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</ElRadio>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否可见" prop="visible">
|
||||
<ElRadioGroup v-model="modelData.visible">
|
||||
<ElRadio
|
||||
v-for="dict in getDictOptions(
|
||||
DICT_TYPE.INFRA_BOOLEAN_STRING,
|
||||
'boolean',
|
||||
)"
|
||||
:key="dict.label"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</ElRadio>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="谁可以发起" prop="startUserType">
|
||||
<ElSelect
|
||||
v-model="modelData.startUserType"
|
||||
placeholder="请选择谁可以发起"
|
||||
@change="handleStartUserTypeChange"
|
||||
>
|
||||
<ElOption :value="0" label="全员" />
|
||||
<ElOption :value="1" label="指定人员" />
|
||||
<ElOption :value="2" label="指定部门" />
|
||||
</ElSelect>
|
||||
<div
|
||||
v-if="modelData.startUserType === 1"
|
||||
class="mt-2 flex flex-wrap gap-1"
|
||||
>
|
||||
<div
|
||||
v-for="user in selectedStartUsers"
|
||||
:key="user.id"
|
||||
class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
>
|
||||
<ElAvatar
|
||||
class="m-1 size-7"
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
/>
|
||||
<ElAvatar class="m-1 size-7" v-else>
|
||||
{{ user.nickname?.substring(0, 1) }}
|
||||
</ElAvatar>
|
||||
<span class="text-gray-700 dark:text-gray-200">
|
||||
{{ user.nickname }}
|
||||
</span>
|
||||
<IconifyIcon
|
||||
icon="lucide:x"
|
||||
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500 dark:text-gray-200"
|
||||
@click="handleRemoveStartUser(user)"
|
||||
/>
|
||||
</div>
|
||||
<ElButton link @click="openStartUserSelect" class="flex items-center">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:user-plus" class="size-4" />
|
||||
</template>
|
||||
选择人员
|
||||
</ElButton>
|
||||
</div>
|
||||
<div
|
||||
v-if="modelData.startUserType === 2"
|
||||
class="mt-2 flex flex-wrap gap-1"
|
||||
>
|
||||
<div
|
||||
v-for="dept in selectedStartDepts"
|
||||
:key="dept.id"
|
||||
class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
>
|
||||
<IconifyIcon icon="lucide:building" class="size-6 px-1" />
|
||||
<span class="text-gray-700 dark:text-gray-200">
|
||||
{{ dept.name }}
|
||||
</span>
|
||||
<IconifyIcon
|
||||
icon="lucide:x"
|
||||
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
|
||||
@click="handleRemoveStartDept(dept)"
|
||||
/>
|
||||
</div>
|
||||
<ElButton link @click="openStartDeptSelect" class="flex items-center">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:user-plus" class="size-4" />
|
||||
</template>
|
||||
选择部门
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="流程管理员" prop="managerUserIds">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<div
|
||||
v-for="user in selectedManagerUsers"
|
||||
:key="user.id"
|
||||
class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
>
|
||||
<ElAvatar
|
||||
class="m-1 size-7"
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
/>
|
||||
<ElAvatar class="m-1 size-7" v-else>
|
||||
{{ user.nickname?.substring(0, 1) }}
|
||||
</ElAvatar>
|
||||
<span class="text-gray-700 dark:text-gray-200">
|
||||
{{ user.nickname }}
|
||||
</span>
|
||||
<IconifyIcon
|
||||
icon="lucide:x"
|
||||
class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
|
||||
@click="handleRemoveManagerUser(user)"
|
||||
/>
|
||||
</div>
|
||||
<ElButton
|
||||
link
|
||||
@click="openManagerUserSelect"
|
||||
class="flex items-center"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:user-plus" class="size-4" />
|
||||
</template>
|
||||
选择人员
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<!-- 用户选择弹窗 -->
|
||||
<!-- <UserSelectModalComp
|
||||
class="w-3/5"
|
||||
v-model:value="selectedUsers"
|
||||
:multiple="true"
|
||||
@confirm="handleUserSelectConfirm"
|
||||
@closed="handleUserSelectClosed"
|
||||
@cancel="handleUserSelectCancel"
|
||||
/> -->
|
||||
<!-- 部门选择对话框 -->
|
||||
<!-- <DeptSelectModalComp
|
||||
class="w-3/5"
|
||||
:check-strictly="true"
|
||||
@confirm="handleDeptSelectConfirm"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
|
||||
|
||||
import { ContentWrap } from '@vben/common-ui';
|
||||
import { BpmModelFormType } from '@vben/constants';
|
||||
|
||||
import { getForm } from '#/api/bpm/form';
|
||||
// import {
|
||||
// MyProcessDesigner,
|
||||
// MyProcessPenal,
|
||||
// } from '#/views/bpm/components/bpmn-process-designer/package';
|
||||
// // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
|
||||
// import CustomContentPadProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad';
|
||||
// // 自定义左侧菜单（修改 默认任务 为 用户任务）
|
||||
// import CustomPaletteProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette';
|
||||
|
||||
defineOptions({ name: 'BpmModelEditor' });
|
||||
|
||||
defineProps<{
|
||||
modelId?: string;
|
||||
modelKey: string;
|
||||
modelName: string;
|
||||
value?: string;
|
||||
}>();
|
||||
|
||||
// const emit = defineEmits(['success', 'init-finished']);
|
||||
|
||||
const formFields = ref<string[]>([]); // 表单信息
|
||||
const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
|
||||
provide('formFields', formFields);
|
||||
provide('formType', formType);
|
||||
|
||||
// const xmlString = inject('processData') as Ref; // 注入流程数据
|
||||
const modelData = inject('modelData') as Ref; // 注入模型数据
|
||||
|
||||
const modeler = shallowRef(); // BPMN Modeler
|
||||
// const processDesigner = ref();
|
||||
// const controlForm = ref({
|
||||
// simulation: true,
|
||||
// labelEditing: false,
|
||||
// labelVisible: false,
|
||||
// prefix: 'flowable',
|
||||
// headerButtonSize: 'mini',
|
||||
// // additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
|
||||
// });
|
||||
|
||||
// const model = ref<BpmModelApi.Model>(); // 流程模型的信息
|
||||
|
||||
/** 初始化 modeler */
|
||||
// const initModeler = async (item: any) => {
|
||||
// model.value = modelData.value;
|
||||
// modeler.value = item;
|
||||
// };
|
||||
|
||||
/** 添加/修改模型 */
|
||||
// const save = async (bpmnXml: string) => {
|
||||
// try {
|
||||
// xmlString.value = bpmnXml;
|
||||
// emit('success', bpmnXml);
|
||||
// } catch (error) {
|
||||
// console.error('保存失败:', error);
|
||||
// ElMessage.error('保存失败');
|
||||
// }
|
||||
// };
|
||||
|
||||
/** 监听表单 ID 变化，加载表单数据 */
|
||||
watch(
|
||||
() => modelData.value.formId,
|
||||
async (newFormId) => {
|
||||
if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
|
||||
const data = await getForm(newFormId);
|
||||
formFields.value = data.fields;
|
||||
} else {
|
||||
formFields.value = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/** 在组件卸载时清理 */
|
||||
onBeforeUnmount(() => {
|
||||
modeler.value = null;
|
||||
// 清理全局实例
|
||||
const w = window as any;
|
||||
if (w.bpmnInstances) {
|
||||
w.bpmnInstances = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 流程设计器，负责绘制流程等 -->
|
||||
<!-- <MyProcessDesigner
|
||||
key="designer"
|
||||
v-model="xmlString"
|
||||
:value="xmlString"
|
||||
v-bind="controlForm"
|
||||
keyboard
|
||||
ref="processDesigner"
|
||||
@init-finished="initModeler"
|
||||
:additional-model="controlForm.additionalModel"
|
||||
:model="model"
|
||||
@save="save"
|
||||
:process-id="modelKey"
|
||||
:process-name="modelName"
|
||||
/> -->
|
||||
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
|
||||
<!-- <MyProcessPenal
|
||||
v-if="modeler"
|
||||
key="penal"
|
||||
:bpmn-modeler="modeler"
|
||||
:prefix="controlForm.prefix"
|
||||
class="process-panel"
|
||||
:model="model"
|
||||
/> -->
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.process-panel__container) {
|
||||
@apply absolute right-[20px] top-[70px];
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import type { MentionItem } from '../modules/tinymce-plugin';
|
||||
|
||||
import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import Editor from '@tinymce/tinymce-vue';
|
||||
import { ElAlert } from 'element-plus';
|
||||
|
||||
import { setupTinyPlugins } from './tinymce-plugin';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
formFields?: Array<{ field: string; title: string }>;
|
||||
}>(),
|
||||
{
|
||||
formFields: () => [],
|
||||
},
|
||||
);
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'confirm', value: string): void;
|
||||
}>();
|
||||
|
||||
/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
|
||||
const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
return;
|
||||
}
|
||||
modalApi.lock();
|
||||
try {
|
||||
const { template } = modalApi.getData<{
|
||||
template: string;
|
||||
}>();
|
||||
if (template !== undefined) {
|
||||
valueHtml.value = template;
|
||||
}
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
onConfirm() {
|
||||
emits('confirm', valueHtml.value);
|
||||
modalApi.close();
|
||||
},
|
||||
});
|
||||
|
||||
const mentionList = computed<MentionItem[]>(() => {
|
||||
const base: MentionItem[] = [
|
||||
{ id: 'startUser', name: '发起人' },
|
||||
{ id: 'startUserDept', name: '发起人部门' },
|
||||
{ id: 'processName', name: '流程名称' },
|
||||
{ id: 'processNum', name: '流程编号' },
|
||||
{ id: 'startTime', name: '发起时间' },
|
||||
{ id: 'endTime', name: '结束时间' },
|
||||
{ id: 'processStatus', name: '流程状态' },
|
||||
{ id: 'printUser', name: '打印人' },
|
||||
{ id: 'printTime', name: '打印时间' },
|
||||
];
|
||||
|
||||
const extras: MentionItem[] = (props.formFields || []).map((it: any) => ({
|
||||
id: it.field,
|
||||
name: `[表单]${it.title}`,
|
||||
}));
|
||||
return [...base, ...extras];
|
||||
}); // 提供给 @ 自动补全的字段（默认 + 表单字段）
|
||||
|
||||
const valueHtml = ref<string>('');
|
||||
const editorRef = shallowRef<any>(); // 编辑器
|
||||
|
||||
const tinyInit = {
|
||||
height: 400,
|
||||
width: 'auto',
|
||||
menubar: false,
|
||||
plugins: 'link importcss table code preview autoresize lists ',
|
||||
toolbar:
|
||||
'undo redo | styles fontsize | bold italic underline | alignleft aligncenter alignright | link table | processrecord code preview',
|
||||
language: 'zh_CN',
|
||||
branding: false,
|
||||
statusbar: true,
|
||||
content_style:
|
||||
'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
|
||||
setup(editor: any) {
|
||||
editorRef.value = editor;
|
||||
// 在编辑器 setup 时注册自定义插件
|
||||
setupTinyPlugins(editor, () => mentionList.value);
|
||||
},
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editorRef.value) {
|
||||
editorRef.value.destroy?.();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal class="w-3/4" title="自定义模板">
|
||||
<div class="mb-3">
|
||||
<ElAlert
|
||||
message="输入 @ 可选择插入流程选项和表单选项"
|
||||
type="info"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
<Editor
|
||||
v-model="valueHtml"
|
||||
:init="tinyInit"
|
||||
:tinymce-script-src="tinymceScriptSrc"
|
||||
license-key="gpl"
|
||||
/>
|
||||
</Modal>
|
||||
</template>
|
||||
618
apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
Normal file
618
apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
Normal file
@@ -0,0 +1,618 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, provide, ref, watch } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import {
|
||||
BpmAutoApproveType,
|
||||
BpmModelFormType,
|
||||
ProcessVariableEnum,
|
||||
} from '@vben/constants';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
ElButton,
|
||||
ElCheckbox,
|
||||
ElCol,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElMention,
|
||||
ElOption,
|
||||
ElRadio,
|
||||
ElRadioGroup,
|
||||
ElRow,
|
||||
ElSelect,
|
||||
ElSwitch,
|
||||
ElText,
|
||||
ElTooltip,
|
||||
} from 'element-plus';
|
||||
|
||||
import { getForm } from '#/api/bpm/form';
|
||||
// import {
|
||||
// HttpRequestSetting,
|
||||
// parseFormFields,
|
||||
// } from '#/views/bpm/components/simple-process-design';
|
||||
import { parseFormFields } from '#/components/form-create';
|
||||
|
||||
import PrintTemplate from './custom-print-template.vue';
|
||||
|
||||
const modelData = defineModel<any>();
|
||||
|
||||
/** 自定义 ID 流程编码 */
|
||||
const timeOptions = ref([
|
||||
{
|
||||
value: '',
|
||||
label: '无',
|
||||
},
|
||||
{
|
||||
value: 'DAY',
|
||||
label: '精确到日',
|
||||
},
|
||||
{
|
||||
value: 'HOUR',
|
||||
label: '精确到时',
|
||||
},
|
||||
{
|
||||
value: 'MINUTE',
|
||||
label: '精确到分',
|
||||
},
|
||||
{
|
||||
value: 'SECOND',
|
||||
label: '精确到秒',
|
||||
},
|
||||
]);
|
||||
const numberExample = computed(() => {
|
||||
if (modelData.value.processIdRule.enable) {
|
||||
let infix = '';
|
||||
switch (modelData.value.processIdRule.infix) {
|
||||
case 'DAY': {
|
||||
infix = dayjs().format('YYYYMMDD');
|
||||
break;
|
||||
}
|
||||
case 'HOUR': {
|
||||
infix = dayjs().format('YYYYMMDDHH');
|
||||
break;
|
||||
}
|
||||
case 'MINUTE': {
|
||||
infix = dayjs().format('YYYYMMDDHHmm');
|
||||
break;
|
||||
}
|
||||
case 'SECOND': {
|
||||
infix = dayjs().format('YYYYMMDDHHmmss');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return (
|
||||
modelData.value.processIdRule.prefix +
|
||||
infix +
|
||||
modelData.value.processIdRule.postfix +
|
||||
'1'.padStart(modelData.value.processIdRule.length - 1, '0')
|
||||
);
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
/** 是否开启流程前置通知 */
|
||||
const processBeforeTriggerEnable = ref(false);
|
||||
function handleProcessBeforeTriggerEnableChange(
|
||||
val: boolean | number | string,
|
||||
) {
|
||||
modelData.value.processBeforeTriggerSetting = val
|
||||
? {
|
||||
url: '',
|
||||
header: [],
|
||||
body: [],
|
||||
response: [],
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
/** 是否开启流程后置通知 */
|
||||
const processAfterTriggerEnable = ref(false);
|
||||
function handleProcessAfterTriggerEnableChange(val: boolean | number | string) {
|
||||
modelData.value.processAfterTriggerSetting = val
|
||||
? {
|
||||
url: '',
|
||||
header: [],
|
||||
body: [],
|
||||
response: [],
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
/** 是否开启任务前置通知 */
|
||||
const taskBeforeTriggerEnable = ref(false);
|
||||
function handleTaskBeforeTriggerEnableChange(val: boolean | number | string) {
|
||||
modelData.value.taskBeforeTriggerSetting = val
|
||||
? {
|
||||
url: '',
|
||||
header: [],
|
||||
body: [],
|
||||
response: [],
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
/** 是否开启任务后置通知 */
|
||||
const taskAfterTriggerEnable = ref(false);
|
||||
function handleTaskAfterTriggerEnableChange(val: boolean | number | string) {
|
||||
modelData.value.taskAfterTriggerSetting = val
|
||||
? {
|
||||
url: '',
|
||||
header: [],
|
||||
body: [],
|
||||
response: [],
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
/** 表单字段 */
|
||||
const formFields = ref<Array<{ field: string; title: string }>>([]);
|
||||
const formFieldOptions4Title = computed(() => {
|
||||
const cloneFormField = formFields.value.map((item) => {
|
||||
return {
|
||||
label: item.title,
|
||||
value: item.field,
|
||||
};
|
||||
});
|
||||
// 固定添加发起人 ID 字段
|
||||
cloneFormField.unshift({
|
||||
label: '流程名称',
|
||||
value: ProcessVariableEnum.PROCESS_DEFINITION_NAME,
|
||||
});
|
||||
cloneFormField.unshift({
|
||||
label: '发起时间',
|
||||
value: ProcessVariableEnum.START_TIME,
|
||||
});
|
||||
cloneFormField.unshift({
|
||||
label: '发起人',
|
||||
value: ProcessVariableEnum.START_USER_ID,
|
||||
});
|
||||
return cloneFormField;
|
||||
});
|
||||
const formFieldOptions4Summary = computed(() => {
|
||||
return formFields.value.map((item) => {
|
||||
return {
|
||||
label: item.title,
|
||||
value: item.field,
|
||||
};
|
||||
});
|
||||
});
|
||||
const unParsedFormFields = ref<string[]>([]); // 未解析的表单字段
|
||||
provide('formFields', unParsedFormFields); // 暴露给子组件 HttpRequestSetting 使用
|
||||
|
||||
/** 兼容以前未配置更多设置的流程 */
|
||||
function initData() {
|
||||
if (!modelData.value.processIdRule) {
|
||||
modelData.value.processIdRule = {
|
||||
enable: false,
|
||||
prefix: '',
|
||||
infix: '',
|
||||
postfix: '',
|
||||
length: 5,
|
||||
};
|
||||
}
|
||||
if (!modelData.value.printTemplateSetting) {
|
||||
modelData.value.printTemplateSetting = {
|
||||
enable: false,
|
||||
template: '',
|
||||
};
|
||||
}
|
||||
if (!modelData.value.autoApprovalType) {
|
||||
modelData.value.autoApprovalType = BpmAutoApproveType.NONE;
|
||||
}
|
||||
if (!modelData.value.titleSetting) {
|
||||
modelData.value.titleSetting = {
|
||||
enable: false,
|
||||
title: '',
|
||||
};
|
||||
}
|
||||
if (!modelData.value.summarySetting) {
|
||||
modelData.value.summarySetting = {
|
||||
enable: false,
|
||||
summary: [],
|
||||
};
|
||||
}
|
||||
if (modelData.value.processBeforeTriggerSetting) {
|
||||
processBeforeTriggerEnable.value = true;
|
||||
}
|
||||
if (modelData.value.processAfterTriggerSetting) {
|
||||
processAfterTriggerEnable.value = true;
|
||||
}
|
||||
if (modelData.value.taskBeforeTriggerSetting) {
|
||||
taskBeforeTriggerEnable.value = true;
|
||||
}
|
||||
if (modelData.value.taskAfterTriggerSetting) {
|
||||
taskAfterTriggerEnable.value = true;
|
||||
}
|
||||
if (modelData.value.allowWithdrawTask === undefined) {
|
||||
modelData.value.allowWithdrawTask = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 监听表单 ID 变化，加载表单数据 */
|
||||
watch(
|
||||
() => modelData.value.formId,
|
||||
async (newFormId) => {
|
||||
if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
|
||||
const data = await getForm(newFormId);
|
||||
const result: Array<{ field: string; title: string }> = [];
|
||||
if (data.fields) {
|
||||
unParsedFormFields.value = data.fields;
|
||||
data.fields.forEach((fieldStr: string) => {
|
||||
parseFormFields(JSON.parse(fieldStr), result);
|
||||
});
|
||||
}
|
||||
formFields.value = result;
|
||||
} else {
|
||||
formFields.value = [];
|
||||
unParsedFormFields.value = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
const formRef = ref(); // 表单引用
|
||||
|
||||
/** 表单校验 */
|
||||
async function validate() {
|
||||
await formRef.value?.validate();
|
||||
}
|
||||
|
||||
/** 自定义打印模板模态框 */
|
||||
const [PrintTemplateModal, printTemplateModalApi] = useVbenModal({
|
||||
connectedComponent: PrintTemplate,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 弹出自定义打印模板弹窗 */
|
||||
function openPrintTemplateModal() {
|
||||
printTemplateModalApi
|
||||
.setData({ template: modelData.value.printTemplateSetting.template })
|
||||
.open();
|
||||
}
|
||||
|
||||
/** 默认的打印模板， 目前自定义模板没有引入自定义样式。 看后续是否需要 */
|
||||
const defaultTemplate = `<p style="text-align: center;font-size: 1.25rem;"><strong><span data-w-e-type="mention" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></strong></p>
|
||||
<p style="text-align: right;">打印人员：<span data-w-e-type="mention" data-info="%7B%22id%22%3A%22printUser%22%7D">@打印人</span></p>
|
||||
<p style="text-align: left;">流程编号：<span data-w-e-type="mention" data-value="流程编号" data-info="%7B%22id%22%3A%22processNum%22%7D">@流程编号</span></p>
|
||||
<p> </p>
|
||||
<table style="width: 100%; height: 72.2159px;">
|
||||
<tbody>
|
||||
<tr style="height: 36.108px;">
|
||||
<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起人</td>
|
||||
<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起人" data-info="%7B%22id%22%3A%22startUser%22%7D">@发起人</span></td>
|
||||
<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">发起时间</td>
|
||||
<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="发起时间" data-info="%7B%22id%22%3A%22startTime%22%7D">@发起时间</span></td>
|
||||
</tr>
|
||||
<tr style="height: 36.108px;">
|
||||
<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">所属部门</td>
|
||||
<td style="width: 30.5551%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="发起人部门" data-info="%7B%22id%22%3A%22startUserDept%22%7D">@发起人部门</span></td>
|
||||
<td style="width: 21.7532%; border: 1px solid;" colspan="1" rowspan="1" width="auto">流程状态</td>
|
||||
<td style="width: 26.0284%; border: 1px solid;" colspan="1" rowspan="1" width="auto"><span data-w-e-type="mention" data-value="流程状态" data-info="%7B%22id%22%3A%22processStatus%22%7D">@流程状态</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p> </p>
|
||||
<div contenteditable="false" data-w-e-type="process-record" data-w-e-is-void="">
|
||||
<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">
|
||||
<tr>
|
||||
<td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 25%; border: 1px solid;">节点</td>
|
||||
<td style="width: 75%; border: 1px solid;">操作</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<p> </p>`;
|
||||
|
||||
const printTemplateEnable = computed<boolean>({
|
||||
get() {
|
||||
return !!modelData.value?.printTemplateSetting?.enable;
|
||||
},
|
||||
set(val: boolean) {
|
||||
if (!modelData.value.printTemplateSetting) {
|
||||
modelData.value.printTemplateSetting = {
|
||||
enable: false,
|
||||
template: '',
|
||||
};
|
||||
}
|
||||
modelData.value.printTemplateSetting.enable = val;
|
||||
},
|
||||
}); // 自定义打印模板开关
|
||||
|
||||
function handlePrintTemplateEnableChange(checked: any) {
|
||||
const val = !!checked;
|
||||
if (val && !modelData.value.printTemplateSetting.template) {
|
||||
modelData.value.printTemplateSetting.template = defaultTemplate;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmPrintTemplate(template: string) {
|
||||
modelData.value.printTemplateSetting.template = template;
|
||||
}
|
||||
|
||||
defineExpose({ initData, validate });
|
||||
</script>
|
||||
<template>
|
||||
<ElForm
|
||||
ref="formRef"
|
||||
:model="modelData"
|
||||
label-width="120px"
|
||||
class="mt-5 px-5"
|
||||
>
|
||||
<ElFormItem class="mb-5" label="提交人权限">
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElCheckbox v-model="modelData.allowCancelRunningProcess">
|
||||
允许撤销审批中的申请
|
||||
</ElCheckbox>
|
||||
<div class="ml-6 text-sm">
|
||||
<ElText type="warning">
|
||||
第一个审批节点通过后，提交人仍可撤销申请
|
||||
</ElText>
|
||||
</div>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="审批人权限">
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElCheckbox v-model="modelData.allowWithdrawTask">
|
||||
允许审批人撤回任务
|
||||
</ElCheckbox>
|
||||
<div class="ml-6 text-sm">
|
||||
<ElText type="info">审批人可撤回正在审批节点的前一节点</ElText>
|
||||
</div>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem v-if="modelData.processIdRule" class="mb-5" label="流程编码">
|
||||
<ElRow :gutter="8">
|
||||
<ElCol :span="1">
|
||||
<ElCheckbox v-model="modelData.processIdRule.enable" />
|
||||
</ElCol>
|
||||
<ElCol :span="5">
|
||||
<ElInput
|
||||
v-model="modelData.processIdRule.prefix"
|
||||
placeholder="前缀"
|
||||
:disabled="!modelData.processIdRule.enable"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :span="6">
|
||||
<ElSelect
|
||||
v-model="modelData.processIdRule.infix"
|
||||
clearable
|
||||
placeholder="中缀"
|
||||
:disabled="!modelData.processIdRule.enable"
|
||||
>
|
||||
<ElOption
|
||||
v-for="option in timeOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:label="option.label"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElInput
|
||||
v-model="modelData.processIdRule.postfix"
|
||||
placeholder="后缀"
|
||||
:disabled="!modelData.processIdRule.enable"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :span="4">
|
||||
<ElInputNumber
|
||||
v-model="modelData.processIdRule.length"
|
||||
:min="5"
|
||||
:disabled="!modelData.processIdRule.enable"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<div class="ml-6 mt-2" v-if="modelData.processIdRule.enable">
|
||||
<ElText type="success">编码示例：{{ numberExample }}</ElText>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="自动去重">
|
||||
<div class="flex flex-col">
|
||||
<div class="mb-2">
|
||||
<ElText>同一审批人在流程中重复出现时：</ElText>
|
||||
</div>
|
||||
<ElRadioGroup v-model="modelData.autoApprovalType">
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElRadio :value="0">不自动通过</ElRadio>
|
||||
<ElRadio :value="1">
|
||||
仅审批一次，后续重复的审批节点均自动通过
|
||||
</ElRadio>
|
||||
<ElRadio :value="2">仅针对连续审批的节点自动通过</ElRadio>
|
||||
</div>
|
||||
</ElRadioGroup>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem v-if="modelData.titleSetting" class="mb-5" label="标题设置">
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElRadioGroup v-model="modelData.titleSetting.enable">
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElRadio :value="false">
|
||||
系统默认
|
||||
<ElText type="success"> 展示流程名称 </ElText>
|
||||
</ElRadio>
|
||||
<ElRadio :value="true">
|
||||
<div class="inline-flex items-center">
|
||||
自定义标题
|
||||
<ElTooltip
|
||||
content="输入字符 '{' 即可插入表单字段"
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="lucide:circle-help"
|
||||
class="ml-1 size-4 text-gray-500"
|
||||
/>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
</ElRadio>
|
||||
</div>
|
||||
</ElRadioGroup>
|
||||
<ElMention
|
||||
v-if="modelData.titleSetting.enable"
|
||||
v-model="modelData.titleSetting.title"
|
||||
class="w-full min-w-[400px]"
|
||||
type="textarea"
|
||||
prefix="{"
|
||||
split="}"
|
||||
:options="formFieldOptions4Title"
|
||||
placeholder="请插入表单字段（输入 '{' 可以选择表单字段）或输入文本"
|
||||
/>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="
|
||||
modelData.summarySetting &&
|
||||
modelData.formType === BpmModelFormType.NORMAL
|
||||
"
|
||||
class="mb-5"
|
||||
label="摘要设置"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElRadioGroup v-model="modelData.summarySetting.enable">
|
||||
<div class="flex flex-col gap-2">
|
||||
<ElRadio :value="false">
|
||||
系统默认
|
||||
<ElText type="info">展示表单前 3 个字段</ElText>
|
||||
</ElRadio>
|
||||
<ElRadio :value="true"> 自定义摘要 </ElRadio>
|
||||
</div>
|
||||
</ElRadioGroup>
|
||||
<ElSelect
|
||||
v-if="modelData.summarySetting.enable"
|
||||
v-model="modelData.summarySetting.summary"
|
||||
multiple
|
||||
placeholder="请选择要展示的表单字段"
|
||||
class="w-full min-w-[400px]"
|
||||
>
|
||||
<ElOption
|
||||
v-for="option in formFieldOptions4Summary"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
:label="option.label"
|
||||
/>
|
||||
</ElSelect>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="流程前置通知">
|
||||
<ElRow class="mt-1">
|
||||
<ElCol :span="24">
|
||||
<div class="flex items-center">
|
||||
<ElSwitch
|
||||
v-model="processBeforeTriggerEnable"
|
||||
@change="handleProcessBeforeTriggerEnableChange"
|
||||
/>
|
||||
<span class="ml-4">流程启动后通知</span>
|
||||
</div>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow v-if="processBeforeTriggerEnable">
|
||||
<ElCol :span="24" class="mt-6">
|
||||
<!-- <HttpRequestSetting
|
||||
v-model:setting="modelData.processBeforeTriggerSetting"
|
||||
:response-enable="true"
|
||||
form-item-prefix="processBeforeTriggerSetting"
|
||||
/> -->
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="流程后置通知">
|
||||
<ElRow class="mt-1">
|
||||
<ElCol :span="24">
|
||||
<div class="flex items-center">
|
||||
<ElSwitch
|
||||
v-model="processAfterTriggerEnable"
|
||||
@change="handleProcessAfterTriggerEnableChange"
|
||||
/>
|
||||
<span class="ml-4">流程结束后通知</span>
|
||||
</div>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow v-if="processAfterTriggerEnable" class="mt-2">
|
||||
<ElCol :span="24">
|
||||
<HttpRequestSetting
|
||||
v-model:setting="modelData.processAfterTriggerSetting"
|
||||
:response-enable="true"
|
||||
form-item-prefix="processAfterTriggerSetting"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="任务前置通知">
|
||||
<ElRow class="mt-1">
|
||||
<ElCol :span="24">
|
||||
<div class="flex items-center">
|
||||
<ElSwitch
|
||||
v-model="taskBeforeTriggerEnable"
|
||||
@change="handleTaskBeforeTriggerEnableChange"
|
||||
/>
|
||||
<span class="ml-4">任务执行时通知</span>
|
||||
</div>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow v-if="taskBeforeTriggerEnable" class="mt-2">
|
||||
<ElCol :span="24">
|
||||
<HttpRequestSetting
|
||||
v-model:setting="modelData.taskBeforeTriggerSetting"
|
||||
:response-enable="true"
|
||||
form-item-prefix="taskBeforeTriggerSetting"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="任务后置通知">
|
||||
<ElRow class="mt-1">
|
||||
<ElCol :span="24">
|
||||
<div class="flex items-center">
|
||||
<ElSwitch
|
||||
v-model="taskAfterTriggerEnable"
|
||||
@change="handleTaskAfterTriggerEnableChange"
|
||||
/>
|
||||
<span class="ml-4">任务结束后通知</span>
|
||||
</div>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow v-if="taskAfterTriggerEnable" class="mt-2">
|
||||
<ElCol :span="24">
|
||||
<HttpRequestSetting
|
||||
v-model:setting="modelData.taskAfterTriggerSetting"
|
||||
:response-enable="true"
|
||||
form-item-prefix="taskAfterTriggerSetting"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElFormItem>
|
||||
<ElFormItem class="mb-5" label="自定义打印模板">
|
||||
<div class="flex w-full flex-col">
|
||||
<div class="flex items-center">
|
||||
<ElSwitch
|
||||
v-model="printTemplateEnable"
|
||||
@change="handlePrintTemplateEnableChange"
|
||||
/>
|
||||
<ElButton
|
||||
v-if="printTemplateEnable"
|
||||
class="ml-2 flex items-center"
|
||||
link
|
||||
@click="openPrintTemplateModal"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:pencil" />
|
||||
</template>
|
||||
编辑模板
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<PrintTemplateModal
|
||||
:form-fields="formFields"
|
||||
@confirm="confirmPrintTemplate"
|
||||
/>
|
||||
</ElForm>
|
||||
</template>
|
||||
184
apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
Normal file
184
apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FormItemRule } from 'element-plus';
|
||||
|
||||
import type { BpmFormApi } from '#/api/bpm/form';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { BpmModelFormType, DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import FormCreate from '@form-create/element-ui';
|
||||
import {
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElOption,
|
||||
ElRadio,
|
||||
ElRadioGroup,
|
||||
ElSelect,
|
||||
ElTooltip,
|
||||
} from 'element-plus';
|
||||
|
||||
import { getForm } from '#/api/bpm/form';
|
||||
import { setConfAndFields2 } from '#/components/form-create';
|
||||
|
||||
const props = defineProps({
|
||||
formList: {
|
||||
type: Array<BpmFormApi.Form>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const modelData = defineModel<any>(); // 创建本地数据副本
|
||||
const formPreview = ref({
|
||||
formData: {} as any,
|
||||
rule: [],
|
||||
option: {
|
||||
submitBtn: false,
|
||||
resetBtn: false,
|
||||
formData: {},
|
||||
},
|
||||
}); // 表单预览数据
|
||||
|
||||
const rules: Record<string, FormItemRule[]> = {
|
||||
formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
|
||||
formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
|
||||
formCustomCreatePath: [
|
||||
{ required: true, message: '表单提交路由不能为空', trigger: 'blur' },
|
||||
],
|
||||
formCustomViewPath: [
|
||||
{ required: true, message: '表单查看地址不能为空', trigger: 'blur' },
|
||||
],
|
||||
};
|
||||
|
||||
/** 监听表单 ID 变化，加载表单数据 */
|
||||
watch(
|
||||
() => modelData.value.formId,
|
||||
async (newFormId) => {
|
||||
if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
|
||||
const data = await getForm(newFormId);
|
||||
setConfAndFields2(formPreview.value, data.conf, data.fields);
|
||||
// 设置只读
|
||||
formPreview.value.rule.forEach((item: any) => {
|
||||
item.props = { ...item.props, disabled: true };
|
||||
});
|
||||
} else {
|
||||
formPreview.value.rule = [];
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/** 表单校验 */
|
||||
async function validate() {
|
||||
await formRef.value?.validate();
|
||||
}
|
||||
|
||||
defineExpose({ validate });
|
||||
</script>
|
||||
<template>
|
||||
<ElForm
|
||||
ref="formRef"
|
||||
:model="modelData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="mt-5"
|
||||
>
|
||||
<ElFormItem label="表单类型" prop="formType" class="mb-5">
|
||||
<ElRadioGroup v-model="modelData.formType">
|
||||
<ElRadio
|
||||
v-for="(dict, index) in getDictOptions(
|
||||
DICT_TYPE.BPM_MODEL_FORM_TYPE,
|
||||
'number',
|
||||
)"
|
||||
:key="index"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</ElRadio>
|
||||
</ElRadioGroup>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="modelData.formType === BpmModelFormType.NORMAL"
|
||||
label="流程表单"
|
||||
prop="formId"
|
||||
class="mb-5"
|
||||
>
|
||||
<ElSelect v-model="modelData.formId" clearable>
|
||||
<ElOption
|
||||
v-for="form in props.formList"
|
||||
:key="form.id"
|
||||
:value="form.id!"
|
||||
:label="form.name"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="modelData.formType === BpmModelFormType.CUSTOM"
|
||||
label="表单提交路由"
|
||||
prop="formCustomCreatePath"
|
||||
class="mb-5"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<ElInput
|
||||
v-model="modelData.formCustomCreatePath"
|
||||
placeholder="请输入表单提交路由"
|
||||
/>
|
||||
<ElTooltip
|
||||
content="自定义表单的提交路径，使用 Vue 的路由地址, 例如说: bpm/oa/leave/create.vue"
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="lucide:circle-help"
|
||||
class="ml-1 size-5 text-gray-900"
|
||||
/>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="modelData.formType === BpmModelFormType.CUSTOM"
|
||||
label="表单查看地址"
|
||||
prop="formCustomViewPath"
|
||||
class="mb-5"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<ElInput
|
||||
v-model="modelData.formCustomViewPath"
|
||||
placeholder="请输入表单查看的组件地址"
|
||||
/>
|
||||
<ElTooltip
|
||||
content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="lucide:circle-help"
|
||||
class="ml-1 size-5 text-gray-900"
|
||||
/>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
<!-- 表单预览 -->
|
||||
<div
|
||||
v-if="
|
||||
modelData.formType === BpmModelFormType.NORMAL &&
|
||||
modelData.formId &&
|
||||
formPreview.rule.length > 0
|
||||
"
|
||||
class="mb-5 mt-7 rounded-sm border border-solid border-gray-200 p-5"
|
||||
>
|
||||
<div class="mb-4 flex items-center">
|
||||
<div class="mr-2 h-4 w-1 bg-blue-500"></div>
|
||||
<span class="text-base font-bold">表单预览</span>
|
||||
</div>
|
||||
<FormCreate
|
||||
v-model:api="formPreview.formData"
|
||||
:rule="formPreview.rule"
|
||||
:option="formPreview.option"
|
||||
/>
|
||||
</div>
|
||||
</ElForm>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { BpmModelType } from '@vben/constants';
|
||||
|
||||
import BpmModelEditor from './bpm-model-editor.vue';
|
||||
import SimpleModelDesign from './simple-model-design.vue';
|
||||
|
||||
const modelData = defineModel<any>(); // 创建本地数据副本
|
||||
// const processData = inject('processData') as Ref;
|
||||
|
||||
const simpleDesign = ref();
|
||||
|
||||
/** 表单校验 */
|
||||
async function validate() {
|
||||
// 获取最新的流程数据
|
||||
// if (!processData.value) {
|
||||
// throw new Error('请设计流程');
|
||||
// }
|
||||
// if (modelData.value.type === BpmModelType.SIMPLE) {
|
||||
// // 简易设计器校验
|
||||
// const validateResult = await simpleDesign.value?.validateConfig();
|
||||
// if (!validateResult) {
|
||||
// throw new Error('请完善设计配置');
|
||||
// }
|
||||
// }
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 处理设计器保存成功 */
|
||||
async function handleDesignSuccess(data?: any) {
|
||||
if (data) {
|
||||
// 创建新的对象以触发响应式更新
|
||||
const newModelData = {
|
||||
...modelData.value,
|
||||
bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
|
||||
simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
|
||||
};
|
||||
// 使用 emit 更新父组件的数据
|
||||
await nextTick();
|
||||
// 更新表单的模型数据部分
|
||||
modelData.value = newModelData;
|
||||
}
|
||||
}
|
||||
|
||||
/** 是否显示设计器 */
|
||||
const showDesigner = computed(() => {
|
||||
return Boolean(modelData.value?.key && modelData.value?.name);
|
||||
});
|
||||
|
||||
defineExpose({ validate });
|
||||
</script>
|
||||
<template>
|
||||
<div class="h-full">
|
||||
<!-- BPMN设计器 -->
|
||||
<template v-if="modelData.type === BpmModelType.BPMN">
|
||||
<BpmModelEditor
|
||||
v-if="showDesigner"
|
||||
:model-id="modelData.id"
|
||||
:model-key="modelData.key"
|
||||
:model-name="modelData.name"
|
||||
@success="handleDesignSuccess"
|
||||
/>
|
||||
</template>
|
||||
<!-- Simple设计器 -->
|
||||
<template v-else>
|
||||
<SimpleModelDesign
|
||||
v-if="showDesigner"
|
||||
:model-name="modelData.name"
|
||||
:model-form-id="modelData.formId"
|
||||
:model-form-type="modelData.formType"
|
||||
:start-user-ids="modelData.startUserIds"
|
||||
:start-dept-ids="modelData.startDeptIds"
|
||||
@success="handleDesignSuccess"
|
||||
ref="simpleDesign"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { ContentWrap } from '@vben/common-ui';
|
||||
|
||||
// import { SimpleProcessDesigner } from '#/views/bpm/components/simple-process-design';
|
||||
|
||||
defineOptions({ name: 'SimpleModelDesign' });
|
||||
|
||||
defineProps<{
|
||||
modelFormId?: number;
|
||||
modelFormType?: number;
|
||||
modelName?: string;
|
||||
startDeptIds?: number[];
|
||||
startUserIds?: number[];
|
||||
}>();
|
||||
|
||||
// const emit = defineEmits(['success']);
|
||||
|
||||
const designerRef = ref();
|
||||
|
||||
/** 保存成功回调 */
|
||||
// function handleSuccess(data?: any) {
|
||||
// if (data) {
|
||||
// emit('success', data);
|
||||
// }
|
||||
// }
|
||||
|
||||
/** 设计器配置校验 */
|
||||
async function validateConfig() {
|
||||
return await designerRef.value.validate();
|
||||
}
|
||||
|
||||
defineExpose({ validateConfig });
|
||||
</script>
|
||||
<template>
|
||||
<ContentWrap class="px-4 py-5">
|
||||
<!-- <SimpleProcessDesigner
|
||||
:model-form-id="modelFormId"
|
||||
:model-name="modelName"
|
||||
:model-form-type="modelFormType"
|
||||
@success="handleSuccess"
|
||||
:start-user-ids="startUserIds"
|
||||
:start-dept-ids="startDeptIds"
|
||||
ref="designerRef"
|
||||
/> -->
|
||||
</ContentWrap>
|
||||
</template>
|
||||
@@ -0,0 +1,78 @@
|
||||
/** TinyMCE 自定义功能：
|
||||
* - processrecord 按钮：插入流程记录占位元素
|
||||
* - @ 自动补全：插入 mention 占位元素
|
||||
*/
|
||||
|
||||
// @ts-ignore TinyMCE 全局或通过打包器提供
|
||||
import type { Editor } from 'tinymce';
|
||||
|
||||
export interface MentionItem {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
/** 在编辑器 setup 回调中注册流程记录按钮和 @ 自动补全 */
|
||||
export function setupTinyPlugins(
|
||||
editor: Editor,
|
||||
getMentionList: () => MentionItem[],
|
||||
) {
|
||||
// 按钮：流程记录
|
||||
editor.ui.registry.addButton('processrecord', {
|
||||
text: '流程记录',
|
||||
tooltip: '插入流程记录占位',
|
||||
onAction: () => {
|
||||
// 流程记录占位显示， 仅用于显示。process-print.vue 组件中会替换掉
|
||||
editor.insertContent(
|
||||
[
|
||||
'<div data-w-e-type="process-record" data-w-e-is-void contenteditable="false">',
|
||||
'<table class="process-record-table" style="width: 100%; border-collapse: collapse; border: 1px solid;">',
|
||||
'<tr><td style="width: 100%; border: 1px solid; text-align: center;" colspan="2">流程记录</td></tr>',
|
||||
'<tr>',
|
||||
'<td style="width: 25%; border: 1px solid;">节点</td>',
|
||||
'<td style="width: 75%; border: 1px solid;">操作</td>',
|
||||
'</tr>',
|
||||
'</table>',
|
||||
'</div>',
|
||||
].join(''),
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// @ 自动补全
|
||||
editor.ui.registry.addAutocompleter('bpmMention', {
|
||||
trigger: '@',
|
||||
minChars: 0,
|
||||
columns: 1,
|
||||
fetch: (
|
||||
pattern: string,
|
||||
_maxResults: number,
|
||||
_fetchOptions: Record<string, any>,
|
||||
) => {
|
||||
const list = getMentionList();
|
||||
const keyword = (pattern || '').toLowerCase().trim();
|
||||
const data = list
|
||||
.filter((i) => i.name.toLowerCase().includes(keyword))
|
||||
.map((i) => ({
|
||||
value: i.id,
|
||||
text: i.name,
|
||||
}));
|
||||
return Promise.resolve(data);
|
||||
},
|
||||
onAction: (
|
||||
autocompleteApi: any,
|
||||
rng: Range,
|
||||
value: string,
|
||||
_meta: Record<string, any>,
|
||||
) => {
|
||||
const list = getMentionList();
|
||||
const item = list.find((i) => i.id === value);
|
||||
const name = item ? item.name : value;
|
||||
const info = encodeURIComponent(JSON.stringify({ id: value }));
|
||||
editor.selection.setRng(rng);
|
||||
editor.insertContent(
|
||||
`<span data-w-e-type="mention" data-info="${info}">@${name}</span>`,
|
||||
);
|
||||
autocompleteApi.hide();
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user