lw-cdp-ui 1.1.25 → 1.1.27

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

@@ -62,16 +62,18 @@ export default [
 		title: '营销目标',
 		list: [
 			{
-				name: '接收事件',
+				name: '事件',
 				icon: 'icon-event',
 				type: 'event_receive',
-				themeColor: '#39BCC5'
+				themeColor: '#39bcc5',
+				background: '#f2fcfa'
 			},
 			{
 				name: '人群包',
 				icon: 'icon-user-info',
 				type: 'audience_receive',
-				themeColor: '#39BCC5'
+				themeColor: '#39BCC5',
+				background: '#f2fcfa'
 			}
 		]
 	},
@@ -81,38 +83,44 @@ export default [
 			{
 				name: '短信',
 				icon: 'icon-auto-reply',
-				type: 'event_receive',
-				themeColor: '#4594f3'
+				type: 'sms',
+				themeColor: '#4594f3',
+				background: '#f5faff'
 			},
 			{
 				name: '微信',
 				icon: 'icon-scrm-l',
 				type: 'wechat',
-				themeColor: '#4594f3'
+				themeColor: '#4594f3',
+				background: '#f5faff'
 			},
 			{
 				name: '邮件',
 				icon: 'icon-mail-l',
 				type: 'email',
-				themeColor: '#4594f3'
+				themeColor: '#4594f3',
+				background: '#f5faff'
 			},
 			{
 				name: '权益',
 				icon: 'icon-license',
 				type: 'benefit',
-				themeColor: '#4594f3'
+				themeColor: '#4594f3',
+				background: '#f5faff'
 			},
 			{
 				name: '积分',
 				icon: 'icon-coin',
 				type: 'benefit',
-				themeColor: '#4594f3'
+				themeColor: '#4594f3',
+				background: '#f5faff'
 			},
 			{
 				name: '优惠券',
 				icon: 'icon--coupon-2',
 				type: 'coupon',
-				themeColor: '#4594f3'
+				themeColor: '#4594f3',
+				background: '#f5faff'
 			}
 		]
 	},

package/dist/components/lwFlow/index.vue

@@ -365,8 +365,11 @@ export default {
             case 'reduce':
               await et2lTable(this.logicFlow, node);
               break;
+            case 'event_receive':
+              await nodeCustom(this.logicFlow, node, this.$store.state);
+              break;
             default:
-              await nodeCustom(this.logicFlow, node);
+              await nodeCustom(this.logicFlow, node, this.$store.state);
               break;
           }
         }

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

