[add] 增加人员信息

src/components/ProcessCommonLayout.vue

@@ -22,7 +22,20 @@
       <slot name="process"></slot>
     </div>
     <!--人员信息，可以不用单独封组件了，放在这里就行-->
-    <div class="process-container" v-show="activeTab === 'person'">人员信息</div>
+    <div class="process-container" v-show="activeTab === 'person'">
+      <van-steps direction="vertical">
+        <van-step v-for="item in personnelInfoData" :key="item.id">
+          <template #active-icon>
+            <van-icon class="iconfont" class-prefix="icon" name="circle" />
+          </template>
+          <template #inactive-icon>
+            <van-icon class="iconfont" class-prefix="icon" name="circle" />
+          </template>
+          <h3>{{ item.nodeName }}</h3>
+          <p>{{ item.linkUserIds_dictText }}</p>
+        </van-step>
+      </van-steps>
+    </div>
 
     <!--底部操作按钮-->
     <div class="operate-box">
@@ -32,6 +45,8 @@
 </template>
 
 <script>
+import { getPersonInfoList } from '@/api/api'
+
 export default {
   name: 'ProcessCommonLayout',
   props: {
@@ -40,13 +55,23 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    // 流程key
+    processKey: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data () {
     return {
-      activeTab: 'basic'
+      activeTab: 'basic',
+      personnelInfoData: [] // 人员信息列表
     }
   },
+  mounted () {
+    this.getPersonInfoStructure()
+  },
   methods: {
     /**
      * 切换标签页
@@ -54,6 +79,24 @@ export default {
      */
     handleActiveTab (key) {
       this.activeTab = key
+    },
+    /**
+     * 获取人员信息列表数据
+     * @param key
+     */
+    getPersonInfoStructure () {
+      const param = {}
+      param.processDefinitionKey = this.processKey
+      if (this.$route.query.processInstanceId) {
+        param.processInstanceId = this.$route.query.processInstanceId
+      }
+      getPersonInfoList(param).then(res => {
+        if (res.success) {
+          console.log(res.result)
+          // 处理人员信息数据，判断每个节点是否能选人
+          this.personnelInfoData = res.result
+        }
+      })
     }
   }
 }
@@ -113,4 +156,46 @@ export default {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+/deep/ .van-steps {
+  padding: 0 0.32rem 0 0.88rem;
+  .van-step__title {
+    h3 {
+      font-size: 0.28rem;
+      color: rgba(29, 33, 41, 0.9);
+      line-height: 0.33rem;
+      margin: 0 0 0.16rem 0;
+      font-weight: 400;
+    }
+    p {
+      background: #F2F3F5;
+      border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
+      margin: 0;
+      padding: 0.26rem 0.21rem;
+      color: #1D2129;
+    }
+  }
+  .van-step__circle-container {
+    left: -0.44rem;
+    color: @primary-color;
+  }
+  .van-step__line {
+    width: 0.03rem;
+    height: calc(100% - 0.24rem);
+    left: -0.46rem !important;
+    top: 0.47rem;
+    background: linear-gradient(to top,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);
+    background-size: 0.03rem 0.2rem;
+    background-repeat: repeat-y;
+    //border: 1px dashed #BABABA;
+  }
+  .van-step:last-child {
+    .van-step__line {
+      display: none;
+    }
+  }
+  .van-step--vertical:not(:last-child)::after {
+    display: none;
+  }
+}
 </style>