lw-cdp-ui 1.1.18 → 1.1.20

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

@@ -1,6 +1,7 @@
 <template>
   <div class="node-panel">
-    <el-collapse accordion>
+    <el-collapse v-model="activeNames"
+                 accordion>
       <el-collapse-item v-for="item in nodeList"
                         :title="item.title"
                         :name="item.title">
@@ -21,6 +22,7 @@
   </div>
 </template>
 <script>
+
 /**
  * 节点面板
  */
@@ -30,6 +32,14 @@ export default {
     lf: Object,
     nodeList: Array,
   },
+  data() {
+    return {
+      activeNames: ''
+    }
+  },
+  mounted(){
+    this.activeNames = this.nodeList[0].title; 
+  },
   methods: {
     dragNode(item) {
       this.$props.lf.dnd.startDrag({

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

@@ -0,0 +1,78 @@
+export default [
+	{
+		title: '基础流程',
+		list: [
+			{
+				name: '开始',
+				icon: 'icon-next',
+				type: 'start',
+				themeColor: '#39bcc5'
+			},
+			{
+				name: '结束',
+				icon: 'icon-cease',
+				type: 'end',
+				themeColor: '#f53f3f'
+			}
+		]
+	},
+	{
+		title: 'ET2L节点',
+		list: [
+			{
+				name: 'SOURCE',
+				icon: 'icon-table',
+				type: 'source',
+				themeColor: '#00B050'
+			},
+			{
+				name: 'MAPPER',
+				icon: 'icon-change-type',
+				type: 'mapper',
+				themeColor: '#56C4C3'
+			},
+			{
+				name: 'JOINER',
+				icon: 'icon-app-cdp',
+				type: 'joiner',
+				themeColor: '#7030A0'
+			},
+			{
+				name: 'TARGET',
+				icon: 'icon-table',
+				type: 'target',
+				themeColor: '#0070C0'
+			},
+			{
+				name: 'FILTER',
+				icon: 'icon-ma-filter',
+				type: 'filter',
+				themeColor: '#C7161E'
+			},
+			{
+				name: 'COLAP',
+				icon: 'icon-ma-branch',
+				type: 'collap',
+				themeColor: '#013E75'
+			},
+			{
+				name: 'EXPAND',
+				icon: 'icon-chaji',
+				type: 'expand',
+				themeColor: '#156858'
+			},
+			// {
+			// 	name: 'KEY_BY',
+			// 	icon: 'icon-flow-l',
+			// 	type: 'key_by',
+			// 	themeColor: '#FFC000'
+			// },
+			{
+				name: 'REDUCE',
+				icon: 'icon-reload',
+				type: 'reduce',
+				themeColor: '#EF5612'
+			}
+		]
+	}
+]

package/dist/components/lwFlow/index.vue

@@ -3,21 +3,26 @@
     <!-- 画布 -->
     <div ref="container"
          class="logic-flow-body"></div>
+
     <!-- 工具栏 -->
     <lfControl class="logic-flow-control"
                v-if="logicFlow"
                :lf="logicFlow" />
-    <!-- 节点 -->
-    <lfNodePanel class="logic-flow-node"
-                 v-if="logicFlow"
-                 :lf="logicFlow"
-                 :nodeList="nodeList" />
 
-    <!-- 属性编辑 -->
-    <nodeEdit :lf="logicFlow"
-              :drawerShow="drawerShow"
-              :nodeData="clickNode"
-              @onClose="nodeEditClose"/>
+    <template v-if="!isView">
+      <!-- 节点 -->
+      <lfNodePanel class="logic-flow-node"
+                   v-if="logicFlow"
+                   :lf="logicFlow"
+                   :nodeList="nodeList" />
+
+      <!-- 属性编辑 -->
+      <nodeEdit v-if="drawerShow"
+                :lf="logicFlow"
+                :drawerShow="drawerShow"
+                :nodeData="clickNode"
+                @onClose="nodeEditClose" />
+    </template>
 
   </div>
 
@@ -36,10 +41,14 @@ 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'
 export default {
   components: {
     lfControl,
@@ -80,6 +89,13 @@ export default {
       type: Boolean,
       default: true
     },
+    /**
+     * 是否仅查看
+     */
+    isView: {
+      type: Boolean,
+      default: false
+    },
     /**
      * apiNodes - 接口返回的节点数组，用于与内容节点合并。
      * @type {Array<Object>}
@@ -157,8 +173,6 @@ export default {
               thickness: 0.5
             }
           },
-          edgeTextDraggable: true,
-          hoverOutline: false,
         }
       }
     }
@@ -185,25 +199,7 @@ export default {
   computed: {
     nodeList() {
       // 基础节点
-      let baseList = [
-        {
-          title: '基础流程',
-          list: [
-            {
-              name: '开始',
-              icon: 'icon-next',
-              type: 'start',
-              themeColor: "#39bcc5"
-            },
-            {
-              name: '结束',
-              icon: 'icon-flow-stop',
-              type: 'end',
-              themeColor: "#000000"
-            }
-          ]
-        }
-      ]
+      let baseList = configNodesList
 
       let list = {}
       this.apiNodes.forEach(item => {
@@ -237,6 +233,11 @@ export default {
         container: this.$refs.container,
         // 注册组件
         plugins: [Menu, MiniMap],
+        // 不可编辑
+        isSilentMode: this.isView,
+        hoverOutline: !this.isView,
+        nodeSelectedOutline: !this.isView,
+        edgeSelectedOutline: !this.isView,
         ...this.options
       })
       this.initMenu()
@@ -309,6 +310,18 @@ export default {
               _this.logicFlow.changeEdgeType(edge.id, "polyline")
             },
           },
+          {
+            text: '开启动画',
+            callback(edge) {
+              _this.logicFlow.openEdgeAnimation(edge.id)
+            },
+          },
+          {
+            text: '关闭动画',
+            callback(edge) {
+              _this.logicFlow.closeEdgeAnimation(edge.id)
+            },
+          },
         ], // 全局右键菜单
         graphMenu: [
           // {
@@ -349,6 +362,16 @@ export default {
             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;
             default:
               await nodeCustom(this.logicFlow, node);
               break;
@@ -378,6 +401,14 @@ export default {
         // 同步最后数据
         this.$emit('update:modelValue', undos[undos.length - 1])
       })
+
+      // 错误提示
+      this.logicFlow.on('connection:not-allowed', (data) => {
+        this.$message({
+          type: 'error',
+          message: data.msg
+        })
+      })
     },
     // 关闭属性抽屉
     nodeEditClose() {
@@ -469,6 +500,23 @@ export default {
   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;
+  }
+}
 // 自定义节点样式
 :deep(.lw-flow-node-custom) {
   width: 100%;

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

@@ -2,7 +2,6 @@
   <lw-form ref="dataFormRef"
            :config="config"
            v-model="dataForm">
-
     <!-- 定时器 表单部分 -->
     <template #dateCron>
       <lwCronSelect v-model="dataForm.cron" />
@@ -39,13 +38,20 @@ export default {
   watch: {
     modelValue: {
       handler(val) {
-        this.dataForm = val
+        if (val) {
+          this.dataForm = val
+        }
+
       },
+      immediate: true,
       deep: true
     },
     dataForm: {
-      handler(val) {
-        this.$emit('update:modelValue', val)
+      handler(val, old) {
+        if (Object.keys(old).length > 0) {
+          this.$emit('update:modelValue', val)
+        }
+
       },
       deep: true
     }

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

@@ -8,7 +8,7 @@
                    accordion>
         <el-collapse-item title="基础信息"
                           name="basicInfo">
-          <basicSettings v-model="dataForm.properties.data"
+          <basicSettings ref="basicSettingsRef" v-model="dataForm.properties.data"
                          :type="nodeData.type"
                          :lf="lf" />
         </el-collapse-item>
@@ -74,7 +74,8 @@ export default {
     }
   },
   methods: {
-    onSubmit() {
+    async onSubmit() {
+      await this.$refs.basicSettingsRef.$refs.dataFormRef.validate();
       const { id } = this.dataForm
       this.lf.setProperties(id, {
         ...this.dataForm.properties

package/dist/components/lwFlow/nodes/basisEnd.js

@@ -38,6 +38,15 @@ export default function registerStart(lf) {
 				this.height = 40
 				this.text.editable = false
 			}
+			getConnectedSourceRules() {
+				const rules = super.getConnectedSourceRules()
+				const notAsTarget = {
+					message: '终止节点不能作为连线的起点',
+					validate: () => false
+				}
+				rules.push(notAsTarget)
+				return rules
+			}
 		}
 		return {
 			view: HtmlNodeView,

package/dist/components/lwFlow/nodes/basisStart.js

@@ -38,6 +38,15 @@ export default function registerStart(lf) {
 				this.height = 40
 				this.text.editable = false
 			}
+			getConnectedTargetRules() {
+				const rules = super.getConnectedTargetRules()
+				const notAsTarget = {
+					message: '起始节点不能作为连线的终点',
+					validate: () => false
+				}
+				rules.push(notAsTarget)
+				return rules
+			}
 		}
 		return {
 			view: HtmlNodeView,

package/dist/components/lwFlow/nodes/et2lTable.js

@@ -0,0 +1,132 @@
+/**
+ * @description ET2L节点节点初始化
+ */
+import dayjs from 'dayjs'
+import nodeDatas from '../nodesData/index.js'
+export default function registerEt2l(lf, node) {
+	// 是否显示
+	function hideHandle(item, data) {
+		if (Object.keys(data).length == 0) return false
+		if (typeof item.hideHandle === 'string') {
+			const exp = eval(item.hideHandle.replace(/\$/g, 'data'))
+			return exp
+		} else if (typeof item.hideHandle === 'boolean') {
+			return item.hideHandle
+		}
+		return false
+	}
+	/**
+	 * 解析模板字符串，将其中的占位符替换为对应的数据值。
+	 * 占位符格式为 ${key}，其中 key 可以是嵌套的对象属性。
+	 * 如果数据中存在对应的值，则替换占位符；否则保留原占位符。
+	 * @param {string} template - 待解析的模板字符串
+	 * @param {object} data - 包含替换数据的对象
+	 * @returns {string} 解析后的字符串
+	 */
+	function parseTemplateString(data) {
+		let html = ''
+		nodeDatas[node.type].nodeHtml.forEach((item) => {
+			let value = item.value?.split('.').reduce((acc, part) => acc && acc[part], data)
+			// 日期
+			if (item?.component == 'date') {
+				if (Array.isArray(value)) {
+					value = `${dayjs(value[0]).format(item['value-format'] || 'YYYY-MM-DD HH:mm:ss')}到${dayjs(value[1]).format(item['value-format'] || 'YYYY-MM-DD HH:mm:ss')}`
+				} else {
+					value = dayjs(value).format(item['value-format'] || 'YYYY-MM-DD HH:mm:ss')
+				}
+			}
+			// 转换
+			if (item?.items) {
+				let x = item.items.find((x) => {
+					return x.value == value
+				})
+				value = x?.label
+			}
+			if (item.hideHandle) {
+				if (!hideHandle(item, data)) {
+					html += `<span>${item.label}: ${value || '--'}</span>`
+				}
+			} else {
+				html += `<span>${item.label}: ${value || '--'}</span>`
+			}
+		})
+		return html
+	}
+
+	lf.register(node.type, ({ HtmlNode, HtmlNodeModel, h }) => {
+		class HtmlNodeView extends HtmlNode {
+			setHtml(rootEl) {
+				const { properties, text } = this.props.model
+				const el = document.createElement('div')
+				el.className = 'lw-flow-node-et2l'
+				// 设置样式
+				el.style.backgroundColor = properties?.style?.backgroundColor || node.themeColor || ''
+				el.style.borderStyle = properties?.style?.borderStyle || ''
+				el.style.borderColor = properties?.style?.borderColor || node.themeColor || ''
+				el.style.borderWidth = `${properties?.style?.borderWidth || 2}px`
+				el.style.color = properties?.style?.fontColor || '' // 使用 color 替代 font-color
+				el.style.fontSize = `${properties?.style?.fontSize || 12}px` // 默认字体大小为 12px
+				el.style.fontFamily = properties?.style?.fontFamily || 'Microsoft YaHei' // 添加默认字体
+				el.style.lineHeight = properties?.style?.lineHeight || '1'
+				el.style.fontWeight = properties?.style?.fontWeight || ''
+				el.style.justifyContent = properties?.style?.textAlign || ''
+				el.style.textDecoration = properties?.style?.textDecoration || ''
+				el.style.fontStyle = properties?.style?.fontStyle || ''
+				const html = `<i class="iconfont ${node.icon}"></i> ${properties?.data?.name || node.name}`
+
+				// 暂无显示需求
+				// if (properties?.data.mode) {
+				// 	html += `<div class="details-body">
+				//               <i class="iconfont icon-ziliao"></i>
+				//               <div class="p-list">11111111111111${parseTemplateString({ ...properties.data })}</div>
+				//           </div>`
+				// }
+
+				el.innerHTML = html
+				rootEl.innerHTML = ''
+				rootEl.appendChild(el)
+				window.stop = (ev) => {
+					ev.stopPropagation()
+				}
+				window.setData = () => {
+					const { graphModel, model } = this.props
+					graphModel.eventCenter.emit('custom:button-click', model)
+				}
+			}
+		}
+		class HtmlNodeModelAttributes extends HtmlNodeModel {
+			setAttributes() {
+				this.width = 120
+				this.height = 40
+				this.text.editable = false
+			}
+			initNodeData(data) {
+				super.initNodeData(data)
+
+				// const circleOnlyAsTarget = {
+				// 	message: '目标节点只允许一个上级连接',
+				// 	validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
+				// 		let { edges } = targetNode.graphModel
+				// 		let { id } = targetNode
+				// 		let number = [...edges].filter((item) => {
+				// 			let { targetNodeId } = { ...item }
+				// 			return targetNodeId == id
+				// 		})
+				// 		console.log(number)
+				// 		return number.length < 1
+				// 	}
+				// }
+				// this.targetRules.push(circleOnlyAsTarget)
+
+				// 目标节点校验
+				nodeDatas[node.type]?.targetRules?.forEach((item) => {
+					this.targetRules.push(item)
+				})
+			}
+		}
+		return {
+			view: HtmlNodeView,
+			model: HtmlNodeModelAttributes
+		}
+	})
+}

package/dist/components/lwFlow/nodesData/datas/collap.js

@@ -0,0 +1,84 @@
+/**
+ * ET2L节点 COLAP 配置数据
+ */
+
+export default {
+	// 暂无显示需求
+	nodeHtml: [],
+	// 节点校验
+	targetRules: [
+		{
+			message: '目标节点只允许一个上级连接',
+			validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
+				let { edges } = targetNode.graphModel
+				let { id } = targetNode
+				let number = [...edges].filter((item) => {
+					let { targetNodeId } = { ...item }
+					return targetNodeId == id
+				})
+				return number.length < 1
+			}
+		}
+	],
+	// 表单内容
+	formConfig: {
+		labelWidth: '70px',
+		labelPosition: 'top',
+		formItems: [
+			{
+				label: '节点名称',
+				name: 'name',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入节点名称'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '来源名称',
+				name: 'from',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入数据表名'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '折叠字段',
+				name: 'with',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入折叠字段名称'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '折叠排序方式',
+				name: 'sort',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入 例如：batchId, updateTime DESC'
+				},
+				span: 24
+			},
+			{
+				label: '描述信息',
+				name: 'desp',
+				value: '',
+				component: 'input',
+				options: {
+					type: 'textarea',
+					placeholder: '请输入'
+				},
+				span: 24
+			}
+		]
+	}
+}

package/dist/components/lwFlow/nodesData/datas/expand.js

@@ -0,0 +1,84 @@
+/**
+ * ET2L节点 EXPAND 配置数据
+ */
+
+export default {
+	// 暂无显示需求
+	nodeHtml: [],
+	// 节点校验
+	targetRules: [
+		{
+			message: '目标节点只允许一个上级连接',
+			validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
+				let { edges } = targetNode.graphModel
+				let { id } = targetNode
+				let number = [...edges].filter((item) => {
+					let { targetNodeId } = { ...item }
+					return targetNodeId == id
+				})
+				return number.length < 1
+			}
+		}
+	],
+	// 表单内容
+	formConfig: {
+		labelWidth: '70px',
+		labelPosition: 'top',
+		formItems: [
+			{
+				label: '节点名称',
+				name: 'name',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入节点名称'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '来源名称',
+				name: 'from',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入数据表名'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '折叠字段',
+				name: 'with',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入折叠字段名称'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '折叠排序方式',
+				name: 'sort',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入 例如：batchId, updateTime DESC'
+				},
+				span: 24
+			},
+			{
+				label: '描述信息',
+				name: 'desp',
+				value: '',
+				component: 'input',
+				options: {
+					type: 'textarea',
+					placeholder: '请输入'
+				},
+				span: 24
+			}
+		]
+	}
+}