@jari-ace/element-plus-component 0.6.2 → 0.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.6.2",
+  "version": "0.6.3",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "pretty-bytes": "^7.1.0",
     "vue-pdf-embed": "^2.1.3",
     "vue-router": "^5.0.1",
-    "@jari-ace/app-bolts": "0.7.10"
+    "@jari-ace/app-bolts": "0.7.11"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

package/packages/components/flowShell/FlowFormShell.vue

@@ -52,12 +52,9 @@
                 </template>
               </el-result>
             </div>
-            <div v-else-if="flowFormParam">
+            <div v-else>
               <slot name="default" :flowParam="flowFormParam"></slot>
             </div>
-            <div class="no-form-tip" v-else>
-              <el-empty description="暂无表单内容" />
-            </div>
           </div>
         </section>
 
@@ -107,19 +104,53 @@
         <ja-button @click="handleForward" type="danger" shortcut="Ctrl+F" v-if="showForwardButton"
           :tooltip="'保存并' + (flowFormParam?.taskInstance ? '结束当前工作步骤办理' : '发起工作')" :loading="saving"
           :disabled="saving">{{
-            flowFormParam?.taskInstance ? "办理结束" : "发起工作" }}</ja-button>
+            flowFormParam?.taskInstance ? "办理结束" : "发起流程" }}</ja-button>
         <slot name="footer" :flowParam="flowFormParam"></slot>
       </footer>
     </div>
+    
+    <!-- 流程选择对话框 -->
+    <el-dialog
+      v-model="flowSelectionDialogVisible"
+      title="选择流程"
+      width="500px"
+      :close-on-click-modal="false"
+      :show-close="false"
+      align-center
+      append-to-body
+    >
+      <el-scrollbar max-height="50vh">
+        <div class="flow-selection-list">
+          <el-card
+            v-for="flow in selectableFlows"
+            :key="flow.flowKey"
+            class="flow-selection-card"
+            shadow="hover"
+            @click="handleSelectFlow(flow)"
+          >
+            <div class="flow-card-content">
+              <div class="flow-caption">{{ flow.flowCaption }}</div>
+              <div class="flow-key">{{ flow.flowKey }}</div>
+            </div>
+            <el-icon><ArrowRight /></el-icon>
+          </el-card>
+        </div>
+      </el-scrollbar>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleCancelFlowSelection">取消</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { ref, watch, computed, nextTick } from 'vue'
-import { useTaskQueryApi, useFlowDefinitionApi, type FlowFormParamDto } from '@jari-ace/app-bolts'
+import { useTaskQueryApi, useFlowDefinitionApi, type FlowFormParamDto, type ProjectedFlowDefinitionDto } from '@jari-ace/app-bolts'
 import type { FlowProcessRequest, TaskInstanceDto } from '@jari-ace/app-bolts'
 import { createAxiosWithoutCache, useLoading } from '@jari-ace/app-bolts'
-import { ElMessage, ElTag, ElCard, ElButton, ElTimeline, ElTimelineItem, ElEmpty, ElIcon, ElResult } from 'element-plus'
+import { ElMessage, ElTag, ElCard, ElButton, ElTimeline, ElTimelineItem, ElEmpty, ElIcon, ElResult, ElDialog, ElScrollbar } from 'element-plus'
 import { JaButton } from '../button'
 import { JaUserInfoTag } from '../userTag'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
