chore: update

src/api/flow.ts

@@ -29,3 +29,8 @@ export function getEventList() {
 export function getMaterialList() {
   return httpRequest.get('/api/lab/v1/experiment/itinerary/marketing-materials')
 }
+
+// 获取实验旅程检索用户的结果
+export function ruleQuery(data: { experiment_id: string; filters: string }) {
+  return httpRequest.post('/api/resource/v1/backend/experiment-itinerary/itinerary-query', data)
+}

src/components/flow/CustomNode.vue

@@ -55,7 +55,7 @@ const component = computed(() => {
       defineAsyncComponent(() => import('./components/conditionalBranch/labelJudgment/Index.vue'))
     )
   }
-  return allComponent[props.node?.data.componentName]
+  return allComponent[props.node?.data.component_name]
 })
 </script>
 

src/components/flow/Sidebar.vue

@@ -19,47 +19,258 @@ const list = ref([
     name: '触发条件',
     background: { icon: 'circle', color: '#4C5AB3' },
     children: [
-      { name: '定时触发', type: '触发条件', icon: '13', componentName: 'TCRealTimeTrigger' },
-      { name: '加入群组', type: '触发条件', icon: '14', componentName: 'TCJoinGroup' },
-      { name: '变更属性', type: '触发条件', icon: '15', componentName: 'TCChangeProps' },
-      { name: '公众号', type: '触发条件', icon: '1', componentName: 'TCOffiaccount', connection_type: 1 },
-      { name: '抖音', type: '触发条件', icon: '6', componentName: 'TCDouyin', connection_type: 6 },
-      { name: '小红书', type: '触发条件', icon: '8', componentName: 'TCXiaohongshu', connection_type: 8 },
-      { name: '微博', type: '触发条件', icon: '7', componentName: 'TCWeibo', connection_type: 7 },
-      { name: '自定义', type: '触发条件', icon: '12', componentName: 'TCCustom', connection_type: 12 },
-      { name: '小鹅通', type: '触发条件', icon: '3', componentName: 'TCXiaoetong', connection_type: 3 },
-      { name: '问卷星', type: '触发条件', icon: '4', componentName: 'TCWenjuanxing', connection_type: 4 }
+      {
+        name: '定时触发',
+        type: 1,
+        type_name: '触发条件',
+        icon: '13',
+        component_type: 1,
+        component_name: 'TCRealTimeTrigger'
+      },
+      {
+        name: '加入群组',
+        type: 1,
+        type_name: '触发条件',
+        icon: '14',
+        component_type: 2,
+        component_name: 'TCJoinGroup'
+      },
+      {
+        name: '变更属性',
+        type: 1,
+        type_name: '触发条件',
+        icon: '15',
+        component_type: 3,
+        component_name: 'TCChangeProps'
+      },
+      {
+        name: '公众号',
+        type: 1,
+        type_name: '触发条件',
+        icon: '1',
+        component_type: 4,
+        component_name: 'TCOffiaccount',
+        connection_type: 1
+      },
+      {
+        name: '抖音',
+        type: 1,
+        type_name: '触发条件',
+        icon: '6',
+        component_type: 5,
+        component_name: 'TCDouyin',
+        connection_type: 6
+      },
+      {
+        name: '小红书',
+        type: 1,
+        type_name: '触发条件',
+        icon: '8',
+        component_type: 6,
+        component_name: 'TCXiaohongshu',
+        connection_type: 8
+      },
+      {
+        name: '微博',
+        type: 1,
+        type_name: '触发条件',
+        icon: '7',
+        component_type: 7,
+        component_name: 'TCWeibo',
+        connection_type: 7
+      },
+      {
+        name: '自定义',
+        type: 1,
+        type_name: '触发条件',
+        icon: '12',
+        component_type: 10,
+        component_name: 'TCCustom',
+        connection_type: 12
+      },
+      {
+        name: '小鹅通',
+        type: 1,
+        type_name: '触发条件',
+        icon: '3',
+        component_type: 8,
+        component_name: 'TCXiaoetong',
+        connection_type: 3
+      },
+      {
+        name: '问卷星',
+        type: 1,
+        type_name: '触发条件',
+        icon: '4',
+        component_type: 9,
+        component_name: 'TCWenjuanxing',
+        connection_type: 4
+      }
     ]
   },
   {
     name: '营销动作',
     background: { icon: 'square', color: '#19AAA5' },
     children: [
-      { name: '终止旅程', type: '营销动作', icon: '16', componentName: 'MAEndTrip', color: '#AA1941' },
-      { name: '加入群组', type: '营销动作', icon: '14', componentName: 'MAJoinGroup' },
-      { name: '移除群组', type: '营销动作', icon: '17', componentName: 'MALeaveGroup' },
-      { name: '变更属性', type: '营销动作', icon: '15', componentName: 'MAChangeProps' },
-      { name: '延时处理', type: '营销动作', icon: '18', componentName: 'MADelayProcess' },
-      { name: '内部通知', type: '营销动作', icon: '19', componentName: 'MAInternalNotice' },
-      { name: '短信', type: '营销动作', icon: '10', componentName: 'MASMS', connection_type: 10 },
-      { name: '邮件', type: '营销动作', icon: '9', componentName: 'MAEmail', connection_type: 9 },
-      { name: '公众号', type: '营销动作', icon: '1', componentName: 'MAOffiaccount', connection_type: 1 },
-      { name: '抖音', type: '营销动作', icon: '6', componentName: 'MADouyin', connection_type: 6 },
-      // { name: '小红书', type: '营销动作', icon: '8', componentName: 'MAXiaohongshu', connection_type: 8 },
-      { name: '微博', type: '营销动作', icon: '7', componentName: 'MAWeibo', connection_type: 7 },
-      { name: '钉钉', type: '营销动作', icon: '2', componentName: 'MADingTalk', connection_type: 2 }
+      {
+        name: '终止旅程',
+        type: 2,
+        type_name: '营销动作',
+        icon: '16',
+        component_type: 99,
+        component_name: 'MAEndTrip',
+        color: '#AA1941'
+      },
+      {
+        name: '加入群组',
+        type: 2,
+        type_name: '营销动作',
+        icon: '14',
+        component_type: 1,
+        component_name: 'MAJoinGroup'
+      },
+      {
+        name: '移除群组',
+        type: 2,
+        type_name: '营销动作',
+        icon: '17',
+        component_type: 2,
+        component_name: 'MALeaveGroup'
+      },
+      {
+        name: '变更属性',
+        type: 2,
+        type_name: '营销动作',
+        icon: '15',
+        component_type: 3,
+        component_name: 'MAChangeProps'
+      },
+      {
+        name: '延时处理',
+        type: 2,
+        type_name: '营销动作',
+        icon: '18',
+        component_type: 2,
+        component_name: 'MADelayProcess'
+      },
+      {
+        name: '内部通知',
+        type: 2,
+        type_name: '营销动作',
+        icon: '19',
+        component_type: 5,
+        component_name: 'MAInternalNotice'
+      },
+      {
+        name: '短信',
+        type: 2,
+        type_name: '营销动作',
+        icon: '10',
+        component_type: 11,
+        component_name: 'MASMS',
+        connection_type: 10
+      },
+      {
+        name: '邮件',
+        type: 2,
+        type_name: '营销动作',
+        icon: '9',
+        component_type: 10,
+        component_name: 'MAEmail',
+        connection_type: 9
+      },
+      {
+        name: '公众号',
+        type: 2,
+        type_name: '营销动作',
+        icon: '1',
+        component_type: 6,
+        component_name: 'MAOffiaccount',
+        connection_type: 1
+      },
+      {
+        name: '抖音',
+        type: 2,
+        type_name: '营销动作',
+        icon: '6',
+        component_type: 7,
+        component_name: 'MADouyin',
+        connection_type: 6
+      },
+      // { name: '小红书', type: 2, type_name: '营销动作', icon: '8',component_type:2, component_name: 'MAXiaohongshu', connection_type: 8 },
+      {
+        name: '微博',
+        type: 2,
+        type_name: '营销动作',
+        icon: '7',
+        component_type: 8,
+        component_name: 'MAWeibo',
+        connection_type: 7
+      },
+      {
+        name: '钉钉',
+        type: 2,
+        type_name: '营销动作',
+        icon: '2',
+        component_type: 9,
+        component_name: 'MADingTalk',
+        connection_type: 2
+      }
     ]
   },
   {
     name: '条件分支',
     background: { icon: 'hexagon', color: '#CEAA62' },
     children: [
-      { name: '属性判断', type: '条件分支', icon: '20', componentName: 'CBAttributeJudgment' },
-      { name: '标签判断', type: '条件分支', icon: '21', componentName: 'CBLabelJudgment' },
-      { name: '群组判断', type: '条件分支', icon: '22', componentName: 'CBGroupJudgment' },
-      { name: '事件判断', type: '条件分支', icon: '23', componentName: 'CBEventJudgment' },
-      { name: '时间判断', type: '条件分支', icon: '24', componentName: 'CBTimeJudgment' },
-      { name: '公众号', type: '条件分支', icon: '1', componentName: 'CBOffiaccount', connection_type: 1 }
+      {
+        name: '属性判断',
+        type: 3,
+        type_name: '条件分支',
+        icon: '20',
+        component_type: 1,
+        component_name: 'CBAttributeJudgment'
+      },
+      {
+        name: '标签判断',
+        type: 3,
+        type_name: '条件分支',
+        icon: '21',
+        component_type: 2,
+        component_name: 'CBLabelJudgment'
+      },
+      {
+        name: '群组判断',
+        type: 3,
+        type_name: '条件分支',
+        icon: '22',
+        component_type: 3,
+        component_name: 'CBGroupJudgment'
+      },
+      {
+        name: '事件判断',
+        type: 3,
+        type_name: '条件分支',
+        icon: '23',
+        component_type: 5,
+        component_name: 'CBEventJudgment'
+      },
+      {
+        name: '时间判断',
+        type: 3,
+        type_name: '条件分支',
+        icon: '24',
+        component_type: 4,
+        component_name: 'CBTimeJudgment'
+      },
+      {
+        name: '公众号',
+        type: 3,
+        type_name: '条件分支',
+        icon: '1',
+        component_type: 6,
+        component_name: 'CBOffiaccount',
+        connection_type: 1
+      }
     ]
   }
 ])

