ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/flowShell/FlowFormShell.vue

@@ -0,0 +1,628 @@
+<template>
+  <div v-if="dialogVisible" class="flow-shell-wrapper">
+    <div class="flow-shell-container" v-loading="isLoading">
+      <header class="flow-shell-header">
+        <div class="header-content">
+          <div class="header-top">
+            <div class="back-button-wrapper" @click="dialogVisible = false">
+              <el-icon :size="40">
+                <ArrowLeft />
+              </el-icon>
+            </div>
+            <div>
+              <div class="title-section">
+                <h2 class="flow-title">{{ flowFormParam?.flowDefinition?.flowModel?.flowCaption || '流程详情' }}</h2>
+                <el-tag :type="flowStateTagType">{{
+                  getFlowStatus(flowFormParam?.flowInstance?.state) }}</el-tag>
+              </div>
+              <div class="header-bottom" v-if="flowFormParam?.flowInstance">
+                <div class="info-item">
+                  <span class="label">发起人：</span>
+                  <ja-user-info-tag :user-id="flowFormParam?.flowInstance?.initiator" show-avatar-in-tag
+                    :full-name="flowFormParam?.flowInstance?.initiatorName">
+                  </ja-user-info-tag>
+                </div>
+                <div class="info-item">
+                  <span class="label">发起时间：</span>
+                  <el-tooltip :content="formatDate(flowFormParam?.flowInstance?.createTime)" placement="top"
+                    v-if="flowFormParam?.flowInstance?.createTime">
+                    <span class="value">{{ formatFriendlyTime(flowFormParam?.flowInstance?.createTime) }}</span>
+                  </el-tooltip>
+                  <span class="value" v-else>-</span>
+                </div>
+                <div class="info-item" v-if="flowFormParam?.flowInstance?.workNo">
+                  <span class="label">工作文号：</span>
+                  <span class="value">{{ flowFormParam?.flowInstance?.workNo }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- 主体内容区 -->
+      <main class="flow-shell-main">
+        <!-- 左侧内容区 -->
+        <section class="main-content">
+          <div class="content-wrapper">
+            <div v-if="error" class="error-tip">
+              <el-result icon="error" title="加载失败" :sub-title="error">
+                <template #extra>
+                  <el-button type="primary" @click="loadFlowFormParam">重试</el-button>
+                </template>
+              </el-result>
+            </div>
+            <div v-else-if="flowFormParam">
+              <slot name="default" :flowParam="flowFormParam"></slot>
+            </div>
+            <div class="no-form-tip" v-else>
+              <el-empty description="暂无表单内容" />
+            </div>
+          </div>
+        </section>
+
+        <!-- 右侧辅助面板 -->
+        <aside class="side-panel">
+          <div class="side-panel-header">
+            <h3>办理历史</h3>
+          </div>
+          <div class="side-panel-content">
+            <el-timeline v-if="sortedTasks.length > 0">
+              <el-timeline-item v-for="(task, index) in sortedTasks" :key="index"
+                :timestamp="formatFriendlyTime(task.finishTime)" placement="top">
+                <el-card>
+                  <div class="task-info">
+                    <div class="handler-info">
+                      <span class="handler-name">{{ task.handlerName || '未知' }}</span>
+                      <el-tooltip :content="formatDate(task.finishTime)" placement="top">
+                        <span class="task-status">{{ getTaskStatus(task.state) }}</span>
+                      </el-tooltip>
+                    </div>
+                    <div class="task-comment" v-if="task.comment">
+                      <span class="comment-label">意见：</span>
+                      <span class="comment-content">{{ task.comment }}</span>
+                    </div>
+                    <div class="task-comment" v-else>
+                      <span class="comment-label">意见：</span>
+                      <span class="comment-content empty">无</span>
+                    </div>
+                  </div>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+            <div v-else class="no-history-tip">
+              <el-empty description="暂无办理历史" :image-size="100" />
+            </div>
+          </div>
+        </aside>
+      </main>
+
+      <!-- 底部工具栏 -->
+      <footer class="flow-shell-footer">
+        <ja-button @click="handleSave" shortcut="Ctrl+S" tooltip="保存" :loading="saving"
+          :disabled="saving">保存</ja-button>
+        <ja-button @click="handleForward" type="danger" shortcut="Ctrl+F" v-if="showForwardButton"
+          :tooltip="'保存并' + (flowFormParam?.taskInstance ? '结束当前工作步骤办理' : '发起工作')" :loading="saving"
+          :disabled="saving">{{
+            flowFormParam?.taskInstance ? "办理结束" : "发起工作" }}</ja-button>
+      </footer>
+    </div>
+  </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 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 { JaButton } from '../button'
+import { JaUserInfoTag } from '../userTag'
+import { ArrowLeft } from '@element-plus/icons-vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+import { ElTooltip } from 'element-plus'
+import { isVisible } from 'element-plus/es/utils/index.mjs'
+dayjs.extend(relativeTime)
+dayjs.locale('zh-cn')
+
+
+const props = withDefaults(defineProps<{
+  /**
+   * 应用名称
+   */
+  appName?: string
+  /**
+   * 流程定义Key
+   */
+  flowKey?: string
+  /**
+   * 开始节点Key
+   */
+  startNodeKey?: string
+  /**
+   * 任务实例ID
+   */
+  taskId?: string
+  /**
+   * 表单数据
+   */
+  formData: T
+  /**
+   * 保存表单数据的方法，保存成功时发起或转交工作
+   */
+  saveAndForward: (formData: FlowProcessRequest<T>) => Promise<any>
+}>(), {
+  appName: undefined,
+  flowKey: undefined,
+  startNodeKey: undefined,
+  taskInstanceId: undefined
+})
+
+// 内部状态
+const dialogVisible = defineModel<boolean>({
+  default: false
+})
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios)
+const localLoading = ref(false)
+const isLoading = computed(() => loading.value || localLoading.value)
+const saving = ref(false)
+const error = ref('')
+const flowFormParam = ref<FlowFormParamDto | undefined>(undefined)
+const taskQueryApi = useTaskQueryApi(axios)
+const flowDefinitionApi = useFlowDefinitionApi(axios)
+const emits = defineEmits<{
+  (e: 'open'): void
+  (e: 'closed'): void
+}>();
+
+const flowStateTagType = computed(() => {
+  switch (flowFormParam.value?.flowInstance?.state) {
+    case 0:
+      return 'warning'
+    case 1:
+      return 'success'
+    case 2:
+      return 'danger'
+    default:
+      return 'info'
+  }
+})
+
+const showForwardButton = computed(() => {
+  return flowFormParam.value?.taskInstance || !flowFormParam.value?.flowInstance
+})
+
+// 获取排序后的任务列表
+const sortedTasks = computed(() => {
+  if (!flowFormParam.value?.flowInstance?.nodes) return []
+
+  let allTasks: TaskInstanceDto[] = []
+
+  // 收集所有节点的任务
+  Object.values(flowFormParam.value.flowInstance.nodes).forEach(node => {
+    allTasks = [...allTasks, ...node.tasks]
+  })
+
+  // 按办结时间排序，最新的在前面
+  return allTasks.sort((a, b) => {
+    const timeA = a.finishTime ? new Date(a.finishTime).getTime() : 0
+    const timeB = b.finishTime ? new Date(b.finishTime).getTime() : 0
+    return timeB - timeA
+  })
+})
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return ''
+  return dayjs(dateStr).format('YYYY-MM-DD HH:mm:ss')
+}
+
+// 友好显示时间
+const formatFriendlyTime = (dateStr?: string) => {
+  if (!dateStr) return ''
+  return dayjs(dateStr).fromNow()
+}
+
+// 获取流程状态文本
+const getFlowStatus = (state?: number) => {
+  switch (state) {
+    case 0:
+      return '进行中'
+    case 1:
+      return '已完成'
+    case 2:
+      return '已中止'
+    default:
+      return '待发起'
+  }
+}
+
+// 获取任务状态文本
+const getTaskStatus = (state?: number) => {
+  switch (state) {
+    case 0:
+      return '未激活'
+    case 1:
+      return '未接收'
+    case 2:
+      return '已接收'
+    case 3:
+      return '已办结'
+    default:
+      return '未知状态'
+  }
+}
+
+// 监听dialogVisible变化
+watch(
+  () => dialogVisible.value,
+  async (newValue) => {
+    resetState()
+    if (newValue) {
+      emits('open')
+      // 等待下一个事件循环，确保父组件的open事件处理完成（可能包含异步loadData）
+      await nextTick()
+      loadFlowFormParam()
+    } else {
+      emits('closed')
+    }
+  }
+)
+
+// 重置状态
+const resetState = () => {
+  error.value = ''
+  flowFormParam.value = undefined
+}
+
+// 加载流程表单参数
+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')
+    return
+  }
+
+  try {    
+    if (props.taskId) {
+      // 优先使用Id
+      flowFormParam.value = await taskQueryApi.getTaskInstanceById(props.taskId)
+    } else if (formId) {
+      // 使用appName、flowKey、formId
+      flowFormParam.value = await taskQueryApi.getTaskByFormIdAndAppAndFlowKey(formId, props.appName!, props.flowKey!)
+    } else {
+      // 新建模式：只有 appName 和 flowKey，没有 formId
+      // 获取流程定义
+      const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName!, props.flowKey!)
+      // 构造部分 flowFormParam
+      flowFormParam.value = {
+        flowDefinition: flowDefinition,
+        // 其他字段为空
+      } as FlowFormParamDto
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || '加载流程信息失败')
+    error.value = e.message
+  }
+}
+
+// 底部按钮处理
+const handleSave = async () => {
+  saving.value = true
+  try {
+    await props.saveAndForward({
+      flowArgs: {
+        taskId: flowFormParam.value?.taskInstance?.id || '',
+        processRequestType: "SAVE_FORM",
+        appName: props.appName || '',
+        flowKey: props.flowKey || '',
+        startNodeKey: props.startNodeKey || '',
+        forwardTo: []
+      },
+      formCommand: props.formData as T
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const handleForward = async () => {
+  saving.value = true
+  try {
+    const p = flowFormParam.value
+    await props.saveAndForward({
+      flowArgs: {
+        taskId: p?.taskInstance?.id || '',
+        processRequestType: p?.taskInstance ? "FORWARD" : "INITIATE",
+        appName: props.appName || '',
+        flowKey: props.flowKey || '',
+        startNodeKey: props.startNodeKey || '',
+        forwardTo: []
+      },
+      formCommand: props.formData as T
+    })
+    dialogVisible.value = false
+    
+  } finally {
+    saving.value = false
+  }
+}
+
+</script>
+
+<style>
+/* 移除旧的 dialog 样式 */
+</style>
+
+<style scoped>
+.flow-shell-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f7fa;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-shell-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 标题区样式 */
+.flow-shell-header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  padding: 16px 12px;
+}
+
+.header-content {
+  width: 100%;
+}
+
+.header-top {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.back-button-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-right: 12px;
+  color: var(--el-color-primary-light-3);
+  /* background-color: var(--el-color-primary-light-9); */
+}
+
+.back-button-wrapper:hover {
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.flow-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.flow-status {
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 12px;
+  color: #409eff;
+  border: none;
+}
+
+.header-bottom {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+  padding-top: 8px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.info-item .label {
+  color: #606266;
+}
+
+.info-item .value {
+  color: #303133;
+  font-weight: 500;
+}
+
+.info-item .dept-name {
+  color: #909399;
+  font-size: 13px;
+}
+
+/* 主体内容区样式 */
+.flow-shell-main {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  overflow: hidden;
+  /* 防止被内容撑开 */
+  min-height: 0;
+  /* flex子项高度计算修复 */
+}
+
+/* 左侧内容区 */
+.main-content {
+  flex: 1;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  /* 确保内部滚动生效 */
+}
+
+.content-wrapper {
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  height: 100%;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.no-form-tip {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #909399;
+  background-color: #ffffff;
+  border-radius: 8px;
+}
+
+/* 右侧辅助面板 */
+.side-panel {
+  background-color: #ffffff;
+  border-left: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+}
+
+.side-panel-header {
+  height: 60px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  background-color: #fafafa;
+}
+
+.side-panel-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.side-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  position: relative;
+}
+
+.no-history-tip {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 时间轴样式 */
+.el-timeline {
+  padding: 0;
+}
+
+.el-timeline-item {
+  margin-bottom: 20px;
+}
+
+.el-timeline-item__timestamp {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+/* 任务卡片样式 */
+.task-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.handler-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.handler-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.task-status {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background-color: #ecf5ff;
+  color: #409eff;
+}
+
+.task-comment {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.comment-label {
+  font-size: 14px;
+  color: #606266;
+  flex-shrink: 0;
+}
+
+.comment-content {
+  font-size: 14px;
+  color: #303133;
+  line-height: 1.5;
+}
+
+.comment-content.empty {
+  color: #909399;
+  font-style: italic;
+}
+
+.flow-shell-footer {
+  background-color: #ffffff;
+  border-top: 1px solid #e0e0e0;
+  padding: 12px 24px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
+  z-index: 100;
+}
+</style>

package/ace-element-plus-component/packages/components/flowShell/index.ts

@@ -0,0 +1,5 @@
+
+import { type SFCWithInstall, withInstall } from "../../utils/install";
+import FlowFormShell from "./FlowFormShell.vue";
+
+export const JaFlowFormShell: SFCWithInstall<typeof FlowFormShell> = withInstall(FlowFormShell);