移动端后台维护

src/views/mobile/index.vue

 <template>
   <ele-loading :loading="pageLoading" class="h-full">
-    <div class="wrapper">
-      <div class="wrapper-item">
-        <vxe-grid ref="xGrid" v-bind="lgridOptions">
-          <template #left_buttons_slot>
-            <div class="p-l-4px flex flex-content-start">
-              <FcCardTip title="主题" />
-              <el-button type="success" size="small" class="m-l-6px">
-                添加主题
-              </el-button>
-            </div>
-          </template>
-        </vxe-grid>
-      </div>
-      <div class="wrapper-item">
-        <vxe-grid ref="xGrid" v-bind="rgridOptions">
-          <template #right_buttons_slot>
-            <div class="p-l-4px flex flex-content-start">
-              <FcCardTip title="菜单维护" />
-              <el-button class="m-l-4px" type="primary" plain size="small">
-                收起/展开
-              </el-button>
-            </div>
-          </template>
-          <!-- 展开插槽 -->
-          <template #expand_slot>
-            <vxe-grid v-bind="expandGridOptions" />
-          </template>
-
-          <!-- 操作 -->
-          <template #option_slot>
-            <el-link type="primary">编辑</el-link>
-            <el-divider direction="vertical" />
-            <el-link type="warning">页面预览</el-link>
-            <el-divider direction="vertical" />
-            <el-link type="danger">删除</el-link>
-          </template>
-
-          <template #menuName_slot="{ row }">
+    <div class="h-full flex flex-col">
+      <vxe-grid ref="xGrid" v-bind="gridOptions">
+        <!-- 操作插槽 -->
+        <template #toolbar_slot>
+          <div class="p-l-4px flex flex-content-start">
+            <FcCardTip title="菜单维护" />
+            <el-button
+              class="m-l-4px"
+              type="primary"
+              plain
+              size="small"
+              @click="toggleExpand"
+            >
+              收起/展开
+            </el-button>
+            <el-button type="success" size="small" @click="handleAdd"
+              >添加菜单</el-button
+            >
+          </div>
+        </template>
+        <!-- 菜单名称 -->
+        <template #menuName_slot="{ row }">
+          <div class="menuName_text flex-start-center">
             <span> {{ row.menuName }}</span>
-            <el-icon color="#114dfc" size="16px" class="m-l-4px">
+            <el-icon
+              color="#114dfc"
+              size="18px"
+              class="m-l-4px"
+              @click="handleAddByNext(row)"
+            >
               <CirclePlus />
             </el-icon>
-          </template>
-        </vxe-grid>
-      </div>
+          </div>
+        </template>
+
+        <!-- 操作 -->
+        <template #option_slot="{ row }">
+          <el-link type="primary" @click="handleEdit(row)">编辑</el-link>
+          <el-divider direction="vertical" />
+          <el-link type="warning">页面预览</el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" @click="handleDelete(row)">删除</el-link>
+        </template>
+
+        <!-- 展开插槽 -->
+        <template #expand_slot="{ row }">
+          <vxe-grid v-bind="expandGridOptions" :data="row.menuChildren">
+            <!-- 操作 -->
+            <template #option_slot="{ row }">
+              <el-link type="primary" @click="handleEdit(row)">编辑</el-link>
+              <el-divider direction="vertical" />
+              <el-link type="warning">页面预览</el-link>
+              <el-divider direction="vertical" />
+              <el-link type="danger" @click="handleDelete(row)">删除</el-link>
+            </template>
+          </vxe-grid>
+        </template>
+      </vxe-grid>
     </div>
+
+    <!-- 新增/编辑弹窗 -->
+    <addMenu ref="AddMenuRef" @reload="getMenuList"></addMenu>
   </ele-loading>
 </template>
 
@@ -53,29 +69,20 @@
   // tools
   import { FcCardTip } from '@fancy-design/coms';
   import { CirclePlus } from '@element-plus/icons-vue';
-
-  const pageLoading = ref(false);
   import { VxeGridProps } from 'vxe-table';
+  import { tryit } from 'radash';
+  import { EleMessage } from 'ele-admin-plus';
+  import menuApi from '@/api/menuApi';
+  import addMenu from '../web/components/AddMenu.vue';
 
