FlowDesign

基础用法

View Source

<script setup lang="ts">
import { useGraphData, useOptions } from './data'

const graphData = useGraphData()

const formOptions = useOptions()

const dataOptions = {
  buttonList: [
    { name: '保存草稿', buttonKey: 'flow_draft' },
    { name: '发送', buttonKey: 'flow_pass' },
  ],
  formPropertyList: [
    { label: '字段1', prop: 'field1' },
    { label: '字段2', prop: 'field2' },
    { label: '审批表单', prop: 'formTab' },
    { label: '附件资料', prop: 'fileTab' },
    { label: '流程跟踪', prop: 'trackTab' },
  ],
  fieldsDic: [
    { label: '字段1', value: 'field1' },
    { label: '字段2', value: 'field2' },
  ],
}
</script>

<template>
  <FlowDesign v-model="graphData" :form-options="formOptions" :data-options="dataOptions" style="height:800px" />
</template>

查看模式

已办

View Source

<script setup lang="ts">
import { computed } from 'vue'

import { useGraphData } from './data'

const graphData = useGraphData()

const styles = computed(() => {
  return graphData.value.flowElementList?.map((item) => {
    return {
      id: item.key,
      style: { fill: 'lightgreen' },
    }
  })
})
const tooltips = computed(() => {
  return graphData.value.flowElementList?.map((item) => {
    return {
      id: item.key,
      content: `<div>${item.key}</div>`,
    }
  })
})
</script>

<template>
  <div class="flow-status-legend">
    <div class="legend-item">
      <div class="legend-color" />
      <span class="legend-text">已办</span>
    </div>
  </div>
  <FlowDesign :model-value="graphData" type="viewer" :styles="styles" :tooltips="tooltips" style="height:400px" />
</template>

<style lang="scss" scoped>
.flow-status-legend {
  position: absolute;
  left: 4px;
  z-index: 1;
  display: flex;

  .legend-item {
    display: flex;
    align-items: center;
    margin-right: 10px;

    .legend-color {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      background-color: lightgreen;
    }

    .legend-text {
      color: #000;
    }
  }
}
</style>

属性

属性名	说明	类型	可选值	默认值
lf(v-model)	LogicFlow 实例	LogicFlow
initOptions	LogicFlow 初始化配置	Object
modelValue(v-model)	流程图数据	Object
elementData(v-model)	当前选中的元素	NodeConfig|EdgeConfig
formData(v-model)	当前选中元素的表单数据	Object
formOptions	表单配置	Record<string, AvueFormGroup[]>
formOption	当前选中元素的表单配置	AvueFormOption
formDefaults	当前表单控制配置	AvueFormDefaults
formWidth	表单宽度	string		300px
dataOptions	表单配置数据	Object
type	查看器模式	string	'viewer'
styles	节点样式(查看器模式)	StyleItem[]
tooltips	节点提示框(查看器模式)	TooltipItem[]

类型定义

import type { AvueFormColumn, AvueFormDefaults, AvueFormGroup, AvueFormOption, DicItem } from '@smallwei/avue'
import type { Definition, EdgeConfig, LogicFlow, NodeConfig } from '@logicflow/core'
import type { ButtonItem, FlowFormData, StyleItem, TooltipItem, TurboData } from '../types'

export interface FlowDesignProps {
  /** LogicFlow实例 */
  lf?: LogicFlow
  /** LogicFlow初始化配置 */
  initOptions?: Definition
  /** 流程图数据 */
  modelValue?: TurboData
  /** 当前选中元素的数据 */
  elementData?: NodeConfig | EdgeConfig
  /** 所有表单配置 */
  formOptions?: Record<string, AvueFormGroup[]>
  /** 当前选中元素的表单数据 */
  formData?: FlowFormData
  /** 当前选中元素的表单配置 */
  formOption?: AvueFormOption
  /** 当前表单控制配置 */
  formDefaults?: AvueFormDefaults
  /** 表单宽度 */
  formWidth?: string
  /** 表单配置数据 */
  dataOptions?: {
    /** 按钮数据 */
    buttonList?: ButtonItem[]
    /** 表单字段数据 */
    formPropertyList?: AvueFormColumn[]
    /** 字段字典 */
    fieldsDic?: DicItem[]
    /** 按钮显示字典 */
    flowButtonDisplayDic?: DicItem[]
    /** 按钮审批字典 */
    flowButtonApprovalDic?: DicItem[]
    /** 按钮校验字典 */
    flowButtonValidateDic?: DicItem[]
    /** 人员配置用户选择 */
    flowAssigneeUserDic?: DicItem[]
    /** 人员配置用户部门 */
    flowAssigneeDeptDic?: DicItem[]
    /** 人员配置岗位选择 */
    flowAssigneePostDic?: DicItem[]
    /** 人员配置动态选择 */
    flowAssigneeDynamicDic?: DicItem[]
  }
  /** 查看器模式 */
  type?: 'viewer'
  /** 设置节点的样式 */
  styles?: StyleItem[]
  /** 节点提示框 */
  tooltips?: TooltipItem[]
}

