Navbar.vue 13 KB

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