-  const lgridOptions = reactive<VxeGridProps>({
-    round: true,
-    size: 'mini',
-    height: '100%',
-    columns: [
-      {
-        field: 'name',
-        title: '姓名'
-      }
-    ],
-    toolbarConfig: {
-      slots: {
-        buttons: 'left_buttons_slot'
-      }
-    }
+  onMounted(() => {
+    getMenuList(); // 获取菜单列表
   });
 
-  const rgridOptions = reactive<VxeGridProps>({
-    round: true,
+  const xGrid = ref();
+
+  const pageLoading = ref(false);
+  const gridOptions = reactive<VxeGridProps>({
     border: true,
     showHeaderOverflow: true,
     showOverflow: true,
@@ -96,7 +103,7 @@
     },
     toolbarConfig: {
       slots: {
-        buttons: 'right_buttons_slot'
+        buttons: 'toolbar_slot'
       }
     },
     expandConfig: {
@@ -111,23 +118,25 @@
         slots: { content: 'expand_slot', default: 'menuName_slot' }
       },
       {
-        field: 'url',
+        field: 'menuUrl',
         title: 'URL地址'
       },
       {
         field: '操作',
         fixed: 'right',
         title: '操作',
+        width: 200,
         slots: { default: 'option_slot' }
       }
     ],
     pagerConfig: {
-      enabled: true,
+      enabled: false,
       pageSize: 10,
       pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
     },
-    data: [{ menuName: '首页', url: 'www.ce.com' }]
+    data: []
   });
+
   // 展开行配置
   const expandGridOptions = reactive<VxeGridProps>({
     border: true,
@@ -152,7 +161,7 @@
         title: '菜单名称'
       },
       {
-        field: 'url',
+        field: 'menuUrl',
         title: 'URL地址'
       },
       {
@@ -160,24 +169,90 @@
         fixed: 'right',
         title: 'Role',
         sortable: true,
-        editRender: { name: 'input', attrs: { placeholder: '请输入角色' } }
+        width: 200,
+        slots: { default: 'option_slot' }
       }
     ],
-    data: [{ menuName: '首页', url: 'www.ce.com' }]
+    data: []
   });
+
+  // 获取菜单列表
+  const getMenuList = async () => {
+    pageLoading.value = true;
+    let parmas = {
+      menuType: 1
+    };
+    const [err, ret] = await tryit(menuApi.getMenuList)(parmas);
+    if (err) {
+      console.error(err);
+      return;
+    }
+    if (ret?.code === 200) {
+      gridOptions.data = ret.data;
+    }
+    pageLoading.value = false;
+  };
+
+  // 添加菜单
+
+  const AddMenuRef = ref();
+
+  const handleAdd = () => {
+    AddMenuRef.value.open('add', null, '1');
+  };
+
+  // 编辑菜单
+  const handleEdit = (row) => {
+    row.pid = row.pid == 0 ? '' : row.pid; // pid特殊处理
+    AddMenuRef.value.open('edit', row, '1'); // 传递菜单信息
+  };
+
+  // 添加子集
+  const handleAddByNext = (row) => {
+    let obj = {
+      pid: row.menuId
+    };
+    AddMenuRef.value.open('add', obj, '1'); // 传递父菜单信息
+  };
+
+  // 删除菜单
+  const handleDelete = async (row) => {
+    ElMessageBox.confirm(`确定要删除此菜单吗？`, '提示', {
+      type: 'warning'
+    }).then(async (res) => {
+      let params = {
+        menuId: row.menuId,
+        menuType: 1,
+        pid: row.pid
+      };
+      const [err, ret] = await tryit(menuApi.delMenu)(params);
+      if (err) {
+        console.error(err);
+        return;
+      }
+      if (ret?.code === 200) {
+        EleMessage.success('删除成功');
+        getMenuList(); // 重新获取菜单列表
+      }
+    });
+  };
+
+  // 展开/收起
+  const toggleExpand = () => {
+    console.log('🚀 ~ handleUnfold ~ xGrid.value:', xGrid.value);
+
+    // xGrid.value.setRowExpand();
+  };
 </script>
 
 <style lang="scss" scoped>