src/components/flow/components/ConfigTemplate.vue

@@ -7,6 +7,7 @@ interface Props {
   model: any
   node: any
   stepNum?: number
+  paramsParse?: (form: any) => any
 }
 const props = defineProps<Props>()
 
@@ -49,6 +50,7 @@ async function submit() {
 }
 
 function updateNode() {
+  // const params = props.paramsParse ? props.paramsParse(form) : {}
   if (props.node && role) Object.assign(props.node.data, { [role]: { ...form } })
 }
 </script>
@@ -59,7 +61,7 @@ function updateNode() {
       <!-- 学生设置组件 -->
       <template v-if="role === 'student'">
         <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ node.data.type }}</el-form-item>
+          <el-form-item label="组件类型">{{ node.data.type_name }}</el-form-item>
           <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
           <el-form-item label="分值">{{ node.data.teacher?.score }} </el-form-item>
         </el-row>
@@ -69,7 +71,7 @@ function updateNode() {
       <template v-if="role === 'teacher'">
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="组件类型">{{ node.data.type }}</el-form-item>
+            <el-form-item label="组件类型">{{ node.data.type_name }}</el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>

src/components/flow/components/ConfigViewTemplate.vue

@@ -41,7 +41,7 @@ function updateNode() {
   <el-dialog title="组件配置" append-to-body width="600px">
     <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：">
       <el-row justify="space-between">
-        <el-form-item label="组件类型">{{ node.data.type }}</el-form-item>
+        <el-form-item label="组件类型">{{ node.data.type_name }}</el-form-item>
         <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
         <el-form-item label="分值">{{ node.data.teacher?.score }} </el-form-item>
       </el-row>

src/components/flow/components/conditionalBranch/attributeJudgment/Config.vue

@@ -2,7 +2,7 @@
 import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
 import ConfigTemplate from '../../ConfigTemplate.vue'
 import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
-import { useUserAttr } from '../../../useAllData'
+import { useUserAttr } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/conditionalBranch/attributeJudgment/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useUserAttr } from '../../../useAllData'
+import { useUserAttr } from '../../../composables/useAllData'
 import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
 
 const role = inject('role') as string

src/components/flow/components/conditionalBranch/eventJudgment/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useMetaEvent } from '../../../useAllData'
+import { useMetaEvent } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/conditionalBranch/eventJudgment/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useMetaEvent } from '../../../useAllData'
+import { useMetaEvent } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/conditionalBranch/groupJudgment/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/conditionalBranch/groupJudgment/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/conditionalBranch/labelJudgment/Config.vue

