修改导出内容

马宇豪

2024-12-09 84748363b911c35b9b3a66159cfeeeefd13cc917

 src/layout/components/Navbar.vue

@@ -1,6 +1,7 @@
<template>
  <div class="navbar">
    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
               @toggleClick="toggleSideBar"/>
    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />

@@ -26,7 +27,9 @@
        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="avator" class="user-avatar" />
            <el-icon><caret-bottom /></el-icon>
            <el-icon>
              <caret-bottom/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
@@ -36,6 +39,9 @@
<!--              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">-->
<!--                <span>布局设置</span>-->
<!--              </el-dropdown-item>-->
              <el-dropdown-item command="password">
                <span>修改密码</span>
              </el-dropdown-item>
              <el-dropdown-item command="logout">
                <span>退出登录</span>
              </el-dropdown-item>
@@ -43,6 +49,33 @@
          </template>
        </el-dropdown>
      </div>
      <el-dialog
          v-model="pwdDialog"
          title="修改密码"
          width="550px"
          :before-close="handleClose"
      >
        <el-form :model="form" size="default" ref="pwdRef" :rules="formRules" label-width="110px">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model.trim="form.oldPassword" type="password" show-password
                      placeholder="请输入原密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model.trim="form.newPassword" type="password" show-password
                      placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="重复密码" prop="confirmPassword">
            <el-input v-model.trim="form.confirmPassword" type="password" show-password
                      placeholder="请再次输入新密码"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
              <el-button @click="handleClose" size="default">取 消</el-button>
              <el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
@@ -52,6 +85,8 @@
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import {reactive, ref} from 'vue'
import {ElMessage} from "element-plus";
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
@@ -61,11 +96,72 @@
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import avator from '@/assets/images/avator.png'
import {updateUserPwd} from "@/api/system/user";

let validatePwd = (rule, value, callback) => {
  const regex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (!regex.test(value)) {
      callback(new Error('密码须包含字母、数字，长度不少于8字符'))
    } else {
      callback()
    }
  }
}

const equalToPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次确认新密码'))
  } else if (form.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
};

const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

const pwdDialog = ref(false)
const pwdRef = ref()

const form = reactive({
  newPassword: '',
  oldPassword: '',
  confirmPassword: ''
})

const formRules = reactive({
  oldPassword: [{required: true, validator: validatePwd, trigger: 'blur'}],
  newPassword: [{required: true, validator: validatePwd, trigger: 'blur'}],
  confirmPassword: [{required: true, validator: equalToPassword, trigger: 'blur'}]
})

const onSubmit = async()=>{
  const valid = await pwdRef.value.validate();
  if(valid){
    const res = await updateUserPwd(form.oldPassword,form.newPassword)
    if(res.code == 200){
      ElMessage.success('修改密码成功，请重新登录')
      pwdDialog.value = false
      logout()
    }else{
      ElMessage.warning(res.msg)
    }
  }
}

const handleClose = ()=>{
  form.value = {
    newPassword: '',
    oldPassword: '',
    confirmPassword: ''
  }
  pwdDialog.value = false
}

function toggleSideBar() {
  appStore.toggleSideBar()
@@ -78,6 +174,9 @@
      break;
    case "logout":
      logout();
      break;
    case "password":
      editPsd();
      break;
    default:
      break;
@@ -93,10 +192,16 @@
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(() => { });
  }).catch(() => {
  });
}

function editPsd() {
  pwdDialog.value = true
}

const emits = defineEmits(['setLayout'])

function setLayout() {
  emits('setLayout');
}