124

src/layout/components/UpdatePwdDialog.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-dialog title="修改密码" width="500px" :model-value="modelValue" @close="closed">
+    <el-form :model="params" class="editPassword-page">
+      <el-form-item label="老密码">
+        <el-input placeholder="请输入老密码" v-model="params.oldPassword"></el-input>
+      </el-form-item>
+      <el-form-item label="新密码">
+        <el-input placeholder="请输入新密码" show-password v-model="params.password"></el-input>
+      </el-form-item>
+      <el-form-item label="密码强度：">
+        <div class="input_span">
+          <span id="one" />
+          <span id="two" />
+          <span id="three" />
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="updatePwd">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useStore } from "vuex";
+import { ElMessage } from "element-plus";
+import { editPassword } from "@/api/sys";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import {
+  saveRoleMenuInfo,
+  getRoleMenuIds,
+  getMenuTree,
+  getPasswordLevel
+} from "@/api/user-manage";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+});
+const store = useStore();
+const params = ref({});
+
+const emits = defineEmits(["update:modelValue", "updateRole"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+const onComfirm = () => {
+  saveRoleMenuInfo(params).then((res) => {
+    ElMessage.success("操作成功");
+  });
+  closed();
+};
+const updatePwd = () => {
+  if (Number(sysLevel.value) > Number(currentLevel.value)) {
+    ElMessage.error("当前密码等级不够,请增加复杂度");
+    return false;
+  }
+  if (params.value.password.length > 20) {
+    ElMessage.error("密码长度不能超过20位!");
+    return false;
+  }
+  editPassword({
+    ...params.value
+  }).then((res) => {
+    ElMessage.success("修改成功");
+    closed();
+    store.dispatch("user/logout");
+  });
+};
+let currentLevel = ref(0);
+const checkStrong = (sValue) => {
+  let level = 0;
+  // 正则表达式验证符合要求的
+  if (sValue.length >= 6) {
+    level++;
+  }
+  if (/\d/.test(sValue) && /[a-z]/.test(sValue) && /[A-Z]/.test(sValue)) {
+    level++;
+  } // 数字 字母小写,大写
+  // if (/[a-z]/.test(sValue)) { modes++; } // 小写
+  // if (/[A-Z]/.test(sValue)) { modes++; } // 大写
+  if (/\W/.test(sValue)) {
+    level++;
+  } // 特殊字符
+  currentLevel.value = level;
+  return level;
+};
+
+const sysLevel = ref(0);
+const getPwdLevel = () => {
+  getPasswordLevel().then((res) => {
+    sysLevel.value = res;
+  });
+};
+getPwdLevel();
+
+watch(
+  () => params.value.password,
+  (newname, oldname) => {
+    const msgText = checkStrong(newname);
+    if (msgText > 1 || msgText === 1) {
+      document.getElementById("one").style.background = "#00D1B2";
+    } else {
+      document.getElementById("one").style.background = "#eee";
+    }
+    if (msgText > 2 || msgText === 2) {
+      document.getElementById("two").style.background = "orange";
+    } else {
+      document.getElementById("two").style.background = "#eee";
+    }
+    if (msgText === 3) {
+      document.getElementById("three").style.background = "red";
+    } else {
+      document.getElementById("three").style.background = "#eee";
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.editPassword-page {
+  .table-header-wrap {
+    width: 380px;
+  }
+
+  .input_span {
+    span {
+      display: inline-block;
+      width: 50px;
+      height: 10px;
+      border: 1px solid #ccc;
+
+      &:first-child {
+        border-right: 0;
+        border-radius: 5px 0 0 5px;
+      }
+
+      &:last-child {
+        border-left: 0;
+        border-radius: 0 5px 5px 0;
+      }
+    }
+  }
+}
+</style>