lw-cdp-ui 1.2.47 → 1.2.49

package/dist/components/lwFlow/index.vue

@@ -1,781 +0,0 @@
-<template>
-  <div class="logic-flow">
-    <!-- 画布 -->
-    <div ref="container"
-         class="logic-flow-body"></div>
-
-    <!-- 工具栏 -->
-    <lfControl class="logic-flow-control"
-               v-if="logicFlow"
-               :lf="logicFlow" />
-
-    <template v-if="!isView">
-      <!-- 节点 -->
-      <lfNodePanel class="logic-flow-node"
-                   v-if="logicFlow"
-                   :lf="logicFlow"
-                   :nodeList="nodeList" />
-
-      <!-- 属性编辑 -->
-      <nodeEdit :lf="logicFlow"
-                :drawerShow="drawerShow"
-                :nodeData="clickNode"
-                :nodesDataConfig="nodesDataConfig"
-                :soltList="soltList"
-                @onClose="nodeEditClose">
-        <template v-slot:[soltName]="{itemCur, formCur}"
-                  v-for="soltName in soltList">
-          <slot :name="soltName"
-                :itemCur="itemCur"
-                :formCur="formCur">
-            <el-tag type="danger">[{{ soltName }}]
-              没有这个默认组件也未自定义插槽内容</el-tag>
-          </slot>
-        </template>
-        <template #mySolt>
-          sssssssssssssssss
-        </template>
-      </nodeEdit>
-    </template>
-  </div>
-</template>
-
-<script>
-import LogicFlow from '@logicflow/core'
-import '@logicflow/core/dist/index.css';
-import { Menu, MiniMap } from "@logicflow/extension";
-import Dagre from './config/dagre'
-import '@logicflow/extension/lib/style/index.css';
-
-// 注册组件
-import lfControl from './components/lfControl.vue'
-import lfNodePanel from './components/lfNodePanel.vue'
-
-// 自定义节点
-import basisStart from './nodes/basisStart'
-import basisEnd from './nodes/basisEnd'
-import et2lTable from './nodes/et2lTable'
-import nodeCustom from './nodes/custom'
-
-// 节点编辑
-import nodeEdit from './nodeEdit/index.vue'
-
-// 参数配置
-import configNodesList from './config/nodesList'
-import nodeDatas from './nodesData/index.js'
-export default {
-  components: {
-    lfControl,
-    lfNodePanel,
-    nodeEdit
-  },
-  props: {
-    /**
-     * 流程图的数据，包括节点和边的配置。
-     * - `nodes`：一个数组，包含流程图中的所有节点。每个节点都有唯一的`id`、类型(`type`)以及位置(`x`, `y`)。
-     * - `edges`：一个数组，描述了节点之间的连接关系。每条边都有类型(`type`)以及源节点(`sourceNodeId`)和目标节点(`targetNodeId`)的标识。  
-     * - `nodes.properties` 节点数据配置
-     * - `nodes.properties.data` 节点自定义数据配置 默认： data: {name：'节点名称'}
-     * - `nodes.properties.style` 节点自定义样式，具体参数看\nodeEdit\basicSettings.vue
-     * @example
-     * ```javascript
-     * {
-     *   nodes: [ 
-     *     { id: '21', type: 'end', x: 100, y: 200, properties: { data: name: '结束' } },
-     *     { id: '50', type: 'start', x: 300, y: 400 }
-     *   ],
-     *   edges: [
-     *     { type: 'polyline', sourceNodeId: '50', targetNodeId: '21' }
-     *   ]
-     * }
-     * ```
-     */
-    modelValue: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 节点数据 在没有 modelValue时 用以自动创建节点  默认使用modelValue
-    nodes: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 节点插槽列表
-    soltList: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 是否显示默认节点
-    showDefaultNode: {
-      type: Boolean,
-      default: true
-    },
-    // 是否仅查看
-    isView: {
-      type: Boolean,
-      default: false
-    },
-    // 需要展示的节点分组 不传默认展示所有内置节点
-    showNodeGroup: {
-      type: Array,
-      default: []
-    },
-    /**
-     * 节点数据配置
-     * 对应的就是nodeDatas目录下的数据结构 
-     * source: { // 节点名
-          formConfig: { // 表单配置
-            formItems: [{ // 表单项配置，写你要覆盖的参数
-              name: 'from', // name 指定你要覆盖的名称
-              component: 'select',
-              options: {
-                items: [{ label: '订单', value: 'order' }, { label: '会员', value: 'member' }],
-                placeholder: '请输入节点名称'
-              },
-            }]
-          }
-        }
-     */
-    nodesDataConfig: {
-      type: Object,
-      default: {}
-    },
-    /**
-     * apiNodes - 接口返回的节点数组，用于与内容节点合并。
-     * @type {Array<Object>}
-     * @default []
-     * @property {string} name - 节点名称
-     * @property {string} category - 节点类别
-     * @property {number} index - 节点索引
-     * @property {number} groupIndex - 节点组索引
-     * @property {string} groupId - 节点组ID
-     * @property {string} groupName - 节点组名称
-     * @property {string} type - 节点类型
-     * @property {boolean} enabled - 节点是否启用
-     * @property {string} icon - 节点图标
-     * @property {string} themeColor - 节点主题颜色
-     * @property {string} background - 节点背景色
-     */
-    apiNodes: {
-      type: Array,
-      default: []
-    },
-    /**
-     * 流程图初始化属性配置。
-     * @property {Object} grid - 网格配置对象，包含网格大小、是否显示、类型及详细配置。
-     * @property {HTMLElement} container - 图的DOM容器。
-     * @property {number} [width] - 画布宽度，默认使用容器宽度。
-     * @property {number} [height] - 画布高度，默认使用容器高度。
-     * @property {boolean|BackgroundConfig} [background=false] - 背景配置，默认无背景。
-     * @property {number|boolean|GridOptions} [grid=false] - 网格配置，false表示不开启网格。
-     * @property {boolean} [partial=false] - 是否开启局部渲染功能。
-     * @property {Keyboard.KeyboardDef} [keyboard] - 自定义键盘配置。
-     * @property {Partial<LogicFlow.Theme>} [style] - 样式配置。
-     * @property {EdgeType} [edgeType='polyline'] - 边的类型，默认为'polyline'。
-     * @property {boolean} [isSilentMode=false] - 是否仅浏览不可编辑模式。
-     * @property {boolean} [stopScrollGraph=false] - 是否禁止鼠标滚动移动画布。
-     * @property {boolean} [stopZoomGraph=false] - 是否禁止缩放画布。
-     * @property {boolean|string|[number, number, number, number]} [stopMoveGraph=false] - 是否禁止拖动画布。
-     * @property {boolean|Partial<AnimationConfig>} [animation] - 动画配置。
-     * @property {boolean} [history=true] - 是否开启历史记录功能。
-     * @property {string[]} [disabledPlugins] - 禁用加载的插件。
-     * @property {boolean} [snapline=true] - 是否启用节点辅助对齐线。
-     * @property {GuardsConfig} [guards] - 守卫函数配置。
-     * @property {string[]} [disabledTools] - 禁止启用的内置工具。
-     * @property {boolean} [adjustEdge=true] - 是否允许调整边。
-     * @property {boolean} [adjustEdgeStartAndEnd=false] - 是否允许拖动边的端点来调整连线。
-     * @property {boolean} [adjustNodePosition=true] - 是否允许拖动节点。
-     * @property {boolean} [hideAnchors=false] - 是否隐藏节点的锚点。
-     * @property {boolean} [outline=false] - 节点选择状态下外侧的选框是否展示。
-     * @property {boolean} [hoverOutline=true] - 鼠标hover时是否显示节点的外框。
-     * @property {boolean} [nodeSelectedOutline=true] - 节点被选中时是否显示节点的外框。
-     * @property {boolean} [edgeSelectedOutline=true] - 边被选中时是否显示边的外框。
-     * @property {boolean} [nodeTextEdit=true] - 允许节点文本编辑。
-     * @property {boolean} [edgeTextEdit=true] - 允许边文本编辑。
-     * @property {boolean} [textEdit=true] - 是否开启文本编辑。
-     * @property {boolean} [nodeTextDraggable=false] - 允许节点文本拖拽。
-     * @property {boolean} [edgeTextDraggable=false] - 允许边文本拖拽。
-     * @property {string} [multipleSelectKey] - 多选按键配置。
-     * @property {function} [idGenerator] - 自定义创建节点、连线时生成id规则。
-     * @property {EdgeGeneratorType} [edgeGenerator] - 连接节点及移动边时边的生成规则。
-     * @property {ExtensionConstructor[]} [plugins] - 加载的插件。
-     * @property {boolean} [autoExpand=true] - 节点拖动靠近画布边缘时是否自动扩充画布。
-     * @property {OverlapMode} [overlapMode] - 元素重合的堆叠模式。
-     * @property {function} [customTrajectory] - 自定义连线轨迹。
-     * @property {any} [pluginsOptions] - 插件初始化选项。
-     */
-    options: {
-      type: Object,
-      default: () => {
-        return {
-          grid: {
-            size: 10,
-            visible: true,
-            type: 'mesh',
-            config: {
-              color: '#f0f0f0',
-              thickness: 0.5
-            }
-          },
-        }
-      }
-    }
-  },
-  watch: {
-    modelValue: {
-      handler(val, old) {
-        // 第一次初始化
-        if (!old && !this.logicFlow) {
-          this.init()
-          // this.logicFlow.renderRawData(val)
-        }
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      logicFlow: null,
-      drawerShow: false,
-      clickNode: null,
-    }
-  },
-  computed: {
-    nodeList() {
-      // 基础节点
-      let baseList = configNodesList
-
-      let list = {}
-      this.apiNodes.forEach(item => {
-        if (!list[item.groupName]) {
-          list[item.groupName] = {
-            title: item.groupName,
-            list: []
-          }
-        }
-        list[item.groupName].list.push(item)
-      })
-
-      if (this.showDefaultNode) {
-        baseList = [...baseList, ...Object.values(list)]
-      } else {
-        baseList = Object.values(list)
-      }
-
-      if (this.showNodeGroup.length > 0) {
-        baseList = baseList.filter(item => {
-          return this.showNodeGroup.includes(item.title)
-        })
-      }
-
-      return baseList
-    }
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    /**
-     * 初始化
-     * 传入数据初始化、右键菜单初始化
-     */
-    async init() {
-      this.logicFlow = new LogicFlow({
-        container: this.$refs.container,
-        // 注册组件
-        plugins: [Menu, MiniMap, Dagre],
-        // 不可编辑
-        isSilentMode: this.isView,
-        hoverOutline: !this.isView,
-        nodeSelectedOutline: !this.isView,
-        edgeSelectedOutline: !this.isView,
-        ...this.options
-      })
-      this.initMenu()
-      await this.initNode()
-      if (this.modelValue && this.modelValue?.nodes?.length > 0) {
-        this.logicFlow.render(this.modelValue)
-      } else {
-        // 根据节点数据初始化节点
-        this.initNodeData()
-      }
-
-      this.bindEvent()
-      // 内容移动到中心
-      this.logicFlow.translateCenter()
-    },
-    /**
-     * 根据node 初始化数据
-     */
-    async initNodeData() {
-      function getUUID() {
-        return 'xxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-          const r = (Math.random() * 16) | 0; // 生成 0-15 的随机数
-          const v = c === 'x' ? r : (r & 0x3) | 0x8; // 如果是 'x' 使用随机数，否则按规则生成
-          return v.toString(16); // 转换为16进制字符串
-        });
-      }
-      function generateNode(data) {
-        return {
-          id: getUUID(),
-          type: data.type || "",
-          x: 0, // 可根据实际需要动态调整
-          y: 0, // 可根据实际需要动态调整
-          properties: {
-            data
-          },
-        };
-      }
-
-      function generateEdge(sourceNode, targetNode) {
-        return {
-          id: getUUID(),
-          type: "polyline",
-          sourceNodeId: sourceNode.id,
-          targetNodeId: targetNode.id,
-        };
-      }
-      const nodes = [];
-      const edges = [];
-      const nodeMap = {};
-
-      // 创建节点
-      this.nodes.forEach(item => {
-        const node = generateNode(item);
-        nodes.push(node);
-        nodeMap[item.into] = node;
-      });
-
-      // 创建边
-      this.nodes.forEach(item => {
-        let sourceKeys = Array.isArray(item.from)
-          ? item.from.map(subItem => subItem.name)  // 如果是数组，提取每个 name
-          : [item.from];  // 如果是字符串，直接作为 sourceKey
-
-        const targetKey = item.into;
-
-        sourceKeys.forEach(sourceKey => {
-          if (nodeMap[sourceKey] && nodeMap[targetKey]) {
-            edges.push(generateEdge(nodeMap[sourceKey], nodeMap[targetKey]));
-          }
-        });
-      });
-
-      this.logicFlow.renderRawData({
-        nodes,
-        edges
-      })
-
-      this.logicFlow.extension.dagre.layout({
-        nodesep: 60,
-        ranksep: 140,
-      })
-
-    },
-    /**
-     * 初始化右键菜单
-     */
-    initMenu() {
-      let _this = this
-      this.logicFlow.extension.menu.setMenuConfig({
-        // 节点
-        nodeMenu: [
-          {
-            text: "删除",
-            callback(node) {
-              _this.logicFlow.deleteNode(node.id);
-            },
-          },
-          {
-            text: '编辑',
-            callback(node) {
-              _this.nodeEditOpen(node)
-              _this.$emit('edit', node)
-            },
-          },
-          {
-            text: "复制",
-            callback: (node) => {
-              this.logicFlow.cloneNode(node.id);
-            },
-          },
-        ],
-        // 连线菜单
-        edgeMenu: [
-          {
-            text: "删除",
-            callback(edge) {
-              _this.logicFlow.deleteEdge(edge.id);
-            },
-          },
-          {
-            text: '编辑',
-            callback(edge) {
-              _this.nodeEditOpen(edge)
-              _this.$emit('edit', edge)
-            },
-          },
-          {
-            text: '直线',
-            callback(edge) {
-              // 切换边类型
-              _this.logicFlow.changeEdgeType(edge.id, "line")
-            },
-          },
-          {
-            text: '曲线',
-            callback(edge) {
-              // 切换边类型
-              _this.logicFlow.changeEdgeType(edge.id, "bezier")
-            },
-          },
-          {
-            text: '折线',
-            callback(edge) {
-              _this.logicFlow.changeEdgeType(edge.id, "polyline")
-            },
-          },
-          {
-            text: '开启动画',
-            callback(edge) {
-              _this.logicFlow.openEdgeAnimation(edge.id)
-            },
-          },
-          {
-            text: '关闭动画',
-            callback(edge) {
-              _this.logicFlow.closeEdgeAnimation(edge.id)
-            },
-          },
-        ], // 全局右键菜单
-        graphMenu: []
-      });
-    },
-    /**
-     * 初始化节点
-     * 该函数用于初始化基础节点，包括开始节点（basisStart）和结束节点（basisEnd）。
-     * @param {Object} logicFlow - 逻辑流对象，用于操作节点。
-     */
-    async initNode() {
-      for (const x of this.nodeList) {
-        for (const node of x.list) {
-          switch (node.type) {
-            case 'start':
-              await basisStart(this.logicFlow);
-              break;
-            case 'end':
-              await basisEnd(this.logicFlow);
-              break;
-            case 'source':
-            case 'mapper':
-            case 'joiner':
-            case 'target':
-            case 'filter':
-            case 'collap':
-            case 'expand':
-            case 'reduce':
-              await et2lTable(this.logicFlow, node);
-              break;
-            case 'event_receive':
-              await nodeCustom(this.logicFlow, node, this.$store.state);
-              break;
-            default:
-              await nodeCustom(this.logicFlow, node, this.$store.state);
-              break;
-          }
-        }
-      }
-    },
-    /**
-     * 处理流程图数据 返回纯节点
-     */
-    getNodes(nodes) {
-      let list = []
-      nodes.forEach((node) => {
-        list.push({ ...node.properties.data, type: node.type })
-      })
-      return list
-    },
-    /**
-     * 节点绑定事件
-     */
-    bindEvent() {
-      this.logicFlow.on('node:dbclick', ({ data }) => {
-        this.nodeEditOpen(data)
-      })
-      this.logicFlow.on('edge:dbclick', ({ data }) => {
-        this.nodeEditOpen(data)
-      })
-      this.logicFlow.on('blank:click', () => {
-        this.drawerShow = false
-      })
-
-      // 数据变更监听
-      this.logicFlow.on('history:change', ({ data }) => {
-        let { undos } = data
-        // 返回所有历史数据
-        this.$emit('change', undos)
-        // 同步最后数据 原始流程数据
-        this.$emit('update:modelValue', undos[undos.length - 1])
-
-        // 处理后的nodes 数据
-        this.$emit("update:nodes", this.getNodes(undos[undos.length - 1].nodes, undos[undos.length - 1].edges))
-      })
-
-      // 错误提示
-      this.logicFlow.on('connection:not-allowed', (data) => {
-        this.$message({
-          type: 'error',
-          message: data.msg
-        })
-      })
-
-
-      this.changeEdge()
-    },
-    /**
-     * 改变连线时处理上下级节点数据
-     * 本扩展暂无使用 本意是直接提供接口说要的数据结构
-     * 但是存在触发限制（可能存在连线后用户有修改了数据导致关联指向数据不完整） 暂停开发
-     * 所以本组件只提供原始的流程图数据输出  结构数据开发人员自行处理
-     */
-    changeEdge() {
-      this.logicFlow.on('edge:add', ({ data: edge }) => {
-      })
-      this.logicFlow.on('edge:delete', ({ data: edge }) => {
-      })
-
-    },
-    // 关闭属性抽屉
-    nodeEditClose() {
-      this.drawerShow = false
-    },
-    // 打开属性抽屉
-    nodeEditOpen(data) {
-      // 去除为空校验结果
-      delete data.properties.error
-      this.logicFlow.setProperties(data.id, {
-        error: false
-      });
-
-      this.clickNode = data
-      this.drawerShow = true
-
-    },
-    /**
-     * 节点必传字段校验
-     * 用于父组件校验使用
-     * @returns {Promise<boolean>} 验证是否通过 true 通过
-     */
-    async validate() {
-      let { nodes } = this.logicFlow.getGraphData();
-      let errorNodes = {};
-
-      for (const node of nodes) {
-        let { formConfig } = nodeDatas[node.type];
-        let { formItems } = formConfig;
-        let { data } = node.properties;
-
-        if (formItems?.length > 0) {
-          for (const item of formItems) {
-            let value = data ? data[item?.name] : data;
-            let isHideHandle = false;
-
-            // 处理 hideHandle 字段逻辑
-            if (data && typeof item?.hideHandle === 'string') {
-              try {
-                const hideHandleFunc = new Function("data", `return ${item.hideHandle.replace(/\$/g, "data")}`);
-                isHideHandle = hideHandleFunc(data);
-              } catch (error) {
-                console.error('遇到错误时返回默认值:', error)
-                isHideHandle = false; // 遇到错误时默认值
-              }
-            } else if (data && typeof item?.hideHandle === 'boolean') {
-              isHideHandle = item.hideHandle;
-            }
-
-            // 校验规则，如果不符合则记录错误
-            if (!isHideHandle && item?.rules && (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0))) {
-              this.logicFlow.setProperties(node.id, {
-                data: data,
-                error: true,
-              });
-              errorNodes[node.id] = true;
-              break;
-            }
-          }
-        }
-
-        // 如果节点没有错误，清除错误状态
-        if (!errorNodes[node.id]) {
-          this.logicFlow.setProperties(node.id, {
-            data: data,
-            error: false,
-          });
-        }
-      }
-      return Object.keys(errorNodes).length === 0;
-    }
-
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.logic-flow {
-  width: 100%;
-  height: calc(100% - 3px);
-  position: relative;
-  user-select: none;
-  .logic-flow-body {
-    width: 100%;
-    height: 100%;
-  }
-  .logic-flow-control {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 88;
-  }
-  :deep(.lf-menu) {
-    width: 85px;
-    border-radius: var(--el-popover-border-radius);
-    padding: var(--el-popover-padding);
-    z-index: var(--el-index-popper);
-    color: var(--el-text-color-regular);
-    line-height: 20px;
-    font-size: var(--el-popover-font-size);
-    box-shadow: var(--el-box-shadow-light);
-    overflow-wrap: break-word;
-    box-sizing: border-box;
-    background: var(--el-bg-color-overlay);
-    border: 1px solid var(--el-border-color-light);
-    position: relative;
-    &::before {
-      content: "";
-      border: 1px solid var(--el-border-color-light);
-      background: var(--el-bg-color-overlay);
-      right: 0;
-      border-bottom-left-radius: 2px;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      transform: rotate(45deg);
-      box-sizing: border-box;
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      top: 5px;
-      left: -5px;
-    }
-    & > li {
-      line-height: 24px;
-      letter-spacing: 2px;
-    }
-  }
-}
-// 开始节点样式
-:deep(.lw-flow-node-start) {
-  width: 100%;
-  height: 100%;
-  border: 2px solid #39bcc5;
-  border-radius: 100px;
-  font-size: 14px;
-  color: #39bcc5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-// 结束节点样式
-:deep(.lw-flow-node-end) {
-  width: 100%;
-  height: 100%;
-  border: 2px solid #e64210;
-  border-radius: 100px;
-  font-size: 14px;
-  color: #e64210;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-// et2l节点样式
-:deep(.lw-flow-node-et2l) {
-  width: 100%;
-  height: 100%;
-  color: #ffffff;
-  line-height: 20px;
-  font-size: 12px;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  gap: 10px;
-  padding: 0 0 0 10px;
-  position: relative;
-  i {
-    font-size: 20px;
-  }
-  .text {
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-// 自定义节点样式
-:deep(.lw-flow-node-custom) {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0 0 8px rgba($color: #000000, $alpha: 0.2);
-  .top-name {
-    padding: 5px 10px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    color: var(--el-text-color-regular);
-    line-height: 20px;
-    font-size: var(--el-popover-font-size);
-    border: 1px solid #39bcc5;
-    border-top: 10px solid #39bcc5;
-    border-bottom: 0;
-  }
-  .bottom-content {
-    height: calc(100% - 40px);
-    overflow: auto;
-    background-color: #ffffff;
-    border: 1px solid #39bcc5;
-    border-top: 0;
-    border-radius: 0 0 6px 6px;
-    padding: 10px;
-    font-size: 12px;
-    color: var(--el-text-color-regular);
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    line-height: 14px;
-  }
-}
-:deep(.lw-flow-node-error) {
-  &::after {
-    content: "必填字段不能为空";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 100px;
-    height: 20px;
-    font-size: 10px;
-    color: #fff;
-    z-index: 9;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba($color: #e61010, $alpha: 0.8);
-  }
-}
-</style>