【流程设计】类似钉钉的流程设计功能样式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应用到给定类型; 需要:…...
跨境电商领域云手机之选：亚矩阵云手机的卓越优势
在跨境电商蓬勃发展的当下，云手机已成为众多企业拓展海外市场的得力助手。亚矩阵云手机凭借其独特优势，在竞争激烈的云手机市场中崭露头角。不过，鉴于市场上云手机服务供应商繁多，企业在抉择时需对诸多要素予以审慎考量。 跨境电商…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...
消防一体化安全管控平台：构建消防“一张图”和APP统一管理
在城市的某个角落，一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延，滚滚浓烟弥漫开来，周围群众的生命财产安全受到严重威胁。就在这千钧一发之际，消防救援队伍迅速行动，而豪越科技消防一体化安全管控平台构建的消防“…...