chore: 旅程增加营销动作和条件分支

src/components/base/AppCard.vue

@@ -60,7 +60,11 @@ const styleHeight = computed(() => {
   font-size: 18px;
   font-weight: 500;
   line-height: 1;
+  color: #aa1941;
   margin: 20px 0;
   border-left: 3px solid #aa1941;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 </style>

src/components/flow/CustomNode.vue

@@ -27,12 +27,15 @@ 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'))),
+    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'))),
     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')))
+    CBLabelJudgment: markRaw(defineAsyncComponent(() => import('./components/conditionalBranch/labelJudgment/Index.vue'))),
+    CBXiaohongshu: markRaw(defineAsyncComponent(() => import('./components/conditionalBranch/xiaohongshu/Index.vue'))),
+    CBDouyin: markRaw(defineAsyncComponent(() => import('./components/conditionalBranch/douyin/Index.vue')))
   }
   return allComponent[props.node?.data.component_name || props.node?.data.componentName]
 })

src/components/flow/Sidebar.vue

@@ -15,6 +15,7 @@ const connections = computed(() => {
   // return connectionList.value.filter(item => props.connectionIds?.includes(item.id))
 })
 
+// component_type https://gitlab-pro.ezijing.com/ezijing-server/api-documents/blob/master/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/DML-%E5%AE%9E%E9%AA%8C%E5%B9%B3%E5%8F%B0%E7%AE%A1%E7%90%86-%E5%AE%9E%E9%AA%8C%E6%95%B0%E6%8D%AE%E7%AE%A1%E7%90%86.md#%E8%8E%B7%E5%8F%96%E5%AE%9E%E9%AA%8C%E6%97%85%E7%A8%8B%E6%A3%80%E7%B4%A2%E7%94%A8%E6%88%B7%E7%9A%84%E7%BB%93%E6%9E%9C
 const list = ref([
   {
     name: '触发条件',
@@ -198,7 +199,7 @@ const list = ref([
         component_name: 'MADouyin',
         connection_type: 6
       },
-      // { name: '小红书', type: 2, type_name: '营销动作', icon: '8',component_type:2, component_name: 'MAXiaohongshu', connection_type: 8 },
+      { name: '小红书', type: 2, type_name: '营销动作', icon: '8', component_type: 13, component_name: 'MAXiaohongshu', connection_type: 8 },
       {
         name: '微博',
         type: 2,
@@ -279,16 +280,34 @@ const list = ref([
         component_type: 6,
         component_name: 'CBOffiaccount',
         connection_type: 1
+      },
+      {
+        name: '小红书',
+        type: 3,
+        type_name: '条件分支',
+        icon: '8',
+        component_type: 7,
+        component_name: 'CBXiaohongshu',
+        connection_type: 8
+      },
+      {
+        name: '抖音',
+        type: 3,
+        type_name: '条件分支',
+        icon: '6',
+        component_type: 8,
+        component_name: 'CBDouyin',
+        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))
     }
   })
 })
@@ -307,7 +326,7 @@ 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="icon" color="#fff" :name="item.icon" w="24" h="24"></Icon>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../composables/useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  operate_name: '',
+  connection_id: '',
+  connection_name: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection(6)
+
+const operateList = ref([{ label: '关注中', value: '0' }])
+
+watchEffect(() => {
+  form.operate_name = operateList.value.find(item => item.value === form.operate)?.label || ''
+})
+
+watchEffect(() => {
+  form.connection_name = connectionList.value.find(item => item.id === form.connection_id)?.name || ''
+})
+</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" :value="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/douyin/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 operateList = [{ label: '关注中', value: '0' }]
+
+const { connectionList } = useConnection()
+
+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) }}
+    </el-form-item>
+    <el-form-item label="正确答案">
+      {{ operateList.find(item => item.value === node.data.teacher?.operate)?.label || '' }}
+      {{ getConnectionLabel(node.data.teacher?.connection_id) }}
+    </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/conditionalBranch/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 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="1" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon class="circle" name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" 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'" />
+  <!-- 数据生成规则 -->
+  <Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
+</template>

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

