lw-cdp-ui 1.1.16 → 1.1.18

package/dist/components/lwCronSelect/index.vue

@@ -171,13 +171,13 @@ export default {
      */
     const changeCron = () => {
       emit('update:modelValue', showInput.value)
+      emit('change')
     }
 
     /**
      * 确定选择，生成最终的cron表达式
      */
     const changeOk = () => {
-      console.log(setData.value.timeData)
       const time = setData.value.timeData ? setData.value.timeData.split(':') : ['*', '*', '*']
       dataList.value[0] = time[2] === "*" ? time[2] : parseInt(time[2], 10).toString()
       dataList.value[1] = time[1] === "*" ? time[1] : parseInt(time[1], 10).toString()
@@ -194,6 +194,7 @@ export default {
       showInput.value = `${dataList.value[0]} ${dataList.value[1]} ${dataList.value[2]} ${dataList.value[3]} ${dataList.value[4]} ${dataList.value[5]}`
 
       emit('update:modelValue', showInput.value)
+      emit('change')
       visible.value = false
     }
 
@@ -209,4 +210,9 @@ export default {
     }
   }
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.select-model{
+  display: flex;
+}
+</style>

package/dist/components/lwFlow/components/lfControl.vue

@@ -47,7 +47,7 @@
 
       <el-tooltip class="box-item"
                   effect="dark"
-                  :content="lf.extension.miniMap.isShow ? '查看缩略图' : '关闭缩略图'"
+                  content="缩略图(点击展开，再次点击关闭)"
                   placement="bottom-end">
         <el-button plain
                    @click="showMiniMap"
@@ -64,8 +64,10 @@
 export default {
   name: 'lfControl',
   props: {
-    lf: Object || String,
-    catTurboData: Boolean
+    lf: {
+      type: Object,
+      default: () => { }
+    }
   },
   data() {
     return {
@@ -97,6 +99,7 @@ export default {
     reset() {
       this.$props.lf.resetZoom();
       this.$props.lf.resetTranslate();
+      this.$props.lf.translateCenter()
     },
     undo() {
       this.$props.lf.undo();
@@ -110,9 +113,6 @@ export default {
     catData() {
       this.$emit('catData');
     },
-    catTurboData() {
-      this.$emit('catTurboData');
-    },
     showMiniMap() {
       const { lf } = this.$props;
       if (lf.extension.miniMap.isShow) {

package/dist/components/lwFlow/components/lfNodePanel.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="node-panel">
-    <el-collapse v-model="activeName"
-                 accordion>
+    <el-collapse accordion>
       <el-collapse-item v-for="item in nodeList"
                         :title="item.title"
                         :name="item.title">
@@ -26,14 +25,13 @@
  * 节点面板
  */
 export default {
-  name: 'NodePanel',
+  name: 'lfNodePanel',
   props: {
     lf: Object,
     nodeList: Array,
   },
   methods: {
     dragNode(item) {
-      console.log(item)
       this.$props.lf.dnd.startDrag({
         type: item.type,
       })

package/dist/components/lwFlow/index.vue

@@ -12,6 +12,13 @@
                  v-if="logicFlow"
                  :lf="logicFlow"
                  :nodeList="nodeList" />
+
+    <!-- 属性编辑 -->
+    <nodeEdit :lf="logicFlow"
+              :drawerShow="drawerShow"
+              :nodeData="clickNode"
+              @onClose="nodeEditClose"/>
+
   </div>
 
 </template>
@@ -29,62 +36,113 @@ import lfNodePanel from './components/lfNodePanel.vue'
 // 自定义节点
 import basisStart from './nodes/basisStart'
 import basisEnd from './nodes/basisEnd'
+import nodeCustom from './nodes/custom'
+
+// 节点编辑
+import nodeEdit from './nodeEdit/index.vue'
 export default {
   components: {
     lfControl,
-    lfNodePanel
+    lfNodePanel,
+    nodeEdit
   },
   props: {
-    modelvalue: {
+    /**
+     * 流程图的数据，包括节点和边的配置。
+     * - `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 {
-          // 节点
-          nodes: [
-            {
-              id: '21',
-              type: 'rect',
-              x: 100,
-              y: 200,
-              text: 'rect node',
-            },
-            {
-              id: '50',
-              type: 'circle',
-              x: 300,
-              y: 400,
-              text: 'circle node',
-            },
-          ],
-          // 边
-          edges: [
-            {
-              type: 'polyline',
-              sourceNodeId: '50',
-              targetNodeId: '21',
-            },
-          ],
-        }
+        return {}
       }
     },
     /**
-     * apiNodes - 接口返回的节点的数组。请求到到将与内容节点合并。
-     * @type {Array}
+     * 是否显示默认节点
+     */
+    showDefaultNode: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 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 {number} grid.size - 网格大小，默认为10。
-     * @property {boolean} grid.visible - 是否显示网格，默认为true。
-     * @property {string} grid.type - 网格类型，默认为'mesh'。
-     * @property {Object} grid.config - 网格配置详情。
-     * @property {string} grid.config.color - 网格颜色，默认为'#f0f0f0'。
-     * @property {number} grid.config.thickness - 网格线厚度，默认为0.5。
+     * 流程图初始化属性配置。
+     * @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,
@@ -105,9 +163,23 @@ export default {
       }
     }
   },
+  watch: {
+    modelValue: {
+      handler(val, old) {
+        // 第一次初始化
+        if (!old) {
+          this.init()
+          // this.logicFlow.renderRawData(val)
+        }
+      },
+      deep: true
+    }
+  },
   data() {
     return {
-      logicFlow: null
+      logicFlow: null,
+      drawerShow: false,
+      clickNode: null,
     }
   },
   computed: {
@@ -115,7 +187,7 @@ export default {
       // 基础节点
       let baseList = [
         {
-          title: '流程控制',
+          title: '基础流程',
           list: [
             {
               name: '开始',
@@ -143,8 +215,13 @@ export default {
         }
         list[item.groupName].list.push(item)
       })
-      console.log(list)
-      return Object.values(list).length > 0 ? Object.values(list) : baseList
+
+      if (this.showDefaultNode) {
+        baseList = [...baseList, ...Object.values(list)]
+      } else {
+        baseList = Object.values(list)
+      }
+      return baseList
     }
   },
   mounted() {
@@ -155,7 +232,7 @@ export default {
      * 初始化
      * 传入数据初始化、右键菜单初始化
      */
-    init() {
+    async init() {
       this.logicFlow = new LogicFlow({
         container: this.$refs.container,
         // 注册组件
@@ -163,8 +240,9 @@ export default {
         ...this.options
       })
       this.initMenu()
-      this.initNode()
-      this.logicFlow.render(this.modelvalue)
+      await this.initNode()
+      this.logicFlow.render(this.modelValue)
+      this.bindEvent()
       // 内容移动到中心
       this.logicFlow.translateCenter()
     },
@@ -174,6 +252,7 @@ export default {
     initMenu() {
       let _this = this
       this.logicFlow.extension.menu.setMenuConfig({
+        // 节点
         nodeMenu: [
           {
             text: "删除",
@@ -184,10 +263,18 @@ export default {
           {
             text: '编辑',
             callback(node) {
+              _this.nodeEditOpen(node)
               _this.$emit('edit', node)
             },
           },
+          {
+            text: "复制",
+            callback: (node) => {
+              this.logicFlow.cloneNode(node.id);
+            },
+          },
         ],
+        // 连线菜单
         edgeMenu: [
           {
             text: "删除",
@@ -198,22 +285,110 @@ export default {
           {
             text: '编辑',
             callback(edge) {
+              _this.nodeEditOpen(edge)
               _this.$emit('edit', edge)
             },
           },
-        ], // 删除默认的边右键菜单
-        graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
+          {
+            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")
+            },
+          },
+        ], // 全局右键菜单
+        graphMenu: [
+          // {
+          //   text: '全局直线',
+          //   callback() {
+          //     // 切换边类型
+          //     _this.logicFlow.setDefaultEdgeType("line")
+          //   },
+          // },
+          // {
+          //   text: '全局曲线',
+          //   callback() {
+          //     // 切换边类型
+          //     _this.logicFlow.setDefaultEdgeType("bezier")
+          //   },
+          // },
+          // {
+          //   text: '全局折线',
+          //   callback() {
+          //     _this.logicFlow.setDefaultEdgeType("polyline")
+          //   },
+          // },
+        ]
       });
     },
     /**
-     * 初始化自定义节点
+     * 初始化节点
      * 该函数用于初始化基础节点，包括开始节点（basisStart）和结束节点（basisEnd）。
      * @param {Object} logicFlow - 逻辑流对象，用于操作节点。
      */
-    initNode() {
-      basisStart(this.logicFlow)
-      basisEnd(this.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;
+            default:
+              await nodeCustom(this.logicFlow, node);
+              break;
+          }
+        }
+      }
+    },
+    /**
+     * 节点绑定事件
+     */
+    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])
+      })
+    },
+    // 关闭属性抽屉
+    nodeEditClose() {
+      this.drawerShow = false
+    },
+    // 打开属性抽屉
+    nodeEditOpen(data) {
+      this.clickNode = data
+      this.drawerShow = true
+    },
+
   },
 }
 </script>
@@ -235,7 +410,7 @@ export default {
     z-index: 88;
   }
   :deep(.lf-menu) {
-    width: 80px;
+    width: 85px;
     border-radius: var(--el-popover-border-radius);
     padding: var(--el-popover-padding);
     z-index: var(--el-index-popper);
@@ -270,4 +445,64 @@ export default {
     }
   }
 }
+// 开始节点样式
+: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;
+}
+// 自定义节点样式
+: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;
+  }
+}
 </style>

package/dist/components/lwFlow/nodeEdit/basicSettings.vue

@@ -0,0 +1,100 @@
+<template>
+  <lw-form ref="dataFormRef"
+           :config="config"
+           v-model="dataForm">
+
+    <!-- 定时器 表单部分 -->
+    <template #dateCron>
+      <lwCronSelect v-model="dataForm.cron" />
+    </template>
+    <span></span>
+  </lw-form>
+</template>
+
+<script>
+import nodeDatas from '../nodesData/index.js'
+export default {
+  name: 'basicSettings',
+  data() {
+    return {
+      dataForm: {}
+    }
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    lf: {
+      type: Object,
+      default: () => { }
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        this.dataForm = val
+      },
+      deep: true
+    },
+    dataForm: {
+      handler(val) {
+        this.$emit('update:modelValue', val)
+      },
+      deep: true
+    }
+  },
+  computed: {
+    config() {
+      let config = {
+        labelWidth: '70px',
+        labelPosition: 'top',
+        formItems: [
+          {
+            label: '节点名称',
+            name: 'name',
+            value: '',
+            component: 'input',
+            options: {
+              placeholder: '请输入节点名称',
+            },
+            span: 24
+          }
+        ]
+      }
+
+      // 拿到对应节点的表单配置
+      let nodeConfig = nodeDatas[this.type]?.formConfig || {}
+      if (nodeConfig?.labelWidth) {
+        config.labelWidth = nodeConfig.labelWidth
+      }
+      if (nodeConfig?.labelPosition) {
+        config.labelPosition = nodeConfig.labelPosition
+      }
+      if (nodeConfig?.formItems) {
+        config.formItems = nodeConfig.formItems
+      }
+
+      return config
+    }
+  },
+  methods: {
+    changeFontWeight() {
+      this.dataForm.fontWeight = this.dataForm.fontWeight === 'bold' ? 'normal' : 'bold'
+    },
+    changeTextDecoration() {
+      this.dataForm.textDecoration = this.dataForm.textDecoration === 'underline' ? 'none' : 'underline'
+    },
+    changeFontStyle() {
+      this.dataForm.fontStyle = this.dataForm.fontStyle === 'italic' ? 'normal' : 'italic'
+    },
+  }
+}
+
+</script>