chore: update

src/modules/market/my/components/Report.vue

@@ -189,7 +189,7 @@ defineExpose({ generateImage, generatePdf })
           <h3>（{{ numberToChinese(index + 1) }}）{{ item.name }}</h3>
           <p>本项目设计如下{{ item.name }}：</p>
           <template v-for="(label, index) in item.children" :key="label.id">
-            <p>{{ index + 1 }}、{{ label.name }}</p>
+            <h4>{{ index + 1 }}、{{ label.name }}</h4>
             <p>该标签关联“{{ label.data_type }}”，关联字段为：{{ label.attr_name || label.event_name }}。</p>
             <p>该标签的设置规则为：{{ label.desc }}。</p>
           </template>
@@ -200,7 +200,7 @@ defineExpose({ generateImage, generatePdf })
         <h3>（一）静态群组</h3>
         <p>本项目设计如下静态群组：</p>
         <template v-for="(item, index) in groupStore.staticGroups" :key="item.id">
-          <h3>{{ index + 1 }}、{{ item.name }}</h3>
+          <h4>{{ index + 1 }}、{{ item.name }}</h4>
           <p>该群组的加入规则为：{{ item.join_rule }}</p>
           <p>该群组的移除规则为：{{ item.remove_rule }}</p>
           <p>设计该群组的原因是：{{ item.reason }}</p>
@@ -208,7 +208,7 @@ defineExpose({ generateImage, generatePdf })
         <h3>（二）动态群组</h3>
         <p>本项目设计如下动态群组：</p>
         <template v-for="(item, index) in groupStore.dynamicGroups" :key="item.id">
-          <h3>{{ index + 1 }}、{{ item.name }}</h3>
+          <h4>{{ index + 1 }}、{{ item.name }}</h4>
           <p>该群组的加入规则为：{{ item.join_rule }}</p>
           <p>该群组的移除规则为：{{ item.remove_rule }}</p>
           <p>设计该群组的原因是：{{ item.reason }}</p>
@@ -221,7 +221,7 @@ defineExpose({ generateImage, generatePdf })
         <Flow :nodes="tripStore.nodes" :edges="tripStore.edges" :nodes-draggable="false" :nodes-connectable="false" style="height: 200px"></Flow>
         <p>相关节点设计说明如下：</p>
         <template v-for="(item, index) in tripStore.nodes" :key="item.id">
-          <p>{{ index + 1 }}、{{ item.data.label || item.label }}节点</p>
+          <h4>{{ index + 1 }}、{{ item.data.label || item.label }}节点</h4>
           <p v-if="item.data.desc">节点说明：{{ item.data.desc }}</p>
           <p>
             节点类型：
@@ -234,11 +234,11 @@ defineExpose({ generateImage, generatePdf })
         <h3>（二）二级流程</h3>
         <p>本项目如下一级流程节点设计了二级流程。</p>
         <template v-for="(item, index) in tripStore.node1List" :key="item.id">
-          <p>{{ index + 1 }}、{{ item.data.label || item.label }}节点。该节点设计的二级流程图如下：</p>
+          <h4>{{ index + 1 }}、{{ item.data.label || item.label }}节点。该节点设计的二级流程图如下：</h4>
           <Flow :process="2" :nodes="item.data.nodes" :edges="item.data.edges" :nodes-draggable="false" :nodes-connectable="false" style="height: 200px"></Flow>
           <p>该二级流程图节点说明如下：</p>
           <template v-for="(item, index) in item.data.nodes" :key="item.id">
-            <p>（{{ index + 1 }}）{{ item.data.label || item.label }}节点</p>
+            <h4>（{{ index + 1 }}）{{ item.data.label || item.label }}节点</h4>
             <p v-if="item.data.desc">节点说明：{{ item.data.desc }}</p>
             <p>
               节点类型：
@@ -255,7 +255,7 @@ defineExpose({ generateImage, generatePdf })
       <section id="step7" class="section" :class="{ hide: step !== 7 }" v-element-visibility="state => onElementVisibility(state, 7)">
         <h2>七、营销物料设计</h2>
         <p>本项目设计如下营销物料。</p>
-        <AppList v-bind="listOptions"></AppList>
+        <AppList v-bind="listOptions" style="margin: 10px"></AppList>
       </section>
       <ul class="market-report-step">
         <li v-for="(item, index) in steps" :key="index" :class="{ 'is-active': index + 1 === step }" @click="handleClick(item)">{{ item.name }}</li>
@@ -303,16 +303,24 @@ defineExpose({ generateImage, generatePdf })
     // }
   }
   h2 {
-    padding: 10px 0;
+    margin-top: 30px;
+    margin-bottom: 10px;
     font-size: 20px;
   }
   h3 {
+    margin-left: -5px;
     margin-top: 10px;
     padding: 10px 0;
     font-size: 16px;
   }