@@ -141,6 +172,10 @@ const props = withDefaults(defineProps<{
    * 流程定义Key
    */
   flowKey?: string
+  /**
+   * 业务标签，当 flowKey 为空时，根据 bizTag 查找流程
+   */
+  bizTag?: string
   /**
    * 开始节点Key
    */
@@ -169,14 +204,20 @@ const props = withDefaults(defineProps<{
    * 侧边栏默认是否收起
    */
   defaultCollapsed?: boolean
+  /**
+   * 是否是新表单，如果为 true，则不等待 formId，直接加载流程定义。如果为 false，且没有 taskId，则会等待 formData.flowFormId 有值后再加载。
+   */
+  isNewForm: boolean
 }>(), {
   appName: undefined,
   flowKey: undefined,
+  bizTag: undefined,
   startNodeKey: undefined,
   taskInstanceId: undefined,
   width: undefined,
   height: undefined,
-  defaultCollapsed: false
+  defaultCollapsed: false,
+  isNewForm: false
 })
 
 // 内部状态
@@ -308,26 +349,59 @@ const getTaskStatus = (state?: number) => {
   }
 }
 
+const actualFlowKey = ref(props.flowKey)
+const flowSelectionDialogVisible = ref(false)
+const selectableFlows = ref<ProjectedFlowDefinitionDto[]>([])
+const selectableFlowParams = ref<FlowFormParamDto[]>([])
+
 // 监听dialogVisible变化
 watch(
   () => dialogVisible.value,
   async (newValue) => {
     resetState()
-    if (newValue) {
-      emits('open')
-      // 等待下一个事件循环，确保父组件的open事件处理完成（可能包含异步loadData）
+    actualFlowKey.value = props.flowKey
+    if (newValue) {    
+      emits('open') 
+      //等待状态同步
       await nextTick()
-      loadFlowFormParam()
+      if (props.taskId) {
+        // 场景一：通过 taskId 打开，直接加载
+        loadFlowFormParam()
+      } else if (props.isNewForm) {
+        // 场景二：明确是新表单发起流程，不等待 formId，直接加载流程定义
+        loadFlowFormParam()
+      } else if (props.formData?.flowFormId) {
+        // 场景三：非新表单，且一开始就已经有 formId，直接加载
+        loadFlowFormParam()
+      }
+      // 场景四：非新表单且没有 formId，什么都不做，等待 formData.flowFormId 的 watcher 触发
     } else {
       emits('closed')
     }
   }
 )
 
+// 监听 formData 的 flowFormId 变化，用于处理异步加载表单数据的场景
+watch(
+  () => props.formData?.flowFormId,
+  (newFormId, oldFormId) => {
+    // 只有在 dialog 打开的情况下，且从无到有，或者发生了变化，且没有 taskId 的时候，才重新加载流程参数
+    if (dialogVisible.value && !props.taskId && !props.isNewForm && newFormId && newFormId !== oldFormId) {
+      // 避免重复加载，可以先重置
+      resetState()
+      actualFlowKey.value = props.flowKey
+      loadFlowFormParam()
+    }
+  }
+)
+
 // 重置状态
 const resetState = () => {
   error.value = ''
   flowFormParam.value = undefined
+  selectableFlows.value = []
+  selectableFlowParams.value = []
+  actualFlowKey.value = undefined
 }
 
 // 加载流程表单参数
@@ -335,28 +409,45 @@ const loadFlowFormParam = async () => {
   resetState()
   const formId = props.formData?.flowFormId;
   // 检查参数
-  // 必须提供 taskId，或者 appName 和 flowKey
-  if (!props.taskId && !(props.appName && props.flowKey)) {
-    ElMessage.error('参数错误: 必须提供taskId或appName、flowKey和flowFormId')
+  // 必须提供 taskId，或者 appName 和 (flowKey 或 bizTag)
+  if (!props.taskId && !(props.appName && (props.flowKey || props.bizTag))) {
+    ElMessage.error('参数错误: 必须提供taskId或appName、flowKey/bizTag和flowFormId')
     return
   }
-
-  try {    
+  try {
     if (props.taskId) {
       // 优先使用Id
       flowFormParam.value = await taskQueryApi.getTaskInstanceById(props.taskId)
-    } else if (formId) {
+    } else if (formId && props.flowKey) {
       // 使用appName、flowKey、formId
-      flowFormParam.value = await taskQueryApi.getTaskByFormIdAndAppAndFlowKey(formId, props.appName!, props.flowKey!)
+      const param = await taskQueryApi.getTaskByFormIdAndAppAndFlowKey(formId, props.appName!, props.flowKey!)
+      if (param && param.flowDefinition) {
+        flowFormParam.value = param
+      } else {
+        // 兜底：如果没查到流程参数或者只有表单数据没有流程实例，按照新建模式加载流程定义
+        const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName!, props.flowKey!)
+        flowFormParam.value = {
+          flowDefinition: flowDefinition,
+        } as FlowFormParamDto
+      }
+    } else if (formId && props.bizTag) {
+      // formId 存在，但没有 flowKey，有 bizTag，查询可能存在的多个流程参数
+      const params = await taskQueryApi.getTasksByFormIdAndAppAndBizTag(formId, props.appName!, props.bizTag)
+      if (!params || params.length === 0 || !params.some(p => p.flowDefinition)) {
+        // 兜底：如果没查到，或者查出来的都没有流程定义，直接按照没有formId走新建模式处理
+        await loadNewFlowParamWithBizTag()
+      } else if (params.length === 1) {
+        flowFormParam.value = params[0]
+        actualFlowKey.value = params[0].flowDefinition?.flowKey
+      } else {
+        // 多于1个，不立即弹出选择框，先存起来，留到点击"发起工作"时再选
+        selectableFlowParams.value = params
+        selectableFlows.value = params.map(p => p.flowDefinition as ProjectedFlowDefinitionDto)
+        return
+      }
     } else {
-      // 新建模式：只有 appName 和 flowKey，没有 formId
-      // 获取流程定义
-      const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName!, props.flowKey!)
-      // 构造部分 flowFormParam
-      flowFormParam.value = {
-        flowDefinition: flowDefinition,
-        // 其他字段为空
-      } as FlowFormParamDto
+      // 新建模式
+      await loadNewFlowParamWithBizTag()
     }
   } catch (e: any) {
     ElMessage.error(e.message || '加载流程信息失败')
@@ -364,6 +455,68 @@ const loadFlowFormParam = async () => {
   }
 }
 
+const loadNewFlowParamWithBizTag = async () => {
+  let keyToUse = props.flowKey
+  if (!keyToUse && props.bizTag) {
+    // 根据 bizTag 查询当前生效的可用流程
+    const res = await flowDefinitionApi.getEffectiveDefinitionsByBizTag(props.appName!, props.bizTag)
+    
+    if (!res || res.length === 0) {
+      throw new Error(`未找到业务标签为 ${props.bizTag} 的生效可用流程定义`)
+    } else if (res.length === 1) {
+      keyToUse = res[0].flowKey
+    } else {
+      // 弹出选择对话框的动作延迟到点击发起工作
+      selectableFlows.value = res
+      return
+    }
+  }
+  
+  actualFlowKey.value = keyToUse
+
+  // 获取流程定义
+  const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName!, keyToUse!)
+  // 构造部分 flowFormParam
+  flowFormParam.value = {
+    flowDefinition: flowDefinition,
+    // 其他字段为空
+  } as FlowFormParamDto
+}
+
+const handleSelectFlow = async (flow: ProjectedFlowDefinitionDto) => {
+  flowSelectionDialogVisible.value = false
+  actualFlowKey.value = flow.flowKey
+  
+  try {
+    if (selectableFlowParams.value.length > 0) {
+      // 已经有完整的流程参数了，直接使用
+      const param = selectableFlowParams.value.find(p => p.flowDefinition?.flowKey === flow.flowKey)
+      if (param) {
+        flowFormParam.value = param
+        // 选择了之后，直接执行原先因为需要选择而暂停的 发起/提交流程 操作
+        await executeForward()
+        return
+      }
+    }
+    
+    // 否则作为新建模式加载最新流程定义
+    const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName!, flow.flowKey!)
+    flowFormParam.value = {
+      flowDefinition: flowDefinition,
+    } as FlowFormParamDto
+    // 选择了之后，直接执行原先因为需要选择而暂停的 发起/提交流程 操作
+    await executeForward()
+  } catch (e: any) {
+    ElMessage.error(e.message || '加载流程信息失败')
+    error.value = e.message
+  }
+}
+
+const handleCancelFlowSelection = () => {
+  flowSelectionDialogVisible.value = false
+  // 取消选择不再关闭整个表单，只是取消本次的发起动作
+}
+
 // 底部按钮处理
 const handleSave = async () => {
   saving.value = true
@@ -373,7 +526,7 @@ const handleSave = async () => {
         taskId: flowFormParam.value?.taskInstance?.id || '',
         processRequestType: "SAVE_FORM",
         appName: props.appName || '',
-        flowKey: props.flowKey || '',
+        flowKey: actualFlowKey.value || '',
         startNodeKey: props.startNodeKey || '',
         forwardTo: []
       },
@@ -384,7 +537,8 @@ const handleSave = async () => {
   }
 }
 
-const handleForward = async () => {
+// 实际执行保存并转发的核心逻辑
+const executeForward = async () => {
   saving.value = true
   try {
     const p = flowFormParam.value
@@ -393,7 +547,7 @@ const handleForward = async () => {
         taskId: p?.taskInstance?.id || '',
         processRequestType: p?.taskInstance ? "FORWARD" : "INITIATE",
         appName: props.appName || '',
-        flowKey: props.flowKey || '',
+        flowKey: actualFlowKey.value || '',
         startNodeKey: props.startNodeKey || '',
         forwardTo: []
       },
@@ -406,6 +560,16 @@ const handleForward = async () => {
   }
 }
 
+const handleForward = async () => {
+  // 如果需要选择流程，并且还没有确定实际使用的 flowKey，则弹出选择对话框
+  if (selectableFlows.value.length > 1 && !actualFlowKey.value) {
+    flowSelectionDialogVisible.value = true
+    return
+  }
+  
+  await executeForward()
+}
+
 </script>
 
 <style>
@@ -715,4 +879,48 @@ const handleForward = async () => {
   box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
   z-index: 100;
 }
+
+/* 流程选择弹窗样式 */
+.flow-selection-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px;
+}
+
+.flow-selection-card {
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #e4e7ed;
+}
+
+.flow-selection-card:hover {
+  border-color: var(--el-color-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.flow-selection-card :deep(.el-card__body) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+}
+
+.flow-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.flow-caption {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.flow-key {
+  font-size: 13px;
+  color: #909399;
+}
 </style>