@@ -0,0 +1,262 @@
+<template>
+  <lw-form ref="dataFormRef"
+           :config="config"
+           v-model="dataForm">
+    <!-- 选择人群 -->
+    <template #audienceIdSelect>
+      <div class="form-item">
+        <el-select v-model="dataForm.audienceId"
+                   filterable
+                   @change="onChangeAudience"
+                   placeholder="请选择">
+          <el-option v-for="item in audienceIdOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value" />
+        </el-select>
+        <span v-if="!dataForm.snapshotId"
+              class="span-top">
+          预估人数
+          {{ audienceEstimate !== "" ? audienceEstimate : "--" }} 人</span>
+      </div>
+    </template>
+    <!-- 人群快照 -->
+    <template #snapshotIdSelect>
+      <div class="form-item">
+        <el-select v-model="dataForm.snapshotId"
+                   filterable
+                   @change="onChangeSnapshot"
+                   placeholder="请选择">
+          <el-option v-for="item in snapshotIdOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value" />
+        </el-select>
+        <span class="span-top"
+              v-if="!!dataForm.snapshotId">预估人数
+          {{ snapshotEstimate !== "" ? snapshotEstimate : "--" }} 人</span>
+      </div>
+    </template>
+    <!-- 触发时间 -->
+    <template #scheduleTime>
+      <div class="form-item">
+        <el-date-picker v-model="dataForm.schedule.date"
+                        type="datetime"
+                        format="YYYY-MM-DD HH:mm:ss"
+                        value-format="YYYY-MM-DDTHH:mm:ss.000ZZ"
+                        placeholder="请选择"></el-date-picker>
+        <span class="text">开始活动</span>
+      </div>
+
+    </template>
+    <template #scheduleDate>
+      <el-date-picker v-model="dataForm.startEndTime"
+                      type="daterange"
+                      format="YYYY-MM-DD"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                      value-format="YYYY-MM-DD"
+                      placeholder="请选择"
+                      @change="changeDatetimerange"
+                      style="margin-bottom: 5px;"></el-date-picker>
+      <lwCronSelect v-model="dataForm.schedule.cron" />
+    </template>
+
+    <span></span>
+  </lw-form>
+</template>
+
+<script>
+import nodeDatas from '../nodesData/index.js'
+import dayjs from 'dayjs'
+
+export default {
+  name: 'audienceReceive',
+  data() {
+    return {
+      dataForm: {
+        schedule: {}
+      },
+      ...nodeDatas,
+      audienceIdOptions: [],
+      snapshotIdOptions: [],
+      audienceEstimate: '',
+      snapshotEstimate: '',
+    }
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    lf: {
+      type: Object,
+      default: () => { }
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        if (val) {
+          this.dataForm = val
+        }
+
+      },
+      immediate: true,
+      deep: true
+    },
+    dataForm: {
+      handler(val, old) {
+        if (Object.keys(old).length > 0) {
+          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 (!this.$store.state[`lwFlow_${this.type}`]) {
+        this.$store.state[`lwFlow_${this.type}`] = {}
+      }
+      nodeConfig.formItems.forEach(async item => {
+        if (item?.options?.items) {
+          if (item.api) {
+            let items = await item.api(this.$http)
+            item.options.items = items || []
+          }
+
+          // 全局化选项内容 用于回显数据
+          if (item?.options?.name) {
+            this.$store.state[`lwFlow_${this.type}`][`${item.name}.${item.options.name}`] = item?.options?.items || ''
+          } else {
+            this.$store.state[`lwFlow_${this.type}`][item.name] = item?.options?.items || ''
+          }
+        }
+      })
+
+      if (nodeConfig?.formItems) {
+        config.formItems = nodeConfig.formItems
+      }
+
+      return config
+    }
+  },
+  methods: {
+    async getaudienceId(value) {
+      const params = { fields: 'name,usageType', expression: 'usageType ne TEST' }
+      if (value) {
+        params.expression = `AND name like ${value}`
+      }
+      let list = await this.$http.get(`/api/ma-manage/{tenantId}/{buCode}/audience/list`, params)
+
+      list = list.map((item) => ({
+        value: item.id,
+        label: `[${item.name}] ${item.id}`
+      }))
+      // 全局化选项内容 用于回显数据
+      this.$store.state[`lwFlow_audience_receive`]['audienceId'] = list
+      this.audienceIdOptions = list
+    },
+    async getSnapshotList(audienceId) {
+      let params = {}
+      if (audienceId) {
+        params = { expression: `audienceId eq ${audienceId}` }
+      }
+      let { content } = await this.$http.get(`/api/ma-manage/{tenantId}/{buCode}/audience/snapshot`, params)
+
+      let list = content.map((item) => ({
+        value: item.id,
+        num: item.num,
+        label: dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')
+      }))
+      // 全局化选项内容 用于回显数据
+      this.$store.state[`lwFlow_audience_receive`]['snapshotId'] = list
+      this.snapshotIdOptions = list
+    },
+    async onChangeAudience(value) {
+      this.getSnapshotList(value)
+      this.dataForm.snapshotId = ''
+      this.audienceEstimate = await this.$http.get(`/api/ma-manage/{tenantId}/{buCode}/audience/${value}/count-customers`)
+    },
+    async onChangeSnapshot(value) {
+      this.snapshotEstimate = this.snapshotIdOptions.find(item => item.value === value).num
+      this.dataForm.snapshotName = this.snapshotIdOptions.find(item => item.value === value).label
+    },
+    changeDatetimerange(val) {
+      if (val) {
+        [this.dataForm.schedule.startTime, this.dataForm.schedule.endTime] = val
+      } else {
+        this.dataForm.schedule.startTime = ''
+        this.dataForm.schedule.endTime = ''
+      }
+    }
+  },
+  mounted() {
+    this.getaudienceId()
+    if (this.dataForm?.audienceId) {
+      this.getSnapshotList(this.dataForm.audienceId)
+    }
+
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.form-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  .span-top {
+    position: absolute;
+    top: -15px;
+    right: 0;
+    padding: 3px 5px;
+    background-color: var(--el-color-primary);
+    color: #ffffff;
+    font-size: 10px;
+    line-height: 10px;
+  }
+  .text {
+    font-size: 12px;
+    color: #999999;
+  }
+}
+</style>

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

@@ -34,6 +34,7 @@
         </template>
       </lwTableForm>
     </template>
+
     <span></span>
   </lw-form>
 </template>
@@ -112,6 +113,27 @@ export default {
       if (nodeConfig?.labelPosition) {
         config.labelPosition = nodeConfig.labelPosition
       }
+
+      // 处理需要接口的内容
+      if (!this.$store.state[`lwFlow_${this.type}`]) {
+        this.$store.state[`lwFlow_${this.type}`] = {}
+      }
+      nodeConfig.formItems.forEach(async item => {
+        if (item?.options?.items) {
+          if (item.api) {
+            let items = await item.api(this.$http)
+            item.options.items = items || []
+          }
+
+          // 全局化选项内容 用于回显数据
+          if (item?.options?.name) {
+            this.$store.state[`lwFlow_${this.type}`][`${item.name}.${item.options.name}`] = item?.options?.items || ''
+          } else {
+            this.$store.state[`lwFlow_${this.type}`][item.name] = item?.options?.items || ''
+          }
+        }
+      })
+
       if (nodeConfig?.formItems) {
         config.formItems = nodeConfig.formItems
       }
@@ -120,15 +142,6 @@ export default {
     }
   },
   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'
-    },
   }
 }
 

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

