lw-cdp-ui 1.1.21 → 1.1.24

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

@@ -1,21 +1,4 @@
 export default [
-	{
-		title: '基础流程',
-		list: [
-			{
-				name: '开始',
-				icon: 'icon-next',
-				type: 'start',
-				themeColor: '#39bcc5'
-			},
-			{
-				name: '结束',
-				icon: 'icon-cease',
-				type: 'end',
-				themeColor: '#f53f3f'
-			}
-		]
-	},
 	{
 		title: 'ET2L节点',
 		list: [
@@ -74,5 +57,179 @@ export default [
 				themeColor: '#EF5612'
 			}
 		]
+	},
+	{
+		title: '营销目标',
+		list: [
+			{
+				name: '接收事件',
+				icon: 'icon-event',
+				type: 'event_receive',
+				themeColor: '#39BCC5'
+			},
+			{
+				name: '人群包',
+				icon: 'icon-user-info',
+				type: 'audience_receive',
+				themeColor: '#39BCC5'
+			}
+		]
+	},
+	{
+		title: '营销触达',
+		list: [
+			{
+				name: '短信',
+				icon: 'icon-auto-reply',
+				type: 'event_receive',
+				themeColor: '#4594f3'
+			},
+			{
+				name: '微信',
+				icon: 'icon-scrm-l',
+				type: 'wechat',
+				themeColor: '#4594f3'
+			},
+			{
+				name: '邮件',
+				icon: 'icon-mail-l',
+				type: 'email',
+				themeColor: '#4594f3'
+			},
+			{
+				name: '权益',
+				icon: 'icon-license',
+				type: 'benefit',
+				themeColor: '#4594f3'
+			},
+			{
+				name: '积分',
+				icon: 'icon-coin',
+				type: 'benefit',
+				themeColor: '#4594f3'
+			},
+			{
+				name: '优惠券',
+				icon: 'icon--coupon-2',
+				type: 'coupon',
+				themeColor: '#4594f3'
+			}
+		]
+	},
+	{
+		title: '营销功能',
+		list: [
+			{
+				name: '客户标签',
+				icon: 'icon-tag',
+				type: 'tag',
+				themeColor: '#39BCC5'
+			},
+			{
+				name: 'Flow',
+				icon: 'icon-event',
+				type: 'flow',
+				themeColor: '#e8ffea'
+			},
+			{
+				name: '扩展数据',
+				icon: 'icon-event',
+				type: 'extend_data',
+				themeColor: '#ff6d69'
+			},
+			{
+				name: '定制功能',
+				icon: 'icon-flow-stop',
+				type: 'customization',
+				themeColor: '#ff6d69'
+			}
+		]
+	},
+	{
+		title: 'Flow',
+		list: [
+			{
+				name: 'flow测试',
+				icon: 'icon-event',
+				type: 'tag',
+				themeColor: '#39BCC5'
+			}
+		]
+	},
+	{
+		title: '逻辑操作',
+		list: [
+			{
+				name: '交集',
+				icon: 'icon-cross',
+				type: 'intersect',
+				themeColor: '#fba980'
+			},
+			{
+				name: '并集',
+				icon: 'icon-merge',
+				type: 'union',
+				themeColor: '#fba980'
+			},
+			{
+				name: '差集',
+				icon: 'icon-chaji',
+				type: 'exclusion',
+				themeColor: '#fba980'
+			},
+			{
+				name: '过滤',
+				icon: 'icon-ma-filter',
+				type: 'filter',
+				themeColor: '#fba980'
+			},
+			{
+				name: '去重',
+				icon: 'icon-quzhong',
+				type: 'unique',
+				themeColor: '#fba980'
+			},
+			{
+				name: 'A/B测试',
+				icon: 'icon-ABtestshezhi',
+				type: 'abtest',
+				themeColor: '#fba980'
+			},
+			{
+				name: '排序',
+				icon: 'icon-sort-fill',
+				type: 'sort',
+				themeColor: '#fba980'
+			}
+		]
+	},
+	{
+		title: '流程控制',
+		list: [
+			{
+				name: '开始',
+				icon: 'icon-start',
+				type: 'start',
+				themeColor: '#39BCC5'
+			},
+			{
+				name: '定时',
+				icon: 'icon-timing',
+				type: 'timer',
+				themeColor: '#105a63'
+			},
+			{
+				name: '限流',
+				icon: 'icon-timing',
+				type: 'restrict',
+				themeColor: '#105a63'
+			},
+			{
+				name: '结束',
+				icon: 'icon-flow-stop',
+				type: 'end',
+				themeColor: '#ff6d69'
+			}
+		]
 	}
 ]

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

@@ -2,6 +2,7 @@
   <el-drawer v-model="isShow"
              title="节点编辑"
              direction="rtl"
+             :append-to-body="true"
              :before-close="close">
     <div class="drawer-form">
       <el-collapse v-model="activeName"
@@ -36,7 +37,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: '目标节点只允许一个上级连接',
@@ -68,6 +68,17 @@ export default {
 				},
 				span: 24
 			},
+			{
+				label: '输出名称',
+				name: 'into',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入输出名称'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
 			{
 				label: '描述信息',
 				name: 'desp',

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 EXPAND 配置数据
+ * ET2L数据折叠节点 EXPAND 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [
 		{
 			message: '目标节点只允许一个上级连接',
@@ -48,25 +48,26 @@ 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',
+				label: '输出名称',
+				name: 'into',
 				value: '',
 				component: 'input',
 				options: {
-					placeholder: '请输入 例如：batchId, updateTime DESC'
+					placeholder: '请输入输出名称'
 				},
-				span: 24
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
 			},
 			{
 				label: '描述信息',

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

@@ -1,11 +1,11 @@
 /**
- * ET2L节点 FILTER 配置数据
+ * ET2L数据过滤节点 FILTER 配置数据
  */
 
 export default {
 	// 暂无显示需求
 	nodeHtml: [],
-	// 节点校验
+	// 目标节点校验
 	targetRules: [
 		{
 			message: '目标节点只允许一个上级连接',
@@ -47,6 +47,17 @@ export default {
 				span: 24,
 				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
 			},
+			{
+				label: '输出名称',
+				name: 'into',
+				value: '',
+				component: 'input',
+				options: {
+					placeholder: '请输入输出名称'
+				},
+				span: 24,
+				rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
+			},
 			{
 				label: '过滤条件',
 				name: 'when',