refactor: 重构flow

.eslintrc-auto-import.json

@@ -115,6 +115,7 @@
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
+    "useArrayFindLast": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,

auto-imports.d.ts

-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const $$: typeof import('vue/macros')['$$']
@@ -109,6 +112,7 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -276,5 +280,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }

src/api/flow.ts

 import httpRequest from '@/utils/axios'
 
 // 获取实验旅程中的群组列表
-export function getGroupsList() {
+export function getGroupList() {
   return httpRequest.get('/api/lab/v1/experiment/itinerary/groups')
 }
 
@@ -11,16 +11,21 @@ export function getAttrList() {
 }
 
 // 链接列表
-export function getConnectionList(params: { created_operator?: string; type?: string; page?: number; page_size?: number }) {
-  return httpRequest.get('/api/lab/v1/experiment/connection/list', { params })
+export function getConnectionList() {
+  return httpRequest.get('/api/lab/v1/experiment/itinerary/connections')
 }
 
 // 标签列表
-export function getTagsList() {
+export function getTagList() {
   return httpRequest.get('/api/lab/v1/experiment/itinerary/tags')
 }
 
-// 时间列表
-export function getEventsList() {
+// 事件列表
+export function getEventList() {
   return httpRequest.get('/api/lab/v1/experiment/itinerary/events')
 }
+
+// 营销资料列表
+export function getMaterialList() {
+  return httpRequest.get('/api/lab/v1/experiment/itinerary/marketing-materials')
+}

src/components/flow/CustomNode.vue

 <script setup lang="ts">
 const component = computed(() => {
   const allComponent: any = {
-    TriggeringConditions1: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions1.vue'))
-    ),
-    TriggeringConditions2: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions2.vue'))
-    ),
-    TriggeringConditions3: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions3.vue'))
-    ),
-    TriggeringConditions4: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions4.vue'))
-    ),
-    TriggeringConditions5: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions5.vue'))
-    ),
-    TriggeringConditions6: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions6.vue'))
-    ),
-    TriggeringConditions7: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions7.vue'))
-    ),
-    TriggeringConditions8: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions8.vue'))
-    ),
-    TriggeringConditions9: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions9.vue'))
-    ),
-    TriggeringConditions10: markRaw(
-      defineAsyncComponent(() => import('./components/triggeringConditions/TriggeringConditions10.vue'))
-    ),
-    MarketingAction1: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction1.vue'))),
-    MarketingAction2: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction2.vue'))),
-    MarketingAction3: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction3.vue'))),
-    MarketingAction4: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction4.vue'))),
-    MarketingAction5: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction5.vue'))),
-    MarketingAction6: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction6.vue'))),
-    MarketingAction7: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction7.vue'))),
-    MarketingAction8: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction8.vue'))),
-    MarketingAction9: markRaw(defineAsyncComponent(() => import('./components/marketingAction/MarketingAction9.vue'))),
-    MarketingAction10: markRaw(
-      defineAsyncComponent(() => import('./components/marketingAction/MarketingAction10.vue'))
-    ),
-    MarketingAction11: markRaw(
-      defineAsyncComponent(() => import('./components/marketingAction/MarketingAction11.vue'))
-    ),
-    ConditionalBranch1: markRaw(
-      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch1.vue'))
-    ),
-    ConditionalBranch2: markRaw(
-      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch2.vue'))
-    ),
-    ConditionalBranch3: markRaw(
-      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch3.vue'))
-    ),
-    ConditionalBranch4: markRaw(
-      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch4.vue'))
-    ),
-    ConditionalBranch5: markRaw(
-      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch5.vue'))
-    ),
-    ConditionalBranch6: markRaw(
-      defineAsyncComponent(() => import('./components/conditionalBranch/ConditionalBranch6.vue'))
+    TCRealTimeTrigger: markRaw(
+      defineAsyncComponent(() => import('./components/triggeringConditions/realTimeTrigger/Index.vue'))
+    ),
+    TCJoinGroup: markRaw(defineAsyncComponent(() => import('./components/triggeringConditions/joinGroup/Index.vue'))),
+    TCChangeProps: markRaw(
+      defineAsyncComponent(() => import('./components/triggeringConditions/changeProps/Index.vue'))
+    ),
+    TCOffiaccount: markRaw(
+      defineAsyncComponent(() => import('./components/triggeringConditions/offiaccount/Index.vue'))
+    ),
+    TCDouyin: markRaw(defineAsyncComponent(() => import('./components/triggeringConditions/douyin/Index.vue'))),
+    TCXiaohongshu: markRaw(
+      defineAsyncComponent(() => import('./components/triggeringConditions/xiaohongshu/Index.vue'))
+    ),
+    TCWeibo: markRaw(defineAsyncComponent(() => import('./components/triggeringConditions/weibo/Index.vue'))),
+    TCCustom: markRaw(defineAsyncComponent(() => import('./components/triggeringConditions/custom/Index.vue'))),
+    TCXiaoetong: markRaw(defineAsyncComponent(() => import('./components/triggeringConditions/xiaoetong/Index.vue'))),
+    TCWenjuanxing: markRaw(
+      defineAsyncComponent(() => import('./components/triggeringConditions/wenjuanxing/Index.vue'))
+    ),
+    MAJoinGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/joinGroup/Index.vue'))),
+    MALeaveGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/leaveGroup/Index.vue'))),
+    MAChangeProps: markRaw(defineAsyncComponent(() => import('./components/marketingAction/changeProps/Index.vue'))),
+    MADelayProcess: markRaw(defineAsyncComponent(() => import('./components/marketingAction/delayProcess/Index.vue'))),
+    MAInternalNotice: markRaw(
+      defineAsyncComponent(() => import('./components/marketingAction/internalNotice/Index.vue'))
+    ),
+    MAOffiaccount: markRaw(defineAsyncComponent(() => import('./components/marketingAction/offiaccount/Index.vue'))),
+    MAEmail: markRaw(defineAsyncComponent(() => import('./components/marketingAction/email/Index.vue'))),
+    MASMS: markRaw(defineAsyncComponent(() => import('./components/marketingAction/sms/Index.vue'))),
+    MADouyin: markRaw(defineAsyncComponent(() => import('./components/marketingAction/douyin/Index.vue'))),
+    MAWeibo: markRaw(defineAsyncComponent(() => import('./components/marketingAction/weibo/Index.vue'))),
+    MADingTalk: markRaw(defineAsyncComponent(() => import('./components/marketingAction/dingtalk/Index.vue'))),
+    CBAttributeJudgment: markRaw(
+      defineAsyncComponent(() => import('./components/conditionalBranch/attributeJudgment/Index.vue'))
+    ),
+    CBGroupJudgment: markRaw(
+      defineAsyncComponent(() => import('./components/conditionalBranch/groupJudgment/Index.vue'))
+    ),
+    CBEventJudgment: markRaw(
+      defineAsyncComponent(() => import('./components/conditionalBranch/eventJudgment/Index.vue'))
+    ),
+    CBTimeJudgment: markRaw(
+      defineAsyncComponent(() => import('./components/conditionalBranch/timeJudgment/Index.vue'))
+    ),
+    CBOffiaccount: markRaw(defineAsyncComponent(() => import('./components/conditionalBranch/offiaccount/Index.vue'))),
+    CBLabelJudgment: markRaw(
+      defineAsyncComponent(() => import('./components/conditionalBranch/labelJudgment/Index.vue'))
     )
   }
   return allComponent[props.node?.data.componentName]

src/components/flow/Index.vue

@@ -15,12 +15,14 @@ interface Props {
   action: string
   role: string
   templateType?: string
+  score?: number
 }
 
-const props = withDefaults(defineProps<Props>(), { action: 'edit', role: 'teacher' })
+const props = withDefaults(defineProps<Props>(), { action: 'edit', role: 'teacher', score: 0 })
 provide('action', props.action)
 provide('role', props.role)
 provide('templateType', props.templateType)
+provide('score', props.score)
 
 const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow()
 

src/components/flow/Sidebar.vue

