18 changed files with 630 additions and 91 deletions
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 897 B |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 867 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 55 KiB |
@ -0,0 +1,82 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 14:39:07 |
||||
|
@ 备注: 选择图标弹窗 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
||||
|
import SvgPage from "@/components/IconSelect/svgPage.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
isShow:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
svgName:{ |
||||
|
type:String, |
||||
|
require: false, |
||||
|
default:"" |
||||
|
}, |
||||
|
iconList:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
const visible = ref(false); // 弹窗显示状态 |
||||
|
const iconSelectorRef = ref(); |
||||
|
const iconSelectorDialogRef = ref(); |
||||
|
const emits = defineEmits(["update:isShow","update:svgName"]); |
||||
|
const filterIconNames = ref<string[]>([]); |
||||
|
//点击窗外。取消显示 |
||||
|
onClickOutside(iconSelectorRef, () => (visible.value = false), { |
||||
|
ignore: [iconSelectorDialogRef], |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
watch(() => props.isShow, (val:boolean) =>{ |
||||
|
if(val){ |
||||
|
filterIconNames.value = props.iconList |
||||
|
} |
||||
|
}) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 16:43:49 |
||||
|
@ 功能: 关闭 |
||||
|
*/ |
||||
|
const handleClose = () => { |
||||
|
emits("update:isShow",false) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 16:54:03 |
||||
|
@ 功能: 确定 |
||||
|
*/ |
||||
|
const sendClick = () => { |
||||
|
emits("update:svgName","liuChengBiaoDan") |
||||
|
handleClose() |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="props.isShow" |
||||
|
title="选择图标" |
||||
|
width="500" |
||||
|
:before-close="handleClose" |
||||
|
> |
||||
|
<span>{{filterIconNames}}</span> |
||||
|
|
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="sendClick"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,87 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 16:05:27 |
||||
|
@ 备注: 图标选择列表 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
|
||||
|
const allIconNames: string[] = []; // 所有的图标名称集合 |
||||
|
|
||||
|
const filterValue = ref(""); // 筛选的值 |
||||
|
const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合 |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 16:05:52 |
||||
|
@ 功能: 加载svg |
||||
|
*/ |
||||
|
const loadIcons =() => { |
||||
|
const icons = import.meta.glob("../../assets/icons/*.svg"); |
||||
|
for (const icon in icons) { |
||||
|
const iconName = icon.split("assets/icons/")[1].split(".svg")[0]; |
||||
|
allIconNames.push(iconName); |
||||
|
} |
||||
|
filterIconNames.value = allIconNames; |
||||
|
// console.log("icon 加载--->",allIconNames); |
||||
|
} |
||||
|
onMounted(()=>{ |
||||
|
loadIcons(); |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="svgBox"> |
||||
|
<el-input |
||||
|
v-model="filterValue" |
||||
|
class="p-2" |
||||
|
placeholder="搜索图标" |
||||
|
clearable |
||||
|
@input="handleFilter" |
||||
|
/> |
||||
|
<el-divider border-style="dashed" style="margin:0px;" /> |
||||
|
<el-scrollbar height="150px"> |
||||
|
<ul class="icon_list"> |
||||
|
<li |
||||
|
v-for="(iconName, index) in filterIconNames" |
||||
|
:key="index" |
||||
|
class="icon-item" |
||||
|
@click="handleSelect(iconName)" |
||||
|
> |
||||
|
<el-tooltip :content="iconName" placement="bottom" effect="light"> |
||||
|
<svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" /> |
||||
|
</el-tooltip> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</el-scrollbar> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.icon_list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding-left: 10px; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
.icon-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
width: 10%; |
||||
|
padding: 5px; |
||||
|
margin: 0 5px 5px 0; |
||||
|
cursor: pointer; |
||||
|
border: 1px solid #ccc; |
||||
|
padding: 5px 10px; |
||||
|
&:hover { |
||||
|
color: var(--el-color-primary); |
||||
|
border-color: var(--el-color-primary); |
||||
|
transition: all 0.2s; |
||||
|
transform: scaleX(1.1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.svgBox{ |
||||
|
:deep(.el-popper){ |
||||
|
padding:0px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,114 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 08:56:40 |
||||
|
@ 备注: |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import type { |
||||
|
AllowDropType, |
||||
|
NodeDropType, |
||||
|
} from 'element-plus/es/components/tree/src/tree.type' |
||||
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
||||
|
import { threeShiyanData } from "@/api/date/type" |
||||
|
import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
formKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
} |
||||
|
}); |
||||
|
const svgIsShow = ref(false) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 10:06:20 |
||||
|
@ 功能: 树移动完毕后执行的操作 |
||||
|
*/ |
||||
|
const handleDrop = ( |
||||
|
draggingNode: Node, |
||||
|
dropNode: Node, |
||||
|
dropType: NodeDropType, |
||||
|
ev: DragEvents |
||||
|
) => { |
||||
|
console.log('tree drop:', dropNode.label, dropNode.key) |
||||
|
console.log('tree drop-->上级:', dropNode.parent.label, dropNode.parent.key) |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 15:53:35 |
||||
|
@ 功能: 加载SVG图标 |
||||
|
*/ |
||||
|
const allIconNames:string[] = []; |
||||
|
const loadIcons = () => { |
||||
|
const icons = import.meta.glob("../../../../assets/icons/*.svg"); |
||||
|
for (const icon in icons) { |
||||
|
const iconName = icon.split("assets/icons/")[1].split(".svg")[0]; |
||||
|
allIconNames.push(iconName); |
||||
|
} |
||||
|
console.log("icons",icons) |
||||
|
console.log("allIconNames",allIconNames) |
||||
|
} |
||||
|
onMounted(()=>{ |
||||
|
loadIcons(); |
||||
|
}) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-22 16:52:03 |
||||
|
@ 功能: 设置表单图标 |
||||
|
*/ |
||||
|
const svgName = ref("") |
||||
|
const setAppMenusSvg = (val:any) =>{ |
||||
|
svgName.value = val.svg |
||||
|
svgIsShow.value = true; |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-tree |
||||
|
:data="threeShiyanData" |
||||
|
draggable |
||||
|
default-expand-all |
||||
|
node-key="id" |
||||
|
:expand-on-click-node="false" |
||||
|
@node-drop="handleDrop" |
||||
|
> |
||||
|
<template #default="{ node, data }"> |
||||
|
<div class="appMenuTitle"> |
||||
|
<el-space wrap> |
||||
|
<svg-icon prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" /> |
||||
|
<el-text>{{node.label}}</el-text> |
||||
|
</el-space> |
||||
|
<el-dropdown> |
||||
|
<svg-icon class="svgBox" prefix="icon" icon-class="set" /> |
||||
|
<template #dropdown> |
||||
|
<el-dropdown-item>修改名称</el-dropdown-item> |
||||
|
<el-dropdown-item>复制</el-dropdown-item> |
||||
|
<el-dropdown-item>移动到</el-dropdown-item> |
||||
|
<el-dropdown-item divided>新建子分组</el-dropdown-item> |
||||
|
<el-dropdown-item>新建普通表单</el-dropdown-item> |
||||
|
<el-dropdown-item>新建流程表单</el-dropdown-item> |
||||
|
<el-dropdown-item divided>隐藏PC端</el-dropdown-item> |
||||
|
<el-dropdown-item>隐藏移动端</el-dropdown-item> |
||||
|
<el-dropdown-item divided><el-text class="mx-1" type="danger">删除</el-text></el-dropdown-item> |
||||
|
</template> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
</el-tree> |
||||
|
<AppMenuSvgPage v-model:is-show="svgIsShow" v-model:svg-name="svgName" :icon-list="allIconNames" /> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.appMenuTitle{ |
||||
|
width: 100%; |
||||
|
padding-right: 5px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.svgBox{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
.appMenuTitle:hover .svgBox{ |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue