123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480 |
- <template>
- <div class="navbar-wrap">
- <el-menu
- class="navbar"
- :class="[isFloor && 'tabs-box']"
- mode="horizontal"
- background-color="#fff"
- >
- <div class="navbar-left">
- <hamburger
- class="hamburger-container"
- :toggleClick="toggleSideBar"
- :isActive="sidebar.opened"
- ></hamburger>
- <!-- <breadcrumb class="breadcrumb-container"></breadcrumb>-->
- <!-- <tags-view></tags-view> -->
- <div class="menu_cards">
- <div class="menu_card">
- <span class="time">时间:{{ times }}</span>
- <!-- <div class="dropdown shrink-0">
- <icon-calendar />
- </div>
- <div class="dropdown shrink-0">
- <icon-edit />
- </div>
- <div class="dropdown shrink-0">
- <icon-chat-notification />
- </div> -->
- <!-- <div class="dropdown shrink-0">
- <div class="relative">
- <input
- type="text"
- class="form-input ltr:pl-9 rtl:pr-9 ltr:sm:pr-4 rtl:sm:pl-4 ltr:pr-9 rtl:pl-9 peer sm:bg-transparent bg-gray-100 placeholder:tracking-widest"
- placeholder="Search..."
- />
- <button type="button" class="absolute w-9 h-9 inset-0 ltr:right-auto rtl:left-auto appearance-none peer-focus:text-primary">
- <icon-search class="mx-auto" />
- </button>
- <button
- type="button"
- class="hover:opacity-80 sm:hidden block absolute top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2"
- @click="search = false"
- >
- <icon-x-circle />
- </button>
- </div>
- </div> -->
- </div>
- <div class="menu_card">
- <!-- <div class="dropdown shrink-0">
- <img src="@/assets/img/sun.svg" alt="">
- </div>
- <div class="dropdown shrink-0">
- <img src="@/assets/img/lang.svg" alt="">
- </div>
- <div class="dropdown shrink-0">
- <img src="@/assets/img/massage.svg" alt="">
- </div>
- <div class="dropdown shrink-0">
- <img src="@/assets/img/ideo.svg" alt="">
- </div> -->
- </div>
- </div>
- </div>
- <div class="right-menu">
- <!-- <el-tooltip effect="dark" content="全屏" placement="bottom">-->
- <!-- <screenfull class="screenfull right-menu-item"></screenfull>-->
- <!-- </el-tooltip>-->
- <el-dropdown class="avatar-container right-menu-item" trigger="click">
- <div class="avatar-wrapper">
- <div class="user-name">{{ user.username[0] }}</div>
- <i class="el-icon-caret-bottom"></i>
- </div>
- <el-dropdown-menu slot="dropdown">
- <router-link to="/">
- <el-dropdown-item> 首页 </el-dropdown-item>
- </router-link>
- <span @click="changePassword">
- <el-dropdown-item>修改密码</el-dropdown-item>
- </span>
- <span @click="logout">
- <el-dropdown-item divided>退出登录</el-dropdown-item>
- </span>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- </el-menu>
- <el-dialog
- title="修改密码"
- :visible.sync="dialogVisible"
- width="500px"
- append-to-body
- :close-on-click-modal="false"
- :close-on-press-escape="false"
- >
- <el-form :model="form" :rules="formRules" ref="form" label-width="100px">
- <el-form-item label="原密码" prop="old_passwprd">
- <el-input
- v-model="form.old_passwprd"
- placeholder="不修改则不填"
- ></el-input>
- </el-form-item>
- <el-form-item label="新密码" prop="password">
- <el-input
- type="password"
- autocompete="off"
- v-model="form.password"
- placeholder="不修改则不填"
- ></el-input>
- </el-form-item>
- <el-form-item label="确认密码" prop="rep_password">
- <el-input
- type="password"
- autocompete="off"
- v-model="form.rep_password"
- placeholder="不修改则不填"
- ></el-input>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="submitForm">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { mapGetters } from "vuex";
- import Breadcrumb from "@/components/Breadcrumb";
- import Hamburger from "@/components/Hamburger";
- import Screenfull from "@/components/Screenfull";
- import LangSelect from "@/components/LangSelect";
- import ThemePicker from "@/components/ThemePicker";
- import TagsView from "./TagsView";
- import IconCalendar from "@/components/icon/icon-calendar.vue";
- import IconEdit from "@/components/icon/icon-edit.vue";
- import IconChatNotification from "@/components/icon/icon-chat-notification.vue";
- import IconSearch from "@/components/icon/icon-search.vue";
- import IconXCircle from "@/components/icon/icon-x-circle.vue";
- import { RegExp } from "~/ui-utils";
- import * as API_Auth from "@/api/auth";
- import * as API_Menus from "@/api/menus";
- import { asyncRouterMap, constantRouterMap } from "@/router";
- import Storage from "@/utils/storage";
- export default {
- components: {
- Breadcrumb,
- Hamburger,
- Screenfull,
- LangSelect,
- ThemePicker,
- TagsView,
- IconCalendar,
- IconEdit,
- IconChatNotification,
- IconSearch,
- IconXCircle,
- },
- data() {
- const user = this.MixinClone(this.$store.getters.user);
- return {
- siteType: Storage.getItem("siteType"),
- dialogVisible: false,
- form: {
- old_passwprd: "",
- password: "",
- rep_password: "",
- },
- formRules: {
- old_passwprd: [
- { required: false, message: "请输入原密码!", trigger: "blur" },
- ],
- password: [
- { required: false, message: "请输入新密码!", trigger: "blur" },
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.password.test(value)) {
- callback(new Error("密码应为6-20位英文或数字!"));
- } else {
- callback();
- }
- },
- },
- ],
- rep_password: [
- { required: false, message: "请确认您的新密码!", trigger: "blur" },
- {
- validator: (rule, value, callback) => {
- if (value && this.form.password !== value) {
- callback(new Error("两次输入不一致!"));
- } else {
- callback();
- }
- },
- },
- ],
- },
- isFloor: false,
- times: "", //格式化之后的当前时间
- };
- },
- computed: {
- ...mapGetters(["sidebar", "user"]),
- },
- watch: {
- form: {
- handler: function (newVal) {
- const { old_passwprd, password, rep_password } = newVal;
- const required = !!(old_passwprd || password || rep_password);
- this.formRules.old_passwprd[0].required = required;
- this.formRules.password[0].required = required;
- this.formRules.rep_password[0].required = required;
- },
- deep: true,
- },
- dialogVisible: function (newVal) {
- if (!newVal) {
- this.fileList = [];
- }
- },
- $route() {
- if (this.$route.path === "/page/pc-decoration/floor") {
- this.isFloor = true;
- } else {
- this.isFloor = false;
- }
- },
- },
- created() {
- this.getTimes();
- },
- // 在Vue实例销毁前,清除我们的定时器
- beforeDestroy() {
- if (this.times) {
- clearInterval(this.getTimesInterval);
- }
- },
- methods: {
- getTimes() {
- setInterval(this.getTimesInterval, 1000);
- },
- getTimesInterval: function () {
- let now = new Date();
- let year = now.getFullYear(); // 获取当前时间的年份
- let month = now.getMonth() + 1; // 获取当前时间的月份
- let day = now.getDate(); // 获取当前时间的天数
- let hours = now.getHours(); // 获取当前时间的小时
- let minutes = now.getMinutes(); // 获取当前时间的分数
- let seconds = now.getSeconds(); // 获取当前时间的秒数
- let weekdays = [
- "星期天",
- "星期一",
- "星期二",
- "星期三",
- "星期四",
- "星期五",
- "星期六",
- ];
- let weekday = weekdays[now.getDay()]; // 获取星期几
- // 当小于 10 的时候,在前面加 0
- month = month < 10 ? "0" + month : month;
- day = day < 10 ? "0" + day : day;
- hours = hours < 10 ? "0" + hours : hours;
- minutes = minutes < 10 ? "0" + minutes : minutes;
- seconds = seconds < 10 ? "0" + seconds : seconds;
- // 拼接格式化当前时间
- this.times = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekday}`;
- },
- // tab(){
- // document.querySelector('body').classList.add('dark');
- // },
- /** 提交修改密码表单 */
- submitForm() {
- this.$refs["form"].validate((valid) => {
- if (valid) {
- const params = this.MixinClone(this.form);
- if (!params.old_passwprd) {
- delete params.old_passwprd;
- delete params.password;
- delete params.rep_password;
- }
- API_Auth.editUserInfo(params).then(() => {
- this.dialogVisible = false;
- this.$store.dispatch("fedLogoutAction");
- location.reload();
- });
- } else {
- this.$message.error("表单填写有误,请核对!");
- }
- });
- },
- toggleSideBar() {
- this.$store.dispatch("toggleSideBar");
- },
- changePassword() {
- this.dialogVisible = true;
- },
- logout() {
- this.$confirm("确定退出吗?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(() => {
- this.$store.dispatch("logoutAction").then(() => {
- const route = this.$router.resolve("/login");
- location.replace(route.href); // 为了重新实例化vue-router对象 避免bug
- });
- })
- .catch(() => {});
- },
- },
- };
- </script>
- <style type="text/scss" lang="scss" scoped>
- @import "../../../styles/variables";
- .el-dropdown-menu--small .el-dropdown-menu__item {
- min-width: 90px;
- }
- .navbar-wrap {
- // height: 60px;
- position: relative;
- width: calc(100% + 8px);
- left: -8px;
- background-color: $nav_bg !important;
- z-index: 10;
- }
- /deep/ .el-menu {
- border-bottom: none;
- }
- .navbar {
- height: 60px;
- border-radius: 0 !important;
- //border-bottom: 1px solid #e9edf0;
- // background-color: $nav_bg !important;
- // border-color: $nav_bg !important;
- &.tabs-box {
- min-width: 1260px;
- }
- .navbar-left {
- float: left;
- display: flex;
- height: 100%;
- align-items: center;
- width: 94%;
- padding-left: 20px;
- }
- .hamburger-container {
- padding: 0 10px;
- }
- .menu_cards {
- width: 100%;
- display: flex;
- justify-content: space-between;
- }
- .menu_card {
- display: flex;
- .dropdown {
- width: 40px;
- height: 40px;
- margin-left: 8px;
- background-color: rgba(224, 230, 237, 0.4);
- border-radius: 50%;
- img {
- width: 20px;
- height: 20px;
- margin: 10px 10px;
- }
- }
- .time {
- margin-left: 30px;
- }
- }
- .breadcrumb-container {
- float: left;
- /deep/ {
- .el-breadcrumb__separator,
- .el-breadcrumb__item .el-breadcrumb__inner a {
- color: $nav_text !important;
- }
- .el-breadcrumb__item .el-breadcrumb__inner .no-redirect {
- color: $nav_text_active !important;
- }
- }
- }
- .right-menu {
- display: flex;
- align-items: center;
- //float: right;
- height: 100%;
- /deep/ svg {
- fill: $nav_text_active !important;
- }
- &:focus {
- outline: none;
- }
- .right-menu-item {
- display: inline-block;
- margin: 0 15px;
- }
- .avatar-container {
- height: 50px;
- margin-right: 30px;
- display: flex;
- align-items: center;
- .switchSites {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- left: 20px;
- margin-top: 8px;
- .image {
- margin-right: 5px;
- }
- cursor: pointer;
- }
- .avatar-wrapper {
- cursor: pointer;
- margin-top: 5px;
- position: relative;
- .user-avatar {
- width: 40px;
- height: 40px;
- border-radius: 100%;
- }
- .user-name {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: #409eff;
- font-size: 30px;
- line-height: 1.1;
- text-align: center;
- color: #fff;
- }
- .el-icon-caret-bottom {
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- /deep/ .el-icon-caret-bottom {
- color: $nav_text_active !important;
- }
- }
- }
- }
- }
- </style>
|