workflow-bpmn-modeler-andtv-vue3 0.0.1

package/package/index.vue

@@ -0,0 +1,730 @@
+<template>
+  <div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
+    <a-layout class="main-layout">
+      <!-- 顶部工具栏 -->
+      <a-layout-header class="toolbar-header">
+        <div class="toolbar-container">
+          <!-- 左侧工具组 -->
+          <div class="toolbar-left">
+            <div class="toolbar-group">
+              <span class="group-label">文件操作</span>
+              <a-upload :before-upload="openBpmn" class="toolbar-item">
+                <a-tooltip title="加载XML文件" placement="bottom">
+                  <a-button class="toolbar-btn" size="small">
+                  <template #icon><FolderOpenOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-upload>
+              <a-tooltip title="新建流程图" placement="bottom">
+                <a-button class="toolbar-btn" size="small" @click="newDiagram">
+                <template #icon><PlusCircleOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            </div>
+            
+            <div class="toolbar-group">
+              <span class="group-label">视图控制</span>
+            <a-tooltip title="自适应屏幕" placement="bottom">
+                <a-button class="toolbar-btn" size="small" @click="fitViewport">
+                <template #icon><FullscreenOutlined /></template>
+              </a-button>
+            </a-tooltip>
+              <a-tooltip title="放大视图" placement="bottom">
+                <a-button class="toolbar-btn" size="small" @click="zoomViewport(true)">
+                <template #icon><ZoomInOutlined /></template>
+              </a-button>
+            </a-tooltip>
+              <a-tooltip title="缩小视图" placement="bottom">
+                <a-button class="toolbar-btn" size="small" @click="zoomViewport(false)">
+                <template #icon><ZoomOutOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            </div>
+            
+            <div class="toolbar-group">
+              <span class="group-label">历史操作</span>
+              <a-tooltip title="撤销操作" placement="bottom">
+                <a-button class="toolbar-btn" size="small" @click="() => modeler?.get('commandStack').undo()">
+                <template #icon><UndoOutlined /></template>
+              </a-button>
+            </a-tooltip>
+              <a-tooltip title="重做操作" placement="bottom">
+                <a-button class="toolbar-btn" size="small" @click="() => modeler?.get('commandStack').redo()">
+                <template #icon><RedoOutlined /></template>
+              </a-button>
+            </a-tooltip>
+          </div>
+          </div>
+          
+          <!-- 右侧操作组 -->
+          <div class="toolbar-right">
+            <div class="toolbar-group">
+              <span class="group-label">导出</span>
+              <a-button class="toolbar-btn export-btn" size="small" @click="saveXML(true)">
+                <template #icon><DownloadOutlined /></template>
+                下载XML
+              </a-button>
+              <a-button class="toolbar-btn export-btn" size="small" @click="saveImg('svg', true)">
+                <template #icon><PictureOutlined /></template>
+                下载SVG
+              </a-button>
+            </div>
+            <a-button class="save-btn" type="primary" @click="save">
+              <template #icon><DownloadOutlined /></template>
+              保存模型
+            </a-button>
+          </div>
+        </div>
+      </a-layout-header>
+      
+      <!-- 主内容区域 -->
+      <a-layout class="content-layout">
+        <a-layout-content class="canvas-container">
+          <div ref="canvas" class="canvas" />
+        </a-layout-content>
+        <a-layout-sider class="property-panel">
+          <PropertyPanel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
+        </a-layout-sider>
+      </a-layout>
+    </a-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+defineOptions({
+  name: 'WorkflowBpmnModeler'
+})
+// 汉化
+import customTranslate from './common/customTranslate'
+import Modeler from 'bpmn-js/lib/Modeler'
+import PropertyPanel from './PropertyPanel.vue'
+import BpmData from './BpmData'
+import getInitStr from './flowable/init'
+// 引入flowable的节点文件
+import flowableModdle from './flowable/flowable.json'
+// 引入图标
+import {
+  FolderOpenOutlined,
+  PlusCircleOutlined,
+  FullscreenOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+  UndoOutlined,
+  RedoOutlined,
+  DownloadOutlined,
+  PictureOutlined
+} from '@ant-design/icons-vue'
+
+interface User {
+  name: string
+  id: string
+}
+
+interface Group {
+  name: string
+  id: string
+}
+
+interface Category {
+  name: string
+  id: string
+}
+
+interface SaveData {
+  process: any
+  xml: string | undefined
+  svg: string | undefined
+}
+
+interface Props {
+  xml?: string
+  users?: User[]
+  groups?: Group[]
+  categorys?: Category[]
+  isView?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  xml: '',
+  users: () => [],
+  groups: () => [],
+  categorys: () => [],
+  isView: false
+})
+
+const emit = defineEmits<{
+  save: [data: SaveData]
+}>()
+const canvas = ref<HTMLElement | null>(null)
+const modeler = ref<Modeler | null>(null)
+const taskList = ref<any[]>([])
+const zoom = ref<number>(1)
+
+watch(() => props.xml, (val: string) => {
+  if (val) {
+    createNewDiagram(val)
+  }
+})
+
+onMounted(() => {
+  // 生成实例
+  modeler.value = new Modeler({
+    container: canvas.value,
+    additionalModules: [
+      {
+        translate: ['value', customTranslate]
+      }
+    ],
+    moddleExtensions: {
+      flowable: flowableModdle
+    }
+  })
+  // 新增流程定义
+  if (!props.xml) {
+    newDiagram()
+  } else {
+    createNewDiagram(props.xml)
+  }
+})
+
+const newDiagram = (): void => {
+  createNewDiagram(getInitStr())
+}
+
+// 让图能自适应屏幕
+const fitViewport = (): void => {
+  if (!modeler.value) return
+  zoom.value = modeler.value.get('canvas').zoom('fit-viewport')
+  const viewport = document.querySelector('.flow-containers .viewport') as SVGSVGElement
+  const bbox = viewport?.getBBox()
+  if (!bbox) return
+  const currentViewbox = modeler.value.get('canvas').viewbox()
+  const elementMid = {
+    x: bbox.x + bbox.width / 2 - 65,
+    y: bbox.y + bbox.height / 2
+  }
+  modeler.value.get('canvas').viewbox({
+    x: elementMid.x - currentViewbox.width / 2,
+    y: elementMid.y - currentViewbox.height / 2,
+    width: currentViewbox.width,
+    height: currentViewbox.height
+  })
+  zoom.value = bbox.width / currentViewbox.width * 1.8
+}
+
+// 放大缩小
+const zoomViewport = (zoomIn: boolean = true): void => {
+  if (!modeler.value) return
+  zoom.value = modeler.value.get('canvas').zoom()
+  zoom.value += (zoomIn ? 0.1 : -0.1)
+  modeler.value.get('canvas').zoom(zoom.value)
+}
+
+const createNewDiagram = async (data: string): Promise<void> => {
+  // 将字符串转换成图显示出来
+  // data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '&lt;![CDATA[$1]]&gt;')
+  data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match: string, str: string) {
+    return str.replace(/</g, '&lt;')
+  })
+  try {
+    if (!modeler.value) return
+    await modeler.value.importXML(data)
+    adjustPalette()
+    fitViewport()
+    // fillColor()
+  } catch (err: any) {
+    console.error(err.message, err.warnings)
+  }
+}
+
+// 调整左侧工具栏排版
+const adjustPalette = (): void => {
+  try {
+    // 获取 bpmn 设计器实例
+    const canvasElement = canvas.value
+    if (!canvasElement) return
+    const djsPalette = canvasElement.children[0].children[1].children[4] as HTMLElement
+    const djsPalStyle: Record<string, string> = {
+      width: '130px',
+      padding: '5px',
+      background: 'white',
+      left: '20px',
+      borderRadius: '0'
+    }
+    for (const key in djsPalStyle) {
+      (djsPalette.style as any)[key] = djsPalStyle[key]
+    }
+    const palette = djsPalette.children[0] as HTMLElement
+    const allGroups = palette.children
+    ;(allGroups[0] as HTMLElement).style.display = 'none'
+    // 修改控件样式
+    for (let gKey = 0; gKey < allGroups.length; gKey++) {
+      const group = allGroups[gKey] as HTMLElement
+      for (let cKey = 0; cKey < group.children.length; cKey++) {
+        const control = group.children[cKey] as HTMLElement
+        const controlStyle: Record<string, string> = {
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          width: '100%',
+          padding: '5px'
+        }
+        if (
+          control.className &&
+          control.dataset &&
+          control.className.indexOf('entry') !== -1
+        ) {
+          const controlProps = new BpmData().getControl(
+            control.dataset.action
+          )
+          control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
+            controlProps['title']
+          }</div>`
+          for (const csKey in controlStyle) {
+            (control.style as any)[csKey] = controlStyle[csKey]
+          }
+        }
+      }
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+const fillColor = (): void => {
+  if (!modeler.value) return
+  const canvasElement = modeler.value.get('canvas')
+  (modeler.value as any)._definitions.rootElements[0].flowElements.forEach((n: any) => {
+        if (n.$type === 'bpmn:UserTask') {
+          const completeTask = taskList.value.find(m => m.key === n.id) || { completed: true }
+          const todoTask = taskList.value.find(m => !m.completed)
+          const endTask = taskList.value[taskList.value.length - 1]
+          if (completeTask) {
+            canvasElement.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach((nn: any) => {
+              const targetTask = taskList.value.find(m => m.key === nn.targetRef.id)
+              if (targetTask) {
+                canvasElement.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+              } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+                // canvasElement.addMarker(nn.id, 'highlight');
+                canvasElement.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+                canvasElement.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+              } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
+                if (!todoTask && endTask.key === n.id) {
+                  canvasElement.addMarker(nn.id, 'highlight')
+                  canvasElement.addMarker(nn.targetRef.id, 'highlight')
+                }
+                if (!completeTask.completed) {
+                  canvasElement.addMarker(nn.id, 'highlight-todo')
+                  canvasElement.addMarker(nn.targetRef.id, 'highlight-todo')
+                }
+              }
+            })
+          }
+        } else if (n.$type === 'bpmn:ExclusiveGateway') {
+          n.outgoing.forEach((nn: any) => {
+            const targetTask = taskList.value.find(m => m.key === nn.targetRef.id)
+            if (targetTask) {
+              canvasElement.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+            }
+          })
+        }
+        if (n.$type === 'bpmn:StartEvent') {
+          n.outgoing.forEach((nn: any) => {
+            const completeTask = taskList.value.find(m => m.key === nn.targetRef.id)
+            if (completeTask) {
+              canvasElement.addMarker(nn.id, 'highlight')
+              canvasElement.addMarker(n.id, 'highlight')
+              return
+            }
+          })
+        }
+      })
+    }
+
+// 对外 api
+const getProcess = (): any => {
+  const element = getProcessElement()
+  return {
+    id: element.id,
+    name: element.name,
+    category: element.$attrs['flowable:processCategory']
+  }
+}
+
+const getProcessElement = (): any => {
+  if (!modeler.value) return null
+  const rootElements = modeler.value.getDefinitions().rootElements
+  for (let i = 0; i < rootElements.length; i++) {
+    if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
+  }
+}
+
+const saveXML = async (download: boolean = false): Promise<string | undefined> => {
+  try {
+    if (!modeler.value) return
+    const { xml } = await modeler.value.saveXML({ format: true })
+    if (download) {
+      const processElement = getProcessElement()
+      if (processElement) {
+        downloadFile(`${processElement.name}.bpmn20.xml`, xml, 'application/xml')
+      }
+    }
+    return xml
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+const saveImg = async (type: string = 'svg', download: boolean = false): Promise<string | undefined> => {
+  try {
+    if (!modeler.value) return
+    const { svg } = await modeler.value.saveSVG({ format: true })
+    if (download) {
+      const processElement = getProcessElement()
+      if (processElement) {
+        downloadFile(processElement.name, svg, 'image/svg+xml')
+      }
+    }
+    return svg
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+const save = async (): Promise<void> => {
+  const process = getProcess()
+  const xml = await saveXML()
+  const svg = await saveImg()
+  const result = { process, xml, svg }
+  emit('save', result)
+  window.parent.postMessage(result, '*')
+}
+
+const openBpmn = (file: File): boolean => {
+  const reader = new FileReader()
+  reader.readAsText(file, 'utf-8')
+  reader.onload = () => {
+    createNewDiagram(reader.result as string)
+  }
+  return false
+}
+
+const downloadFile = (filename: string, data: string, type: string): void => {
+  const a = document.createElement('a')
+  const url = window.URL.createObjectURL(new Blob([data], { type: type }))
+  a.href = url
+  a.download = filename
+  a.click()
+  window.URL.revokeObjectURL(url)
+}
+
+</script>
+
+<style lang="scss">
+/* BPMN.js 样式导入 */
+@import "~bpmn-js/dist/assets/diagram-js.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
+
+/* 视图模式样式 */
+.view-mode {
+  .ant-layout-header, 
+  .ant-layout-sider, 
+  .djs-palette, 
+  .bjs-powered-by {
+    display: none;
+  }
+  .ant-spin-mask {
+    background-color: initial;
+  }
+  .ant-spin-spinning {
+    display: none;
+  }
+}
+
+/* 主容器样式 */
+.flow-containers {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  overflow: hidden;
+  
+  /* 主布局 */
+  .main-layout {
+    height: 100%;
+    background: transparent;
+  }
+  
+  /* 工具栏头部 */
+  .toolbar-header {
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    padding: 0;
+    height: 64px;
+    line-height: 64px;
+    
+    .toolbar-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 32px;
+  height: 100%;
+    }
+    
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+    
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    
+    .toolbar-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0;
+      min-width: fit-content;
+      
+      .group-label {
+        color: #6c757d;
+        font-size: 12px;
+        font-weight: 600;
+        margin-right: 8px;
+        white-space: nowrap;
+      }
+    }
+    
+    .toolbar-btn {
+      background: #ffffff;
+      border: 1px solid #e9ecef;
+      color: #495057;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+      height: 36px;
+      padding: 0 12px;
+      font-size: 13px;
+      font-weight: 500;
+      min-width: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &:hover {
+        background: #f8f9fa;
+        border-color: #dee2e6;
+        color: #212529;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      
+      &:active {
+        transform: translateY(0);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+    }
+    
+    .export-btn {
+      background: #f8f9fa;
+      border: 1px solid #e9ecef;
+      color: #6c757d;
+      
+      &:hover {
+        background: #e9ecef;
+        border-color: #dee2e6;
+        color: #495057;
+      }
+    }
+    
+    .save-btn {
+      background: #007bff;
+      border: 1px solid #007bff;
+      border-radius: 6px;
+      font-weight: 600;
+      height: 36px;
+      padding: 0 20px;
+      font-size: 13px;
+      color: white;
+      min-width: 120px;
+      
+      &:hover {
+        background: #0056b3;
+        border-color: #0056b3;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
+      }
+      
+      &:active {
+        transform: translateY(0);
+        box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
+      }
+    }
+  }
+  
+  /* 内容布局 */
+  .content-layout {
+    height: calc(100vh - 64px);
+    background: transparent;
+  }
+  
+  /* 画布容器 */
+  .canvas-container {
+    background: white;
+    border-radius: 8px;
+    margin: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), 
+                  linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), 
+                  linear-gradient(45deg, transparent 75%, #f8f9fa 75%), 
+                  linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
+      background-size: 20px 20px;
+      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+      opacity: 0.3;
+      pointer-events: none;
+    }
+  }
+  
+  .canvas {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* 属性面板 */
+  .property-panel {
+    width: 380px !important;
+    min-width: 380px !important;
+    max-width: 380px !important;
+    background: white;
+    border-radius: 8px;
+    margin: 16px 20px 16px 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 96px);
+    
+    :deep(.property-panel) {
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+  
+  /* BPMN 工具栏样式优化 */
+  .djs-palette {
+    left: 20px !important;
+    top: 20px !important;
+    border: none !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+    background: white !important;
+    padding: 16px !important;
+    width: 160px !important;
+    min-width: 160px !important;
+    
+    .djs-palette-entries {
+      .djs-palette-entry {
+        border-radius: 8px !important;
+        margin: 6px 0 !important;
+        transition: all 0.3s ease !important;
+        width: 100% !important;
+        min-height: 40px !important;
+        display: flex !important;
+        align-items: center !important;
+        
+        &:hover {
+          background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%) !important;
+          transform: translateY(-1px) !important;
+          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
+        }
+        
+        .entry {
+          padding: 10px 12px !important;
+          border-radius: 8px !important;
+          font-size: 13px !important;
+          font-weight: 500 !important;
+          color: #262626 !important;
+          width: 100% !important;
+          white-space: nowrap !important;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
+          display: flex !important;
+          align-items: center !important;
+          gap: 8px !important;
+        }
+      }
+    }
+  }
+  
+  /* BPMN 画布样式 */
+  .djs-container svg {
+    min-height: 100%;
+    background: transparent;
+  }
+  
+  /* 表单样式优化 */
+  .ant-form-item-label > label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #262626;
+  }
+  
+  /* 响应式设计 */
+  @media (max-width: 1200px) {
+    .property-panel {
+      width: 320px !important;
+      min-width: 320px !important;
+      max-width: 320px !important;
+      margin: 16px 16px 16px 0;
+    }
+    
+    .djs-palette {
+      width: 140px !important;
+      min-width: 140px !important;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .toolbar-container {
+      padding: 0 16px;
+    }
+    
+    .toolbar-group {
+      padding: 6px 12px;
+      gap: 6px;
+      
+      .group-label {
+        display: none;
+      }
+    }
+    
+    .property-panel {
+      width: 100% !important;
+      min-width: 100% !important;
+      max-width: 100% !important;
+      margin: 0;
+      border-radius: 0;
+    }
+  }
+}
+</style>