onlinenew_manage/src/layout/Navbar.vue

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color=""
    text-color="#000"
    active-text-color="#4392f7"
    @select="handleSelect"
  >
    <el-icon
      :size="20"
      v-show="!isCollapse"
      class="fold"
      @click="handleClick"
      color="#000"
      ><Fold
    /></el-icon>
    <el-icon :size="20" v-show="isCollapse" class="fold" @click="handleClick"
      ><Expand
    /></el-icon>
    <div class="logo">
      <!-- <img src="@/assets/img/nanchang.png" style="width: 30px; height: 30px" /> -->
      <span>迎新系统管理平台</span>
    </div>
    <div class="login">
      <span class="dateTime">{{ dateTime }}</span>
      <!-- <el-badge :value="titlenumber" class="item">
        <SvgIcon
          name="news"
          class="iconClass"
          style="cursor: pointer"
        ></SvgIcon>
      </el-badge> -->
      <div class="flex flex-wrap items-center" style="cursor: pointer">
        <el-dropdown :hide-on-click="false" trigger="click">
          <el-avatar :size="30">
            <img src="@/assets/img/phone.png" />
          </el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item @click="uppassword">
                <el-icon class="switchButton" :size="20" color="#000">
                  <img style="width: 20px;height: 20px;" src="@/assets/img/pass.png" />
                </el-icon>
                <span>修改密码</span>
              </el-dropdown-item> -->

              <el-dropdown-item @click="loginOut">
                <el-icon class="switchButton" :size="20" color="#000">
                  <!-- <SwitchButton /> -->
                  <img style="width: 20px;height: 20px;" src="@/assets/img/quit.png" />
                </el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <span class="name">{{ userName }}</span>
    </div>
  </el-menu>
  <el-dialog
    :append-to-body="true"
    class="pw"
    v-model="uppasswordShow"
    title="修改密码"
    width="520"
    :before-close="uppasswordClose"
    align-center
    :close-on-click-modal="false"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      :size="formSize"
      label-position="left"
      status-icon
    >
      <el-form-item label="原密码" prop="oldpass">
        <el-input
          v-model="ruleForm.oldpass"
          placeholder="请输入原密码"
          clearable
        />
      </el-form-item>
      <el-form-item label="新密码" prop="nowpass">
        <el-input
          v-model="ruleForm.nowpass"
          placeholder="请输入新密码"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="确定新密码"
        prop="correctpass"
        style="
          padding-bottom: 40px;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
        "
      >
        <el-input
          v-model="ruleForm.correctpass"
          placeholder="请再次输入新密码"
          clearable
        />
      </el-form-item>

      <el-form-item class="options">
        <el-button
          class="queding"
          type="primary"
          @click="submitForm(ruleFormRef)"
        >
          确定
        </el-button>
        <el-button class="congzhi" @click="resetForm(ruleFormRef)"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { dayjs } from "element-plus";
import { Fold, Expand, Lock, SwitchButton } from "@element-plus/icons-vue";

import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";

const store = useCounterStore();
const { isCollapse } = storeToRefs(store);
const handleClick = () => {
  console.log("触发");
  
  store.setInfo(!isCollapse.value);
};
const router = useRouter();
const userName = ref(); // 账号名称
const titlenumber = ref(1); //  消息条数
const activeIndex = ref(); // 路由路径
const loginOutDialogVisible = ref(false); // 退出按钮
const menuclose = ref(false); // 左边状态栏展开按钮状态
const uppasswordShow = ref(false); // 修改密码展示框
const ruleForm = reactive({
  oldpass: "",
  nowpass: "",
  correctpass: "",
});
const ruleFormRef = ref();
// 表单验证
const rules = reactive({
  oldpass: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
  nowpass: [
    {
      required: true,
      message: "新密码不能为空",
      trigger: "blur",
    },
  ],
  correctpass: [
    {
      required: true,
      message: "两次密码是否输入正确",
      trigger: "blur",
    },
  ],
  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
});