@@ -19,47 +19,47 @@ const list = ref([
     name: '触发条件',
     background: { icon: 'circle', color: '#4C5AB3' },
     children: [
-      { name: '实时触发', type: '触发条件', icon: '13', componentName: 'TriggeringConditions1' },
-      { name: '加入群组', type: '触发条件', icon: '14', componentName: 'TriggeringConditions2' },
-      { name: '变更属性', type: '触发条件', icon: '15', componentName: 'TriggeringConditions3' },
-      { name: '公众号', type: '触发条件', icon: '1', componentName: 'TriggeringConditions4', connection_type: 1 },
-      { name: '抖音', type: '触发条件', icon: '6', componentName: 'TriggeringConditions5', connection_type: 6 },
-      { name: '小红书', type: '触发条件', icon: '8', componentName: 'TriggeringConditions6', connection_type: 8 },
-      { name: '微博', type: '触发条件', icon: '7', componentName: 'TriggeringConditions7', connection_type: 7 },
-      { name: '自定义', type: '触发条件', icon: '12', componentName: 'TriggeringConditions8', connection_type: 12 },
-      { name: '小鹅通', type: '触发条件', icon: '3', componentName: 'TriggeringConditions9', connection_type: 3 },
-      { name: '问卷星', type: '触发条件', icon: '4', componentName: 'TriggeringConditions10', connection_type: 4 }
+      { 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: '营销动作',
     background: { icon: 'square', color: '#19AAA5' },
     children: [
-      // { name: '终止旅程', type: '营销动作', icon: '16' },
-      { name: '加入群组', type: '营销动作', icon: '14', componentName: 'MarketingAction1' },
-      { name: '移除群组', type: '营销动作', icon: '17', componentName: 'MarketingAction2' },
-      { name: '变更属性', type: '营销动作', icon: '15', componentName: 'MarketingAction3' },
-      { name: '延时处理', type: '营销动作', icon: '18', componentName: 'MarketingAction4' },
-      { name: '内部通知', type: '营销动作', icon: '19', componentName: 'MarketingAction5' },
-      { name: '短信', type: '营销动作', icon: '10', componentName: 'MarketingAction6', connection_type: 10 },
-      { name: '邮件', type: '营销动作', icon: '9', componentName: 'MarketingAction7', connection_type: 9 },
-      { name: '公众号', type: '营销动作', icon: '1', componentName: 'MarketingAction8', connection_type: 1 },
-      { name: '抖音', type: '营销动作', icon: '6', componentName: 'MarketingAction9', connection_type: 6 },
-      // { name: '小红书', type: '营销动作', icon: '8', connection_type: 8 },
-      { name: '微博', type: '营销动作', icon: '7', componentName: 'MarketingAction10', connection_type: 7 },
-      { name: '钉钉', type: '营销动作', icon: '2', componentName: 'MarketingAction11', connection_type: 2 }
+      { name: '终止旅程', type: '营销动作', icon: '16', componentName: 'MAEndTrip' },
+      { 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: '条件分支',
     background: { icon: 'hexagon', color: '#CEAA62' },
     children: [
-      { name: '属性判断', type: '条件分支', icon: '20', componentName: 'ConditionalBranch6' },
-      { name: '标签判断', type: '条件分支', icon: '21', componentName: 'ConditionalBranch1' },
-      { name: '群组判断', type: '条件分支', icon: '22', componentName: 'ConditionalBranch2' },
-      { name: '事件判断', type: '条件分支', icon: '23', componentName: 'ConditionalBranch3' },
-      { name: '时间判断', type: '条件分支', icon: '24', componentName: 'ConditionalBranch4' },
-      { name: '公众号', type: '条件分支', icon: '1', componentName: 'ConditionalBranch5', connection_type: 1 }
+      { 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 }
     ]
   }
 ])
@@ -93,8 +93,7 @@ const onDragStart = (event: DragEvent, data: any) => {
             v-for="(item, index) in parent.children"
             :key="index"
             :draggable="true"
-            @dragstart="event => onDragStart(event, item)"
-          >
+            @dragstart="event => onDragStart(event, item)">
             <div class="icon-box">
               <Icon class="icon" color="#fff" :name="item.icon" w="24" h="24"></Icon>
               <Icon
@@ -102,8 +101,7 @@ const onDragStart = (event: DragEvent, data: any) => {
                 :color="parent.background?.color"
                 :name="parent.background?.icon || ''"
                 w="60"
-                h="60"
-              ></Icon>
+                h="60"></Icon>
             </div>
             <p>{{ item.name }}</p>
           </li>

src/components/flow/components/ConfigTemplate.vue

+<!-- 学生设置组件 -->
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { useVueFlow } from '@vue-flow/core'
+
+interface Props {
+  model: any
+  node: any
+  stepNum?: number
+}
+const props = defineProps<Props>()
+
+const role = inject('role') as string
+const score = inject('score') as number
+
+const { nodes } = useVueFlow()
+
+const formRef = ref<FormInstance>()
+const form = reactive({
+  score: undefined,
+  answer_analysis: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.model)
+})
+
+const rules = ref<FormRules>({
+  score: [{ required: true, message: '请输入组件分值' }]
+})
+
+const step = ref(0)
+
+// 已设置组件分值
+const scoreTotal = computed(() => {
+  return nodes.value.reduce((total, node) => {
+    const nodeScore = node.data.teacher?.score || 0
+    return total + parseFloat(nodeScore)
+  }, 0)
+})
+// 最大可设置的分值
+const maxScore = computed(() => {
+  const nodeScore = props.node.data.teacher?.score || 0
+  return score - (scoreTotal.value - nodeScore)
+})
+
+// 保存
+function submit() {
+  formRef.value?.validate().then(updateNode)
+}
+
+function updateNode() {
+  if (props.node && role) Object.assign(props.node.data, { [role]: { ...form } })
+}
+</script>
+
+<template>
+  <el-dialog title="设置组件" append-to-body width="600px">
+    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：">
+      <!-- 学生设置组件 -->
+      <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.name }}</el-form-item>
+          <el-form-item label="分值">{{ node.data.teacher.score }} </el-form-item>
+        </el-row>
+        <slot :step="step" :model="form"></slot>
+      </template>
+      <!-- 老师设置组件 -->
+      <template v-if="role === 'teacher'">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="组件类型">{{ node.data.type }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="组件名称">{{ node.data.name }}</el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="组件分值" prop="score">
+              <el-input-number v-model="form.score" :controls="false" :max="maxScore" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="已设置组件分值">{{ scoreTotal }}</el-form-item>
+          </el-col>
+        </el-row>
+        <el-card header="标准答案" shadow="never">
+          <slot :step="step" :model="form"></slot>
+        </el-card>
+        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
+          <el-form-item prop="answer_analysis">
+            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
+          </el-form-item>
+        </el-card>
+      </template>
+    </el-form>
+    <template #footer>
+      <el-row justify="center" v-if="stepNum">
+        <!-- <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button> -->
+        <el-button @click="step--" plain auto-insert-space v-if="step >= 1">上一步</el-button>
+        <el-button @click="step++" plain auto-insert-space v-if="step < stepNum">下一步</el-button>
+        <el-button type="primary" auto-insert-space @click="submit" v-if="step === stepNum">保存</el-button>
+      </el-row>
+      <el-row justify="center" v-else>
+        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+        <el-button type="primary" auto-insert-space @click="submit">保存</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>

src/components/flow/components/ConfigViewTemplate.vue

+<!-- 学生设置组件 -->
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+
+interface Props {
+  node: any
+}
+const props = defineProps<Props>()
+
+const role = inject('role') as string
+
+const formRef = ref<FormInstance>()
+const form = reactive({
+  score: undefined
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data.student)
+})
+
+const rules = ref<FormRules>({
+  score: [{ required: true, message: '请输入组件分值' }]
+})
+
+// 保存
+function submit() {
+  formRef.value?.validate().then(updateNode)
+}
+
+function updateNode() {
+  if (props.node && role) Object.assign(props.node.data, { student: { ...form } })
+}
+</script>
+
+<template>
+  <el-dialog title="组件配置" append-to-body width="600px">
+    <el-form ref="formRef" :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.name }}</el-form-item>
+        <el-form-item label="分值">{{ node.data.teacher.score }} </el-form-item>
+      </el-row>
+      <slot></slot>
+      <el-form-item label="答案解析"> {{ node.data.teacher.answer_analysis }} </el-form-item>
+      <!-- 老师评分 -->
+      <template v-if="role === 'teacher'">
+        <el-form-item label="得分">
+          <el-input-number v-model="form.score" :controls="false" />
+        </el-form-item>
+      </template>
+      <!-- 学生查看评分 -->
+      <template v-if="role === 'student'">
+        <el-form-item label="得分">{{ node.data.student.score }}</el-form-item>
+      </template>
+    </el-form>
+    <template #footer>
+      <el-row justify="center">
+        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
+        <el-button type="primary" auto-insert-space @click="submit" v-if="role === 'teacher'">保存</el-button>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>

src/components/flow/components/NodeTemplate.vue

@@ -111,3 +111,15 @@ const handleToolbar = function () {
   }
 }
 </style>
