workflow-bpmn-modeler-andtv-vue3 10.1.1 → 10.2.0

package/package/package/PropertyPanel.vue

@@ -0,0 +1,342 @@
+<template>
+  <div ref="propertyPanel" class="property-panel">
+    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
+    <div class="property-content">
+      <component
+        :is="getComponent"
+        v-if="element && getComponent"
+        :element="element"
+        :modeler="modeler"
+        :users="users"
+        :groups="groups"
+        :categorys="categorys"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue'
+
+defineOptions({
+  name: 'PropertyPanel'
+})
+import taskPanel from './components/nodePanel/task.vue'
+import startEndPanel from './components/nodePanel/startEnd.vue'
+import processPanel from './components/nodePanel/process.vue'
+import sequenceFlowPanel from './components/nodePanel/sequenceFlow.vue'
+import gatewayPanel from './components/nodePanel/gateway.vue'
+import { NodeName } from './lang/zh'
+import Modeler from 'bpmn-js/lib/Modeler'
+
+interface User {
+  name: string
+  id: string
+}
+
+interface Group {
+  name: string
+  id: string
+}
+
+interface Category {
+  name: string
+  id: string
+}
+
+interface Props {
+  users: User[]
+  groups: Group[]
+  categorys: Category[]
+  modeler: Modeler
+}
+
+const props = defineProps<Props>()
+const propertyPanel = ref<HTMLElement | null>(null)
+const element = ref<any>(null)
+const form = ref({
+  id: '',
+  name: '',
+  color: null as string | null
+})
+const roles = ref([
+  { value: 'manager', label: '经理' },
+  { value: 'personnel', label: '人事' },
+  { value: 'charge', label: '主管' }
+])
+const getComponent = computed(() => {
+  if (!element.value) return null
+  
+  const bizObj = element.value.businessObject
+  const type = bizObj.eventDefinitions
+    ? bizObj.eventDefinitions[0].$type
+    : bizObj.$type
+  
+  
+  // 根据元素类型返回对应的组件
+  switch (type) {
+    case 'bpmn:UserTask':
+    case 'bpmn:ServiceTask':
+    case 'bpmn:ScriptTask':
+    case 'bpmn:BusinessRuleTask':
+    case 'bpmn:ManualTask':
+    case 'bpmn:ReceiveTask':
+    case 'bpmn:SendTask':
+      return taskPanel
+    case 'bpmn:StartEvent':
+    case 'bpmn:EndEvent':
+    case 'bpmn:IntermediateThrowEvent':
+    case 'bpmn:IntermediateCatchEvent':
+    case 'bpmn:BoundaryEvent':
+      return startEndPanel
+    case 'bpmn:Process':
+      return processPanel
+    case 'bpmn:SequenceFlow':
+      return sequenceFlowPanel
+    case 'bpmn:ExclusiveGateway':
+    case 'bpmn:InclusiveGateway':
+    case 'bpmn:ParallelGateway':
+    case 'bpmn:EventBasedGateway':
+      return gatewayPanel
+    default:
+      return null
+  }
+})
+
+const nodeName = computed(() => {
+  if (element.value) {
+    const bizObj = element.value.businessObject
+    const type = bizObj?.eventDefinitions
+      ? bizObj.eventDefinitions[0].$type
+      : bizObj.$type
+    return (NodeName as any)[type] || type
+  }
+  return ''
+})
+
+const handleModeler = (): void => {
+  props.modeler.on('root.added', (e: any) => {
+    if (e.element.type === 'bpmn:Process') {
+      element.value = null
+      nextTick().then(() => {
+        element.value = e.element
+      })
+    }
+  })
+  props.modeler.on('element.click', (e: any) => {
+    const { element: clickedElement } = e
+    // 允许所有类型的元素显示在属性面板中
+    element.value = clickedElement
+  })
+  props.modeler.on('selection.changed', (e: any) => {
+    // hack 同类型面板不刷新
+    element.value = null
+    const selectedElement = e.newSelection[0]
+    if (selectedElement) {
+      nextTick().then(() => {
+        element.value = selectedElement
+      })
+    }
+  })
+}
+
+onMounted(() => {
+  handleModeler()
+})
+
+</script>
+
+<style lang="scss">
+.property-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  
+          .node-name {
+          background: #f8f9fa;
+          color: #495057;
+          padding: 16px 20px;
+          margin-top: -16px;
+          font-size: 16px;
+          font-weight: 600;
+          text-align: center;
+          border-bottom: 1px solid #e9ecef;
+          flex-shrink: 0;
+        }
+  
+  .property-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 20px;
+    
+    // 自定义滚动条
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+      border-radius: 3px;
+      
+      &:hover {
+        background: #a8a8a8;
+      }
+    }
+  }
+  
+  // 重置 Ant Design 样式
+  :deep(.ant-form-vertical .ant-form-item-label) {
+    padding: 0;
+    font-weight: 500;
+    color: #262626;
+    width: 100px;
+    flex-shrink: 0;
+  }
+  
+  :deep(.ant-form-item) {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+  }
+  
+  :deep(.ant-form-item-label > label) {
+    font-size: 14px;
+    color: #595959;
+    margin-right: 12px;
+    white-space: nowrap;
+  }
+  
+  :deep(.ant-form-item-control) {
+    flex: 1;
+  }
+  
+  :deep(.ant-input),
+  :deep(.ant-select),
+  :deep(.ant-textarea) {
+    border-radius: 6px;
+    border-color: #d9d9d9;
+    transition: all 0.3s;
+    
+    &:hover {
+      border-color: #40a9ff;
+    }
+    
+    &:focus,
+    &.ant-input-focused,
+    &.ant-select-focused {
+      border-color: #1890ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+  
+  :deep(.ant-button) {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s;
+    
+    &.ant-btn-primary {
+      background: #1890ff;
+      border-color: #1890ff;
+      
+      &:hover {
+        background: #40a9ff;
+        border-color: #40a9ff;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
+      }
+    }
+    
+    &.ant-btn-default {
+      background: #ffffff;
+      border-color: #d9d9d9;
+      color: #595959;
+      
+      &:hover {
+        border-color: #40a9ff;
+        color: #40a9ff;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+  
+  :deep(.ant-badge) {
+    font-size: 12px;
+    
+    .ant-badge-count {
+      background: #ff4d4f;
+      border-radius: 10px;
+      font-weight: 500;
+    }
+  }
+  
+  :deep(.ant-switch) {
+    background-color: #d9d9d9;
+    transition: all 0.3s;
+    
+    &.ant-switch-checked {
+      background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+    }
+  }
+  
+  :deep(.ant-select-multiple .ant-select-selection-item) {
+    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+    border: 1px solid #91d5ff;
+    border-radius: 4px;
+  }
+  
+  :deep(.ant-tabs) {
+    .ant-tabs-tab {
+      font-weight: 500;
+      
+      &.ant-tabs-tab-active {
+        color: #1890ff;
+      }
+    }
+    
+    .ant-tabs-ink-bar {
+      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+    }
+  }
+  
+  :deep(.ant-table) {
+    .ant-table-thead > tr > th {
+      background: #fafafa;
+      font-weight: 600;
+      color: #262626;
+    }
+    
+    .ant-table-tbody > tr:hover > td {
+      background: #f0f9ff;
+    }
+  }
+  
+  :deep(.ant-modal) {
+    .ant-modal-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-bottom: none;
+      
+      .ant-modal-title {
+        color: white;
+        font-weight: 600;
+      }
+    }
+    
+    .ant-modal-close {
+      color: white;
+      
+      &:hover {
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+}
+</style>
+

package/package/package/common/customTranslate.js

@@ -0,0 +1,20 @@
+import translations from '../lang/zh'
+
+export default function customTranslate(template, replacements) {
+  replacements = replacements || {}
+
+  // Translate
+  template = translations[template] || template
+
+  // Replace
+  return template.replace(/{([^}]+)}/g, function(_, key) {
+    var str = replacements[key]
+    if (
+      translations[replacements[key]] !== null &&
+      translations[replacements[key]] !== 'undefined'
+    ) {
+      str = translations[replacements[key]]
+    }
+    return str || '{' + key + '}'
+  })
+}

package/package/package/common/mixinExecutionListener.js

@@ -0,0 +1,24 @@
+
+import executionListenerDialog from '../components/nodePanel/property/executionListener'
+export default {
+  components: {
+    executionListenerDialog
+  },
+  data() {
+    return {
+      executionListenerLength: 0,
+      dialogName: null
+    }
+  },
+  methods: {
+    computedExecutionListenerLength() {
+      this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
+    },
+    finishExecutionListener() {
+      if (this.dialogName === 'executionListenerDialog') {
+        this.computedExecutionListenerLength()
+      }
+      this.dialogName = ''
+    }
+  }
+}

package/package/package/common/mixinPanel.js

@@ -0,0 +1,70 @@
+import xcrud from 'xcrud'
+import golbalConfig from 'xcrud/package/common/config'
+import showConfig from '../flowable/showConfig'
+golbalConfig.set({
+  input: {
+    // size: 'mini'
+  },
+  select: {
+    // size: 'mini'
+  },
+  colorPicker: {
+    showAlpha: true
+  },
+  xform: {
+    form: {
+      labelWidth: 'auto'
+      // size: 'mini'
+    }
+  }
+})
+export default {
+  components: { xForm: xcrud.xForm },
+  props: {
+    modeler: {
+      type: Object,
+      required: true
+    },
+    element: {
+      type: Object,
+      required: true
+    },
+    categorys: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    'formData.id': function(val) {
+      this.updateProperties({ id: val })
+    },
+    'formData.name': function(val) {
+      this.updateProperties({ name: val })
+    },
+    'formData.documentation': function(val) {
+      if (!val) {
+        this.updateProperties({ documentation: [] })
+        return
+      }
+      const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
+      this.updateProperties({ documentation: [documentationElement] })
+    }
+  },
+  methods: {
+    updateProperties(properties) {
+      const modeling = this.modeler.get('modeling')
+      modeling.updateProperties(this.element, properties)
+    }
+  },
+  computed: {
+    elementType() {
+      const bizObj = this.element.businessObject
+      return bizObj.eventDefinitions
+        ? bizObj.eventDefinitions[0].$type
+        : bizObj.$type
+    },
+    showConfig() {
+      return showConfig[this.elementType] || {}
+    }
+  }
+}

package/package/package/common/mixinXcrud.js

@@ -0,0 +1,22 @@
+import xcrud from 'xcrud'
+import golbalConfig from 'xcrud/package/common/config'
+golbalConfig.set({
+  input: {
+    // size: 'mini'
+  },
+  select: {
+    // size: 'mini'
+  },
+  colorPicker: {
+    showAlpha: true
+  },
+  xform: {
+    form: {
+      labelWidth: 'auto'
+      // size: 'mini'
+    }
+  }
+})
+export default {
+  components: { xForm: xcrud.xForm }
+}

package/package/package/common/parseElement.js

@@ -0,0 +1,53 @@
+export function commonParse(element) {
+  const result = {
+    ...element.businessObject,
+    ...element.businessObject.$attrs
+  }
+  return formatJsonKeyValue(result)
+}
+
+export function formatJsonKeyValue(result) {
+  // 移除flowable前缀，格式化数组
+  for (const key in result) {
+    if (key.indexOf('flowable:') === 0) {
+      const newKey = key.replace('flowable:', '')
+      result[newKey] = result[key]
+      delete result[key]
+    }
+  }
+  result = documentationParse(result)
+  return result
+}
+
+export function documentationParse(obj) {
+  if ('documentation' in obj) {
+    let str = ''
+    obj.documentation.forEach(item => {
+      str += item.text
+    })
+    obj.documentation = str
+  }
+  return obj
+}
+
+export function conditionExpressionParse(obj) {
+  if ('conditionExpression' in obj) {
+    obj.conditionExpression = obj.conditionExpression.body
+  }
+  return obj
+}
+
+export function userTaskParse(obj) {
+  for (const key in obj) {
+    if (key === 'candidateUsers') {
+      obj.userType = 'candidateUsers'
+      obj[key] = obj[key]?.split(',') || []
+    } else if (key === 'candidateGroups') {
+      obj.userType = 'candidateGroups'
+      obj[key] = obj[key]?.split(',') || []
+    } else if (key === 'assignee') {
+      obj.userType = 'assignee'
+    }
+  }
+  return obj
+}

package/package/package/components/custom/customContextPad.vue

@@ -0,0 +1,24 @@
+export default class CustomContextPad {
+    constructor(config, contextPad, create, elementFactory, injector, translate) {
+        this.create = create;
+        this.elementFactory = elementFactory;
+        this.translate = translate;
+
+        if (config.autoPlace !== false) {
+            this.autoPlace = injector.get('autoPlace', false);
+        }
+
+        contextPad.registerProvider(this); // 定义这是一个contextPad
+    }
+
+    getContextPadEntries(element) {}
+}
+
+CustomContextPad.$inject = [
+    'config',
+    'contextPad',
+    'create',
+    'elementFactory',
+    'injector',
+    'translate'
+];