vue2-client 1.15.5 → 1.15.7

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowHandleReso.vue

@@ -250,7 +250,7 @@ export default {
       if (isDevelopment) {
         return true
       }
-      const step = this.stepsForChild[this.currentStepId - 1]
+      const step = this.stepsForChild.find(item => item.id === this.currentStepId)
       if (step && step.handler) {
         return step.handler.includes(this.currUser.name)
       }
@@ -450,7 +450,7 @@ export default {
         workflowId: this.workflowId
       })
         .then(res => {
-          res.state = this.stepsForChild[res.id - 1].name
+          res.state = this.stepsForChild.find(item => item.id === res.id)?.name
           this.currentStep = res
           this.getDirection()
         }, err => {
@@ -664,7 +664,7 @@ export default {
     },
     // 根据步骤id获取步骤名称
     getStepNameByStepId (stepId) {
-      return this.stepsDefine[stepId - 1].name
+      return this.stepsDefine.find(item => item.id === stepId)?.name
     },
     // 表单提交的回调
     submitForm (obj) {
@@ -739,7 +739,7 @@ export default {
           }
         } else if (direction.type === 'back') {
           for (let i = this.currentStepId - 1; i > 0; i--) {
-            if (direction.tail >= i && this.stepsForChild[i - 1].handler) {
+            if (direction.tail >= i && this.stepsForChild.find(item => item.id === i)?.handler) {
               this.preBtnTo = i
               this.preBtnTitle = '回退至：' + this.getStepNameByStepId(i) + '环节'
               this.showPrevBtn = true
@@ -806,7 +806,7 @@ export default {
           formCompletedDataPreview.data = null
         }
         // 备注
-        formCompletedDataPreview.note = this.stepsForChild[stepId - 1].note
+        formCompletedDataPreview.note = this.stepsForChild.find(item => item.id === stepId)?.note
         if (!formCompletedDataPreview.data && !formCompletedDataPreview.files.length && !formCompletedDataPreview.images.length && !formCompletedDataPreview.note) {
           formCompletedDataPreview = null
         }
@@ -927,7 +927,7 @@ export default {
     // 从指定步骤设置负责人下拉选择框
     async setChargePersonOptions (stepId) {
       this.checkedChargePerson = undefined
-      const defineProperties = this.stepsDefine[stepId - 1].properties
+      const defineProperties = this.stepsDefine.find(item => item.id === stepId).properties
       const chargePerson = defineProperties.chargePerson
       let chargePersonOptions = []
       // 获取所有用户信息

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowPreview.vue

@@ -10,11 +10,10 @@
         填写历史
       </p>
       <a-descriptions-item
-        v-for="(value, key) in formCompletedDataPreview.data"
+        v-for="(value, key) in formCompletedDataPreview.data.filter(item => !['附件上传', '__expressionRs'].includes(item.key))"
         :key="key"
-        v-show="key !== '附件上传'"
       >
-        <span slot="label" style="color: #000">{{ key }}</span>
+        <span slot="label" style="color: #000">{{ item.key }}</span>
         <div style="white-space: pre-wrap">{{ value }}</div>
       </a-descriptions-item>
     </a-descriptions>

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowTimeline.vue

@@ -11,13 +11,33 @@
         </span>
       </template>
       <a-step
-        v-for="item in steps"
+        v-for="item in displaySteps"
         :key="item.id"
         class="step-item"
         @click.stop="onStepClick(item.id)"
       >
         <template #title>
-          <h3 v-if="item.name">{{ item.name }}</h3>
+          <div class="step-title-container">
+            <h3 v-if="item.name">{{ item.name }}</h3>
+            <!-- 判断节点特殊标识 -->
+            <div v-if="item.type === 'condition'" class="condition-indicators">
+              <a-tag color="purple" size="small" class="condition-tag">
+                <a-icon type="branches" /> 条件节点
+              </a-tag>
+              <a-tooltip title="此节点根据条件判断后续流程走向">
+                <a-icon type="question-circle" class="condition-help" />
+              </a-tooltip>
+            </div>
+            <!-- 并行节点特殊标识 -->
+            <div v-else-if="isParallelStep(item)" class="parallel-indicators">
+              <a-tag color="blue" size="small" class="parallel-tag">
+                <a-icon type="fork" /> 并行节点
+              </a-tag>
+              <a-tooltip title="此节点将启动多个并行分支">
+                <a-icon type="question-circle" class="parallel-help" />
+              </a-tooltip>
+            </div>
+          </div>
         </template>
         <template #description>
           <div>
@@ -32,6 +52,37 @@
           </div>
         </template>
       </a-step>
+
+      <!-- 当步骤被截断时显示省略状态 -->
+      <a-step
+        v-if="hasMoreSteps"
+        key="more-steps"
+        class="step-item more-steps-item">
+        <template #title>
+          <div class="more-steps-container">
+            <h3>后续步骤</h3>
+            <a-tag color="default" size="small" class="pending-tag">
+              <a-icon type="ellipsis" /> 待条件确定
+            </a-tag>
+          </div>
+        </template>
+        <template #description>
+          <div class="more-steps-desc">
+            <p>根据上述条件判断结果，将继续执行相应的后续流程</p>
+            <p class="steps-count">剩余 {{ remainingStepsCount }} 个步骤</p>
+            <!-- <a-button
+              type="link"
+              size="small"
+              @click="toggleShowAllSteps"
+              class="toggle-btn">
+              <a-icon type="eye" /> {{ showAllSteps ? '隐藏' : '预览全部步骤' }}
+            </a-button> -->
+          </div>
+        </template>
+        <template #icon>
+          <a-icon type="more" style="color: #d9d9d9;" />
+        </template>
+      </a-step>
     </a-steps>
   </div>
 </template>
@@ -78,7 +129,62 @@ export default {
       // 当前显示的步骤 id
       displayStepId: 1,
       // 当前任务是否逾期
-      isOverdue: false
+      isOverdue: false,
+      // 是否显示所有步骤（包括条件后的步骤）
+      showAllSteps: false
+    }
+  },
+  computed: {
+        // 控制显示的步骤：当当前节点在判断节点之前时，时间轴只展示到判断节点
+    displaySteps () {
+      const steps = this.steps || []
+
+      // 如果用户选择显示所有步骤，直接返回
+      if (this.showAllSteps) {
+        return steps
+      }
+
+      // 找到第一个判断节点
+      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
+
+      // 如果没有找到判断节点，显示所有步骤
+      if (firstConditionStepIndex === -1) {
+        return steps
+      }
+
+      const firstConditionStep = steps[firstConditionStepIndex]
+
+      // 如果当前步骤在第一个判断节点之前，只显示到判断节点
+      if (this.currentStepId <= firstConditionStep.id) {
+        return steps.slice(0, firstConditionStepIndex + 1)
+      }
+
+      // 否则显示所有步骤
+      return steps
+    },
+
+        // 是否有更多步骤（被条件截断）
+    hasMoreSteps () {
+      // 如果已经显示所有步骤，则不显示"更多步骤"
+      if (this.showAllSteps) return false
+
+      const steps = this.steps || []
+      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
+
+      if (firstConditionStepIndex === -1) return false
+
+      const firstConditionStep = steps[firstConditionStepIndex]
+      return this.currentStepId <= firstConditionStep.id && firstConditionStepIndex < steps.length - 1
+    },
+
+    // 剩余步骤数量
+    remainingStepsCount () {
+      const steps = this.steps || []
+      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')
+
+      if (firstConditionStepIndex === -1) return 0
+
+      return steps.length - (firstConditionStepIndex + 1)
     }
   },
   mounted () {
@@ -95,16 +201,29 @@ export default {
   methods: {
     init () {
       this.displayStepId = this.activeStepId
-      const deadline = this.steps.find(step => step.id === this.currentStepId).deadline
-      this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > deadline
+      const currentStep = this.steps.find(step => step.id === this.currentStepId)
+      if (currentStep && currentStep.deadline) {
+        this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > currentStep.deadline
+      }
       this.$emit('activeStep', this.displayStepId)
     },
+
     // 判断id是否为流程中最后一个
     isLastStep (stepId) {
       return stepId >= this.steps.length
     },
+
+    // 判断是否为并行步骤
+    isParallelStep (step) {
+      if (!step.properties || !step.properties.actions) return false
+      return step.properties.actions.some(action => action.type === 'parallelBranch')
+    },
+
     // 动态展示时间线节点颜色
-    getStepIconColor (stepId) {
+    getStepIconColor (index) {
+      // 根据index找到stepId
+      const stepId = this.displaySteps[index - 1]?.id
+
       if (this.changeAble && stepId === this.displayStepId) {
         return 'yellow'
       } else if (!this.changeAble && stepId === this.currentStepId) {
@@ -119,6 +238,7 @@ export default {
       return 'gray'
     },
     onStepClick (stepId) {
+      console.log('stepId', stepId)
       if (!this.changeAble || stepId === this.displayStepId) {
         return
       }
@@ -128,6 +248,15 @@ export default {
       this.$emit('activeStep', stepId)
       this.displayStepId = stepId
     },
+
+    // 切换显示所有步骤
+    // toggleShowAllSteps () {
+    //   this.showAllSteps = !this.showAllSteps
+    //   if (this.showAllSteps) {
+    //     this.$message.info('已展示全部步骤，部分步骤可能根据条件判断而不执行')
+    //   }
+    // },
+
     formatDate,
   },
   watch: {
@@ -191,13 +320,16 @@ export default {
       padding-top: 8px;
     }
   }
+
   /deep/ .ant-steps-item-title {
     font-size: 14px;
     h3 {
       margin-bottom: 0;
     }
   }
+
   @red: rgb(255, 77, 79);
+
   .step-icon-filled {
     position: absolute;
     top: -2px;
@@ -236,6 +368,7 @@ export default {
       }
     }
   }
+
   .step-item {
     cursor: pointer;
     &:hover {
@@ -252,10 +385,109 @@ export default {
       color: @red !important;
     }
   }
+
   .next-step-overdue {
     /deep/ .ant-steps-item-tail::after {
       background: @red;
     }
   }
-}
-</style>
+
+  // 新增样式：步骤标题容器
+  .step-title-container {
+    .condition-indicators,
+    .parallel-indicators {
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .condition-tag,
+      .parallel-tag {
+        margin: 0;
+      }
+
+      .condition-help,
+      .parallel-help {
+        color: #999;
+        cursor: pointer;
+        &:hover {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+
+  // 分支信息样式
+  .branch-info {
+    margin-top: 8px;
+    padding: 8px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    border-left: 3px solid #722ed1;
+
+    .branch-title {
+      margin: 0 0 6px 0 !important;
+      font-weight: bold;
+      color: #722ed1;
+      font-size: 12px;
+      padding: 0 !important;
+      border: none !important;
+    }
+
+    .branch-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+
+      .branch-option-tag {
+        margin: 0;
+        font-size: 11px;
+             }
+     }
+   }
+
+   // 省略步骤样式
+   .more-steps-item {
+     opacity: 0.7;
+
+     .more-steps-container {
+       .pending-tag {
+         margin-top: 8px;
+         margin-left: 0;
+       }
+     }
+
+     .more-steps-desc {
+       p {
+        //  font-style: italic;
+         color: #999 !important;
+
+         &.steps-count {
+           font-weight: bold;
+           color: #666 !important;
+         }
+       }
+
+       .toggle-btn {
+         margin-top: 8px;
+         padding: 0;
+         height: auto;
+         color: #1890ff;
+
+         &:hover {
+           color: #40a9ff;
+         }
+       }
+     }
+
+     &:hover {
+       opacity: 1;
+
+       .ant-steps-item-description {
+         background: #f9f9f9;
+         border: 1px dashed #d9d9d9;
+       }
+     }
+   }
+ }
+ </style>

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkOrderParentDetails.vue

@@ -92,16 +92,9 @@ export default {
       steps: undefined,
       // 基础信息
       details: {},
-      // 是否已完成
-      allStepDown: false,
       // 给XFormTable增加额外查询条件
       fixedAddForm: {},
       fixedQueryForm: {},
-      // 统计数据
-      chartData: {
-        // 流程进度
-        instructRateOfSuccessValue: 0
-      },
       // 留言数据
       messageList: [],
       messageLoading: true,
@@ -145,12 +138,8 @@ export default {
         workflowId: this.workflowId
       })
         .then(res => {
-          res.f_sub_state = this.steps[res.f_step_id - 1].name
+          res.f_sub_state = this.steps.find(item => item.id === res.f_step_id)?.name
           this.details = res
-          if (res.f_state === 1) {
-            this.allStepDown = true
-          }
-          this.chartData.instructRateOfSuccessValue = Math.round(res.f_step_id / this.steps.length * 100)
         }, err => {
           console.log(err)
         })

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkflowDetailResso.vue

@@ -3,7 +3,6 @@
   <a-drawer
     :visible="visible"
     :width="isMobile ? screenWidth : screenWidth * 0.95"
-    :placement="direction"
     title="流程详情"
     @close="onClose"
     :get-container="false"
@@ -99,16 +98,9 @@ export default {
       steps: undefined,
       // 基础信息
       details: {},
-      // 是否已完成
-      allStepDown: false,
       // 给XFormTable增加额外查询条件
       fixedAddForm: {},
       fixedQueryForm: {},
-      // 统计数据
-      chartData: {
-        // 流程进度
-        instructRateOfSuccessValue: 0
-      },
       // 留言数据
       messageList: [],
       messageLoading: true,
@@ -123,11 +115,6 @@ export default {
       type: String,
       required: true
     },
-    direction: {
-      type: String,
-      required: false,
-      default: ''
-    },
     visible: {
       type: Boolean,
       default: false
@@ -161,7 +148,6 @@ export default {
       }
       this.$emit('update:visible', false)
       this.activeKey = '2'
-      this.allStepDown = false
       this.details = {}
       this.fixedAddForm = {}
       this.fixedQueryForm = {}
@@ -175,12 +161,8 @@ export default {
         workflowId: this.workflowId
       })
         .then(res => {
-          res.f_sub_state = this.steps[res.f_step_id - 1].name
+          res.f_sub_state = this.steps.find(item => item.id === res.f_step_id)?.name
           this.details = res
-          if (res.f_state === 1) {
-            this.allStepDown = true
-          }
-          this.chartData.instructRateOfSuccessValue = Math.round(res.f_step_id / this.steps.length * 100)
         }, err => {
           console.log(err)
         })