build : 流程演示

src/views/workflow/common/ProcessDiagramViewer.vue

@@ -9,7 +9,7 @@
   <div style="margin-top: 40px">
     <div :style="'transform: scale('+ scale / 100 +');'">
       <div id="previewProcess">
-        <process-tree mode="preview" ref="processTreePreview" id-name="previewProcess"/>
+        <process-tree :mode="mode" ref="processTreePreview" id-name="previewProcess"/>
       </div>
     </div>
   </div>
@@ -20,6 +20,12 @@ import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
 
 const processTreePreview = ref()
 const scale = ref(100)
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'preview'
+  }
+})
 
 nextTick(()=>{
   processTreePreview.value.init()

src/views/workflow/process/common/AvatarEllipsis.vue

@@ -38,6 +38,10 @@ const props = defineProps({
   userInfo: {
     type: Array,
     default: []
+  },
+  mode: {
+    type: String,
+    default: 'design'
   }
 })
 

src/views/workflow/process/nodes/Node.vue

@@ -17,24 +17,28 @@
         </el-icon>
         <template v-if="selectUser.show && mode === 'view'">
           <div class="avatar_button">
-            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
+            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :mode="mode" :user-info="userInfo"/>
             <el-button type="primary" :icon="Plus" circle/>
           </div>
         </template>
         <template v-else-if="showAvatar">
           <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
-          <div v-else v-for="item in userInfo" class="circle-user">
-            <span>{{ item.name }}</span>
-            <el-button v-if="item.state==='RUNNING'" type="warning" loading circle class="circle-icon"></el-button>
-            <el-button v-else-if="item.state==='UNACTIVATED'" type="info" :icon="More" circle
-                       class="circle-icon"></el-button>
-            <el-button v-else type="success" :icon="Check" circle class="circle-icon"></el-button>
-          </div>
+
+          <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :mode="mode" :user-info="userInfo"/>
+
+
+<!--          <div v-else v-for="item in userInfo" class="circle-user">-->
+<!--            <span>{{ item.name }}</span>-->
+<!--            <el-button v-if="item.state==='RUNNING'" type="warning" loading circle class="circle-icon"></el-button>-->
+<!--            <el-button v-else-if="item.state==='UNACTIVATED'" type="info" :icon="More" circle-->
+<!--                       class="circle-icon"></el-button>-->
+<!--            <el-button v-else type="success" :icon="Check" circle class="circle-icon"></el-button>-->
+<!--          </div>-->
           <!--          <avatar-ellipsis :row="3" :user-info="userInfo"/>-->
         </template>
         <template v-else>
           <span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
-          <ellipsis :row="3" :content="content" v-else/>
+          <ellipsis :row="3" :content="content"  :mode="mode" v-else/>
         </template>
       </div>
       <div class="node-error" v-if="showError">