个人信息和密码修改拆分为两个tab

src/config/website.js

@@ -48,5 +48,5 @@ export default {
   ssoUrl: 'http://localhost:8100/oauth/authorize?client_id=saber&response_type=code&redirect_uri=',
   // 单点登录回调地址(Saber服务的地址)
   redirectUri: 'http://localhost:1888',
-  filePrex: 'http://192.168.1.106:9000',//'http://www.qdscgs.com:9091',// 图片前缀
+  filePrex: 'http://www.qdscgs.com:9091',//'http://192.168.1.106:9000',// 图片前缀
 }

src/option/user/info.js

@@ -1,12 +1,96 @@
 import website from "../../config/website";
 import { Message } from 'element-ui';
-export default {
+// export default {
-  tabs: true,
+//   tabs: true,
-  tabsActive: 1,
+//   tabsActive: 1,
-  group: [
+//   group: [
-    {
+//     {
-      label: '个人信息',
+//       label: '个人信息',
-      prop: 'info',
+//       prop: 'info',
+//       column: [{
+//         label: '头像',
+//         prop: 'avatar',
+//         type: 'upload',
+//         listType: 'picture-img',
+//         propsHttp: {
+//           home: website.filePrex,
+//           res: 'data',
+//           url: 'link',
+//         },
+//         // canvasOption: {
+//         //   text: ' ',
+//         //   ratio: 0.1
+//         // },
+//         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,
+//         prop: 'avatar',
+//         tip: '只能上传jpg/png用户头像，且不超过500kb',
+//         action: '/api/blade-resource/oss/endpoint/put-file',
+//         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: 'name'
+//       }, {
+//         label: '手机号',
+//         span: 12,
+//         row: true,
+//         prop: 'phone'
+//       }, {
+//         label: '邮箱',
+//         prop: 'email',
+//         span: 12,
+//         row: true,
+//       }]
+//     },
+//     {
+//       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'
+//       }]
+//     }
+//   ],
+// }
+
+export const userInfoOption = {
   column: [{
     label: '头像',
     prop: 'avatar',
@@ -17,10 +101,6 @@ export default {
       res: 'data',
       url: 'link',
     },
-        // canvasOption: {
-        //   text: ' ',
-        //   ratio: 0.1
-        // },
     fileType: 'img',//img/video/audio,
     accept: 'image/png, image/jpeg',
     action: '/api/blade-resource/oss/endpoint/put-file',
@@ -63,29 +143,46 @@ export default {
     span: 12,
     row: true,
   }]
-    },
+}
-    {
+export const userPwdOption = {
-      label: '修改密码',
-      prop: 'password',
   column: [{
     label: '原密码',
     span: 12,
     row: true,
     type: 'password',
-        prop: 'oldPassword'
+    prop: 'oldPassword',
+    rules: [{
+      required: true,
+      message: "请输入原密码",
+      trigger: "blur"
+    }]
   }, {
     label: '新密码',
     span: 12,
     row: true,
     type: 'password',
-        prop: 'newPassword'
+    prop: 'newPassword',
+    rules: [{
+      required: true,
+      message: "请输入新密码",
+      trigger: "blur"
+    }]
   }, {
     label: '确认密码',
     span: 12,
     row: true,
     type: 'password',
-        prop: 'newPassword1'
+    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();
   }
+};

src/views/system/userinfo.vue

@@ -1,14 +1,19 @@
 <template>
   <div>
     <basic-container>
-      <avue-form :option="option" v-model="form" @tab-click="handleTabClick"
+      <avue-tabs :option="tabOption" @change="handleTabClick"></avue-tabs>
-        @submit="handleSubmit"></avue-form>
+      <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 { userInfoOption } from "@/option/user/info";
 import { getUserInfo, updateInfo, updatePassword } from "@/api/system/user";
 import md5 from 'js-md5';
 import func from "@/util/func";
@@ -16,10 +21,61 @@ import func from "@/util/func";
 
 export default {
   data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.pwdform.newPassword1) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
     return {
       index: 0,
-      option: option,
+      tabOption: {
-      form: {}
+        column: [{
+          label: '个人信息',
+          prop: '0',
+        }, {
+          label: '修改密码',
+          prop: '1',
+        },]
+      },
+      userInfoOption: userInfoOption,
+      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' }]
+        }]
+      },
+      form: {},
+      pwdform: {}
     };
   },
   created() {
@@ -27,7 +83,6 @@ export default {
   },
   methods: {
     handleSubmit(form, done) {
-      if (this.index === 0) {
       updateInfo(form).then(res => {
         if (res.data.success) {
           this.$message({
@@ -45,7 +100,8 @@ export default {
         window.console.log(error);
         done();
       })
-      } else {
+    },
+    handleSubmit2(form, done) {
       updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
         if (res.data.success) {
           this.$message({
@@ -63,7 +119,6 @@ export default {
         window.console.log(error);
         done();
       })
-      }
     },
     handleWitch() {
       if (this.index === 0) {
@@ -81,7 +136,10 @@ export default {
       }
     },
     handleTabClick(tabs) {
-      this.index = func.toInt(tabs.index);
+      if(tabs.prop != '1'){
+        this.$refs.pwdForm.resetForm();
+      }
+      this.index = func.toInt(tabs.prop);
       this.handleWitch();
     }
   }