Skip to content

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

chore: 修改旅程模板连接线

上级 5f8ffb99
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 203 行增加 和 235 行删除
.eslintrc-auto-import.json
浏览文件 @ e4858893
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
"useArrayFilter": true, "useArrayFilter": true,
"useArrayFind": true, "useArrayFind": true,
"useArrayFindIndex": true, "useArrayFindIndex": true,
"useArrayFindLast": true,
"useArrayJoin": true, "useArrayJoin": true,
"useArrayMap": true, "useArrayMap": true,
"useArrayReduce": true, "useArrayReduce": true,
......
auto-imports.d.ts
浏览文件 @ e4858893
// Generated by 'unplugin-auto-import' /* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-auto-import
export {} export {}
declare global { declare global {
const $$: typeof import('vue/macros')['$$'] const $$: typeof import('vue/macros')['$$']
...@@ -109,6 +112,7 @@ declare global { ...@@ -109,6 +112,7 @@ declare global {
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter'] const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
const useArrayFind: typeof import('@vueuse/core')['useArrayFind'] const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex'] const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin'] const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
const useArrayMap: typeof import('@vueuse/core')['useArrayMap'] const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
...@@ -276,5 +280,5 @@ declare global { ...@@ -276,5 +280,5 @@ declare global {
// for type re-export // for type re-export
declare global { declare global {
// @ts-ignore // @ts-ignore
export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue' export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
} }
package-lock.json
浏览文件 @ e4858893
差异被折叠。
package.json
浏览文件 @ e4858893
...@@ -15,17 +15,17 @@ ...@@ -15,17 +15,17 @@
"cert": "node ./cert.js" "cert": "node ./cert.js"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.1.0",
"@tinymce/tinymce-vue": "^5.0.0", "@tinymce/tinymce-vue": "^5.0.1",
"@vue-flow/controls": "^1.0.4", "@vue-flow/controls": "^1.0.4",
"@vue-flow/core": "^1.15.2", "@vue-flow/core": "^1.15.5",
"@vueuse/core": "^9.13.0", "@vueuse/core": "^9.13.0",
"axios": "^1.3.4", "axios": "^1.3.4",
"blueimp-md5": "^2.19.0", "blueimp-md5": "^2.19.0",
"element-plus": "^2.2.32", "element-plus": "^2.2.35",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"nanoid": "^4.0.1", "nanoid": "^4.0.1",
"pinia": "^2.0.32", "pinia": "^2.0.33",
"vue": "^3.2.47", "vue": "^3.2.47",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
"eslint-plugin-vue": "^9.9.0", "eslint-plugin-vue": "^9.9.0",
"sass": "^1.58.3", "sass": "^1.58.3",
"typescript": "~4.9.5", "typescript": "~4.9.5",
"unplugin-auto-import": "^0.15.0", "unplugin-auto-import": "^0.15.1",
"vite": "^4.1.4", "vite": "^4.1.4",
"vue-tsc": "^1.2.0" "vue-tsc": "^1.2.0"
} }
......
src/components/flow/CustomEdge.vue
浏览文件 @ e4858893
<script setup> <script setup>
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core' import { StraightEdge, EdgeLabelRenderer, useVueFlow, getStraightPath } from '@vue-flow/core'
import { CircleClose } from '@element-plus/icons-vue' import { CircleCloseFilled } from '@element-plus/icons-vue'
const props = defineProps({ const props = defineProps({
id: { type: String, required: true }, id: { type: String, required: true },
...@@ -12,14 +12,13 @@ const props = defineProps({ ...@@ -12,14 +12,13 @@ const props = defineProps({
targetPosition: { type: String, required: true }, targetPosition: { type: String, required: true },
data: { type: Object, required: false }, data: { type: Object, required: false },
markerEnd: { type: String, required: false }, markerEnd: { type: String, required: false },
style: { type: Object, required: false } style: { type: Object, required: false },
label: { required: false }
}) })
const { removeEdges } = useVueFlow() const { removeEdges } = useVueFlow()
const path = computed(() => { const path = computed(() => getStraightPath(props))
return getBezierPath(props)
})
</script> </script>
<script> <script>
...@@ -29,35 +28,30 @@ export default { ...@@ -29,35 +28,30 @@ export default {
</script> </script>
<template> <template>
<!-- You can use the `BaseEdge` component to create your own custom edge more easily --> <StraightEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd"></StraightEdge>
<!-- :marker-end="markerEnd" -->
<BaseEdge :id="id" :style="style" :path="path[0]" marker-end="url(#triangle)" />
<defs>
<marker
id="triangle"
viewBox="0 0 1 10"
refX="1"
refY="5"
markerUnits="strokeWidth"
markerHeight="8"
markerWidth="8"
orient="auto"
>
<path d="M 0 1.5 L 4 5 L 0 8.5 z" />
</marker>
</defs>
<!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
<EdgeLabelRenderer> <EdgeLabelRenderer>
<div <div class="edge-label" :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)` }">
:style="{ <span v-if="label">{{ label }}</span>
pointerEvents: 'all', <el-icon @click="removeEdges([id])"><CircleCloseFilled /></el-icon>
position: 'absolute',
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
}"
@click="removeEdges([id])"
>
<el-icon style="color: var(--main-color)"><CircleClose /></el-icon>
</div> </div>
</EdgeLabelRenderer> </EdgeLabelRenderer>
</template> </template>
<style lang="scss">
.edge-label {
display: flex;
align-items: center;
pointer-events: all;
position: absolute;
background-color: #fff;
span {
margin-right: 5px;
}
.el-icon {
display: block;
font-size: 20px;
color: var(--main-color);
}
}
</style>
src/components/flow/CustomNode.vue
浏览文件 @ e4858893
<script setup lang="ts"> <script setup lang="ts">
import type { NodeProps } from '@vue-flow/core'
const props = defineProps<{ node: NodeProps }>()
const component = computed(() => { const component = computed(() => {
const allComponent: any = { const allComponent: any = {
TCRealTimeTrigger: markRaw( TCRealTimeTrigger: markRaw(
...@@ -21,6 +24,7 @@ const component = computed(() => { ...@@ -21,6 +24,7 @@ const component = computed(() => {
TCWenjuanxing: markRaw( TCWenjuanxing: markRaw(
defineAsyncComponent(() => import('./components/triggeringConditions/wenjuanxing/Index.vue')) defineAsyncComponent(() => import('./components/triggeringConditions/wenjuanxing/Index.vue'))
), ),
MAEndTrip: markRaw(defineAsyncComponent(() => import('./components/marketingAction/endTrip/Index.vue'))),
MAJoinGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/joinGroup/Index.vue'))), MAJoinGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/joinGroup/Index.vue'))),
MALeaveGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/leaveGroup/Index.vue'))), MALeaveGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/leaveGroup/Index.vue'))),
MAChangeProps: markRaw(defineAsyncComponent(() => import('./components/marketingAction/changeProps/Index.vue'))), MAChangeProps: markRaw(defineAsyncComponent(() => import('./components/marketingAction/changeProps/Index.vue'))),
...@@ -53,10 +57,8 @@ const component = computed(() => { ...@@ -53,10 +57,8 @@ const component = computed(() => {
} }
return allComponent[props.node?.data.componentName] return allComponent[props.node?.data.componentName]
}) })
const props = defineProps<{ node: any }>()
</script> </script>
<template> <template>
<component :is="component" v-bind="props"></component> <component :is="component" :node="node"></component>
</template> </template>
src/components/flow/Index.vue
浏览文件 @ e4858893
...@@ -6,7 +6,7 @@ export default { ...@@ -6,7 +6,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import { VueFlow, useVueFlow, PanelPosition } from '@vue-flow/core' import { VueFlow, useVueFlow, PanelPosition, MarkerType, ConnectionLineType } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls' import { Controls } from '@vue-flow/controls'
import CustomNode from './CustomNode.vue' import CustomNode from './CustomNode.vue'
import CustomEdge from './CustomEdge.vue' import CustomEdge from './CustomEdge.vue'
...@@ -17,7 +17,6 @@ interface Props { ...@@ -17,7 +17,6 @@ interface Props {
templateType?: string templateType?: string
score?: number score?: number
} }
const props = withDefaults(defineProps<Props>(), { action: 'edit', role: 'teacher', score: 0 }) const props = withDefaults(defineProps<Props>(), { action: 'edit', role: 'teacher', score: 0 })
provide('action', props.action) provide('action', props.action)
provide('role', props.role) provide('role', props.role)
...@@ -35,7 +34,30 @@ const onDragOver = (event: DragEvent) => { ...@@ -35,7 +34,30 @@ const onDragOver = (event: DragEvent) => {
} }
onConnect(params => { onConnect(params => {
addEdges([{ ...params, type: 'custom' }]) const map: any = {
'handle-yes': { label: '是', style: { stroke: '#81b337' } },
'handle-no': { label: '否', style: { stroke: '#a16222' } },
'handle-success': { label: '成功', style: { stroke: '#81b337' } },
'handle-failure': { label: '失败', style: { stroke: '#a16222' } }
}
let customParams = {}
if (params.sourceHandle) {
customParams = map[params.sourceHandle]
}
const style = {
stroke: '#5b6b73'
// strokeWidth: 2
}
addEdges([
{
...params,
sourceHandle: 'handle-right',
type: 'custom',
markerEnd: MarkerType.ArrowClosed,
style,
...customParams
}
])
}) })
const onDrop = (event: DragEvent) => { const onDrop = (event: DragEvent) => {
...@@ -53,7 +75,7 @@ const onDrop = (event: DragEvent) => { ...@@ -53,7 +75,7 @@ const onDrop = (event: DragEvent) => {
const position = project({ x: event.clientX - left, y: event.clientY - top }) const position = project({ x: event.clientX - left, y: event.clientY - top })
const newNode = { const newNode = {
id: nanoid(), id: nanoid(4),
type: 'custom', type: 'custom',
position, position,
label: data.name, label: data.name,
...@@ -87,7 +109,14 @@ const onDrop = (event: DragEvent) => { ...@@ -87,7 +109,14 @@ const onDrop = (event: DragEvent) => {
<slot name="left-panel"> </slot> <slot name="left-panel"> </slot>
<el-card shadow="never" class="flow-main" @drop="onDrop"> <el-card shadow="never" class="flow-main" @drop="onDrop">
<slot name="header"> </slot> <slot name="header"> </slot>
<VueFlow :zoom-on-scroll="false" :prevent-scrolling="false" @dragover="onDragOver" v-bind="$attrs"> <VueFlow
snap-to-grid
:zoom-on-scroll="false"
:prevent-scrolling="false"
:connection-radius="30"
:connection-line-options="{ markerEnd: MarkerType.ArrowClosed, type: ConnectionLineType.Straight }"
@dragover="onDragOver"
v-bind="$attrs">
<template #node-custom="node"> <template #node-custom="node">
<CustomNode :node="node" /> <CustomNode :node="node" />
</template> </template>
...@@ -104,7 +133,7 @@ const onDrop = (event: DragEvent) => { ...@@ -104,7 +133,7 @@ const onDrop = (event: DragEvent) => {
<style lang="scss"> <style lang="scss">
@import '@vue-flow/core/dist/style.css'; @import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css'; // @import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css'; @import '@vue-flow/controls/dist/style.css';
.flow { .flow {
......
src/components/flow/Sidebar.vue
浏览文件 @ e4858893
...@@ -35,7 +35,7 @@ const list = ref([ ...@@ -35,7 +35,7 @@ const list = ref([
name: '营销动作', name: '营销动作',
background: { icon: 'square', color: '#19AAA5' }, background: { icon: 'square', color: '#19AAA5' },
children: [ children: [
{ name: '终止旅程', type: '营销动作', icon: '16', componentName: 'MAEndTrip' }, { name: '终止旅程', type: '营销动作', icon: '16', componentName: 'MAEndTrip', color: '#AA1941' },
{ name: '加入群组', type: '营销动作', icon: '14', componentName: 'MAJoinGroup' }, { name: '加入群组', type: '营销动作', icon: '14', componentName: 'MAJoinGroup' },
{ name: '移除群组', type: '营销动作', icon: '17', componentName: 'MALeaveGroup' }, { name: '移除群组', type: '营销动作', icon: '17', componentName: 'MALeaveGroup' },
{ name: '变更属性', type: '营销动作', icon: '15', componentName: 'MAChangeProps' }, { name: '变更属性', type: '营销动作', icon: '15', componentName: 'MAChangeProps' },
...@@ -98,7 +98,7 @@ const onDragStart = (event: DragEvent, data: any) => { ...@@ -98,7 +98,7 @@ const onDragStart = (event: DragEvent, data: any) => {
<Icon class="icon" color="#fff" :name="item.icon" w="24" h="24"></Icon> <Icon class="icon" color="#fff" :name="item.icon" w="24" h="24"></Icon>
<Icon <Icon
class="circle" class="circle"
:color="parent.background?.color" :color="item.color || parent.background?.color"
:name="parent.background?.icon || ''" :name="parent.background?.icon || ''"
w="60" w="60"
h="60"></Icon> h="60"></Icon>
......
src/components/flow/components/NodeTemplate.vue
浏览文件 @ e4858893
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
import type { NodeProps } from '@vue-flow/core' import type { NodeProps } from '@vue-flow/core'
import { useVueFlow, Handle, Position } from '@vue-flow/core' import { useVueFlow, Handle, Position } from '@vue-flow/core'
import { Setting, Delete } from '@element-plus/icons-vue' import { Setting, Delete } from '@element-plus/icons-vue'
import IconFlowLine from '@/components/icon/IconFlowLine.vue'
const props = defineProps<{ node: NodeProps }>() const props = withDefaults(
defineProps<{ node: NodeProps; connectionType?: number; canSetting?: boolean; canConnect?: boolean }>(),
{ canSetting: true, canConnect: true }
)
const action = inject('action') const action = inject('action')
...@@ -17,88 +19,118 @@ function onRemove() { ...@@ -17,88 +19,118 @@ function onRemove() {
const node = findNode(props.node.id) const node = findNode(props.node.id)
if (node) removeNodes([node]) if (node) removeNodes([node])
} }
let toolbarShow = ref(false)
window.addEventListener('click', function () {
toolbarShow.value = false
})
const handleToolbar = function () {
setTimeout(() => {
toolbarShow.value = true
}, 100)
}
</script> </script>
<template> <template>
<div class="custom-node" @click="handleToolbar"> <div class="custom-node">
<div class="node-toolbar" v-if="toolbarShow"> <div class="node-toolbar">
<el-icon v-if="action !== 'view'" size="12" @click="onRemove"><Delete /></el-icon> <el-icon v-if="action !== 'view'" size="12" @click="onRemove"><Delete /></el-icon>
<el-icon size="12" @click="emit('setting')"><Setting /></el-icon> <el-icon size="12" @click="emit('setting')" v-if="canSetting"><Setting /></el-icon>
</div> </div>
<div class="custom-node__inner"> <div class="custom-node__inner">
<slot :node="node" /> <slot :node="node" />
<p class="node-label">{{ node.label }}</p>
</div> </div>
<IconFlowLine class="tool-line" v-if="toolbarShow"></IconFlowLine>
</div> </div>
<Handle id="right" class="handle handle-right" :position="Position.Right"></Handle> <Handle id="handle-left" class="handle" :position="Position.Left" :connectable="false" />
<Handle style="opacity: 0; width: 10px; height: 10px" id="left" class="handle" :position="Position.Left" /> <Handle id="handle-top" class="handle" :position="Position.Top" :connectable="false" />
<!-- <Handle id="bottom" class="handle" :position="Position.Bottom" /> --> <Handle id="handle-bottom" class="handle" :position="Position.Bottom" :connectable="false" />
<Handle id="handle-right" class="handle" :position="Position.Right" :connectable="false" />
<div class="handle-wrap" v-if="canConnect">
<template v-if="connectionType === 1">
<Handle id="handle-yes" class="handle-link is-yes" :position="Position.Left">是</Handle>
<Handle id="handle-no" class="handle-link is-no" :position="Position.Left">否</Handle>
</template>
<template v-else-if="connectionType === 2">
<Handle id="handle-success" class="handle-link is-yes" :position="Position.Left">成功</Handle>
<Handle id="handle-failure" class="handle-link is-no" :position="Position.Left">失败</Handle>
<Handle id="handle-any" class="handle-link is-any" :position="Position.Left">继续</Handle>
</template>
<template v-else>
<Handle id="handle-any" class="handle-default" :position="Position.Left">
<svg
xmlns="http://www.w3.org/2000/svg"
class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 dGjRCM svg-icon-path-icon fill"
viewBox="0 0 512 512"
width="24"
height="24">
<g>
<path
d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"
fill="#6c6c6c"></path>
</g>
</svg>
</Handle>
</template>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
.dispatchers { .handle {
background-color: transparent;
border-radius: 0;
border: 0;
}
.handle-wrap {
opacity: 0;
position: absolute; position: absolute;
width: 100px; left: 100%;
height: 100px; top: 50%;
right: -110px; padding-left: 5px;
top: 20px; transform: translateY(-50%);
z-index: -2; .handle-link {
div { position: unset;
width: 50px; min-width: unset;
line-height: 18px; min-height: unset;
height: 18px; width: auto;
border-radius: 3px; height: auto;
font-size: 6px; background: transparent;
text-align: center; white-space: nowrap;
height: 16px;
font-size: 10px;
line-height: 16px;
color: #fff; color: #fff;
text-align: center;
margin: 2px 0;
padding: 0 10px;
border: 0;
transform: unset;
} }
.item1 { .handle-default {
background: #6dbd7a; left: 0;
svg {
pointer-events: none;
} }
.item2 {
margin: 3px 0;
background: #fe615e;
} }
.item3 { .is-yes {
background: #6a6c8a; background-color: #81b337;
}
.is-no {
background-color: #a16222;
}
.is-any {
background-color: #347caf;
} }
} }
.handle-right {
width: 10px; .vue-flow__node {
border-radius: 0; &.selected {
right: -5px; .node-toolbar {
opacity: 0; display: flex;
} }
.tool-line { .handle-wrap {
position: absolute; opacity: 1;
top: 35%; }
right: -12px; }
}
.vue-flow__handle {
} }
.custom-node { .custom-node {
position: relative; position: relative;
// &:hover {
// .node-toolbar {
// display: flex;
// }
// }
} }
.node-toolbar { .node-toolbar {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: -25px; top: -25px;
display: flex; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20px; font-size: 20px;
...@@ -110,9 +142,10 @@ const handleToolbar = function () { ...@@ -110,9 +142,10 @@ const handleToolbar = function () {
cursor: pointer; cursor: pointer;
} }
} }
</style> .node-label {
font-size: 12px;
<style lang="scss"> text-align: center;
}
.node-item { .node-item {
position: relative; position: relative;
.icon { .icon {
......
src/components/flow/components/conditionalBranch/attributeJudgment/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="1" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon> <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
<Icon class="icon" name="20" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="20" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/conditionalBranch/eventJudgment/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="1" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon> <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
<Icon class="icon" name="23" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="23" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/conditionalBranch/groupJudgment/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="1" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon> <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
<Icon class="icon" name="22" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="22" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/conditionalBranch/labelJudgment/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="1" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon> <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
<Icon class="icon" name="21" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="21" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/conditionalBranch/offiaccount/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="1" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon> <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
<Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/conditionalBranch/timeJudgment/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="1" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon> <Icon name="hexagon" :color="isGray ? '#9a9a9a' : '#ceaa62'" w="60" h="60"></Icon>
<Icon class="icon" name="24" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="24" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/changeProps/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="15" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/delayProcess/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="18" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="18" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/dingtalk/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="2" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="2" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/douyin/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="6" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/email/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="9" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="9" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/endTrip/Config.vue deleted 100644 → 0
浏览文件 @ 5f8ffb99
<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 deleted 100644 → 0
浏览文件 @ 5f8ffb99
<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
浏览文件 @ e4858893
...@@ -3,33 +3,14 @@ ...@@ -3,33 +3,14 @@
import NodeTemplate from '../../NodeTemplate.vue' import NodeTemplate from '../../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue' import Icon from '@/components/ConnectionIcon.vue'
const Config = defineAsyncComponent(() => import('./Config.vue')) defineProps<{ node: any }>()
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> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" :canSetting="false" :canConnect="false">
<div class="node-item"> <div class="node-item">
<Icon name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon> <Icon name="square" color="#AA1941" w="60" h="60"></Icon>
<Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="16" color="#fff" w="24" h="24"></Icon>
</div> </div>
</NodeTemplate> </NodeTemplate>
<!-- 配置 -->
<Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
<!-- 查看配置 -->
<ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
</template> </template>
src/components/flow/components/marketingAction/internalNotice/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="19" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="19" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/joinGroup/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="14" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/leaveGroup/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="17" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="17" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/offiaccount/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="1" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/sms/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="10" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="10" color="#fff" w="24" h="24"></Icon>
......
src/components/flow/components/marketingAction/weibo/Index.vue
浏览文件 @ e4858893
...@@ -22,7 +22,7 @@ const settingVisible = ref(false) ...@@ -22,7 +22,7 @@ const settingVisible = ref(false)
</script> </script>
<template> <template>
<NodeTemplate :node="node" @setting="settingVisible = true"> <NodeTemplate :node="node" :connectionType="2" @setting="settingVisible = true">
<div class="node-item"> <div class="node-item">
<Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon> <Icon name="square" :color="isGray ? '#9a9a9a' : '#19AAA5'" w="60" h="60"></Icon>
<Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon> <Icon class="icon" name="7" color="#fff" w="24" h="24"></Icon>
......
src/modules/trip/my/views/Index.vue
浏览文件 @ e4858893
...@@ -72,7 +72,7 @@ function handleConnectionUpdate(value: string[]) { ...@@ -72,7 +72,7 @@ function handleConnectionUpdate(value: string[]) {
<el-descriptions-item label="旅程类型:">{{ detail.experiment_itinerary_type_name }}</el-descriptions-item> <el-descriptions-item label="旅程类型:">{{ detail.experiment_itinerary_type_name }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
<TripFlow v-model="elements" action="edit" role="student"> <TripFlow v-model="elements" action="edit" role="student" :nodes-draggable="!isFree">
<template #left-panel v-if="isFree"> <template #left-panel v-if="isFree">
<TripFlowSidebar :connectionIds="connectionIds" /> <TripFlowSidebar :connectionIds="connectionIds" />
</template> </template>
...@@ -105,6 +105,5 @@ function handleConnectionUpdate(value: string[]) { ...@@ -105,6 +105,5 @@ function handleConnectionUpdate(value: string[]) {
v-model="configVisible" v-model="configVisible"
:data="detail" :data="detail"
@update="handleConnectionUpdate" @update="handleConnectionUpdate"
v-if="configVisible && detail" v-if="configVisible && detail"></BindConnection>
></BindConnection>
</template> </template>
src/modules/trip/my/views/Score.vue
浏览文件 @ e4858893
...@@ -35,7 +35,7 @@ const commentVisible = ref(false) ...@@ -35,7 +35,7 @@ const commentVisible = ref(false)
<el-button type="primary" @click="commentVisible = true">教师评语</el-button> <el-button type="primary" @click="commentVisible = true">教师评语</el-button>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<TripFlow v-model="elements" action="view" role="student"></TripFlow> <TripFlow v-model="elements" action="view" role="student" :nodes-draggable="false"></TripFlow>
</AppCard> </AppCard>
<el-dialog title="评语" width="500px" append-to-body v-model="commentVisible"> <el-dialog title="评语" width="500px" append-to-body v-model="commentVisible">
......
src/modules/trip/review/views/Index.vue
浏览文件 @ e4858893
...@@ -70,7 +70,7 @@ function handleSubmit() { ...@@ -70,7 +70,7 @@ function handleSubmit() {
<el-button type="primary" @click="commentVisible = true">填写评语</el-button> <el-button type="primary" @click="commentVisible = true">填写评语</el-button>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<TripFlow v-model="elements" action="view" role="teacher"> <TripFlow v-model="elements" action="view" role="teacher" :nodes-draggable="false">
<template #footer> <template #footer>
<el-row justify="center"> <el-row justify="center">
<el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="isReviewed">保存</el-button> <el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="isReviewed">保存</el-button>
......
src/modules/trip/template/views/Setting.vue
浏览文件 @ e4858893
...@@ -96,7 +96,7 @@ function handleConfig() { ...@@ -96,7 +96,7 @@ function handleConfig() {
</el-row> </el-row>
</el-form> </el-form>
</el-card> </el-card>
<TripFlow v-model="elements" action="view" role="teacher" :templateType="detail?.type" :score="score"> <TripFlow v-model="elements" action="edit" role="teacher" :templateType="detail?.type" :score="score">
<template #left-panel> <template #left-panel>
<TripFlowSidebar :connectionIds="connectionIds" /> <TripFlowSidebar :connectionIds="connectionIds" />
</template> </template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论