前端代码动态生成审批流程图、流程图_美丽先生_前端生成流程图

网络 02-07 6737

数据数组

弹窗页面代码

其中使用弹性盒子反转数组，也可以在处理数组的时候反转，当时没想到左右箭头（.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); } } }