Skip to content

S
saas-dml
提交 9e7cbfb7 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 e22781b2
隐藏空白字符变更
内嵌 并排
正在显示 包含 94 行增加 和 48 行删除
src/components/flow/Index.vue
浏览文件 @ 9e7cbfb7
......@@ -8,7 +8,6 @@ export default {
import { nanoid } from 'nanoid'
import { VueFlow, useVueFlow, PanelPosition } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'
import Sidebar from './Sidebar.vue'
import CustomNode from './CustomNode.vue'
import CustomEdge from './CustomEdge.vue'
......@@ -81,19 +80,9 @@ const onDrop = (event: DragEvent) => {
</script>
<template>
<div class="flow">
<Sidebar></Sidebar>
<slot name="left-panel"> </slot>
<el-card shadow="never" class="flow-main" @drop="onDrop">
<slot name="header">
<el-row align="middle" v-if="action === 'edit'">
<el-button type="primary" size="large">配置连接</el-button>
<el-alert center style="flex: 1; margin-left: 20px">
<p style="text-align: center">
用户旅程的基本组成：触发条件+营销动作+条件分支<br />
您可以从左侧组件区域选择的对应的触发条件、营销动作和条件分支，拖拽到右侧的画布里面，进行编排组合个性化的用户旅程。
</p>
</el-alert>
</el-row>
</slot>
<slot name="header"> </slot>
<VueFlow
fit-view-on-init
:zoom-on-scroll="false"
......@@ -110,6 +99,7 @@ const onDrop = (event: DragEvent) => {
</VueFlow>
<slot name="footer"></slot>
</el-card>
<slot name="right-panel"></slot>
</div>
</template>
......
src/components/flow/Sidebar.vue
浏览文件 @ 9e7cbfb7
<script setup lang="ts">
import { useConnection } from '@/composables/useAllData'
import Icon from '@/components/ConnectionIcon.vue'
const props = defineProps<{
connectionIds: string[]
}>()
// 所有连接
const { connectionList } = useConnection()
// 绑定的连接
const connections = computed(() => {
return connectionList.value.filter(item => props.connectionIds.includes(item.id))
})
const list = ref([
{
name: '触发条件',
background: {
icon: 'circle',
color: '#4C5AB3'
},
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' },
{ name: '抖音', type: '触发条件', icon: '6', componentName: 'TriggeringConditions5' },
{ name: '小红书', type: '触发条件', icon: '8', componentName: 'TriggeringConditions6' },
{ name: '微博', type: '触发条件', icon: '7', componentName: 'TriggeringConditions7' },
{ name: '自定义', type: '触发条件', icon: '12', componentName: 'TriggeringConditions8' },
{ name: '小鹅通', type: '触发条件', icon: '3', componentName: 'TriggeringConditions9' },
{ name: '问卷星', type: '触发条件', icon: '4', componentName: 'TriggeringConditions10' }
{ 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: '营销动作',
background: {
icon: 'square',
color: '#19AAA5'
},
background: { icon: 'square', color: '#19AAA5' },
children: [
// { name: '终止旅程', type: '营销动作', icon: '16' },
{ name: '加入群组', type: '营销动作', icon: '14', componentName: 'MarketingAction1' },
......@@ -33,32 +41,40 @@ const list = ref([
{ name: '变更属性', type: '营销动作', icon: '15', componentName: 'MarketingAction3' },
{ name: '延时处理', type: '营销动作', icon: '18', componentName: 'MarketingAction4' },
{ name: '内部通知', type: '营销动作', icon: '19', componentName: 'MarketingAction5' },
{ name: '短信', type: '营销动作', icon: '10', componentName: 'MarketingAction6' },
{ name: '邮件', type: '营销动作', icon: '9', componentName: 'MarketingAction7' },
{ name: '公众号', type: '营销动作', icon: '1', componentName: 'MarketingAction8' },
{ name: '抖音', type: '营销动作', icon: '6', componentName: 'MarketingAction9' },
// { name: '小红书', type: '营销动作', icon: '8' },
{ name: '微博', type: '营销动作', icon: '7', componentName: 'MarketingAction10' },
{ name: '钉钉', type: '营销动作', icon: '2', componentName: 'MarketingAction11' }
{ 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: '条件分支',
background: {
icon: 'hexagon',
color: '#CEAA62'
},
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' }
{ name: '公众号', type: '条件分支', icon: '1', componentName: 'ConditionalBranch5', connection_type: 1 }
]
}
])
const currentList = computed(() => {
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
)
}
})
})
const onDragStart = (event: DragEvent, data: any) => {
if (event.dataTransfer) {
event.dataTransfer.setData('application/vueflow', JSON.stringify(data))
......@@ -69,7 +85,7 @@ const onDragStart = (event: DragEvent, data: any) => {
<template>
<el-card shadow="never" class="flow-sidebar">
<dl v-for="(parent, index) in list" :key="index">
<dl v-for="(parent, index) in currentList" :key="index">
<dt :style="`background: ${parent.background?.color}`">{{ parent.name }}</dt>
<dd>
<ul>
......@@ -77,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
......@@ -86,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/composables/useAllData.ts
浏览文件 @ 9e7cbfb7
......@@ -28,7 +28,7 @@ export interface TagType {
export interface ConnectionType {
id: string
name: string
type: string
type: number
status: '0' | '1'
config_attributes: any
}
......
src/modules/trip/template/views/Setting.vue
浏览文件 @ 9e7cbfb7
<!-- 固定旅程模板配置 -->
<script setup lang="ts">
import type { TripTemplate } from '../types'
import type { ConnectionType } from '@/composables/useAllData'
import { ElMessage } from 'element-plus'
import TripFlow from '@/components/flow/Index.vue'
import { getTripTemplate, getTripTemplateDemo, updateTripTemplateDemo } from '../api'
import TripFlowSidebar from '@/components/flow/Sidebar.vue'
import { getTripTemplate, getTripConnections, getTripTemplateDemo, updateTripTemplateDemo } from '../api'
import { useMapStore } from '@/stores/map'
import { getNameByValue, tripTemplateTypeList } from '@/utils/dictionary'
const BindConnection = defineAsyncComponent(() => import('../components/BindConnection.vue'))
const props = defineProps<{ id: string }>()
......@@ -19,6 +23,17 @@ function fetchInfo() {
onMounted(() => fetchInfo())
const connections = ref<ConnectionType[]>([])
const connectionIds = computed(() => {
return connections.value.map(item => item.id)
})
function fetchConnections() {
getTripConnections({ itinerary_id: props.id }).then(res => {
connections.value = res.data.items
})
}
onMounted(() => fetchConnections())
const elements = ref([])
// 获取模板配置数据
function fetchDemo() {
......@@ -39,6 +54,12 @@ function handleSubmit() {
ElMessage.success('保存成功')
})
}
// 配置
let configVisible = $ref(false)
function handleConfig() {
configVisible = true
}
</script>
<template>
<AppCard title="固定旅程模版配置">
......@@ -73,12 +94,33 @@ function handleSubmit() {
</el-form>
</el-card>
<TripFlow v-model="elements" action="edit" role="teacher">
<template #left-panel>
<TripFlowSidebar :connectionIds="connectionIds" />
</template>
<template #header>
<el-row align="middle">
<el-button type="primary" size="large" @click="handleConfig">配置连接</el-button>
<el-alert center style="flex: 1; margin-left: 20px">
<p style="text-align: center">
用户旅程的基本组成：触发条件+营销动作+条件分支<br />
您可以从左侧组件区域选择的对应的触发条件、营销动作和条件分支，拖拽到右侧的画布里面，进行编排组合个性化的用户旅程。
</p>
</el-alert>
</el-row>
</template>
<template #footer>
<el-row justify="center">
<el-button plain auto-insert-space>取消</el-button>
<el-button plain auto-insert-space @click="$router.push('/trip/template')">取消</el-button>
<el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
</el-row>
</template>
</TripFlow>
</AppCard>
<!-- 配置连接 -->
<BindConnection
v-model="configVisible"
:data="detail"
v-if="configVisible && detail"
@update="fetchConnections"></BindConnection>
</template>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论