From 5019ed6016b47221321bf395cd102dc4b51b4724 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期一, 05 二月 2024 09:40:43 +0800
Subject: [PATCH] Mr.Shi
---
platform/src/views/system/menuCom.vue | 444 +++++++++++++++++++++++++++---------------------------
1 files changed, 222 insertions(+), 222 deletions(-)
diff --git a/platform/src/views/system/menuCom.vue b/platform/src/views/system/menuCom.vue
index 8481f79..f6d5792 100644
--- a/platform/src/views/system/menuCom.vue
+++ b/platform/src/views/system/menuCom.vue
@@ -1,231 +1,231 @@
<template>
- <TableLayout class="menu-layout" :permissions="['system:menu:query']">
- <!-- 琛ㄦ牸鍜屽垎椤� -->
- <template v-slot:table-wrap>
- <ul class="toolbar" v-permissions="['system:menu:create', 'system:menu:delete', 'system:menu:sort']">
- <li><el-button type="primary" @click="$refs.operaMenuWindow.open('鏂板缓涓�绾ц彍鍗�')" icon="el-icon-plus" v-permissions="['system:menu:create']">鏂板缓</el-button></li>
- <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['system:menu:delete']">鍒犻櫎</el-button></li>
- <li><el-button @click="sort('top')" :loading="isWorking.sort" icon="el-icon-sort-up" v-permissions="['system:menu:sort']">涓婄Щ</el-button></li>
- <li><el-button @click="sort('bottom')" :loading="isWorking.sort" icon="el-icon-sort-down" v-permissions="['system:menu:sort']">涓嬬Щ</el-button></li>
- </ul>
- <el-table
- ref="table"
- v-loading="isWorking.search"
- :data="tableData.list"
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
- row-key="id"
- stripe
- :default-expand-all="false"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55" fixed="left"></el-table-column>
- <el-table-column prop="name" label="鑿滃崟鍚嶇О" fixed="left" min-width="160px"></el-table-column>
- <el-table-column prop="icon" label="鍥炬爣" min-width="80px" class-name="table-column-icon">
- <template slot-scope="{row}">
- <i v-if="row.icon != null && row.icon !== ''" :class="{[row.icon]: true}"></i>
- <template v-else>鏈缃�</template>
- </template>
- </el-table-column>
- <el-table-column prop="path" label="璁块棶璺緞" min-width="140px"></el-table-column>
- <el-table-column prop="remark" label="澶囨敞" min-width="120px"></el-table-column>
- <el-table-column prop="createUser" label="鍒涘缓浜�" min-width="100px">
- <template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.username}}</template>
- </el-table-column>
- <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="140px"></el-table-column>
- <el-table-column prop="updateUser" label="鏇存柊浜�" min-width="100px">
- <template slot-scope="{row}">{{row.updateUserInfo == null ? '' : row.updateUserInfo.username}}</template>
- </el-table-column>
- <el-table-column prop="updateTime" label="鏇存柊鏃堕棿" min-width="140px"></el-table-column>
- <el-table-column prop="disabled" label="鏄惁鍚敤" min-width="80px">
- <template slot-scope="{row}">
- <el-switch v-model="row.disabled" :active-value="false" :inactive-value="true" @change="switchDisabled(row)"/>
- </template>
- </el-table-column>
- <el-table-column
- v-if="containPermissions(['system:menu:update', 'system:menu:create', 'system:menu:delete'])"
- label="鎿嶄綔"
- min-width="220"
- fixed="right"
- >
- <template slot-scope="{row}">
- <el-button type="text" icon="el-icon-edit" @click="$refs.operaMenuWindow.open('缂栬緫鑿滃崟', row)" v-permissions="['system:menu:update']">缂栬緫</el-button>
- <el-button type="text" icon="el-icon-plus" @click="$refs.operaMenuWindow.open('鏂板缓瀛愯彍鍗�', null, row)" v-permissions="['system:menu:create']">鏂板缓瀛愯彍鍗�</el-button>
- <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:menu:delete']">鍒犻櫎</el-button>
- </template>
- </el-table-column>
- </el-table>
- </template>
- <!-- 鏂板缓/淇敼 -->
- <OperaMenuWindow ref="operaMenuWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/>
- </TableLayout>
+ <TableLayout class="menu-layout" :permissions="['system:menu:query']">
+ <!-- 琛ㄦ牸鍜屽垎椤� -->
+ <template v-slot:table-wrap>
+ <ul class="toolbar" v-permissions="['system:menu:create', 'system:menu:delete', 'system:menu:sort']">
+ <li><el-button type="primary" @click="$refs.operaMenuWindow.open('鏂板缓浼佷笟涓�绾ц彍鍗�')" icon="el-icon-plus" v-permissions="['system:menu:create']">鏂板缓</el-button></li>
+ <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['system:menu:delete']">鍒犻櫎</el-button></li>
+ <li><el-button @click="sort('top')" :loading="isWorking.sort" icon="el-icon-sort-up" v-permissions="['system:menu:sort']">涓婄Щ</el-button></li>
+ <li><el-button @click="sort('bottom')" :loading="isWorking.sort" icon="el-icon-sort-down" v-permissions="['system:menu:sort']">涓嬬Щ</el-button></li>
+ </ul>
+ <el-table
+ ref="table"
+ v-loading="isWorking.search"
+ :data="tableData.list"
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+ row-key="id"
+ stripe
+ default-expand-all
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55" fixed="left"></el-table-column>
+ <el-table-column prop="name" label="鑿滃崟鍚嶇О" fixed="left" min-width="160px"></el-table-column>
+ <el-table-column prop="icon" label="鍥炬爣" min-width="80px" class-name="table-column-icon">
+ <template slot-scope="{row}">
+ <i v-if="row.icon != null && row.icon !== ''" :class="{[row.icon]: true}"></i>
+ <template v-else>鏈缃�</template>
+ </template>
+ </el-table-column>
+ <el-table-column prop="path" label="璁块棶璺緞" min-width="140px"></el-table-column>
+ <el-table-column prop="remark" label="澶囨敞" min-width="120px"></el-table-column>
+ <el-table-column prop="createUser" label="鍒涘缓浜�" min-width="100px">
+ <template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.username}}</template>
+ </el-table-column>
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="140px"></el-table-column>
+ <el-table-column prop="updateUser" label="鏇存柊浜�" min-width="100px">
+ <template slot-scope="{row}">{{row.updateUserInfo == null ? '' : row.updateUserInfo.username}}</template>
+ </el-table-column>
+ <el-table-column prop="updateTime" label="鏇存柊鏃堕棿" min-width="140px"></el-table-column>
+ <el-table-column prop="disabled" label="鏄惁鍚敤" min-width="80px">
+ <template slot-scope="{row}">
+ <el-switch v-model="row.disabled" :active-value="false" :inactive-value="true" @change="switchDisabled(row)"/>
+ </template>
+ </el-table-column>
+ <el-table-column
+ v-if="containPermissions(['system:menu:update', 'system:menu:create', 'system:menu:delete'])"
+ label="鎿嶄綔"
+ min-width="220"
+ fixed="right"
+ >
+ <template slot-scope="{row}">
+ <el-button type="text" icon="el-icon-edit" @click="$refs.operaMenuWindow.open('缂栬緫浼佷笟鑿滃崟', row)" v-permissions="['system:menu:update']">缂栬緫</el-button>
+ <el-button type="text" icon="el-icon-plus" @click="$refs.operaMenuWindow.open('鏂板缓浼佷笟瀛愯彍鍗�', null, row)" v-permissions="['system:menu:create']">鏂板缓瀛愯彍鍗�</el-button>
+ <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:menu:delete']">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </template>
+ <!-- 鏂板缓/淇敼 -->
+ <OperaMenuWindow ref="operaMenuWindow" type="1" @success="handlePageChange(tableData.pagination.pageIndex)"/>
+ </TableLayout>
</template>
<script>
- import TableLayout from '@/layouts/TableLayout'
- import BaseTable from '@/components/base/BaseTable'
- import OperaMenuWindow from '@/components/system/menu/OperaMenuWindow'
- import { fetchTree, updateStatus, sort } from '@/api/system/menu'
- export default {
- name: 'SystemMenu',
- extends: BaseTable,
- components: { OperaMenuWindow, TableLayout },
- data () {
- return {
- // 鏄惁姝ｅ湪澶勭悊涓�
- isWorking: {
- sort: false
- }
- }
- },
- methods: {
- // 鏌ヨ鏁版嵁
- handlePageChange () {
- this.isWorking.search = true
- fetchTree(1)
- .then(records => {
- this.tableData.list = records
- })
- .catch(e => {
- this.$tip.apiFailed(e)
- })
- .finally(() => {
- this.isWorking.search = false
- })
- },
- // 鎺掑簭
- sort (direction) {
- if (this.isWorking.sort) {
- return
- }
- if (this.tableData.selectedRows.length === 0) {
- this.$tip.warning('璇烽�夋嫨涓�鏉℃暟鎹�')
- return
- }
- if (this.tableData.selectedRows.length > 1) {
- this.$tip.warning('鎺掑簭鏃朵粎鍏佽閫夋嫨涓�鏉℃暟鎹�')
- return
- }
- const menuId = this.tableData.selectedRows[0].id
- // 鎵惧埌鑿滃崟鑼冨洿
- let menuPool
- for (const rootMenu of this.tableData.list) {
- const parent = this.__findParent(menuId, rootMenu)
- if (parent != null) {
- menuPool = parent.children
- }
- }
- menuPool = menuPool || this.tableData.list
- const menuIndex = menuPool.findIndex(menu => menu.id === menuId)
- // 涓婄Щ鏍￠獙
- if (direction === 'top' && menuIndex === 0) {
- this.$tip.warning('鑿滃崟宸插埌椤堕儴')
- return
- }
- // 涓嬬Щ鏍￠獙
- if (direction === 'bottom' && menuIndex === menuPool.length - 1) {
- this.$tip.warning('鑿滃崟宸插埌搴曢儴')
- return
- }
- this.isWorking.sort = true
- sort({
- id: this.tableData.selectedRows[0].id,
- direction
- })
- .then(() => {
- if (direction === 'top') {
- menuPool.splice(menuIndex, 0, menuPool.splice(menuIndex - 1, 1)[0])
- } else {
- menuPool.splice(menuIndex, 0, menuPool.splice(menuIndex + 1, 1)[0])
- }
- })
- .catch(e => {
- this.$tip.apiFailed(e)
- })
- .finally(() => {
- this.isWorking.sort = false
- })
- },
- // 鍚敤/绂佺敤鑿滃崟
- switchDisabled (row) {
- if (!row.disabled) {
- this.__updateMenuStatus(row)
- return
- }
- this.$dialog.disableConfirm(`纭绂佺敤 ${row.name} 鑿滃崟鍚楋紵`)
- .then(() => {
- this.__updateMenuStatus(row)
- }).catch(() => {
- row.disabled = !row.disabled
- })
- },
- // 鏌ヨ鐖惰妭鐐�
- __findParent (id, parent) {
- if (parent.children === 0) {
- return
- }
- for (const menu of parent.children) {
- if (menu.id === id) {
- return parent
- }
- if (menu.children.length > 0) {
- const m = this.__findParent(id, menu)
- if (m != null) {
- return m
- }
- }
- }
- return null
- },
- // 淇敼鑿滃崟鐘舵��
- __updateMenuStatus (row) {
- updateStatus({
- id: row.id,
- parentId: row.parentId,
- disabled: row.disabled
- })
- .then(() => {
- this.$tip.apiSuccess('淇敼鎴愬姛')
- })
- .catch(e => {
- row.disabled = !row.disabled
- this.$tip.apiFailed(e)
- })
- }
- },
- created () {
- this.config({
- module: '鑿滃崟',
- api: '/system/menu'
- })
- this.search()
- }
+import TableLayout from '@/layouts/TableLayout'
+import BaseTable from '@/components/base/BaseTable'
+import OperaMenuWindow from '@/components/system/menu/OperaMenuWindow'
+import { fetchTree, updateStatus, sort } from '@/api/system/menu'
+export default {
+ name: 'SystemMenu',
+ extends: BaseTable,
+ components: { OperaMenuWindow, TableLayout },
+ data () {
+ return {
+ // 鏄惁姝ｅ湪澶勭悊涓�
+ isWorking: {
+ sort: false
+ }
}
+ },
+ methods: {
+ // 鏌ヨ鏁版嵁
+ handlePageChange () {
+ this.isWorking.search = true
+ fetchTree({}, 1)
+ .then(records => {
+ this.tableData.list = records
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.isWorking.search = false
+ })
+ },
+ // 鎺掑簭
+ sort (direction) {
+ if (this.isWorking.sort) {
+ return
+ }
+ if (this.tableData.selectedRows.length === 0) {
+ this.$tip.warning('璇烽�夋嫨涓�鏉℃暟鎹�')
+ return
+ }
+ if (this.tableData.selectedRows.length > 1) {
+ this.$tip.warning('鎺掑簭鏃朵粎鍏佽閫夋嫨涓�鏉℃暟鎹�')
+ return
+ }
+ const menuId = this.tableData.selectedRows[0].id
+ // 鎵惧埌鑿滃崟鑼冨洿
+ let menuPool
+ for (const rootMenu of this.tableData.list) {
+ const parent = this.__findParent(menuId, rootMenu)
+ if (parent != null) {
+ menuPool = parent.children
+ }
+ }
+ menuPool = menuPool || this.tableData.list
+ const menuIndex = menuPool.findIndex(menu => menu.id === menuId)
+ // 涓婄Щ鏍￠獙
+ if (direction === 'top' && menuIndex === 0) {
+ this.$tip.warning('鑿滃崟宸插埌椤堕儴')
+ return
+ }
+ // 涓嬬Щ鏍￠獙
+ if (direction === 'bottom' && menuIndex === menuPool.length - 1) {
+ this.$tip.warning('鑿滃崟宸插埌搴曢儴')
+ return
+ }
+ this.isWorking.sort = true
+ sort({
+ id: this.tableData.selectedRows[0].id,
+ direction
+ })
+ .then(() => {
+ if (direction === 'top') {
+ menuPool.splice(menuIndex, 0, menuPool.splice(menuIndex - 1, 1)[0])
+ } else {
+ menuPool.splice(menuIndex, 0, menuPool.splice(menuIndex + 1, 1)[0])
+ }
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.isWorking.sort = false
+ })
+ },
+ // 鍚敤/绂佺敤鑿滃崟
+ switchDisabled (row) {
+ if (!row.disabled) {
+ this.__updateMenuStatus(row)
+ return
+ }
+ this.$dialog.disableConfirm(`纭绂佺敤 ${row.name} 鑿滃崟鍚楋紵`)
+ .then(() => {
+ this.__updateMenuStatus(row)
+ }).catch(() => {
+ row.disabled = !row.disabled
+ })
+ },
+ // 鏌ヨ鐖惰妭鐐�
+ __findParent (id, parent) {
+ if (parent.children === 0) {
+ return
+ }
+ for (const menu of parent.children) {
+ if (menu.id === id) {
+ return parent
+ }
+ if (menu.children.length > 0) {
+ const m = this.__findParent(id, menu)
+ if (m != null) {
+ return m
+ }
+ }
+ }
+ return null
+ },
+ // 淇敼鑿滃崟鐘舵��
+ __updateMenuStatus (row) {
+ updateStatus({
+ id: row.id,
+ parentId: row.parentId,
+ disabled: row.disabled
+ })
+ .then(() => {
+ this.$tip.apiSuccess('淇敼鎴愬姛')
+ })
+ .catch(e => {
+ row.disabled = !row.disabled
+ this.$tip.apiFailed(e)
+ })
+ }
+ },
+ created () {
+ this.config({
+ module: '鑿滃崟',
+ api: '/system/menu'
+ })
+ this.search()
+ }
+}
</script>
<style lang="scss" scoped>
- @import "@/assets/style/variables.scss";
- .menu-layout {
- /deep/ .table-content {
- margin-top: 0;
- }
- }
- // 鍥炬爣鍒�
- .table-column-icon {
- // element-ui鍥炬爣
- i {
- background-color: $primary-color;
- opacity: 0.72;
- font-size: 20px;
- color: #fff;
- padding: 4px;
- border-radius: 50%;
- }
- // 鑷畾涔夊浘鏍�
- [class^="eva-icon-"] {
- width: 20px;
- height: 20px;
- background-size: 16px;
- vertical-align: middle;
- }
- }
+@import "@/assets/style/variables.scss";
+.menu-layout {
+ /deep/ .table-content {
+ margin-top: 0;
+ }
+}
+// 鍥炬爣鍒�
+.table-column-icon {
+ // element-ui鍥炬爣
+ i {
+ background-color: $primary-color;
+ opacity: 0.72;
+ font-size: 20px;
+ color: #fff;
+ padding: 4px;
+ border-radius: 50%;
+ }
+ // 鑷畾涔夊浘鏍�
+ [class^="eva-icon-"] {
+ width: 20px;
+ height: 20px;
+ background-size: 16px;
+ vertical-align: middle;
+ }
+}
</style>
--
Gitblit v1.9.3