[JavaScript知识库]前端代码动态生成 审批流程图、流程图

数据 数组

弹窗页面代码

其中使用弹性盒子反转数组，也可以在处理数组的时候反转，当时没想到
左右箭头（.arrowToLeft和.arrowToRight）用是否单偶数行判断，每一行的最后一个用id取余控制，开始和结束不要箭头

xt-dialog(
  title="流程视图"
  ref="viewDialogRef"
  class="dialogRef"
  :showfooter="false"
  top="5vh"
  width="954px"
  append-to-body
)
  .viewDialogBox(v-for="(val,index1) in couples_list" :key="val.id")
    .downline(v-if="index1 !== 0 " :style="{margin:(index1 +2)%2 == 1? '3px 20px 3px 840px' : '3px 30px'}")
      //- img(src="@/assets/images/arrow_down.png" style="")
      //-使用弹性盒子反转数组，也可以在处理数组的时候反转，当时没想到
    .viewDialog(:style="{flexDirection:(index1 +2)%2 == 0? 'row' : 'row-reverse'}")
      .couples(v-for="(item,index) in val" :key="item.id" style="display: flex; align-items: center;")
      		//-向左的箭头，我这里么有ps,懒得制图所以用背景图加翻转，有图片直接用img标签
        .arrowToLeft(v-if="(index1 +2)%2 == 1 && (index +1) % 5 !== 0 && item.title !== '结束' ")
          //- img(src="@/assets/images/arrow_right.png" style="")
        .header(style="width: 100px;")
          .left(style="display: flex; flex-direction: column; align-items: center;")
            i.iconfont.icon-kaishi1(v-if="item.title == '开始'")
            i.iconfont.icon-zhongzhi(v-else-if="item.title == '结束'" style="padding:0px 26px")
            i.iconfont.icon-shenpi3(v-else)
            .title {{ item.title }}
        .arrowToRight(v-if="(index1 +2)%2 == 0 && (index +1) % 5 !== 0 && item.title !== '结束' ")
          //- img(src="@/assets/images/arrow_right.png" style="")

JS代码

methods: {
  async showProcessView() {
     // 获取已关联流程的流程详情（流程的节点列表）参数：该流程的id
     if(this.beRelated_ProcessId == ''){
       this.$message.warning('关联流程未选择！')
     }else {
       this.$refs.viewDialogRef.open()
       let res = await this.$api.getSysTablesManageProcessReviseDetail({id: this.beRelated_ProcessId})
       let data = res.result.data.process.map((item,index) => {
         return {
           title: item.title,
           id: index +1
         }
       })
       if(data && data.length == 0) return
       data[0].title = '开始' //在设计流程页面的开始节点和结束节点名称是可改变的，所以我改成我想要的
       data[data.length - 1].title = '结束'
       this.couples_list = this.spArr(data, 5) //分割数组
       console.log('接口拿到的数据：',res)
       console.log('等比分割后的数据：',this.couples_list)
     }
   },
   //等比分割数组的方法
   spArr(arr, num) { //arr是你要分割的数组，num是以几个为一组
     let newArr = [] //首先创建一个新的空数组。用来存放分割好的数组
     for (let i = 0; i < arr.length;) { //注意：这里与for循环不太一样的是，没有i++
       newArr.push(arr.slice(i, i += num));
     }
     return newArr
   },
  }

样式

（lang=“scss” scoped）
箭头图片和图标用自己的

.dialogRef {
    .downline {
      width: 8px; 
      height: 100px;
      padding: 2px 20px;
      background: url('./../../../assets/images/arrow_down.png');
      background-position: bottom;
      background-repeat: no-repeat;
    }
    .viewDialog {
      display: flex;
      /deep/ .iconfont {
        font-size: 60px;
      }
      .arrowToRight {
        width: 100px; 
        height: 8px;
        background: url('./../../../assets/images/arrow_right.png');
        background-position: right;
        background-repeat: no-repeat;
      }
      .arrowToLeft {
        width: 100px; 
        height: 8px;
        background: url('./../../../assets/images/arrow_right.png');
        background-position: right;
        background-repeat: no-repeat;
        -moz-transform:rotate(180deg); 
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
      }
    }
  }