|
|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-page-header v-if="parentTitle" @back="goBack" :content="parentTitle + ' 下的子菜单'"></el-page-header>
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-select v-model="listQuery.level" style="width: 140px" class="filter-item" @change="handleFilter">
|
|
|
+ <el-option v-for="item in levelOptions" :key="item.key" :label="item.label" :value="item.key" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="listQuery.status" style="width: 140px" class="filter-item" @change="handleFilter">
|
|
|
+ <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
|
|
|
+ </el-select>
|
|
|
+ <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="{row}">{{ row.id }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="菜单名称" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.title }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="菜单级数" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.level | levelFilter }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="路由名称" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.name }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="前端图标" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <i v-if="isElementIcon(row.icon)" :class="row.icon" />
|
|
|
+ <svg-icon v-else-if="row.icon" :icon-class="row.icon" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.status | statusFilter }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">{{ row.sort }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="200" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-button size="mini" type="text" @click="handleUpdate(row)">编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" type="text" :disabled="row.level | disableNextLevel" @click="handleShowNextLevel(row)">子菜单
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" type="text" @click="handleDelete(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 '二级'
|
|
|
+ } else if (value === 2) {
|
|
|
+ return '三级'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ statusFilter(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: null,
|
|
|
+ total: 5,
|
|
|
+ listLoading: true,
|
|
|
+ parentTitle: '',
|
|
|
+ listQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ parentId: '',
|
|
|
+ level: '',
|
|
|
+ status: ''
|
|
|
+ },
|
|
|
+ levelOptions: [
|
|
|
+ { label: '菜单级数', key: '' },
|
|
|
+ { label: '一级菜单', key: '0' },
|
|
|
+ { label: '二级菜单', key: '1' },
|
|
|
+ { label: '三级菜单', key: '2' }
|
|
|
+ ],
|
|
|
+ statusOptions: [
|
|
|
+ { label: '状态', key: '' },
|
|
|
+ { label: '启用', key: '0' },
|
|
|
+ { label: '停用', key: '1' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(route) {
|
|
|
+ this.resetParentId()
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.resetParentId()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ isElementIcon(value) {
|
|
|
+ return value && value.substr(0, 7) === 'el-icon'
|
|
|
+ },
|
|
|
+ resetParentId() {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ if (this.$route.query.parentId != null) {
|
|
|
+ this.listQuery.parentId = this.$route.query.parentId
|
|
|
+ this.parentTitle = this.$route.query.title
|
|
|
+ } else {
|
|
|
+ this.listQuery.parentId = ''
|
|
|
+ this.parentTitle = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFilter() {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ fetchList(this.listQuery).then(response => {
|
|
|
+ this.listLoading = false
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ this.$router.push({ path: '/sys/menus/list' })
|
|
|
+ },
|
|
|
+ handleShowNextLevel(row) {
|
|
|
+ this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title } })
|
|
|
+ },
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.$router.push({ path: '/sys/menus/form', query: { id: row.id } })
|
|
|
+ },
|
|
|
+ handleCreate() {
|
|
|
+ this.$router.push({ path: '/sys/menus/form' })
|
|
|
+ },
|
|
|
+ handleDelete(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>
|
chao