后台管理

src/assets/css/Header.css

@@ -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 {

src/assets/css/common.css

@@ -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;

src/components/AdminHeader.vue

@@ -1,17 +1,42 @@
 <template>
   <div>
-    <el-menu :default-active="activeIndex" class="nav" mode="horizontal" @select="handleSelect">
+    <el-menu  :default-active="activeIndex" class="nav-v" mode="vertical" @select="handleSelect">
-      <el-image @click="backOsredm" :src="osredmLogo" style="width: 120px; margin-right: 50px; cursor: pointer;"/>
+      <el-image @click="backOsredm" :src="osredmLogo" style="width: 120px; cursor: pointer;"/>
-      <el-submenu index="9" >
+<!--      <el-submenu index="9" >-->
-        <template slot="title">相关配置</template>
+<!--        <template slot="title">相关配置</template>-->
-        <el-menu-item index="9-1">配置1</el-menu-item>
+<!--        <el-menu-item index="9-1">配置1</el-menu-item>-->
-        <el-menu-item index="9-2">配置2</el-menu-item>
+<!--        <el-menu-item index="9-2">配置2</el-menu-item>-->
-      </el-submenu>
+<!--        <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,6 +69,9 @@ export default {
     }
     
   },
+  mounted() {
+    this.getPath()
+  }
 
 }
 </script>
@@ -41,3 +79,12 @@ export default {
 <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>

src/layout/AdminLayout.vue

@@ -1,8 +1,12 @@
 <template>
-  <div>
+  <div style="position: relative; min-height: 100%">
-    <Header></Header>
+    <div style="padding-bottom: 11.3vw; display: flex">
-    <router-view></router-view>
+      <Header></Header>
+      <router-view></router-view>
+    </div>
     <Footer></Footer>
+
+
   </div>
 </template>
 

src/pages/Admin/UserManage.vue

@@ -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>

src/router/index.js

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

yarn.lock

@@ -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"