@@ -0,0 +1,206 @@
+<template>
+  <lw-form ref="dataFormRef"
+           :config="config"
+           v-model="dataForm">
+    <!-- 选择事件 -->
+    <template #behaviorIdSelect>
+      <el-select v-model="dataForm.behaviorId"
+                 filterable
+                 @change="onChangeBehavior"
+                 placeholder="请选择">
+        <el-option v-for="item in behaviorIdOptions"
+                   :key="item.value"
+                   :label="item.label"
+                   :value="item.value" />
+      </el-select>
+    </template>
+
+    <!-- 去重 -->
+    <template #uniqueField>
+      <el-switch v-model="dataForm.unique"
+                 type="round" />
+      <el-tree-select v-if="dataForm.unique"
+                      v-model="dataForm.uniqueField"
+                      filterable
+                      default-expand-all
+                      :data="dataModelFields"
+                      :check-strictly="true"
+                      :props="{ label: 'label', value: 'path', children: 'fields' }"
+                      placeholder="请选择字段" />
+    </template>
+
+    <span></span>
+  </lw-form>
+</template>
+
+<script>
+import nodeDatas from '../nodesData/index.js'
+export default {
+  name: 'basicSettings',
+  data() {
+    return {
+      dataForm: {},
+      ...nodeDatas,
+      behaviorIdOptions: [],
+      dataModelFields: [],
+    }
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    lf: {
+      type: Object,
+      default: () => { }
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        if (val) {
+          this.dataForm = val
+        }
+
+      },
+      immediate: true,
+      deep: true
+    },
+    dataForm: {
+      handler(val, old) {
+        if (Object.keys(old).length > 0) {
+          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 (!this.$store.state[`lwFlow_${this.type}`]) {
+        this.$store.state[`lwFlow_${this.type}`] = {}
+      }
+      nodeConfig.formItems.forEach(async item => {
+        if (item?.options?.items) {
+          if (item.api) {
+            let items = await item.api(this.$http)
+            item.options.items = items || []
+          }
+
+          // 全局化选项内容 用于回显数据
+          if (item?.options?.name) {
+            this.$store.state[`lwFlow_${this.type}`][`${item.name}.${item.options.name}`] = item?.options?.items || ''
+          } else {
+            this.$store.state[`lwFlow_${this.type}`][item.name] = item?.options?.items || ''
+          }
+        }
+      })
+
+      if (nodeConfig?.formItems) {
+        config.formItems = nodeConfig.formItems
+      }
+
+      return config
+    }
+  },
+  methods: {
+    // 获取事件列表
+    async getBehaviorList() {
+      const params = { fields: "name,modelId,status" };
+      params.expression = `status in ENABLED`
+      let list = await this.$http.get(`/api/ma-manage/{tenantId}/{buCode}/behavior-event/list`, params)
+
+      list = list.map((item) => ({
+        value: item.id,
+        label: item.name,
+        ...item
+      }))
+      // 全局化选项内容 用于回显数据
+      this.$store.state[`lwFlow_event_receive`]['behaviorId'] = list
+      this.behaviorIdOptions = list
+    },
+    onChangeBehavior(value) {
+      const behavior = this.behaviorIdOptions.find(it => { return it.value === value });
+
+      if (behavior) {
+        this.dataForm.behaviorModelId = behavior.modelId;
+        this.dataForm.eventName = behavior.name;
+        this.dataForm.uniqueField = ''
+        this.findBehaviorModel(behavior.modelId);
+      }
+    },
+    async findBehaviorModel(id) {
+      let dataModel = await this.$http.get(`/api/ma-manage/{tenantId}/{buCode}/behavior-model/${id}`)
+      // 全局化选项内容 用于回显数据
+      this.$store.state[`lwFlow_event_receive`]['uniqueField'] = []
+      this.dataModelFields = this.formatFields(dataModel.fields)
+    },
+    formatFields(fields, parent) {
+      const result = [];
+      if (!Array.isArray(fields)) return result;
+      fields.forEach((item) => {
+        const field = JSON.parse(JSON.stringify(item))
+        if (parent) {
+          field.path = `${parent.path}.${item.name}`;
+        } else {
+          field.path = item.name;
+        }
+        if (item.aliasName) {
+          field.label = `「${item.aliasName}」${item.name}`;
+        } else {
+          field.label = `${item.name}`;
+        }
+
+        if (item.fields && item.fields.length > 0) {
+          field.fields = this.formatFields(item.fields, field);
+        }
+        this.$store.state[`lwFlow_event_receive`]['uniqueField'].push(field);
+        result.push(field);
+      });
+      return result;
+    }
+  },
+  mounted() {
+    this.getBehaviorList()
+    if (this.dataForm?.behaviorModelId) {
+      this.findBehaviorModel(this.dataForm.behaviorModelId);
+    }
+
+  }
+}
+
+</script>

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

@@ -9,10 +9,34 @@
                    accordion>
         <el-collapse-item title="基础信息"
                           name="basicInfo">
-          <basicSettings ref="basicSettingsRef"
-                         v-model="dataForm.properties.data"
-                         :type="nodeData.type"
-                         :lf="lf" />
+
+          <!-- 营销目标 -->
+          <template v-if="['audience_receive'].includes(nodeData.type)">
+            <audienceReceive ref="dataFormRef"
+                          v-model="dataForm.properties.data"
+                          :type="nodeData.type"
+                          :lf="lf" />
+          </template>
+          <template v-if="['event_receive'].includes(nodeData.type)">
+            <eventReceive ref="dataFormRef"
+                          v-model="dataForm.properties.data"
+                          :type="nodeData.type"
+                          :lf="lf" />
+          </template>
+          <template v-if="['sms'].includes(nodeData.type)">
+            <sms ref="dataFormRef"
+                          v-model="dataForm.properties.data"
+                          :type="nodeData.type"
+                          :lf="lf" />
+          </template>
+          <!-- 默认 -->
+          <template v-else>
+            <basicSettings ref="dataFormRef"
+                           v-model="dataForm.properties.data"
+                           :type="nodeData.type"
+                           :lf="lf" />
+          </template>
+
         </el-collapse-item>
         <el-collapse-item title="样式设置"
                           name="styleSettings">
@@ -35,11 +59,18 @@
 
 </template>
 <script>
+import audienceReceive from './audienceReceive.vue'
+import eventReceive from './eventReceive.vue'
+import sms from './sms.vue'
 import basicSettings from './basicSettings.vue'
 import styleSettings from './styleSettings.vue'
+
 export default {
   name: 'drawerForm',
   components: {
+    audienceReceive,
+    eventReceive,
+    sms,
     basicSettings,
     styleSettings
   },
@@ -77,7 +108,7 @@ export default {
   },
   methods: {
     async onSubmit() {
-      await this.$refs.basicSettingsRef.$refs.dataFormRef.validate();
+      await this.$refs.dataFormRef.$refs.dataFormRef.validate();
       const { id } = this.dataForm
       this.lf.setProperties(id, {
         ...this.dataForm.properties