lw-cdp-ui 1.1.21 → 1.1.23

package/dist/components/lwFlow/index.vue

@@ -25,7 +25,6 @@
     </template>
 
   </div>
-
 </template>
 
 <script>
@@ -49,6 +48,7 @@ import nodeEdit from './nodeEdit/index.vue'
 
 // 参数配置
 import configNodesList from './config/nodesList'
+import nodeDatas from './nodesData/index.js'
 export default {
   components: {
     lfControl,
@@ -96,6 +96,13 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * 需要展示的节点分组 不传默认展示所有内置节点
+     */
+    showNodeGroup: {
+      type: Array,
+      default: []
+    },
     /**
      * apiNodes - 接口返回的节点数组，用于与内容节点合并。
      * @type {Array<Object>}
@@ -217,6 +224,13 @@ export default {
       } else {
         baseList = Object.values(list)
       }
+
+      if (this.showNodeGroup.length > 0) {
+        baseList = baseList.filter(item => {
+          return this.showNodeGroup.includes(item.title)
+        })
+      }
+
       return baseList
     }
   },
@@ -323,28 +337,7 @@ export default {
             },
           },
         ], // 全局右键菜单
-        graphMenu: [
-          // {
-          //   text: '全局直线',
-          //   callback() {
-          //     // 切换边类型
-          //     _this.logicFlow.setDefaultEdgeType("line")
-          //   },
-          // },
-          // {
-          //   text: '全局曲线',
-          //   callback() {
-          //     // 切换边类型
-          //     _this.logicFlow.setDefaultEdgeType("bezier")
-          //   },
-          // },
-          // {
-          //   text: '全局折线',
-          //   callback() {
-          //     _this.logicFlow.setDefaultEdgeType("polyline")
-          //   },
-          // },
-        ]
+        graphMenu: []
       });
     },
     /**
@@ -409,6 +402,22 @@ export default {
           message: data.msg
         })
       })
+
+
+      this.changeEdge()
+    },
+    /**
+     * 改变连线时处理上下级节点数据
+     * 本扩展暂无使用 本意是直接提供接口说要的数据结构
+     * 但是存在触发限制（可能存在连线后用户有修改了数据导致关联指向数据不完整） 暂停开发
+     * 所以本组件只提供原始的流程图数据输出  结构数据开发人员自行处理
+     */
+    changeEdge() {
+      this.logicFlow.on('edge:add', ({ data: edge }) => {
+      })
+      this.logicFlow.on('edge:delete', ({ data: edge }) => {
+      })
+
     },
     // 关闭属性抽屉
     nodeEditClose() {
@@ -416,9 +425,63 @@ export default {
     },
     // 打开属性抽屉
     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') {
+              isHideHandle = eval(item.hideHandle.replace(/\$/g, "data"));
+            } else if (data && typeof item?.hideHandle === 'boolean') {
+              isHideHandle = item.hideHandle;
+            }
+
+            // 校验规则，如果不符合则记录错误
+            if (!isHideHandle && item?.rules && !value) {
+              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;
+    }
 
   },
 }
