前端代码动态生成审批流程图、流程图

数据数组

弹窗页面代码

其中使用弹性盒子反转数组，也可以在处理数组的时候反转，当时没想到
左右箭头（.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() {// 获取已关联流程的流程详情（流程的节点列表）参数：该流程的idif(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) returndata[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);}}}

前端代码动态生成审批流程图、流程图相关推荐

通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
Unity 代码动态生成模型
网格由 3D 空间中排列的三角形组成,旨在产生实体对象的效果.三角形由其拐点或者顶点定义.在 Mesh 类中,顶点全部存储在单个数组中,并且每个三角形使用与顶点数组的索引对应的三个整数指定.这些三角形 ...
Android 代码动态生成ProgressBar
ProgressBar pb = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal); 注意第三个参数就 ...
Python实训day12am【网络爬虫大作业简略解析：动态生成html页面、数据写入Excel】
Python实训-15天-博客汇总表目录 1.HTML页面设计 2.生成每个城市的HTML页面 2.1.HTML页面代码(weatherTemplate.html) 2.2.实例代码-动态生成htm ...
unity 动态生成类_Houdini城市道路模型生成
备注:第一篇文章被系统删了,很气,就更新了一张图,然后就被封号了,文章也被系统删了.所以现在只能新开文章,重新写了,先立个标题. 所以本篇算是一种重置版,加了一些最新进度和效果,上一篇文章是8月底写的 ...
利用scrapy+splash+redis实现对JS动态生成网页的增量爬取
文章目录一.任务内容二.Scrapy安装.配置.调试三.splash安装.配置.调试开启hyper-v 安装Docker Desktop 拉取和开启Splash 安装scrapy-splash ...
用Winfrom动态生成SQL的insert语句
NameHelper类的代码 #region 随机姓名生成器 static string[] _firstName = new string[]{ &quo ...
opencv自然背景下交通标志形状分类c++代码_前端革命时刻：前端代码是怎样智能生成的-图像分离篇
作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...
基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)
基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...
代码逻辑分析_双11模块79.34%的前端代码是怎样智能生成的？
作者|妙净.波本最近几年,AI 渗透到开发领域的方方面面.在前端领域,设计稿生成代码(简称 D2C)就是一个例子.其目标在于通过 AI 助力前端提效升级,杜绝简单重复性的工作内容.今年"双十 ...

前端代码动态生成审批流程图、流程图

数据数组

弹窗页面代码

JS代码

样式

前端代码动态生成审批流程图、流程图相关推荐

最新文章

热门文章

前端代码动态生成 审批流程图、流程图

数据 数组

弹窗页面代码

JS代码

样式

前端代码动态生成 审批流程图、流程图相关推荐

最新文章

热门文章

前端代码动态生成审批流程图、流程图

数据数组

前端代码动态生成审批流程图、流程图相关推荐