From ad7817d21b47532212e2efbc0689baead32680fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E9=A3=9E=E6=89=AC?= <15678871232@qq.com>
Date: Wed, 15 Jun 2022 02:01:14 +0000
Subject: [PATCH] =?UTF-8?q?=E5=AF=86=E7=A0=81=E8=A7=84=E5=88=99=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85,ts=20=E6=94=B9js,=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?i18n=EF=BC=8C=E9=9B=86=E6=88=90=E5=88=B0=E8=8B=A5=E4=BE=9D?=
 =?UTF-8?q?=E3=80=82=20https://blog.csdn.net/qq=5F36647038/article/details?=
 =?UTF-8?q?/119142295?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Password/CheckList.vue     | 127 ++++++++++++++++++
 ruoyi-ui/src/components/Password/index.js     |   6 +
 ruoyi-ui/src/components/Password/index.vue    |  91 +++++++++++++
 ruoyi-ui/src/components/Password/utils.js     |  63 +++++++++
 ruoyi-ui/src/views/system/user/index.vue      |  51 +++++--
 .../views/system/user/profile/resetPwd.vue    |  29 +++-
 6 files changed, 354 insertions(+), 13 deletions(-)
 create mode 100644 ruoyi-ui/src/components/Password/CheckList.vue
 create mode 100644 ruoyi-ui/src/components/Password/index.js
 create mode 100644 ruoyi-ui/src/components/Password/index.vue
 create mode 100644 ruoyi-ui/src/components/Password/utils.js

