提交 bafaf88d 编写于 作者: cxt104926's avatar cxt104926

11

上级 00148730
......@@ -16,21 +16,16 @@ export default new vuex.Store({
localStorage.setItem("routers", JSON.stringify(data));
},
removeState(state) {
state.routes = []
state.userInfo = []
localStorage.removeItem("routers");
localStorage.removeItem("userInfo");
},
userInfo(state, data) {
state.userInfo = data;
localStorage.setItem("userInfo", JSON.stringify(data));
},
},
// 异步
actions: {}
actions: {
}
})
......@@ -87,8 +87,8 @@
<el-button @click="editAvatarDialog = false">取 消</el-button>
</span>
</el-dialog>
<el-main>
<router-view></router-view>
<el-main style="background-color: #f5f5f5">
<router-view class="content-style"></router-view>
</el-main>
</el-container>
</el-container>
......@@ -117,21 +117,17 @@
:before-close="handleDialogClose" width="30%">
<el-form ref="addAndEditElForm" :model="addAndEditFormData" class="form">
<el-form-item prop="name" label="用户名:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:90%" type="text" clearable
autosize></el-input>
<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>
<el-option v-for="item in classIds" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-form-item prop="classId" label="班 级:" :label-width="formLabelWidth">
<el-cascader @change="stuClassChange" :change-on-select="true" :props="defaultParams" :options="classNames" v-model="addAndEditFormData.classId" :clearable="true" style="width:90%" clearable autosize>
</el-cascader>
</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-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>
<el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:90%" type="number" min="0" clearable autosize></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -143,9 +139,8 @@
</template>
<script>
import {
VueCropper
} from 'vue-cropper'
import {VueCropper} from 'vue-cropper'
import Message from "element-ui/packages/message/src/main";
export default {
name: 'manager',
......@@ -157,9 +152,15 @@
userInfo: [],
stu: [],
tableData: [],
isCollapse: true,
isCollapse: false,
activePath: '', // 当前激活菜单的index,存储在localStorage中
// 模态框相关
defaultParams: {
label: 'name',
value: 'id',
children: 'child'
},
classNames: [], // 班级数据
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
......@@ -172,7 +173,6 @@
idCard: ''
},
formLabelWidth: '120px',
classIds: [],
// 菜单数组
menu: [],
// 修改密码相关
......@@ -206,6 +206,7 @@
created() {
// 初始化,加载用户信息和菜单
this.init();
// 菜单高亮记录
this.activePath = window.localStorage.getItem("currentMenu");
},
methods: {
......@@ -274,7 +275,7 @@
updateUserInfo() {
// 查找班级信息
this.api.getApi("/stu/class/get/treeData").then(e => {
this.classIds = e.data;
this.classNames = e.data;
})
this.title = "修改用户信息";
this.addAndEditDialogFormVisible = true;
......@@ -284,15 +285,18 @@
this.$set(this.addAndEditFormData, 'idCard', this.userInfo.idCard);
},
// 监听班级选择
stuClassChange(value) {
this.addAndEditFormData.classId = value[value.length - 1];
},
// 提交修改的用户信息
handleConfirmEvent() {
this.addAndEditDialogFormVisible = false;
let parma = this.addAndEditFormData;
this.api.postApi("/manager/stu/update", parma).then(res => {
// todo
});
},
// 取消提交修改的用户信息
......@@ -304,9 +308,7 @@
loginOut() {
this.api.getApi("/logout").then(e => {
if (e.data.code === 200) {
this.$store.commit("removeState")
localStorage.removeItem("Authorization");
localStorage.removeItem("currentMenu");
localStorage.clear();
this.$router.push("/login");
} else {
Message.info("系统出现问题")
......@@ -445,7 +447,7 @@
.preview {
width: 150px;
height: 150px;
margin: 0px auto 20px auto;
margin: 0 auto 20px auto;
border-radius: 50%;
border: 1px solid #ccc;
background-color: #ccc;
......@@ -456,4 +458,10 @@
width: 260px;
height: 260px;
}
.content-style{
background-color: white;
height: 96%;
padding: 15px;
}
</style>
<template>
<div id="register">
<div class="registerDiv">
<el-form ref="registerForm" :model="addAndEditFormData" :rules="addAndEditRules" class="registerForm">
<el-form ref="registerForm" :model="addAndEditFormData" :rules="addAndEditRules" class="registerForm" >
<h3 class="registerTitle">注册页面</h3>
<el-form-item prop="account" label="账 号:">
<el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 75%"></el-input>
......@@ -108,7 +108,7 @@
if (valid) {
this.api.postApi("/register", this.addAndEditFormData).then(e => {
if (e.data.code === 200) {
this.$router.push("/");
this.$router.push("/login");
}
});
}
......@@ -151,7 +151,8 @@
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
text-align: right;
}
.registerBtu {
......
......@@ -6,12 +6,12 @@
<el-row class="title-add">
<el-button type="primary" icon="el-icon-plus">新增菜单</el-button>
</el-row>
<el-table border ref="filterTable" :data="tableData">
<el-table border ref="filterTable" :data="tableData" :header-cell-style="{background:'#f4f4f4', color:'#727479'}">
<el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column>
<el-table-column prop="name" label="菜单名称" width="100" align="center"></el-table-column>
<el-table-column prop="menuType" label="菜单类型" width="100" align="center"
:filters="[{ text: '目录', value: 'M' }, { text: '菜单', value: 'C' }, { text: '按钮', value: 'B' }]" :filter-method="filterTag"
filter-placement="bottom-end">
:filters="[{ text: '目录', value: 'M' }, { text: '菜单', value: 'C' }, { text: '按钮', value: 'B' }]"
:filter-method="filterTag" filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag :type="scope.row.menuType === 'M' ? 'success':'primary'" disable-transitions>{{ scope.row.menuType }}</el-tag>
</template>
......@@ -23,38 +23,134 @@
</template>
</el-table-column>
<el-table-column prop="iconImg" label="菜单图标" width="150" align="center"></el-table-column>
<el-table-column prop="url" label="页面url" width="180" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<el-table-column prop="pid" label="父级" align="center" width="150"></el-table-column>
<el-table-column prop="url" label="页面url" align="center"></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
<el-button type="text" size="small">编辑</el-button>
<el-button type="text" size="small">删除</el-button>
<el-button type="primary" size="small" @click="editData(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</section>
<!--新增/编辑模态框-->
<el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible" :before-close="handleDialogClose">
<el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
<el-row>
<el-col :span="10">
<el-form-item prop="name" label="菜单名称:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text" autosize></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item prop="code" label="权限code:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:98%" type="text" autosize></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item prop="url" label="页面url:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:80%" type="text" autosize></el-input>
</el-form-item>
<el-form-item prop="pid" label="父级:" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.pid" placeholder="请选择是否关闭" style="width:80%" clearable>
<el-option value="M" label="目录"></el-option>
</el-select>
</el-form-item>
<el-row>
<el-col :span="10">
<el-form-item prop="menuType" label="菜单类型:" :label-width="formLabelWidth">
<el-select v-model="addAndEditFormData.menuType" placeholder="请选择是否关闭" style="width:100%" clearable>
<el-option value="M" label="目录"></el-option>
<el-option value="C" label="菜单"></el-option>
<el-option value="B" label="按钮"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item prop="isVisible" label="是否启用:" :label-width="formLabelWidth">
<el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item prop="orderNum" label="排序:" :label-width="formLabelWidth">
<el-input v-model="addAndEditFormData.orderNum" placeholder="请输入菜单排序" style="width:100%" type="number" min="0" autosize></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item prop="iconImg" label="菜单图标:" :label-width="formLabelWidth">
<el-popover placement="bottom" title="点击选择需要设置的图标" width="260" trigger="click">
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-delete"></i>
<i class="el-icon-s-tools"></i>
<el-button type="primary" slot="reference">选择icon图标</el-button>
</el-popover>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleConfirmEvent('addAndEditElForm')">确 定</el-button>
<el-button @click="handleDialogClose">返 回</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Message from "element-ui/packages/message/src/main";
export default {
name: "stuMenu",
data() {
return {
tableData: [],
// 模态框相关
title: '',
closeOnClickModal: false,
addAndEditDialogFormVisible: false,
isEditable: false,
showAddAndEditForm: false,
showForm: false,
formLabelWidth: '150px',
addAndEditFormData: {
id: '',
iconImg: '',
name: '',
url: '',
code: '',
pid: '',
menuType: '',
isVisible: '',
orderNum: ''
},
addAndEditRules: {
name: {
required: true, message: '菜单名称不能为空', trigger: 'blur'
},
code: {
required: true, message: '权限code不能为空', trigger: 'blur'
},
// menuType: {
// required: true, message: '是否解决不能为空', trigger: 'change'
// },
// closed: {
// required: true, message: '是否关闭不能为空', trigger: 'change'
// }
},
}
},
created() {
this.init();
this.getList();
},
methods: {
init(){
getList(){
// 加载表格数据
this.api.getApi("/menu/get").then(res => {
let data = res.data;
this.tableData = res.data.list;
// debugger
})
......@@ -62,10 +158,75 @@
// 筛选
filterTag(value, row) {
return row.tag === value;
return row.menuType === value;
},
}
// 编辑
editData(index, row){
this.title = "编辑";
this.isEditable = true;
this.$set(this.addAndEditFormData, 'id', row.id);
this.$set(this.addAndEditFormData, 'url', row.url);
this.$set(this.addAndEditFormData, 'iconImg', row.iconImg);
this.$set(this.addAndEditFormData, 'name', row.name);
this.$set(this.addAndEditFormData, 'code', row.code);
this.$set(this.addAndEditFormData, 'pid', row.pid);
this.$set(this.addAndEditFormData, 'menuType', row.menuType);
this.$set(this.addAndEditFormData, 'isVisible', row.isVisible);
this.$set(this.addAndEditFormData, 'orderNum', row.orderNum);
this.showAddAndEditForm = true;
this.addAndEditDialogFormVisible = true;
},
// 删除
deleteData(id) {
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.api.getApi("/menu/delete?id="+id).then(res => {
if (res.data.code === 200){
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList();
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 关闭模态框
handleDialogClose() {
this.showAddAndEditForm = false;
this.addAndEditFormData = {};
this.addAndEditDialogFormVisible = false;
},
// 确定提交
handleConfirmEvent(formName){
this.$refs[formName].validate(async valid => {
if (valid) {
let formData = this.addAndEditFormData;
this.api.putApi("/menu/update",formData).then(res => {
if (res.data.code === 200){
Message.success("修改成功");
}
})
this.handleDialogClose();
}
})
}
}
}
</script>
......@@ -77,5 +238,4 @@
.title-add button{
padding: 12px 7px;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册