增加用户列表 角色列表

.env.development

@@ -2,4 +2,7 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://localhost:18015'
+# VUE_APP_BASE_API = 'http://localhost:18015'
+
+# base api
+VUE_APP_BASE_API = 'http://192.168.2.75:18015'

src/router/index.js

@@ -126,13 +126,31 @@ export const asyncRoutes = [
         path: 'roles',
         component: () => import('@/views/sys/roles/index'),
         name: 'SysRoles',
-        meta: { title: '角色列表', icon: 'lock' }
+        meta: { title: '角色列表', icon: 'lock' },
+        children: [
+          {
+            path: 'form',
+            hidden: true,
+            component: () => import('@/views/sys/roles/form'),
+            name: 'SysRolesForm',
+            meta: { title: '添加角色' }
+          }
+        ]
       },
       {
         path: 'users',
         component: () => import('@/views/sys/users/index'),
         name: 'SysUsers',
-        meta: { title: '用户列表', icon: 'user' }
+        meta: { title: '用户列表', icon: 'user' },
+        children: [
+          {
+            path: 'form',
+            hidden: true,
+            component: () => import('@/views/sys/users/form'),
+            name: 'SysUsersForm',
+            meta: { title: '添加用户' }
+          }
+        ]
       },
       {
         path: 'icons',

src/views/sys/roles/form.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <h1>菜单编辑</h1>
+  </div>
+</template>

src/views/sys/roles/index.vue

@@ -1,5 +1,174 @@
 <template>
   <div class="app-container">
-      <h1>角色列表</h1>
+    <div class="filter-container">
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加角色
+      </el-button>
+    </div>
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
+      <el-table-column align="center" width="50">
+        <template slot-scope="scope">{{ scope.row.id }}</template>
+      </el-table-column>
+      <el-table-column label="角色名称" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="角色描述" width="100" align="center">
+        <template slot-scope="scope">{{ scope.row.desc }}</template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
+      </el-table-column>
+      <el-table-column label="更新时间" align="center">
+        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleShowNextLevel(scope.$index, scope.row)">分配
+          </el-button>
+          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
+          </el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
   </div>
 </template>
+
+<script>
+import { fetchList, deleteMenu } from '@/api/menu'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'MenuList',
+  components: { Pagination },
+  filters: {
+    levelFilter(value) {
+      if (value === 0) {
+        return '一级'
+      } else if (value === 1) {
+        return '二级'
+      }
+    },
+    iconFilter(value) {
+      if (!value) {
+        return ''
+      }
+      if (value.substr(0, 7) === 'el-icon') {
+        return '<i class="' + value + '" />'
+      } else {
+        return '<svg-icon :icon-class="' + value + '" />'
+      }
+    },
+    disableNextLevel(value) {
+      if (value === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: [
+        {
+          id: 1,
+          name: 'admim',
+          desc: '管理员',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 2,
+          name: 'user',
+          desc: '普通用户',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 3,
+          name: 'admim',
+          desc: '管理员',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        }
+      ],
+      total: 5,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        parentId: 0
+      }
+    }
+  },
+  watch: {
+    $route(route) {
+      this.resetParentId()
+      // this.getList()
+    }
+  },
+  created() {
+    this.resetParentId()
+    // this.getList()
+  },
+  methods: {
+    isElementIcon(value) {
+      return value.substr(0, 7) === 'el-icon'
+    },
+    resetParentId() {
+      this.listQuery.pageNum = 1
+      if (this.$route.query.parentId != null) {
+        this.parentId = this.$route.query.parentId
+      } else {
+        this.parentId = 0
+      }
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.listLoading = false
+        console.log(response)
+        this.list = response.data.results
+        this.total = response.data.totalRecord
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleShowNextLevel(index, row) {
+      this.$router.push({ path: '/sys/roles', query: { parentId: row.id }})
+    },
+    handleUpdate(index, row) {
+      this.$router.push({ path: '/sys/roles/form', query: { id: row.id }})
+    },
+    handleCreate() {
+      this.$router.push({ path: '/sys/roles/form' })
+    },
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该菜单', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteMenu(row.id).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/sys/users/form.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="app-container">
+    <h1>菜单编辑</h1>
+  </div>
+</template>

src/views/sys/users/index.vue

@@ -1,5 +1,177 @@
 <template>
   <div class="app-container">
-      <h1>用户列表</h1>
+    <div class="filter-container">
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加用户
+      </el-button>
+    </div>
+    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
+      <el-table-column align="center" width="50">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column label="头像" align="center">
+        <template slot-scope="scope">
+          <img :src="scope.row.avatar" alt="" width="50" height="50">
+        </template>
+      </el-table-column>
+      <el-table-column label="登录名" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="姓名" width="100" align="center">
+        <template slot-scope="scope">{{ scope.row.desc }}</template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
+      </el-table-column>
+      <el-table-column label="更新时间" align="center">
+        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
+          </el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
   </div>
 </template>
+
+<script>
+import { fetchList, deleteMenu } from '@/api/menu'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'MenuList',
+  components: { Pagination },
+  filters: {
+    levelFilter(value) {
+      if (value === 0) {
+        return '一级'
+      } else if (value === 1) {
+        return '二级'
+      }
+    },
+    iconFilter(value) {
+      if (!value) {
+        return ''
+      }
+      if (value.substr(0, 7) === 'el-icon') {
+        return '<i class="' + value + '" />'
+      } else {
+        return '<svg-icon :icon-class="' + value + '" />'
+      }
+    },
+    disableNextLevel(value) {
+      if (value === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: [
+        {
+          id: 1,
+          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
+          name: 'admin',
+          desc: '超超',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 2,
+          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
+          name: 'zhengjigyi',
+          desc: '翼翼',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        },
+        {
+          id: 3,
+          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
+          name: 'wuxiaoyan',
+          desc: 'yanyan',
+          creatTime: '2021-12-16 16:15:52',
+          updateTime: '2021-12-16 16:15:52'
+        }
+      ],
+      total: 5,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        parentId: 0
+      }
+    }
+  },
+  watch: {
+    $route(route) {
+      this.resetParentId()
+      // this.getList()
+    }
+  },
+  created() {
+    this.resetParentId()
+    // this.getList()
+  },
+  methods: {
+    isElementIcon(value) {
+      return value.substr(0, 7) === 'el-icon'
+    },
+    resetParentId() {
+      this.listQuery.pageNum = 1
+      if (this.$route.query.parentId != null) {
+        this.parentId = this.$route.query.parentId
+      } else {
+        this.parentId = 0
+      }
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.listLoading = false
+        console.log(response)
+        this.list = response.data.results
+        this.total = response.data.totalRecord
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1.5 * 1000)
+      })
+    },
+    handleUpdate(index, row) {
+      this.$router.push({ path: '/sys/users/form', query: { id: row.id }})
+    },
+    handleCreate() {
+      this.$router.push({ path: '/sys/users/form' })
+    },
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该菜单', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteMenu(row.id).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>