From 8e539719238cc205f4e22e32cd2b63f4b39ad10e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=9F=B9=E5=8F=8B?= <17852335869@163.com>
Date: Mon, 6 Mar 2023 13:18:09 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E5=A4=B4=E5=83=8F=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/option/user/info.js       | 169 +++++++++++----------
 src/page/index/top/index.vue  |   5 +-
 src/store/modules/user.js     |   2 +
 src/views/system/userinfo.vue | 272 ++++++++++++++++++++++++----------
 4 files changed, 284 insertions(+), 164 deletions(-)

diff --git a/src/option/user/info.js b/src/option/user/info.js
index 65e8fd4..a7500e5 100644
--- a/src/option/user/info.js
+++ b/src/option/user/info.js
@@ -1,82 +1,89 @@
-export default {
-  tabs: true,
-  tabsActive: 1,
-  column: [{ label: "头像", prop: "avatar",display:false}],
-  group: [
-    {
-      label: "个人信息",
-      prop: "info",
-      column: [
-        {
-          label: "头像",
-          type: "upload",
-          listType: "picture-img",
-          propsHttp: {
-            res: "data",
-            url: "link",
-          },
-          canvasOption: {
-            text: " ",
-            ratio: 0.1,
-          },
-          action: "/api/blade-resource/oss/endpoint/put-file",
-          tip: "只能上传jpg/png用户头像，且不超过500kb",
-          span: 12,
-          row: true,
-          prop: "avatar",
-        },
-        {
-          label: "姓名",
-          span: 12,
-          row: true,
-          prop: "realName",
-        },
-        {
-          label: "用户名",
-          span: 12,
-          row: true,
-          prop: "name",
-        },
-        {
-          label: "手机号",
-          span: 12,
-          row: true,
-          prop: "phone",
-        },
-        {
-          label: "邮箱",
-          prop: "email",
-          span: 12,
-          row: true,
-        },
-      ],
+// import website from "../../config/website";
+import { Message } from 'element-ui';
+export const userInfoOption = {
+  column: [{
+    label: '头像',
+    prop: 'avatar',
+    type: 'upload',
+    listType: 'picture-img',
+    propsHttp: {
+      res: 'data',
+      url: 'link',
     },
-    {
-      label: "修改密码",
-      prop: "password",
-      column: [
-        {
-          label: "原密码",
-          span: 12,
-          row: true,
-          type: "password",
-          prop: "oldPassword",
-        },
-        {
-          label: "新密码",
-          span: 12,
-          row: true,
-          type: "password",
-          prop: "newPassword",
-        },
-        {
-          label: "确认密码",
-          span: 12,
-          row: true,
-          type: "password",
-          prop: "newPassword1",
-        },
-      ],
-    },
-  ],
-};
+    fileType: 'img',//img/video/audio,
+    accept: 'image/png, image/jpeg',
+    action: '/api/blade-resource/oss/endpoint/put-file',
+    tip: '只能上传jpg/png用户头像，且不超过500kb',
+    span: 12,
+    row: true,
+    uploadBefore: (file, done, loading) => {
+      if (['image/png', 'image/jpeg'].indexOf(file.type) == -1) {
+        Message({
+          message: '只能上传jpg/png用户头像',
+          type: 'error'
+        });
+        loading();
+      }
+      else {
+        done();
+      }
+    }
+  }, {
+    label: '用户名',
+    span: 12,
+    row: true,
+    prop: 'realName'
+  }, {
+    label: '手机号',
+    span: 12,
+    row: true,
+    prop: 'phone',
+  }, {
+    label: '邮箱',
+    prop: 'email',
+    span: 12,
+    row: true,
+  }]
+}
+export const userPwdOption = {
+  column: [{
+    label: '原密码',
+    span: 12,
+    row: true,
+    type: 'password',
+    prop: 'oldPassword',
+    rules: [{
+      required: true,
+      message: "请输入原密码",
+      trigger: "blur"
+    }]
+  }, {
+    label: '新密码',
+    span: 12,
+    row: true,
+    type: 'password',
+    prop: 'newPassword',
+    rules: [{
+      required: true,
+      message: "请输入新密码",
+      trigger: "blur"
+    }]
+  }, {
+    label: '确认密码',
+    span: 12,
+    row: true,
+    type: 'password',
+    prop: 'newPassword1',
+    rules: [{ validator: validatePass2, trigger: 'blur' }]
+  }]
+}
+
+const validatePass2 = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'));
+  } else if (value !== this.obj.password) {
+    callback(new Error('两次输入密码不一致!'));
+  } else {
+    callback();
+  }
+};
\ No newline at end of file
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 39441b4..816e3f6 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -14,7 +14,7 @@
         </div>
       </el-tooltip> -->
       <div class="avatar">
