基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程(一)图标svgicon的使用

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

1、lowflow这里使用了tsx的动态图标,如下:

import './index.scss'
import type { CSSProperties, PropType } from 'vue'
import { computed, defineComponent, resolveComponent, h } from 'vue'export default defineComponent({name: 'SvgIcon',props: {name: {type: String as PropType<string>,required: true},prefix: {type: String as PropType<string>,default: 'icon'},color: {type: String as PropType<string>},size: {type: Number as PropType<number>},className: {type: String as PropType<string>}},setup(props) {const symbolId = computed(() => `#${props.prefix}-${props.name}`)const svgClass = computed(() => ['svg-icon',props.name && props.name.replace('el:', ''),props.className])const fill = computed(() => (props.color ? props.color : 'currentColor'))const style = computed<CSSProperties>(() => {const { size } = propsif (!size) return {}return {fontSize: `${size}px`}})return {symbolId,svgClass,fill,style}},render() {const { $attrs, symbolId, svgClass, fill } = thisif (this.name) {if (this.name.startsWith('el:')) {return (<el-icon class={svgClass} color={this.color} size={this.size} {...$attrs}>{h(resolveComponent(this.name.slice(3)))}</el-icon>)} else {return (<svg class={svgClass} style={this.style} aria-hidden="true" {...$attrs}><use xlinkHref={symbolId} fill={fill}></use></svg>)}}return null}
})

这里根据jeecgboot的项目情况增加下面一行,否则会报错(因为没有自动引入组件)

import { computed, defineComponent, resolveComponent, h } from 'vue'

2、在需要用到上面tsx的组件,需要单独引入,因为本身jeecgboot有自己的图标组件,为了不引起冲突,还是单独引入为好,如add.vue增加节点的图标显示

