修改密码

zhouwenxuan

2024-01-04 a10c7076f59177b04861b3a27eb618ef9a9c4d06

修改密码

 src/api/systemManage/user/index.ts

@@ -17,6 +17,13 @@
                data: data
            });
        },
        updatePwd: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/user/update/password`,
                method: 'post',
                data: data
            });
        },

        getExpertsList: (data: any) => {
            return request({

 src/components/updatePwd/index.vue

对比新文件
@@ -0,0 +1,186 @@
<template>
  <div class="system-add-gas-container">
    <el-dialog
        title="修改密码"
        v-model="state.isShowUserDialog"
        width="600px"
    >
      <el-form :model="state.infoForm" size="default" ref="pwdRef"  label-width="120px" :rules="state.rules" style="padding: 10px 20px ">
        <el-form-item label="原密码：" prop="oldPwd" v-if="showOld">
          <el-input
              v-model="state.infoForm.oldPwd"
              type="password"
              size="large"
              placeholder="请输入原密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="新密码：" prop="newPwd">
          <el-input
              v-model="state.infoForm.newPwd"
              type="password"
              size="large"
              placeholder="请输入新密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="重复新密码：" prop="reNewPwd">
          <el-input
              v-model="state.infoForm.reNewPwd"
              type="password"
              size="large"
              placeholder="请再次输入新密码"
              show-password
          />
        </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">确 定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import { userApi } from "/@/api/systemManage/user";
import {ElMessage} from "element-plus";
import Cookies from "js-cookie";
import {ElMessageBox} from "element-plus/es";
import {useLoginApi} from "/@/api/login";
import {Session} from "/@/utils/storage";
import {useI18n} from "vue-i18n";


const validatePwd2 = (rule:any, value:any, callback:any)=>{
  if(value === ''){
    callback(new Error('请再次输入密码'))
  }else if(value !== state.infoForm.newPwd){
    callback(new Error('两次输入密码不同'))
  }else{
    callback()
  }
}
const verifyPwd =(val:any) => {
  // false: 强密码不正确
  if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.\-/!@#$%^&*()_+])[A-Za-z\d.\-/!@#$%^&*()_+]{8,}$/.test(val)) return false;
  // true: 强密码正确
  else return true;
}

let validatePwd = (rule:any, value:any, callback:any)=>{
  if(value === ''){
    callback(new Error('请输入密码'))
  }else{
    if(!verifyPwd(value)){
      callback(new Error('密码须包含大小写字母、数字、特殊字符，长度不少于8位'))
    }else{
      callback()
    }
  }
}


const pwdRef = ref();
const emit = defineEmits(["getInfoData"]);
const state = reactive({
  title: '',
  isShowUserDialog: false,
  disabled: false,
  infoForm: {
    uid: '',
    oldPwd: '',
    newPwd: '',
    reNewPwd: ''
  },
  rules: {
    oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur'}],
    newPwd: [{ required: true, validator: validatePwd, trigger: 'blur'}],
    reNewPwd: [{ required: true, validator: validatePwd2, trigger: 'blur'}]
  }
});

const showOld = ref(false);
const openDialog = (type: string,value: any) => {
  if(type == 'all'){
    state.infoForm.uid = Cookies.get('uid');
    showOld.value = true;
  }else {
    state.infoForm.uid = value;
    showOld.value = false;
  }
  state.isShowUserDialog = true;
};

const { t } = useI18n();
const onSubmit = async () => {
  const valid = await pwdRef.value.validate();
  if(valid) {
    let {reNewPwd, ...data} = state.infoForm
    const res = await userApi().updatePwd(data);
    if(res.data.code == 100) {
      ElMessageBox({
        closeOnClickModal: false,
        closeOnPressEscape: false,
        title: t('message.user.logOutTitle'),
        message: t('密码修改成功，请重新登陆！'),
        showCancelButton: true,
        confirmButtonText: t('message.user.logOutConfirm'),
        cancelButtonText: t('message.user.logOutCancel'),
        buttonSize: 'default',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = t('message.user.logOutExit');
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 700);
          } else {
            done();
          }
        }
      })
          .then(async () => {

            let res = await useLoginApi().signOut();
            if (res.data.code === 100) {
              Session.clear(); // 清除缓存/token等
              // 使用 reload 时，不需要调用 resetRoute() 重置路由
              window.location.reload();
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          })
          .catch(() => {});
      handleClose();
    }else {
      ElMessage({
        type: 'warning',
        message: res.data.msg
      });
    }
  }
}
const handleClose = () => {
  state.infoForm = {
    uid: '',
    oldPwd: '',
    newPwd: '',
    reNewPwd: ''
  };
  state.isShowUserDialog = false;
  pwdRef.value.clearValidate();
}
defineExpose({
  openDialog
});
</script>

 src/layout/navBars/breadcrumb/user.vue

@@ -65,6 +65,7 @@
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/bigScreen">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                        <el-dropdown-item command="password">修改密码</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,8 +75,11 @@
                </template>
            </el-dropdown>
            <Search ref="searchRef" />
            <updatePwd ref="pwdRef" />
        </div>

    </div>

</template>

<script lang="ts">
@@ -93,7 +97,7 @@
import Search from '/@/layout/navBars/breadcrumb/search.vue';
import { useLoginApi } from '/@/api/login';
import { useMenuApi } from '/@/api/systemManage/menu/index';

import updatePwd from '/@/components/updatePwd/index.vue'
const menuApi = useMenuApi();
import { backEndComponent, getBackEndControlRoutes, initBackEndControlRoutes, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '../../../router/backEnd';
import { NextLoading } from '/@/utils/loading';
@@ -104,7 +108,7 @@

export default defineComponent({
    name: 'layoutBreadcrumbUser',
    components: { UserNews, Search },
    components: { UserNews, Search, updatePwd },
    setup() {
        const { t } = useI18n();
        const { proxy } = <any>getCurrentInstance();
@@ -114,6 +118,7 @@
        const storesThemeConfig = useThemeConfig();
        const { userInfos } = storeToRefs(stores);
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const pwdRef = ref();
        const searchRef = ref();
        const state = reactive({
            isScreenfull: false,
@@ -188,6 +193,8 @@
                    .catch(() => {});
            } else if (path === 'wareHouse') {
                window.open('https://gitee.com/lyt-top/vue-next-admin');
            } else if (path === 'password') {
              pwdRef.value.openDialog('all');
            } else {
                router.push(path);
            }
@@ -268,6 +275,7 @@
            onComponentSizeChange,
            onLanguageChange,
            searchRef,
            pwdRef,
            layoutUserFlexNum,
            ...toRefs(state)
        };

 src/views/bigScreen/components/screen.vue

@@ -1842,7 +1842,7 @@
      width: 350px;
      right: 20px;
      top: 20px;
      z-index: 99999;
      z-index: 2000;

      .el-select{
        width: 60%;

 src/views/loginPage/component/accountLogin.vue

@@ -205,6 +205,7 @@
                await userInfo.setUserInfos(res.data.data);
                Cookies.set('token', res.data.data.tk);
                Cookies.set('uid', res.data.data.uid);
                Cookies.set('roles', JSON.stringify(res.data.data.roles));
                if (state.saveCode) {
                    localStorage.setItem('userCode', state.ruleForm.name)
                    localStorage.setItem('userPassword', Base64.encode(state.ruleForm.pwd),)

 src/views/system/user/index.vue

@@ -37,10 +37,11 @@
                  </template>
                </el-table-column>
                <el-table-column prop="idSerial" label="证件号码"></el-table-column>
                <el-table-column label="操作" width="100">
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改', scope.row)">修改</el-button>
                        <el-button style="color: red" :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                        <el-button  v-if="isAdmin" size="small" text type="primary" @click="updatePwd(scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
@@ -50,6 +51,7 @@
            <br />
        </el-card>
        <userDialog ref="userRef" @getUserList="initUserTableData"/>
        <update-pwd ref="pwdRef"></update-pwd>
    </div>
</template>

@@ -60,6 +62,8 @@
import { userApi } from '/@/api/systemManage/user';
import { departmentApi } from '/@/api/systemManage/department';
import { useRoleApi } from '/@/api/systemManage/role';
import updatePwd from '/@/components/updatePwd/index.vue'
import Cookies from 'js-cookie';

// 定义接口来定义对象的类型
interface TableDataRow {
@@ -105,9 +109,11 @@

export default defineComponent({
    name: 'systemUser',
    components: { userDialog },
    components: { userDialog, updatePwd },
    setup() {
        const userRef = ref();
        const pwdRef = ref();
        const isAdmin = ref(false);
        const state = reactive<TableDataState>({
            userTableData: {
                data: [],
@@ -248,6 +254,7 @@
            state.userTableData.listQuery.pageIndex = val;
            initUserTableData();
        };
        let roles = [];
        // 页面加载时
        onMounted(() => {
            initUserTableData();
@@ -255,16 +262,28 @@
            getRoleData();
            // getExpertsData();
            getDepList()
            roles = JSON.parse(Cookies.get('roles'))
            roles.forEach((item:any) => {
              if(item.roleId && item.roleName == '超级管理员'){
                isAdmin.value = true
              }
            })
        });
      const updatePwd = (val: any) => {
        pwdRef.value.openDialog('',val.id);
      }
        return {
            userRef,
            reset,
            onOpenUserDialog,
            onRowDel,
            pwdRef,
            onHandleSizeChange,
            initUserTableData,
            searchByName,
            updatePwd,
            onHandleCurrentChange,
            isAdmin,
            ...toRefs(state)
        };
    }