+
+<style lang="scss">
+.node-item {
+  position: relative;
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

src/components/flow/components/conditionalBranch/ConditionalBranch1.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
-import { getTagsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({
-  score: '',
-  type: '',
-  name: '',
-  tags: [
-    {
-      tag_id: '',
-      condition_id: '',
-      tag_value: ''
-    }
-  ]
-})
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 标签列表
-const tags = ref()
-onMounted(() => {
-  getTagsList().then(res => {
-    tags.value = res.data.items
-  })
-})
-
-const conditionOptions = [
-  { label: '等于', value: '0' },
-  { label: '不等于', value: '1' },
-  { label: '包含', value: '2' },
-  { label: '不包含', value: '3' },
-  { label: '空值', value: '4' },
-  { label: '非空', value: '5' }
-]
-
-const addTag = function () {
-  form.tags.push({
-    tag_id: '',
-    condition_id: '',
-    tag_value: ''
-  })
-}
-
-const removeTag = function (index) {
-  form.tags.splice(index, 1)
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="hexagon" :color="form.isEdit === true ? '#CEAA62' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="21" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <div style="display: flex; align-items: center; margin-bottom: 15px" v-for="(item, index) in form.tags">
-          <el-select v-model="item.tag_id" placeholder="请选择标签">
-            <el-option v-for="opt in tags" :value="opt.id" :label="opt.name"></el-option>
-          </el-select>
-          <el-select style="margin: 0 10px" v-model="item.condition_id" placeholder="请选择">
-            <el-option v-for="opt in conditionOptions" :value="opt.value" :label="opt.label"></el-option>
-          </el-select>
-          <el-input v-model="item.tag_value" placeholder="请输入标签值"></el-input>
-          <el-icon
-            v-if="form.tags.length > 1"
-            size="20"
-            color="#AA1941"
-            style="margin-left: 10px"
-            @click="removeTag(index)"
-            ><RemoveFilled
-          /></el-icon>
-          <el-icon
-            v-if="index === form.tags.length - 1"
-            size="20"
-            color="#AA1941"
-            style="margin-left: 10px"
-            @click="addTag"
-            ><CirclePlusFilled
-          /></el-icon>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <div style="display: flex; align-items: center; margin-bottom: 15px" v-for="(item, index) in form.tags">
-            <el-select v-model="item.tag_id" placeholder="请选择标签">
-              <el-option v-for="opt in tags" :value="opt.id" :label="opt.name"></el-option>
-            </el-select>
-            <el-select style="margin: 0 10px" v-model="item.condition_id" placeholder="请选择">
-              <el-option v-for="opt in conditionOptions" :value="opt.value" :label="opt.label"></el-option>
-            </el-select>
-            <el-input v-model="item.tag_value" placeholder="请输入标签值"></el-input>
-            <el-icon
-              v-if="form.tags.length > 1"
-              size="20"
-              color="#AA1941"
-              style="margin-left: 10px"
-              @click="removeTag(index)"
-              ><RemoveFilled
-            /></el-icon>
-            <el-icon
-              v-if="index === form.tags.length - 1"
-              size="20"
-              color="#AA1941"
-              style="margin-left: 10px"
-              @click="addTag"
-              ><CirclePlusFilled
-            /></el-icon>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/conditionalBranch/ConditionalBranch2.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getGroupsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({
-  score: '',
-  type: '',
-  name: '',
-  radio: '0',
-  group_id: ''
-})
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 标签列表
-const groupsOption = ref()
-onMounted(() => {
-  getGroupsList().then(res => {
-    groupsOption.value = res.data.items
-  })
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="hexagon" :color="form.isEdit === true ? '#CEAA62' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="22" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.radio">
-            <el-radio label="0">在群组中</el-radio>
-            <el-radio label="1">不在群组中</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item>
-          <el-select v-model="form.group_id">
-            <el-option v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.radio">
-              <el-radio label="0">在群组中</el-radio>
-              <el-radio label="1">不在群组中</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item>
-            <el-select v-model="form.group_id">
-              <el-option v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/conditionalBranch/ConditionalBranch3.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getEventsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({
-  score: '',
-  type: '',
-  name: '',
-  event_id: ''
-})
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 标签列表
-const eventsOption = ref()
-onMounted(() => {
-  getEventsList().then(res => {
-    eventsOption.value = res.data.items
-  })
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="hexagon" :color="form.isEdit === true ? '#CEAA62' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="23" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-select v-model="form.event_id" placeholder="请选择触发事件">
-            <el-option v-for="item in eventsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-select v-model="form.event_id" placeholder="请选择触发事件">
-              <el-option v-for="item in eventsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/conditionalBranch/ConditionalBranch4.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({
-  score: '',
-  type: '',
-  name: '',
-  radio: '0',
-  date: '',
-  condition_id: '0',
-  week: []
-})
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="hexagon" :color="form.isEdit === true ? '#CEAA62' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="24" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item label="时间判断类型">
-          <el-radio-group v-model="form.radio">
-            <el-radio label="0">日期范围</el-radio>
-            <el-radio label="1">星期范围</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="进入该步骤的时间">
-          <template v-if="form.radio === '0'">
-            <el-select v-model="form.condition_id" placeholder="请选择" style="width: 115px">
-              <el-option label="早于" value="0" />
-              <el-option label="晚于" value="1" />
-              <el-option label="区间" value="2" />
-            </el-select>
-            <el-date-picker
-              v-if="form.condition_id === '0' || form.condition_id === '1'"
-              v-model="form.date"
-              type="date"
-              placeholder="请选择"
-            />
-            <el-date-picker
-              v-else
-              v-model="form.date"
-              style="width: 100px"
-              type="daterange"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            />
-          </template>
-          <template v-else>
-            <el-checkbox-group v-model="form.week">
-              <el-checkbox label="周一" />
-              <el-checkbox label="周二" />
-              <el-checkbox label="周三" />
-              <el-checkbox label="周四" />
-              <el-checkbox label="周五" />
-              <el-checkbox label="周六" />
-              <el-checkbox label="周日" />
-            </el-checkbox-group>
-          </template>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item label="时间判断类型">
-            <el-radio-group v-model="form.radio">
-              <el-radio label="0">日期范围</el-radio>
-              <el-radio label="1">星期范围</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="进入该步骤的时间">
-            <template v-if="form.radio === '0'">
-              <el-select v-model="form.condition_id" placeholder="请选择" style="width: 115px">
-                <el-option label="早于" value="0" />
-                <el-option label="晚于" value="1" />
-                <el-option label="区间" value="2" />
-              </el-select>
-              <el-date-picker
-                v-if="form.condition_id === '0' || form.condition_id === '1'"
-                v-model="form.date"
-                type="date"
-                placeholder="请选择"
-              />
-              <el-date-picker
-                v-else
-                v-model="form.date"
-                style="width: 100px"
-                type="daterange"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
-              />
-            </template>
-            <template v-else>
-              <el-checkbox-group v-model="form.week">
-                <el-checkbox label="周一" />
-                <el-checkbox label="周二" />
-                <el-checkbox label="周三" />
-                <el-checkbox label="周四" />
-                <el-checkbox label="周五" />
-                <el-checkbox label="周六" />
-                <el-checkbox label="周日" />
-              </el-checkbox-group>
-            </template>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/conditionalBranch/ConditionalBranch5.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ material_type: '0', step_one_id: '0', step_two_value: '', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送邮件', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '1' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="hexagon" :color="form.isEdit === true ? '#CEAA62' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-form-item>
-            <el-radio-group v-model="form.material_type">
-              <el-radio style="width: 105px" label="0">关注中</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select placeholder="请选择公众号" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-form-item>
-              <el-radio-group v-model="form.material_type">
-                <el-radio style="width: 105px" label="0">关注中</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择公众号"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/conditionalBranch/ConditionalBranch6.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getAttrList } from '@/api/flow'
-import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
-import { Plus, CloseBold } from '@element-plus/icons-vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-// 获取逻辑运算符名称
-function getLogicalName(value) {
-  return value === 'or' ? '或' : '且'
-}
-
-// 获取运算符列表
-function getOperatorList(type) {
-  if (type === '1') return stringOperatorList
-  if (type === '2' || type === '3') return numberOperatorList
-  if (type === '4' || type === '5') return dateOperatorList
-  return stringOperatorList
-}
-
-// 切换逻辑运算符
-function toggleOperate(rule) {
-  rule.current_logic_operate = rule.current_logic_operate === 'or' ? 'and' : 'or'
-}
-
-// 添加条件
-function handleAdd(items) {
-  items.push({ attr_id: '', attr: '', attr_name: '', attr_type: '', operate: '', operate_name: '', value: '' })
-}
-
-// 删除
-function handleRemove(items, index) {
-  items.splice(index, 1)
-}
-
-// 属性改变
-function handleAttrChange(value, item) {
-  const found = userAttrList.value.find(item => item.id === value)
-  item.attr = found?.english_name || ''
-  item.attr_name = found?.name || ''
-  item.attr_type = found?.type || ''
-  // 清空条件数据
-  item.operate = ''
-  item.operate_name = ''
-  item.value = ''
-}
-
-// 条件改变
-function handleOperateChange(value, item) {
-  const found = getOperatorList(item.attr_type).find(item => item.value === value)
-  item.operate_name = found?.label || ''
-  item.value = ''
-  // 区间
-  if (value === 'range') {
-    item.value = { start: undefined, end: undefined }
-  }
-}
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({
-  score: '',
-  type: '',
-  name: '',
-  attr_id: '',
-  items: [{ attr_id: '', attr: '', attr_name: '', attr_type: '', operate: '', operate_name: '', value: '' }]
-})
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 标签列表
-const userAttrList = ref([])
-onMounted(() => {
-  getAttrList().then(res => {
-    userAttrList.value = res.data.items
-  })
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="hexagon" :color="form.isEdit === true ? '#CEAA62' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="hexagon" color="#CEAA62" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="20" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <div class="rule" v-if="form?.items.length">
-            <div class="rule-operator">
-              <span @click="toggleOperate(form)">{{ getLogicalName(form.current_logic_operate) }}</span>
-            </div>
-            <div class="rule-list">
-              <el-row justify="space-between" class="rule-item" v-for="(item, index) in form.items" :key="index">
-                <div>
-                  <el-form-item>
-                    <el-select v-model="item.attr_id" @change="value => handleAttrChange(value, item)">
-                      <el-option
-                        v-for="option in userAttrList"
-                        :key="option.id"
-                        :label="option.name"
-                        :value="option.id"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item>
-                    <el-select v-model="item.operate" @change="value => handleOperateChange(value, item)">
-                      <el-option
-                        v-for="option in getOperatorList(item.attr_type)"
-                        :key="option.value"
-                        :label="option.alias || option.label"
-                        :value="option.value"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item v-if="!['null', 'not null'].includes(item.operate)">
-                    <!-- 数字区间 -->
-                    <template v-if="['2', '3'].includes(item.attr_type) && item.operate === 'range'">
-                      <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.start" />
-                      <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.end" />
-                    </template>
-                    <!-- 日期区间 -->
-                    <template v-else-if="item.attr_type === '4' && item.operate === 'range'">
-                      <el-date-picker v-model="item.value.start" type="date" value-format="YYYY-MM-DD" />
-                      <el-date-picker v-model="item.value.end" type="date" value-format="YYYY-MM-DD" />
-                    </template>
-                    <!-- 时间区间 -->
-                    <template v-else-if="item.attr_type === '5' && item.operate === 'range'">
-                      <el-date-picker
-                        v-model="item.value.start"
-                        type="datetime"
-                        value-format="YYYY-MM-DD HH:mm:ss"
-                        style="width: 180px"
-                      />
-                      <el-date-picker
-                        v-model="item.value.end"
-                        type="datetime"
-                        value-format="YYYY-MM-DD HH:mm:ss"
-                        style="width: 180px"
-                      />
-                    </template>
-                    <template
-                      v-else-if="item.attr_type === '4' && (item.operate === 'after' || item.operate === 'before')"
-                    >
-                      <el-date-picker v-model="item.value" type="date" value-format="YYYY-MM-DD" />
-                    </template>
-                    <template
-                      v-else-if="item.attr_type === '5' && (item.operate === 'after' || item.operate === 'before')"
-                    >
-                      <el-date-picker
-                        v-model="item.value"
-                        type="datetime"
-                        value-format="YYYY-MM-DD HH:mm:ss"
-                        style="width: 180px"
-                      />
-                    </template>
-                    <template v-else>
-                      <el-input v-model="item.value" />
-                    </template>
-                  </el-form-item>
-                </div>
-                <el-button text :icon="CloseBold" @click="handleRemove(form.items, index)"></el-button>
-              </el-row>
-            </div>
-          </div>
-          <el-button text :icon="Plus" @click="handleAdd(form.items)">添加条件</el-button>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <div class="rule" v-if="form?.items.length">
-              <div class="rule-operator">
-                <span @click="toggleOperate(form)">{{ getLogicalName(form.current_logic_operate) }}</span>
-              </div>
-              <div class="rule-list">
-                <el-row justify="space-between" class="rule-item" v-for="(item, index) in form.items" :key="index">
-                  <div>
-                    <el-form-item>
-                      <el-select v-model="item.attr_id" @change="value => handleAttrChange(value, item)">
-                        <el-option
-                          v-for="option in userAttrList"
-                          :key="option.id"
-                          :label="option.name"
-                          :value="option.id"
-                        ></el-option>
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item>
-                      <el-select v-model="item.operate" @change="value => handleOperateChange(value, item)">
-                        <el-option
-                          v-for="option in getOperatorList(item.attr_type)"
-                          :key="option.value"
-                          :label="option.alias || option.label"
-                          :value="option.value"
-                        ></el-option>
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item v-if="!['null', 'not null'].includes(item.operate)">
-                      <!-- 数字区间 -->
-                      <template v-if="['2', '3'].includes(item.attr_type) && item.operate === 'range'">
-                        <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.start" />
-                        <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.end" />
-                      </template>
-                      <!-- 日期区间 -->
-                      <template v-else-if="item.attr_type === '4' && item.operate === 'range'">
-                        <el-date-picker v-model="item.value.start" type="date" value-format="YYYY-MM-DD" />
-                        <el-date-picker v-model="item.value.end" type="date" value-format="YYYY-MM-DD" />
-                      </template>
-                      <!-- 时间区间 -->
-                      <template v-else-if="item.attr_type === '5' && item.operate === 'range'">
-                        <el-date-picker
-                          v-model="item.value.start"
-                          type="datetime"
-                          value-format="YYYY-MM-DD HH:mm:ss"
-                          style="width: 180px"
-                        />
-                        <el-date-picker
-                          v-model="item.value.end"
-                          type="datetime"
-                          value-format="YYYY-MM-DD HH:mm:ss"
-                          style="width: 180px"
-                        />
-                      </template>
-                      <template
-                        v-else-if="item.attr_type === '4' && (item.operate === 'after' || item.operate === 'before')"
-                      >
-                        <el-date-picker v-model="item.value" type="date" value-format="YYYY-MM-DD" />
-                      </template>
-                      <template
-                        v-else-if="item.attr_type === '5' && (item.operate === 'after' || item.operate === 'before')"
-                      >
-                        <el-date-picker
-                          v-model="item.value"
-                          type="datetime"
-                          value-format="YYYY-MM-DD HH:mm:ss"
-                          style="width: 180px"
-                        />
-                      </template>
-                      <template v-else>
-                        <el-input v-model="item.value" />
-                      </template>
-                    </el-form-item>
-                  </div>
-                  <el-button text :icon="CloseBold" @click="handleRemove(form.items, index)"></el-button>
-                </el-row>
-              </div>
-            </div>
-            <el-button text :icon="Plus" @click="handleAdd(form.items)">添加条件</el-button>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style src="@/assets/styles/rule.scss"></style>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

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

+<script setup lang="ts">
+import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { stringOperatorList, numberOperatorList, dateOperatorList } from '@/utils/dictionary'
+import { useUserAttr } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  rules: [{ attr_id: '', attr_type: '', operate: '', value: '' }]
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { userAttrList } = useUserAttr()
+
+// 获取运算符列表
+function getOperatorList(type: string) {
+  if (type === '1') return stringOperatorList
+  if (type === '2' || type === '3') return numberOperatorList
+  if (type === '4' || type === '5') return dateOperatorList
+  return stringOperatorList
+}
+
+function onAttrChange(rule: any) {
+  const currentUserAttr = userAttrList.value.find(item => item.id === rule.attr_id)
+  rule.attr_type = currentUserAttr ? currentUserAttr.type : ''
+  rule.operate = ''
+  rule.value = ''
+}
+
+function addRule() {
+  form.rules.push({ attr_id: '', attr_type: '', operate: '=', value: '' })
+}
+
+function removeRule(index: number) {
+  form.rules.splice(index, 1)
+}
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item v-for="(rule, index) in form.rules" :key="index">
+      <el-row align="middle">
+        <el-select v-model="rule.attr_id" @change="onAttrChange(rule)" placeholder="请选择属性" style="width: 120px">
+          <el-option :key="item.id" v-for="item in userAttrList" :value="item.id" :label="item.name"></el-option>
+        </el-select>
+        <el-select v-model="rule.operate" style="margin: 0 10px; width: 120px">
+          <el-option
+            v-for="item in getOperatorList(rule.attr_type)"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"></el-option>
+        </el-select>
+        <el-input v-model="rule.value" placeholder="请输入属性值" style="width: 180px"></el-input>
+        <el-icon style="margin-left: 10px" size="20" color="#cf5b78" @click="removeRule(index)" v-if="index !== 0">
+          <RemoveFilled />
+        </el-icon>
+        <el-icon
+          style="margin-left: 10px"
+          size="20"
+          color="#cf5b78"
+          @click="addRule"
+          v-if="index === form.rules.length - 1">
+          <CirclePlusFilled />
+        </el-icon>
+      </el-row>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 属性判断 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
+      <Icon class="icon" name="20" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMetaEvent } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  event_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { metaEventList } = useMetaEvent()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-select v-model="form.event_id" placeholder="请选择触发事件">
+        <el-option v-for="item in metaEventList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+      </el-select>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 属性判断 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
+      <Icon class="icon" name="23" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useGroup } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  in_group: '',
+  group_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { groupList } = useGroup()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-radio-group v-model="form.in_group">
+        <el-radio label="0">在群组中</el-radio>
+        <el-radio label="1">不在群组中</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-select v-model="form.group_id">
+        <el-option v-for="item in groupList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+      </el-select>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 属性判断 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
+      <Icon class="icon" name="22" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { stringOperatorList } from '@/utils/dictionary'
+import { useTag } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  rules: [{ tag_id: '', operate: '', value: '' }]
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { tagList } = useTag()
+
+function addRule() {
+  form.rules.push({ tag_id: '', operate: '=', value: '' })
+}
+
+function removeRule(index: number) {
+  form.rules.splice(index, 1)
+}
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item v-for="(rule, index) in form.rules" :key="index">
+      <el-row align="middle">
+        <el-select v-model="rule.tag_id" placeholder="请选择标签" style="width: 120px">
+          <el-option :key="item.id" v-for="item in tagList" :value="item.id" :label="item.name"></el-option>
+        </el-select>
+        <el-select v-model="rule.operate" style="margin: 0 10px; width: 120px">
+          <el-option
+            v-for="item in stringOperatorList"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"></el-option>
+        </el-select>
+        <el-input v-model="rule.value" placeholder="请输入标签值" style="width: 180px"></el-input>
+        <el-icon style="margin-left: 10px" size="20" color="#cf5b78" @click="removeRule(index)" v-if="index !== 0">
+          <RemoveFilled />
+        </el-icon>
+        <el-icon
+          style="margin-left: 10px"
+          size="20"
+          color="#cf5b78"
+          @click="addRule"
+          v-if="index === form.rules.length - 1">
+          <CirclePlusFilled />
+        </el-icon>
+      </el-row>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 属性判断 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
+      <Icon class="icon" name="21" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([{ label: '关注中', value: '0' }])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="1">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 105px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择关联使用公众号" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
+      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  date_type: '',
+  date_rule: '',
+  date: '',
+  week: []
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const dateTypeList = ref([
+  { label: '日期范围', value: '0' },
+  { label: '星期范围', value: '1' }
+])
+const dateRuleList = ref([
+  { label: '早于', value: '0' },
+  { label: '晚于', value: '1' },
+  { label: '区间', value: '2' }
+])
+const weekList = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item label="时间判断类型">
+      <el-radio-group v-model="form.date_type">
+        <el-radio v-for="item in dateTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="进入该步骤的时间">
+      <template v-if="form.date_type === '0'">
+        <el-select v-model="form.date_rule" placeholder="请选择" style="width: 115px">
+          <el-option v-for="item in dateRuleList" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-date-picker
+          v-if="['0', '1'].includes(form.date_rule)"
+          v-model="form.date"
+          type="date"
+          placeholder="请选择" />
+        <el-date-picker
+          v-else
+          v-model="form.date"
+          style="width: 100px"
+          type="daterange"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间" />
+      </template>
+      <template v-else>
+        <el-checkbox-group v-model="form.week">
+          <el-checkbox v-for="item in weekList" :key="item" :label="item" />
+        </el-checkbox-group>
+      </template>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/conditionalBranch/timeJudgment/Index.vue

+<!-- 时间判断 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
+      <Icon class="icon" name="24" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

src/components/flow/components/marketingAction/MarketingAction1.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getGroupsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ group_id: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const groupsOption = ref([])
-const getGroups = function () {
-  getGroupsList().then(res => {
-    groupsOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getGroups()
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-            <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-              <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction10.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '发送私信', value: '0' },
-  { label: '发送图片', value: '1' },
-  { label: '向用户发送视频私信', value: '2' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '7' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select
-          placeholder="请选择关联使用微博"
-          style="width: 100%"
-          v-model="form.step_two_value"
-          v-if="stepActive === 1"
-        >
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择关联使用微博"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择营销资料">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction11.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送消息', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '2' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="2" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select
-          placeholder="请选择关联使用钉钉"
-          style="width: 100%"
-          v-model="form.step_two_value"
-          v-if="stepActive === 1"
-        >
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择关联使用钉钉"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择营销资料">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction2.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getGroupsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ group_id: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const groupsOption = ref([])
-const getGroups = function () {
-  getGroupsList().then(res => {
-    groupsOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getGroups()
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="17" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-            <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-              <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction3.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getAttrList } from '@/api/flow'
-import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive([{ attr_id: '', attr_value: '' }])
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const attrOption = ref([])
-const getAttr = function () {
-  getAttrList().then(res => {
-    attrOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getAttr()
-})
-
-// 添加属性
-const handleAdd = function () {
-  form.push({ attr_id: '', attr_value: '' })
-}
-
-// 删除属性
-const handleRemove = function (index) {
-  form.splice(index, 1)
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <div style="margin-bottom: 15px; display: flex; align-items: center" v-for="(forms, index) in form">
-            <el-select style="width: 130px" v-model="forms.attr_id" placeholder="请选择">
-              <el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-            <span style="margin: 0 10px">=</span>
-            <el-input v-model="forms.attr_value" style="width: 200px" placeholder="请输入"></el-input>
-            <el-icon
-              v-if="form.length > 1"
-              style="margin-left: 10px"
-              size="20"
-              color="#cf5b78"
-              @click="handleRemove(index)"
-              ><RemoveFilled
-            /></el-icon>
-            <el-icon
-              v-if="index === form.length - 1"
-              style="margin-left: 10px"
-              size="20"
-              color="#cf5b78"
-              @click="handleAdd"
-              ><CirclePlusFilled
-            /></el-icon>
-          </div>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <div style="margin-bottom: 15px; display: flex; align-items: center" v-for="(forms, index) in form">
-              <el-select style="width: 130px" v-model="forms.attr_id" placeholder="请选择">
-                <el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
-              </el-select>
-              <span style="margin: 0 10px">=</span>
-              <el-input v-model="forms.attr_value" style="width: 200px" placeholder="请输入"></el-input>
-              <el-icon
-                v-if="form.length > 1"
-                style="margin-left: 10px"
-                size="20"
-                color="#cf5b78"
-                @click="handleRemove(index)"
-                ><RemoveFilled
-              /></el-icon>
-              <el-icon
-                v-if="index === form.length - 1"
-                style="margin-left: 10px"
-                size="20"
-                color="#cf5b78"
-                @click="handleAdd"
-                ><CirclePlusFilled
-              /></el-icon>
-            </div>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction4.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ date_type: '0', num: '', time_unit: '0', date: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="18" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.date_type" style="display: block">
-            <el-radio label="0" size="large" style="display: block">
-              <span>延时 </span>
-              <el-input
-                :disabled="form.date_type !== '0'"
-                v-model="form.num"
-                placeholder="请输入"
-                class="input-with-select"
-              >
-                <template #append>
-                  <el-select
-                    :disabled="form.date_type !== '0'"
-                    v-model="form.time_unit"
-                    placeholder="请选择"
-                    style="width: 115px"
-                  >
-                    <el-option label="分钟" value="0" />
-                    <el-option label="小时" value="1" />
-                    <el-option label="日" value="2" />
-                    <el-option label="周" value="3" />
-                  </el-select>
-                </template>
-              </el-input>
-            </el-radio>
-            <el-radio label="1" size="large" style="display: block">
-              <span>延时至 </span>
-              <el-date-picker
-                :disabled="form.date_type !== '1'"
-                v-model="form.date"
-                type="datetime"
-                placeholder="请选择"
-              />
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.date_type" style="display: block">
-              <el-radio label="0" size="large" style="display: block">
-                <span>延时 </span>
-                <el-input
-                  :disabled="form.date_type !== '0'"
-                  v-model="form.num"
-                  placeholder="请输入"
-                  class="input-with-select"
-                >
-                  <template #append>
-                    <el-select
-                      :disabled="form.date_type !== '0'"
-                      v-model="form.time_unit"
-                      placeholder="请选择"
-                      style="width: 115px"
-                    >
-                      <el-option label="分钟" value="0" />
-                      <el-option label="小时" value="1" />
-                      <el-option label="日" value="2" />
-                      <el-option label="周" value="3" />
-                    </el-select>
-                  </template>
-                </el-input>
-              </el-radio>
-              <el-radio label="1" size="large" style="display: block">
-                <span>延时至 </span>
-                <el-date-picker
-                  :disabled="form.date_type !== '1'"
-                  v-model="form.date"
-                  type="datetime"
-                  placeholder="请选择"
-                />
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction5.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ content: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="19" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-input v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-input v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction6.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', content: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送短信', value: '0' }]
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="10" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-input v-if="stepActive === 1" v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-input v-if="stepActive === 1" v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction7.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送邮件', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '9' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="9" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择使用营销资料类型">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction8.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送邮件', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '1' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-form-item>
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >发送{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择资料内容" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select placeholder="请选择公众号" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-form-item>
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >发送{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择资料内容" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择公众号"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/MarketingAction9.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '向用户发送文本私信', value: '0' },
-  { label: '向用户发送图片私信', value: '1' },
-  { label: '向用户发送视频私信', value: '2' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '6' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      <Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select
-          placeholder="请选择关联使用抖音"
-          style="width: 100%"
-          v-model="form.step_two_value"
-          v-if="stepActive === 1"
-        >
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择关联使用抖音"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择营销资料">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

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'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  rules: [{ attr_id: '', operate: '=', value: '' }]
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { userAttrList } = useUserAttr()
+
+function addRule() {
+  form.rules.push({ attr_id: '', operate: '=', value: '' })
+}
+
+function removeRule(index: number) {
+  form.rules.splice(index, 1)
+}
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item v-for="(rule, index) in form.rules" :key="index">
+      <el-row justify="center" align="middle">
+        <el-select v-model="rule.attr_id" placeholder="请选择属性" style="width: 130px">
+          <el-option :key="item.id" v-for="item in userAttrList" :value="item.id" :label="item.name"></el-option>
+        </el-select>
+        <el-button style="margin: 0 10px">=</el-button>
+        <el-input v-model="rule.value" placeholder="请输入" style="width: 200px"></el-input>
+        <el-icon style="margin-left: 10px" size="20" color="#cf5b78" @click="removeRule(index)" v-if="index !== 0">
+          <RemoveFilled />
+        </el-icon>
+        <el-icon
+          style="margin-left: 10px"
+          size="20"
+          color="#cf5b78"
+          @click="addRule"
+          v-if="index === form.rules.length - 1">
+          <CirclePlusFilled />
+        </el-icon>
+      </el-row>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 变更属性 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  time_type: '0',
+  time_num: '',
+  time_unit: '0',
+  time: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const timeUnitList = ref([
+  { label: '分钟', value: '0' },
+  { label: '小时', value: '1' },
+  { label: '日', value: '2' },
+  { label: '周', value: '3' }
+])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-radio-group v-model="form.time_type" style="display: block">
+        <el-radio label="0" size="large" style="display: block">
+          <span>延时 </span>
+          <el-input
+            :disabled="form.time_type !== '0'"
+            v-model="form.time_num"
+            placeholder="请输入"
+            class="input-with-select">
+            <template #append>
+              <el-select
+                v-model="form.time_unit"
+                placeholder="请选择"
+                style="width: 115px"
+                :disabled="form.time_type !== '0'">
+                <el-option v-for="item in timeUnitList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </template>
+          </el-input>
+        </el-radio>
+        <el-radio label="1" size="large" style="display: block">
+          <span>延时至 </span>
+          <el-date-picker :disabled="form.time_type !== '1'" v-model="form.time" type="datetime" placeholder="请选择" />
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/marketingAction/delayProcess/Index.vue

+<!-- 延时处理 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="18" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../useAllData'
+import { useMapStore } from '@/stores/map'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  material_type: '',
+  material_id: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([{ label: '发送消息', value: '0' }])
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 2">
+        <el-form-item>
+          <el-radio-group v-model="form.material_type">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :label="item.value" style="width: 105px">
+              发送{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="2" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../useAllData'
+import { useMapStore } from '@/stores/map'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  material_type: '',
+  material_id: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([
+  { label: '向用户发送文本私信', value: '0' },
+  { label: '向用户发送图片私信', value: '1' },
+  { label: '向用户发送视频私信', value: '2' }
+])
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 2">
+        <el-form-item>
+          <el-radio-group v-model="form.material_type">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :label="item.value" style="width: 105px">
+              发送{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../useAllData'
+import { useMapStore } from '@/stores/map'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  material_type: '',
+  material_id: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([{ label: '发送邮件', value: '0' }])
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 2">
+        <el-form-item>
+          <el-radio-group v-model="form.material_type">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :label="item.value" style="width: 105px">
+              发送{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="9" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../useAllData'
+import { useMapStore } from '@/stores/map'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  material_type: '',
+  material_id: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([{ label: '发送邮件', value: '0' }])
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 2">
+        <el-form-item>
+          <el-radio-group v-model="form.material_type">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :label="item.value" style="width: 105px">
+              发送{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/marketingAction/endTrip/Index.vue

+<!-- 变更属性 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-input v-model="form.message" :rows="3" type="textarea" placeholder="请输入通知内容" />
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/marketingAction/internalNotice/Index.vue

+<!-- 变更属性 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="19" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useGroup } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  group_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { groupList } = useGroup()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
+        <el-option :key="item.id" v-for="item in groupList" :value="item.id" :label="item.name"></el-option>
+      </el-select>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 加入群组 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useGroup } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  group_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { groupList } = useGroup()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
+        <el-option :key="item.id" v-for="item in groupList" :value="item.id" :label="item.name"></el-option>
+      </el-select>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 移除群组 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="17" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

src/components/flow/components/marketingAction/marketingAction1.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getGroupsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ group_id: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const groupsOption = ref([])
-const getGroups = function () {
-  getGroupsList().then(res => {
-    groupsOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getGroups()
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-            <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-              <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction10.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '发送私信', value: '0' },
-  { label: '发送图片', value: '1' },
-  { label: '向用户发送视频私信', value: '2' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '7' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select
-          placeholder="请选择关联使用微博"
-          style="width: 100%"
-          v-model="form.step_two_value"
-          v-if="stepActive === 1"
-        >
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择关联使用微博"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择营销资料">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction11.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送消息', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '2' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="2" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select
-          placeholder="请选择关联使用钉钉"
-          style="width: 100%"
-          v-model="form.step_two_value"
-          v-if="stepActive === 1"
-        >
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择关联使用钉钉"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择营销资料">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction2.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getGroupsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ group_id: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const groupsOption = ref([])
-const getGroups = function () {
-  getGroupsList().then(res => {
-    groupsOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getGroups()
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="17" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-            <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择用户群组">
-              <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction3.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getAttrList } from '@/api/flow'
-import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive([{ attr_id: '', attr_value: '' }])
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const attrOption = ref([])
-const getAttr = function () {
-  getAttrList().then(res => {
-    attrOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getAttr()
-})
-
-// 添加属性
-const handleAdd = function () {
-  form.push({ attr_id: '', attr_value: '' })
-}
-
-// 删除属性
-const handleRemove = function (index) {
-  form.splice(index, 1)
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <div style="margin-bottom: 15px; display: flex; align-items: center" v-for="(forms, index) in form">
-            <el-select style="width: 130px" v-model="forms.attr_id" placeholder="请选择">
-              <el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-            <span style="margin: 0 10px">=</span>
-            <el-input v-model="forms.attr_value" style="width: 200px" placeholder="请输入"></el-input>
-            <el-icon
-              v-if="form.length > 1"
-              style="margin-left: 10px"
-              size="20"
-              color="#cf5b78"
-              @click="handleRemove(index)"
-              ><RemoveFilled
-            /></el-icon>
-            <el-icon
-              v-if="index === form.length - 1"
-              style="margin-left: 10px"
-              size="20"
-              color="#cf5b78"
-              @click="handleAdd"
-              ><CirclePlusFilled
-            /></el-icon>
-          </div>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <div style="margin-bottom: 15px; display: flex; align-items: center" v-for="(forms, index) in form">
-              <el-select style="width: 130px" v-model="forms.attr_id" placeholder="请选择">
-                <el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
-              </el-select>
-              <span style="margin: 0 10px">=</span>
-              <el-input v-model="forms.attr_value" style="width: 200px" placeholder="请输入"></el-input>
-              <el-icon
-                v-if="form.length > 1"
-                style="margin-left: 10px"
-                size="20"
-                color="#cf5b78"
-                @click="handleRemove(index)"
-                ><RemoveFilled
-              /></el-icon>
-              <el-icon
-                v-if="index === form.length - 1"
-                style="margin-left: 10px"
-                size="20"
-                color="#cf5b78"
-                @click="handleAdd"
-                ><CirclePlusFilled
-              /></el-icon>
-            </div>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction4.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ date_type: '0', num: '', time_unit: '0', date: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="18" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.date_type" style="display: block">
-            <el-radio label="0" size="large" style="display: block">
-              <span>延时 </span>
-              <el-input
-                :disabled="form.date_type !== '0'"
-                v-model="form.num"
-                placeholder="请输入"
-                class="input-with-select"
-              >
-                <template #append>
-                  <el-select
-                    :disabled="form.date_type !== '0'"
-                    v-model="form.time_unit"
-                    placeholder="请选择"
-                    style="width: 115px"
-                  >
-                    <el-option label="分钟" value="0" />
-                    <el-option label="小时" value="1" />
-                    <el-option label="日" value="2" />
-                    <el-option label="周" value="3" />
-                  </el-select>
-                </template>
-              </el-input>
-            </el-radio>
-            <el-radio label="1" size="large" style="display: block">
-              <span>延时至 </span>
-              <el-date-picker
-                :disabled="form.date_type !== '1'"
-                v-model="form.date"
-                type="datetime"
-                placeholder="请选择"
-              />
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.date_type" style="display: block">
-              <el-radio label="0" size="large" style="display: block">
-                <span>延时 </span>
-                <el-input
-                  :disabled="form.date_type !== '0'"
-                  v-model="form.num"
-                  placeholder="请输入"
-                  class="input-with-select"
-                >
-                  <template #append>
-                    <el-select
-                      :disabled="form.date_type !== '0'"
-                      v-model="form.time_unit"
-                      placeholder="请选择"
-                      style="width: 115px"
-                    >
-                      <el-option label="分钟" value="0" />
-                      <el-option label="小时" value="1" />
-                      <el-option label="日" value="2" />
-                      <el-option label="周" value="3" />
-                    </el-select>
-                  </template>
-                </el-input>
-              </el-radio>
-              <el-radio label="1" size="large" style="display: block">
-                <span>延时至 </span>
-                <el-date-picker
-                  :disabled="form.date_type !== '1'"
-                  v-model="form.date"
-                  type="datetime"
-                  placeholder="请选择"
-                />
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction5.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ content: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="19" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-input v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-input v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction6.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', content: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送短信', value: '0' }]
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="10" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-input v-if="stepActive === 1" v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-input v-if="stepActive === 1" v-model="form.content" :rows="3" type="textarea" placeholder="请输入" />
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction7.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送邮件', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '9' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="9" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择使用营销资料类型">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction8.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '发送邮件', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '1' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="square" :color="form.isEdit === true ? '#19AAA5' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-form-item>
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >发送{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择资料内容" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select placeholder="请选择公众号" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-form-item>
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >发送{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择资料内容" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择公众号"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/marketingAction/marketingAction9.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-import { useMapStore } from '@/stores/map'
-import { getMaterialList } from '@/api/base'
-
-const store = useMapStore()
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', material_type: '1', material_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '向用户发送文本私信', value: '0' },
-  { label: '向用户发送图片私信', value: '1' },
-  { label: '向用户发送视频私信', value: '2' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '6' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-  changeMaterialType()
-})
-
-// 步骤
-let stepActive = ref(0)
-
-// 选择资料类型
-let materiaList = ref([])
-const changeMaterialType = function () {
-  form.material_value = ''
-  getMaterialList({ type: form.material_type }).then(res => {
-    materiaList.value = res.data.list
-  })
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <Icon name="square" color="#19AAA5" w="60" h="60"></Icon>
-      <Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <!-- 第一步 -->
-        <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-          <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <!-- 第二步 -->
-        <el-select
-          placeholder="请选择关联使用抖音"
-          style="width: 100%"
-          v-model="form.step_two_value"
-          v-if="stepActive === 1"
-        >
-          <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-        </el-select>
-        <!-- 第三步 -->
-        <div class="means-box" v-if="stepActive === 2">
-          <el-form-item label="请选择营销资料">
-            <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-              <el-radio
-                style="width: 105px"
-                :label="item.value"
-                v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                >{{ item.label }}</el-radio
-              >
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="营销资料">
-            <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-              <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-            </el-select>
-          </el-form-item>
-        </div>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <!-- 第一步 -->
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio :label="item.value" v-for="item in stepOneOptions">{{ item.label }}</el-radio>
-          </el-radio-group>
-          <!-- 第二步 -->
-          <el-select
-            placeholder="请选择关联使用抖音"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <!-- 第三步 -->
-          <div class="means-box" v-if="stepActive === 2">
-            <el-form-item label="请选择营销资料">
-              <el-radio-group @change="changeMaterialType" v-model="form.material_type">
-                <el-radio
-                  style="width: 105px"
-                  :label="item.value"
-                  v-for="item in store.getMapValuesByKey('experiment_marketing_material_type')"
-                  >{{ item.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="营销资料">
-              <el-select placeholder="请选择使用营销资料" v-model="form.material_value" style="width: 100%">
-                <el-option :value="item.id" :label="item.name" v-for="item in materiaList"></el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../useAllData'
+import { useMapStore } from '@/stores/map'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  material_type: '',
+  material_id: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="1">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.material_type">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :label="item.value" style="width: 105px">
+              发送{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([{ label: '发送消息', value: '0' }])
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 2">
+        <el-form-item prop="message">
+          <el-input v-model="form.message" :rows="3" type="textarea" placeholder="请输入短信内容"></el-input>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="10" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../useAllData'
+import { useMapStore } from '@/stores/map'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  material_type: '',
+  material_id: '',
+  connection_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([
+  { label: '发送私信', value: '0' },
+  { label: '发送图片', value: '1' },
+  { label: '向用户发送视频私信', value: '2' }
+])
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+
+const { connectionList } = useConnection()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <template v-if="step === 0">
+        <el-form-item>
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 1">
+        <el-form-item>
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-else-if="step === 2">
+        <el-form-item>
+          <el-radio-group v-model="form.material_type">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :label="item.value" style="width: 105px">
+              发送{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
+            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

src/components/flow/components/triggeringConditions/TriggeringConditions1.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({
-  repeat_trigger: { num: '1', date_unit: '0', time: new Date(), date: '' },
-  id: '',
-  name: '',
-  type: '',
-  trigger_type: '0',
-  trigger_time: '',
-  answer_analysis: ''
-})
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="13" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item label="触发类型" prop="trigger_type">
-          <el-radio-group v-model="form.trigger_type">
-            <el-radio label="0">单次触发</el-radio>
-            <el-radio label="1">重复触发</el-radio>
-            <el-radio label="2">立即触发</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <template v-if="form.trigger_type === '0'">
-          <el-form-item label="触发时间" prop="trigger_time">
-            <el-date-picker v-model="form.trigger_time" type="date" />
-          </el-form-item>
-        </template>
-        <template v-if="form.trigger_type === '1'">
-          <el-form-item label="触发时间">
-            <div style="display: flex">
-              <span>每</span>
-              <el-input type="number" style="width: 50px; margin-left: 5px" v-model="form.repeat_trigger.num" />
-              <el-select style="width: 60px; margin: 0 5px" v-model="form.repeat_trigger.date_unit">
-                <el-option value="0" label="天"></el-option>
-                <el-option value="1" label="周"></el-option>
-                <el-option value="2" label="月"></el-option>
-              </el-select>
-              <span>的</span>
-              <el-time-picker v-model="form.repeat_trigger.time" style="width: 120px; margin: 0 5px" />
-              <span>触发</span>
-            </div>
-          </el-form-item>
-          <el-form-item label="起止时间">
-            <div>
-              <span style="font-size: 12px; color: #ccc"
-                >提示: 不设起止日期，发布期间会按上面的触发时间规则一直重复触发</span
-              >
-              <el-date-picker
-                v-model="form.repeat_trigger.date"
-                type="datetimerange"
-                range-separator="To"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"
-              />
-            </div>
-          </el-form-item>
-        </template>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item label="触发类型" prop="trigger_type">
-            <el-radio-group v-model="form.trigger_type">
-              <el-radio label="0">单次触发</el-radio>
-              <el-radio label="1">重复触发</el-radio>
-              <el-radio label="2">立即触发</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <template v-if="form.trigger_type === '0'">
-            <el-form-item label="触发时间" prop="trigger_time">
-              <el-date-picker v-model="form.trigger_time" type="date" />
-            </el-form-item>
-          </template>
-          <template v-if="form.trigger_type === '1'">
-            <el-form-item label="触发时间">
-              <div style="display: flex">
-                <span>每</span>
-                <el-input type="number" style="width: 50px; margin-left: 5px" v-model="form.repeat_trigger.num" />
-                <el-select style="width: 60px; margin: 0 5px" v-model="form.repeat_trigger.date_unit">
-                  <el-option value="0" label="天"></el-option>
-                  <el-option value="1" label="周"></el-option>
-                  <el-option value="2" label="月"></el-option>
-                </el-select>
-                <span>的</span>
-                <el-time-picker v-model="form.repeat_trigger.time" style="width: 120px; margin: 0 5px" />
-                <span>触发</span>
-              </div>
-            </el-form-item>
-            <el-form-item label="起止时间">
-              <div>
-                <span style="font-size: 12px; color: #ccc"
-                  >提示: 不设起止日期，发布期间会按上面的触发时间规则一直重复触发</span
-                >
-                <el-date-picker
-                  v-model="form.repeat_trigger.date"
-                  type="datetimerange"
-                  range-separator="To"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                />
-              </div>
-            </el-form-item>
-          </template>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions10.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '提交表单', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '4' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="4" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions2.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getGroupsList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ group_id: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const groupsOption = ref([])
-const getGroups = function () {
-  getGroupsList().then(res => {
-    groupsOption.value = res.data.items
-  })
-}
-
-onMounted(() => {
-  getGroups()
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择需要监控的群组">
-            <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-          </el-select>
-          <span style="font-size: 12px; text-align: right; color: #ccc"
-            >您选择的群组中，新加入的用户将会触发该旅程</span
-          >
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择需要监控的群组">
-              <el-option :key="item.id" v-for="item in groupsOption" :value="item.id" :label="item.name"></el-option>
-            </el-select>
-            <span style="font-size: 12px; text-align: right; color: #ccc"
-              >您选择的群组中，新加入的用户将会触发该旅程</span
-            >
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions3.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getAttrList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ attr_id: '', condition_id: '', attr_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-// 获取群组列表
-const attrOption = ref([])
-const getAttr = function () {
-  getAttrList().then(res => {
-    attrOption.value = res.data.items
-  })
-}
-
-// 选择属性后联动后面的选项
-const conditionOption = ref([])
-const changeAttr = function () {
-  form.condition_id = ''
-  const options = {
-    strings: [
-      { value: '0', label: '等于' },
-      { value: '1', label: '不等于' },
-      { value: '2', label: '包含' },
-      { value: '3', label: '不包含' },
-      { value: '4', label: '空值' },
-      { value: '5', label: '非空' }
-    ],
-    numbers: [
-      { value: '0', label: '=' },
-      { value: '1', label: '≠' },
-      { value: '2', label: '>' },
-      { value: '3', label: '≥' },
-      { value: '4', label: '<' },
-      { value: '5', label: '≤' },
-      { value: '6', label: '区间' },
-      { value: '7', label: '空值' },
-      { value: '8', label: '非空' }
-    ]
-  }
-  conditionOption.value =
-    attrOption.value.find(item => item.id === form.attr_id).type === '1' ? options.strings : options.numbers
-}
-
-onMounted(() => {
-  getAttr()
-})
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <div>
-            <div style="display: flex">
-              <el-select @change="changeAttr" style="width: 130px" v-model="form.attr_id" placeholder="请选择属性">
-                <el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
-              </el-select>
-              <el-select style="margin: 0 10px; width: 130px" v-model="form.condition_id" placeholder="请选择">
-                <el-option
-                  :key="item.id"
-                  v-for="item in conditionOption"
-                  :value="item.value"
-                  :label="item.label"
-                ></el-option>
-              </el-select>
-              <el-input v-model="form.attr_value" style="width: 200px" placeholder="请输入"></el-input>
-            </div>
-            <p style="font-size: 12px; text-align: right; color: #ccc">所选择属性满足该条件的用户，将会触发该旅程</p>
-          </div>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <div>
-              <div style="display: flex">
-                <el-select @change="changeAttr" style="width: 130px" v-model="form.attr_id" placeholder="请选择属性">
-                  <el-option :key="item.id" v-for="item in attrOption" :value="item.id" :label="item.name"></el-option>
-                </el-select>
-                <el-select style="margin: 0 10px; width: 130px" v-model="form.condition_id" placeholder="请选择">
-                  <el-option
-                    :key="item.id"
-                    v-for="item in conditionOption"
-                    :value="item.value"
-                    :label="item.label"
-                  ></el-option>
-                </el-select>
-                <el-input v-model="form.attr_value" style="width: 200px" placeholder="请输入"></el-input>
-              </div>
-              <p style="font-size: 12px; text-align: right; color: #ccc">所选择属性满足该条件的用户，将会触发该旅程</p>
-            </div>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions4.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '关注公众号', value: '0' },
-  { label: '留言文本', value: '1' },
-  { label: '留言图片', value: '2' },
-  { label: '留言语音', value: '3' },
-  { label: '留言视频', value: '4' },
-  { label: '点击菜单', value: '5' },
-  { label: '点击菜单会话项', value: '6' },
-  { label: '扫描二维码', value: '7' },
-  { label: '取消关注', value: '8' },
-  { label: '其他', value: '9' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '1' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <el-input v-model="form.step_three_value" v-if="stepActive === 2" placeholder="请输入"></el-input>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-            <el-input v-model="form.step_three_value" v-if="stepActive === 2" placeholder="请输入"></el-input>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions5.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '用户发送文本私信', value: '0' },
-  { label: '用户发送表情私信', value: '1' },
-  { label: '用户发送卡片私信', value: '2' },
-  { label: '在主页Tab提交预约', value: '3' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '6' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 130px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions6.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '被用户关注', value: '0' },
-  { label: '主页被点赞', value: '1' },
-  { label: '主页被收藏', value: '2' },
-  { label: '笔记被点赞', value: '3' },
-  { label: '笔记被收藏', value: '4' },
-  { label: '笔记被转发', value: '5' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '8' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="8" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions7.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '关注微博', value: '0' },
-  { label: '发送私信', value: '1' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '7' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions8.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [
-  { label: '访问网页', value: '0' },
-  { label: '激活APP', value: '1' },
-  { label: '启动APP', value: '2' },
-  { label: '退出APP', value: '3' },
-  { label: '展示APP页面', value: '4' },
-  { label: '点击APP元素', value: '5' },
-  { label: '退出APP页面', value: '6' },
-  { label: '离开网页', value: '7' }
-]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '1' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="12" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group @change="form.step_two_value = ''" v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select
-            placeholder="请选择关联使用自定义链接名称"
-            style="width: 100%"
-            v-model="form.step_two_value"
-            v-if="stepActive === 1"
-          >
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-          <el-input
-            v-model="form.step_three_value"
-            v-if="stepActive === 2"
-            :placeholder="form.step_one_id === '0' || form.step_one_id === '7' ? '请输入网页地址' : '请输入APP名称'"
-          ></el-input>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group @change="form.step_two_value = ''" v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 105px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select
-              placeholder="请选择关联使用自定义链接名称"
-              style="width: 100%"
-              v-model="form.step_two_value"
-              v-if="stepActive === 1"
-            >
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-            <el-input
-              v-model="form.step_three_value"
-              v-if="stepActive === 2"
-              :placeholder="form.step_one_id === '0' || form.step_one_id === '7' ? '请输入网页地址' : '请输入APP名称'"
-            ></el-input>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 2">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 2">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

src/components/flow/components/triggeringConditions/TriggeringConditions9.vue

-<!-- 定时触发 -->
-<script setup>
-import { useVueFlow } from '@vue-flow/core'
-import NodeTemplate from '../NodeTemplate.vue'
-import Icon from '@/components/ConnectionIcon.vue'
-import { getConnectionList } from '@/api/flow'
-
-const props = defineProps({ node: Object })
-
-const action = inject('action')
-const role = inject('role')
-const templateType = inject('templateType')
-
-onMounted(() => {
-  // 学生固定旅程吧组件置灰
-  if (templateType === '2' && role === 'student') {
-    Object.assign(form, props.node.data)
-  }
-})
-
-const { findNode } = useVueFlow()
-// 设置
-const settingVisible = ref(false)
-
-const formRef = ref()
-const form = reactive({ step_one_id: '0', step_two_value: '', step_three_value: '' })
-
-watch(settingVisible, () => {
-  if (props.node) Object.assign(form, props.node.data)
-})
-
-const rules = ref({
-  score: [{ required: true, message: '请输入' }]
-})
-
-// 保存
-function handleSubmit() {
-  formRef.value.validate().then(() => {
-    form.isEdit = true
-    updateNode()
-    settingVisible.value = false
-    stepActive.value = 0
-  })
-}
-
-function updateNode() {
-  const node = findNode(props.node.id)
-  if (node) Object.assign(node.data, form)
-}
-
-function handleClosed() {
-  formRef.value.resetFields()
-}
-
-const stepOneOptions = [{ label: '新注册用户', value: '0' }]
-
-const stepTwoOptions = ref()
-onMounted(() => {
-  // 链接列表
-  getConnectionList({ type: '3' }).then(res => {
-    stepTwoOptions.value = res.data.list
-  })
-})
-
-// 步骤
-let stepActive = ref(0)
-</script>
-
-<template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
-    <div class="node-item">
-      <template v-if="templateType === '2' && role === 'student'">
-        <Icon name="circle" :color="form.isEdit === true ? '#4C5AB3' : 'rgb(154, 154, 154)'" w="60" h="60"></Icon>
-      </template>
-      <template v-else>
-        <Icon name="circle" color="#4C5AB3" w="60" h="60"></Icon>
-      </template>
-      <Icon class="icon" name="3" color="#fff" w="24" h="24"></Icon>
-    </div>
-  </NodeTemplate>
-
-  <el-dialog title="设置组件" append-to-body width="600px" v-model="settingVisible" @close="handleClosed">
-    <el-form :disabled="action === 'view'" ref="formRef" :model="form" :rules="rules" label-suffix="：">
-      <!-- 学生设置组件 -->
-      <template v-if="role === 'student'">
-        <el-row justify="space-between">
-          <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          <el-form-item label="分值">{{ form.score }} </el-form-item>
-        </el-row>
-        <el-form-item>
-          <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-            <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-              item.label
-            }}</el-radio>
-          </el-radio-group>
-          <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-            <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- 老师设置组件 -->
-      <template v-if="role === 'teacher'">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件类型">{{ form.type }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件名称">{{ form.name }}</el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="组件分值" prop="score">
-              <el-input v-model="form.score" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="已设置组件分值">110</el-form-item>
-          </el-col>
-        </el-row>
-        <el-card header="标准答案" shadow="never">
-          <el-form-item>
-            <el-radio-group v-model="form.step_one_id" v-if="stepActive === 0">
-              <el-radio style="width: 100px" :label="item.value" v-for="item in stepOneOptions">{{
-                item.label
-              }}</el-radio>
-            </el-radio-group>
-            <el-select placeholder="请选择" style="width: 100%" v-model="form.step_two_value" v-if="stepActive === 1">
-              <el-option v-for="item in stepTwoOptions" :value="item.id" :label="item.type_name"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-card>
-        <el-card header="答案解析" shadow="never" style="margin-top: 20px">
-          <el-form-item prop="answer_analysis">
-            <el-input v-model="form.answer_analysis" :rows="3" type="textarea" placeholder="请输入答案解析"></el-input>
-          </el-form-item>
-        </el-card>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-row justify="center">
-        <!-- <el-button plain auto-insert-space @click="settingVisible = false">关闭</el-button> -->
-        <el-button @click="stepActive--" plain auto-insert-space v-if="stepActive !== 0">上一步</el-button>
-        <el-button @click="stepActive++" plain auto-insert-space v-if="stepActive < 1">下一步</el-button>
-        <el-button type="primary" auto-insert-space @click="handleSubmit" v-if="stepActive === 1">保存</el-button>
-      </el-row>
-    </template>
-  </el-dialog>
-</template>
-<style scoped lang="scss">
-.node-item {
-  position: relative;
-  .icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

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'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  attr_id: '',
+  operate: '',
+  value: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { userAttrList } = useUserAttr()
+
+// 获取运算符列表
+function getOperatorList(type: string) {
+  if (type === '1') return stringOperatorList
+  if (type === '2' || type === '3') return numberOperatorList
+  if (type === '4' || type === '5') return dateOperatorList
+  return stringOperatorList
+}
+
+const operatorList = computed(() => {
+  const found = userAttrList.value.find(item => item.id === form.attr_id)
+  return found ? getOperatorList(found.type) : []
+})
+
+function onAttrChange() {
+  form.operate = ''
+  form.value = ''
+}
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <div>
+        <div style="display: flex">
+          <el-select v-model="form.attr_id" @change="onAttrChange" placeholder="请选择属性" style="width: 130px">
+            <el-option :key="item.id" v-for="item in userAttrList" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+          <el-select v-model="form.operate" style="margin: 0 10px; width: 130px">
+            <el-option
+              v-for="item in operatorList"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"></el-option>
+          </el-select>
+          <el-input v-model="form.value" placeholder="请输入" style="width: 200px"></el-input>
+        </div>
+        <p style="font-size: 12px; text-align: right; color: #ccc">所选择属性满足该条件的用户，将会触发该旅程</p>
+      </div>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 变更属性 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  app_name: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([
+  { label: '用户发送文本私信', value: '0' },
+  { label: '用户发送表情私信', value: '1' },
+  { label: '用户发送卡片私信', value: '2' },
+  { label: '在主页Tab提交预约', value: '3' }
+])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 105px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+        <template v-else-if="step === 2">
+          <el-input v-model="form.app_name" placeholder="请输入APP名称"></el-input>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 自定义 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="12" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useGroup } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { groupList } = useGroup()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-select style="width: 100%" v-model="form.id" placeholder="请选择需要监控的群组">
+        <el-option :key="item.id" v-for="item in groupList" :value="item.id" :label="item.name"></el-option>
+      </el-select>
+      <span style="font-size: 12px; text-align: right; color: #ccc"> 您选择的群组中，新加入的用户将会触发该旅程 </span>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 钉钉 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  app_name: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([
+  { label: '访问网页', value: '0' },
+  { label: '激活APP', value: '1' },
+  { label: '启动APP', value: '2' },
+  { label: '退出APP', value: '3' },
+  { label: '展示APP页面', value: '4' },
+  { label: '点击APP元素', value: '5' },
+  { label: '退出APP页面', value: '6' },
+  { label: '离开网页', value: '7' }
+])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 105px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+        <template v-else-if="step === 2">
+          <el-input v-model="form.app_name" placeholder="请输入APP名称"></el-input>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 抖音 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useGroup } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  group_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { groupList } = useGroup()
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item>
+      <el-select style="width: 100%" v-model="form.group_id" placeholder="请选择需要监控的群组">
+        <el-option :key="item.id" v-for="item in groupList" :value="item.id" :label="item.name"></el-option>
+      </el-select>
+      <span style="font-size: 12px; text-align: right; color: #ccc"> 您选择的群组中，新加入的用户将会触发该旅程 </span>
+    </el-form-item>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 加入群组 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([
+  { label: '关注公众号', value: '0' },
+  { label: '留言文本', value: '1' },
+  { label: '留言图片', value: '2' },
+  { label: '留言语音', value: '3' },
+  { label: '留言视频', value: '4' },
+  { label: '点击菜单', value: '5' },
+  { label: '点击菜单会话项', value: '6' },
+  { label: '扫描二维码', value: '7' },
+  { label: '取消关注', value: '8' },
+  { label: '其他', value: '9' }
+])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="2">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 105px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+        <template v-else-if="step === 2">
+          <el-input v-model="form.message" placeholder="请输入"></el-input>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 公众号 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>
\ No newline at end of file

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  trigger_type: '0',
+  trigger_time: '',
+  repeat_trigger: { num: '1', date_unit: '0', time: '', time_range: '' }
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node">
+    <el-form-item label="触发类型" prop="trigger_type">
+      <el-radio-group v-model="form.trigger_type">
+        <el-radio label="0">单次触发</el-radio>
+        <el-radio label="1">重复触发</el-radio>
+        <el-radio label="2">立即触发</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <template v-if="form.trigger_type === '0'">
+      <el-form-item label="触发时间" prop="trigger_time">
+        <el-date-picker v-model="form.trigger_time" type="date" />
+      </el-form-item>
+    </template>
+    <template v-if="form.trigger_type === '1'">
+      <el-form-item label="触发时间">
+        <div style="display: flex">
+          <span>每</span>
+          <el-input type="number" style="width: 50px; margin-left: 5px" v-model="form.repeat_trigger.num" />
+          <el-select style="width: 60px; margin: 0 5px" v-model="form.repeat_trigger.date_unit">
+            <el-option value="0" label="天"></el-option>
+            <el-option value="1" label="周"></el-option>
+            <el-option value="2" label="月"></el-option>
+          </el-select>
+          <span>的</span>
+          <el-time-picker v-model="form.repeat_trigger.time" style="width: 120px; margin: 0 5px" />
+          <span>触发</span>
+        </div>
+      </el-form-item>
+      <el-form-item label="起止时间">
+        <p style="font-size: 12px; color: #ccc">提示: 不设起止日期，发布期间会按上面的触发时间规则一直重复触发</p>
+        <el-date-picker
+          v-model="form.repeat_trigger.time_range"
+          type="datetimerange"
+          range-separator="To"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间" />
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 定时触发 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="13" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([
+  { label: '关注微博', value: '0' },
+  { label: '发送私信', value: '1' }
+])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="1">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 130px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 微博 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([{ label: '提交表单', value: '0' }])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="1">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 130px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 问卷星 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="4" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([{ label: '新用户注册', value: '0' }])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="1">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 130px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 小鹅通 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="3" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection()
+
+const operateList = ref([
+  { label: '被用户关注', value: '0' },
+  { label: '主页被点赞', value: '1' },
+  { label: '主页被收藏', value: '2' },
+  { label: '笔记被点赞', value: '3' },
+  { label: '笔记被收藏', value: '4' },
+  { label: '笔记被转发', value: '5' }
+])
+</script>
+
+<template>
+  <ConfigTemplate :model="form" :node="node" :stepNum="1">
+    <template #default="{ step }: { step: number }">
+      <el-form-item>
+        <template v-if="step === 0">
+          <el-radio-group v-model="form.operate" v-if="step === 0">
+            <el-radio v-for="item in operateList" :key="item.value" :label="item.value" style="width: 130px">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </template>
+        <template v-else-if="step === 1">
+          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
+            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+          </el-select>
+        </template>
+      </el-form-item>
+    </template>
+  </ConfigTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item label="学生答案"> </el-form-item>
+    <el-form-item label="正确答案"> </el-form-item>
+  </ConfigViewTemplate>
+</template>

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

+<!-- 小红书 -->
+<script setup lang="ts">
+import NodeTemplate from '../../NodeTemplate.vue'
+import Icon from '@/components/ConnectionIcon.vue'
+
+const Config = defineAsyncComponent(() => import('./Config.vue'))
+const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const action = inject('action') as string
+const role = inject('role') as string
+const templateType = inject('templateType') as string
+
+// 是否置灰
+const isGray = computed(() => {
+  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
+})
+
+// 设置
+const settingVisible = ref(false)
+</script>
+
+<template>
+  <NodeTemplate :node="node" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
+      <Icon class="icon" name="8" color="#fff" w="24" h="24"></Icon>
+    </div>
+  </NodeTemplate>
+  <!-- 配置 -->
+  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
+  <!-- 查看配置 -->
+  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
+</template>

src/components/flow/types.ts

@@ -9,10 +9,8 @@ export interface ComponentBaseData {
 // 立即触发
 export interface RealTimeTriggerData extends ComponentBaseData {
   trigger_type: string
-  time: string
-  time_rule?: string
-  time_rule_value?: string
-  time_range?: [string, string]
+  trigger_time: string
+  repeat_trigger?: { num: string; date_unit: string; time: string; time_range: string }
 }
 
 // 加入群组
@@ -33,10 +31,15 @@ export interface ChangePropsData extends ComponentBaseData {
 // 公众号
 export interface OffiaccountData extends ComponentBaseData {
   operate: string
-  account: string
+  connection_id: string
   message: string
 }
 
+// 抖音
+export interface DouyinData extends ComponentBaseData {
+  operate: string
+  connection_id: string
+}
 // 内部通知
 export interface NoticeData extends ComponentBaseData {
   message: string

src/components/flow/useAllData.ts

+import { getAttrList, getConnectionList, getTagList, getEventList, getGroupList, getMaterialList } from '@/api/flow'
+
+// 用户属性类型
+export interface AttrType {
+  id: string
+  name: string
+  type: string
+  format: string
+  english_name: string
+  pinyin: string
+}
+// 事件类型
+interface MetaEventType {
+  id: string
+  name: string
+  english_name: string
+  pinyin: string
+  event_attrs: AttrType[]
+}
+
+// 标签类型
+export interface TagType {
+  id: string
+  name: string
+}
+
+// 连接类型
+export interface ConnectionType {
+  id: string
+  name: string
+  type: number
+  status: '0' | '1'
+  config_attributes: any
+}
+
+// 群组类型
+export interface GroupType {
+  id: string
+  name: string
+}
+
+// 群组类型
+export interface MaterialType {
+  id: string
+  name: string
+  content: string
+  type: string
+}
+
+// 所有用户属性
+const userAttrList = ref<AttrType[]>([])
+export function useUserAttr() {
+  function fetchUserAttrList() {
+    getAttrList().then((res: any) => {
+      userAttrList.value = res.data.items
+    })
+  }
+  onMounted(() => {
+    if (!userAttrList.value?.length) fetchUserAttrList()
+  })
+  return { fetchUserAttrList, userAttrList }
+}
+
+// 所有事件
+const metaEventList = ref<MetaEventType[]>([])
+export function useMetaEvent() {
+  function fetchMetaEventList() {
+    getEventList().then((res: any) => {
+      metaEventList.value = res.data.items
+    })
+  }
+  onMounted(() => {
+    if (!metaEventList.value?.length) fetchMetaEventList()
+  })
+  return { fetchMetaEventList, metaEventList }
+}
+
+// 所有标签
+const tagList = ref<TagType[]>([])
+export function useTag() {
+  function fetchTagList() {
+    getTagList().then((res: any) => {
+      tagList.value = res.data.items
+    })
+  }
+  onMounted(() => {
+    if (!tagList.value?.length) fetchTagList()
+  })
+  return { fetchTagList, tagList }
+}
+
+// 所有连接
+const connectionList = ref<ConnectionType[]>([])
+export function useConnection() {
+  function fetchConnectionList() {
+    getConnectionList().then((res: any) => {
+      connectionList.value = res.data.items.map((item: any) => {
+        const attrs =
+          typeof item.config_attributes === 'string' ? JSON.parse(item.config_attributes) : item.config_attributes
+        const name = Array.isArray(attrs) ? attrs.find((item: any) => item.prop === 'name')?.value : attrs.name
+        return { ...item, config_attributes: attrs, name }
+      })
+    })
+  }
+  onMounted(() => {
+    if (!connectionList.value?.length) fetchConnectionList()
+  })
+  return { fetchConnectionList, connectionList }
+}
+
+// 所有群组
+const groupList = ref<GroupType[]>([])
+export function useGroup() {
+  function fetchGroupList() {
+    getGroupList().then((res: any) => {
+      groupList.value = res.data.items
+    })
+  }
+  onMounted(() => {
+    if (!groupList.value?.length) fetchGroupList()
+  })
+  return { fetchGroupList, groupList }
+}
+
+// 所有营销资料
+const materialList = ref<MaterialType[]>([])
+export function useMaterial() {
+  function fetchMaterialList() {
+    getMaterialList().then((res: any) => {
+      materialList.value = res.data.items
+    })
+  }
+  onMounted(() => {
+    if (!materialList.value?.length) fetchMaterialList()
+  })
+  return { fetchMaterialList, materialList }
+}

src/modules/trip/template/views/Setting.vue

@@ -15,6 +15,9 @@ const props = defineProps<{ id: string }>()
 const statusList = useMapStore().getMapValuesByKey('system_status')
 
 const detail = ref<TripTemplate>()
+const score = computed(() => {
+  return detail.value ? parseFloat(detail.value?.score) : 0
+})
 function fetchInfo() {
   getTripTemplate({ id: props.id }).then(res => {
     detail.value = res.data.detail
@@ -93,7 +96,7 @@ function handleConfig() {
         </el-row>
       </el-form>
     </el-card>
-    <TripFlow v-model="elements" action="edit" role="student" :templateType="detail?.type">
+    <TripFlow v-model="elements" action="edit" role="teacher" :templateType="detail?.type" :score="score">
       <template #left-panel>
         <TripFlowSidebar :connectionIds="connectionIds" />
       </template>
@@ -122,6 +125,5 @@ function handleConfig() {
     v-model="configVisible"
     :data="detail"
     v-if="configVisible && detail"
-    @update="fetchConnections"
-  ></BindConnection>
+    @update="fetchConnections"></BindConnection>
 </template>

vite.config.ts

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