添加流转节点

lyh

昨天 6cd1cd09c6b13c071dc085e24f0980cc102b99a2

 src/views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue

@@ -139,11 +139,27 @@
                </j-vxe-table>
              </a-tab-pane>

              <template v-if="selectShenpiData.procInstId">
              <template v-if="selectShenpiData.processDefinitionKey">
                <a-tab-pane key='3' tab='流程图'>
                  <img :src="imageSrc" alt="Fetched Image"/>
                </a-tab-pane>
              </template>

              <a-tab-pane key='4' tab='流转节点'>
                <a-card>
                  <a-timeline style="padding:0 1% 0 12%" >
                    <a-timeline-item color='white' v-for="(item,index1) in hitaskDataSource" :key="index1">
                      <div class="bottom">
                        <p>处理人：{{item.assignee_dictText}}</p>
                        <p v-if="index1 !==0">处理时长：{{item.duration}}</p>
                        <p v-if="item.name !== '提交申请'">处理类型：{{item.sequenceFlowName}}</p>
                        <p v-if="item.description != null">处理意见：{{item.description}}</p>
                        <div class="left_qiu"><span>{{item.taskName}}</span></div>
                      </div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </a-tab-pane>

              <a-button
                v-if="activeTabKey!=='3'"
@@ -262,11 +278,13 @@
          queryById: '/eam/secondMaintenanceOrder/list',
          detail: '/eam/secondMaintenanceOrderDetail/queryList',
          approval: '/eam/secondMaintenanceOrder/approval',
          diagramView: '/assign/flow/diagramView'
          diagramView: '/assign/flow/diagramView',
          queryHisTaskList:'/assign/flow/queryHisTaskList',
        },
        disableSubmit: false,
        selectedOperatorMaintenanceRowKeys: [],
        selectedRepairerMaintenanceRowKeys: [],
        hitaskDataSource:[],
        detail: {
          operatorMaintenanceList: [],
          repairerMaintenanceList: [],
@@ -348,6 +366,7 @@
        this.handleTabToFirstTable()
        this.getBasicInformationByApi(record)
        this.getFlowChartImageByApi(record)
        this.getFlowTaskListByApi(record)
        this.loadDetail(record.dataId)
      },

@@ -360,6 +379,7 @@
        this.activeTabKey = 1
        this.detail.operatorMaintenanceList = this.detail.repairerMaintenanceList = []
        this.model = Object.assign({}, record)
        this.getFlowTaskListByApi(record)
        this.loadDetail(record.id)
      },

@@ -385,6 +405,23 @@
              })
            }
          })
      },

      /**
       * 获取流转节点
       * @param record
       */
      getFlowTaskListByApi(record) {
        console.log("sss",record)
        let parmhis={
          'procInstId': record.procInstId
        }
        getAction(this.url.queryHisTaskList,parmhis).then(res=>{
          this.hitaskDataSource=res.result
        }).finally(
          this.visible = true,
          console.log('this.approveData---->', this.approveData)
        )
      },

      /**
@@ -611,4 +648,114 @@
      }
    }
  }
  /* 全局禁选样式 - 作用于整个页面 */
  html.submitting,
  html.submitting body {
    pointer-events: none !important;
    cursor: wait !important;
  }

  /* 蒙层效果增强 */
  html.submitting::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 9998;
  }

  /* 加载指示器 - 更明显的视觉反馈 */
  html.submitting::after {
    content: '提交中...';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1890ff;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 9999;
  }

  /* 禁用状态按钮样式 */
  .disabled-btn {
    opacity: 0.6;
    cursor: not-allowed !important;
  }

  .shallow-hr {
    border: 0;
    height: 1px; /* 分界线的高度 */
    background-color: rgba(0, 0, 0, 0.1); /* 使用 RGBA 颜色，并设置较低的透明度 */
    margin: 20px 0; /* 分界线上下的外边距 */
  }
  .btn-custom {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 5px 15px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 无下划线 */
    display: inline-block; /* 行内块元素 */
    font-size: 12px; /* 字体大小 */
    margin: 4px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    border-radius: 4px; /* 圆角边框 */
  }

  .bold-large-label {
    font-weight: bold;
    font-size: 20px; /* 或你需要的任何大小 */
  }
  .left_qiu{
    position: absolute;
    left: -74px;
    top: 0;
    width:54px;
    border-radius: 50%;
    height:54px;
    font-size: 13px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #0099ff;
    transform: translate(0, 0);
  }
  /deep/ .ant-timeline-item-tail{
    left: -29px !important;
  }
  .left_qiu span{
    width: 3em;
    display: block;
    color: #fff;
    text-align: center;
  }
  .img{
    width: 75%;
  }

  .wrap{
    clear: both;
    width: 100%;
    display: flex;
    height: 50px;
    border: 1px solid #ccc;
    /* background-color: aqua; */
  }
  .box{
    width:21%;
    height:50px;
    border-right: 1px solid #ccc;
    line-height: 50px;
    /* background: red; */
    text-align:center;
    margin: auto;
  }

</style>