feat(菜单管理): 新增菜单启用状态切换功能，优化代码格式和操作列固定样式

src/api/system/menu/index.js

@@ -5,15 +5,14 @@ import request from '@/utils/request';
  * @param params 查询条件
  */
 export async function listMenus(params) {
-  let par = new URLSearchParams(params)
-  const res = await request.get(`/system/resources/getMenuList?`+par, {});
+  let par = new URLSearchParams(params);
+  const res = await request.get(`/system/resources/getMenuList?` + par, {});
   if (res.data.code == 0) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
 
-
 /**
  * 新增或编辑菜单信息
  * @param params 菜单信息
@@ -26,8 +25,6 @@ export async function saveOrUpdate(params) {
   return Promise.reject(new Error(res.data.message));
 }
 
-
-
 /**
  * 删除菜单
  * @param params 菜单信息
@@ -40,13 +37,6 @@ export async function deleteMenu(params) {
   return Promise.reject(new Error(res.data.message));
 }
 
-
-
-
-
-
-
-
 //--------------------原系统接口
 /**
  * 添加菜单
@@ -83,3 +73,11 @@ export async function removeMenu(id) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+export async function putRoles(params) {
+  const res = await request.post('/system/resources/updatestatus/' + params.id + '/' + params.isEnabled);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/system/menu/index.vue

@@ -24,8 +24,7 @@
             icon="el-icon-plus"
             class="ele-btn-icon"
             @click="openEdit()"
-          v-if="$hasPermission('sys:resources:save')"
-
+            v-if="$hasPermission('sys:resources:save')"
           >
             添加
           </el-button>
@@ -43,7 +42,7 @@
         </template>
         <!-- 标题列 -->
         <template v-slot:secretLevel="{ row }">
-          {{  getSecretLevel(row.secretLevel) }}
+          {{ getSecretLevel(row.secretLevel) }}
         </template>
         <!-- 类型列 -->
         <template v-slot:type="{ row }">
@@ -64,6 +63,17 @@
             按钮
           </el-tag>
         </template>
+        <template v-slot:isEnabled="{ row }">
+          <el-switch
+            v-model="row.isEnabled"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            :active-value="1"
+            :inactive-value="0"
+            @change="changeEnable(row)"
+          >
+          </el-switch>
+        </template>
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
           <el-link
@@ -71,8 +81,7 @@
             :underline="false"
             icon="el-icon-plus"
             @click="openEdit(null, row.id)"
-          v-if="$hasPermission('sys:resources:save')"
-
+            v-if="$hasPermission('sys:resources:save')"
           >
             添加
           </el-link>
@@ -81,8 +90,7 @@
             :underline="false"
             icon="el-icon-edit"
             @click="openEdit(row)"
-          v-if="$hasPermission('sys:resources:save')"
-
+            v-if="$hasPermission('sys:resources:save')"
           >
             修改
           </el-link>
@@ -90,7 +98,7 @@
             class="ele-action"
             title="确定要删除吗？"
             @confirm="remove(row)"
-            v-if="row.id != 99999&&$hasPermission('sys:resources:delete')"
+            v-if="row.id != 99999 && $hasPermission('sys:resources:delete')"
           >
             <template v-slot:reference>
               <el-link type="danger" :underline="false" icon="el-icon-delete">
@@ -113,181 +121,201 @@
 </template>
 
 <script>
-import tabMixins from '@/mixins/tableColumnsMixin';
-import MenuSearch from './components/menu-search.vue';
-import MenuEdit from './components/menu-edit.vue';
-import { listMenus, deleteMenu } from '@/api/system/menu';
-import {secretLevelList} from "../../../enum/dict";
+  import tabMixins from '@/mixins/tableColumnsMixin';
+  import MenuSearch from './components/menu-search.vue';
+  import MenuEdit from './components/menu-edit.vue';
+  import { listMenus, deleteMenu, putRoles } from '@/api/system/menu';
+  import { secretLevelList } from '../../../enum/dict';
 
-export default {
-  name: 'SystemMenu',
-  mixins: [tabMixins],
-  components: { MenuSearch, MenuEdit },
-  data() {
-    return {
-      // 表格列配置
-      columns: [
-        {
-          columnKey: 'index',
-          type: 'index',
-          width: 45,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
-        },
-        {
-          prop: 'name',
-          label: '菜单名称',
-          showOverflowTooltip: true,
-          minWidth: 110,
-          slot: 'name'
-        },
-        {
-          prop: 'url',
-          label: '路由地址',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
+  export default {
+    name: 'SystemMenu',
+    mixins: [tabMixins],
+    components: { MenuSearch, MenuEdit },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            width: 45,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'name',
+            label: '菜单名称',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            slot: 'name'
+          },
+          {
+            prop: 'url',
+            label: '路由地址',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
 
-        {
-          prop: 'permissionCode',
-          label: '权限编码',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'secretLevel',
-          label: '密级',
-          align: 'center',
-          showOverflowTooltip: true,
-          slot:'secretLevel',
-          minWidth: 110
-        },
-        {
-          prop: 'sort',
-          label: '排序',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 60
-        },
-        {
-          prop: 'type',
-          label: '类型',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 60,
-          slot: 'type'
-        },
-        {
-          prop: 'createTime',
-          label: '创建时间',
-          showOverflowTooltip: true,
-          minWidth: 110,
-          formatter: (_row, _column, cellValue) => {
-            return this.$util.toDateString(cellValue);
-          }
-        },
+          {
+            prop: 'permissionCode',
+            label: '权限编码',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'secretLevel',
+            label: '密级',
+            align: 'center',
+            showOverflowTooltip: true,
+            slot: 'secretLevel',
+            minWidth: 110
+          },
+          {
+            prop: 'sort',
+            label: '排序',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 60
+          },
+          {
+            prop: 'type',
+            label: '类型',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 60,
+            slot: 'type'
+          },
+          {
+            prop: 'isEnabled',
+            label: '启用状态',
+            align: 'center',
 
+            showOverflowTooltip: true,
+            slot: 'isEnabled',
 
-        {
-          columnKey: 'action',
-          label: '操作',
-          width: 190,
-          align: 'center',
-          resizable: false,
-          slot: 'action',
-          showOverflowTooltip: true
-        }
-      ],
-      // 当前编辑数据
-      current: null,
-      // 是否显示编辑弹窗
-      showEdit: false,
-      // 全部菜单数据
-      menuList: [],
-      // 上级菜单id
-      parentId: null,
-      pageSize: this.$store.state.tablePageSize,
-      cacheKeyUrl: 'ad4181af-syste-menu'
-    };
-  },
-  methods: {
-    getSecretLevel(i) {
-      let find = secretLevelList.find(item=>item.value==i)||{}
-      return find.label
-    },
-    /* 表格数据源 */
-    datasource({ where }) {
-      return listMenus({ ...where });
-    },
-    /* 数据转为树形结构 */
-    parseData(data) {
-           console.log(data)
-      // data.map(item=>{
-      //    item.id = parseInt(item.id)
-      // })
-      return this.$util.toTreeData({
-        data: data,
-        idField: 'id',
-        parentIdField: 'parentId'
-      });
-    },
-    /* 表格渲染完成回调 */
-    onDone({ data }) {
-      //if (!this.menuList.length) {
-      this.menuList = data;
-      //}
-    },
-    /* 刷新表格 */
-    reload(where) {
-      this.$refs.table.reload({ where: where });
-    },
-    /* 显示编辑 */
-    openEdit(row, parentId) {
-      this.current = row;
-      this.parentId = parentId;
-      this.showEdit = true;
+            minWidth: 110
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 190,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        // 当前编辑数据
+        current: null,
+        // 是否显示编辑弹窗
+        showEdit: false,
+        // 全部菜单数据
+        menuList: [],
+        // 上级菜单id
+        parentId: null,
+        pageSize: this.$store.state.tablePageSize,
+        cacheKeyUrl: 'ad4181af-syste-menu'
+      };
     },
