【流程设计】类似钉钉的流程设计功能样式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应用到给定类型; 需要:…...
跨境电商领域云手机之选：亚矩阵云手机的卓越优势
在跨境电商蓬勃发展的当下，云手机已成为众多企业拓展海外市场的得力助手。亚矩阵云手机凭借其独特优势，在竞争激烈的云手机市场中崭露头角。不过，鉴于市场上云手机服务供应商繁多，企业在抉择时需对诸多要素予以审慎考量。 跨境电商…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...