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