From 3357b5f0f0919f7a52cd32a6d6de0acb14e0daaf Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期二, 17 十二月 2024 17:29:01 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/bpm/model/ModelForm.vue | 234 +++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 148 insertions(+), 86 deletions(-)
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index ce60edc..16d3c1d 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -8,12 +8,7 @@
label-width="110px"
>
<el-form-item label="流程标识" prop="key">
- <el-input
- v-model="formData.key"
- :disabled="!!formData.id"
- placeholder="请输入流标标识"
- style="width: 330px"
- />
+ <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
<el-tooltip
v-if="!formData.id"
class="item"
@@ -35,7 +30,7 @@
placeholder="请输入流程名称"
/>
</el-form-item>
- <el-form-item v-if="formData.id" label="流程分类" prop="category">
+ <el-form-item label="流程分类" prop="category">
<el-select
v-model="formData.category"
clearable
@@ -50,73 +45,108 @@
/>
</el-select>
</el-form-item>
- <el-form-item v-if="formData.id" label="流程图标" prop="icon">
- <UploadImg v-model="formData.icon" :limit="1" height="128px" width="128px" />
+ <el-form-item label="流程图标" prop="icon">
+ <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
</el-form-item>
<el-form-item label="流程描述" prop="description">
<el-input v-model="formData.description" clearable type="textarea" />
</el-form-item>
- <div v-if="formData.id">
- <el-form-item label="表单类型" prop="formType">
- <el-radio-group v-model="formData.formType">
- <el-radio
- v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
- :key="dict.value"
- :label="dict.value"
- >
- {{ dict.label }}
- </el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
- <el-select v-model="formData.formId" clearable style="width: 100%">
- <el-option
- v-for="form in formList"
- :key="form.id"
- :label="form.name"
- :value="form.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item
- v-if="formData.formType === 20"
- label="表单提交路由"
- prop="formCustomCreatePath"
- >
- <el-input
- v-model="formData.formCustomCreatePath"
- placeholder="请输入表单提交路由"
- style="width: 330px"
- />
- <el-tooltip
- class="item"
- content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
- effect="light"
- placement="top"
+ <el-form-item label="流程类型" prop="type">
+ <el-radio-group v-model="formData.type">
+ <el-radio
+ v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
+ :key="dict.value"
+ :label="dict.value"
>
- <i class="el-icon-question" style="padding-left: 5px"></i>
- </el-tooltip>
- </el-form-item>
- <el-form-item
- v-if="formData.formType === 20"
- label="表单查看地址"
- prop="formCustomViewPath"
- >
- <el-input
- v-model="formData.formCustomViewPath"
- placeholder="请输入表单查看的组件地址"
- style="width: 330px"
- />
- <el-tooltip
- class="item"
- content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail"
- effect="light"
- placement="top"
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="表单类型" prop="formType">
+ <el-radio-group v-model="formData.formType">
+ <el-radio
+ v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+ :key="dict.value"
+ :label="dict.value"
>
- <i class="el-icon-question" style="padding-left: 5px"></i>
- </el-tooltip>
- </el-form-item>
- </div>
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
+ <el-select v-model="formData.formId" clearable style="width: 100%">
+ <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
+ </el-select>
+ </el-form-item>
+ <el-form-item
+ v-if="formData.formType === 20"
+ label="表单提交路由"
+ prop="formCustomCreatePath"
+ >
+ <el-input
+ v-model="formData.formCustomCreatePath"
+ placeholder="请输入表单提交路由"
+ style="width: 330px"
+ />
+ <el-tooltip
+ class="item"
+ content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
+ effect="light"
+ placement="top"
+ >
+ <i class="el-icon-question" style="padding-left: 5px"></i>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
+ <el-input
+ v-model="formData.formCustomViewPath"
+ placeholder="请输入表单查看的组件地址"
+ style="width: 330px"
+ />
+ <el-tooltip
+ class="item"
+ content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+ effect="light"
+ placement="top"
+ >
+ <i class="el-icon-question" style="padding-left: 5px"></i>
+ </el-tooltip>
+ </el-form-item>
+ <el-form-item label="是否可见" prop="visible">
+ <el-radio-group v-model="formData.visible">
+ <el-radio
+ v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+ :key="dict.value as string"
+ :label="dict.value"
+ >
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="谁可以发起" prop="startUserIds">
+ <el-select
+ v-model="formData.startUserIds"
+ multiple
+ placeholder="请选择可发起人，默认（不选择）则所有人都可以发起"
+ >
+ <el-option
+ v-for="user in userList"
+ :key="user.id"
+ :label="user.nickname"
+ :value="user.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="流程管理员" prop="managerUserIds">
+ <el-select v-model="formData.managerUserIds" multiple placeholder="请选择流程管理员">
+ <el-option
+ v-for="user in userList"
+ :key="user.id"
+ :label="user.nickname"
+ :value="user.id"
+ />
+ </el-select>
+ </el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -125,45 +155,65 @@
</Dialog>
</template>
<script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { propTypes } from '@/utils/propTypes'
+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 { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { UserVO } from '@/api/system/user'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
defineOptions({ name: 'ModelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const props = defineProps({
+ categoryId: propTypes.number
+})
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
- formType: 10,
+ id: undefined,
name: '',
+ key: '',
category: undefined,
icon: undefined,
description: '',
+ type: BpmModelType.BPMN,
+ formType: BpmModelFormType.NORMAL,
formId: '',
formCustomCreatePath: '',
- formCustomViewPath: ''
+ formCustomViewPath: '',
+ visible: true,
+ startUserIds: [],
+ managerUserIds: []
})
const formRules = reactive({
- name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
- key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
- category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
- icon: [{ required: true, message: '参数图标不能为空', trigger: 'blur' }],
- value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
- visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+ name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+ key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+ category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
+ icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
+ type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+ formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+ formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+ formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
+ formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
+ visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+ managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const formList = ref([]) // 流程表单的下拉框的数据
const categoryList = ref([]) // 流程分类列表
+const userList = ref<UserVO[]>([]) // 用户列表
/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: string) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
@@ -176,11 +226,18 @@
} finally {
formLoading.value = false
}
+ } else {
+ formData.value.managerUserIds.push(userStore.getUser.id)
}
// 获得流程表单的下拉框的数据
formList.value = await FormApi.getFormSimpleList()
// 查询流程分类列表
categoryList.value = await CategoryApi.getCategorySimpleList()
+ // 查询用户列表
+ userList.value = await UserApi.getSimpleUserList()
+ if (props.categoryId) {
+ formData.value.category = props.categoryId
+ }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -199,10 +256,9 @@
await ModelApi.createModel(data)
// 提示，引导用户做后续的操作
await ElMessageBox.alert(
- '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
- '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
- '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
- '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+ '<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
+ '<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
+ '<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
'重要提示',
{
@@ -225,14 +281,20 @@
/** 重置表单 */
const resetForm = () => {
formData.value = {
- formType: 10,
+ id: undefined,
name: '',
+ key: '',
category: undefined,
- icon: '',
+ icon: undefined,
description: '',
+ type: BpmModelType.BPMN,
+ formType: BpmModelFormType.NORMAL,
formId: '',
formCustomCreatePath: '',
- formCustomViewPath: ''
+ formCustomViewPath: '',
+ visible: true,
+ startUserIds: [],
+ managerUserIds: []
}
formRef.value?.resetFields()
}
--
Gitblit v1.9.3