-    /* 删除 */
-    remove(row) {
-      if (row.children?.length) {
-        this.$message.error('请先删除子节点');
-        return;
-      }
-      const loading = this.$loading({ lock: true });
-      deleteMenu([row.id])
-        .then((res) => {
-          loading.close();
-          this.$message.success('菜单删除成功');
-          this.reload();
-        })
-        .catch((e) => {
-          loading.close();
-          // this.$message.error(e.message);
+    methods: {
+      getSecretLevel(i) {
+        let find = secretLevelList.find((item) => item.value == i) || {};
+        return find.label;
+      },
+      /* 表格数据源 */
+      datasource({ where }) {
+        return listMenus({ ...where });
+      },
+      /* 数据转为树形结构 */
+      parseData(data) {
+        console.log(data);
+        // data.map(item=>{
+        //    item.id = parseInt(item.id)
+        // })
+        return this.$util.toTreeData({
+          data: data,
+          idField: 'id',
+          parentIdField: 'parentId'
         });
-    },
-    /* 展开全部 */
-    expandAll() {
-      this.$refs.table.toggleRowExpansionAll(true);
-    },
-    /* 折叠全部 */
-    foldAll() {
-      this.$refs.table.toggleRowExpansionAll(false);
-    },
-    /* 判断是否是外链 */
-    isUrl(url) {
-      return !!(
-        url &&
-        (url.startsWith('http://') ||
-          url.startsWith('https://') ||
-          url.startsWith('//'))
-      );
-    },
-    /* 判断是否是目录 */
-    isDirectory(d) {
-      return !!d.children?.length && !d.component;
+      },
+      /* 表格渲染完成回调 */
+      onDone({ data }) {
+        //if (!this.menuList.length) {
+        this.menuList = data;
+        //}
+      },
+      async changeEnable(row) {
+        const res = await putRoles(row);
+        if (res.code == 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功',
+            customClass: 'ele-message-border'
+          });
+          this.reload();
+        }
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ where: where });
+      },
+      /* 显示编辑 */
+      openEdit(row, parentId) {
+        this.current = row;
+        this.parentId = parentId;
+        this.showEdit = true;
+      },
+      /* 删除 */
+      remove(row) {
+        if (row.children?.length) {
+          this.$message.error('请先删除子节点');
+          return;
+        }
+        const loading = this.$loading({ lock: true });
+        deleteMenu([row.id])
+          .then((res) => {
+            loading.close();
+            this.$message.success('菜单删除成功');
+            this.reload();
+          })
+          .catch((e) => {
+            loading.close();
+            // this.$message.error(e.message);
+          });
+      },
+      /* 展开全部 */
+      expandAll() {
+        this.$refs.table.toggleRowExpansionAll(true);
+      },
+      /* 折叠全部 */
+      foldAll() {
+        this.$refs.table.toggleRowExpansionAll(false);
+      },
+      /* 判断是否是外链 */
+      isUrl(url) {
+        return !!(
+          url &&
+          (url.startsWith('http://') ||
+            url.startsWith('https://') ||
+            url.startsWith('//'))
+        );
+      },
+      /* 判断是否是目录 */
+      isDirectory(d) {
+        return !!d.children?.length && !d.component;
+      }
     }
-  }
-};
+  };
 </script>

src/views/system/role/index.vue

@@ -213,6 +213,7 @@
             width: 380,
             align: 'center',
             resizable: false,
+            fixed: 'right',
             slot: 'action',
             showOverflowTooltip: true
           }