【流程设计】类似钉钉的流程设计功能样式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应用到给定类型; 需要:…...
跨境电商领域云手机之选：亚矩阵云手机的卓越优势
在跨境电商蓬勃发展的当下，云手机已成为众多企业拓展海外市场的得力助手。亚矩阵云手机凭借其独特优势，在竞争激烈的云手机市场中崭露头角。不过，鉴于市场上云手机服务供应商繁多，企业在抉择时需对诸多要素予以审慎考量。 跨境电商…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
Oracle11g安装包
Oracle 11g安装包 适用于windows系统，64位 下载路径 oracle 11g 安装包...
的打车小程序)
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
xmind转换为markdown
文章目录 解锁思维导图新姿势：将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件（ZIP处理）2.解析JSON数据结构3：递归转换树形结构4：Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...