Navbar.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <template>
  2. <div class="navbar-wrap">
  3. <el-menu class="navbar" :class="[isFloor && 'tabs-box']" mode="horizontal" background-color="#fff">
  4. <div class="navbar-left">
  5. <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
  6. <!-- <breadcrumb class="breadcrumb-container"></breadcrumb>-->
  7. <!-- <tags-view></tags-view> -->
  8. <div class="menu_cards">
  9. <div class="menu_card">
  10. <span class="time">{{times}}</span>
  11. <!-- <div class="dropdown shrink-0">
  12. <icon-calendar />
  13. </div>
  14. <div class="dropdown shrink-0">
  15. <icon-edit />
  16. </div>
  17. <div class="dropdown shrink-0">
  18. <icon-chat-notification />
  19. </div> -->
  20. <!-- <div class="dropdown shrink-0">
  21. <div class="relative">
  22. <input
  23. type="text"
  24. 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"
  25. placeholder="Search..."
  26. />
  27. <button type="button" class="absolute w-9 h-9 inset-0 ltr:right-auto rtl:left-auto appearance-none peer-focus:text-primary">
  28. <icon-search class="mx-auto" />
  29. </button>
  30. <button
  31. type="button"
  32. class="hover:opacity-80 sm:hidden block absolute top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2"
  33. @click="search = false"
  34. >
  35. <icon-x-circle />
  36. </button>
  37. </div>
  38. </div> -->
  39. </div>
  40. <div class="menu_card">
  41. <!-- <div class="dropdown shrink-0">
  42. <img src="@/assets/img/sun.svg" alt="">
  43. </div>
  44. <div class="dropdown shrink-0">
  45. <img src="@/assets/img/lang.svg" alt="">
  46. </div>
  47. <div class="dropdown shrink-0">
  48. <img src="@/assets/img/massage.svg" alt="">
  49. </div>
  50. <div class="dropdown shrink-0">
  51. <img src="@/assets/img/ideo.svg" alt="">
  52. </div> -->
  53. </div>
  54. </div>
  55. </div>
  56. <div class="right-menu">
  57. <!-- <el-tooltip effect="dark" content="全屏" placement="bottom">-->
  58. <!-- <screenfull class="screenfull right-menu-item"></screenfull>-->
  59. <!-- </el-tooltip>-->
  60. <el-dropdown class="avatar-container right-menu-item" trigger="click">
  61. <div class="avatar-wrapper">
  62. <div class="user-name">{{ user.username[0] }}</div>
  63. <i class="el-icon-caret-bottom"></i>
  64. </div>
  65. <el-dropdown-menu slot="dropdown">
  66. <router-link to="/">
  67. <el-dropdown-item>
  68. 首页
  69. </el-dropdown-item>
  70. </router-link>
  71. <span @click="changePassword">
  72. <el-dropdown-item>修改密码</el-dropdown-item>
  73. </span>
  74. <span @click="logout">
  75. <el-dropdown-item divided>退出登录</el-dropdown-item>
  76. </span>
  77. </el-dropdown-menu>
  78. </el-dropdown>
  79. </div>
  80. </el-menu>
  81. <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" append-to-body :close-on-click-modal="false"
  82. :close-on-press-escape="false">
  83. <el-form :model="form" :rules="formRules" ref="form" label-width="100px">
  84. <el-form-item label="原密码" prop="old_passwprd">
  85. <el-input v-model="form.old_passwprd" placeholder="不修改则不填"></el-input>
  86. </el-form-item>
  87. <el-form-item label="新密码" prop="password">
  88. <el-input type="password" autocompete="off" v-model="form.password" placeholder="不修改则不填"></el-input>
  89. </el-form-item>
  90. <el-form-item label="确认密码" prop="rep_password">
  91. <el-input type="password" autocompete="off" v-model="form.rep_password" placeholder="不修改则不填"></el-input>
  92. </el-form-item>
  93. </el-form>
  94. <span slot="footer" class="dialog-footer">
  95. <el-button @click="dialogVisible = false">取 消</el-button>
  96. <el-button type="primary" @click="submitForm">确 定</el-button>
  97. </span>
  98. </el-dialog>
  99. </div>
  100. </template>
  101. <script>
  102. import { mapGetters } from 'vuex'
  103. import Breadcrumb from '@/components/Breadcrumb'
  104. import Hamburger from '@/components/Hamburger'
  105. import Screenfull from '@/components/Screenfull'
  106. import LangSelect from '@/components/LangSelect'
  107. import ThemePicker from '@/components/ThemePicker'
  108. import TagsView from './TagsView'
  109. import IconCalendar from '@/components/icon/icon-calendar.vue';
  110. import IconEdit from '@/components/icon/icon-edit.vue';
  111. import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
  112. import IconSearch from '@/components/icon/icon-search.vue';
  113. import IconXCircle from '@/components/icon/icon-x-circle.vue';
  114. import { RegExp } from '~/ui-utils'
  115. import * as API_Auth from '@/api/auth'
  116. import * as API_Menus from '@/api/menus'
  117. import { asyncRouterMap, constantRouterMap } from '@/router'
  118. import Storage from '@/utils/storage'
  119. export default {
  120. components: {
  121. Breadcrumb,
  122. Hamburger,
  123. Screenfull,
  124. LangSelect,
  125. ThemePicker,
  126. TagsView,
  127. IconCalendar,
  128. IconEdit,
  129. IconChatNotification,
  130. IconSearch,
  131. IconXCircle
  132. },
  133. data() {
  134. const user = this.MixinClone(this.$store.getters.user)
  135. return {
  136. siteType: Storage.getItem('siteType'),
  137. dialogVisible: false,
  138. form: {
  139. old_passwprd: '',
  140. password: '',
  141. rep_password: ''
  142. },
  143. formRules: {
  144. old_passwprd: [{ required: false, message: '请输入原密码!', trigger: 'blur' }],
  145. password: [
  146. { required: false, message: '请输入新密码!', trigger: 'blur' },
  147. {
  148. validator: (rule, value, callback) => {
  149. if (value && !RegExp.password.test(value)) {
  150. callback(new Error('密码应为6-20位英文或数字!'))
  151. } else {
  152. callback()
  153. }
  154. }
  155. }
  156. ],
  157. rep_password: [
  158. { required: false, message: '请确认您的新密码!', trigger: 'blur' },
  159. {
  160. validator: (rule, value, callback) => {
  161. if (value && this.form.password !== value) {
  162. callback(new Error('两次输入不一致!'))
  163. } else {
  164. callback()
  165. }
  166. }
  167. }
  168. ]
  169. },
  170. isFloor: false,
  171. times:'',//格式化之后的当前时间
  172. }
  173. },
  174. computed: {
  175. ...mapGetters(['sidebar', 'user'])
  176. },
  177. watch: {
  178. form: {
  179. handler: function(newVal) {
  180. const { old_passwprd, password, rep_password } = newVal
  181. const required = !!(old_passwprd || password || rep_password)
  182. this.formRules.old_passwprd[0].required = required
  183. this.formRules.password[0].required = required
  184. this.formRules.rep_password[0].required = required
  185. },
  186. deep: true
  187. },
  188. dialogVisible: function(newVal) {
  189. if (!newVal) {
  190. this.fileList = []
  191. }
  192. },
  193. $route() {
  194. if (this.$route.path === '/page/pc-decoration/floor') {
  195. this.isFloor = true
  196. } else {
  197. this.isFloor = false
  198. }
  199. }
  200. },
  201. created() {
  202. this.getTimes()
  203. },
  204. // 在Vue实例销毁前,清除我们的定时器
  205. beforeDestroy() {
  206. if (this.times) {
  207. clearInterval(this.getTimesInterval);
  208. }
  209. },
  210. methods: {
  211. getTimes(){
  212. setInterval(this.getTimesInterval, 1000);
  213. },
  214. getTimesInterval:function() {
  215. let _this = this;
  216. let year = new Date().getFullYear(); //获取当前时间的年份
  217. let month = new Date().getMonth() + 1; //获取当前时间的月份
  218. let day = new Date().getDate(); //获取当前时间的天数
  219. let hours = new Date().getHours(); //获取当前时间的小时
  220. let minutes = new Date().getMinutes(); //获取当前时间的分数
  221. let seconds = new Date().getSeconds(); //获取当前时间的秒数
  222. //当小于 10 的是时候,在前面加 0
  223. if (hours < 10) {
  224. hours = "0" + hours;
  225. }
  226. if (minutes < 10) {
  227. minutes = "0" + minutes;
  228. }
  229. if (seconds < 10) {
  230. seconds = "0" + seconds;
  231. }
  232. //拼接格式化当前时间
  233. _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  234. },
  235. // tab(){
  236. // document.querySelector('body').classList.add('dark');
  237. // },
  238. /** 提交修改密码表单 */
  239. submitForm() {
  240. this.$refs['form'].validate(valid => {
  241. if (valid) {
  242. const params = this.MixinClone(this.form)
  243. if (!params.old_passwprd) {
  244. delete params.old_passwprd
  245. delete params.password
  246. delete params.rep_password
  247. }
  248. API_Auth.editUserInfo(params).then(() => {
  249. this.dialogVisible = false
  250. this.$store.dispatch('fedLogoutAction')
  251. location.reload()
  252. })
  253. } else {
  254. this.$message.error('表单填写有误,请核对!')
  255. }
  256. })
  257. },
  258. toggleSideBar() {
  259. this.$store.dispatch('toggleSideBar')
  260. },
  261. changePassword() {
  262. this.dialogVisible = true
  263. },
  264. logout() {
  265. this.$confirm('确定退出吗?', '提示', {
  266. confirmButtonText: '确定',
  267. cancelButtonText: '取消',
  268. type: 'warning'
  269. }).then(() => {
  270. this.$store.dispatch('logoutAction').then(() => {
  271. const route = this.$router.resolve('/login')
  272. location.replace(route.href)// 为了重新实例化vue-router对象 避免bug
  273. })
  274. }).catch(() => { })
  275. }
  276. }
  277. }
  278. </script>
  279. <style type="text/scss" lang="scss" scoped>
  280. @import "../../../styles/variables";
  281. .el-dropdown-menu--small .el-dropdown-menu__item {
  282. min-width: 90px;
  283. }
  284. .navbar-wrap {
  285. // height: 60px;
  286. position: relative;
  287. width: calc(100% + 8px);
  288. left: -8px;
  289. background-color: $nav_bg !important;
  290. z-index: 10;
  291. }
  292. /deep/ .el-menu {
  293. border-bottom: none;
  294. }
  295. .navbar {
  296. height: 60px;
  297. border-radius: 0 !important;
  298. //border-bottom: 1px solid #e9edf0;
  299. // background-color: $nav_bg !important;
  300. // border-color: $nav_bg !important;
  301. &.tabs-box {
  302. min-width: 1260px;
  303. }
  304. .navbar-left {
  305. float: left;
  306. display: flex;
  307. height: 100%;
  308. align-items: center;
  309. width: 94%;
  310. padding-left: 20px;
  311. }
  312. .hamburger-container {
  313. padding: 0 10px;
  314. }
  315. .menu_cards{
  316. width: 100%;
  317. display: flex;
  318. justify-content: space-between;
  319. }
  320. .menu_card{
  321. display: flex;
  322. .dropdown{
  323. width: 40px;
  324. height: 40px;
  325. margin-left:8px;
  326. background-color: rgba(224,230,237,0.4);
  327. border-radius: 50%;
  328. img{
  329. width: 20px;
  330. height: 20px;
  331. margin: 10px 10px;
  332. }
  333. }
  334. .time{
  335. margin-left: 30px;
  336. }
  337. }
  338. .breadcrumb-container {
  339. float: left;
  340. /deep/ {
  341. .el-breadcrumb__separator,
  342. .el-breadcrumb__item .el-breadcrumb__inner a {
  343. color: $nav_text !important;
  344. }
  345. .el-breadcrumb__item .el-breadcrumb__inner .no-redirect {
  346. color: $nav_text_active !important;
  347. }
  348. }
  349. }
  350. .right-menu {
  351. display: flex;
  352. align-items: center;
  353. //float: right;
  354. height: 100%;
  355. /deep/ svg {
  356. fill: $nav_text_active !important;
  357. }
  358. &:focus {
  359. outline: none;
  360. }
  361. .right-menu-item {
  362. display: inline-block;
  363. margin: 0 15px;
  364. }
  365. .avatar-container {
  366. height: 50px;
  367. margin-right: 30px;
  368. display: flex;
  369. align-items: center;
  370. .switchSites {
  371. display: flex;
  372. align-items: center;
  373. justify-content: center;
  374. position: relative;
  375. left: 20px;
  376. margin-top: 8px;
  377. .image {
  378. margin-right: 5px;
  379. }
  380. cursor: pointer;
  381. }
  382. .avatar-wrapper {
  383. cursor: pointer;
  384. margin-top: 5px;
  385. position: relative;
  386. .user-avatar {
  387. width: 40px;
  388. height: 40px;
  389. border-radius: 100%;
  390. }
  391. .user-name {
  392. width: 40px;
  393. height: 40px;
  394. border-radius: 50%;
  395. background: #409EFF;
  396. font-size: 30px;
  397. line-height: 1.1;
  398. text-align: center;
  399. color: #fff;
  400. }
  401. .el-icon-caret-bottom {
  402. position: absolute;
  403. right: -20px;
  404. top: 25px;
  405. font-size: 12px;
  406. }
  407. /deep/ .el-icon-caret-bottom {
  408. color: $nav_text_active !important;
  409. }
  410. }
  411. }
  412. }
  413. }
  414. </style>