lw-cdp-ui 1.1.70 → 1.2.1

package/dist/components/lwCronSelect/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-input v-model="showInput"
+            placeholder="CRON">
+
+    <template #append>
+      <el-popover placement="top"
+                  :width="380"
+                  :visible="visible"
+                  trigger="click">
+        <template #reference>
+          <el-button @click="visible = true">选择</el-button>
+        </template>
+        <div class="select-model">
+          <el-select v-model="setData.curType"
+                     placeholder="选择类型"
+                     @change="changeInt"
+                     style="margin-right: 5px;min-width: 80px;width: 80px">
+            <el-option label="每天"
+                       :value="3" />
+            <el-option label="每月"
+                       :value="4" />
+            <el-option label="每周"
+                       :value="5" />
+          </el-select>
+
+          <el-select v-if="setData.curType === 4"
+                     v-model="setData.day"
+                     multiple
+                     allow-clear
+                     placeholder="日期"
+                     @change="changeDay"
+                     :max-tag-count="1"
+                     style="margin-right: 5px; min-width: 120px">
+            <el-option label="最后一天"
+                       value="L" />
+            <el-option v-for="item in 31"
+                       :key="item"
+                       :label="item"
+                       :value="item"
+                       :disabled="setData.day.indexOf('L') !== -1" />
+          </el-select>
+
+          <el-select v-if="setData.curType === 5"
+                     v-model="setData.weeks"
+                     multiple
+                     allow-clear
+                     placeholder="星期"
+                     @change="changeWeeks"
+                     :max-tag-count="1"
+                     style="margin-right: 5px; min-width: 120px">
+            <el-option label="周日"
+                       value="1"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周一"
+                       value="2"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周二"
+                       value="3"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周三"
+                       value="4"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周四"
+                       value="5"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周五"
+                       value="6"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周六"
+                       value="7"
+                       :disabled="setData.weeks.indexOf('?') !== -1" />
+          </el-select>
+
+          <el-time-picker v-model="setData.timeData"
+                          placeholder="时分秒"
+                          value-format="HH:mm:ss"
+                          style="min-width: 100px" />
+
+        </div>
+        <div style="margin-top: 10px; text-align: right;">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary"
+                     @click="changeOk">确定</el-button>
+        </div>
+      </el-popover>
+    </template>
+  </el-input>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+
+export default {
+  name: 'lwCronSelect',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { emit }) {
+    // 解析传入的modelValue，生成内部使用的dataList
+    const dataList = computed(() => {
+      return props.modelValue ? props.modelValue.split(' ') : ['*', '*', '*', '*', '*', '?']
+    })
+    // 初始化显示的输入值
+    const showInput = ref(props.modelValue)
+    // 控制弹出框的显示与隐藏
+    const visible = ref(false)
+
+    /**
+     * 根据选择的类型重置相关数据
+     * @param {number} val - 选择的类型值
+     */
+    const changeInt = (val) => {
+      switch (val) {
+        case 3:
+          dataList.value[3] = '*'
+          dataList.value[4] = '*'
+          dataList.value[5] = '*'
+          break
+        case 4:
+          dataList.value[4] = '*'
+          dataList.value[5] = '*'
+          break
+        case 5:
+          dataList.value[5] = '?'
+          break
+      }
+      setData.value.day = []
+      setData.value.weeks = []
+      setData.value.month = []
+      setData.value.timeData = ''
+    }
+
+    // 初始化setData对象，用于内部数据管理
+    const setData = ref({
+      curType: dataList.value[4] !== '*' ? 4 : dataList.value[5] === '?' ? 3 : 5,
+      day: dataList.value[3] === '*' ? [] : dataList.value[3]?.split(','),
+      month: dataList.value[4] === '*' ? [] : dataList.value[4]?.split(','),
+      weeks: dataList.value[5] === '?' ? [] : dataList.value[5]?.split(','),
+      timeData: dataList.value[0] === '*' ? '' : `${dataList.value[2]}:${dataList.value[1]}:${dataList.value[0]}`
+    })
+
+    /**
+     * 处理日期选择
+     * @param {string} val - 选择的日期值
+     */
+    const changeDay = (val) => {
+      if (val.indexOf('L') !== -1) {
+        setData.value.day = ['L']
+      }
+    }
+
+    /**
+     * 处理周选择
+     * @param {string} val - 选择的周值
+     */
+    const changeWeeks = (val) => {
+      if (val.indexOf('?') !== -1) {
+        setData.value.weeks = ['?']
+      }
+    }
+
+    /**
+     * 更新cron表达式
+     */
+    const changeCron = () => {
+      emit('update:modelValue', showInput.value)
+      emit('change')
+    }
+
+    /**
+     * 确定选择，生成最终的cron表达式
+     */
+    const changeOk = () => {
+      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()
+      dataList.value[2] = time[0] === "*" ? time[0] : parseInt(time[0], 10).toString()
+
+      dataList.value[3] = setData.value.day.length > 0 ? setData.value.day.toString() : '*'
+      dataList.value[4] = setData.value.month.length > 0 ? setData.value.month.toString() : '*'
+      dataList.value[5] = setData.value.weeks.length > 0 ? setData.value.weeks.toString() : '?'
+
+      if (dataList.value[3] === '*' && dataList.value[5] !== '?') {
+        dataList.value[3] = '?'
+      }
+
+      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
+    }
+
+    return {
+      setData,
+      showInput,
+      visible,
+      changeInt,
+      changeOk,
+      changeCron,
+      changeDay,
+      changeWeeks
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.select-model{
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <el-button-group>
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="放大"
+                  placement="bottom-end">
+        <el-button plain
+                   @click="zoomIn"
+                   icon="el-icon-zoom-in"></el-button>
+      </el-tooltip>
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="缩小"
+                  placement="bottom-end">
+        <el-button plain
+                   @click="zoomOut"
+                   icon="el-icon-zoom-out"></el-button>
+      </el-tooltip>
+
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="还原(大小&定位)"
+                  placement="bottom-end">
+        <el-button plain
+                   @click="reset"
+                   icon="el-icon-location"></el-button>
+      </el-tooltip>
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="上一步(ctrl+z)"
+                  placement="bottom-end">
+        <el-button plain
+                   @click="undo"
+                   icon="el-icon-arrow-left"
+                   :disabled="undoDisable"></el-button>
+      </el-tooltip>
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="下一步(ctrl+y)"
+                  placement="bottom-end">
+        <el-button plain
+                   @click="redo"
+                   icon="el-icon-arrow-right"
+                   :disabled="redoDisable"></el-button>
+      </el-tooltip>
+
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="缩略图(点击展开，再次点击关闭)"
+                  placement="bottom-end">
+        <el-button plain
+                   @click="showMiniMap"
+                   icon="el-icon-position"></el-button>
+      </el-tooltip>
+
+    </el-button-group>
+  </div>
+</template>
+<script>
+/**
+ * 工具栏
+ */
+export default {
+  name: 'lfControl',
+  props: {
+    lf: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data() {
+    return {
+      undoDisable: true,
+      redoDisable: true,
+      graphData: null,
+      dataVisible: false,
+    }
+  },
+  mounted() {
+    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
+      this.$data.undoDisable = !undoAble
+      this.$data.redoDisable = !redoAble
+    });
+  },
+  methods: {
+    zoomIn() {
+      this.$props.lf.zoom(true);
+    },
+    zoomOut() {
+      this.$props.lf.zoom(false);
+    },
+    zoomReset() {
+      this.$props.lf.resetZoom();
+    },
+    translateRest() {
+      this.$props.lf.resetTranslate();
+    },
+    reset() {
+      this.$props.lf.resetZoom();
+      this.$props.lf.resetTranslate();
+      this.$props.lf.translateCenter()
+    },
+    undo() {
+      this.$props.lf.undo();
+    },
+    redo() {
+      this.$props.lf.redo();
+    },
+    download() {
+      this.$props.lf.getSnapshot();
+    },
+    catData() {
+      this.$emit('catData');
+    },
+    showMiniMap() {
+      const { lf } = this.$props;
+      if (lf.extension.miniMap.isShow) {
+        lf.extension.miniMap.hide()
+      } else {
+        lf.extension.miniMap.show(lf.graphModel.width - 178, 50)
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="node-panel">
+    <el-collapse v-model="activeNames"
+                 accordion>
+      <el-collapse-item v-for="item in nodeList"
+                        :title="item.title"
+                        :name="item.title">
+        <div class="node-list">
+          <div class="node-item"
+               v-for="item in item.list"
+               :class="[item.type]"
+               :key="item.name"
+               @mousedown="dragNode(item)">
+            <i class="iconfont"
+               :style="{color: item.themeColor}"
+               :class="[item.icon]"></i>
+            <span class="node-label">{{item.name}}</span>
+          </div>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script>
+
+/**
+ * 节点面板
+ */
+export default {
+  name: 'lfNodePanel',
+  props: {
+    lf: Object,
+    nodeList: Array,
+  },
+  data() {
+    return {
+      activeNames: ''
+    }
+  },
+  mounted(){
+    this.activeNames = this.nodeList[0].title; 
+  },
+  methods: {
+    dragNode(item) {
+      this.$props.lf.dnd.startDrag({
+        type: item.type,
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.node-panel {
+  position: absolute;
+  width: 200px;
+  left: 10px;
+  top: 10px;
+  border-radius: var(--el-popover-border-radius);
+  box-shadow: var(--el-box-shadow-light);
+  border: 1px solid var(--el-border-color-light);
+  padding: var(--el-popover-padding);
+  background-color: rgba($color: #ffffff, $alpha: 0.6);
+  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
+  border-radius: 6px;
+  text-align: center;
+  z-index: 101;
+  :deep(.el-collapse) {
+    background-color: rgba($color: #ffffff, $alpha: 0.6);
+  }
+}
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+  font-weight: bold;
+}
+.node-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  max-height: 400px;
+  overflow: auto;
+  .node-item {
+    cursor: pointer;
+    width: 100%;
+    padding: 6px 10px;
+    border-radius: var(--el-popover-border-radius);
+    color: var(--el-text-color-regular);
+    line-height: 20px;
+    font-size: var(--el-popover-font-size);
+    overflow-wrap: break-word;
+    box-sizing: border-box;
+    background: var(--el-bg-color-overlay);
+    border: 1px solid var(--el-border-color-light);
+    display: flex;
+    gap: 5px;
+  }
+}
+</style>

package/dist/components/lwFlow/config/dagre.js

@@ -0,0 +1,246 @@
+import dagre from 'dagre';
+import  { graphlib } from 'dagre'
+window.graphlib  = graphlib
+export default class Dagre {
+  static pluginName = 'dagre';
+  lf;
+  option;
+
+  render(lf) {
+    this.lf = lf;
+  }
+
+  getBytesLength(word) {
+    if (!word) {
+      return 0;
+    }
+    let totalLength = 0;
+    for (let i = 0; i < word.length; i++) {
+      const c = word.charCodeAt(i);
+      if (word.match(/[A-Z]/)) {
+        totalLength += 1.5;
+      } else if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
+        totalLength += 1;
+      } else {
+        totalLength += 2;
+      }
+    }
+    return totalLength;
+  }
+
+  layout(option = {}) {
+    const { nodes, edges, gridSize } = this.lf.graphModel;
+
+    let nodesep = 40;
+    let ranksep = 40;
+    if (gridSize > 20) {
+      nodesep = gridSize * 2;
+      ranksep = gridSize * 2;
+    }
+
+    this.option = {
+      type: 'dagre',
+      rankdir: 'LR',
+      align: 'DR',
+      nodesep,
+      ranksep,
+      begin: [120, 120],
+      ...option,
+    };
+
+    const layoutInstance = new DagreLayout(this.option);
+    const layoutData = layoutInstance.layout({
+      nodes: nodes.map((node) => ({
+        id: node.id,
+        size: {
+          width: node.width,
+          height: node.height,
+        },
+        model: node,
+      })),
+      edges: edges.map((edge) => ({
+        source: edge.sourceNodeId,
+        target: edge.targetNodeId,
+        model: edge,
+      })),
+    });
+
+    const newGraphData = {
+      nodes: [],
+      edges: [],
+    };
+
+    layoutData?.nodes.forEach(node => {
+      const { model } = node;
+      const data = model.getData();
+      data.x = node.x;
+      data.y = node.y;
+      newGraphData.nodes.push(data);
+    });
+
+    layoutData?.edges.forEach(edge => {
+      const { model } = edge;
+      const data = model.getData();
+      data.pointsList = this.calcPointsList(model, newGraphData.nodes);
+      if (data.pointsList) {
+        const first = data.pointsList[0];
+        const last = data.pointsList[data.pointsList.length - 1];
+        data.startPoint = { x: first.x, y: first.y };
+        data.endPoint = { x: last.x, y: last.y };
+        if (data.text && data.text.value) {
+          data.text = {
+            x: last.x - this.getBytesLength(data.text.value) * 6 - 10,
+            y: last.y,
+            value: data.text.value,
+          };
+        }
+      } else {
+        data.startPoint = undefined;
+        data.endPoint = undefined;
+        if (data.text && data.text.value) {
+          data.text = data.text.value;
+        }
+      }
+      newGraphData.edges.push(data);
+    });
+
+    this.lf.render(newGraphData);
+  }
+
+  pointFilter(points) {
+    const allPoints = points;
+    let i = 1;
+    while (i < allPoints.length - 1) {
+      const pre = allPoints[i - 1];
+      const current = allPoints[i];
+      const next = allPoints[i + 1];
+      if ((pre.x === current.x && current.x === next.x)
+        || (pre.y === current.y && current.y === next.y)) {
+        allPoints.splice(i, 1);
+      } else {
+        i++;
+      }
+    }
+    return allPoints;
+  }
+
+  calcPointsList(model, nodes) {
+    const pointsList = [];
+    if (this.option.rankdir === 'LR' && model.modelType === 'polyline-edge') {
+      const sourceNodeModel = this.lf.getNodeModelById(model.sourceNodeId);
+      const targetNodeModel = this.lf.getNodeModelById(model.targetNodeId);
+      const newSourceNodeData = nodes.find(node => node.id === model.sourceNodeId);
+      const newTargetNodeData = nodes.find(node => node.id === model.targetNodeId);
+      if (newSourceNodeData.x < newTargetNodeData.x) {
+        pointsList.push({
+          x: newSourceNodeData.x + sourceNodeModel.width / 2,
+          y: newSourceNodeData.y,
+        });
+        pointsList.push({
+          x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
+          y: newSourceNodeData.y,
+        });
+        pointsList.push({
+          x: newSourceNodeData.x + sourceNodeModel.width / 2 + (model.offset || 50),
+          y: newTargetNodeData.y,
+        });
+        pointsList.push({
+          x: newTargetNodeData.x - targetNodeModel.width / 2,
+          y: newTargetNodeData.y,
+        });
+        return this.pointFilter(pointsList);
+      }
+      if (newSourceNodeData.x > newTargetNodeData.x) {
+        if (newSourceNodeData.y >= newTargetNodeData.y) {
+          pointsList.push({
+            x: newSourceNodeData.x,
+            y: newSourceNodeData.y + sourceNodeModel.height / 2,
+          });
+          pointsList.push({
+            x: newSourceNodeData.x,
+            y: newSourceNodeData.y + sourceNodeModel.height / 2 + (model.offset || 50),
+          });
+          pointsList.push({
+            x: newTargetNodeData.x,
+            y: newSourceNodeData.y + sourceNodeModel.height / 2 + (model.offset || 50),
+          });
+          pointsList.push({
+            x: newTargetNodeData.x,
+            y: newTargetNodeData.y + targetNodeModel.height / 2,
+          });
+        } else {
+          pointsList.push({
+            x: newSourceNodeData.x,
+            y: newSourceNodeData.y - sourceNodeModel.height / 2,
+          });
+          pointsList.push({
+            x: newSourceNodeData.x,
+            y: newSourceNodeData.y - sourceNodeModel.height / 2 - (model.offset || 50),
+          });
+          pointsList.push({
+            x: newTargetNodeData.x,
+            y: newSourceNodeData.y - sourceNodeModel.height / 2 - (model.offset || 50),
+          });
+          pointsList.push({
+            x: newTargetNodeData.x,
+            y: newTargetNodeData.y - targetNodeModel.height / 2,
+          });
+        }
+        return this.pointFilter(pointsList);
+      }
+    }
+    return undefined;
+  }
+}
+
+class DagreLayout {
+  constructor(options) {
+    this.options = {
+      rankdir: 'TB',
+      align: null,
+      nodesep: 50,
+      ranksep: 50,
+      controlPoints: false,
+      ...options,
+    };
+  }
+
+  layout(data) {
+    const { nodes, edges } = data;
+    if (!nodes || nodes.length === 0) return;
+
+    const g = new dagre.graphlib.Graph({ multigraph: true });
+    g.setGraph({});
+    g.setDefaultEdgeLabel(() => ({}));
+
+    g.graph().rankdir = this.options.rankdir;
+    g.graph().align = this.options.align;
+    g.graph().nodesep = this.options.nodesep;
+    g.graph().ranksep = this.options.ranksep;
+
+    nodes.forEach((node) => {
+      g.setNode(node.id, { width: node.width || 50, height: node.height || 50 });
+    });
+
+    edges.forEach((edge) => {
+      g.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(g);
+
+    nodes.forEach((node) => {
+      const coord = g.node(node.id);
+      node.x = coord.x;
+      node.y = coord.y;
+    });
+
+    if (this.options.controlPoints) {
+      edges.forEach((edge) => {
+        const edgeData = g.edge(edge.source, edge.target);
+        edge.controlPoints = edgeData.points;
+      });
+    }
+
+    return { nodes, edges };
+  }
+}