guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 菜单权限对接

Browse Source
pull/1/head
刘释隆 2 years ago
parent d28605b0b9
commit 31cf269a0d
2 changed files with 86 additions and 49 deletions
Show Stats Download Patch File Download Diff File

96
src/layout/components/Menu/index.vue
Unescape View File

@ -1,72 +1,98 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue' import { computed, defineComponent, onMounted, ref, unref, watch } from "vue";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { IconGroup } from '../IconGroup' import { IconGroup } from "../IconGroup";
import { useAsyncRouteStore } from '@/store/modules/asyncRoute' import { useAsyncRouteStore } from "@/store/modules/asyncRoute";
import { generatorMenu } from '@/utils' import { generatorMenu } from "@/utils";
import { storage } from "@/utils/Storage";
import { CURRENT_USER } from "@/store/mutation-types";
export default defineComponent({ export default defineComponent({
name: 'AppMenu', name: "AppMenu",
components: { IconGroup }, components: { IconGroup },
emits: ['clickMenuItem'], emits: ["clickMenuItem"],
setup(props, { emit }) { setup(props, { emit }) {
// 当前路由 // 当前路由
const currentRoute = useRoute() const currentRoute = useRoute();
const router = useRouter() const router = useRouter();
const asyncRouteStore = useAsyncRouteStore() const asyncRouteStore = useAsyncRouteStore();
const menus = ref<any[]>([]) const menus = ref<any[]>([]);
const selectedSvg = ref<string>(currentRoute.meta.svgname as string) const selectedSvg = ref<string>(currentRoute.meta.svgname as string);
const getSelectedSvg = computed(() => { const getSelectedSvg = computed(() => {
return unref(selectedSvg) return unref(selectedSvg);
}) });
// 跟随页面路由变化，切换菜单选中状态 // 跟随页面路由变化，切换菜单选中状态
watch( watch(
() => currentRoute.fullPath, () => currentRoute.fullPath,
() => { () => {
updateMenu() updateMenu();
}, }
) );
function updateSelectedKeys() { function updateSelectedKeys() {
const svgname: string = (currentRoute.meta?.svgname as string) || '' const svgname: string = (currentRoute.meta?.svgname as string) || "";
selectedSvg.value = svgname selectedSvg.value = svgname;
} }
function updateMenu() { function updateMenu() {
menus.value = generatorMenu(asyncRouteStore.getMenus) menus.value = generatorMenu(asyncRouteStore.getMenus);
updateSelectedKeys() const userInfo = storage.get(CURRENT_USER);
if (userInfo && userInfo.frontmenuTList) {
menus.value = userInfo.frontmenuTList.map((item) => {
let v = {
component: () =>
item.resUrl == "/task"
? import("@/views/task/index.vue")
: item.resUrl == "/home"
? import("@/views/home/index.vue")
: item.resUrl == "/worksheet"
? import("@/views/worksheet/index.vue")
: item.resUrl == "/final"
? import("@/views/final/index.vue")
: "",
icon: undefined,
key: item.resKey,
label: item.name,
meta: {
title: item.name,
permissions: [item.resKey],
},
path: item.resUrl,
name: item.resKey,
svgname: item.icon,
svgsize: 32,
title: item.name,
};
return v;
});
}
updateSelectedKeys();
} }
// 点击菜单 // 点击菜单
function clickMenuItem(key: string) { function clickMenuItem(key: string) {
if (/http(s)?:/.test(key)) if (/http(s)?:/.test(key)) window.open(key);
window.open(key) else router.push({ name: key });
else
router.push({ name: key })
emit('clickMenuItem' as any, key) emit("clickMenuItem" as any, key);
} }
onMounted(() => { onMounted(() => {
updateMenu() updateMenu();
}) });
return { return {
menus, menus,
selectedSvg, selectedSvg,
getSelectedSvg, getSelectedSvg,
clickMenuItem, clickMenuItem,
} };
}, },
}) });
</script> </script>
<template> <template>
<IconGroup <IconGroup :options="menus" :value="getSelectedSvg" @update:value="clickMenuItem" />
:options="menus"
:value="getSelectedSvg"
@update:value="clickMenuItem"
/>
</template> </template>

