服务许可备案审批，数量消息提示

shuishen

2021-11-12 2582f000556d04a4d508cbd7c6d11b5d3610883e

服务许可备案审批，数量消息提示

 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>

 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>