export enum AssigneeType {
  '用户' = 'user',
  '部门' = 'dept',
  '岗位' = 'post',
  '动态' = 'dynamic',
  '指定节点' = 'userTask',
  '指定用户' = 'specifyUser',
  '自定义' = 'custom',
}

export interface AssigneeItem {
  type?: AssigneeType
  value?: string
  idVal?: string
  values?: any[]
}
export interface CirculateItem {
  type?: string
  value?: string
  idVal?: string
  values?: any[]
}
export interface ButtonItem {
  name?: string
  buttonKey?: string
  display?: string
  approval?: string
  validate?: number
}
export interface ListenerItem {
  eventName?: string
  eventType?: string
  eventValue?: string
  fields?: {
    fieldName?: string
    fieldType?: string
    fieldValue?: string
  }[]
}
export interface PropertyItem {
  name?: string
  value?: string
}
export interface FormPropertyItem {
  label?: string
  prop?: string
  display?: boolean
  disabled?: boolean
  detail?: boolean
  readonly?: boolean
  required?: boolean
  validate?: boolean
  children?: FormPropertyItem[]
}
export interface TimeLimitItem {
  name?: string
  min?: number
  max?: number
}
export interface Serial {
  name?: string
  prefix?: string
  dateFormat?: string
  suffixLength?: string
  startSequence?: string
  connector?: string
  cycle?: string
}

export interface FlowFormData {
  /** 节点id */
  id?: string
  /** 节点名称 */
  name?: string
  /** 节点描述 */
  desc?: string
  /** 跳过第一节点 */
  skipFirstNode?: boolean
  /** 驳回节点 */
  rollbackNode?: string
  /** 优先级 */
  priority?: number
  /** 表单标题 */
  formTitle?: string
  /** 表单标题分隔符 */
  formTitleSeparator?: string
  /** 回到驳回人 */
  backToRejecter?: boolean
  /** 多实例类型 */
  multiInstanceType?: string
  /** 完成条件 */
  completionCondition?: string
  /** 回收任务 */
  isRecall?: boolean
  /** 类 */
  className?: string
  /** 异步 */
  isAsync?: boolean
  /** 条件表达式 */
  conditionsequenceflow?: string
  /** 是否为默认分支 */
  defaultConditions?: boolean
  /** 网关类型 */
  inout?: string
  /** 人员配置 */
  assignee?: AssigneeItem[]
  /** 传阅配置 */
  circulate?: CirculateItem[]
  /** 按钮配置 */
  button?: ButtonItem[]
  /** 执行监听 */
  executionListener?: ListenerItem[]
  /** 表单配置 */
  formProperty?: FormPropertyItem[]
  /** 扩展属性 */
  property?: PropertyItem[]
  /** 流水号 */
  serial?: Serial
  /** 任务监听 */
  taskListener?: ListenerItem[]
  /** 时限控制 */
  timeLimit?: TimeLimitItem[]
}

import type { Point, ShapeStyleAttribute, TextConfig } from '@logicflow/core'

export interface TooltipItem {
  id?: string
  content?: string
}

export interface StyleItem {
  id?: string
  style?: ShapeStyleAttribute
}

export interface ProcessData {
  type?: string
  key?: string
  properties?: {
    name?: string
    category?: string
    icon?: string
    remark?: string
    [x: string]: unknown
  }
}

export interface FlowElement {
  incoming?: string[]
  outgoing?: string[]
  children?: string[]
  type?: string
  key?: string
  groupKey?: string
  properties?: Record<string, unknown>
}

export interface FlowNode extends FlowElement {
  properties?: {
    name?: string
    text?: TextConfig | string
    x?: number
    y?: number
    [x: string]: unknown
  }
}
export interface FlowEdge extends FlowElement {
  properties?: {
    name?: string
    text?: TextConfig | string
    startPoint?: Point
    endPoint?: Point
    pointsList?: Point[]
    [x: string]: unknown
  }
}

export interface TurboData {
  flowElementList?: FlowElement[]
  processData?: ProcessData
  [x: string]: unknown
}