【流程设计】类似钉钉的流程设计功能样式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应用到给定类型; 需要:…...
跨境电商领域云手机之选：亚矩阵云手机的卓越优势
在跨境电商蓬勃发展的当下，云手机已成为众多企业拓展海外市场的得力助手。亚矩阵云手机凭借其独特优势，在竞争激烈的云手机市场中崭露头角。不过，鉴于市场上云手机服务供应商繁多，企业在抉择时需对诸多要素予以审慎考量。 跨境电商…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...