33
src/views/final/comp/CustomFilterModalVue.vue
Unescape View File

@ -29,7 +29,7 @@ const allCount = computed(() => {
}); });
const selectCount = computed(() => { const selectCount = computed(() => {
return `全部筛选(共${onList.value.length}个)`; return `已选筛选(共${onList.value.length}个)`;
}); });
defineExpose({ defineExpose({
@ -137,15 +137,13 @@ function onCheckAllChange(value) {
} }
selectIds.value = value ? ids : []; selectIds.value = value ? ids : [];
} }
function onCheckChange(checked: any, item: any) { function onCheckChange(checked: any, item: any) {
const index = selectIds.value.indexOf(item.id); const index = selectIds.value.indexOf(item.id);
item.checked = checked; item.checked = checked;
let currentIndex = offList.value.findIndex(v=>v.id == item.id) let currentIndex = offList.value.findIndex((v) => v.id == item.id);
offList.value[currentIndex].checked = item.checked; offList.value[currentIndex].checked = item.checked;
if (index === -1 && checked) selectIds.value.push(item.id); if (index === -1 && checked) selectIds.value.push(item.id);
else selectIds.value.splice(index, 1); else selectIds.value.splice(index, 1);
@ -267,17 +265,17 @@ const rightInputHandler = debounce((keyword) => {
<div> <div>
<n-input placeholder="搜索关键字" @input="leftInputHandler"> <n-input placeholder="搜索关键字" @input="leftInputHandler">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" color="#999999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar <n-scrollbar
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px" style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
> >
<div class="draggable-ul"> <div class="draggable-ul">
<div class="draggable-li"> <div class="draggable-li" style="color:#666666">
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全部" label="全选"
@update:checked="onCheckAllChange" @update:checked="onCheckAllChange"
/> />
</div> </div>
@ -317,7 +315,7 @@ const rightInputHandler = debounce((keyword) => {
<div> <div>
<n-input placeholder="搜索关键字" @input="rightInputHandler"> <n-input placeholder="搜索关键字" @input="rightInputHandler">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" color="#999999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar <n-scrollbar
@ -339,7 +337,8 @@ const rightInputHandler = debounce((keyword) => {
:class="{ fix: item.fix }" :class="{ fix: item.fix }"
class="cursor-move draggable-li" class="cursor-move draggable-li"
> >
<SvgIcon v-show="!item.fix" name="drag" size="24" /> <!-- v-show="!item.fix" 判断是否为固定值 -->
<SvgIcon name="drag" size="14" />
<span class="ml-2">{{ item.name }}</span> <span class="ml-2">{{ item.name }}</span>
<SvgIcon <SvgIcon
v-if="!item.fix" v-if="!item.fix"
@ -358,7 +357,7 @@ const rightInputHandler = debounce((keyword) => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确认 </n-button> <n-button type="info" @click="handleSumbit"> 确定 </n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>
@ -376,6 +375,7 @@ const rightInputHandler = debounce((keyword) => {
&-title { &-title {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: #333333;
} }
&-bar { &-bar {
@ -416,6 +416,8 @@ const rightInputHandler = debounce((keyword) => {
height: 800px; height: 800px;
--n-padding-bottom: 20px; --n-padding-bottom: 20px;
--n-padding-left: 24px; --n-padding-left: 24px;
--n-padding-right: 24px;
--n-padding-top: 20px;
} }
.textbtnStyle { .textbtnStyle {
@ -426,6 +428,7 @@ const rightInputHandler = debounce((keyword) => {
.draggable-ul { .draggable-ul {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: #f8f8f8;
.draggable-li { .draggable-li {
width: 100%; width: 100%;
@ -457,6 +460,14 @@ const rightInputHandler = debounce((keyword) => {
border-top: none !important; border-top: none !important;
} }
::v-deep(.n-button--info-type) { ::v-deep(.n-button--info-type) {
background: #507AFD !important; background: #507afd !important;
}
::v-deep(.n-card__footer) {
padding: 0 16px 16px 16px !important;
}
::v-deep(.n-button--default-type) {
border: 1px solid #cad2dd !important;
color: #333333;
background: #ffffff;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save