|
@@ -5,47 +5,61 @@
|
|
|
<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 v-if="checkPermission('sys:menu:edit')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
|
|
+ <el-button
|
|
|
+ v-if="checkPermission('sys:menu:edit')"
|
|
|
+ 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 :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
|
|
|
<el-table-column label="序号" align="center" width="50">
|
|
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="菜单ID" align="center">
|
|
|
- <template slot-scope="{row}">{{ row.id }}</template>
|
|
|
+ <template slot-scope="{ row }">{{ row.id }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="菜单名称" align="center">
|
|
|
- <template slot-scope="{row}">{{ row.title }}</template>
|
|
|
+ <template slot-scope="{ row }">{{ row.title }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="路由名称" align="center">
|
|
|
- <template slot-scope="{row}">{{ row.name }}</template>
|
|
|
+ <template slot-scope="{ row }">{{ row.name }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="前端图标" width="80" align="center">
|
|
|
- <template slot-scope="{row}">
|
|
|
- <i v-if="isElementIcon(row.icon)" :class="row.icon" />
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <i v-if="isElementIcon(row.icon)" :class="row.icon"> </i>
|
|
|
<svg-icon v-else-if="row.icon" :icon-class="row.icon" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="状态" width="80" align="center">
|
|
|
- <template slot-scope="{row}">
|
|
|
- <el-switch v-model="row.status" :active-value="0" :inactive-value="1" active-color="#1890ff" inactive-color="#DCDFE6" @change="handleHiddenChange($index, row)" />
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-switch
|
|
|
+ v-model="row.status"
|
|
|
+ :active-value="0"
|
|
|
+ :inactive-value="1"
|
|
|
+ active-color="#1890ff"
|
|
|
+ inactive-color="#DCDFE6"
|
|
|
+ @change="handleHiddenChange($index, row)"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="排序" width="80" align="center">
|
|
|
- <template slot-scope="{row}">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
<el-input v-model="row.sort" maxlength="4" minlength="1" @blur="handleOnInputBlur(row)" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="设置" width="250" align="center">
|
|
|
- <template slot-scope="{row}">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
<el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单</el-button>
|
|
|
<el-button v-if="checkPermission('sys:menu:edit')" plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" width="150" align="center">
|
|
|
- <template slot-scope="{row}">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
<el-button v-if="checkPermission('sys:menu:edit')" size="mini" type="primary" @click="handleUpdate(row)">编辑
|
|
|
</el-button>
|
|
|
<el-button v-if="checkPermission('sys:menu:del')" size="mini" type="danger" @click="handleDelete(row)">删除
|
|
@@ -54,8 +68,13 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
- <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
|
|
|
-
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="listQuery.pageNum"
|
|
|
+ :limit.sync="listQuery.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -128,7 +147,7 @@ export default {
|
|
|
},
|
|
|
getList() {
|
|
|
this.listLoading = true
|
|
|
- fetchList(this.listQuery).then(response => {
|
|
|
+ fetchList(this.listQuery).then((response) => {
|
|
|
this.listLoading = false
|
|
|
this.list = response.data.results
|
|
|
this.total = response.data.totalRecord
|
|
@@ -145,10 +164,16 @@ export default {
|
|
|
this.$router.go(-1)
|
|
|
},
|
|
|
handleCreate() {
|
|
|
- this.$router.push({ path: '/sys/menus/add', query: { parentId: this.listQuery.parentId, title: this.parentTitle }})
|
|
|
+ this.$router.push({
|
|
|
+ path: '/sys/menus/add',
|
|
|
+ query: { parentId: this.listQuery.parentId, title: this.parentTitle }
|
|
|
+ })
|
|
|
},
|
|
|
handleUpdate(row) {
|
|
|
- this.$router.push({ path: '/sys/menus/edit', query: { id: row.id, parentId: this.listQuery.parentId, title: this.parentTitle }})
|
|
|
+ this.$router.push({
|
|
|
+ path: '/sys/menus/edit',
|
|
|
+ query: { id: row.id, parentId: this.listQuery.parentId, title: this.parentTitle }
|
|
|
+ })
|
|
|
},
|
|
|
handleShowNextLevel(row) {
|
|
|
this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title }})
|
|
@@ -162,7 +187,7 @@ export default {
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
- deleteMenu(row.id).then(response => {
|
|
|
+ deleteMenu(row.id).then((response) => {
|
|
|
this.$message({
|
|
|
message: '删除成功',
|
|
|
type: 'success',
|
|
@@ -174,7 +199,7 @@ export default {
|
|
|
},
|
|
|
handleOnInputBlur(row) {
|
|
|
// 更新排序
|
|
|
- updateSelective(row.id, { sort: row.sort }).then(response => {
|
|
|
+ updateSelective(row.id, { sort: row.sort }).then((response) => {
|
|
|
this.$message({
|
|
|
message: '操作成功',
|
|
|
type: 'success',
|
|
@@ -185,7 +210,7 @@ export default {
|
|
|
},
|
|
|
handleHiddenChange(index, row) {
|
|
|
// 操作开关
|
|
|
- updateSelective(row.id, { status: row.status }).then(response => {
|
|
|
+ updateSelective(row.id, { status: row.status }).then((response) => {
|
|
|
this.$message({
|
|
|
message: '操作成功',
|
|
|
type: 'success',
|
|
@@ -210,5 +235,4 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-</style>
|
|
|
+<style scoped></style>
|