From fa1f9b4100da8fd2c90802dbffc21f76d7b9f5ba Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Thu, 10 Jul 2025 18:18:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor(system):=20=E7=BE=8E=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=96=B0=E7=89=88=E6=9C=AC=EF=BC=8C=E5=A4=87=E4=BB=BD?=
 =?UTF-8?q?=EF=BC=9A=E6=9C=AA=E7=BE=8E=E5=8C=96=E3=80=81=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=8F=AA=E8=83=BD=E4=BF=AE=E6=94=B9=E5=9B=BE=E6=A0=87=E3=80=81?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=90=8D=E7=A7=B0=E3=80=81=E9=A1=BA=E5=BA=8F?=
 =?UTF-8?q?=E7=9A=84=E4=B8=BAbackup2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化页面布局，使用卡片化设计
- 改进搜索表单样式，增加标签加粗和间距调整
- 更新表格样式，增加斑马纹和悬浮高亮效果
- 调整对话框样式，优化表单项和按钮布局
- 新增部分功能：
  - 菜单图标选择功能
  -展开/折叠全部菜单功能  - 修改菜单时显示菜单名称
  - 取消新增菜单的直接添加功能
  - 删除菜单功能
- 优化代码结构，提高可维护性
---
 src/views/system/menu/backuo2.vue | 331 ++++++++++++++++++++++++++++++
 src/views/system/menu/index.vue   | 222 ++++++++++++++------
 2 files changed, 491 insertions(+), 62 deletions(-)
 create mode 100644 src/views/system/menu/backuo2.vue