<script setup lang="ts">
import { ref, reactive, computed, inject, defineComponent } from 'vue';
import type { PopoverInstance } from 'element-plus'
import type { NodeType } from './type'
import type { Ref } from 'vue'
import SvgIcon from '@/views/lowflow/components/SvgIcon/index'const { readOnly } = inject<{readOnly?: Ref<boolean>
}>('flowDesign', { readOnly: ref(false) })
const popoverRef = ref<PopoverInstance>()
const $emits = defineEmits<{(e: 'addNode', type: NodeType): void
}>()
const addApprovalNode = () => {$emits('addNode', 'approval')popoverRef.value?.hide()
}
const addCcNode = () => {$emits('addNode', 'cc')popoverRef.value?.hide()
}
const addExclusiveNode = () => {$emits('addNode', 'exclusive')popoverRef.value?.hide()
}
const addTimerNode = () => {$emits('addNode', 'timer')popoverRef.value?.hide()
}
const addNotifyNode = () => {$emits('addNode', 'notify')popoverRef.value?.hide()
}
</script><template><div class="add-but"><el-popoverplacement="bottom-start"ref="popoverRef"trigger="click"title="添加节点":width="336"><el-space wrap><div class="node-select" @click="addApprovalNode"><svg-icon name="el:Stamp" /><el-text>审批人</el-text></div><div class="node-select" @click="addCcNode"><svg-icon name="el:Promotion" /><el-text>抄送人</el-text></div><div class="node-select" @click="addExclusiveNode"><svg-icon name="el:Share" /><el-text>互斥分支</el-text></div><div class="node-select" @click="addTimerNode"><svg-icon name="el:Timer" /><el-text>计时等待</el-text></div><div class="node-select" @click="addNotifyNode"><svg-icon name="el:BellFilled" /><el-text>消息通知</el-text></div></el-space><template #reference><el-buttonv-show="!readOnly"icon="Plus"type="primary"style="z-index: 1"circle></el-button></template></el-popover></div>
</template><style scoped lang="scss">
.node-select {cursor: pointer;display: flex;padding: 8px;width: 135px;border-radius: 10px;position: relative;background-color: var(--el-fill-color-light);&:hover {background-color: var(--el-color-primary-light-9);box-shadow: var(--el-box-shadow-light);color: var(--el-color-primary);}.svg-icon {font-size: 25px;padding: 5px;border-radius: 50%;color: var(--el-color-white);&.Stamp {background-color: #ff943e;}&.Promotion {background-color: #3296fa;}&.Share {background-color: #45cf9b;}&.Timer {background-color: #e872b7;}&.BellFilled {background-color: #95d475;}}.el-text {margin-left: 10px;}
}.add-but {display: flex;justify-content: center;width: 100%;padding: 20px 0 32px;position: relative;&:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 1px;height: 100%;background-color: var(--el-border-color);}
}
</style>

3、效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/41722.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB基础应用精讲-【数模应用】 岭回归(Ridge)(附MATLAB、python和R语言代码实现)

目录 前言 算法原理 数学模型 Ridge 回归的估计量 Ridge 回归与标准多元线性回归的比较 3. Ridge 参数的选择 算法步骤 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 6、输出结果分析 7、注意事项 8、模型理论 SPSSAU 岭回归分析案…

Java [ 进阶 ] 深入理解 JVM

✨探索Java基础 深入理解 JVM✨ 深入理解 JVM&#xff1a;结构与垃圾回收机制 Java 虚拟机&#xff08;JVM&#xff09;是 Java 程序运行的核心&#xff0c;了解 JVM 的内部结构和垃圾回收机制对优化 Java 应用性能至关重要。本文将深入探讨 JVM 的结构和垃圾回收机制&#…

支付宝沙箱对接(GO语言)

支付宝沙箱对接 1.1 官网1.2 秘钥生成&#xff08;系统默认&#xff09;1.3 秘钥生成&#xff08;软件生成&#xff09;1.4 golan 安装 SDK1.5 GoLand 代码1.6 前端代码 1.1 官网 沙箱官网: https://open.alipay.com/develop/sandbox/app 秘钥用具下载&#xff1a; https://ope…

序列化、反序列化

java 提供了一种对象序列化的机制&#xff0c;该机制中&#xff0c;一个对象可以被表示为一个字节序列&#xff0c;该字节序列包括该对象的数据、有关对象的类型的信息和存储在对象中数据的类型。 将序列化对象写入文件之后&#xff0c;可以从文件中读取出来&#xff0c;并且对…

Java并发编程-ThreadLocal深入解读及案例实战

文章目录 概述原理使用场景示例最佳实践内存泄漏风险阿里开源组件TransmittableThreadLocal原理和机制使用场景如何使用注意事项ThreadLocal在分布式存储系统edits_log案例中的实践1. 为什么使用`ThreadLocal`?2. 实践案例2.1 缓存日志操作2.2 线程局部的编辑日志状态3. 注意事…

在 Spring 中编写单元测试

单元测试是软件开发过程中不可或缺的一部分&#xff0c;它能有效地提高代码质量&#xff0c;确保代码功能的正确性。在 Spring 应用中&#xff0c;JUnit 和 Mockito 是常用的单元测试工具&#xff0c;而 Spring Test 提供了丰富的测试支持。本文将介绍如何在 Spring 中使用 JUn…

并行处理百万个文件的解析和追加

处理和解析大量文件&#xff0c;尤其是百万级别的文件&#xff0c;是一个复杂且资源密集的任务。为实现高效并行处理&#xff0c;可以使用Python中的多种并行和并发编程工具&#xff0c;比如multiprocessing、concurrent.futures模块以及分布式计算框架如Dask和Apache Spark。这…

物联网时代5G通信技术分析研究一、引言

一、引言 近几年&#xff0c;移动网络技术跟随互联网的不断发展而改革和进步&#xff0c;给平民大众的生活也带来新的尝试与影响。从2G网络的出现&#xff0c;到逐步被社会民众所了解的3G&#xff0c;再到被熟知的且正在服务于大家的4G网络&#xff0c;移动网络技术的发展速度令…

jQuery Mobile 安装指南

jQuery Mobile 安装指南 jQuery Mobile 是一个基于 jQuery 的移动设备友好的网页开发框架,它允许开发者创建响应式网页和应用程序。本指南将详细介绍如何安装 jQuery Mobile,并确保您的开发环境准备好进行移动网页开发。 1. 环境准备 在开始安装 jQuery Mobile 之前,请确…

Mysql系列-Binlog主从同步

原文链接&#xff1a;https://zhuanlan.zhihu.com/p/669450627 一、主从同步概述 mysql主从同步&#xff0c;即MySQL Replication,可以实现将数据从一台数据库服务器同步到多台数据库服务器。MySQL数据库自带主 从同步功能&#xff0c;经过配置&#xff0c;可以实现基于库、表…

B端设计:任何不顾及用户体验的设计,都是在装样子,花架子

B端设计是指面向企业客户的设计&#xff0c;通常涉及产品、服务或系统的界面和功能设计。与C端设计不同&#xff0c;B端设计更注重实用性和专业性&#xff0c;因为它直接影响企业的效率和利益。 在B端设计中&#xff0c;用户体验同样至关重要。不顾及用户体验的设计只是空洞的表…

数据库之索引(二)

目录 一、如何判断数据库的索引是否生效 二、如何评估索引创建的是否合理 三、索引是否越多越好 四、如何处理数据库索引失效 五、是否所有的字段都适合创建索引 一、如何判断数据库的索引是否生效 可以使用EXPLAIN语句查看索引是否正在使用。 例如&#xff0c;假设已经创…

70.Bug:使用list.sort(Comparator.Comping(User::getCreateTime).reverse())空指针异常

1.出错原因&#xff1a;在xml中没有做字段映射 报错语句复现&#xff1a; List<User> listnew ArrayList<>()&#xff1b; xml中进行查询数据&#xff0c;数据存放在list中........... //排序 list.sort(Comparator.Comping(User::getCreateTime).reverse())&…

经典的layui框架,还有人用吗?令人惋惜。

自从layui官网宣布关闭之后&#xff0c;layui框架的用户飞速下滑&#xff0c;以至于到现在贝格前端工场承接的项目中&#xff0c;鲜有要求使用layui框架的&#xff0c;那么个框架还有人用吗&#xff1f; 一、layui没落是不是jquery惹的祸 layui的没落与jQuery无关。layui框架…

Hi3861 OpenHarmony嵌入式应用入门--UDP Server

本篇使用的是lwip编写udp服务端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点&#xff0c;并且密码为PARAM_HOTSPOT_PSK。 修改网络参数 在Hi3861开发板上运行上述四个测试程序之前&#xff0c;需要根据你的无线路由、Linux系统IP修改 net_params.h文件的相关代码&…

深入理解 Docker 容器技术

一、引言 在当今的云计算和软件开发领域&#xff0c;Docker 容器技术已经成为了一项不可或缺的工具。它极大地改变了应用程序的部署和运行方式&#xff0c;为开发者和运维人员带来了诸多便利。 二、Docker 容器是什么&#xff1f; Docker 容器是一种轻量级、可移植、自包含的…

起底:Three.js和Cesium.js,二者异同点,好比全科和专科.

Three.js和Cesium.js是两个常用的webGL引擎&#xff0c;很多小伙伴容易把它们搞混淆了&#xff0c;今天威斯数据来详细介绍一下&#xff0c;他们的起源、不同点和共同点&#xff0c;阅读后你就发现二者就像全科医院和专科医院的关系&#xff0c;很好识别。 一、二者的起源 Th…

性能测试相关理解---性能测试流程(二)

六、性能测试流程&#xff08;如何做性能测试&#xff1f;) 根据学习全栈测试博主的课程做的笔记 1、前期准备– 项目初期就开始&#xff0c;业务需求评审时尽量参与,对业务更深刻的认识&#xff08;确定哪些是核心业务、哪些可能存在并发请求、确定什么地方会出现瓶颈,方便后…

WebOffice在线编微软Offfice,并以二进制流的形式打开Word文档

在日常办公场景中&#xff0c;我们经常会遇到这种场景&#xff1a;我们的合同管理系统的各种Word,excel,ppt数据都是以二进制数组的形式存储在数据库中&#xff0c;如何从数据库中读取二进制数据&#xff0c;以二进制数据作为参数&#xff0c;然后加载到浏览器的Office窗口&…

【无标题】地平线2西之绝境/Horizon Forbidden West™ Complete Edition(更新:V1.3.57)

游戏介绍 与埃洛伊同行&#xff0c;在危险壮美的边疆之地揭开种种未知的神秘威胁。此完整版可完整享受广受好评的《地平线 西之绝境™》内容和额外内容&#xff0c;包括在主线游戏后展开的后续故事“炙炎海岸”。 重返《地平线》中遥远未来的后末日世界&#xff0c;探索远方的土…