From 2582f000556d04a4d508cbd7c6d11b5d3610883e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 12 Nov 2021 09:28:58 +0800
Subject: [PATCH] 服务许可备案审批，数量消息提示
---
src/page/index/sidebar/sidebarItem.vue | 295 ++++++++++++++++++++++++------------------
src/page/index/sidebar/index.vue | 104 ++++++++------
2 files changed, 224 insertions(+), 175 deletions(-)
diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index bba6289..6c310eb 100644
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@@ -1,61 +1,69 @@
<template>
- <div class="avue-sidebar" id="menuLeft">
- <logo></logo>
- <el-scrollbar style="height: 100%">
- <div v-if="validatenull(menu)" class="avue-sidebar--tip">
- {{ $t("menuTip") }}
- </div>
- <el-menu
- unique-opened
- :default-active="nowTagValue"
- mode="vertical"
- :show-timeout="200"
- :collapse="keyCollapse"
- background-color="#fff"
- >
- <sidebar-item
- :menu="menu"
- :screen="screen"
- first
- :props="website.menu.props"
- :collapse="keyCollapse"
- ></sidebar-item>
- </el-menu>
- </el-scrollbar>
- </div>
+ <div class="avue-sidebar"
+ id="menuLeft">
+ <logo></logo>
+ <el-scrollbar style="height: 100%">
+ <div v-if="validatenull(menu)"
+ class="avue-sidebar--tip">
+ {{ $t("menuTip") }}
+ </div>
+ <el-menu unique-opened
+ :default-active="nowTagValue"
+ mode="vertical"
+ :show-timeout="200"
+ :collapse="keyCollapse"
+ background-color="#fff">
+ <sidebar-item :menu="menu"
+ :screen="screen"
+ first
+ :props="website.menu.props"
+ :xkTotal="xkTotal"
+ :collapse="keyCollapse"></sidebar-item>
+ </el-menu>
+ </el-scrollbar>
+ </div>
</template>
<script>
import { mapGetters } from "vuex";
import logo from "../logo";
import sidebarItem from "./sidebarItem";
+import {
+ getList,
+} from "@/api/licenseApproval/permit";
export default {
- name: "sidebar",
- components: { sidebarItem, logo },
- inject: ["index"],
- data() {
- return {};
- },
- created() {
- this.index.openMenu();
- // var menuDom = document.getElementById("menuLeft");
- // menuDom.
- },
- computed: {
- ...mapGetters([
- "website",
- "menu",
- "tag",
- "keyCollapse",
- "screen",
- "menuId",
- ]),
- nowTagValue: function () {
- return this.$router.$avueRouter.getValue(this.$route);
+ name: "sidebar",
+ components: { sidebarItem, logo },
+ inject: ["index"],
+ data () {
+ return {
+ xkTotal: 0
+ };
},
- },
- methods: {},
+ created () {
+ getList().then(res => {
+ this.xkTotal = res.data.data.total
+ })
+
+ this.index.openMenu();
+ // var menuDom = document.getElementById("menuLeft");
+ // menuDom.
+ },
+ computed: {
+ ...mapGetters([
+ "website",
+ "menu",
+ "tag",
+ "keyCollapse",
+ "screen",
+ "menuId",
+ ]),
+ nowTagValue: function () {
+ return this.$router.$avueRouter.getValue(this.$route);
+ },
+ },
+ methods: {},
};
</script>
<style lang="scss" scoped>
diff --git a/src/page/index/sidebar/sidebarItem.vue b/src/page/index/sidebar/sidebarItem.vue
index 2693e31..9f7bc95 100644
--- a/src/page/index/sidebar/sidebarItem.vue
+++ b/src/page/index/sidebar/sidebarItem.vue
@@ -1,146 +1,187 @@
<template>
- <div class="menu-wrapper">
- <template v-for="item in menu">
- <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
- :index="item[pathKey]"
- @click="open(item)"
- :key="item[labelKey]"
- :class="{'is-active':vaildActive(item)}">
- <i :class="item[iconKey]"></i>
- <span slot="title"
- :alt="item[pathKey]">{{generateTitle(item)}}</span>
- </el-menu-item>
- <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
- :index="item[pathKey]"
- :key="item[labelKey]">
- <template slot="title">
- <i :class="item[iconKey]"></i>
- <span slot="title"
- :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
+ <div class="menu-wrapper">
+ <template v-for="item in menu">
+ <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
+ :index="item[pathKey]"
+ @click="open(item)"
+ :key="item[labelKey]"
+ :class="{'is-active':vaildActive(item)}">
+ <i :class="item[iconKey]"></i>
+ <span slot="title"
+ :alt="item[pathKey]">{{generateTitle(item)}}</span>
+
+ </el-menu-item>
+ <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
+ :index="item[pathKey]"
+ :key="item[labelKey]">
+ <template slot="title">
+ <i :class="item[iconKey]"></i>
+ <span slot="title"
+ :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
+ <div v-show="generateTitle(item) == '保安单位许可备案审批'"
+ style="position: absolute;
+ top: -2px;
+ z-index: 99;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: red;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+ line-height: 28px !important;
+ transform: translate(-80%, 0) scale(0.8)">
+ {{xkTotal}}
+ </div>
+ </template>
+ <template v-for="(child,cindex) in item[childrenKey]">
+ <el-menu-item :index="child[pathKey],cindex"
+ @click="open(child)"
+ :class="{'is-active':vaildActive(child)}"
+ v-if="validatenull(child[childrenKey])"
+ :key="child[labelKey]">
+ <i :class="child[iconKey]"></i>
+ <span slot="title">{{generateTitle(child)}}</span>
+ <div v-show="generateTitle(child) == '保安服务许可申请'"
+ style="position: absolute;
+ top: -2px;
+ z-index: 99;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: red;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+ line-height: 28px !important;
+ transform: translate(-80%, 0) scale(0.8)">
+ {{xkTotal}}
+ </div>
+ </el-menu-item>
+ <sidebar-item v-else
+ :menu="[child]"
+ :key="cindex"
+ :props="props"
+ :screen="screen"
+ :collapse="collapse"></sidebar-item>
+
+ </template>
+ </el-submenu>
</template>
- <template v-for="(child,cindex) in item[childrenKey]">
- <el-menu-item :index="child[pathKey],cindex"
- @click="open(child)"
- :class="{'is-active':vaildActive(child)}"
- v-if="validatenull(child[childrenKey])"
- :key="child[labelKey]">
- <i :class="child[iconKey]"></i>
- <span slot="title">{{generateTitle(child)}}</span>
- </el-menu-item>
- <sidebar-item v-else
- :menu="[child]"
- :key="cindex"
- :props="props"
- :screen="screen"
- :collapse="collapse"></sidebar-item>
- </template>
- </el-submenu>
- </template>
- </div>
+ </div>
</template>
<script>
- import {mapGetters} from "vuex";
- import {isURL, validatenull} from "@/util/validate";
- import config from "./config.js";
- export default {
+import { mapGetters } from "vuex";
+import { isURL, validatenull } from "@/util/validate";
+import config from "./config.js";
+
+export default {
name: "sidebarItem",
- data() {
- return {
- config: config
- };
+ data () {
+ return {
+ config: config
+ };
},
props: {
- menu: {
- type: Array
- },
- screen: {
- type: Number
- },
- first: {
- type: Boolean,
- default: false
- },
- props: {
- type: Object,
- default: () => {
- return {};
+ menu: {
+ type: Array
+ },
+ screen: {
+ type: Number
+ },
+ first: {
+ type: Boolean,
+ default: false
+ },
+ props: {
+ type: Object,
+ default: () => {
+ return {};
+ }
+ },
+ collapse: {
+ type: Boolean
+ },
+ xkTotal: {
+ type: Number
}
- },
- collapse: {
- type: Boolean
- }
},
- created() {
+ beforeCreate () {
+
},
- mounted() {
+ created () {
+
+ },
+ mounted () {
+
},
computed: {
- ...mapGetters(["roles"]),
- labelKey() {
- return this.props.label || this.config.propsDefault.label;
- },
- pathKey() {
- return this.props.path || this.config.propsDefault.path;
- },
- iconKey() {
- return this.props.icon || this.config.propsDefault.icon;
- },
- childrenKey() {
- return this.props.children || this.config.propsDefault.children;
- },
- isOpenKey() {
- return this.props.isOpen || this.config.propsDefault.isOpen;
- },
- nowTagValue() {
- return this.$router.$avueRouter.getValue(this.$route);
- }
+ ...mapGetters(["roles"]),
+ labelKey () {
+ return this.props.label || this.config.propsDefault.label;
+ },
+ pathKey () {
+ return this.props.path || this.config.propsDefault.path;
+ },
+ iconKey () {
+ return this.props.icon || this.config.propsDefault.icon;
+ },
+ childrenKey () {
+ return this.props.children || this.config.propsDefault.children;
+ },
+ isOpenKey () {
+ return this.props.isOpen || this.config.propsDefault.isOpen;
+ },
+ nowTagValue () {
+ return this.$router.$avueRouter.getValue(this.$route);
+ }
},
methods: {
- generateTitle(item) {
- return this.$router.$avueRouter.generateTitle(
- item[this.labelKey],
- (item.meta || {}).i18n
- );
- },
- vaildActive(item) {
- if (this.validIsOpen(item)) {
- return false;
+ generateTitle (item) {
+ return this.$router.$avueRouter.generateTitle(
+ item[this.labelKey],
+ (item.meta || {}).i18n
+ );
+ },
+ vaildActive (item) {
+ if (this.validIsOpen(item)) {
+ return false;
+ }
+ const groupFlag = (item["group"] || []).some(ele =>
+ this.$route.path.includes(ele)
+ );
+ return this.nowTagValue === item[this.pathKey] || groupFlag;
+ },
+ vaildRoles (item) {
+ item.meta = item.meta || {};
+ return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
+ },
+ validatenull (val) {
+ return validatenull(val);
+ },
+ validIsOpen (item) {
+ if (item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
+ return true;
+ }
+ },
+ open (item) {
+ if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
+ if (this.validIsOpen(item)) {
+ window.open(item[this.pathKey]);
+ } else {
+ this.$router.$avueRouter.group = item.group;
+ this.$router.$avueRouter.meta = item.meta;
+ this.$router.push({
+ path: this.$router.$avueRouter.getPath({
+ name: item[this.labelKey],
+ src: item[this.pathKey]
+ }, item.meta),
+ query: item.query
+ });
+ }
}
- const groupFlag = (item["group"] || []).some(ele =>
- this.$route.path.includes(ele)
- );
- return this.nowTagValue === item[this.pathKey] || groupFlag;
- },
- vaildRoles(item) {
- item.meta = item.meta || {};
- return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
- },
- validatenull(val) {
- return validatenull(val);
- },
- validIsOpen(item) {
- if (item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
- return true;
- }
- },
- open(item) {
- if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
- if (this.validIsOpen(item)) {
- window.open(item[this.pathKey]);
- } else {
- this.$router.$avueRouter.group = item.group;
- this.$router.$avueRouter.meta = item.meta;
- this.$router.push({
- path: this.$router.$avueRouter.getPath({
- name: item[this.labelKey],
- src: item[this.pathKey]
- }, item.meta),
- query: item.query
- });
- }
- }
}
- };
+};
</script>
--
Gitblit v1.9.3