const dateTime = ref(
  dayjs().format("YYYY-MM-DD") + ` 星期四 ` + dayjs().format("HH:mm:ss")
); // 时间

// 选择菜单
const handleSelect = (key, keyPath) => {
  activeIndex.value = key;
};

// 修改密码
const uppassword = () => {
  uppasswordShow.value = true;
};
const uppasswordClose = () => {
  uppasswordShow.value = false;
  ruleFormRef.value.resetFields();
};
// 提交修改密码表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        oldPassword: ruleForm.oldpass,
        newPassword: ruleForm.nowpass,
        confirmPassword: ruleForm.correctpass,
      };
      if (ruleForm.nowpass == ruleForm.correctpass) {
        // let resUpdata = await axios({
        //   method: "post",
        //   url: api.value + "/login/ChangePassword",
        //   headers: {
        //     token: sessionStorage.getItem("token"),
        //     user_head: sessionStorage.getItem("userhead"),
        //   },
        //   data: data,
        // });
        // console.log(resUpdata);
        // if (resUpdata.data.code == 200) {
        //   ElMessage({
        //     type: "success",
        //     showClose: true,
        //     message: resUpdata.data.message,
        //     center: true,
        //   });
        //   sessionStorage.removeItem("token");
        //   sessionStorage.removeItem("userhead");
        //   localStorage.removeItem("pass");
        //   uppasswordShow.value = false;
        //   ruleFormRef.value.resetFields();
        //   ElNotification({
        //     type: "warning",
        //     title: "提示!!!",
        //     message: "密码已修改,请重新登录页面",
        //     // duration: 0,
        //     // position: "top-right",
        //   });
        // } else {
        //   ElMessage({
        //     type: "error",
        //     showClose: true,
        //     message: res.data.message,
        //     center: true,
        //   });
        // }
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: "两次密码输入不正确",
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 重置表单
const resetForm = (formEl) => {
  // console.log("重置表单");
  if (!formEl) return;
  formEl.resetFields();
};

const loginOut = () => {
  ElMessageBox.confirm("是否退出登录?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      localStorage.removeItem("token");
      localStorage.removeItem("userName");
      sessionStorage.removeItem("accountId");
      sessionStorage.removeItem("sidevarItem");
      router.push({
        path: `/login`,
      });
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消登录",
      });
    });
};

onMounted(() => {
  userName.value = localStorage.getItem("userName");
  setInterval(() => {
    var week = ["日", "一", "二", "三", "四", "五", "六"];
    var datas = dayjs().day();
    dateTime.value =
      dayjs().format("YYYY-MM-DD") +
      ` 星期${week[datas]} ` +
      dayjs().format("HH:mm:ss");
  }, 1000);
});
</script>

<style scoped lang="scss">
.el-menu--horizontal {
  border-bottom: none;
  display: flex;
  align-items: center;
  height: 65px;
  // width: 100%;
  background-color: #fff;
  box-shadow: 5px 5px 10px 0px rgba(213, 228, 252, 1);
  .logo {
    left: 90px;
    display: flex;
    align-items: center;
    span {
      margin-left: 10px;
      font-size: 24px;
      font-weight: 600;
    }
  }
  .login {
    color: #000;
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 17px;

    .dateTime {
      margin-right: 20px;
    }
    .el-badge {
      display: flex;
      align-items: center;
      // :deep(.el-badge__content) {
      //   width: 2px;
      //   height: 14px;
      // }
    }
    .items-center {
      margin-left: 20px;
    }
    .name {
      height: 20px;
      line-height: 20px;
      text-decoration: underline;
      padding: 0 10px;
      margin: 0 10px;
      border-left: 2px solid #ccc;
    }
    .switchButton {
      cursor: pointer;
    }
  }
  .login:focus {
    outline: none;
  }
  .fold {
    width: 46px;
    height: 65px;
  }
  .fold:hover {
    cursor: pointer;
    background-color: rgba(67, 146, 249, 0.1);
  }
}
</style>