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

main
xuechunyuan 3 years ago
parent 511da8302d
commit bc76ae576f
  1. BIN
      dist.zip
  2. 2
      src/config/website.js
  3. 269
      src/option/user/info.js
  4. 144
      src/views/system/userinfo.vue

Binary file not shown.

@ -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',// 图片前缀
}

@ -1,91 +1,188 @@
import website from "../../config/website";
import { Message } from 'element-ui';
export default {
tabs: true,
tabsActive: 1,
group: [
{
label: '个人信息',
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,
}]
// export default {
// tabs: true,
// tabsActive: 1,
// group: [
// {
// label: '个人信息',
// 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',
type: 'upload',
listType: 'picture-img',
propsHttp: {
home: website.filePrex,
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,
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,
}]
}
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();
}
};

@ -1,14 +1,19 @@
<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 { 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,
form: {}
tabOption: {
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,43 +83,42 @@ export default {
},
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();
})
}
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();
})
},
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) {
@ -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();
}
}

Loading…
Cancel
Save