马宇豪
2024-01-26 c694cffc8541d921e5256d33e14e3237454de950
src/layout/navBars/breadcrumb/user.vue
@@ -66,6 +66,7 @@
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/newMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                        <el-dropdown-item @click="showPwdDialog = true">修改密码</el-dropdown-item>
                        <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
                        <!--               <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
@@ -74,6 +75,26 @@
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
          <el-dialog title="修改密码" v-model="showPwdDialog" width="500px">
            <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password>
                  </el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="rePassword">
                  <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPwdDialog = !showPwdDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onPwdSubmit" size="default">确 定</el-button>
                </span>
            </template>
          </el-dialog>
            <Search ref="searchRef" />
        </div>
    </div>
@@ -102,6 +123,8 @@
import { dynamicRoutes } from '/@/router/route';
import Cookies from 'js-cookie';
import {useRoutesList} from "/@/stores/routesList";
import {verifyPwd} from "/@/utils/toolsValidate";
import {userApi} from "/@/api/systemManage/user";
export default defineComponent({
    name: 'layoutBreadcrumbUser',
@@ -116,11 +139,42 @@
        const { userInfos } = storeToRefs(stores);
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const searchRef = ref();
      const pwdRef = ref();
      const validatePwd = (rule: any, value: any, callback: any)=>{
        if(value === ''){
          callback(new Error('请输入密码'))
        }else{
          if(!verifyPwd(value)){
            callback(new Error('密码须包含字母、数字、特殊字符,长度在6-16之间'))
          }else{
            callback()
          }
        }
      }
      const equalToPassword = (rule: any, value: any, callback: any) => {
        if(value == ''){
          callback(new Error("请再次确认密码"))
        }else if (state.pwdForm.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"))
        } else {
          callback();
        }
      };
        const state = reactive({
            isScreenfull: false,
            disabledI18n: 'zh-cn',
            disabledSize: 'large',
            systemName: ''
            systemName: '',
          showPwdDialog: false,
          pwdForm: {
            uid: Cookies.get('uid'),
            newPassword: '',
            rePassword: ''
          },
          pwdFormRules: {
            newPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
            rePassword: [{ required: true, validator: equalToPassword, trigger: "blur" }]
          }
        });
        // 设置分割样式
        const layoutUserFlexNum = computed(() => {
@@ -131,6 +185,42 @@
            else num = '';
            return num;
        });
      const onPwdSubmit = async () => {
        pwdRef.value.validate(async (valid:Boolean) => {
          if(valid){
            const {rePassword,...data} = state.pwdForm
            let res = await userApi().pwdModSelf(data);
            if (res.data.code === '200') {
              state.showPwdDialog = false
              ElMessage({
                type: 'success',
                message: '密码修改成功,请重新登录',
                duration: 2000
              })
              setTimeout(()=>{
                useLoginApi()
                    .signOut()
                    .then(() => {
                      Session.clear()
                      window.location.href = '/'
                    })
              },2000)
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }else{
            ElMessage({
              type:'warning',
              message:'请完善信息'
            })
          }
        })
      }
        // 全屏点击时
        const onScreenfullClick = () => {
            if (!screenfull.isEnabled) {
@@ -281,6 +371,8 @@
        });
        return {
            userInfos,
          pwdRef,
          onPwdSubmit,
            backToMenu,
            onLayoutSetingClick,
            onHandleCommandClick,