后台管理

This commit is contained in:
unknown 2022-06-09 17:39:29 +08:00
parent 38f6d6e90d
commit 02499f3eb1
9 changed files with 604 additions and 33 deletions

View File

@ -23,8 +23,15 @@ img {
display: flex;
justify-content: center;
}
.nav-v {
padding: 30px 0;
justify-content: left;
width: 250px;
height: 80vh;
}
.el-menu-item {
margin: 10px 0;
font-size: 1.1rem;
}
::v-deep .el-submenu__title {

View File

@ -8,7 +8,10 @@
margin: 2vw 0;
font-size: 1.1rem;
}
.breadcrumb-admin {
margin: 2vw 0;
font-size: 0.9rem;
}
.edit-content {
display: flex;
flex-direction: column;
@ -25,6 +28,13 @@
align-items: center; /* 水平居中 */
margin: 0vw 6vw 3vw;
}
/* 面板 */
.admin-content {
display: flex;
flex-direction: column; /* 纵向排列 */
margin: 0 2vw 2vw;
}
.content ul {
list-style-type: none;
}
@ -36,6 +46,13 @@
box-shadow: 0px 4px 10px 0 rgba(0,0,0,0.15);
margin-bottom: 3vw;
}
.card-admin {
width: 83vw;
background-color: white;
box-shadow: 0px 4px 10px 0 rgba(0,0,0,0.15);
margin-bottom: 3vw;
}
.card-content {
display: block;
position: relative;

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -1,17 +1,42 @@
<template>
<div>
<el-menu :default-active="activeIndex" class="nav" mode="horizontal" @select="handleSelect">
<el-image @click="backOsredm" :src="osredmLogo" style="width: 120px; margin-right: 50px; cursor: pointer;"/>
<el-submenu index="9" >
<template slot="title">相关配置</template>
<el-menu-item index="9-1">配置1</el-menu-item>
<el-menu-item index="9-2">配置2</el-menu-item>
</el-submenu>
<el-menu :default-active="activeIndex" class="nav-v" mode="vertical" @select="handleSelect">
<el-image @click="backOsredm" :src="osredmLogo" style="width: 120px; cursor: pointer;"/>
<!-- <el-submenu index="9" >-->
<!-- <template slot="title">相关配置</template>-->
<!-- <el-menu-item index="9-1">配置1</el-menu-item>-->
<!-- <el-menu-item index="9-2">配置2</el-menu-item>-->
<!-- <el-submenu index="1">-->
<!-- <template slot="title">-->
<!-- <i class="el-icon-location"></i>-->
<!-- <span>导航一</span>-->
<!-- </template>-->
<!-- <el-menu-item-group>-->
<!-- <template slot="title">分组一</template>-->
<!-- <el-menu-item index="1-1">选项1</el-menu-item>-->
<!-- <el-menu-item index="1-2">选项2</el-menu-item>-->
<!-- </el-menu-item-group>-->
<!-- <el-menu-item-group title="分组2">-->
<!-- <el-menu-item index="1-3">选项3</el-menu-item>-->
<!-- </el-menu-item-group>-->
<!-- <el-submenu index="1-4">-->
<!-- <template slot="title">选项4</template>-->
<!-- <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!-- </el-submenu>-->
<!-- </el-submenu>-->
<el-menu-item index="userManage">
<i class="el-icon-user-solid"></i>
<span slot="title">用户权限管理</span>
</el-menu-item>
<!-- </el-submenu>-->
</el-menu>
</div>
</template>
<script>
import pageUtils from "@/utils/pageUtils";
export default {
name: "AdminHeader",
@ -24,9 +49,19 @@ export default {
},
methods:{
// path
getPath(){
var path = this.$route.path
this.activeIndex = path.split("/")[2]
console.log(this.activeIndex)
},
// eslint-disable-next-line no-unused-vars
handleSelect(key, keyPath) {
console.log(key, keyPath);
switch (key){
case "userManage":
pageUtils.openPage(this.$router,"/admin/userManage")
break;
}
},
backOsredm(){
@ -34,10 +69,22 @@ export default {
}
},
mounted() {
this.getPath()
}
}
</script>
<style src="@/assets/css/Header.css" scoped>
</style>
<style>
.el-menu-item {
font-size: 0.9rem !important;
}
::v-deep .el-submenu__title {
font-size: 0.8rem !important;
}
</style>

View File

@ -1,24 +1,28 @@
<template>
<div>
<Header></Header>
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/AdminHeader"
import Footer from "@/components/Footer"
export default {
name: "AdminLayout",
components:{
Header,
Footer,
}
}
</script>
<style scoped>
<template>
<div style="position: relative; min-height: 100%">
<div style="padding-bottom: 11.3vw; display: flex">
<Header></Header>
<router-view></router-view>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "@/components/AdminHeader"
import Footer from "@/components/Footer"
export default {
name: "AdminLayout",
components:{
Header,
Footer,
}
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,463 @@
<template>
<div class="admin-content">
<el-breadcrumb class="breadcrumb-admin" separator="/">
<el-breadcrumb-item>后台管理</el-breadcrumb-item>
<el-breadcrumb-item>用户权限管理</el-breadcrumb-item>
</el-breadcrumb>
<div class="card-admin" style="text-align: left">
<div class="card-style">
<h4>用户信息</h4>
<div>
<div class="header">
<div class="headersecond">
<!-- 新增 绑定点击事件 显示内容国际化 -->
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()">添加</el-button>
<!-- 批量删除 使用图标 -->
<el-button type="primary" icon="el-icon-delete" @click="batchDelete()">删除</el-button>
<!-- 输入框 双向绑定数据 自带清空 -->
<span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;手机号</span>
<el-input v-model="searchInfo.keyWords" suffix-icon="el-icon-edit" clearable placeholder="请输入手机号"></el-input>
<!-- 下拉选框 -->
<span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;用户类型</span>
<el-select v-model="searchInfo.standardId" clearable filterable placeholder="请选择">
<el-option v-for="item in standardAll"
:key="item.standardId"
:label="item.standardId"
:value="item.standardId"></el-option>
</el-select>
<!-- 搜索按钮 -->
<el-button style="margin-left:10px" type="primary" icon="el-icon-search" @click="getData()" >搜索</el-button>
</div>
</div>
<!-- 表格界面显示 -->
<!-- 分页设置 表格条纹 保存勾选数据-->
<el-table v-loading="loading"
element-loading-text="拼命加载中..."
element-loading-spinner="el-icon-loading"
element-loading-custom-class="loading_style"
empty-text="没有记录哦~"
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
stripe
style="width: 100%" height="630"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column> <!-- -->
<el-table-column prop="standardId" label="用户ID" align="center" width="300"></el-table-column>
<el-table-column prop="standardCon" label="用户名" align="left" width="100"></el-table-column>
<el-table-column prop="standardPointNum" label="分解数量" align="center" width="120"></el-table-column>
<el-table-column label="操作" width="200" align="center" >
<template slot-scope="scope"> <!-- 作用域插槽 -->
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">{{ ("handle.edit") }}</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row);" type="danger" size="small">{{ ("handle.dele") }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页底部 -->
<!-- 分页器 在每页数据的个数发生改变时触发 在页数发生改变时触发 绑定属性页数 页数导航布局 总数表格数据个数-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="pagesize"
layout="total,prev,jumper,next"
:total="tableData.length">
</el-pagination>
<!-- 新增或编辑的弹窗 -->
<!-- 绑定属性title 控制组件显示和隐藏 点击空白弹窗是否关闭-->
<el-dialog :title = "title"
:visible.sync="editFormVisible"
:close-on-click-modal="false"
v-if="editFormVisible"
>
<!-- 双向绑定数据editForm 获取editForm元素-->
<el-form :model="editForm" :rules="Rules" label-width="20px" ref="editForm">
<el-form-item prop="standardId">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<el-input v-model="editForm.standardId" suffix-icon="el-icon-edit" clearable placeholder="请填写标准序号12"></el-input>
</el-form-item>
<el-form-item prop="standardCon">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<el-input v-model="editForm.standardCon" type="textarea" :autosize="{ minRows: 6, maxRows: 10}" clearable placeholder="请填写标准内容"></el-input>
</el-form-item>
<el-form-item prop="standardPointNum">
<span>分解指标点</span>
<el-input v-model="editForm.standardPointNum" suffix-icon="el-icon-edit" clearable placeholder="请填写分解数量4"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button icon="el-icon-circle-close" @click.native="handleCancel()">{{ ("handle.cancel") }}</el-button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<el-button icon="el-icon-circle-check" type="primary" @click.native="regRules()">{{ handle }}</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "UserManage",
data(){
return{
//
searchInfo:{
keyWords:"",
standardId:"",
},
//
Rules: {
standardId: [
{ required: true, message: "标准序号不能为空", trigger: "change" },
{ pattern: /^[1-9][0-9]?$/, message:"1-99的整数包括1、99", trigger: "change" },
],
standardCon: [
{ required: true, message: "内容不能为空", trigger: "change" },
{ max: 250, message: "字数不超过250", trigger: "change" },
],
standardPointNum: [
{ required: true, message: "分解数量不能为空", trigger: "change" },
{ pattern: /^[1-5]$/, message: "最小为1最大为5", trigger: "change" },
],
},
//
loading:"",
title:"",
handle:"",
//dialog
editFormVisible: false,
multipleSelection:[],
ids:"",
currentPage: 1,
pagesize: 10,
//res []""
//res.data []
standardAll:[],
tableData:[],
}
},
methods:{
//
// getData(){
//
// //
// this.$api.menu.StandardAll().then((res)=>{
// this.standardAll = res.data;
// }).catch(function(res) {
// });
//
// //
// setTimeout(() => {
//
// this.$api.menu.selectStandardBy(this.searchInfo).then((res)=>{
// this.tableData = res.data;
// }).catch(function(res) {
// });
//
// this.loading = false;
// },1000);
// this.loading = true;
//
// },
//
handleAdd: function () {
this.title = "新增标准信息"
this.handle = "保存"
this.editFormVisible = true; //dialog
this.editForm = {
index:0,
standardNum:"",
standardId:"",
standardCon:"",
standardPointNum:"",
}
},
//
handleEdit: function (index, row) {
this.title = "编辑标准信息"
this.handle = "更新"
this.editFormVisible = true; //dialog
this.editForm = Object.assign({}, row); //dialog
this.editForm.standardNum = row.standardNum; //
this.editForm.index = index; //index
},
//
regRules(){
var reg1 = /^[1-9][0-9]?$/;
var reg2 = this.editForm.standardCon.length;
var reg3 = /^[1-5]$/;
if( !reg1.test(this.editForm.standardId) || reg2 == 0 || reg2 > 250 || !reg3.test(this.editForm.standardPointNum) ){
this.$message({
showClose: true,
message: '标准信息输入格式错误,请重新输入',
type: 'warning'
});
}else{
this.handleUpdate();
}
},
//
handleUpdate() {
if(this.handle == "更新"){ //
this.$api.menu.updateStandard(this.editForm).then((res)=>{ //
if(res.code == 0){
this.$message({
showClose: true,
message: '更新标准信息成功',
type: 'success'
});
this.$set(this.tableData,this.editForm.index,{ //
standardNum:this.editForm.standardNum,
standardId:this.editForm.standardId,
standardCon:this.editForm.standardCon,
standardPointNum:this.editForm.standardPointNum,
});
this.editFormVisible = false; //
}else{
this.$message({
showClose: true,
message: '更新标准信息失败:' + res.message, //
type: 'error'
});
}
})
}else{ //
this.$api.menu.insertStandard(this.editForm).then((res)=>{ //
if(res.code == 0){
this.$message({
showClose: true,
message: '添加标准信息成功',
type: 'success'
});
this.getData(); //
}else{
this.$message({
showClose: true,
message: '添加标准信息失败:' + res.message, //
type: 'error'
});
}
})
}
},
//
handleCancel() {
this.editFormVisible = false;
},
//
deleteRow(index, row) {
var params = {
"ids": row.standardNum,
}
this.deleteHandle(params)
},
handleSelectionChange(val) {
this.multipleSelection = val; // val
},
//
batchDelete(){
if(this.multipleSelection.length <= 0){
this.$message.warning("未选中批量数据");
}
else if(this.multipleSelection.length > 0){
var i = this.multipleSelection.length;
for(var j = 0; j < i; j++){
this.ids = this.ids + "," + this.multipleSelection[j].standardNum;
}
var params = {
"ids": this.ids.substr(1), //
}
this.deleteHandle(params)
this.ids = "";
}
},
deleteHandle(params){ //
this.$confirm("确认删除吗?", "提示", { type: "warning", }).then(() => {
this.$api.menu.deleteStandard(params).then((res)=>{
if(res.code == 0){
this.getData(); //
this.$message({
showClose: true,
message: '删除标准信息成功',
type: 'success'
});
}else{
this.$message({
showClose: true,
message: '删除标准信息失败:' + res.message,
type: 'error'
});
}
})
}).catch(() => {});
},
//
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
},
},
mounted() {
}
}
</script>
<style src="@/assets/css/common.css" scoped/>
<style scoped>
.card-style{
margin-left: 20px;
}
</style>
<style lang="scss">
.header {
text-align:left;
}
.headersecond {
float: left;
margin-bottom: 20px;
}
.el-dropdown-link {
cursor: pointer;
color: #fff;
}
.el-icon-arrow-down {
font-size: 12px;
}
.el-input {
width: 200px;
}
.el-table {
font-size: 15px;
}
.el-pagination {
margin-bottom: 20px;
}
.el-pagination__jump {
margin-left: 0;
}
.el-dialog {
width: 500px;
border-radius: 20px;
}
.el-dialog .el-input {
width: 250px;
left: 10px;
}
.el-form-item__error {
padding-left: 150px;
}
.el-button--primary {
font-size: 12px;
color: #fff;
background: #466AFF;
border-color: #466AFF;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #7890ee;
border-color: #7890ee;
}
.loading_style .el-loading-text{
color: #466AFF;
font-size: 33px;
}
.loading_style .el-loading-spinner i {
color: #466AFF;
font-size: 33px;
}
</style>

View File

@ -152,6 +152,14 @@ let routes = [
meta: {
title: '红山开源社区'
},
},
{
// 用户管理
path: "userManage",
component: () => import("@/pages/Admin/UserManage"),
meta: {
title: '红山开源社区'
},
}
]
},

View File

@ -3426,6 +3426,14 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
echarts@^5.3.2:
version "5.3.2"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.3.2.tgz#0a7b3be8c48a48b2e7cb1b82121df0c208d42d2c"
integrity sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==
dependencies:
tslib "2.3.0"
zrender "5.3.1"
ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz"
@ -5863,6 +5871,11 @@ mixin-deep@^1.2.0:
dependencies:
minimist "^1.2.6"
moment@^2.29.1:
version "2.29.3"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz"
@ -8466,6 +8479,11 @@ ts-pnp@^1.1.6:
resolved "https://registry.npmmirror.com/ts-pnp/-/ts-pnp-1.2.0.tgz"
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
tslib@2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
tslib@^1.9.0:
version "1.14.1"
resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz"
@ -9186,3 +9204,10 @@ yorkie@^2.0.0:
is-ci "^1.0.10"
normalize-path "^1.0.0"
strip-indent "^2.0.0"
zrender@5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.3.1.tgz#fa8e63ac7e719cfd563831fe8c42a9756c5af384"
integrity sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==
dependencies:
tslib "2.3.0"