@@ -2,7 +2,7 @@
 import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
 import ConfigTemplate from '../../ConfigTemplate.vue'
 import { stringOperatorList } from '@/utils/dictionary'
-import { useTag } from '../../../useAllData'
+import { useTag } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/conditionalBranch/labelJudgment/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
 import { stringOperatorList } from '@/utils/dictionary'
-import { useTag } from '../../../useAllData'
+import { useTag } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/conditionalBranch/offiaccount/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 
@@ -8,7 +8,8 @@ const role = inject('role') as string
 
 const form = reactive({
   operate: '',
-  connection_id: ''
+  connection_id: '',
+  connection_name: ''
 })
 watchEffect(() => {
   Object.assign(form, props.node.data[role])

src/components/flow/components/conditionalBranch/offiaccount/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/conditionalBranch/offiaccount/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const { getConnection } = useConnection(1)
+
+const props = defineProps<{ node: any }>()
+
+const connection = computed(() => {
+  return getConnection(props.node.data.teacher?.connection_id)
+})
 </script>
 
 <template>
   <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
+    <template #header-answer> 连接：{{ connection?.name }}&nbsp;&nbsp;事件：关注公众号 </template>
   </RuleTemplate>
 </template>

src/components/flow/components/marketingAction/changeProps/Config.vue

 <script setup lang="ts">
 import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useUserAttr } from '../../../useAllData'
+import { useUserAttr } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/marketingAction/changeProps/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useUserAttr } from '../../../useAllData'
+import { useUserAttr } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/marketingAction/dingtalk/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const props = defineProps<{ node: any }>()