@@ -516,6 +579,12 @@ export default {
   i {
     font-size: 20px;
   }
+  .text {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 // 自定义节点样式
 :deep(.lw-flow-node-custom) {
@@ -553,4 +622,21 @@ export default {
     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>

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

@@ -2,10 +2,38 @@
   <lw-form ref="dataFormRef"
            :config="config"
            v-model="dataForm">
-    <!-- 定时器 表单部分 -->
+    <!-- 定时器 表单自定义部分 -->
     <template #dateCron>
       <lwCronSelect v-model="dataForm.cron" />
     </template>
+
+    <!-- et2l 表单自定义部分 -->
+    <template #KeyableSource>
+      <lwTableForm :config="joiner.configKeyableSource"
+                   v-model="dataForm.from" />
+    </template>
+    <template #MapAction>
+      <lwTableForm :config="joiner.configMapAction"
+                   v-model="dataForm.with">
+        <template #sourceField="{row}">
+          <el-input v-if="row.type == 'direct'"
+                    size="small"
+                    v-model="row.sourceField"
+                    placeholder="来源字段" />
+          <el-select v-else
+                     v-model="row.sourceField"
+                     multiple
+                     filterable
+                     allow-create
+                     size="small"
+                     default-first-option
+                     :reserve-keyword="false"
+                     placeholder="来源字段"
+                     style="width: 100%">
+          </el-select>
+        </template>
+      </lwTableForm>
+    </template>
     <span></span>
   </lw-form>
 </template>
@@ -16,7 +44,8 @@ export default {
   name: 'basicSettings',
   data() {
     return {
-      dataForm: {}
+      dataForm: {},
+      ...nodeDatas
     }
   },
   props: {

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

@@ -36,7 +36,6 @@
 <script>
 import basicSettings from './basicSettings.vue'
 import styleSettings from './styleSettings.vue'
-
 export default {
   name: 'drawerForm',
   components: {

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

@@ -129,7 +129,7 @@ export default {
           {
             label: '文本大小',
             name: 'fontSize',
-            value: 14,
+            value: '',
             component: 'number',
             options: {
               placeholder: '请选择',

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

@@ -72,6 +72,14 @@ export default function registerCustom(lf, node) {
 				el.style.justifyContent = properties?.style?.textAlign || ''
 				el.style.textDecoration = properties?.style?.textDecoration || ''
 				el.style.fontStyle = properties?.style?.fontStyle || ''
+
+				// 检验不通过提示
+				if (properties.error) {
+					el.classList.add('lw-flow-node-error')
+				} else {
+					el.classList.remove('lw-flow-node-error')
+				}
+
 				const html = `<div class="top-name" style="border-color: ${node.themeColor};">
         <i class="iconfont ${node.icon}"></i> ${properties?.data?.name || node.name}</div>
         <div class="bottom-content"  style="border-color: ${node.themeColor};">

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

@@ -72,7 +72,15 @@ export default function registerEt2l(lf, node) {
 				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.error) {
+					el.classList.add('lw-flow-node-error')
+				} else {
+					el.classList.remove('lw-flow-node-error')
+				}
+
+				const html = `<i class="iconfont ${node.icon}"></i> <span class="text" title="${properties?.data?.name || node.name}">${properties?.data?.name || node.name}</span>`
 
 				// 暂无显示需求
 				// if (properties?.data.mode) {
@@ -99,27 +107,9 @@ export default function registerEt2l(lf, node) {
 				this.width = 120
 				this.height = 40
 				this.text.editable = false
-
-        console.log('---------------1', 12312)
 			}
 			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)

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 COLAP 配置数据
+ * ET2L数据折叠节点 COLAP 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [
 		{
 			message: '目标节点只允许一个上级连接',

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 EXPAND 配置数据
+ * ET2L数据折叠节点 EXPAND 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [
 		{
 			message: '目标节点只允许一个上级连接',
@@ -48,26 +48,16 @@ export default {
 				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
 			},
 			{
-				label: '折叠字段',
+				label: '展开字段名称',
 				name: 'with',
 				value: '',
 				component: 'input',
 				options: {
-					placeholder: '请输入折叠字段名称'
+					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',

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 FILTER 配置数据
+ * ET2L数据过滤节点 FILTER 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [
 		{
 			message: '目标节点只允许一个上级连接',

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 JOINER 配置数据
+ * ET2L数据合并节点 JOINER 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [],
 	// 表单内容
 	formConfig: {
@@ -26,76 +26,171 @@ export default {
 			{
 				label: '连接模式',
 				name: 'mode',
-				value: 'normal',
-				component: 'select',
+				value: '',
+				component: 'input',
 				span: 24,
 				options: {
-					items: [
-						{
-							label: '标准模式',
-							value: 'normal'
-						},
-						{
-							label: '折叠模式',
-							value: 'collap'
-						},
-						{
-							label: '展开模式',
-							value: 'expand'
-						},
-						{
-							label: 'SQL模式',
-							value: 'sql'
-						}
-					]
+					placeholder: '请输入连接模式'
 				}
 			},
 			{
 				label: '数据来源',
 				name: 'from',
-				value: '',
-				component: 'input',
-				options: {
-					placeholder: '请输入来源名称'
-				},
+				value: [],
+				component: 'KeyableSource',
 				span: 24,
-				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+				rules: [{ required: true, message: '不能为空', trigger: 'change' }]
 			},
 			{
 				label: '映射动作',
 				name: 'with',
 				value: [],
-				component: 'input',
+				component: 'MapAction',
 				options: {
 					placeholder: '请选择映射动作'
 				},
-				tips: '启用自动映射时允许为空',
 				span: 24,
-				hideHandle: '$.auto',
 				rules: [{ required: true, message: '不能为空', trigger: 'change' }]
 			},
 			{
-				label: '映射动作',
+				label: '描述信息',
+				name: 'desp',
+				value: '',
+				component: 'input',
+				options: {
+					type: 'textarea',
+					placeholder: '请输入'
+				},
+				span: 24
+			}
+		]
+	},
+	// 表单自定义内容
+	configKeyableSource: {
+		treeProps: {
+			children: 'fields'
+		},
+		rowKey: 'id',
+		formItems: [
+			{
+				label: '来源名称',
+				name: 'name',
+				value: '',
+				minWidth: '80',
+				component: 'input',
+				options: {
+					placeholder: '请输入'
+				},
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '名称简写',
+				name: 'abbr',
+				value: '',
+				minWidth: '80',
+				component: 'input',
+				options: {
+					placeholder: '请输入'
+				}
+			},
+			{
+				label: '关联字段',
 				name: 'with',
-				value: [],
+				value: '',
+				minWidth: '80',
 				component: 'input',
 				options: {
-					placeholder: '请选择映射动作'
+					placeholder: '请输入'
 				},
-				tips: '启用自动映射时允许为空',
-				span: 24,
-				hideHandle: '!$.auto'
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
 			},
 			{
-				label: '描述信息',
-				name: 'desp',
+				label: '自动映射',
+				name: 'auto',
+				value: false,
+				minWidth: '75',
+				component: 'switch'
+			},
+			{
+				label: '操作',
+				component: 'operation',
+				width: '60',
+				fixed: 'right',
+				options: {
+					addDelete: [
+						{
+							icon: '',
+							type: 'delete',
+							label: '删除'
+						}
+					]
+				}
+			}
+		]
+	},
+	configMapAction: {
+		treeProps: {
+			children: 'fields'
+		},
+		rowKey: 'id',
+		formItems: [
+			{
+				label: '映射类型',
+				name: 'type',
+				value: '',
+				minWidth: '80',
+				component: 'select',
+				options: {
+					placeholder: '请选择',
+					items: [
+						{
+							label: '任意映射',
+							value: 'any_of'
+						},
+						{
+							label: '直接映射',
+							value: 'direct'
+						}
+					]
+				},
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '目标字段',
+				name: 'targetField',
 				value: '',
+				minWidth: '80',
 				component: 'input',
 				options: {
-					type: 'textarea',
 					placeholder: '请输入'
 				},
-				span: 24
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '来源字段',
+				name: 'sourceField',
+				value: '',
+				minWidth: '80',
+				component: 'sourceField',
+				options: {
+					placeholder: '请输入'
+				},
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
+			{
+				label: '操作',
+				component: 'operation',
+				width: '60',
+				fixed: 'right',
+				options: {
+					addDelete: [
+						{
+							icon: '',
+							type: 'delete',
+							label: '删除'
+						}
+					]
+				}
 			}
 		]
 	}

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 MAPPER 配置数据
+ * ET2L数据映射节点 MAPPER 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [
 		{
 			message: '目标节点只允许一个上级连接',
@@ -63,7 +63,7 @@ export default {
 				label: '映射动作',
 				name: 'with',
 				value: [],
-				component: 'input',
+				component: 'MapAction',
 				options: {
 					placeholder: '请选择映射动作'
 				},
@@ -76,7 +76,7 @@ export default {
 				label: '映射动作',
 				name: 'with',
 				value: [],
-				component: 'input',
+				component: 'MapAction',
 				options: {
 					placeholder: '请选择映射动作'
 				},

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 REDUCE 配置数据
+ * ET2L数据聚合节点 REDUCE 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [],
 	// 表单内容
 	formConfig: {
@@ -26,24 +26,21 @@ export default {
 			{
 				label: '数据来源',
 				name: 'from',
-				value: '',
-				component: 'input',
-				options: {
-					placeholder: '请输入数据表名'
-				},
+				value: [],
+				component: 'KeyableSource',
 				span: 24,
-				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+				rules: [{ required: true, message: '不能为空', trigger: 'change' }]
 			},
 			{
 				label: '映射动作',
 				name: 'with',
-				value: '',
-				component: 'input',
+				value: [],
+				component: 'MapAction',
 				options: {
-					placeholder: '请输入折叠字段名称'
+					placeholder: '请选择映射动作'
 				},
 				span: 24,
-				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+				rules: [{ required: true, message: '不能为空', trigger: 'change' }]
 			},
 			{
 				label: '描述信息',