-        <img :src="userInfo.avatar" alt="" width="56px" height="56px" />
+        <img :src="userInfo.avatar" alt="" width="56px" height="56px" style="border-radius:50%;"/>
       </div>
       <!-- <div style="margin-right:10px;">
         {{userInfo.real_name}}
@@ -56,9 +56,6 @@ export default {
     topNotice,
   },
   created() {},
-  mounted() {
-    console.log(this.userInfo);
-  },
   computed: {
     ...mapGetters(["userInfo", "tag"]),
   },
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index f92f525..6be4d32 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -262,6 +262,8 @@ const user = {
       setStore({name: 'tenantId', content: state.tenantId})
     },
     SET_USER_INFO: (state, userInfo) => {
+      console.log(state)
+      console.log(userInfo)
       if (validatenull(userInfo.avatar)) {
         userInfo.avatar = "/img/bg/img-logo.png";
       }
diff --git a/src/views/system/userinfo.vue b/src/views/system/userinfo.vue
index 6c985b5..52c58a7 100644
--- a/src/views/system/userinfo.vue
+++ b/src/views/system/userinfo.vue
@@ -1,94 +1,208 @@
 <template>
   <div>
     <basic-container>
-      <avue-form :option="option"
-                 v-model="form"
-                 @tab-click="handleTabClick"
-                 @submit="handleSubmit"></avue-form>
+      <avue-tabs :option="tabOption" @change="handleTabClick"></avue-tabs>
+      <div v-if="index === 0">
+        <avue-form
+          :option="userInfoOption"
+          v-model="form"
+          @submit="handleSubmit"
+        ></avue-form>
+      </div>
+      <div v-else-if="index === 1">
+        <avue-form
+          ref="pwdForm"
+          :option="userPwdOption"
+          v-model="pwdform"
+          @submit="handleSubmit2"
+        >
+        </avue-form>
+      </div>
     </basic-container>
   </div>
 </template>
 
 <script>
-  import option from "@/option/user/info";
-  import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";
-  import md5 from 'js-md5';
-  import func from "@/util/func";
+import { userInfoOption } from "@/option/user/info";
+import { getUserInfo, updateInfo, updatePassword } from "@/api/system/user";
+import md5 from "js-md5";
+import func from "@/util/func";
+import {mapGetters} from "vuex";
 
-
-  export default {
-    data() {
-      return {
-        index: 0,
-        option: option,
-        form: {}
-      };
-    },
-    created() {
-      this.handleWitch();
+export default {
+  data() {
+    var validatePass = (rule, value, callback) => {
+      let reg =
+        /^(?=.*\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{6,18}$/;
+      if (value === "") {
+        callback(new Error("请输入新密码"));
+      } else if (!reg.test(value)) {
+        callback(
+          new Error("必须包含6-18位数字、大小写字母、特殊字符，不包含下划线")
+        );
+      } else {
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.pwdform.newPassword) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      index: 0,
+      tabOption: {
+        column: [
+          {
+            label: "个人信息",
+            prop: "0",
+          },
+          {
+            label: "修改密码",
+            prop: "1",
+          },
+        ],
+      },
+      userInfoOption: userInfoOption,
+      userPwdOption: {
+        column: [
+          {
+            label: "原密码",
+            span: 12,
+            row: true,
+            prop: "oldPassword",
+            name: "oldPassWord",
+            rules: [
+              {
+                required: true,
+                message: "请输入原密码",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "新密码",
+            span: 12,
+            row: true,
+            type: "password",
+            prop: "newPassword",
+            rules: [
+              {
+                required: true,
+                message: "请输入新密码",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "确认密码",
+            span: 12,
+            row: true,
+            type: "password",
+            prop: "newPassword1",
+            rules: [
+              {
+                required: true,
+                message: "请输入确认密码",
+                trigger: "blur",
+              },
+              { validator: validatePass2, trigger: "blur" },
+            ],
+          },
+        ],
+      },
+      form: {},
+      pwdform: {},
+    };
+  },
+  created() {
+    this.handleWitch();
+  },
+    computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  methods: {
+    handleSubmit(form, done) {
+      updateInfo(form).then(
+        (res) => {
+          if (res.data.success) {
+            this.$message({
+              type: "success",
+              message: "修改信息成功!",
+            });
+            this.handleWitch()
+          } else {
+            this.$message({
+              type: "error",
+              message: res.data.msg,
+            });
+          }
+          done();
+        },
+        (error) => {
+          window.console.log(error);
+          done();
+        }
+      );
     },
-    methods: {
-      handleSubmit(form, done) {
-        if (this.index === 0) {
-          updateInfo(form).then(res => {
-            if (res.data.success) {
-              this.$message({
-                type: "success",
-                message: "修改信息成功!"
-              });
-            } else {
-              this.$message({
-                type: "error",
-                message: res.data.msg
-              });
-            }
-            done();
-          }, error => {
-            window.console.log(error);
-            done();
-          })
-        } else {
-          updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
-            if (res.data.success) {
-              this.$message({
-                type: "success",
-                message: "修改密码成功!"
-              });
-            } else {
-              this.$message({
-                type: "error",
-                message: res.data.msg
-              });
-            }
-            done();
-          }, error => {
-            window.console.log(error);
-            done();
-          })
+    handleSubmit2(form, done) {
+      updatePassword(
+        md5(form.oldPassword),
+        md5(form.newPassword),
+        md5(form.newPassword1)
+      ).then(
+        (res) => {
+          if (res.data.success) {
+            this.$message({
+              type: "success",
+              message: "修改密码成功!",
+            });
+          } else {
+            this.$message({
+              type: "error",
+              message: res.data.msg,
+            });
+          }
+          done();
+        },
+        (error) => {
+          window.console.log(error);
+          done();
         }
-      },
-      handleWitch() {
-        if (this.index === 0) {
-          getUserInfo().then(res => {
-            const user = res.data.data;
-            this.form = {
-              id: user.id,
-              avatar: user.avatar,
-              name: user.name,
-              realName: user.realName,
-              phone: user.phone,
-              email: user.email,
-            }
+      );
+    },
+    handleWitch() {
+      if (this.index === 0) {
+        getUserInfo().then((res) => {
+          const user = res.data.data;
+          this.form = {
+            id: user.id,
+            avatar: user.avatar,
+            name: user.name,
+            realName: user.realName,
+            phone: user.phone,
+            email: user.email,
+          };
+          this.$store.commit("SET_USER_INFO", {
+           avatar: user.avatar,
+           real_name: user.realName,
           });
-        }
-      },
-      handleTabClick(tabs) {
-        this.index = func.toInt(tabs.index);
-        this.handleWitch();
+        });
       }
-    }
-  };
+    },
+    handleTabClick(tabs) {
+      if (tabs.prop != "1") {
+        this.$refs.pwdForm.resetForm();
+      }
+      this.index = func.toInt(tabs.prop);
+      this.handleWitch();
+    },
+  },
+};
 </script>
 
-<style>
-</style>
+<style></style>