src/components/flow/components/marketingAction/dingtalk/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const role = inject('role') as string

src/components/flow/components/marketingAction/douyin/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const props = defineProps<{ node: any }>()

src/components/flow/components/marketingAction/douyin/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const role = inject('role') as string

src/components/flow/components/marketingAction/email/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const props = defineProps<{ node: any }>()

src/components/flow/components/marketingAction/email/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const role = inject('role') as string

src/components/flow/components/marketingAction/joinGroup/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/marketingAction/joinGroup/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/marketingAction/leaveGroup/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/marketingAction/leaveGroup/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/marketingAction/offiaccount/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const props = defineProps<{ node: any }>()

src/components/flow/components/marketingAction/offiaccount/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const role = inject('role') as string

src/components/flow/components/marketingAction/sms/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/marketingAction/sms/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/marketingAction/weibo/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const props = defineProps<{ node: any }>()

src/components/flow/components/marketingAction/weibo/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useMaterial, useConnection } from '../../../useAllData'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
 import { useMapStore } from '@/stores/map'
 
 const role = inject('role') as string

src/components/flow/components/triggeringConditions/changeProps/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
 import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
-import { useUserAttr } from '../../../useAllData'
+import { useUserAttr } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/changeProps/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useUserAttr } from '../../../useAllData'
+import { useUserAttr } from '../../../composables/useAllData'
 import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
 
 const role = inject('role') as string