+  h4 {
+    margin-top: 10px;
+    margin-left: 15px;
+    padding: 10px 0;
+    font-size: 14px;
+  }
   p {
-    margin-left: 20px;
+    margin-left: 15px;
     font-size: 14px;
     line-height: 24px;
     strong {
@@ -320,7 +328,7 @@ defineExpose({ generateImage, generatePdf })
     }
   }
   img {
-    max-width: 100%;
+    max-width: 90%;
   }
   .market-report-step {
     position: fixed;

src/modules/market/my/components/Step6.vue

@@ -42,7 +42,7 @@ const objectiveDialogVisible = ref(false)
         <el-button type="primary" size="large" @click="objectiveDialogVisible = true">业务部门的营销目标</el-button>
       </el-space>
     </el-row>
-    <Flow v-model:nodes="tripStore.nodes" v-model:edges="tripStore.edges" style="height: 60vh"></Flow>
+    <Flow v-model:nodes="tripStore.nodes" v-model:edges="tripStore.edges" :nodes-draggable="!isCheck" :nodes-connectable="!isCheck" style="height: 60vh"></Flow>
     <div class="market-step-footer">
       <el-button @click="handleSubmit" :disabled="isCheck">保存</el-button>
       <el-button type="primary" @click="handleNext">下一步</el-button>

src/modules/market/my/components/flow/EdgeCustom.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 
 const path = computed(() => getSmoothStepPath(props))
 
-const { addNodes, removeEdges } = useVueFlow()
+const { addNodes, removeEdges, nodesConnectable } = useVueFlow()
 
 function onAdd() {
   const position = { x: 0, y: 0 }
@@ -49,7 +49,8 @@ export default {
         pointerEvents: 'all',
         position: 'absolute',
         transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
-      }">
+      }"
+      v-if="nodesConnectable">
       <el-button-group>
         <el-button :icon="Plus" circle @click="onAdd"></el-button>
         <el-button :icon="Close" circle @click="removeEdges([id])"></el-button>

src/modules/market/my/components/flow/NodeCustom.vue

@@ -62,7 +62,7 @@ watch(
   { immediate: true }
 )
 
-const { removeNodes } = useVueFlow()
+const { removeNodes, nodesDraggable, nodesConnectable } = useVueFlow()
 
 const isCompleted = computed(() => {
   return !!props.data.label
@@ -76,21 +76,27 @@ const handleSubmit = async () => {
 
 <template>
   <div class="flow-node flow-node-custom" :class="{ 'is-completed': isCompleted }">
-    <el-icon class="flow-node-custom__remove" @click="removeNodes([id])" v-if="selected"><CircleCloseFilled /></el-icon>
+    <el-icon class="flow-node-custom__remove" @click="removeNodes([id])" v-if="selected && nodesDraggable"><CircleCloseFilled /></el-icon>
     <Handle type="target" :position="Position.Left" />
     <div class="flow-node-custom__inner">
-      <el-button type="primary" size="small" @click="dialogVisible = true">编辑</el-button>
+      <el-button type="primary" size="small" @click="dialogVisible = true" v-if="nodesDraggable">编辑</el-button>
       <el-button type="primary" size="small" @click="flowDialogVisible = true" v-if="process != 2">子流程</el-button>
       <div class="flow-node__label">{{ data.label || label }}</div>
     </div>
     <Handle type="source" :position="Position.Right" />
     <NodeCustomForm :data="data" :process="process" v-model="dialogVisible" v-if="dialogVisible"></NodeCustomForm>
     <el-dialog title="自动化营销旅程设计-二级流程" append-to-body width="1000" v-model="flowDialogVisible">
-      <Flow v-model:nodes="nodes" v-model:edges="edges" :process="2" style="height: 500px"></Flow>
+      <Flow
+        v-model:nodes="nodes"
+        v-model:edges="edges"
+        :process="2"
+        :nodes-draggable="nodesDraggable"
+        :nodes-connectable="nodesConnectable"
+        style="height: 500px"></Flow>
       <template #footer>
         <el-row justify="center">
           <el-button plain auto-insert-space @click="flowDialogVisible = false">关闭</el-button>
-          <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
+          <el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="!nodesDraggable">保存</el-button>
         </el-row>
       </template>
     </el-dialog>

src/modules/market/my/components/flow/NodeStart.vue

 <script setup>
-import { Position, Handle } from '@vue-flow/core'
+import { Position, Handle, useVueFlow } from '@vue-flow/core'
 
 const props = defineProps(['label', 'data', 'process'])
 
+const { nodesDraggable } = useVueFlow()
+
 const dialogVisible = ref(false)
 
 const formRef = ref(null)
@@ -34,10 +36,15 @@ const handleSubmit = async () => {
   Object.assign(props.data, { ...form })
   dialogVisible.value = false
 }
+
+const handleClick = () => {
+  if (!nodesDraggable.value) return
+  dialogVisible.value = true
+}
 </script>
 
 <template>
-  <div class="flow-node flow-node-start" @click="dialogVisible = true">
+  <div class="flow-node flow-node-start" @click="handleClick">
     <div class="flow-node__label">{{ label }}</div>
     <Handle type="source" :position="Position.Right" />
     <p class="flow-node-tips" v-if="process == 1">点击节点维护自动化营销旅程的触发条件</p>