【流程设计】类似钉钉的流程设计功能样式demo
对于一些审批流程，可能会用到这个功能，通过这样一层层的加下来，弄一个审批流程的数组，然后根据这个来审核是否都通过审批，这里是简单的弄一个样式的demo，功能自由发挥
<!DOCTYPE html>
<html><head><meta charset='UTF-8'><!-- 公共css文件 --><link rel="stylesheet" href="/statics/css/common/common.css"><!-- 公共js --><script src="/statics/vue_element/common.js"></script><script src="/statics/js/dialog.js"></script><!-- vue部分依赖 --><link rel="stylesheet" href="/statics/vue_element/element.css"><script src="/statics/vue_element/vue.js"></script><script src="/statics/vue_element/element.js"></script><script src="/statics/vue_element/axios.js"></script><title>流程设计</title>
</head><body><div id="app"><el-card style="display: flex;justify-content: center;height: 800px;overflow: auto;padding: 10px;"><!-- 流程结构 --><div v-for="(item,index) in liucheng_zong" :key="index" style="margin-bottom: 5px;"><div style="width: 240px;"><div :class="item.type=='fqr'?'fqr_title':'spr_title'"><div>{{item.title}}</div><i class="el-icon-error" style="cursor: pointer;" @click="delLc(index)"v-if="item.type!=='fqr'"></i></div><div class="value" @click="openLcDrawer"><div class="valueInfo"><div>{{item.value}}</div><i class="el-icon-arrow-right"></i></div><!-- <el-cascader :options="options" :props="{ checkStrictly: true }" clearable size="mini"style="width: 100%;" v-model="item.value"></el-cascader> --></div></div><!-- 添加流程 --><div style="display: flex;justify-content: center;flex-direction: column;align-items: center;"><div style="font-size: 20px;">丨</div><el-button type="primary" icon="el-icon-plus" circle size="small" @click="addLc(index)"></el-button><div style="font-size: 20px;margin-top: -3px;">↓</div></div></div><!-- 结束流程 --><div style="display: flex;justify-content: center;margin-top: 20px;"><div class="jieshu">结束流程</div></div></el-card><!-- 保存流程 --><div style="display: flex;justify-content: center;margin-top: 20px;"><el-button type="primary" size="small" @click="save" style="width: 200px;">保存</el-button></div><!-- 右抽屉：流程详细操作 --><el-drawer title="流程设置" :visible.sync="lcDrawer" direction="rtl" size="40%"><div><el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true"><el-tab-pane label="设置审批人" name="1"><div style="padding: 10px;"><el-radio-group v-model="spr_user"><el-radio :label="1">指定成员</el-radio><el-radio :label="2">主管</el-radio><el-radio :label="3">发起人自选</el-radio></el-radio-group><div><el-button type="primary" size="mini" style="width: 100px;margin-top: 15px;"icon="el-icon-plus">添加成员</el-button></div></div></el-tab-pane><el-tab-pane label="操作权限" name="2"></el-tab-pane></el-tabs></div></el-drawer></div>
</body>
<script>let v = new Vue({el: '#app',data() {return {lcDrawer: false,activeName: '1',spr_user: 1,//审批人选择liucheng_zong: [{title: '发起人',value: '所有人',type: 'fqr'}],options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '设计原则',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反馈'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '导航',children: [{value: 'cexiangdaohang',label: '侧向导航'}, {value: 'dingbudaohang',label: '顶部导航'}]}]}, {value: 'zujian',label: '组件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'}, {value: 'color',label: 'Color 色彩'}, {value: 'typography',label: 'Typography 字体'}, {value: 'icon',label: 'Icon 图标'}, {value: 'button',label: 'Button 按钮'}]}, {value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 单选框'}, {value: 'checkbox',label: 'Checkbox 多选框'}, {value: 'input',label: 'Input 输入框'}, {value: 'input-number',label: 'InputNumber 计数器'}, {value: 'select',label: 'Select 选择器'}, {value: 'cascader',label: 'Cascader 级联选择器'}, {value: 'switch',label: 'Switch 开关'}, {value: 'slider',label: 'Slider 滑块'}, {value: 'time-picker',label: 'TimePicker 时间选择器'}, {value: 'date-picker',label: 'DatePicker 日期选择器'}, {value: 'datetime-picker',label: 'DateTimePicker 日期时间选择器'}, {value: 'upload',label: 'Upload 上传'}, {value: 'rate',label: 'Rate 评分'}, {value: 'form',label: 'Form 表单'}]}, {value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'}, {value: 'tag',label: 'Tag 标签'}, {value: 'progress',label: 'Progress 进度条'}, {value: 'tree',label: 'Tree 树形控件'}, {value: 'pagination',label: 'Pagination 分页'}, {value: 'badge',label: 'Badge 标记'}]}, {value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'}, {value: 'loading',label: 'Loading 加载'}, {value: 'message',label: 'Message 消息提示'}, {value: 'message-box',label: 'MessageBox 弹框'}, {value: 'notification',label: 'Notification 通知'}]}, {value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 导航菜单'}, {value: 'tabs',label: 'Tabs 标签页'}, {value: 'breadcrumb',label: 'Breadcrumb 面包屑'}, {value: 'dropdown',label: 'Dropdown 下拉菜单'}, {value: 'steps',label: 'Steps 步骤条'}]}, {value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 对话框'}, {value: 'tooltip',label: 'Tooltip 文字提示'}, {value: 'popover',label: 'Popover 弹出框'}, {value: 'card',label: 'Card 卡片'}, {value: 'carousel',label: 'Carousel 走马灯'}, {value: 'collapse',label: 'Collapse 折叠面板'}]}]}, {value: 'ziyuan',label: '资源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '组件交互文档'}]}]};},methods: {// tabs切换handleClick(e) {console.log(e, 'eee');},// 保存流程save() {console.log(this.liucheng_zong, 'liucheng_zong');},// 添加流程addLc(index) {this.liucheng_zong.splice(index + 1, 0, {title: '审批人',value: '李四',type: 'spr'})},// 删除流程delLc(index) {this.liucheng_zong.splice(index, 1)},// 打开流程设计抽屉openLcDrawer() {this.lcDrawer = true}}})
</script>
<style scoped>.fqr_title {padding: 6px 10px;background-color: #3e4c6b;color: #fff;border-top-right-radius: 5px;border-top-left-radius: 5px;display: flex;justify-content: space-between;}.spr_title {padding: 6px 10px;background-color: #e68439;color: #fff;border-top-right-radius: 5px;border-top-left-radius: 5px;display: flex;justify-content: space-between;}.value {box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}.valueInfo {display: flex;align-items: center;justify-content: space-between;padding: 15px 10px;cursor: pointer;}.jieshu {padding: 6px 10px;background-color: #cecbcb;border-radius: 12px;color: #fff;}
</style></html>
相关文章：
【流程设计】类似钉钉的流程设计功能样式demo
对于一些审批流程，可能会用到这个功能，通过这样一层层的加下来，弄一个审批流程的数组，然后根据这个来审核是否都通过审批，这里是简单的弄一个样式的demo，功能自由发挥 <!DOCTYPE html> <html>…...
ChatGPT入门之文本情绪识别：先了解LSTM如何处理文字序列
文章目录 0. 首先聊聊什么是RNN1. 理解LSTM，从数据如何喂给 LSTM开始2. LSTM每个门是如何处理序列数据的？2.1 遗忘门（Forget Gate）：该忘掉哪些信息？2.2 输入门（Input Gate）ÿ…...
测试开发之面试宝典
目录 session和cookie的区别 session和cookie的区别 1.session和cookie都是鍵值对应的 2.session和cookie都是服务器生成的，session的ID，即服各器用来识别读取session对象的一把钥匙 3.session是保存在服各器端，而cookie是返回給客戶端的&…...
 】)
399. 除法求值【 力扣(LeetCode) 】
文章目录 零、LeetCode 原题一、题目描述二、测试用例三、解题思路3.1 图的路径搜索3.2 路径压缩 四、参考代码4.1 图的路径搜索4.2 路径压缩 零、LeetCode 原题 399. 除法求值 一、题目描述 给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件，…...
算法日记1：洛谷p2678跳石头(二分答案)
1、题目 二、题解： 2.1解题思路: 1.题目要求求出最小值最大，明显的二分答案题目，所以我们可以二分可以跳跃距离int l-1,rL1; 2.此时我们思考lmid和rmid的处理,当我们的check(mid)为true时候 表明我们此时的mid是符合要求的， 那么…...
Unity shader中真的可以动态关闭Stencil Test吗？
这个问题很多年前就有人问了： https://discussions.unity.com/t/how-to-disable-the-stencil-block-via-shader-properties/600273/1 最后的答案是： set [_StencilComp] to CompareFunction.Disabled to disable the Stencil Op completely. 但是我测试…...
YOLOv9改进，YOLOv9自研检测头融合HyCTAS的Self_Attention自注意力机制，2024，适合目标检测、分割任务
摘要 论文提出了一种新的搜索框架，名为 HyCTAS，用于在给定任务中自动搜索高效的神经网络架构。HyCTAS框架结合了高分辨率表示和自注意力机制，通过多目标优化搜索，找到了一种在性能和计算效率之间的平衡。 # 理论介绍 自注意力（Self-Attention）机制是HyCTAS框架中的一个…...
计算机网络 （36）TCP可靠传输的实现
前言 TCP（传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP通过多种机制实现可靠传输，这些机制主要包括连接管理、序列号和确认应答机制、重传机制、流量控制、拥塞控制等。 一、连接管理 TCP使用三次握手࿰…...
Git版本控制 - 创建使用Repository
Git版本控制 – 创建使用Repository Version Control with Git - Create and Use Repository By JacksonML 上文提到，Git是一种分布式版本控制系统。作为全球范围内广泛使用的工具，如何将项目分步骤运用到其中呢？ 本文简要介绍如何用Git工…...
MySQL —— 在CentOS9下安装MySQL
MySQL —— 在CentOS9下安装MySQL 1.查看自己操作系统的版本2.找到对应的安装源3.上传我们在windows下，下载的文件，解压4.执行rpm命令，启用MySQL8仓库5.执行dnf install -y mysql-community-server6.设置开机自启动7.获得初始密码8.登录MySQL…...
LeetCode 热题 100_腐烂的橘子（52_994_中等_C++）(图；广度优先遍历（队列）)
LeetCode 热题 100_腐烂的橘子（52_994） 题目描述：输入输出样例：题解：解题思路：思路一（广度优先遍历（队列））： 代码实现代码实现（思路一…...
Nginx 可观测性最佳实践
Nginx 介绍 Nginx 是一个开源、轻量级、高性能的 HTTP 和反向代理服务器，也可以用于 IMAP/POP3 代理服务器。Nginx 因其采用的异步非阻塞工作模型，使其具备高并发、低资源消耗的特性。高度模块化设计也使得 Nginx 具备很好的扩展性，在处理静…...
LabVIEW光流跟踪算法
1. 光流跟踪算法的概述 光流（Optical Flow）是一种图像处理技术，用于估算图像中像素点的运动。通过比较连续帧图像，光流算法可以分析图像中的运动信息，广泛用于目标跟踪、运动检测和视频处理等场景。该示例使用了NI Vi…...
Jira用例自动去除summary重复用例
title: Jira用例自动去除summary重复用例 tags: - jira - python categories: - python一、背景与需求二、解决方案思路三、实施步骤本文永久更新地址: 在使用 Jira 进行项目管理时，测试用例的维护至关重要。随着项目推进，用例数量增多，可能…...
基于openEuler22.03SP4部署Prometheus+Grafana
测试环境 Virtual Box，openEuler-22.03-LTS-SP4-x86_64-dvd.iso，4 vCPU, 8G RAM, 60 vDisk。最小化安装。需联网。 系统环境 关闭防火墙 systemctl stop firewalld systemctl disable firewalld systemctl status firewalld selinux关闭 sed -ri…...
泛目录和泛站有什么差别
啥是 SEO 泛目录？ 咱先来说说 SEO 泛目录是啥。想象一下，你有一个巨大的图书馆，里面的书架上摆满了各种各样的书，每一本书都代表着一个网页。而 SEO 泛目录呢，就像是一个超级图书管理员，它的任务就是把这些…...
css 布局及动画应用（flex+transform+transition+animation）
文章目录 css 布局及动画应用animationtransform，transition，animation 综合应用实例代码实例解释 css 布局及动画应用 Display用法 作用：用于控制元素的显示类型，如块级元素、内联元素、无显示等。常见属性值及示例：…...
springboot vue uniapp 仿小红书 1:1 还原 （含源码演示）
线上预览: 移动端 http://8.146.211.120:8081/ 管理端 http://8.146.211.120:8088/ 小红书凭借优秀的产品体验 和超高人气 目前成为笔记类产品佼佼者 此项目将详细介绍如何使用Vue.js和Spring Boot 集合uniapp 开发一个仿小红书应用，凭借uniapp 可以在h5 小程序 app…...
lombok在高版本idea中注解不生效的解决
环境： IntelliJ IDEA 2024.3.1.1 Spring Boot Maven 问题描述 使用AllArgsConstructor注解一个用户类，然后调用全参构造方法创建对象，出现错误： java: 无法将类 com.itheima.pojo.User中的构造器 User应用到给定类型; 需要:…...
跨境电商领域云手机之选：亚矩阵云手机的卓越优势
在跨境电商蓬勃发展的当下，云手机已成为众多企业拓展海外市场的得力助手。亚矩阵云手机凭借其独特优势，在竞争激烈的云手机市场中崭露头角。不过，鉴于市场上云手机服务供应商繁多，企业在抉择时需对诸多要素予以审慎考量。 跨境电商…...
告别拍脑袋规划！用ArcGIS做绿道选线：如何科学量化坡度、水域、道路成本并加权计算
科学规划绿道的ArcGIS高阶技法：从成本栅格构建到最优路径生成绿道规划从来不是简单的"两点之间直线最短"，而是需要综合考虑地形、生态、人文等多维因素的复杂决策过程。传统规划中常见的"拍脑袋"决策方式，往往导致建成后…...
AArch64内存管理：MAIR_EL3寄存器详解与应用
1. AArch64内存管理基础与MAIR_EL3寄存器定位 在Armv8-A/v9-A架构中，内存管理单元(MMU)通过多级页表实现虚拟地址到物理地址的转换。当处理器执行内存访问时，MMU会遍历页表条目(Translation Table Entry)，其中包含两个关键信息：目…...
1901-2022年中国气温变化分析实战：用这份1km栅格数据我们能发现什么？
1901-2022年中国气温变化分析实战：如何从1km栅格数据中挖掘气候演变规律当一份覆盖122年、分辨率精确到1公里的气温栅格数据摆在面前时，我们看到的不仅是数字矩阵，更是一部写在经纬度坐标里的气候变迁史诗。这份由逐月数据聚合生成的逐年气温…...
HDI 高密度互连板阶数的深度理解
一、概述高密度互连板（High Density Interconnector, HDI）是通过激光微孔技术和逐层积层工艺实现高密度布线的印制电路板。其阶数划分是行业内统一的技术标准，核心依据为独立积层压合次数与配套激光盲孔制程次数，而非单面层数或钻…...
终极歌词同步神器LRCGET：5分钟为你的音乐库添加完美歌词
终极歌词同步神器LRCGET：5分钟为你的音乐库添加完美歌词 【免费下载链接】lrcget Utility for mass-downloading LRC synced lyrics for your offline music library. 项目地址: https://gitcode.com/gh_mirrors/lr/lrcget 你是否厌倦了在听歌时手动搜索歌词…...
2026数据治理平台选型：五款产品如何赋能数据中台建设？
一、引言：数据中台的成败，关键在治理在数字化浪潮的席卷下，“数据中台”已成为当代企业信息化架构中的核心战略组件。然而，一个悖论正困扰着大量企业：数据中台的基础设施搭建日趋完善，但真正将数据转化为业…...
人工智能的伦理与安全：这3个问题，软件测试从业者必须重视
随着大语言模型、生成式AI的爆发式落地，人工智能已经从实验室走向千行百业的生产场景，深刻改变着软件开发与交付的逻辑。对于直接把控产品质量关口的软件测试从业者来说，我们的职责早已不再是单纯验证功能可用性、排查性能bug那么简单——AI系…...
第2章 谁在危险中——被AI替代的五类程序员
第2章 谁在危险中——被AI替代的五类程序员 核心问题：哪些程序员最容易被AI替代？背后的原因是什么？ 2.1 问题定义：一场正在发生的结构性塌陷 2.1.1 数据不会说谎 2026年1月12日，Ravio发布了一份让整个科技圈沉默的报告：过去一年，初级开发者岗位招聘量暴跌73%。 不是…...
昇腾CANN elec-ops-simulation 实战：电力系统仿真——潮流计算与暂态稳定分析在 NPU 上的加速
电力系统仿真：500 节点电网的牛顿-拉夫逊潮流计算 → 解 10001000 稀疏雅可比矩阵（每迭代 1 次矩阵求逆）→ CPU 迭代 15 次 2.4s。实时调度要求 < 100ms → NPU 加速：雅可比矩阵求解用 Cube 单元做批量小矩阵 LU 分解 → 每迭…...
告别繁琐审核！实测AI Agent如何重塑复杂非结构化票据与合同处理流程？
摘要：在企业数字化转型步入深水区的2026年，处理复杂非结构化票据与合同已成为横亘在财务、法务部门面前的“最后一公里”难题。传统RPA因UI变动易崩溃、主流智能体因缺乏API适配而无法落地，导致大量业务仍依赖低效的人工操作。本文由「企服AI…...