src/components/flow/components/triggeringConditions/changeProps/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useUserAttr } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getUserAttr } = useUserAttr()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const userAttr = computed(() => getUserAttr(config.value.attr_id))
+
+function paramsParse(data: any) {
+  return [{ attr_id: data.attr_id, value: data.value, operate: data.operate }]
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ userAttr?.name }} {{ config.operate }} {{ config.value }}</span>
+    </template>
   </RuleTemplate>
 </template>

src/components/flow/components/triggeringConditions/custom/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/custom/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/custom/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/components/triggeringConditions/dingtalk/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/douyin/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/douyin/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/douyin/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/components/triggeringConditions/joinGroup/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/joinGroup/ConfigView.vue

 <script setup lang="ts">
-import { useGroup } from '../../../useAllData'
+import { useGroup } from '../../../composables/useAllData'
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
 
 const role = inject('role') as string

src/components/flow/components/triggeringConditions/joinGroup/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useGroup } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getGroup } = useGroup()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const group = computed(() => getGroup(config.value.group_id))
+
+function paramsParse(data: any) {
+  return { group_id: data.group_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ group?.name }}</span>
+    </template>
   </RuleTemplate>
 </template>

src/components/flow/components/triggeringConditions/offiaccount/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/offiaccount/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/offiaccount/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/components/triggeringConditions/realTimeTrigger/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+function onSubmit(form: any) {
+  form.expected_user_total = form.user_total
+  Object.assign(props.node.data, { rule: { form, params: {} } })
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node">
-    <el-form label-suffix="：">
-      <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
-      <el-form-item label="用户总数">10000</el-form-item>
-      <el-form-item label="预计选取用户总数">10000</el-form-item>
-    </el-form>
-    <p>定时触发条件无需设置数据生成规则</p>
+  <RuleTemplate :node="node" :onSubmit="onSubmit">
+    <template v-slot:default="{ model }">
+      <el-form label-suffix="：">
+        <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
+        <el-form-item label="用户总数">{{ model.user_total }}</el-form-item>
+        <el-form-item label="预计选取用户总数">{{ model.user_total }}</el-form-item>
+      </el-form>
+      <p>定时触发条件无需设置数据生成规则</p>
+    </template>
   </RuleTemplate>
 </template>

src/components/flow/components/triggeringConditions/weibo/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/weibo/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/weibo/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/components/triggeringConditions/wenjuanxing/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/wenjuanxing/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/wenjuanxing/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/components/triggeringConditions/xiaoetong/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/xiaoetong/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/xiaoetong/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/components/triggeringConditions/xiaohongshu/Config.vue

 <script setup lang="ts">
 import ConfigTemplate from '../../ConfigTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const props = defineProps<{ node: any }>()
 

src/components/flow/components/triggeringConditions/xiaohongshu/ConfigView.vue

 <script setup lang="ts">
 import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
-import { useConnection } from '../../../useAllData'
+import { useConnection } from '../../../composables/useAllData'
 
 const role = inject('role') as string
 

src/components/flow/components/triggeringConditions/xiaohongshu/Rule.vue

 <script setup lang="ts">
 import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection, useMetaEvent } from '../../../composables/useAllData'
 
-defineProps<{ node: any }>()
+const props = defineProps<{ node: any }>()
+
+const { getConnection } = useConnection()
+const { metaEventList } = useMetaEvent()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => getConnection(config.value.connection_id))
+
+function paramsParse(data: any, form: any) {
+  return { event_id: form.event_id }
+}
 </script>
 
 <template>
-  <RuleTemplate :node="node" step>
-    <template #header-answer>答案</template>
-    <template #header-form-append>
+  <RuleTemplate :node="node" step :paramsParse="paramsParse">
+    <template #header-answer>
+      <span class="is-answer">{{ config.operate }} &nbsp;&nbsp; {{ connection?.name }}</span>
+    </template>
+    <template v-slot:header-form-append="{ model }: { model: any }">
       <el-form-item label="事件">
-        <el-select>
-          <el-option value="关注公众号"></el-option>
+        <el-select v-model="model.event_id">
+          <el-option v-for="item in metaEventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
     </template>

src/components/flow/useAllData.ts → src/components/flow/composables/useAllData.ts

