From f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7 Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期二, 17 十二月 2024 18:16:58 +0800
Subject: [PATCH] 预测项setting的值修改最大输入长度为1000
---
src/views/bpm/processInstance/create/index_old.vue | 266 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 266 insertions(+), 0 deletions(-)
diff --git a/src/views/bpm/processInstance/create/index_old.vue b/src/views/bpm/processInstance/create/index_old.vue
new file mode 100644
index 0000000..856a289
--- /dev/null
+++ b/src/views/bpm/processInstance/create/index_old.vue
@@ -0,0 +1,266 @@
+<template>
+
+ <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+ <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
+ <el-tabs tab-position="left" v-model="categoryActive">
+ <el-tab-pane
+ :label="category.name"
+ :name="category.code"
+ :key="category.code"
+ v-for="category in categoryList"
+ >
+ <el-row :gutter="20">
+ <el-col
+ :lg="6"
+ :sm="12"
+ :xs="24"
+ v-for="definition in categoryProcessDefinitionList"
+ :key="definition.id"
+ >
+ <el-card
+ shadow="hover"
+ class="mb-20px cursor-pointer"
+ @click="handleSelect(definition)"
+ >
+ <template #default>
+ <div class="flex">
+ <el-image :src="definition.icon" class="w-32px h-32px" />
+ <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+ </div>
+ </template>
+ </el-card>
+ </el-col>
+ </el-row>
+ </el-tab-pane>
+ </el-tabs>
+ </ContentWrap>
+
+ <!-- 第二步，填写表单，进行流程的提交 -->
+ <ContentWrap v-else>
+ <el-card class="box-card">
+ <div class="clearfix">
+ <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
+ <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
+ <Icon icon="ep:delete" /> 选择其它流程
+ </el-button>
+ </div>
+ <el-col :span="16" :offset="6" style="margin-top: 20px">
+ <form-create
+ :rule="detailForm.rule"
+ v-model:api="fApi"
+ v-model="detailForm.value"
+ :option="detailForm.option"
+ @submit="submitForm"
+ >
+ <template #type-startUserSelect>
+ <el-col :span="24">
+ <el-card class="mb-10px">
+ <template #header>指定审批人</template>
+ <el-form
+ :model="startUserSelectAssignees"
+ :rules="startUserSelectAssigneesFormRules"
+ ref="startUserSelectAssigneesFormRef"
+ >
+ <el-form-item
+ v-for="userTask in startUserSelectTasks"
+ :key="userTask.id"
+ :label="`任务【${userTask.name}】`"
+ :prop="userTask.id"
+ >
+ <el-select
+ v-model="startUserSelectAssignees[userTask.id]"
+ 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>
+ </el-card>
+ </el-col>
+ </template>
+ </form-create>
+ </el-col>
+ </el-card>
+ <!-- 流程图预览 -->
+ <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
+ </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import { CategoryApi } from '@/api/bpm/category'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const route = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息
+const { delView } = useTagsViewStore() // 视图操作
+
+const processInstanceId = route.query.processInstanceId
+const loading = ref(true) // 加载中
+const categoryList = ref([]) // 分类的列表
+const categoryActive = ref('') // 选中的分类
+const processDefinitionList = ref([]) // 流程定义的列表
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ // 流程分类
+ categoryList.value = await CategoryApi.getCategorySimpleList()
+ if (categoryList.value.length > 0) {
+ categoryActive.value = categoryList.value[0].code
+ }
+ // 流程定义
+ processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+ suspensionState: 1
+ })
+
+ // 如果 processInstanceId 非空，说明是重新发起
+ if (processInstanceId?.length > 0) {
+ const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
+ if (!processInstance) {
+ message.error('重新发起流程失败，原因：流程实例不存在')
+ return
+ }
+ const processDefinition = processDefinitionList.value.find(
+ (item) => item.key == processInstance.processDefinition?.key
+ )
+ if (!processDefinition) {
+ message.error('重新发起流程失败，原因：流程定义不存在')
+ return
+ }
+ await handleSelect(processDefinition, processInstance.formVariables)
+ }
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 选中分类对应的流程定义列表 */
+const categoryProcessDefinitionList = computed(() => {
+ return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+})
+
+// ========== 表单相关 ==========
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+ rule: [],
+ option: {},
+ value: {}
+}) // 流程表单详情
+const selectProcessDefinition = ref() // 选择的流程定义
+
+// 指定审批人
+const bpmnXML = ref(null) // BPMN 数据
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row, formVariables) => {
+ // 设置选择的流程
+ selectProcessDefinition.value = row
+
+ // 重置指定审批人
+ startUserSelectTasks.value = []
+ startUserSelectAssignees.value = {}
+ startUserSelectAssigneesFormRules.value = {}
+
+ // 情况一：流程表单
+ if (row.formType == 10) {
+ // 设置表单
+ // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+ // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+ // 这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+ const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+ for (const key in formVariables) {
+ if (!allowedFields.includes(key)) {
+ delete formVariables[key]
+ }
+ }
+ setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+
+ // 加载流程图
+ const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+ if (processDefinitionDetail) {
+ bpmnXML.value = processDefinitionDetail.bpmnXml
+ startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+
+ // 设置指定审批人
+ if (startUserSelectTasks.value?.length > 0) {
+ detailForm.value.rule.push({
+ type: 'startUserSelect',
+ props: {
+ title: '指定审批人'
+ }
+ })
+ // 设置校验规则
+ for (const userTask of startUserSelectTasks.value) {
+ startUserSelectAssignees.value[userTask.id] = []
+ startUserSelectAssigneesFormRules.value[userTask.id] = [
+ { required: true, message: '请选择审批人', trigger: 'blur' }
+ ]
+ }
+ // 加载用户列表
+ userList.value = await UserApi.getSimpleUserList()
+ }
+ }
+ // 情况二：业务表单
+ } else if (row.formCustomCreatePath) {
+ await push({
+ path: row.formCustomCreatePath
+ })
+ // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+ }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+ if (!fApi.value || !selectProcessDefinition.value) {
+ return
+ }
+ // 如果有指定审批人，需要校验
+ if (startUserSelectTasks.value?.length > 0) {
+ await startUserSelectAssigneesFormRef.value.validate()
+ }
+
+ // 提交请求
+ fApi.value.btn.loading(true)
+ try {
+ await ProcessInstanceApi.createProcessInstance({
+ processDefinitionId: selectProcessDefinition.value.id,
+ variables: formData,
+ startUserSelectAssignees: startUserSelectAssignees.value
+ })
+ // 提示
+ message.success('发起流程成功')
+ // 跳转回去
+ delView(unref(currentRoute))
+ await push({
+ name: 'BpmProcessInstanceMy'
+ })
+ } finally {
+ fApi.value.btn.loading(false)
+ }
+}
+
+/** 初始化 */
+onMounted(() => {
+ getList()
+})
+</script>
--
Gitblit v1.9.3