From e423d8afcf5b9666e166565d0509b621ebab17e7 Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期一, 13 一月 2025 14:11:00 +0800
Subject: [PATCH] !172 合并 warmflow 功能分支 * update 优化 流程定义页面 点击复制之后跳转到未发布列表 * update 优化 流程定义页面 增加加载loading层 * fix: v-model处理有延迟 需要手动处理 * update 调整流程定义查询 * Merge remote-tracking branch 'origin/dev' into warm-flw-future * update 调整可驳回的节点 * update: 调整文案 * update: 激活/挂起改为switch操作 * update 优化 代码删除无用输出 * update 统一抄送人使用昵称展示 * update 调整分类接口 * update 统一业务id参数 * update 删除默认顶节点 * !168 优化流程分类 * update 恢复误删除代码 * update 优化流程分类 * update 修复 路由跳转未改全 * [update] * fix 修复一些问题 * update 重构流程分类表 * update 流程定义增加表单路径与编辑功能 修复一些其他bug * fix 修复 一些问题 * update 变量统一命名 * add 增加示例 * Merge branch 'warm-flw-future' of https://gitee.com/JavaLionLi/plus-ui… * update 调整办理人 * Merge remote-tracking branch 'origin/dev' into warm-flw-future * add 增加示例 * update 调整审批记录 添加流程导出 * remove 删除无用代码 * remove 删除无用代码 * [update] * [fix] * 流程干预删除委托 * 增加附件 * 附件修改 * 申请人查询修改 * 1.修改查询条件 * !167 fix 修复 import路径修改不全问题 * fix 修复 import路径修改不全问题 * !166 update 清除 ProcessPreview 引用 * update 清除 ProcessPreview 引用 * remove 删除 bpmn.js 设计器 * remove 删除 bpmn.js 设计器 * remove 删除 bpmn.js 设计器 * remove 删除 bpmn.js 设计器 * fix 修复 前端路径修改不全问题 * update 优化接口请求路径 * add 添加作废 * add 添加流程干预 * update 调整加签，减签 * update 调整加签，减签 * add 增加流程查看 * update 调整委托，转办 * update 调整流程变量显示 * update 调整办理人修改 * update 调整流程实例状态页面 * update 调整已办页面 * add 添加流程撤销 * update 调整任务，流程实例 ，流程定义页面 * Merge branch 'dev' into warm-flw-future * update 调整流程定义页面 * add 添加流程变量查看 * update 调整设计器路由名称 * update 调整办理人 * update 调整设计器uri * update 调整设计器请求uri 调整待办状态 * update 调整办理 驳回 终止等状态 * add 添加模型新增 * add 添加warm-ui设计器,删除无用代码 * Merge remote-tracking branch 'origin/dev' into warm-flw-future * add 添加流程设计 * update 调整驳回 * update 调整视图类型错误 * Merge branch 'warm-flw-future' of https://gitee.com/JavaLionLi/plus-ui… * 添加已办，未办 * Merge remote-tracking branch 'origin/dev' into warm-flw-future * update 调整流程实例，待办查询 * add 添加代办人，调整提交按钮校验 * update 调整流程定义查询 * add添加流程定义激活 挂起 * add 添加流程文件部署 调整流程发布 * update 优化 时间搜索组件统一 * Merge remote-tracking branch 'origin/dev' into warm-flw-future * fix 修复 用户管理编辑安全权限错误问题 * Merge remote-tracking branch 'origin/dev' into warm-flw-future * update 优化 类型报错问题 * update 优化 切换租户后刷新首页 * update 优化 实现表格行选中切换 * update 优化 使用 vueuse 重构 websocket 实现 * update 优化 使用 vueuse 重构 websocket 实现 * fix 修复 登出后重新登录 sse推送报错问题 * reset 回滚 代码修改 采用其他方案 * fix 修复 登出后重新登录 sse推送报错问题 * update 优化 删除无用代码 * update element-plus 2.7.5 => 2.7.8 * reset 回滚 错误修复 * update 优化 代码生成器编辑页禁用缓存 防止同步后页面不更新问题 * fix 修复 代码生成同步点击取消报错问题 * 初始化添加warm-flow
---
src/components/IconSelect/index.vue | 152 ++++++++++++++++++++++++++++++--------------------
1 files changed, 91 insertions(+), 61 deletions(-)
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 5b06806..3bfde4d 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,74 +1,104 @@
<template>
- <div class="icon-body">
- <el-input
- v-model="iconName"
- style="position: relative;"
- clearable
- placeholder="璇疯緭鍏ュ浘鏍囧悕绉�"
- @clear="filterIcons"
- @input="filterIcons"
- >
- <template #suffix><i class="el-icon-search el-input__icon" /></template>
+ <div class="relative" :style="{ 'width': width }">
+ <el-input v-model="modelValue" readonly placeholder="鐐瑰嚮閫夋嫨鍥炬爣" @click="visible = !visible">
+ <template #prepend>
+ <svg-icon :icon-class="modelValue" />
+ </template>
</el-input>
- <div class="icon-list">
- <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
- <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
- <span>{{ item }}</span>
- </div>
- </div>
+
+ <el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450">
+ <template #reference>
+ <div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]" @click="visible = !visible">
+ <i-ep-caret-top v-show="visible"></i-ep-caret-top>
+ <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
+ </div>
+ </template>
+
+ <el-input v-model="filterValue" class="p-2" placeholder="鎼滅储鍥炬爣" clearable @input="filterIcons" />
+
+ <el-scrollbar height="w-[200px]">
+ <ul class="icon-list">
+ <el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom" effect="light">
+ <li :class="['icon-item', { active: modelValue == iconName }]" @click="selectedIcon(iconName)">
+ <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
+ </li>
+ </el-tooltip>
+ </ul>
+ </el-scrollbar>
+ </el-popover>
</div>
</template>
-<script setup>
-import icons from './requireIcons'
+<script setup lang="ts">
+import icons from '@/components/IconSelect/requireIcons';
+import { propTypes } from '@/utils/propTypes';
-const iconName = ref('');
-const iconList = ref(icons);
-const emit = defineEmits(['selected']);
+const props = defineProps({
+ modelValue: propTypes.string.isRequired,
+ width: propTypes.string.def('400px')
+});
-function filterIcons() {
- iconList.value = icons
- if (iconName.value) {
- iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
+const emit = defineEmits(['update:modelValue']);
+const visible = ref(false);
+const { modelValue, width } = toRefs(props);
+const iconNames = ref<string[]>(icons);
+
+const filterValue = ref('');
+
+/**
+ * 绛涢�夊浘鏍�
+ */
+const filterIcons = () => {
+ if (filterValue.value) {
+ iconNames.value = icons.filter((iconName) => iconName.includes(filterValue.value));
+ } else {
+ iconNames.value = icons;
}
-}
-
-function selectedIcon(name) {
- emit('selected', name)
- document.body.click()
-}
-
-function reset() {
- iconName.value = ''
- iconList.value = icons
-}
-
-defineExpose({
- reset
-})
+};
+/**
+ * 閫夋嫨鍥炬爣
+ * @param iconName 閫夋嫨鐨勫浘鏍囧悕绉�
+ */
+const selectedIcon = (iconName: string) => {
+ emit('update:modelValue', iconName);
+ visible.value = false;
+};
</script>
-<style lang='scss' scoped>
-.icon-body {
- width: 100%;
- padding: 10px;
- .icon-list {
- height: 200px;
- overflow-y: scroll;
- div {
- height: 30px;
- line-height: 30px;
- margin-bottom: -5px;
- cursor: pointer;
- width: 33%;
- float: left;
- }
- span {
- display: inline-block;
- vertical-align: -0.15em;
- fill: currentColor;
- overflow: hidden;
+<style scoped lang="scss">
+.el-scrollbar {
+ max-height: calc(50vh - 100px) !important;
+ overflow-y: auto;
+}
+.el-divider--horizontal {
+ margin: 10px auto !important;
+}
+.icon-list {
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 10px;
+ margin-top: 10px;
+
+ .icon-item {
+ cursor: pointer;
+ width: 10%;
+ margin: 0 10px 10px 0;
+ padding: 5px;
+ display: flex;
+ flex-direction: column;
+ justify-items: center;
+ align-items: center;
+ border: 1px solid #ccc;
+ &:hover {
+ border-color: var(--el-color-primary);
+ color: var(--el-color-primary);
+ transition: all 0.2s;
+ transform: scaleX(1.1);
}
}
+ .active {
+ border-color: var(--el-color-primary);
+ color: var(--el-color-primary);
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3