github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 增加右键菜单功能及处理逻辑

Browse Source
This commit is contained in:
tnt group
2022-09-28 16:47:12 +08:00
parent 3e72a0e440
commit 00aaf3427a
10 changed files with 212 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/chart/ContentEdit/components/EditGroup/index.vue
+20 -14
View File
@@ -85,26 +85,32 @@ const optionsHandle = (
allList: MenuOptionsItemType[],
targetInstance: CreateComponentType
) => {
// 多选
const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
// 单选
const singleMenuEnums = [MenuEnum.UN_GROUP]
const filter = (menulist: MenuEnum[]) => {
const list: MenuOptionsItemType[] = []
allList.forEach(item => {
if (menulist.includes(item.key as MenuEnum)) {
list.push(item)
}
})
return list
return allList.filter(i => menulist.includes(i.key as MenuEnum))
}
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
return filter(moreMenuEnums)
return filter([MenuEnum.GROUP, MenuEnum.DELETE])
} else {
return [...filter(singleMenuEnums), divider(), ...targetList]
const statusMenuEnums: MenuEnum[] = []
if (targetInstance.status.lock) {
statusMenuEnums.push(MenuEnum.LOCK)
} else {
statusMenuEnums.push(MenuEnum.UNLOCK)
}
if (targetInstance.status.hide) {
statusMenuEnums.push(MenuEnum.HIDE)
} else {
statusMenuEnums.push(MenuEnum.SHOW)
}
// 单选
const singleMenuEnums = [MenuEnum.UN_GROUP]
return [
...filter(singleMenuEnums),
divider(),
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
]
}
}
src/views/chart/ContentEdit/index.vue
+13 -15
View File
@@ -114,24 +114,22 @@ const optionsHandle = (
allList: MenuOptionsItemType[],
targetInstance: CreateComponentType
) => {
// 多选
const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
// 单选
const singleMenuEnums = targetList
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
const list: MenuOptionsItemType[] = []
allList.forEach(item => {
// 成组
if (moreMenuEnums.includes(item.key as MenuEnum)) {
list.push(item)
}
})
return list
return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
}
return singleMenuEnums
const statusMenuEnums: MenuEnum[] = []
if (targetInstance.status.lock) {
statusMenuEnums.push(MenuEnum.LOCK)
} else {
statusMenuEnums.push(MenuEnum.UNLOCK)
}
if (targetInstance.status.hide) {
statusMenuEnums.push(MenuEnum.HIDE)
} else {
statusMenuEnums.push(MenuEnum.SHOW)
}
return targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
}
// 主题色
src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue
+23 -10
View File
@@ -23,8 +23,8 @@
{{ componentGroupData.chartConfig.title }}
</n-text>
</n-ellipsis>
<n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" />
<n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
<n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
<n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
</div>
<div :class="{ 'select-modal': select }"></div>
</div>
@@ -95,20 +95,29 @@ const optionsHandle = (
targetInstance: CreateComponentType
) => {
const filter = (menulist: MenuEnum[]) => {
const list: MenuOptionsItemType[] = []
allList.forEach(item => {
if (menulist.includes(item.key as MenuEnum)) {
list.push(item)
}
})
return list
return allList.filter(i => menulist.includes(i.key as MenuEnum))
}
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
return filter([MenuEnum.GROUP])
} else {
return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList]
const statusMenuEnums: MenuEnum[] = []
if (targetInstance.status.lock) {
statusMenuEnums.push(MenuEnum.LOCK)
} else {
statusMenuEnums.push(MenuEnum.UNLOCK)
}
if (targetInstance.status.hide) {
statusMenuEnums.push(MenuEnum.HIDE)
} else {
statusMenuEnums.push(MenuEnum.SHOW)
}
return [
...filter([MenuEnum.UN_GROUP]),
divider(),
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
]
}
}
@@ -136,6 +145,10 @@ const hover = computed(() => {
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
})
const status = computed(() => {
return props.componentGroupData.status
})
// 组点击事件
const groupMousedownHandle = (e: MouseEvent) => {
onClickOutSide()
src/views/chart/ContentLayers/components/LayersListItem/index.vue
+6 -2
View File
@@ -13,8 +13,8 @@
{{ props.componentData.chartConfig.title }}
</n-text>
</n-ellipsis>
<n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" />
<n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" />
<n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
<n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
</div>
<div :class="{ 'select-modal': select }"></div>
</div>
@@ -64,6 +64,10 @@ const select = computed(() => {
const hover = computed(() => {
return props.componentData.id === chartEditStore.getTargetChart.hoverId
})
const status = computed(() => {
return props.componentData.status
})
</script>
<style lang="scss" scoped>
src/views/chart/ContentLayers/index.vue
+13 -9
View File
@@ -114,16 +114,20 @@ const optionsHandle = (
) => {
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
const list: MenuOptionsItemType[] = []
targetList.forEach(item => {
// 成组
if (item.key === MenuEnum.GROUP) {
list.push(item)
}
})
return list
return targetList.filter(i => i.key === MenuEnum.GROUP)
}
return targetList
const statusMenuEnums: MenuEnum[] = []
if (targetInstance.status.lock) {
statusMenuEnums.push(MenuEnum.LOCK)
} else {
statusMenuEnums.push(MenuEnum.UNLOCK)
}
if (targetInstance.status.hide) {
statusMenuEnums.push(MenuEnum.HIDE)
} else {
statusMenuEnums.push(MenuEnum.SHOW)
}
return targetList.filter(item => !statusMenuEnums.includes(item.key as MenuEnum))
}
// 缩小
src/views/chart/hooks/useContextMenu.hook.ts
+41 -2
View File
@@ -7,7 +7,18 @@ import { MenuOptionsItemType } from './useContextMenu.hook.d'
import { MenuEnum } from '@/enums/editPageEnum'
import cloneDeep from 'lodash/cloneDeep'
const { CopyIcon, CutIcon, ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5
const {
CopyIcon,
CutIcon,
ClipboardOutlineIcon,
TrashIcon,
ChevronDownIcon,
ChevronUpIcon,
LockOpenOutlineIcon,
LockClosedOutlineIcon,
EyeOutlineIcon,
EyeOffOutlineIcon
} = icon.ionicons5
const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon
const chartEditStore = useChartEditStore()
@@ -17,7 +28,7 @@ const chartEditStore = useChartEditStore()
* @param {number} n > 2
* @returns
*/
export const divider = (n:number = 3) => {
export const divider = (n: number = 3) => {
return {
type: 'divider',
key: `d${n}`
@@ -26,6 +37,34 @@ export const divider = (n:number = 3) => {
// * 默认单组件选项
export const defaultOptions: MenuOptionsItemType[] = [
{
label: '锁定',
key: MenuEnum.LOCK,
icon: renderIcon(LockClosedOutlineIcon),
fnHandle: chartEditStore.setLock
},
{
label: '解除锁定',
key: MenuEnum.UNLOCK,
icon: renderIcon(LockOpenOutlineIcon),
fnHandle: chartEditStore.setUnLock
},
{
label: '隐藏',
key: MenuEnum.HIDE,
icon: renderIcon(EyeOffOutlineIcon),
fnHandle: chartEditStore.setHide
},
{
label: '显示',
key: MenuEnum.SHOW,
icon: renderIcon(EyeOutlineIcon),
fnHandle: chartEditStore.setShow
},
{
type: 'divider',
key: 'd0'
},
{
label: '复制',
key: MenuEnum.COPY,