@@ -58,7 +58,12 @@ export function useUserAttr() {
   onMounted(() => {
     if (!userAttrList.value?.length) fetchUserAttrList()
   })
-  return { fetchUserAttrList, userAttrList }
+
+  function getUserAttr(attrId: string) {
+    return userAttrList.value.find(item => item.id === attrId)
+  }
+
+  return { fetchUserAttrList, userAttrList, getUserAttr }
 }
 
 // 所有事件
@@ -72,7 +77,12 @@ export function useMetaEvent() {
   onMounted(() => {
     if (!metaEventList.value?.length) fetchMetaEventList()
   })
-  return { fetchMetaEventList, metaEventList }
+
+  function getMetaEvent(eventId: string) {
+    return metaEventList.value.find(item => item.id === eventId)
+  }
+
+  return { fetchMetaEventList, metaEventList, getMetaEvent }
 }
 
 // 所有标签
@@ -109,10 +119,14 @@ export function useConnection(type?: number) {
     }
     return allConnectionList.value
   })
+
   onMounted(() => {
     if (!allConnectionList.value?.length) fetchConnectionList()
   })
-  return { fetchConnectionList, connectionList, connectionType }
+  function getConnection(connectionId: string) {
+    return allConnectionList.value.find(item => item.id === connectionId)
+  }
+  return { fetchConnectionList, connectionList, connectionType, getConnection }
 }
 
 // 所有群组
@@ -126,7 +140,11 @@ export function useGroup() {
   onMounted(() => {
     if (!groupList.value?.length) fetchGroupList()
   })
-  return { fetchGroupList, groupList }
+
+  function getGroup(groupId: string) {
+    return groupList.value.find(item => item.id === groupId)
+  }
+  return { fetchGroupList, groupList, getGroup }
 }
 
 // 所有营销资料

src/components/flow/composables/useQueryUser.ts

+import type { GraphEdge, GraphNode } from '@vue-flow/core'
+import { ruleQuery } from '@/api/flow'
+import { useVueFlow } from '@vue-flow/core'
+
+function sortEdges(source: string, edges: GraphEdge[]) {
+  const resultEdges = []
+  let edge
+  while ((edge = edges.find(edge => edge.target === source))) {
+    resultEdges.unshift(edge)
+    source = edge?.source
+  }
+  return resultEdges
+}
+
+function sortNodes(source: string, edges: GraphEdge[], nodes: GraphNode[]) {
+  const findNode = (source: string) => nodes.find(node => node.id === source)
+  const result = []
+  edges.forEach(edge => {
+    const node = findNode(edge.source)
+    if (node) result.push(node)
+  })
+  const node = findNode(source)
+  if (node) result.push(node)
+  return result
+}
+
+const total = ref()
+
+export function useQueryUser(node: any) {
+  const route = useRoute()
+  const { nodes, edges } = useVueFlow()
+  const expectedTotal = ref()
+
+  onMounted(async () => {
+    if (!total.value) {
+      const { data } = await ruleQuery({ experiment_id: route.query.experiment_id as string, filters: '' })
+      total.value = data.count
+    }
+  })
+
+  async function query() {
+    const prevEdges = sortEdges(node.id, edges.value)
+    const prevNodes = sortNodes(node.id, prevEdges, nodes.value)
+    const filters = prevNodes.map(node => ({
+      type: node.data.type,
+      component_type: node.data.component_type,
+      params: node.data.rule?.params || {}
+    }))
+    const { data } = await ruleQuery({
+      experiment_id: route.query.experiment_id as string,
+      filters: JSON.stringify(filters)
+    })
+    expectedTotal.value = data.count
+  }
+
+  return { total, expectedTotal, query }
+}

vite.config.ts

@@ -26,6 +26,11 @@ export default defineConfig(({ mode }) => ({
       cert: fs.readFileSync(path.join(__dirname, './https/ezijing.com.pem'))
     },
     proxy: {
+      '/api/resource': {
+        target: 'http://com-resource-admin-test.ezijing.com/',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api\/resource/, '')
+      },
       '/api': 'https://saas-dml.ezijing.com'
     }
   },