Skip to content

S
Stusystem Web

cxt104926 / Stusystem Web

通知 4
Star 0
Fork 0
S
Stusystem Web

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

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

1

上级 a8e9a7b1
展开全部 隐藏空白更改
内联 并排
Showing with 14270 addition and 265 deletion
package-lock.json
浏览文件 @ 81f92ae7
此差异已折叠。
src/store/store.js
浏览文件 @ 81f92ae7
......@@ -25,7 +25,7 @@ export default new vuex.Store({
userInfo(state, data) {
state.userInfo = data;
localStorage.setItem("user", JSON.stringify(data));
localStorage.setItem("userInfo", JSON.stringify(data));
}
},
......
src/views/login.vue
浏览文件 @ 81f92ae7
......@@ -86,7 +86,9 @@ export default {
<style scoped>
.login {
background-image: url("../assets/img/2.jpg");
height: 100%;
background-size: cover;
height: 100vh;
width: 100vw;
}
.form {
......
src/views/manager/index.vue
浏览文件 @ 81f92ae7
......@@ -18,7 +18,7 @@
</template>
<div v-for="(it,index) in item.child" :key="it.id">
<el-menu-item v-if="it.child.length === 0" :index="it.id">{{ it.name }}</el-menu-item>
<el-submenu v-el v-for="itChild in it.child" :key="itChild.id" :index="it.id">
<el-submenu v-else v-for="itChild in it.child" :key="itChild.id" :index="it.id">
<template slot="title">{{ it.name }}</template>
<el-menu-item :index="itChild.id">{{ itChild.name }}</el-menu-item>
</el-submenu>
......@@ -32,11 +32,13 @@
<el-container>
<el-header style="text-align: right; font-size: 12px;background-color: #a9b3a9">
<el-dropdown>
<div>
<div style="margin-top: 5px">
<el-avatar :size="50" class="imgTitle">
<img :src="avatarURL"/>
</el-avatar>
<span>巴扎黑</span>
<span class="nameClass">
{{ userInfo.name }}
</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="editAvatar">修改头像</el-dropdown-item>
......@@ -117,7 +119,6 @@
<el-input v-model="pwdFormData.oldPassword" placeholder="请输入旧密码" style="width:90%" show-password
clearable autosize></el-input>
</el-form-item>
<el-form-item prop="password" label="新密码：" :label-width="formLabelWidth">
<el-input v-model="pwdFormData.password" placeholder="请输入新密码" style="width:90%" show-password
clearable autosize></el-input>
......@@ -140,7 +141,6 @@
<el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:90%" type="text" clearable
autosize></el-input>
</el-form-item>
<el-form-item prop="classId" label="班级：" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.classId" placeholder="请选择班级" style="width:90%" clearable
autosize>
......@@ -148,11 +148,13 @@
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="idCard" label="身份证号：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.idCard" placeholder="请输入身份证号" style="width:90%" type="number" min="0"
clearable autosize></el-input>
</el-form-item>
<el-form-item prop="phone" label="电话：" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:90%" type="number" min="0"
clearable
autosize></el-input>
clearable autosize></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -164,270 +166,285 @@
</template>
<script>
import {VueCropper} from 'vue-cropper'
export default {
name: 'index',
components: {VueCropper},
data() {
return {
stu: [],
tableData: [],
isCollapse: true,
menuWith: '64px',
// 模态框相关
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
addAndEditFormData: {
name: '',
classId: '',
oldPassword: '',
password: '',
phone: '',
idCard: ''
},
formLabelWidth: '120px',
classIds: [],
// 菜单数组
menu: [],
// 修改密码相关
pwdFormData: {
oldPassword: '',
password: ''
},
pwdCloseOnClickModal: false,
pwdAddAndEditDialogFormVisible: false,
// 头像相关参数
avatarURL: require("@/assets/img/w1.png"),
editAvatarDialog: false,
previews: {},
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量（0.1-1）
full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 100,
autoCropHeight: 100,
fixedBox: true // 截图框固定大小
},
import {VueCropper} from 'vue-cropper'
export default {
name: 'manager',
components: {VueCropper},
data() {
return {
userInfo: [],
stu: [],
tableData: [],
isCollapse: true,
menuWith: '64px',
// 模态框相关
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
addAndEditFormData: {
name: '',
classId: '',
oldPassword: '',
password: '',
phone: '',
idCard: ''
},
formLabelWidth: '120px',
classIds: [],
// 菜单数组
menu: [],
// 修改密码相关
pwdFormData: {
oldPassword: '',
password: ''
},
pwdCloseOnClickModal: false,
pwdAddAndEditDialogFormVisible: false,
// 头像相关参数
avatarURL: require("@/assets/img/w1.png"),
editAvatarDialog: false,
previews: {},
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量（0.1-1）
full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 100,
autoCropHeight: 100,
fixedBox: true // 截图框固定大小
},
}
},
created() {
this.init();
},
methods: {
init() {
let userInfo = this.$store.state.userInfo;
if (userInfo.length === 0) {
let item = localStorage.getItem("userInfo");
userInfo = JSON.parse(item);
}
},
created() {
this.init();
},
methods: {
init() {
if (this.$store.state.routes.length === 0) {
let item = localStorage.getItem("routers");
if (item.length !== 0) {
this.menu = item;
} else {
this.api.getApi('/menu/get/treeMenu').then(res => {
if (res.data !== undefined) {
this.menu = res.data;
this.$store.commit("initRoutes", res.data);
console.log("执行")
}
})
}
this.userInfo = userInfo;
let routes = this.$store.state.routes;
if (routes.length === 0) {
let item = localStorage.getItem("routers");
if (item === null) {
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 = this.$store.state.routes;
this.menu = JSON.parse(item);
}
},
// 点开菜单
handleOpen() {
this.isCollapse = false
this.menuWith = '218px';
},
} else {
this.menu = this.$store.state.routes;
}
},
// 关闭菜单
handleClose() {
this.isCollapse = true
// 这里为了解决背景灰色框执行太快，体验不好问题
setTimeout(() => {
this.menuWith = '64px';
}, 250);
},
// 点开菜单
handleOpen() {
this.isCollapse = false
this.menuWith = '218px';
},
// 修改用户头像
editAvatar() {
this.editAvatarDialog = true
this.option.img = this.avatarURL
},
// 关闭菜单
handleClose() {
this.isCollapse = true
// 这里为了解决背景灰色框执行太快，体验不好问题
setTimeout(() => {
this.menuWith = '64px';
}, 250);
},
// 修改用户密码
updatePwd() {
this.pwdAddAndEditDialogFormVisible = true;
},
// 修改用户头像
editAvatar() {
this.editAvatarDialog = true
this.option.img = this.avatarURL
},
// 提交修改的密码
submitPwd() {
// 修改用户密码
updatePwd() {
this.pwdAddAndEditDialogFormVisible = true;
},
// 提交修改的密码
submitPwd() {
// todo 提交修改的密码
},
},
// 关闭密码弹框
pwdAddAndEditClose() {
this.pwdAddAndEditDialogFormVisible = false;
},
// 关闭密码弹框
pwdAddAndEditClose() {
this.pwdAddAndEditDialogFormVisible = false;
},
// 修改用户信息
updateUserInfo() {
// 查找班级信息
this.api.getApi("/stu/class/get/treeData").then(e => {
this.classIds = e.data;
})
this.title = "修改用户信息";
this.addAndEditDialogFormVisible = true;
let userInfo = this.$store.state.userInfo;
this.$set(this.addAndEditFormData, 'name', userInfo.name);
this.$set(this.addAndEditFormData, 'classId', userInfo.classId);
this.$set(this.addAndEditFormData, 'phone', userInfo.phone);
this.$set(this.addAndEditFormData, 'idCard', userInfo.idCard);
},
// 修改用户信息
updateUserInfo() {
// 查找班级信息
this.api.getApi("/stu/class/get/treeData").then(e => {
this.classIds = e.data;
})
this.title = "修改用户信息";
this.addAndEditDialogFormVisible = true;
this.$set(this.addAndEditFormData, 'name', this.userInfo.name);
this.$set(this.addAndEditFormData, 'classId', this.userInfo.classId);
this.$set(this.addAndEditFormData, 'phone', this.userInfo.phone);
this.$set(this.addAndEditFormData, 'idCard', this.userInfo.idCard);
},
// 提交修改的用户信息
handleConfirmEvent() {
this.addAndEditDialogFormVisible = false;
// todo 调用后台接口
// 提交修改的用户信息
handleConfirmEvent() {
this.addAndEditDialogFormVisible = false;
// todo 调用后台接口
},
},
// 取消提交修改的用户信息
handleDialogClose() {
this.addAndEditDialogFormVisible = false;
},
// 取消提交修改的用户信息
handleDialogClose() {
this.addAndEditDialogFormVisible = false;
},
// 退出系统
loginOut() {
this.api.getApi("/logout").then(e => {
if (e.data.code === 200) {
this.$router.push("/login");
localStorage.removeItem("Authorization");
}
});
},
// 退出系统
loginOut() {
this.api.getApi("/logout").then(e => {
if (e.data.code === 200) {
this.$store.commit("removeState")
console.log(this.$store.state.routes);
this.$router.push("/login");
localStorage.removeItem("Authorization");
}
});
},
/**用户头像相关方法*/
// 保存头像修改
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 访问接口保存到数据库写这儿!
/**用户头像相关方法*/
// 保存头像修改
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
},
// 下载图片
down(type) {
var aLink = document.createElement('a')
aLink.download = 'author-img'
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
aLink.href = window.URL.createObjectURL(data)
aLink.click()
})
})
}
},
// 实时预览函数
realTime(data) {
this.previews = data
},
// 下载图片
down(type) {
var aLink = document.createElement('a')
aLink.download = 'author-img'
if (type === 'blob') {
this.$refs.cropper.getCropBlob((data) => {
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 {
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 {
data = e.target.result
}
_this.option.img = data
data = e.target.result
}
reader.readAsArrayBuffer(file.raw);
},
}
_this.option.img = data
}
reader.readAsArrayBuffer(file.raw);
},
}
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.hideIcon {
font-size: 30px;
color: #e7efee;
margin: 10px 35%;
}
.imgTitle {
/*margin-top: 6px;*/
}
/*用户头像修改*/
.previewBox {
text-align: center;
margin-left: 60px;
}
.preview {
width: 150px;
height: 150px;
margin: 0px auto 20px auto;
border-radius: 50%;
border: 1px solid #ccc;
background-color: #ccc;
overflow: hidden;
}
.cropper {
width: 260px;
height: 260px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.nameClass {
float: right;
margin-top: 15px;
margin-left: 8px;
font-family: '微软雅黑 Light', sans-serif;
font-size: 18px;
}
.hideIcon {
font-size: 30px;
color: #e7efee;
margin: 10px 35%;
}
.imgTitle {
/*margin-top: 6px;*/
}
/*用户头像修改*/
.previewBox {
text-align: center;
margin-left: 60px;
}
.preview {
width: 150px;
height: 150px;
margin: 0px auto 20px auto;
border-radius: 50%;
border: 1px solid #ccc;
background-color: #ccc;
overflow: hidden;
}
.cropper {
width: 260px;
height: 260px;
}
</style>
src/views/register/register.vue
浏览文件 @ 81f92ae7
......@@ -66,7 +66,7 @@
type="primary"
@click="handleConfirmEvent"
style="width: 100%"
><i class="el-icon-upload"></i>注 册
><i class="el-icon-upload"></i>注 册
</el-button>
</el-form-item>
<div class="navigate">
......@@ -156,10 +156,12 @@ export default {
</script>
<style scoped>
#register{
background-image: url("../../assets/img/1.jpg");
height: 100%;
}
#register {
background-image: url("../../assets/img/1.jpg");
background-size: cover;
height: 100vh;
width: 100vw;
}
.registerForm {
border-radius: 15px;
......@@ -170,7 +172,7 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
padding: 15px 25px;
background: #a9b3a9;
background: #f9fdf9;
border: #133cce;
box-shadow: 0 0 25px #2cb6b6;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或