【代码评审】Bpm：新的编辑界面
YunaiV
parent
c083a0c986
commit
5e386336b9
|
|
@ -332,8 +332,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||
}
|
||||
},
|
||||
{
|
||||
path: 'manager/model/create-update',
|
||||
component: () => import('@/views/bpm/model/CreateUpdate.vue'),
|
||||
path: 'manager/model/create-update', // TODO @goldenzqqq：是不是拆分成两个，一个 create 创建流程；一个 update 修改流程？
|
||||
component: () => import('@/views/bpm/model/CreateUpdate.vue'), // TODO @goldenzqqq：是不是放到 '@/views/bpm/model/form/index.vue'。然后，原本的 editor/index.vue 是不是可以清理了呀？
|
||||
name: 'BpmModelCreateUpdate',
|
||||
meta: {
|
||||
noCache: true,
|
||||
|
|
|
|||
|
|
@ -339,21 +339,7 @@ const handleChangeState = async (row: any) => {
|
|||
|
||||
/** 设计流程 */
|
||||
const handleDesign = (row: any) => {
|
||||
// if (row.type == BpmModelType.BPMN) {
|
||||
// push({
|
||||
// name: 'BpmModelEditor',
|
||||
// query: {
|
||||
// modelId: row.id
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// push({
|
||||
// name: 'SimpleModelDesign',
|
||||
// query: {
|
||||
// modelId: row.id
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// TODO @goldenzqqq：最好使用 name 哈
|
||||
push(`/bpm/manager/model/create-update?id=${row.id}`)
|
||||
}
|
||||
|
||||
|
|
@ -497,6 +483,7 @@ const handleDeleteCategory = async () => {
|
|||
/** 添加流程模型弹窗 */
|
||||
const modelFormRef = ref()
|
||||
const openModelForm = (type: string, id?: number) => {
|
||||
// TODO @goldenzqqq：最好使用 name 哈
|
||||
if (type === 'create') {
|
||||
push('/bpm/manager/model/create-update')
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@
|
|||
<!-- 主体内容 -->
|
||||
<ContentWrap class="mt-50px">
|
||||
<!-- 第一步：基本信息 -->
|
||||
<!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
|
||||
<!-- TODO @goldenzqqq：有必要，把第一步、第二步，拆成独立的 vue 组件哇？主要是，把相关的 html、还有 js 逻辑，可以挪进去，让主的 index.vue 更精简一点 -->
|
||||
<div v-show="currentStep === 0">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
|
|
@ -200,6 +202,7 @@
|
|||
|
||||
<div v-if="currentStep === 1">
|
||||
<!-- 第二步：表单设计 -->
|
||||
<!-- TODO @goldenzqqq：是不是可以居中哈，1024 -->
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
|
|
@ -316,9 +319,7 @@ const router = useRouter()
|
|||
const route = useRoute()
|
||||
const userStore = useUserStoreWithOut()
|
||||
|
||||
// 步骤控制
|
||||
const currentStep = ref(0)
|
||||
// 表单数据
|
||||
const currentStep = ref(0) // 步骤控制
|
||||
const formRef = ref()
|
||||
const formData: any = ref({
|
||||
id: undefined,
|
||||
|
|
@ -337,9 +338,7 @@ const formData: any = ref({
|
|||
managerUserType: undefined,
|
||||
startUserIds: [],
|
||||
managerUserIds: []
|
||||
})
|
||||
|
||||
// 表单校验规则
|
||||
}) // 表单数据
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
|
||||
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
|
||||
|
|
@ -352,7 +351,7 @@ const formRules = {
|
|||
formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
|
||||
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
|
||||
managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
|
||||
}
|
||||
} // 表单校验规则
|
||||
|
||||
// 流程设计器相关
|
||||
const xmlString = ref(undefined)
|
||||
|
|
@ -368,19 +367,19 @@ const selectedManagerUsers = ref<UserVO[]>([])
|
|||
const userSelectFormRef = ref()
|
||||
const currentSelectType = ref<'start' | 'manager'>('start')
|
||||
|
||||
// 打开发起人选择
|
||||
/** 打开发起人选择 */
|
||||
const openStartUserSelect = () => {
|
||||
currentSelectType.value = 'start'
|
||||
userSelectFormRef.value.open(0, selectedStartUsers.value)
|
||||
}
|
||||
|
||||
// 打开管理员选择
|
||||
/** 打开管理员选择 */
|
||||
const openManagerUserSelect = () => {
|
||||
currentSelectType.value = 'manager'
|
||||
userSelectFormRef.value.open(0, selectedManagerUsers.value)
|
||||
}
|
||||
|
||||
// 处理用户选择确认
|
||||
/** 处理用户选择确认 */
|
||||
const handleUserSelectConfirm = (_, users: UserVO[]) => {
|
||||
if (currentSelectType.value === 'start') {
|
||||
selectedStartUsers.value = users
|
||||
|
|
@ -391,7 +390,7 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 处理发起人类型变化
|
||||
/** 处理发起人类型变化 */
|
||||
const handleStartUserTypeChange = (value: number) => {
|
||||
if (value !== 1) {
|
||||
selectedStartUsers.value = []
|
||||
|
|
@ -399,7 +398,7 @@ const handleStartUserTypeChange = (value: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 处理管理员类型变化
|
||||
/** 处理管理员类型变化 */
|
||||
const handleManagerUserTypeChange = (value: number) => {
|
||||
if (value !== 1) {
|
||||
selectedManagerUsers.value = []
|
||||
|
|
@ -407,19 +406,21 @@ const handleManagerUserTypeChange = (value: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 移除发起人
|
||||
/** 移除发起人 */
|
||||
const handleRemoveStartUser = (user: UserVO) => {
|
||||
selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
|
||||
formData.value.startUserIds = formData.value.startUserIds.filter((id) => id !== user.id)
|
||||
formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
|
||||
}
|
||||
|
||||
// 移除管理员
|
||||
/** 移除管理员 */
|
||||
const handleRemoveManagerUser = (user: UserVO) => {
|
||||
selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
|
||||
formData.value.managerUserIds = formData.value.managerUserIds.filter((id) => id !== user.id)
|
||||
formData.value.managerUserIds = formData.value.managerUserIds.filter(
|
||||
(id: number) => id !== user.id
|
||||
)
|
||||
}
|
||||
|
||||
// 保存操作
|
||||
/** 保存操作 */
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (formData.value.id) {
|
||||
|
|
@ -436,7 +437,7 @@ const handleSave = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 发布操作
|
||||
/** 发布操作 */
|
||||
const handleDeploy = async () => {
|
||||
try {
|
||||
await message.confirm('是否确认发布该流程？')
|
||||
|
|
@ -445,7 +446,8 @@ const handleDeploy = async () => {
|
|||
await handleSave()
|
||||
await ModelApi.deployModel(formData.value.id)
|
||||
message.success('发布成功')
|
||||
router.push({ path: '/bpm/manager/model' })
|
||||
// TODO @goldenzqqq：最好使用 name 哈
|
||||
await router.push({ path: '/bpm/manager/model' })
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
// 校验失败时,跳转到对应步骤
|
||||
|
|
@ -465,7 +467,7 @@ const handleDeploy = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
/** 初始化数据 */
|
||||
const initData = async () => {
|
||||
const modelId = route.query.id as unknown as string
|
||||
if (modelId) {
|
||||
|
|
@ -497,16 +499,12 @@ const initData = async () => {
|
|||
userList.value = await UserApi.getSimpleUserList()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initData()
|
||||
})
|
||||
|
||||
// 第一步校验
|
||||
/** 第一步校验 */
|
||||
const validateStep1 = async () => {
|
||||
await formRef.value?.validate(['name', 'key', 'category', 'icon', 'type', 'visible'])
|
||||
}
|
||||
|
||||
// 第二步校验
|
||||
/** 第二步校验 */
|
||||
const validateStep2 = async () => {
|
||||
await formRef.value?.validate([
|
||||
'formType',
|
||||
|
|
@ -516,13 +514,14 @@ const validateStep2 = async () => {
|
|||
])
|
||||
}
|
||||
|
||||
// 第三步校验
|
||||
/** 第三步校验 */
|
||||
const validateStep3 = async () => {
|
||||
if (!xmlString.value) {
|
||||
throw new Error('请设计流程')
|
||||
}
|
||||
}
|
||||
|
||||
/** 校验全部 */
|
||||
const validateAllSteps = async () => {
|
||||
for (const step of steps) {
|
||||
if (step.validator) {
|
||||
|
|
@ -531,13 +530,14 @@ const validateAllSteps = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO @goldenzqqq：是不是可以把 step1、step2、step3，改成 basic、form、designer。这样，可读性会好点。
|
||||
const steps = [
|
||||
{ title: '基本信息', validator: validateStep1 },
|
||||
{ title: '表单设计', validator: validateStep2 },
|
||||
{ title: '流程设计', validator: validateStep3 }
|
||||
]
|
||||
|
||||
// 处理设计器保存成功
|
||||
/** 处理设计器保存成功 */
|
||||
const handleDesignSuccess = (bpmnXml?: string) => {
|
||||
if (bpmnXml) {
|
||||
// 新建时，保存设计器生成的XML
|
||||
|
|
@ -546,7 +546,7 @@ const handleDesignSuccess = (bpmnXml?: string) => {
|
|||
message.success('保存成功')
|
||||
}
|
||||
|
||||
// 步骤切换处理
|
||||
/** 步骤切换处理 */
|
||||
const handleStepClick = async (index: number) => {
|
||||
// 如果是切换到第三步（流程设计），需要校验key和name
|
||||
if (index === 2) {
|
||||
|
|
@ -555,11 +555,12 @@ const handleStepClick = async (index: number) => {
|
|||
return
|
||||
}
|
||||
}
|
||||
// TODO @goldenzqqq：感觉这里可以优化下，切换的时候，必须当前表单填写正确，不然不允许切换。
|
||||
|
||||
currentStep.value = index
|
||||
}
|
||||
|
||||
// 添加一个计算属性来判断是否显示设计器
|
||||
/** 添加一个计算属性来判断是否显示设计器 */
|
||||
const showDesigner = computed(() => {
|
||||
return (
|
||||
currentStep.value === 2 &&
|
||||
|
|
@ -585,6 +586,11 @@ onBeforeUnmount(() => {
|
|||
w.bpmnInstances = null
|
||||
}
|
||||
})
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -201,11 +201,12 @@ import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
|
|||
import { ElMessageBox } from 'element-plus'
|
||||
import * as ModelApi from '@/api/bpm/model'
|
||||
import * as FormApi from '@/api/bpm/form'
|
||||
import { CategoryApi } from '@/api/bpm/category'
|
||||
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
|
||||
import { BpmModelFormType, BpmModelType } from '@/utils/constants'
|
||||
import { UserVO } from '@/api/system/user'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||
import { FormVO } from '@/api/bpm/form'
|
||||
|
||||
defineOptions({ name: 'ModelForm' })
|
||||
|
||||
|
|
@ -251,12 +252,12 @@ const formRules = reactive({
|
|||
managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const formList = ref([]) // 流程表单的下拉框的数据
|
||||
const categoryList = ref([]) // 流程分类列表
|
||||
const formList = ref<FormVO[]>([]) // 流程表单的下拉框的数据
|
||||
const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
|
||||
const userList = ref<UserVO[]>([]) // 用户列表
|
||||
const selectedStartUsers = ref<UserVO[]>([]) // 已选择的发起人列表
|
||||
const selectedManagerUsers = ref<UserVO[]>([]) // 已选择的管理员列表
|
||||
const userSelectFormRef = ref() // 用户选择弹窗ref
|
||||
const userSelectFormRef = ref() // 用户选择弹窗 ref
|
||||
const currentSelectType = ref<'start' | 'manager'>('start') // 当前选择的是发起人还是管理员
|
||||
|
||||
/** 打开弹窗 */
|
||||
|
|
@ -363,7 +364,7 @@ const resetForm = () => {
|
|||
selectedManagerUsers.value = []
|
||||
}
|
||||
|
||||
// 处理发起人类型变化
|
||||
/** 处理发起人类型变化 */
|
||||
const handleStartUserTypeChange = (value: number) => {
|
||||
if (value !== 1) {
|
||||
selectedStartUsers.value = []
|
||||
|
|
@ -371,7 +372,7 @@ const handleStartUserTypeChange = (value: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 处理管理员类型变化
|
||||
/** 处理管理员类型变化 */
|
||||
const handleManagerUserTypeChange = (value: number) => {
|
||||
if (value !== 1) {
|
||||
selectedManagerUsers.value = []
|
||||
|
|
@ -379,19 +380,19 @@ const handleManagerUserTypeChange = (value: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 打开发起人选择
|
||||
/** 打开发起人选择 */
|
||||
const openStartUserSelect = () => {
|
||||
currentSelectType.value = 'start'
|
||||
userSelectFormRef.value.open(0, selectedStartUsers.value)
|
||||
}
|
||||
|
||||
// 打开管理员选择
|
||||
/** 打开管理员选择 */
|
||||
const openManagerUserSelect = () => {
|
||||
currentSelectType.value = 'manager'
|
||||
userSelectFormRef.value.open(0, selectedManagerUsers.value)
|
||||
}
|
||||
|
||||
// 处理用户选择确认
|
||||
/** 处理用户选择确认 */
|
||||
const handleUserSelectConfirm = (_, users: UserVO[]) => {
|
||||
if (currentSelectType.value === 'start') {
|
||||
selectedStartUsers.value = users
|
||||
|
|
@ -402,16 +403,18 @@ const handleUserSelectConfirm = (_, users: UserVO[]) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 移除发起人
|
||||
/** 移除发起人 */
|
||||
const handleRemoveStartUser = (user: UserVO) => {
|
||||
selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
|
||||
formData.value.startUserIds = formData.value.startUserIds.filter((id) => id !== user.id)
|
||||
formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
|
||||
}
|
||||
|
||||
// 移除管理员
|
||||
/** 移除管理员 */
|
||||
const handleRemoveManagerUser = (user: UserVO) => {
|
||||
selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
|
||||
formData.value.managerUserIds = formData.value.managerUserIds.filter((id) => id !== user.id)
|
||||
formData.value.managerUserIds = formData.value.managerUserIds.filter(
|
||||
(id: number) => id !== user.id
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/d
|
|||
// 自定义左侧菜单（修改 默认任务 为 用户任务）
|
||||
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
|
||||
import * as ModelApi from '@/api/bpm/model'
|
||||
import { getForm, FormVO } from '@/api/bpm/form'
|
||||
|
||||
defineOptions({ name: 'BpmModelEditor' })
|
||||
|
||||
|
|
@ -82,7 +81,7 @@ const initBpmnInstances = () => {
|
|||
}
|
||||
|
||||
// 检查所有实例是否都存在
|
||||
return Object.values(instances).every(instance => instance)
|
||||
return Object.values(instances).every((instance) => instance)
|
||||
} catch (error) {
|
||||
console.error('初始化 bpmnInstances 失败:', error)
|
||||
return false
|
||||
|
|
@ -168,7 +167,7 @@ onMounted(async () => {
|
|||
}
|
||||
})
|
||||
|
||||
// 更新模型数据
|
||||
/** 更新模型数据 */
|
||||
const updateModelData = async (key?: string, name?: string) => {
|
||||
if (key && name) {
|
||||
xmlString.value = getDefaultBpmnXml(key, name)
|
||||
|
|
@ -185,12 +184,16 @@ const updateModelData = async (key?: string, name?: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 监听key和name的变化
|
||||
watch([() => props.modelKey, () => props.modelName], async ([newKey, newName]) => {
|
||||
if (!props.modelId && newKey && newName && modeler.value) {
|
||||
await updateModelData(newKey, newName)
|
||||
}
|
||||
}, { immediate: true, deep: true })
|
||||
// 监听 key 和 name 的变化
|
||||
watch(
|
||||
[() => props.modelKey, () => props.modelName],
|
||||
async ([newKey, newName]) => {
|
||||
if (!props.modelId && newKey && newName && modeler.value) {
|
||||
await updateModelData(newKey, newName)
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
// 在组件卸载时清理
|
||||
onBeforeUnmount(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue