Skip to content

S
Stusystem Web

cxt104926 / Stusystem Web

通知 4
Star 0
Fork 0
S
Stusystem Web

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 9ab9b2bf 编写于 作者: cxt104926's avatar cxt104926
浏览文件
操作

优化

上级 f52f9817
隐藏空白更改
内联 并排
Showing with 266 addition and 264 deletion
src/views/manager/index.vue
浏览文件 @ 9ab9b2bf
...@@ -164,294 +164,296 @@ ...@@ -164,294 +164,296 @@
</template> </template>
<script> <script>
import {VueCropper} from 'vue-cropper' import {VueCropper} from 'vue-cropper'
export default { export default {
name: 'manager', name: 'manager',
components: {VueCropper}, components: {VueCropper},
data() { data() {
return { return {
userInfo: [], userInfo: [],
stu: [], stu: [],
tableData: [], tableData: [],
isCollapse: true, isCollapse: true,
menuWith: '64px', menuWith: '64px',
// 模态框相关 // 模态框相关
title: '', title: '',
closeOnClickModal: false, closeOnClickModal: false,
addAndEditDialogFormVisible: false, addAndEditDialogFormVisible: false,
addAndEditFormData: { addAndEditFormData: {
name: '', name: '',
classId: '', classId: '',
oldPassword: '', oldPassword: '',
password: '', password: '',
phone: '', phone: '',
idCard: '' idCard: ''
}, },
formLabelWidth: '120px', formLabelWidth: '120px',
classIds: [], classIds: [],
// 菜单数组 // 菜单数组
menu: [], menu: [],
// 修改密码相关 // 修改密码相关
pwdFormData: { pwdFormData: {
oldPassword: '', oldPassword: '',
password: '' password: ''
}, },
pwdCloseOnClickModal: false, pwdCloseOnClickModal: false,
pwdAddAndEditDialogFormVisible: false, pwdAddAndEditDialogFormVisible: false,
// 头像相关参数 // 头像相关参数
avatarURL: require("@/assets/img/w1.png"), avatarURL: require("@/assets/img/w1.png"),
editAvatarDialog: false, editAvatarDialog: false,
previews: {}, previews: {},
option: { option: {
img: '', // 裁剪图片的地址 img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息 info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量（0.1-1） outputSize: 1, // 剪切后的图片质量（0.1-1）
full: true, // 输出原图比例截图 props名full full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式 outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片 canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高 original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框 canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框 autoCrop: true, // 是否默认生成截图框
autoCropWidth: 100, autoCropWidth: 100,
autoCropHeight: 100, autoCropHeight: 100,
fixedBox: true // 截图框固定大小 fixedBox: true // 截图框固定大小
}, },
}
},
created() {
this.init();
},
methods: {
init() {
// 从vuex中获取用户信息，找不到去本地缓存中找
let userInfo = this.$store.state.userInfo;
if (userInfo.length === 0) {
let item = localStorage.getItem("userInfo");
userInfo = JSON.parse(item);
} }
this.userInfo = userInfo; },
// 获取菜单 created() {
let routes = this.$store.state.routes; this.init();
if (routes.length === 0) { },
let item = localStorage.getItem("routers"); methods: {
if (item === null) { init() {
this.api.getApi('/menu/get/treeMenu').then(res => { // 从vuex中获取用户信息，找不到去本地缓存中找
if (res.data !== undefined) { let userInfo = this.$store.state.userInfo;
this.menu = res.data; if (userInfo === null) {
this.$store.commit("initRoutes", res.data); let item = localStorage.getItem("userInfo");
} userInfo = JSON.parse(item);
}) }
this.userInfo = userInfo;
// 获取菜单
let routes = this.$store.state.routes;
if (routes.length === 0) {
let item = localStorage.getItem("routers");
if (item === undefined) {
this.api.getApi('/menu/get/treeMenu').then(res => {
if (res.data !== undefined) {
this.menu = res.data;
this.$store.commit("initRoutes", res.data);
}
})
} else {
this.menu = JSON.parse(item);
}
} else { } else {
this.menu = JSON.parse(item); this.menu = this.$store.state.routes;
} }
} else { },
this.menu = this.$store.state.routes;
}
},
// 点开菜单 // 点开菜单
handleOpen() { handleOpen() {
this.isCollapse = false this.isCollapse = false
this.menuWith = '218px'; this.menuWith = '218px';
}, },
// 关闭菜单 // 关闭菜单
handleClose() { handleClose() {
this.isCollapse = true this.isCollapse = true
// 这里为了解决背景灰色框执行太快，体验不好问题 // 这里为了解决背景灰色框执行太快，体验不好问题
setTimeout(() => { setTimeout(() => {
this.menuWith = '64px'; this.menuWith = '64px';
}, 250); }, 250);
}, },
// 修改用户头像 // 修改用户头像
editAvatar() { editAvatar() {
this.editAvatarDialog = true this.editAvatarDialog = true
this.option.img = this.avatarURL this.option.img = this.avatarURL
}, },
// 修改用户密码 // 修改用户密码
updatePwd() { updatePwd() {
this.pwdAddAndEditDialogFormVisible = true; this.pwdAddAndEditDialogFormVisible = true;
}, },
// 提交修改的密码 // 提交修改的密码
submitPwd() { submitPwd() {
let param = { let param = {
id:this.userInfo.id, id: this.userInfo.id,
oldPwd:this.pwdFormData.oldPassword, oldPwd: this.pwdFormData.oldPassword,
newPwd:this.pwdFormData.password newPwd: this.pwdFormData.password
} }
debugger this.api.getApi("/updatePwd", param).then(e => {
this.api.getApi("/updatePwd",param).then(e => { console.log(e);
console.log(e); })
}) },
},
// 关闭密码弹框 // 关闭密码弹框
pwdAddAndEditClose() { pwdAddAndEditClose() {
this.pwdAddAndEditDialogFormVisible = false; this.pwdAddAndEditDialogFormVisible = false;
}, },
// 修改用户信息 // 修改用户信息
updateUserInfo() { updateUserInfo() {
// 查找班级信息 // 查找班级信息
this.api.getApi("/stu/class/get/treeData").then(e => { this.api.getApi("/stu/class/get/treeData").then(e => {
this.classIds = e.data; this.classIds = e.data;
}) })
this.title = "修改用户信息"; this.title = "修改用户信息";
this.addAndEditDialogFormVisible = true; this.addAndEditDialogFormVisible = true;
this.$set(this.addAndEditFormData, 'name', this.userInfo.name); this.$set(this.addAndEditFormData, 'name', this.userInfo.name);
this.$set(this.addAndEditFormData, 'classId', this.userInfo.classId); this.$set(this.addAndEditFormData, 'classId', this.userInfo.classId);
this.$set(this.addAndEditFormData, 'phone', this.userInfo.phone); this.$set(this.addAndEditFormData, 'phone', this.userInfo.phone);
this.$set(this.addAndEditFormData, 'idCard', this.userInfo.idCard); this.$set(this.addAndEditFormData, 'idCard', this.userInfo.idCard);
}, },
// 提交修改的用户信息 // 提交修改的用户信息
handleConfirmEvent() { handleConfirmEvent() {
this.addAndEditDialogFormVisible = false; this.addAndEditDialogFormVisible = false;
// todo 调用后台接口 let parma = this.addAndEditFormData;
this.api.postApi("/manager/stu/update", parma).then(res => {
});
},
// 取消提交修改的用户信息 },
handleDialogClose() {
this.addAndEditDialogFormVisible = false;
},
// 退出系统 // 取消提交修改的用户信息
loginOut() { handleDialogClose() {
this.api.getApi("/logout").then(e => { this.addAndEditDialogFormVisible = false;
if (e.data.code === 200) { },
this.$store.commit("removeState")
this.$router.push("/login");
localStorage.removeItem("Authorization");
}
});
},
/**用户头像相关方法*/ // 退出系统
// 保存头像修改 loginOut() {
saveEditAvatar() { this.api.getApi("/logout").then(e => {
this.editAvatarDialog = false if (e.data.code === 200) {
this.finish('blob') this.$store.commit("removeState")
}, this.$router.push("/login");
// 放大/缩小 localStorage.removeItem("Authorization");
changeScale(num) { }
num = num || 1; });
this.$refs.cropper.changeScale(num); },
},
// 左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 保存上传图片
finish(type) {
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
this.avatarURL = window.URL.createObjectURL(data)
// todo 访问接口保存到数据库写这儿!
/**用户头像相关方法*/
// 保存头像修改
saveEditAvatar() {
this.editAvatarDialog = false
this.finish('blob')
},
// 放大/缩小
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 保存上传图片
finish(type) {
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
this.avatarURL = window.URL.createObjectURL(data)
// todo 访问接口保存到数据库写这儿!
})
} else {
this.$refs.cropper.getCropData((data) => {
// todo 访问接口保存到数据库写这儿!
})
} else {
this.$refs.cropper.getCropData((data) => {
// todo 访问接口保存到数据库写这儿!
})
} })
}, }
// 实时预览函数 },
realTime(data) { // 实时预览函数
this.previews = data realTime(data) {
}, this.previews = data
// 下载图片 },
down(type) { // 下载图片
var aLink = document.createElement('a') down(type) {
aLink.download = 'author-img' var aLink = document.createElement('a')
if (type === 'blob') { aLink.download = 'author-img'
this.$refs.cropper.getCropBlob((data) => { if (type === 'blob') {
aLink.href = window.URL.createObjectURL(data) this.$refs.cropper.getCropBlob((data) => {
aLink.click() aLink.href = window.URL.createObjectURL(data)
}) aLink.click()
} else { })
this.$refs.cropper.getCropData((data) => {
aLink.href = data;
aLink.click()
})
}
},
// 更换头像--上传本地图片
uploadImg(file) {
var _this = this;
var reader = new FileReader();
reader.onload = (e) => {
let data;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else { } else {
data = e.target.result this.$refs.cropper.getCropData((data) => {
aLink.href = data;
aLink.click()
})
} }
_this.option.img = data },
} // 更换头像--上传本地图片
reader.readAsArrayBuffer(file.raw); uploadImg(file) {
}, var _this = this;
var reader = new FileReader();
reader.onload = (e) => {
let data;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
_this.option.img = data
}
reader.readAsArrayBuffer(file.raw);
},
}
} }
}
</script> </script>
<style scoped> <style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; width: 200px;
min-height: 400px; min-height: 400px;
} }
.nameClass { .nameClass {
color: #133cce; color: #133cce;
float: right; float: right;
margin-top: 15px; margin-top: 15px;
margin-left: 8px; margin-left: 8px;
font-family: '微软雅黑 Light', sans-serif; font-family: '微软雅黑 Light', sans-serif;
font-size: 18px; font-size: 18px;
} }
.hideIcon { .hideIcon {
font-size: 30px; font-size: 30px;
color: #e7efee; color: #e7efee;
margin: 10px 35%; margin: 10px 35%;
} }
.imgTitle { .imgTitle {
/*margin-top: 6px;*/ /*margin-top: 6px;*/
} }
/*用户头像修改*/ /*用户头像修改*/
.previewBox { .previewBox {
text-align: center; text-align: center;
margin-left: 60px; margin-left: 60px;
} }
.preview { .preview {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 0px auto 20px auto; margin: 0px auto 20px auto;
border-radius: 50%; border-radius: 50%;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #ccc; background-color: #ccc;
overflow: hidden; overflow: hidden;
} }
.cropper { .cropper {
width: 260px; width: 260px;
height: 260px; height: 260px;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或