diff --git a/ruoyi-ui/src/components/Password/CheckList.vue b/ruoyi-ui/src/components/Password/CheckList.vue
new file mode 100644
index 00000000..07545878
--- /dev/null
+++ b/ruoyi-ui/src/components/Password/CheckList.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="check-list" :key="pagek">
+    <div class="check-list__title">{{ title }}</div>
+    <div v-for="{ key, label } in options" :key="key">
+      <div class="check-list-item">
+        <span class="check-list-item__prefix">
+          <i
+            v-if="isEqual(key, 'success')"
+            class="iconfont el-icon-success"
+          ></i>
+          <i
+            v-else-if="isEqual(key, 'error')"
+            class="iconfont el-icon-error"
+          ></i>
+          <i
+            v-else-if="isEqual(key, 'warning')"
+            class="iconfont el-icon-warning"
+          ></i>
+          <i v-else-if="isEqual(key, 'info')" class="el-icon-info"></i>
+          <i v-else class="iconfont el-icon-pending"></i>
+        </span>
+        <div class="check-list-label">{{ label }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CheckList',
+  props: {
+    pagek: {
+      default: new Date().getTime()
+    },
+    values: {
+      type: Object,
+      default: () => ({})
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  mounted() {
+  },
+  data: ()=>{
+    return{
+      status : ["pending", "success", "error", "warning", "info"],
+    }
+  },
+  methods: {
+    defaultStatus() {
+      return this.options.reduce(
+        (res, {key}) => Object.assign(res, {[key]: this.status[0]}),
+        {}
+      );
+    },
+    statusMap() {
+      return Object.assign({}, this.defaultStatus(), this.values);
+    },
+    isEqual(key, statusCode){
+      return this.statusMap()[key] == statusCode;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 胶囊状态颜色
+.el-icon-success {
+  color: #40b828;
+}
+
+.el-icon-error {
+  color: #f0553a;
+}
+
+.el-icon-warning {
+  color: #fc971c;
+}
+
+.el-icon-info {
+  color: #878e99;
+}
+
+.el-icon-pending {
+  &::before {
+    content: "";
+    display: inline-flex;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(#000, 0.15);
+    border-radius: 50%;
+    // vertical-align: baseline;
+    // margin-bottom: -2px;
+  }
+}
+
+.check-list {
+  font-size: 13px;
+}
+
+.check-list__title {
+  line-height: 20px;
+  color: #fc971c;
+  margin-bottom: 12px;
+}
+
+.check-list-item {
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+
+.check-list-item__prefix {
+  float: left;
+  font-size: 16px;
+}
+
+.check-list-label {
+  margin-left: 16px + 12px;
+}
+</style>
+
diff --git a/ruoyi-ui/src/components/Password/index.js b/ruoyi-ui/src/components/Password/index.js
new file mode 100644
index 00000000..b9cd50c6
--- /dev/null
+++ b/ruoyi-ui/src/components/Password/index.js
@@ -0,0 +1,6 @@
+import Password from "./index.vue";
+import {usePassword} from "./utils";
+
+export {usePassword};
+
+export default Password;
diff --git a/ruoyi-ui/src/components/Password/index.vue b/ruoyi-ui/src/components/Password/index.vue
new file mode 100644
index 00000000..aea3c34d
--- /dev/null
+++ b/ruoyi-ui/src/components/Password/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-popover popper-class="gt-password-popper" v-bind="popoverOptions">
+    <template slot="reference">
+      <el-input
+        class="gt-password"
+        v-bind="$attrs"
+        v-on="$listeners"
+        type="password"
+        show-password
+      >
+      </el-input>
+    </template>
+    <CheckList
+      :pagek="pagek"
+      :values="checkValuesObj"
+      title="密码必须包括"
+      :options="checkList"
+    />
+  </el-popover>
+</template>
+
+
+<script>
+import CheckList from "./CheckList.vue";
+
+const popDefault = {
+  placement: "right-start",
+  width: 228,
+  trigger: "focus"
+};
+
+export default {
+  name: 'Password',
+  components: {CheckList},
+  props: {
+    checkList: {
+      type: Array,
+      required: true
+    },
+    popover: {
+      type: Array,
+      required: false
+    },
+  },
+  data: () => {
+    return {
+      pagek: new Date().getTime(),
+      popoverOptions: {},
+      checkValuesObj: {},
+      passwordType: true
+    }
+  },
+  mounted() {
+    this.popoverOptions = {...this.popover, ...popDefault};
+    this.update(this.checkList);
+  },
+  methods: {
+    update(validList, clear = false) {
+      // 每次update 前先清空 checkValuesObj
+      Object.keys(this.checkValuesObj).forEach(v => {
+        this.checkValuesObj[v] = "";
+      });
+
+      let tempObj = {};
+      this.$nextTick(() => {
+        this.pagek = new Date().getTime();
+        tempObj =
+          validList.length > 0 &&
+          validList.reduce(
+            (res = {}, key = "1") => Object.assign(res, {[key]: "success"}),
+            {}
+          );
+
+        if (tempObj) {
+          Object.keys(tempObj).forEach(v => {
+            this.checkValuesObj[v] = tempObj[v];
+          });
+        }
+        if (clear) {
+          Object.keys(this.checkValuesObj).forEach(v => {
+            this.checkValuesObj[v] = "";
+          });
+        }
+      });
+    }
+  }
+}
+
+
+</script>
+
diff --git a/ruoyi-ui/src/components/Password/utils.js b/ruoyi-ui/src/components/Password/utils.js
new file mode 100644
index 00000000..102f2590
--- /dev/null
+++ b/ruoyi-ui/src/components/Password/utils.js
@@ -0,0 +1,63 @@
+export const usePassword = (options) => {
+  const defaultRules = [
+    {
+      key: "length",
+      label: "长度在6到20个字符",
+      regExp: /^.{10,20}$/
+    },
+    {
+      key: "lowercase",
+      label: "使用小写字母",
+      regExp: /[a-z]+/
+    },
+    {
+      key: "capital",
+      label: "用大写字母",
+      regExp: /[A-Z]+/
+    },
+    {
+      key: "number",
+      label: "使用数字",
+      regExp: /\d{1,}/
+    }
+  ];
+  const ruleItems = options
+    ? options.reduce((res, item) => {
+      if (typeof item === "string") {
+        const rule = defaultRules.find(i => item === i.key);
+        if (rule) {
+          res.push(rule);
+        } else {
+          throw new Error("无效的规则");
+        }
+      } else {
+        res.push(item);
+      }
+      return res;
+    }, [])
+    : [...defaultRules];
+  // 返回默认的匹配规则map 和 校验结果mapList
+  return {
+    checkList: ruleItems.map(({key, label}) => ({key, label})),
+    validate: (value) => {
+      // 过滤出符合正则的rule[], map返回key[]
+      const validList = ruleItems
+        .filter(({regExp, validator}) => {
+          if (validator) {
+            return validator(value);
+          } else if (regExp) {
+            return regExp.test(value);
+          } else {
+            return false;
+          }
+        })
+        .map(({key}) => {
+          return key;
+        });
+      return {
+        validList,
+        valid: validList.length === ruleItems.length
+      };
+    }
+  };
+};
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index fc8e3850..de6b9c70 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/ruoyi-ui/src/views/system/user/index.vue
@@ -238,7 +238,13 @@
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
+              <Password
+                ref="passwordRef"
+                v-model="form.password"
+                :check-list="checkList"
+                placeholder="请输入用户密码"
+              >
+              </Password>
             </el-form-item>
           </el-col>
         </el-row>
@@ -342,16 +348,18 @@
 </template>
 
 <script>
+import Password,{ usePassword} from '@/components/Password'
 import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
 import { getToken } from "@/utils/auth";
 import { treeselect } from "@/api/system/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+let passwordE = null;// password 组件元素相关校验逻辑
 
 export default {
   name: "User",
   dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect },
+  components: { Treeselect, Password },
   data() {
     return {
       // 遮罩层
@@ -384,6 +392,7 @@ export default {
       postOptions: [],
       // 角色选项
       roleOptions: [],
+      checkList: [],
       // 表单参数
       form: {},
       defaultProps: {
@@ -435,7 +444,17 @@ export default {
         ],
         password: [
           { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
+          { type: String, validator: (rule, value, callback)=>{
+              let { validList = [], valid } = passwordE.validate(value)
+              this.$refs.passwordRef.update(validList)
+              // 几条规则是否都以校验完成，否则会有无效密码提示
+              if (!valid) {
+                callback(new Error("无效密码"));
+              } else {
+                callback();
+              }
+            }, trigger: ["change", "blur"]
+          }
         ],
         email: [
           {
@@ -461,6 +480,8 @@ export default {
     }
   },
   created() {
+    passwordE = usePassword();
+    this.checkList = passwordE.checkList;
     this.getList();
     this.getTreeselect();
     this.getConfigKey("sys.user.initPassword").then(response => {
@@ -588,17 +609,21 @@ export default {
     },
     /** 重置密码按钮操作 */
     handleResetPwd(row) {
+      let rulesMsg = passwordE.checkList.map(item=> item.label);
       this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
+        inputValidator: (value) => {
+          let { validList = [], valid } = passwordE.validate(value)
+          return valid;
+        },
+        inputErrorMessage: "用户密码" + rulesMsg
       }).then(({ value }) => {
-          resetUserPwd(row.userId, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value);
-          });
-        }).catch(() => {});
+        resetUserPwd(row.userId, value).then(response => {
+          this.$modal.msgSuccess("修改成功，新密码是：" + value);
+        });
+      }).catch(() => {});
     },
     /** 分配角色操作 */
     handleAuthRole: function(row) {
@@ -669,4 +694,10 @@ export default {
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
+<style rel="stylesheet/scss" lang="scss">
+/*禁止浏览器显示密码框选择*/
+input[type="password" i] {
+  -webkit-text-security: disc !important;
+}
+</style>
diff --git a/ruoyi-ui/src/views/system/user/profile/resetPwd.vue b/ruoyi-ui/src/views/system/user/profile/resetPwd.vue
index 06715e5c..70c76af9 100644
--- a/ruoyi-ui/src/views/system/user/profile/resetPwd.vue
+++ b/ruoyi-ui/src/views/system/user/profile/resetPwd.vue
@@ -4,7 +4,13 @@
       <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
     </el-form-item>
     <el-form-item label="新密码" prop="newPassword">
-      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
+      <Password
+        ref="passwordRef"
+        v-model="user.newPassword"
+        :check-list="checkList"
+        placeholder="请输入新密码"
+      >
+      </Password>
     </el-form-item>
     <el-form-item label="确认密码" prop="confirmPassword">
       <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password/>
@@ -18,8 +24,14 @@
 
 <script>
 import { updateUserPwd } from "@/api/system/user";
-
+import Password,{ usePassword} from '@/components/Password'
+let passwordE = null;// password 组件元素相关校验逻辑
 export default {
+  components: { Password },
+  created() {
+    passwordE = usePassword();
+    this.checkList = passwordE.checkList;
+  },
   data() {
     const equalToPassword = (rule, value, callback) => {
       if (this.user.newPassword !== value) {
@@ -29,6 +41,7 @@ export default {
       }
     };
     return {
+      checkList: [],
       user: {
         oldPassword: undefined,
         newPassword: undefined,
@@ -41,7 +54,17 @@ export default {
         ],
         newPassword: [
           { required: true, message: "新密码不能为空", trigger: "blur" },
-          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
+          { type: String, validator: (rule, value, callback)=>{
+              let { validList = [], valid } = passwordE.validate(value)
+              this.$refs.passwordRef.update(validList)
+              // 几条规则是否都以校验完成，否则会有无效密码提示
+              if (!valid) {
+                callback(new Error("无效密码"));
+              } else {
+                callback();
+              }
+            }, trigger: ["change", "blur"]
+          }
         ],
         confirmPassword: [
           { required: true, message: "确认密码不能为空", trigger: "blur" },