+<script setup lang="ts">
+import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection } from '../../../composables/useAllData'
+
+const { getConnection } = useConnection()
+
+const props = defineProps<{ node: any }>()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => {
+  return getConnection(config.value?.connection_id)
+})
+</script>
+
+<template>
+  <RuleTemplate :node="node" step>
+    <template #header-answer>
+      连接：<span class="is-answer">{{ connection?.name }}</span> &nbsp;&nbsp; 事件：<span class="is-answer">关注抖音</span>
+    </template>
+  </RuleTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useConnection } from '../../../composables/useAllData'
+
+const props = defineProps<{ node: any }>()
+
+const role = inject('role') as string
+
+const form = reactive({
+  operate: '',
+  operate_name: '',
+  connection_id: '',
+  connection_name: ''
+})
+watchEffect(() => {
+  Object.assign(form, props.node.data[role])
+})
+
+const { connectionList } = useConnection(8)
+
+const operateList = ref([{ label: '关注中', value: '0' }])
+
+watchEffect(() => {
+  form.operate_name = operateList.value.find(item => item.value === form.operate)?.label || ''
+})
+
+watchEffect(() => {
+  form.connection_name = connectionList.value.find(item => item.id === form.connection_id)?.name || ''
+})
+</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" :value="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/xiaohongshu/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 operateList = [{ label: '关注中', value: '0' }]
+
+const { connectionList } = useConnection()
+
+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) }}
+    </el-form-item>
+    <el-form-item label="正确答案">
+      {{ operateList.find(item => item.value === node.data.teacher?.operate)?.label || '' }}
+      {{ getConnectionLabel(node.data.teacher?.connection_id) }}
+    </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/conditionalBranch/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 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="1" @setting="settingVisible = true">
+    <div class="node-item">
+      <Icon class="circle" name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" 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'" />
+  <!-- 数据生成规则 -->
+  <Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
+</template>

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

+<script setup lang="ts">
+import RuleTemplate from '../../RuleTemplate.vue'
+import { useConnection } from '../../../composables/useAllData'
+
+const { getConnection } = useConnection()
+
+const props = defineProps<{ node: any }>()
+
+const config = computed(() => {
+  return props.node.data.teacher || {}
+})
+
+const connection = computed(() => {
+  return getConnection(config.value?.connection_id)
+})
+</script>
+
+<template>
+  <RuleTemplate :node="node" step>
+    <template #header-answer>
+      连接：<span class="is-answer">{{ connection?.name }}</span> &nbsp;&nbsp; 事件：<span class="is-answer"
+        >关注小红书</span
+      >
+    </template>
+  </RuleTemplate>
+</template>

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

+<script setup lang="ts">
+import ConfigTemplate from '../../ConfigTemplate.vue'
+import { useMaterial, useConnection } from '../../../composables/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, materialType } = useMaterial()
+watchEffect(() => {
+  materialType.value = form.material_type
+})
+
+const { connectionList } = useConnection(8)
+</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-radio-group v-model="form.material_type" @change="form.material_id = ''">
+            <el-radio v-for="item in materialTypeList" :key="item.id" :value="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/xiaohongshu/ConfigView.vue

+<script setup lang="ts">
+import ConfigViewTemplate from '../../ConfigViewTemplate.vue'
+import { useMaterial, useConnection } from '../../../composables/useAllData'
+import { useMapStore } from '@/stores/map'
+
+const role = inject('role') as string
+
+defineProps<{ node: any }>()
+
+const operateList = ref([
+  { label: '向用户发送文本私信', value: '0' },
+  { label: '向用户发送图片私信', value: '1' },
+  { label: '向用户发送视频私信', value: '2' }
+])
+
+const { connectionList } = useConnection()
+
+const getConnectionLabel = function (id: string) {
+  return connectionList.value.find(item => item.id === id)?.name || ''
+}
+
+const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
+
+const { materialList } = useMaterial()
+</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) }}
+      发送{{ materialTypeList.find(item => item.value === node.data.student?.material_type)?.label }}
+      {{ materialList.find(item => item.id === node.data.student?.material_id)?.name }}
+    </el-form-item>
+    <el-form-item label="正确答案">
+      {{ operateList.find(item => item.value === node.data.teacher?.operate)?.label || '' }}
+      {{ getConnectionLabel(node.data.teacher?.connection_id) }}
+      发送{{ materialTypeList.find(item => item.value === node.data.teacher?.material_type)?.label }}
+      {{ materialList.find(item => item.id === node.data.teacher?.material_id)?.name }}
+    </el-form-item>
+  </ConfigViewTemplate>
+</template>

src/components/flow/components/marketingAction/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 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="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'" />
+  <!-- 数据生成规则 -->
+  <Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
+</template>

src/components/flow/components/marketingAction/xiaohongshu/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>

src/modules/connect/components/ListItem.vue

@@ -112,7 +112,7 @@ const handleStudentFollow = function () {
               <el-icon size="16" color="#000" @click.stop="edit"><Avatar /></el-icon>
               <span>自动生成事件数据</span>
             </li>
-            <li @click.top="viewDataProgress">
+            <li @click.stop="viewDataProgress">
               <el-icon size="16" color="#000" @click.stop="edit"><PieChart /></el-icon>
               <span>数据生成进度</span>
             </li>