chore: 修改旅程模板连接线

.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'
 }

package.json

@@ -15,17 +15,17 @@
     "cert": "node ./cert.js"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.0.10",
-    "@tinymce/tinymce-vue": "^5.0.0",
+    "@element-plus/icons-vue": "^2.1.0",
+    "@tinymce/tinymce-vue": "^5.0.1",
     "@vue-flow/controls": "^1.0.4",
-    "@vue-flow/core": "^1.15.2",
+    "@vue-flow/core": "^1.15.5",
     "@vueuse/core": "^9.13.0",
     "axios": "^1.3.4",
     "blueimp-md5": "^2.19.0",
-    "element-plus": "^2.2.32",
+    "element-plus": "^2.2.35",
     "lodash-es": "^4.17.21",
     "nanoid": "^4.0.1",
-    "pinia": "^2.0.32",
+    "pinia": "^2.0.33",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
@@ -42,7 +42,7 @@
     "eslint-plugin-vue": "^9.9.0",
     "sass": "^1.58.3",
     "typescript": "~4.9.5",
-    "unplugin-auto-import": "^0.15.0",
+    "unplugin-auto-import": "^0.15.1",
     "vite": "^4.1.4",
     "vue-tsc": "^1.2.0"
   }

src/components/flow/CustomEdge.vue

 <script setup>
-import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
-import { CircleClose } from '@element-plus/icons-vue'
+import { StraightEdge, EdgeLabelRenderer, useVueFlow, getStraightPath } from '@vue-flow/core'
+import { CircleCloseFilled } from '@element-plus/icons-vue'
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -12,14 +12,13 @@ const props = defineProps({
   targetPosition: { type: String, required: true },
   data: { type: Object, required: false },
   markerEnd: { type: String, required: false },
-  style: { type: Object, required: false }
+  style: { type: Object, required: false },
+  label: { required: false }
 })
 
 const { removeEdges } = useVueFlow()
 
-const path = computed(() => {
-  return getBezierPath(props)
-})
+const path = computed(() => getStraightPath(props))
 </script>
 
 <script>
