|
@@ -15,7 +15,7 @@
|
|
|
<div class="right-title">欢迎您,{{ username }}</div>
|
|
|
<el-dropdown class="avatar-container" trigger="click">
|
|
|
<div class="avatar-wrapper">
|
|
|
- <img :src="favicon" class="user-avatar" />
|
|
|
+ <img :src="favicon" class="user-avatar">
|
|
|
<!-- <img :src="avatar" class="user-avatar"> -->
|
|
|
<i class="el-icon-caret-bottom" />
|
|
|
</div>
|
|
@@ -40,40 +40,40 @@
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
|
<el-form
|
|
|
+ ref="user_form"
|
|
|
:model="user_form"
|
|
|
:rules="rules"
|
|
|
- ref="user_form"
|
|
|
label-width="120px"
|
|
|
label-position="left"
|
|
|
>
|
|
|
<el-form-item label="账号" prop="username">
|
|
|
<el-input
|
|
|
+ v-model.trim="user_form.username"
|
|
|
maxlength="40"
|
|
|
show-word-limit
|
|
|
- v-model.trim="user_form.username"
|
|
|
disabled
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="管理员姓名" prop="name">
|
|
|
<el-input
|
|
|
+ v-model.trim="user_form.name"
|
|
|
maxlength="40"
|
|
|
show-word-limit
|
|
|
- v-model.trim="user_form.name"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="管理员手机号" prop="phone">
|
|
|
<el-input
|
|
|
+ v-model.trim="user_form.phone"
|
|
|
maxlength="11"
|
|
|
show-word-limit
|
|
|
- v-model.trim="user_form.phone"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="登录密码" prop="password">
|
|
|
<el-input
|
|
|
+ v-model.trim="user_form.password"
|
|
|
maxlength="40"
|
|
|
show-word-limit
|
|
|
show-password
|
|
|
- v-model.trim="user_form.password"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -87,108 +87,108 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import Breadcrumb from "@/components/Breadcrumb";
|
|
|
-import Hamburger from "@/components/Hamburger";
|
|
|
-import { getAvatar } from "@/icons/images/avatar";
|
|
|
-import { doEditSelf } from "@/api/ordinary_user";
|
|
|
-import Screenfull from "@/components/Screenfull";
|
|
|
-import { checkRole } from "@/utils/checkRole";
|
|
|
-import {getPicture} from '@/api/user'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import Breadcrumb from '@/components/Breadcrumb'
|
|
|
+import Hamburger from '@/components/Hamburger'
|
|
|
+import { getAvatar } from '@/icons/images/avatar'
|
|
|
+import { doEditSelf } from '@/api/ordinary_user'
|
|
|
+import Screenfull from '@/components/Screenfull'
|
|
|
+import { checkRole } from '@/utils/checkRole'
|
|
|
+import { getPicture } from '@/api/user'
|
|
|
export default {
|
|
|
components: {
|
|
|
Breadcrumb,
|
|
|
Hamburger,
|
|
|
- Screenfull,
|
|
|
+ Screenfull
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(["sidebar"]),
|
|
|
+ ...mapGetters(['sidebar'])
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
username: this.$store.getters.username,
|
|
|
name: this.$store.getters.name,
|
|
|
- avatar: "",
|
|
|
+ avatar: '',
|
|
|
// 是否显示对话框
|
|
|
dialogVisible: false,
|
|
|
// 对话框标题
|
|
|
- dialogTitle: "编辑资料",
|
|
|
+ dialogTitle: '编辑资料',
|
|
|
// 编辑资料
|
|
|
user_form: {
|
|
|
username: this.$store.getters.username,
|
|
|
name: this.$store.getters.name,
|
|
|
phone: this.$store.getters.phone,
|
|
|
- password: null,
|
|
|
+ password: null
|
|
|
},
|
|
|
// 验证规则
|
|
|
rules: {
|
|
|
username: [
|
|
|
- { required: true, message: "请输入账号名称", trigger: "blur" },
|
|
|
+ { required: true, message: '请输入账号名称', trigger: 'blur' }
|
|
|
],
|
|
|
name: [
|
|
|
- { required: true, message: "请输入管理员姓名", trigger: "blur" },
|
|
|
+ { required: true, message: '请输入管理员姓名', trigger: 'blur' }
|
|
|
],
|
|
|
phone: [
|
|
|
- { required: true, message: "请输入管理员手机号", trigger: "blur" },
|
|
|
+ { required: true, message: '请输入管理员手机号', trigger: 'blur' }
|
|
|
],
|
|
|
password: [
|
|
|
- { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
{
|
|
|
pattern:
|
|
|
/^(((?=.*\d)(?=.*[a-z])(?=.*[A-Z]))|((?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))).{10,32}$/,
|
|
|
message:
|
|
|
- "必须大小写字母、数字、特殊字符,4种组合中至少满足3种,且密码长度在10-32位之间",
|
|
|
- },
|
|
|
- ],
|
|
|
+ '必须大小写字母、数字、特殊字符,4种组合中至少满足3种,且密码长度在10-32位之间'
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
- favicon:'',
|
|
|
- };
|
|
|
+ favicon: ''
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
this.getPicture()
|
|
|
- this.avatar = getAvatar();
|
|
|
+ this.avatar = getAvatar()
|
|
|
},
|
|
|
methods: {
|
|
|
// 查询权限
|
|
|
checkRole,
|
|
|
toggleSideBar() {
|
|
|
- this.$store.dispatch("app/toggleSideBar");
|
|
|
+ this.$store.dispatch('app/toggleSideBar')
|
|
|
},
|
|
|
async logout() {
|
|
|
- await this.$store.dispatch("user/logout");
|
|
|
- this.$router.push(`/login?redirect=${this.$route.fullPath}`);
|
|
|
+ await this.$store.dispatch('user/logout')
|
|
|
+ this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
|
},
|
|
|
// 打开编辑
|
|
|
handleEdit() {
|
|
|
- this.dialogVisible = true;
|
|
|
+ this.dialogVisible = true
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs["user_form"].clearValidate();
|
|
|
- });
|
|
|
+ this.$refs['user_form'].clearValidate()
|
|
|
+ })
|
|
|
},
|
|
|
// 确定编辑
|
|
|
doUpdate() {
|
|
|
- this.$refs["user_form"].validate((valid) => {
|
|
|
+ this.$refs['user_form'].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- doEditSelf(this.user_form).then(async (res) => {
|
|
|
- this.dialogVisible = false;
|
|
|
- await this.$store.dispatch("user/logout");
|
|
|
- this.$router.push(`/login?redirect=${this.$route.fullPath}`);
|
|
|
+ doEditSelf(this.user_form).then(async(res) => {
|
|
|
+ this.dialogVisible = false
|
|
|
+ await this.$store.dispatch('user/logout')
|
|
|
+ this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
|
this.$message({
|
|
|
- type: "success",
|
|
|
- message: "编辑成功,请重新登录!",
|
|
|
- });
|
|
|
- });
|
|
|
+ type: 'success',
|
|
|
+ message: '编辑成功,请重新登录!'
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
// 获取背景
|
|
|
getPicture() {
|
|
|
getPicture().then((res) => {
|
|
|
- this.favicon = res.data.favicon;
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ this.favicon = res.data.favicon
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|