diff --git a/src/views/system/menu/backuo2.vue b/src/views/system/menu/backuo2.vue
new file mode 100644
index 0000000..49073e8
--- /dev/null
+++ b/src/views/system/menu/backuo2.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="菜单名称" prop="menuName">
+        <el-input
+          v-model="queryParams.menuName"
+          placeholder="请输入菜单名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="primary"-->
+      <!--          plain-->
+      <!--          icon="el-icon-plus"-->
+      <!--          size="mini"-->
+      <!--          @click="handleAdd"-->
+      <!--          v-hasPermi="['system:menu:add']"-->
+      <!--        >新增</el-button>-->
+      <!--      </el-col>-->
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="menuList"
+      row-key="menuId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="menuName" align="left" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column prop="icon" label="图标" align="center" width="100">
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+      <!--      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>-->
+      <!--      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>-->
+      <!--      <el-table-column prop="status" label="状态" width="80">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column label="创建时间" align="center" prop="createTime">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <el-table-column label="操作" width="200px" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:edit']"
+          >修改</el-button>
+          <!--          <el-button-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-plus"-->
+          <!--            @click="handleAdd(scope.row)"-->
+          <!--            v-hasPermi="['system:menu:add']"-->
+          <!--          >新增</el-button>-->
+          <!--          <el-button-->
+          <!--            size="mini"-->
+          <!--            type="text"-->
+          <!--            icon="el-icon-delete"-->
+          <!--            @click="handleDelete(scope.row)"-->
+          <!--            v-hasPermi="['system:menu:remove']"-->
+          <!--          >删除</el-button>-->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改菜单对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="菜单图标" prop="icon">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
+                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
+                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                  <svg-icon
+                    v-if="form.icon"
+                    slot="prefix"
+                    :icon-class="form.icon"
+                    style="width: 25px;"
+                  />
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单名称" prop="menuName">
+              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
+
+export default {
+  name: "Menu",
+  dicts: ['sys_show_hide', 'sys_normal_disable'],
+  components: { Treeselect, IconSelect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 菜单表格树数据
+      menuList: [],
+      // 菜单树选项
+      menuOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 是否为修改
+      isEdit: false,
+      // 查询参数
+      queryParams: {
+        menuName: undefined,
+        visible: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        menuName: [
+          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+        ],
+        orderNum: [
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+        ],
+        path: [
+          { required: true, message: "路由地址不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.form.icon = name;
+    },
+    /** 查询菜单列表 */
+    getList() {
+      this.loading = true;
+      listMenu(this.queryParams).then(response => {
+        this.menuList = this.handleTree(response.data, "menuId");
+        this.loading = false;
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children
+      };
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect() {
+      listMenu().then(response => {
+        this.menuOptions = [];
+        const menu = { menuId: 0, menuName: '主类目', children: [] };
+        menu.children = this.handleTree(response.data, "menuId");
+        this.menuOptions.push(menu);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        menuId: undefined,
+        parentId: 0,
+        menuName: undefined,
+        icon: undefined,
+        menuType: "M",
+        orderNum: undefined,
+        isFrame: "1",
+        isCache: "0",
+        visible: "0",
+        status: "0"
+      };
+      this.resetForm("form");
+      this.isEdit = false;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.menuId) {
+        this.form.parentId = row.menuId;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加菜单";
+      this.isEdit = false;
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      getMenu(row.menuId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改菜单";
+        this.isEdit = true;
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.menuId != undefined) {
+            updateMenu(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addMenu(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
+        return delMenu(row.menuId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 21dfefa..fb40c26 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,31 +1,32 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="菜单名称" prop="menuName">
-        <el-input
-          v-model="queryParams.menuName"
-          placeholder="请输入菜单名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card shadow="never">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="菜单名称" prop="menuName">
+          <el-input
+            v-model="queryParams.menuName"
+            placeholder="请输入菜单名称"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+            <el-option
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
 
-    <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="mb8">
 <!--      <el-col :span="1.5">-->
 <!--        <el-button-->
 <!--          type="primary"-->
@@ -55,6 +56,7 @@
       row-key="menuId"
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :stripe="true"
     >
       <el-table-column prop="menuName" align="left" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
@@ -101,47 +103,63 @@
         </template>
       </el-table-column>
     </el-table>
+    </el-card>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="菜单图标" prop="icon">
-              <el-popover
-                placement="bottom-start"
-                width="460"
-                trigger="click"
-                @show="$refs['iconSelect'].reset()"
-              >
-                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                  <svg-icon
-                    v-if="form.icon"
-                    slot="prefix"
-                    :icon-class="form.icon"
-                    style="width: 25px;"
-                  />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                </el-input>
-              </el-popover>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="菜单名称" prop="menuName">
-              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-        </el-row>
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-position="top">
+<!--        <el-row>-->
+          <!--          <el-col :span="24">-->
+          <!--            <el-form-item label="上级菜单" prop="parentId">-->
+          <!--              <treeselect-->
+          <!--                v-model="form.parentId"-->
+          <!--                :options="menuOptions"-->
+          <!--                :normalizer="normalizer"-->
+          <!--                :show-count="true"-->
+          <!--                placeholder="请选择上级菜单"-->
+          <!--              />-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+          <el-form-item label="菜单图标" prop="icon">
+            <el-popover
+              placement="bottom-start"
+              width="460"
+              trigger="click"
+              @show="$refs['iconSelect'].reset()"
+            >
+              <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
+              <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                <svg-icon
+                  v-if="form.icon"
+                  slot="prefix"
+                  :icon-class="form.icon"
+                  style="width: 25px;"
+                />
+                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+              </el-input>
+            </el-popover>
+          </el-form-item>
+          <el-form-item label="菜单名称" prop="menuName">
+            <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+          </el-form-item>
+          <el-form-item label="显示排序" prop="orderNum">
+            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%;" />
+          </el-form-item>
+          <!--          <el-col :span="12" v-if="form.menuType != 'F'">-->
+          <!--            <el-form-item prop="isFrame">-->
+          <!--              <span slot="label">-->
+          <!--                <el-radio-group v-model="form.isFrame">-->
+          <!--                  <el-radio label="1">是</el-radio>-->
+          <!--                  <el-radio label="0">否</el-radio>-->
+          <!--                </el-radio-group>-->
+          <!--              </span>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
+<!--        </el-row>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button @click="cancel" icon="el-icon-close">取 消</el-button>
+        <el-button type="primary" @click="submitForm" icon="el-icon-check">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -293,7 +311,7 @@ export default {
       getMenu(row.menuId).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改菜单";
+        this.title = `修改菜单 - ${row.menuName}`;
         this.isEdit = true;
       });
     },
@@ -329,3 +347,83 @@ export default {
   }
 };
 </script>
+
+<style scoped lang="scss">
+/* 卡片化布局美化 */
+.el-card {
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+  padding: 16px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* 搜索表单横向排列，增加间距 */
+.app-container .el-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 12px;
+  row-gap: 8px;
+  margin-bottom: 16px;
+}
+
+/* 搜索表单标签加粗 */
+.el-form-item__label {
+  font-weight: 500;
+}
+
+/* 斑马纹表格行悬停高亮 */
+.el-table__body tr:hover > td {
+  background-color: #f0f9ff !important;
+  color: #409EFF;
+}
+
+/* 表格标题加粗 */
+.el-table th {
+  font-weight: 600;
+  color: #303133;
+  background-color: #fafafa;
+}
+
+/* 操作按钮颜色 */
+.el-button--text {
+  color: #409EFF;
+  font-weight: 500;
+}
+.el-button--text:hover {
+  color: #66b1ff;
+  text-decoration: underline;
+}
+
+/* 对话框标题加粗 */
+.el-dialog__title {
+  font-weight: 600;
+  color: #303133;
+}
+
+/* 对话框表单项上下留白 */
+.el-dialog .el-form-item {
+  margin-bottom: 18px;
+}
+
+/* 对话框底部按钮右对齐，并增加间距 */
+.dialog-footer {
+  text-align: right;
+
+  .el-button + .el-button {
+    margin-left: 12px;
+  }
+}
+
+/* 确认按钮更突出 */
+.dialog-footer .el-button--primary {
+  background-color: #409EFF;
+  border-color: #409EFF;
+  font-weight: 500;
+}
+.dialog-footer .el-button--primary:hover {
+  background-color: #66b1ff;
+  border-color: #66b1ff;
+}
+</style>