@@ -29,35 +28,30 @@ export default {
 </script>
 
 <template>
-  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
-  <!-- :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 -->
+  <StraightEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd"></StraightEdge>
   <EdgeLabelRenderer>
-    <div
-      :style="{
-        pointerEvents: 'all',
-        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 class="edge-label" :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)` }">
+      <span v-if="label">{{ label }}</span>
+      <el-icon @click="removeEdges([id])"><CircleCloseFilled /></el-icon>
     </div>
   </EdgeLabelRenderer>
 </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

 <script setup lang="ts">
+import type { NodeProps } from '@vue-flow/core'
+const props = defineProps<{ node: NodeProps }>()
+
 const component = computed(() => {
   const allComponent: any = {
     TCRealTimeTrigger: markRaw(
@@ -21,6 +24,7 @@ const component = computed(() => {
     TCWenjuanxing: markRaw(
       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'))),
     MALeaveGroup: markRaw(defineAsyncComponent(() => import('./components/marketingAction/leaveGroup/Index.vue'))),
     MAChangeProps: markRaw(defineAsyncComponent(() => import('./components/marketingAction/changeProps/Index.vue'))),
@@ -53,10 +57,8 @@ const component = computed(() => {
   }
   return allComponent[props.node?.data.componentName]
 })
-
-const props = defineProps<{ node: any }>()
 </script>
 
 <template>
-  <component :is="component" v-bind="props"></component>
+  <component :is="component" :node="node"></component>
 </template>

src/components/flow/Index.vue

@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 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 CustomNode from './CustomNode.vue'
 import CustomEdge from './CustomEdge.vue'
@@ -17,7 +17,6 @@ interface Props {
   templateType?: string
   score?: number
 }
-
 const props = withDefaults(defineProps<Props>(), { action: 'edit', role: 'teacher', score: 0 })
 provide('action', props.action)
 provide('role', props.role)
@@ -35,7 +34,30 @@ const onDragOver = (event: DragEvent) => {
 }
 
 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) => {
@@ -53,7 +75,7 @@ const onDrop = (event: DragEvent) => {
   const position = project({ x: event.clientX - left, y: event.clientY - top })
 
   const newNode = {
-    id: nanoid(),
+    id: nanoid(4),
     type: 'custom',
     position,
     label: data.name,
@@ -87,7 +109,14 @@ const onDrop = (event: DragEvent) => {
     <slot name="left-panel"> </slot>
     <el-card shadow="never" class="flow-main" @drop="onDrop">
       <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">
           <CustomNode :node="node" />
         </template>
@@ -104,7 +133,7 @@ const onDrop = (event: DragEvent) => {
 
 <style lang="scss">
 @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';
 
 .flow {

src/components/flow/Sidebar.vue

@@ -35,7 +35,7 @@ const list = ref([
     name: '营销动作',
     background: { icon: 'square', color: '#19AAA5' },
     children: [
-      { name: '终止旅程', type: '营销动作', icon: '16', componentName: 'MAEndTrip' },
+      { name: '终止旅程', type: '营销动作', icon: '16', componentName: 'MAEndTrip', color: '#AA1941' },
       { name: '加入群组', type: '营销动作', icon: '14', componentName: 'MAJoinGroup' },
       { name: '移除群组', type: '营销动作', icon: '17', componentName: 'MALeaveGroup' },
       { name: '变更属性', type: '营销动作', icon: '15', componentName: 'MAChangeProps' },
@@ -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="circle"
-                :color="parent.background?.color"
+                :color="item.color || parent.background?.color"
                 :name="parent.background?.icon || ''"
                 w="60"
                 h="60"></Icon>

src/components/flow/components/NodeTemplate.vue

@@ -2,9 +2,11 @@
 import type { NodeProps } from '@vue-flow/core'
 import { useVueFlow, Handle, Position } from '@vue-flow/core'
 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')
 
@@ -17,88 +19,118 @@ function onRemove() {
   const node = findNode(props.node.id)
   if (node) removeNodes([node])
 }
-
-let toolbarShow = ref(false)
-window.addEventListener('click', function () {
-  toolbarShow.value = false
-})
-const handleToolbar = function () {
-  setTimeout(() => {
-    toolbarShow.value = true
-  }, 100)
-}
 </script>
 
 <template>
-  <div class="custom-node" @click="handleToolbar">
-    <div class="node-toolbar" v-if="toolbarShow">
+  <div class="custom-node">
+    <div class="node-toolbar">
       <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 class="custom-node__inner">
       <slot :node="node" />
+      <p class="node-label">{{ node.label }}</p>
     </div>
-    <IconFlowLine class="tool-line" v-if="toolbarShow"></IconFlowLine>
   </div>
-  <Handle id="right" class="handle handle-right" :position="Position.Right"></Handle>
-  <Handle style="opacity: 0; width: 10px; height: 10px" id="left" class="handle" :position="Position.Left" />
-  <!-- <Handle id="bottom" class="handle" :position="Position.Bottom" /> -->
+  <Handle id="handle-left" class="handle" :position="Position.Left" :connectable="false" />
+  <Handle id="handle-top" class="handle" :position="Position.Top" :connectable="false" />
+  <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>
 
-<style lang="scss" scoped>
-.dispatchers {
+<style lang="scss">
+.handle {
+  background-color: transparent;
+  border-radius: 0;
+  border: 0;
+}
+.handle-wrap {
+  opacity: 0;
   position: absolute;
-  width: 100px;
-  height: 100px;
-  right: -110px;
-  top: 20px;
-  z-index: -2;
-  div {
-    width: 50px;
-    line-height: 18px;
-    height: 18px;
-    border-radius: 3px;
-    font-size: 6px;
-    text-align: center;
+  left: 100%;
+  top: 50%;
+  padding-left: 5px;
+  transform: translateY(-50%);
+  .handle-link {
+    position: unset;
+    min-width: unset;
+    min-height: unset;
+    width: auto;
+    height: auto;
+    background: transparent;
+    white-space: nowrap;
+    height: 16px;
+    font-size: 10px;
+    line-height: 16px;
     color: #fff;
+    text-align: center;
+    margin: 2px 0;
+    padding: 0 10px;
+    border: 0;
+    transform: unset;
   }
-  .item1 {
-    background: #6dbd7a;
+  .handle-default {
+    left: 0;
+    svg {
+      pointer-events: none;
+    }
   }
-  .item2 {
-    margin: 3px 0;
-    background: #fe615e;
+  .is-yes {
+    background-color: #81b337;
   }
-  .item3 {
-    background: #6a6c8a;
+  .is-no {
+    background-color: #a16222;
+  }
+  .is-any {
+    background-color: #347caf;
   }
 }
-.handle-right {
-  width: 10px;
-  border-radius: 0;
-  right: -5px;
-  opacity: 0;
-}
-.tool-line {
-  position: absolute;
-  top: 35%;
-  right: -12px;
-}
-.vue-flow__handle {
+
+.vue-flow__node {
+  &.selected {
+    .node-toolbar {
+      display: flex;
+    }
+    .handle-wrap {
+      opacity: 1;
+    }
+  }
 }
 .custom-node {
   position: relative;
-  // &:hover {
-  //   .node-toolbar {
-  //     display: flex;
-  //   }
-  // }
 }
 .node-toolbar {
   position: absolute;
   left: 50%;
   top: -25px;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   font-size: 20px;
@@ -110,9 +142,10 @@ const handleToolbar = function () {
     cursor: pointer;
   }
 }
-</style>
-
-<style lang="scss">
+.node-label {
+  font-size: 12px;
+  text-align: center;
+}
 .node-item {
   position: relative;
   .icon {

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="1" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="1" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="1" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="1" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="1" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="1" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -3,33 +3,14 @@
 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)
+defineProps<{ node: any }>()
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" :canSetting="false" :canConnect="false">
     <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>
+      <Icon name="square" color="#AA1941" w="60" h="60"></Icon>
+      <Icon class="icon" name="16" 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/Index.vue

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

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

@@ -22,7 +22,7 @@ const settingVisible = ref(false)
 </script>
 
 <template>
-  <NodeTemplate :node="node" @setting="settingVisible = true">
+  <NodeTemplate :node="node" :connectionType="2" @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>

src/modules/trip/my/views/Index.vue

@@ -72,7 +72,7 @@ function handleConnectionUpdate(value: string[]) {
         <el-descriptions-item label="旅程类型:">{{ detail.experiment_itinerary_type_name }}</el-descriptions-item>
       </el-descriptions>
     </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">
         <TripFlowSidebar :connectionIds="connectionIds" />
       </template>
@@ -105,6 +105,5 @@ function handleConnectionUpdate(value: string[]) {
     v-model="configVisible"
     :data="detail"
     @update="handleConnectionUpdate"
-    v-if="configVisible && detail"
-  ></BindConnection>
+    v-if="configVisible && detail"></BindConnection>
 </template>

src/modules/trip/my/views/Score.vue

@@ -35,7 +35,7 @@ const commentVisible = ref(false)
         <el-button type="primary" @click="commentVisible = true">教师评语</el-button>
       </el-descriptions-item>
     </el-descriptions>
-    <TripFlow v-model="elements" action="view" role="student"></TripFlow>
+    <TripFlow v-model="elements" action="view" role="student" :nodes-draggable="false"></TripFlow>
   </AppCard>
 
   <el-dialog title="评语" width="500px" append-to-body v-model="commentVisible">

src/modules/trip/review/views/Index.vue

@@ -70,7 +70,7 @@ function handleSubmit() {
         <el-button type="primary" @click="commentVisible = true">填写评语</el-button>
       </el-descriptions-item>
     </el-descriptions>
-    <TripFlow v-model="elements" action="view" role="teacher">
+    <TripFlow v-model="elements" action="view" role="teacher" :nodes-draggable="false">
       <template #footer>
         <el-row justify="center">
           <el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="isReviewed">保存</el-button>

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

@@ -96,7 +96,7 @@ function handleConfig() {
         </el-row>
       </el-form>
     </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>
         <TripFlowSidebar :connectionIds="connectionIds" />
       </template>