feat: 旅程增加视频号

src/components/flow/CustomNode.vue

@@ -27,6 +27,7 @@ const component = computed(() => {
     MAWeibo: markRaw(defineAsyncComponent(() => import('./components/marketingAction/weibo/Index.vue'))),
     MADingTalk: markRaw(defineAsyncComponent(() => import('./components/marketingAction/dingtalk/Index.vue'))),
     MAAB: markRaw(defineAsyncComponent(() => import('./components/marketingAction/ab/Index.vue'))),
+    MAWechatVideo: markRaw(defineAsyncComponent(() => import('./components/marketingAction/wechatVideo/Index.vue'))),
     MAXiaohongshu: markRaw(defineAsyncComponent(() => import('./components/marketingAction/xiaohongshu/Index.vue'))),
     CBAttributeJudgment: markRaw(defineAsyncComponent(() => import('./components/conditionalBranch/attributeJudgment/Index.vue'))),
     CBGroupJudgment: markRaw(defineAsyncComponent(() => import('./components/conditionalBranch/groupJudgment/Index.vue'))),

src/components/flow/Sidebar.vue

@@ -27,7 +27,7 @@ const list = ref([
         type_name: '触发条件',
         icon: '13',
         component_type: 1,
-        component_name: 'TCRealTimeTrigger'
+        component_name: 'TCRealTimeTrigger',
       },
       {
         name: '加入群组',
@@ -35,7 +35,7 @@ const list = ref([
         type_name: '触发条件',
         icon: '14',
         component_type: 2,
-        component_name: 'TCJoinGroup'
+        component_name: 'TCJoinGroup',
       },
       {
         name: '变更属性',
@@ -43,7 +43,7 @@ const list = ref([
         type_name: '触发条件',
         icon: '15',
         component_type: 3,
-        component_name: 'TCChangeProps'
+        component_name: 'TCChangeProps',
       },
       {
         name: '公众号',
@@ -52,7 +52,7 @@ const list = ref([
         icon: '1',
         component_type: 4,
         component_name: 'TCOffiaccount',
-        connection_type: 1
+        connection_type: 1,
       },
       {
         name: '抖音',
@@ -61,7 +61,7 @@ const list = ref([
         icon: '6',
         component_type: 5,
         component_name: 'TCDouyin',
-        connection_type: 6
+        connection_type: 6,
       },
       {
         name: '小红书',
@@ -70,7 +70,7 @@ const list = ref([
         icon: '8',
         component_type: 6,
         component_name: 'TCXiaohongshu',
-        connection_type: 8
+        connection_type: 8,
       },
       {
         name: '微博',
@@ -79,7 +79,7 @@ const list = ref([
         icon: '7',
         component_type: 7,
         component_name: 'TCWeibo',
-        connection_type: 7
+        connection_type: 7,
       },
       {
         name: '自定义',
@@ -88,7 +88,7 @@ const list = ref([
         icon: '12',
         component_type: 10,
         component_name: 'TCCustom',
-        connection_type: 12
+        connection_type: 12,
       },
       {
         name: '小鹅通',
@@ -97,7 +97,7 @@ const list = ref([
         icon: '3',
         component_type: 8,
         component_name: 'TCXiaoetong',
-        connection_type: 3
+        connection_type: 3,
       },
       {
         name: '问卷星',
@@ -106,9 +106,9 @@ const list = ref([
         icon: '4',
         component_type: 9,
         component_name: 'TCWenjuanxing',
-        connection_type: 4
-      }
-    ]
+        connection_type: 4,
+      },
+    ],
   },
   {
     name: '营销动作',
@@ -121,7 +121,7 @@ const list = ref([
         icon: '16',
         component_type: 99,
         component_name: 'MAEndTrip',
-        color: '#AA1941'
+        color: '#AA1941',
       },
       {
         name: '加入群组',
@@ -129,7 +129,7 @@ const list = ref([
         type_name: '营销动作',
         icon: '14',
         component_type: 1,
-        component_name: 'MAJoinGroup'
+        component_name: 'MAJoinGroup',
       },
       {
         name: '移除群组',
@@ -137,7 +137,7 @@ const list = ref([
         type_name: '营销动作',
         icon: '17',
         component_type: 2,
-        component_name: 'MALeaveGroup'
+        component_name: 'MALeaveGroup',
       },
       {
         name: '变更属性',
@@ -145,7 +145,7 @@ const list = ref([
         type_name: '营销动作',
         icon: '15',
         component_type: 3,
-        component_name: 'MAChangeProps'
+        component_name: 'MAChangeProps',
       },
       {
         name: '延时处理',
@@ -153,7 +153,7 @@ const list = ref([
         type_name: '营销动作',
         icon: '18',
         component_type: 4,
-        component_name: 'MADelayProcess'
+        component_name: 'MADelayProcess',
       },
       {
         name: '内部通知',
@@ -161,7 +161,7 @@ const list = ref([
         type_name: '营销动作',
         icon: '19',
         component_type: 5,
-        component_name: 'MAInternalNotice'
+        component_name: 'MAInternalNotice',
       },
       {
         name: '短信',
@@ -170,7 +170,7 @@ const list = ref([
         icon: '10',
         component_type: 11,
         component_name: 'MASMS',
-        connection_type: 10
+        connection_type: 10,
       },
       {
         name: '邮件',
@@ -179,7 +179,7 @@ const list = ref([
         icon: '9',
         component_type: 10,
         component_name: 'MAEmail',
-        connection_type: 9
+        connection_type: 9,
       },
       {
         name: '公众号',
@@ -188,7 +188,7 @@ const list = ref([
         icon: '1',
         component_type: 6,
         component_name: 'MAOffiaccount',
-        connection_type: 1
+        connection_type: 1,
       },
       {
         name: '抖音',
@@ -197,9 +197,17 @@ const list = ref([
         icon: '6',
         component_type: 7,
         component_name: 'MADouyin',
-        connection_type: 6
+        connection_type: 6,
+      },
+      {
+        name: '小红书',
+        type: 2,
+        type_name: '营销动作',
+        icon: '8',
+        component_type: 13,
+        component_name: 'MAXiaohongshu',
+        connection_type: 8,
       },
-      { name: '小红书', type: 2, type_name: '营销动作', icon: '8', component_type: 13, component_name: 'MAXiaohongshu', connection_type: 8 },
       {
         name: '微博',
         type: 2,
@@ -207,7 +215,7 @@ const list = ref([
         icon: '7',
         component_type: 8,
         component_name: 'MAWeibo',
-        connection_type: 7
+        connection_type: 7,
       },
       {
         name: '钉钉',
@@ -216,7 +224,7 @@ const list = ref([
         icon: '2',
         component_type: 9,
         component_name: 'MADingTalk',
-        connection_type: 2
+        connection_type: 2,
       },
       {
         name: 'A/B分配',
@@ -224,9 +232,17 @@ const list = ref([
         type_name: '营销动作',
         icon: '101',
         component_type: 12,
-        component_name: 'MAAB'
-      }
-    ]
+        component_name: 'MAAB',
+      },
+      {
+        name: '视频号',
+        type: 2,
+        type_name: '营销动作',
+        icon: 'wechatVideo',
+        component_type: 16,
+        component_name: 'MAWechatVideo',
+      },
+    ],
   },
   {
     name: '条件分支',
@@ -238,7 +254,7 @@ const list = ref([
         type_name: '条件分支',
         icon: '20',
         component_type: 1,
-        component_name: 'CBAttributeJudgment'
+        component_name: 'CBAttributeJudgment',
       },
       {
         name: '标签判断',
@@ -246,7 +262,7 @@ const list = ref([
         type_name: '条件分支',
         icon: '21',
         component_type: 2,
-        component_name: 'CBLabelJudgment'
+        component_name: 'CBLabelJudgment',
       },
       {
         name: '群组判断',
@@ -254,7 +270,7 @@ const list = ref([
         type_name: '条件分支',
         icon: '22',
         component_type: 3,
-        component_name: 'CBGroupJudgment'
+        component_name: 'CBGroupJudgment',
       },
       {
         name: '事件判断',
@@ -262,7 +278,7 @@ const list = ref([
         type_name: '条件分支',
         icon: '23',
         component_type: 5,
-        component_name: 'CBEventJudgment'
+        component_name: 'CBEventJudgment',
       },
       {
         name: '时间判断',
@@ -270,7 +286,7 @@ const list = ref([
         type_name: '条件分支',
         icon: '24',
         component_type: 4,
-        component_name: 'CBTimeJudgment'
+        component_name: 'CBTimeJudgment',
       },
       {
         name: '公众号',
@@ -279,7 +295,7 @@ const list = ref([
         icon: '1',
         component_type: 6,
         component_name: 'CBOffiaccount',
-        connection_type: 1
+        connection_type: 1,
       },
       {
         name: '小红书',
@@ -288,7 +304,7 @@ const list = ref([
         icon: '8',
         component_type: 7,
         component_name: 'CBXiaohongshu',
-        connection_type: 8
+        connection_type: 8,
       },
       {
         name: '抖音',
@@ -297,17 +313,19 @@ const list = ref([
         icon: '6',
         component_type: 8,
         component_name: 'CBDouyin',
-        connection_type: 6
-      }
-    ]
-  }
+        connection_type: 6,
+      },
+    ],
+  },
 ])
 
 const currentList = computed(() => {
-  return list.value.map(item => {
+  return list.value.map((item) => {
     return {
       ...item,
-      children: item.children.filter(item => (item.connection_type ? connections.value.find(connection => connection.type === item.connection_type) : true))
+      children: item.children.filter((item) =>
+        item.connection_type ? connections.value.find((connection) => connection.type === item.connection_type) : true
+      ),
     }
   })
 })
@@ -326,9 +344,18 @@ const onDragStart = (event: DragEvent, data: any) => {
       <dt :style="`background: ${parent.background?.color}`">{{ parent.name }}</dt>
       <dd>
         <ul>
-          <li v-for="(item, index) in parent.children" :key="index" :draggable="true" @dragstart="event => onDragStart(event, item)">
+          <li
+            v-for="(item, index) in parent.children"
+            :key="index"
+            :draggable="true"
+            @dragstart="(event) => onDragStart(event, item)">
             <div class="icon-box">
-              <Icon class="circle" :color="item.color || parent.background?.color" :name="parent.background?.icon || ''" w="60" h="60"></Icon>
+              <Icon
+                class="circle"
+                :color="item.color || parent.background?.color"
+                :name="parent.background?.icon || ''"
+                w="60"
+                h="60"></Icon>
               <Icon class="icon" color="#fff" :name="item.icon" w="24" h="24"></Icon>
             </div>
             <p>{{ item.name }}</p>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection, useMaterial } from '../../../composables/useAllData'
+
+const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  connection_id: '',
+  message: '',
+  material_id: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const operateList = ref([{ label: '推送视频号视频', value: '0' }])
+
+const { materialList } = useMaterial('4')
+
+const { connectionList } = useConnection(10)
+
+const material = computed(() => materialList.value.find(item => item.id === form.material_id))
+
+watch(material, () => {
+  if (material.value) {
+    form.message = material.value.content
+  }
+})
+</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" :value="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-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>
+          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
+        </el-form-item>
+        <!-- <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/wechatVideo/ConfigView.vue

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+import { useConnection } from '../../../composables/useAllData'
+
+const role = inject('role') as string
+
+defineProps<{ node: any }>()
+
+const { connectionList } = useConnection()
+
+const operateList = [{ label: '推送视频号视频', value: '0' }]
+
+const getConnectionLabel = function (id: string) {
+  return connectionList.value.find(item => item.id === id)?.name || ''
+}
+</script>
+
+<template>
+  <ConfigViewTemplate :node="node">
+    <el-form-item :label="role === 'student' ? '我的答案' : '学生答案'">
+      {{ operateList.find(item => item.value === node.data.student?.operate)?.label || '' }}
+      {{ getConnectionLabel(node.data.student?.connection_id) }}
+      {{ node.data.student?.message }}
+    </el-form-item>
+    <el-form-item label="正确答案">
+      {{ operateList.find(item => item.value === node.data.teacher?.operate)?.label || '' }}
+      {{ getConnectionLabel(node.data.teacher?.connection_id) }}
+      {{ node.data.teacher?.message }}
+    </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/marketingAction/wechatVideo/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 Rule = defineAsyncComponent(() => import('./Rule.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" :connectionType="2" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon class="circle" name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
+      <Icon class="icon" name="wechatVideo" 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'" />
+  <!-- 数据生成规则 -->
+  <Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
+</template>

src/components/flow/components/marketingAction/wechatVideo/Rule.vue

+<script setup lang="ts">
+import RuleTemplate from '../../RuleTemplate.vue'
+
+defineProps<{ node: any }>()
+</script>
+
+<template>
+  <RuleTemplate :node="node" step>
+    <template #header-answer>答案</template>
+  </RuleTemplate>
+</template>