123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444 |
- <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 _this = this;
- let year = new Date().getFullYear(); //获取当前时间的年份
- let month = new Date().getMonth() + 1; //获取当前时间的月份
- let day = new Date().getDate(); //获取当前时间的天数
- let hours = new Date().getHours(); //获取当前时间的小时
- let minutes = new Date().getMinutes(); //获取当前时间的分数
- let seconds = new Date().getSeconds(); //获取当前时间的秒数
- //当小于 10 的是时候,在前面加 0
- if (hours < 10) {
- hours = "0" + hours;
- }
- if (minutes < 10) {
- minutes = "0" + minutes;
- }
- if (seconds < 10) {
- seconds = "0" + seconds;
- }
- //拼接格式化当前时间
- _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
- },
- // 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>
|