-  .wrapper {
-    @apply h-full grid gap-x-[6px];
-    grid-template-columns: 400px 1fr;
-
-    &-item {
-      border-radius: 6px;
-      border: 1px solid #3352fc;
-      background-color: #fff;
-      box-shadow: 0 2px 8px rgba(51, 82, 252, 0.15);
-      overflow: hidden !important;
+  .menuName_text {
+    display: inline-block;
+
+    :deep() {
+      .el-icon {
+        cursor: pointer;
+      }
     }
   }
 </style>

src/views/web/components/AddMenu.vue

@@ -51,15 +51,18 @@
     menuId: '', // 菜单ID
     isJoint: 0, // 是否需要拼接参数 1拼,0不拼
     status: 0, // 状态：0开启，1关闭
-    sort:0, // 排序
+    sort: 0 // 排序
   });
 
   // 打开
   const curInfo = ref<addMenuDto>();
-  const open = (type: 'add' | 'edit' = 'add', info?: addMenuDto) => {
+  const open = (type: 'add' | 'edit' = 'add', info?: addMenuDto, menuType) => {
     useType.value = type;
+    form.menuType = menuType;
     modalVisible.value = true;
-    if(info){
+    getMenuList(); // 获取菜单列表
+
+    if (info) {
       curInfo.value = info;
       Object.assign(form, info);
     }
@@ -73,14 +76,14 @@
     open: open as (type: 'add' | 'edit', info?: addThemeDTO) => void
   });
 
-  onMounted(() => {
-    getMenuList(); // 获取菜单列表
-  });
+  // onMounted(() => {
+  //   getMenuList(); // 获取菜单列表
+  // });
   const menuList = ref([]);
   const getMenuList = async () => {
     pageLoading.value = true;
     let params = {
-      menuType: '0'
+      menuType: form.menuType
     };
     const [err, ret] = await tryit(menuApi.getMenuList)(params);
     if (err) {

src/views/web/index.vue

@@ -6,7 +6,13 @@
         <template #toolbar_slot>
           <div class="p-l-4px flex flex-content-start">
             <FcCardTip title="菜单维护" />
-            <el-button class="m-l-4px" type="primary" plain size="small" @click="toggleExpand">
+            <el-button
+              class="m-l-4px"
+              type="primary"
+              plain
+              size="small"
+              @click="toggleExpand"
+            >
               收起/展开
             </el-button>
             <el-button type="success" size="small" @click="handleAdd"
@@ -73,7 +79,7 @@
     getMenuList(); // 获取菜单列表
   });
 
-  const xGrid = ref()
+  const xGrid = ref();
 
   const pageLoading = ref(false);
   const gridOptions = reactive<VxeGridProps>({
@@ -128,7 +134,7 @@
       pageSize: 10,
       pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
     },
-    data: [{ menuName: '首页', url: 'www.ce.com' }]
+    data: []
   });
 
   // 展开行配置
@@ -174,7 +180,7 @@
   const getMenuList = async () => {
     pageLoading.value = true;
     let parmas = {
-      menuType: '0'
+      menuType: 0
     };
     const [err, ret] = await tryit(menuApi.getMenuList)(parmas);
     if (err) {
@@ -192,13 +198,13 @@
   const AddMenuRef = ref();
 
   const handleAdd = () => {
-    AddMenuRef.value.open();
+    AddMenuRef.value.open('add', null, '0');
   };
 
   // 编辑菜单
   const handleEdit = (row) => {
     row.pid = row.pid == 0 ? '' : row.pid; // pid特殊处理
-    AddMenuRef.value.open('edit', row); // 传递菜单信息
+    AddMenuRef.value.open('edit', row, '0'); // 传递菜单信息
   };
 
   // 添加子集
@@ -206,7 +212,7 @@
     let obj = {
       pid: row.menuId
     };
-    AddMenuRef.value.open('add', obj); // 传递父菜单信息
+    AddMenuRef.value.open('add', obj, '0'); // 传递父菜单信息
   };
 
   // 删除菜单
@@ -216,7 +222,7 @@
     }).then(async (res) => {
       let params = {
         menuId: row.menuId,
-        menuType: '0',
+        menuType: 0,
         pid: row.pid
       };
       const [err, ret] = await tryit(menuApi.delMenu)(params);
@@ -233,16 +239,10 @@
 
   // 展开/收起
   const toggleExpand = () => {
-    console.log("🚀 ~ handleUnfold ~ xGrid.value:", xGrid.value)
-
-
+    console.log('🚀 ~ handleUnfold ~ xGrid.value:', xGrid.value);
 
     // xGrid.value.setRowExpand();
-  }
-
-
-
-
+  };
 </script>
 
 <style lang="scss" scoped>