style: lint格式化文件
This commit is contained in:
@ -1,166 +1,148 @@
|
||||
<template>
|
||||
<AMenu
|
||||
v-if="getShowContent && getShowBread"
|
||||
:selectedKeys="cur"
|
||||
mode="horizontal"
|
||||
:class="[prefixCls, `${prefixCls}--${theme}`]"
|
||||
>
|
||||
<MenuItem v-for="item in system" @click="changeSystem(item.id)" :key="item.id" class="item-system">
|
||||
{{ item.name }}
|
||||
</MenuItem>
|
||||
</AMenu>
|
||||
<Tooltip title="子系统" :mouseEnterDelay="0.5">
|
||||
<Dropdown
|
||||
v-if="getShowTopMenu && !getIsMobile"
|
||||
placement="bottom"
|
||||
:trigger="['click']"
|
||||
:dropMenuList="system"
|
||||
:selectedKeys="cur"
|
||||
@menu-event="handleMenuEvent"
|
||||
overlayClassName="app-locale-picker-overlay"
|
||||
>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item :key="item.event" v-for="item in system">
|
||||
<Icon
|
||||
:icon="item.icon || 'ant-design:appstore-outlined'"
|
||||
color="#DEDFFF"
|
||||
size="26"
|
||||
style="vertical-align: -7px"
|
||||
/>
|
||||
{{ item.text }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<span class="cursor-pointer flex items-center p-2">
|
||||
<Icon icon="icon-park-outline:system" size="22" />
|
||||
</span>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
<AMenu v-if="getShowContent && getShowBread" :selectedKeys="cur" mode="horizontal" :class="[prefixCls, `${prefixCls}--${theme}`]">
|
||||
<MenuItem v-for="item in system" @click="changeSystem(item.id)" :key="item.id" class="item-system">
|
||||
{{ item.name }}
|
||||
</MenuItem>
|
||||
</AMenu>
|
||||
<Tooltip title="子系统" :mouseEnterDelay="0.5">
|
||||
<Dropdown v-if="getShowTopMenu && !getIsMobile" placement="bottom" :trigger="['click']" :dropMenuList="system" :selectedKeys="cur" @menu-event="handleMenuEvent" overlayClassName="app-locale-picker-overlay">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item :key="item.event" v-for="item in system">
|
||||
<Icon :icon="item.icon || 'ant-design:appstore-outlined'" color="#DEDFFF" size="26" style="vertical-align: -7px" />
|
||||
{{ item.text }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<span class="cursor-pointer flex items-center p-2">
|
||||
<Icon icon="icon-park-outline:system" size="22" />
|
||||
</span>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
import type { MenuTheme } from 'ant-design-vue';
|
||||
import { Breadcrumb, Tooltip, Menu } from 'ant-design-vue';
|
||||
import Icon from '/@/components/Icon';
|
||||
import { Dropdown } from '/@/components/Dropdown';
|
||||
import type { DropMenu } from '/@/components/Dropdown';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { usePermissionStore } from '/@/store/modules/permission';
|
||||
export default defineComponent({
|
||||
name: 'LayoutBreadcrumb',
|
||||
components: {
|
||||
Icon,
|
||||
[Breadcrumb.name]: Breadcrumb,
|
||||
Tooltip,
|
||||
AMenu: Menu,
|
||||
MenuItem: Menu.Item,
|
||||
Dropdown,
|
||||
},
|
||||
props: {
|
||||
theme: propTypes.oneOf(['dark', 'light']),
|
||||
},
|
||||
setup() {
|
||||
const permissionStore = usePermissionStore();
|
||||
const { subSystemList } = storeToRefs(permissionStore);
|
||||
const Mtheme = ref<MenuTheme>('dark');
|
||||
const cur = ref<string[]>([permissionStore.getSubSystem]);
|
||||
|
||||
const { prefixCls } = useDesign('layout-breadcrumb');
|
||||
const { getIsMobile } = useAppInject();
|
||||
const system = ref<any[]>([]);
|
||||
const { t } = useI18n();
|
||||
const { getShowTopMenu } = useMenuSetting();
|
||||
const { getShowContent, getShowBread } = useHeaderSetting();
|
||||
watch(
|
||||
() => subSystemList.value,
|
||||
(v) => {
|
||||
system.value = v;
|
||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
||||
import type { MenuTheme } from 'ant-design-vue';
|
||||
import { Breadcrumb, Tooltip, Menu } from 'ant-design-vue';
|
||||
import Icon from '/@/components/Icon';
|
||||
import { Dropdown } from '/@/components/Dropdown';
|
||||
import type { DropMenu } from '/@/components/Dropdown';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { usePermissionStore } from '/@/store/modules/permission';
|
||||
export default defineComponent({
|
||||
name: 'LayoutBreadcrumb',
|
||||
components: {
|
||||
Icon,
|
||||
[Breadcrumb.name]: Breadcrumb,
|
||||
Tooltip,
|
||||
AMenu: Menu,
|
||||
MenuItem: Menu.Item,
|
||||
Dropdown
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
onMounted(async () => {
|
||||
await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
|
||||
system.value = permissionStore.getSubSysList;
|
||||
if(system.value.length>0){
|
||||
changeSystem(system.value[0].id);
|
||||
}
|
||||
});
|
||||
props: {
|
||||
theme: propTypes.oneOf(['dark', 'light'])
|
||||
},
|
||||
setup() {
|
||||
const permissionStore = usePermissionStore();
|
||||
const { subSystemList } = storeToRefs(permissionStore);
|
||||
const Mtheme = ref<MenuTheme>('dark');
|
||||
const cur = ref<string[]>([permissionStore.getSubSystem]);
|
||||
|
||||
//切换系统
|
||||
function changeSystem(systemId: string) {
|
||||
permissionStore.setSubSystem(systemId);
|
||||
cur.value = [systemId];
|
||||
}
|
||||
const { prefixCls } = useDesign('layout-breadcrumb');
|
||||
const { getIsMobile } = useAppInject();
|
||||
const system = ref<any[]>([]);
|
||||
const { t } = useI18n();
|
||||
const { getShowTopMenu } = useMenuSetting();
|
||||
const { getShowContent, getShowBread } = useHeaderSetting();
|
||||
watch(
|
||||
() => subSystemList.value,
|
||||
(v) => {
|
||||
system.value = v;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
onMounted(async () => {
|
||||
await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
|
||||
system.value = permissionStore.getSubSysList;
|
||||
if (system.value.length > 0) {
|
||||
changeSystem(system.value[0].id);
|
||||
}
|
||||
});
|
||||
|
||||
function handleMenuEvent(menu: DropMenu) {
|
||||
if (cur.value[0] === menu.event) {
|
||||
return;
|
||||
//切换系统
|
||||
function changeSystem(systemId: string) {
|
||||
permissionStore.setSubSystem(systemId);
|
||||
cur.value = [systemId];
|
||||
}
|
||||
|
||||
function handleMenuEvent(menu: DropMenu) {
|
||||
if (cur.value[0] === menu.event) {
|
||||
return;
|
||||
}
|
||||
cur.value = [menu.event as string];
|
||||
|
||||
permissionStore.setSubSystem(menu.event as string);
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
prefixCls,
|
||||
cur,
|
||||
changeSystem,
|
||||
system,
|
||||
Mtheme,
|
||||
getShowContent,
|
||||
getShowTopMenu,
|
||||
getShowBread,
|
||||
getIsMobile,
|
||||
handleMenuEvent
|
||||
};
|
||||
}
|
||||
cur.value = [menu.event as string];
|
||||
|
||||
permissionStore.setSubSystem(menu.event as string);
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
prefixCls,
|
||||
cur,
|
||||
changeSystem,
|
||||
system,
|
||||
Mtheme,
|
||||
getShowContent,
|
||||
getShowTopMenu,
|
||||
getShowBread,
|
||||
getIsMobile,
|
||||
handleMenuEvent,
|
||||
};
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-layout-breadcrumb';
|
||||
@prefix-cls: ~'@{namespace}-layout-breadcrumb';
|
||||
|
||||
.@{prefix-cls} {
|
||||
&.ant-menu {
|
||||
background: none;
|
||||
border: 0;
|
||||
.@{prefix-cls} {
|
||||
&.ant-menu {
|
||||
background: none;
|
||||
border: 0;
|
||||
|
||||
.ant-menu-item {
|
||||
padding: 0 10px;
|
||||
.ant-menu-item {
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ant-menu-item-icon {
|
||||
background: rgb(171 170 205 / 30%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(171 170 205 / 30%);
|
||||
margin: 0 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item-selected {
|
||||
background: none;
|
||||
|
||||
.ant-menu-item-icon {
|
||||
border: 1px solid rgb(222 223 255);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item-icon {
|
||||
background: rgb(171 170 205 / 30%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(171 170 205 / 30%);
|
||||
margin: 0 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item-selected {
|
||||
background: none;
|
||||
|
||||
.ant-menu-item-icon {
|
||||
border: 1px solid rgb(222 223 255);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user