push

lib/saas/view/system/layout/breadcrumb.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="NsBreadcrumb">
+    <a-breadcrumb v-if="initBreadcrumbList && initBreadcrumbList.length">
+      <a-breadcrumb-item v-for="item in initBreadcrumbList" :key="item.name"
+        ><a @click="redirectByName(item)">{{ item.meta?.title }}</a></a-breadcrumb-item
+      >
+    </a-breadcrumb>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
+  export default defineComponent({
+    props: {
+      isCheck: {
+        type: Boolean,
+        default: () => true,
+      },
+      breadcrumbList: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const router = useRouter();
+      const initBreadcrumbList = ref<object[]>([]);
+      initBreadcrumbList.value = props.breadcrumbList as object[];
+      const configStore = appConfigStore();
+      const dealBreadcrumbList = () => {
+        if (initBreadcrumbList.value.length) {
+          let info = initBreadcrumbList.value[initBreadcrumbList.value.length - 2];
+          let finalInfo = initBreadcrumbList.value[initBreadcrumbList.value.length - 1];
+          if (info.meta && info.meta.hideChildren && `${info.name}Index` === finalInfo.name) {
+            initBreadcrumbList.value = initBreadcrumbList.value.slice(
+              0,
+              initBreadcrumbList.value.length - 1,
+            );
+          }
+        }
+      };
+      dealBreadcrumbList();
+      watch(
+        () => props.breadcrumbList,
+        (val) => {
+          initBreadcrumbList.value = val;
+          if (props.isCheck) {
+            dealBreadcrumbList();
+          }
+        },
+        { deep: true },
+      );
+      const redirectByName = (menuInfo: object) => {
+        if (configStore.resourceName) {
+          menuInfo.name = menuInfo.name.replace(configStore.resourceName, '');
+        }
+
+        if (props.isCheck) {
+          router.push({ name: menuInfo.name });
+        } else {
+          if (menuInfo.menus && menuInfo.menus.length) {
+            if (menuInfo.type === 'noChildrenMenu') {
+              router.push({ name: `${menuInfo.name}Index` });
+            } else {
+              let code = menuInfo.menus[0].code;
+              if (configStore.resourceName) {
+                code = code.replace(configStore.resourceName, '');
+              }
+              router.push({ name: code });
+            }
+          } else {
+            router.push({ name: menuInfo.name });
+          }
+        }
+      };
+      return {
+        initBreadcrumbList,
+        redirectByName,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .NsBreadcrumb {
+    width: 100%;
+    padding: 0 16px;
+    min-height: 42px;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    position: fixed;
+    top: 48px;
+    z-index: 505;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+</style>