添加新的需求

2025-10-20 17:32:09 +08:00
parent 9979e00b47
commit 361d5ab1ae
247 changed files with 34249 additions and 1 deletions
--- a/pc-cattle-transportation/src/components/layout/component/header.vue
+++ b/pc-cattle-transportation/src/components/layout/component/header.vue
@@ -0,0 +1,121 @@
+<template>
+    <section id="webAdminLayoutHeader" class="h-full flex items-center header-menu">
+        <div class="flex-1">
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <!-- <el-breadcrumb-item :to="{ path: '/' }"> </el-breadcrumb-item> -->
+                <el-breadcrumb-item v-if="webTitle !== '首页'">{{ webTitle }}</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="flex">
+            <div style="margin-right: 20px" v-if="userType == 1">
+                <el-button type="primary">
+                    <a style="color: #fff" href="https://b.datav.run/share/page/7d743ac7c27c0d332d0a19e758e0d7c4" target="_blank"> 可视化大屏 </a>
+                </el-button>
+            </div>
+            <div class="headImg">
+                <img alt="" src="../../../assets/photo.jpg" />
+            </div>
+            <div class="headName">{{ username }}</div>
+            <em style="font-style: normal; position: relative; top: 2px">|</em>
+            <div class="loginOut" @click="loginOut">退出</div>
+        </div>
+    </section>
+</template>
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { ArrowRight } from '@element-plus/icons-vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useUserStore } from '~/store/user';
+import { loginoutApi } from '~/api/sys.js';
+import { removeToken } from '~/utils/auth.js';
+
+import usePermissionStore from '@/store/permission.js';
+
+const permissionStore = usePermissionStore();
+
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const userType = ref(userStore.userType);
+
+const username = ref(userStore.username);
+
+const webTitle = ref('');
+onMounted(() => {
+    webTitle.value = route.meta.title;
+});
+
+watch(
+    () => route.path,
+    () => {
+        webTitle.value = route.meta.title;
+    },
+    {
+        immediate: true,
+        deep: true,
+    },
+);
+
+const loginOut = () => {
+    ElMessageBox.confirm('您确定要退出吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            // router.push('/login');
+            loginoutApi().then((ret) => {
+                userStore.updateToken('');
+                userStore.updateUserName('');
+                userStore.updateLoginUser(null);
+                permissionStore.setRoutes([]);
+                permissionStore.setSidebarRouters([]);
+                removeToken();
+                ElMessage({ type: 'success', message: '已经退出！' });
+                router.push('/login');
+            });
+        })
+        .catch(() => {
+            ElMessage({ type: 'info', message: '取消退出！' });
+        });
+};
+</script>
+<style scoped>
+.el-breadcrumb {
+    color: #000;
+}
+
+.headImg {
+    color: #666;
+    margin-right: 20px;
+}
+
+.headImg img {
+    margin: auto;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+}
+
+.headName {
+    font-family: MicrosoftYaHei;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0.17px;
+    display: inline-block;
+    line-height: 30px;
+    padding-right: 20px;
+}
+
+.loginOut {
+    margin-left: 20px;
+    color: #3b74ff;
+    font-size: 12px;
+    justify-content: center;
+    align-items: center;
+    display: inline-block;
+    line-height: 30px;
+    cursor: pointer;
+}
+</style>