From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化
---
admin/src/views/system/menu.vue | 261 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 261 insertions(+), 0 deletions(-)
diff --git a/admin/src/views/system/menu.vue b/admin/src/views/system/menu.vue
new file mode 100644
index 0000000..02ab31d
--- /dev/null
+++ b/admin/src/views/system/menu.vue
@@ -0,0 +1,261 @@
+<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
+ :height="tableHeightNew"
+ ref="table"
+ v-loading="isWorking.search"
+ :data="tableData.list"
+ 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" @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()
+ .then(records => {
+ this.tableData.list = records
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.isWorking.search = false
+ })
+ },
+ /**
+ * 鎺掑簭
+ *
+ * @param direction 鏂瑰悜锛屽彇鍊糩top:涓婄Щ, bottom:涓嬬Щ]
+ */
+ 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
+ })
+ },
+ /**
+ * 鍚敤/绂佺敤
+ *
+ * @param row 琛屽璞�
+ */
+ switchDisabled (row) {
+ const newValue = row.disabled
+ row.disabled = !row.disabled
+ // 寮�鍚�
+ if (!newValue) {
+ this.__updateMenuStatus(row, newValue)
+ return
+ }
+ // 绂佺敤
+ this.$dialog.disableConfirm(`纭绂佺敤 ${row.name} 鑿滃崟鍚楋紵`)
+ .then(() => {
+ this.__updateMenuStatus(row, newValue)
+ })
+ .catch(() => {
+ })
+ },
+ /**
+ * 鏌ヨ鐖惰妭鐐�
+ *
+ * @param id 鑺傜偣ID
+ * @param parent 鍦ㄥ摢涓埗鑺傜偣涓繘琛屾煡鎵�
+ * @returns {null|{children}|*|*|undefined|null}
+ * @private
+ */
+ __findParent (id, parent) {
+ if (parent.children == null || parent.children.length === 0) {
+ return
+ }
+ for (const row of parent.children) {
+ if (row.id === id) {
+ return parent
+ }
+ if (row.children.length > 0) {
+ const target = this.__findParent(id, row)
+ if (target != null) {
+ return target
+ }
+ }
+ }
+ return null
+ },
+ /**
+ * 淇敼鑿滃崟鐘舵��
+ *
+ * @param row 琛屽璞�
+ * @param newValue 鏂板��
+ * @private
+ */
+ __updateMenuStatus (row, newValue) {
+ updateStatus({
+ id: row.id,
+ parentId: row.parentId,
+ disabled: newValue
+ })
+ .then(() => {
+ row.disabled = newValue
+ this.$tip.apiSuccess('淇敼鎴愬姛')
+ })
+ .catch(e => {
+ 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-wrap {
+ padding-bottom: 16px;
+ }
+ }
+}
+// 鍥炬爣鍒�
+.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