|
|
@@ -1,76 +1,79 @@
|
|
|
<template>
|
|
|
<!--begin::Page title-->
|
|
|
- <div
|
|
|
- v-if="pageTitleDisplay"
|
|
|
- :class="`page-title d-flex flex-${pageTitleDirection} justify-content-center flex-wrap me-3`"
|
|
|
- >
|
|
|
- <template v-if="pageTitle">
|
|
|
- <!--begin::Title-->
|
|
|
- <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
|
|
|
- {{ pageTitle }}
|
|
|
- </h1>
|
|
|
- <!--end::Title-->
|
|
|
+ <div class="d-flex">
|
|
|
+ <div
|
|
|
+ v-if="showBackBtn"
|
|
|
+ class="d-flex h-100 justify-content-center align-items-center pe-4"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click="router.go(-1)"
|
|
|
+ >
|
|
|
+ <span class="svg-icon svg-icon-2tx" v-tooltip title="返回" data-bs-trigger="hover" data-bs-placement="bottom">
|
|
|
+ <inline-svg :src="getAssetPath('media/icons/duotune/general/gen058.svg')" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="pageTitleDisplay"
|
|
|
+ :class="`page-title d-flex flex-${pageTitleDirection} justify-content-center flex-wrap me-3`"
|
|
|
+ >
|
|
|
+ <template v-if="pageTitle">
|
|
|
+ <!--begin::Title-->
|
|
|
+ <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
|
|
|
+ {{ pageTitle }}
|
|
|
+ </h1>
|
|
|
+ <!--end::Title-->
|
|
|
|
|
|
- <span
|
|
|
- v-if="pageTitleDirection === 'row' && pageTitleBreadcrumbDisplay"
|
|
|
- class="h-20px border-gray-200 border-start mx-3"
|
|
|
- ></span>
|
|
|
+ <span
|
|
|
+ v-if="pageTitleDirection === 'row' && pageTitleBreadcrumbDisplay"
|
|
|
+ class="h-20px border-gray-200 border-start mx-3"
|
|
|
+ ></span>
|
|
|
|
|
|
- <!--begin::Breadcrumb-->
|
|
|
- <ul
|
|
|
- v-if="breadcrumbs && pageTitleBreadcrumbDisplay"
|
|
|
- class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1"
|
|
|
- >
|
|
|
- <!--begin::Item-->
|
|
|
- <!-- <li class="breadcrumb-item text-muted">
|
|
|
+ <!--begin::Breadcrumb-->
|
|
|
+ <ul
|
|
|
+ v-if="breadcrumbs && pageTitleBreadcrumbDisplay"
|
|
|
+ class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1"
|
|
|
+ >
|
|
|
+ <!--begin::Item-->
|
|
|
+ <!-- <li class="breadcrumb-item text-muted">
|
|
|
<router-link to="/" class="text-muted text-hover-primary">Home</router-link>
|
|
|
</li> -->
|
|
|
- <!--end::Item-->
|
|
|
- <template v-for="(item, i) in breadcrumbs" :key="i">
|
|
|
- <!--begin::Item-->
|
|
|
-
|
|
|
- <li v-if="i != 0" class="breadcrumb-item">
|
|
|
- <span class="bullet bg-gray-400 w-5px h-2px"></span>
|
|
|
- </li>
|
|
|
- <!--end::Item-->
|
|
|
- <!--begin::Item-->
|
|
|
- <li class="breadcrumb-item text-muted">{{ item }}</li>
|
|
|
<!--end::Item-->
|
|
|
- </template>
|
|
|
- </ul>
|
|
|
- <!--end::Breadcrumb-->
|
|
|
- </template>
|
|
|
+ <template v-for="(item, i) in breadcrumbs" :key="i">
|
|
|
+ <!--begin::Item-->
|
|
|
+
|
|
|
+ <li v-if="i != 0" class="breadcrumb-item">
|
|
|
+ <span class="bullet bg-gray-400 w-5px h-2px"></span>
|
|
|
+ </li>
|
|
|
+ <!--end::Item-->
|
|
|
+ <!--begin::Item-->
|
|
|
+ <li class="breadcrumb-item text-muted">{{ item }}</li>
|
|
|
+ <!--end::Item-->
|
|
|
+ </template>
|
|
|
+ </ul>
|
|
|
+ <!--end::Breadcrumb-->
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div v-else class="align-items-stretch"></div>
|
|
|
</div>
|
|
|
- <div v-else class="align-items-stretch"></div>
|
|
|
<!--end::Page title-->
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent, computed } from "vue"
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed } from "vue"
|
|
|
+import { getAssetPath } from "@/core/helpers/assets"
|
|
|
import { pageTitleDisplay, pageTitleBreadcrumbDisplay, pageTitleDirection } from "@/core/helpers/config"
|
|
|
-import { useRoute } from "vue-router"
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: "layout-page-title",
|
|
|
- components: {},
|
|
|
- setup() {
|
|
|
- const route = useRoute()
|
|
|
+import { useRoute, useRouter } from "vue-router"
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
|
|
|
- const pageTitle = computed(() => {
|
|
|
- return route.meta.pageTitle
|
|
|
- })
|
|
|
+const showBackBtn = computed(() => {
|
|
|
+ return route.query.back && Number(route.query.back) != 0
|
|
|
+})
|
|
|
|
|
|
- const breadcrumbs = computed(() => {
|
|
|
- return route.meta.breadcrumbs
|
|
|
- })
|
|
|
+const pageTitle = computed(() => {
|
|
|
+ return route.meta.pageTitle
|
|
|
+})
|
|
|
|
|
|
- return {
|
|
|
- pageTitle,
|
|
|
- breadcrumbs,
|
|
|
- pageTitleDisplay,
|
|
|
- pageTitleBreadcrumbDisplay,
|
|
|
- pageTitleDirection,
|
|
|
- }
|
|
|
- },
|
|
|
+const breadcrumbs = computed(() => {
|
|
|
+ return route.meta.breadcrumbs
|
|
|
})
|
|
|
</script>
|