初步搭建角色管理页面

src/apis/system2.js

@@ -33,3 +33,9 @@ export const resetPass = (id) => {
     url: `/sys/user/resetPass/${id}`
   })
 }
+// 获取角色
+export const getRole = () => {
+  return axios({
+    url: '/sys/user/getRole'
+  })
+}

src/components/tabLeft4.vue

@@ -25,6 +25,7 @@ export default {
     return {
       tabList: [
         { name: '用户管理', id: 2 },
+        { name: '角色管理', id: 3 },
         { name: '系统日志', id: 1 }
       ]
     }

src/router/index.js

@@ -302,6 +302,12 @@ const router = new VueRouter({
           path: 'system2',
           meta: { myInd: 3 },
           component: () => import('@/views/system/system2.vue')
+        },
+        {
+          name: 'system3',
+          path: 'system3',
+          meta: { myInd: 3 },
+          component: () => import('@/views/system/system3.vue')
         }
       ]
     }

src/views/layout/index.vue

@@ -154,6 +154,7 @@ export default {
           push: '/layout/system',
           son: [
             { name: '用户管理', id: 2 },
+            { name: '角色管理', id: 3 },
             { name: '系统日志', id: 1 }
           ]
         }

src/views/system/system2_Edit.vue

@@ -19,8 +19,8 @@
             <el-option
               v-for="item in source"
               :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              :label="item.roleName"
+              :value="item.id"
             ></el-option>
           </el-select>
         </el-form-item>
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { userSave, getDetailById } from '@/apis/system2'
+import { userSave, getDetailById, getRole } from '@/apis/system2'
 export default {
   name: 'system2_Edit',
   props: {
@@ -72,28 +72,7 @@ export default {
         isEnabled: 1
       },
       // 多选数据
-      source: [
-        {
-          value: 1,
-          label: '超级管理员'
-        },
-        {
-          value: 2,
-          label: '保管部主任'
-        },
-        {
-          value: 3,
-          label: '保管部成员'
-        },
-        {
-          value: 4,
-          label: '其他部门人员'
-        },
-        {
-          value: 5,
-          label: '征集部主任'
-        }
-      ],
+      source: [],
       rules: {
         realName: [
           { required: true, message: '不能为空', trigger: 'blur' }
@@ -143,7 +122,11 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取角色
+    const res = await getRole()
+    this.source = res.data
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前

src/views/system/system2_add.vue

@@ -19,8 +19,8 @@
             <el-option
               v-for="item in source"
               :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              :label="item.roleName"
+              :value="item.id"
             ></el-option>
           </el-select>
         </el-form-item>
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { userSave } from '@/apis/system2'
+import { userSave, getRole } from '@/apis/system2'
 export default {
   name: 'system2_add',
   props: {
@@ -72,28 +72,7 @@ export default {
         isEnabled: 1
       },
       // 多选数据
-      source: [
-        {
-          value: 1,
-          label: '超级管理员'
-        },
-        {
-          value: 2,
-          label: '保管部主任'
-        },
-        {
-          value: 3,
-          label: '保管部成员'
-        },
-        {
-          value: 4,
-          label: '其他部门人员'
-        },
-        {
-          value: 5,
-          label: '征集部主任'
-        }
-      ],
+      source: [],
       rules: {
         realName: [
           { required: true, message: '不能为空', trigger: 'blur' }
@@ -113,7 +92,8 @@ export default {
     }
   },
   // 监听属性 类似于data概念
-  computed: {},
+  computed: {
+  },
   // 监控data中的数据变化
   watch: {},
   // 方法集合
@@ -149,7 +129,12 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取角色
+    const res = await getRole()
+    this.source = res.data
+    // console.log(999, res)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前

src/views/system/system3.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="system2">
+    <TabList :ind="3" />
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">系统管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">角色管理</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>操作事件：</span>
+            <el-input
+              v-model="myData.searchKey"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+
+            <el-button style="margin-left: 20px" @click="find">查询</el-button>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column  label="序号" width="80" :resizable="false">
+                <template slot-scope="scope">
+                   {{scope.$index+(myData.pageNum - 1) * myData.pageSize + 1}}
+                </template>
+              </el-table-column>
+              <el-table-column prop="userName" label="账号" width="240" :resizable="false">
+              </el-table-column>
+              <el-table-column prop="type" label="操作模块" width="240" :resizable="false">
+              </el-table-column>
+              <el-table-column prop="description" label="操作事件" :resizable="false">
+              </el-table-column>
+              <el-table-column prop="createTime" label="操作时间" width="240" :resizable="false"> </el-table-column>
+            </el-table>
+          </div>
+                        <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              :current-page='myData.pageNum'
+              @current-change='currentChange'
+              @size-change='sizeChange'
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRZList } from '@/apis/system1'
+import TabList from '@/components/tabLeft4.vue'
+export default {
+  name: 'system1',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+      total: 0,
+      myData: {
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: '',
+        startTime: ''
+      },
+      // 表格数据
+      tableData: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 分页器
+    currentChange (val) {
+      this.myData.pageNum = val
+      this.getRZList(this.myData)
+    },
+    sizeChange (val) {
+      this.myData.pageSize = val
+      this.getRZList(this.myData)
+    },
+    // 点击查找
+    find () {
+      this.myData.pageNum = 1
+      this.getRZList(this.myData)
+    },
+    // 封装获取用户列表方法
+    async getRZList (data) {
+      const res = await getRZList(data)
+      this.total = res.data.total
+      this.tableData = res.data.list
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 调用获取列表方法
+    this.getRZList(this.myData)
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.system2 {
+  /deep/#mytitle > span {
+    font-weight: 800;
+  }
+  display: flex;
+  .right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+  }
+
+  .conten {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    .middle {
+      position: relative;
+              .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      .select {
+        color: black;
+        padding: 30px 0 0 0;
+        & > span {
+          margin-left: 30px;
+        }
+      }
+      .table {
+        /deep/.el-table__body-wrapper{
+          max-width: 1634px;
+          max-height: 560px;
+          overflow-y: auto;
+        }
+        // max-height: 640px;
+        // overflow: auto;
+        padding: 24px;
+      }
+    }
+  }
+}
+</style>