系统菜单界面优化完成

src/router/module/admin/settings.js

@@ -15,41 +15,6 @@ const settingRoutes = [
         meta: { title: '菜单管理', noCache: true },
         component: () => import('@/views/admin/settings/menus')
       },
-      {
-        path: 'menus/add',
-        name: 'SettingsMenusAdd',
-        hidden: true,
-        meta: { title: '添加菜单', noCache: true },
-        component: () => import('@/views/admin/settings/menus/edit')
-      },
-      {
-        path: 'menus/edit',
-        name: 'SettingsMenusEdit',
-        hidden: true,
-        meta: { title: '修改菜单', noCache: true },
-        component: () => import('@/views/admin/settings/menus/edit')
-      },
-      {
-        path: 'menus/children/:menuType/:id/:title',
-        name: 'SettingsChildrenMenus',
-        hidden: true,
-        meta: { title: '子菜单管理', noCache: false },
-        component: () => import('@/views/admin/settings/menus/children-list')
-      },
-      {
-        path: 'menus/children/add',
-        name: 'SettingsChildrenMenusAdd',
-        hidden: true,
-        meta: { title: '添加子菜单', noCache: true },
-        component: () => import('@/views/admin/settings/menus/edit')
-      },
-      {
-        path: 'menus/children/edit',
-        name: 'SettingsChildrenMenusEdit',
-        hidden: true,
-        meta: { title: '修改子菜单', noCache: true },
-        component: () => import('@/views/admin/settings/menus/edit')
-      },
       {
         path: 'roles',
         name: 'SettingsRoles',

src/views/admin/settings/menus/children-list.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-page-header :content="title" @back="goBack" />
-    <table-list :menu-type="menuType" />
-  </div>
-</template>
-
-<script>
-import TableList from './components/table-list.vue'
-export default {
-  components: {
-    TableList
-  },
-  data() {
-    return {
-      menuType: 1,
-      title: ''
-    }
-  },
-  created() {
-    this.menuType = parseInt(this.$route.params.menuType)
-    this.title = `所属父级菜单：${this.$route.params.title}`
-  },
-  methods: {
-    goBack() {
-      this.$router.back()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.el-page-header{
-  margin-bottom: 16px;
-}
-</style>

src/views/admin/settings/menus/components/edit-page.vue

@@ -3,8 +3,15 @@
     <div class="menus-edit">
       <div class="menus-edit-form">
         <el-form ref="menuFrom" label-width="100px" :model="menuData" :rules="rules">
-          <el-form-item v-if="parentMenuData" label="上级菜单：">
-            <el-input v-model="parentMenuData.title" placeholder="上级菜单" readonly />
+          <el-form-item label="父级菜单：" prop="parentId">
+            <el-cascader
+              v-model="menuData.parentId"
+              style="width: 100%"
+              :options="menuOptions"
+              :props="menuProps"
+              placeholder="请选择父级菜单，不选默认为顶级菜单"
+              clearable
+            />
           </el-form-item>
           <el-form-item label="菜单名称：" prop="title">
             <el-input v-model="menuData.title" placeholder="菜单名称" />
@@ -93,8 +100,9 @@
 </template>
 
 <script>
-import { createMenu, getMenu, updateMenu } from '@/api/system'
+import { createMenu, getMenu, updateMenu, sysMenuTree } from '@/api/system'
 import IconList from '@/components/IconList'
+import { deepClone } from '@/utils'
 let uuid = 0
 const menuData = () => ({
   id: '',
@@ -144,6 +152,7 @@ export default {
   },
   data() {
     return {
+      menuOptions: [],
       visible: false,
       showIcons: false,
       // 上级菜单信息
@@ -156,6 +165,13 @@ export default {
       rules: {
         title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
         name: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }]
+      },
+      menuProps: {
+        value: 'id',
+        label: 'title',
+        children: 'subMenus',
+        emitPath: false,
+        checkStrictly: true
       }
     }
   },
@@ -185,20 +201,19 @@ export default {
       this.menuData = menuData()
       this.parentMenuData = null
       this.permissions = []
-      console.log('editType', this.editType)
-      console.log('menuType', this.menuType)
       console.log('menuId', this.menuId)
 
       this.menuData.menuType = this.menuType
+      this.fetchMenuList()
       // 编辑修改菜单
       if (this.editType === 'edit') {
         this.menuData.id = this.menuId
         this.fetchMenuInfo()
       } else if (this.editType === 'child') {
-        this.menuData.parentId = this.menuId
-        this.fetchParentMenuInfo()
+        this.menuData.parentId = this.menuId.toString()
       }
     },
+
     // 获取父菜单信息
     fetchParentMenuInfo() {
       getMenu(this.menuData.parentId).then((res) => {
@@ -206,14 +221,25 @@ export default {
         this.menuData.baseFlag = res.data.baseFlag
       })
     },
+
+    // 获取父级菜单列表
+    async fetchMenuList() {
+      try {
+        const res = await sysMenuTree({ menuType: this.menuType })
+        this.menuOptions = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     // 获取菜单数据
     fetchMenuInfo() {
       getMenu(this.menuData.id).then((res) => {
-        console.log(res)
         this.setMenuData(res.data)
       })
     },
-    // 设置菜单数据
+
+    // 设置菜单数据(编辑时调用)
     setMenuData(data) {
       for (const key in this.menuData) {
         if (Object.hasOwnProperty.call(data, key)) {
@@ -226,53 +252,62 @@ export default {
       }
       // 父级菜单信息
       if (this.menuData.parentId > 0) {
-        this.fetchParentMenuInfo()
+        this.menuData.parentId = this.menuData.parentId.toString()
       }
     },
+
     // 判断图标类型
     isElementIcon(value) {
       return value && value.substr(0, 7) === 'el-icon'
     },
+
     // 判断自定义图标
     isOurIcon(value) {
       return value && value.startsWith('iconfont')
     },
+
     // 提交
     submit() {
       console.log(this.menuData)
       this.menuData.permissionJson = JSON.stringify(this.permissions)
       this.$refs.menuFrom.validate((valide) => {
         if (!valide) return
-        if (this.editType === 'add') {
+        if (this.editType === 'add' || this.editType === 'child') {
           this.createMenu()
         } else {
           this.updateMenu()
         }
       })
     },
+
     // 修改菜单
-    updateMenu() {
-      updateMenu(this.menuData.id, this.menuData)
-        .then(() => {
-          this.$message.success('修改菜单成功')
-          this.$emit('success')
-        })
-        .catch(() => {
-          this.$emit('error')
-        })
+    async updateMenu() {
+      try {
+        const menuData = deepClone(this.menuData)
+        menuData.parentId = parseInt(menuData.parentId)
+        await updateMenu(this.menuData.id, this.menuData)
+        this.$message.success('修改菜单成功')
+        this.$emit('success')
+        this.$refs.menuFrom.clearValidate()
+        this.visible = false
+      } catch (error) {
+        this.$emit('error')
+      }
     },
+
     // 添加菜单
-    createMenu() {
-      console.log(this.menuData)
-      // return
-      createMenu(this.menuData)
-        .then(() => {
-          this.$message.success('添加菜单成功')
-          this.$emit('success')
-        })
-        .catch(() => {
-          this.$emit('error')
-        })
+    async createMenu() {
+      try {
+        const menuData = deepClone(this.menuData)
+        menuData.parentId = parseInt(menuData.parentId)
+        await createMenu(this.menuData)
+        this.$message.success('添加菜单成功')
+        this.$emit('success')
+        this.$refs.menuFrom.clearValidate()
+        this.visible = false
+      } catch (error) {
+        this.$emit('error')
+      }
     },
 
     cancel() {
@@ -287,6 +322,7 @@ export default {
         title: ''
       })
     },
+
     // 移除一条按钮权限
     removeOne(uuid) {
       const index = this.permissions.findIndex((item) => item.uuid === uuid)

src/views/admin/settings/menus/components/table-list.vue

@@ -1,95 +1,126 @@
 <template>
   <div class="table-list">
-    <div class="filter-container">
-      <div class="filter-control">
-        <span>菜单状态：</span>
-        <el-select
-          v-model="listQuery.status"
-          placeholder="启用状态"
-          clearable
-          style="width: 200px"
-          class="filter-item"
-          @change="getList"
-        >
-          <el-option label="全部" value="" />
-          <el-option label="已启用" :value="0" />
-          <el-option label="未启用" :value="1" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <el-button type="primary" @click="handleAddMenu()">添加菜单</el-button>
+    <div class="app-container">
+      <div class="filter-container">
+        <div class="filter-control">
+          <span>菜单状态：</span>
+          <el-select
+            v-model="listQuery.status"
+            placeholder="启用状态"
+            clearable
+            style="width: 200px"
+            class="filter-item"
+            @change="getList"
+          >
+            <el-option label="全部" value="" />
+            <el-option label="已启用" :value="0" />
+            <el-option label="未启用" :value="1" />
+          </el-select>
+        </div>
+        <div class="filter-control">
+          <el-button type="primary" @click="onEditMenu(null, 'add')">添加菜单</el-button>
+        </div>
       </div>
+      <!-- 搜索区域END -->
+      <el-table
+        v-loading="listLoading"
+        class="table-cell"
+        row-key="id"
+        header-row-class-name="tableHeader"
+        border
+        fit
+        lazy
+        :data="list"
+        :load="load"
+        :tree-props="{ hasChildren: 'hasChildren' }"
+      >
+        <el-table-column :index="indexMethod" prop="title" label="序号" type="index" width="60" align="center" />
+        <el-table-column label="菜单名称" prop="title">
+          <template slot-scope="{ row }">
+            <span v-if="!row.hasChildren" style="margin-right: 23px" />
+            <span>{{ row.title }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="路由名称" align="center" />
+        <el-table-column label="级别" width="120px" align="center">
+          <template slot-scope="{ row }">
+            {{ row.level | levelName }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="childCount" label="子菜单数量" align="center" width="100px" /> -->
+        <el-table-column label="图标" align="center" width="80">
+          <template slot-scope="{ row }">
+            <template v-if="row.icon">
+              <i v-if="isElementIcon(row.icon)" :class="row.icon" />
+              <i v-else-if="isOurIcon(row.icon)" :class="row.icon" />
+              <svg-icon v-else :icon-class="row.icon" />
+            </template>
+            <span v-else>无</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="listQuery.menuType === 2" prop="name" label="功能类别" align="center" width="80px">
+          <template slot-scope="{ row }">
+            <span v-if="row.baseFlag === 1">基础</span>
+            <span v-else>订制</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="启用状态" align="center" width="100">
+          <template slot-scope="{ row }">
+            <el-switch v-model="row.status" :active-value="0" :inactive-value="1" @change="onUpdateMenuStatus(row)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" align="center" width="80">
+          <template slot-scope="{ row }">
+            <el-input v-model.number="row.sort" @blur="onUpdateMenuSort(row)" />
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" width="180px">
+          <template slot-scope="{ row }">
+            <span>{{ row.createTime | formatTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="260">
+          <template slot-scope="{ row }">
+            <el-button type="primary" size="mini" @click="onEditMenu(row, 'edit')">编辑</el-button>
+            <el-button type="primary" size="mini" @click="onEditMenu(row, 'child')">添加子菜单</el-button>
+            <el-button type="danger" size="mini" @click="onDeleteMenu(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 页码 -->
+      <pagination
+        :total="total"
+        :page.sync="listQuery.pageNum"
+        :limit.sync="listQuery.pageSize"
+        @pagination="getList"
+      />
+      <edit-page
+        :title="editTitle"
+        :show="editDrawer"
+        :menu-type="menuType"
+        :edit-type="editType"
+        :menu-id="currentMenuId"
+        @close="editDrawer = false"
+        @success="onEditSuccess"
+      />
     </div>
-    <!-- 搜索区域END -->
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      style="width: 100%"
-      border
-      fit
-      header-row-class-name="tableHeader"
-      class="table-cell"
-    >
-      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
-      <el-table-column prop="title" label="菜单名称" align="center" />
-      <el-table-column prop="name" label="路由名称" align="center" />
-      <el-table-column label="展示图标" align="center" width="100">
-        <template slot-scope="{ row }">
-          <i v-if="row.icon" :class="row.icon" />
-          <span v-else>无</span>
-        </template>
-      </el-table-column>
-      <el-table-column v-if="listQuery.menuType === 2" prop="name" label="会员功能" align="center">
-        <template slot-scope="{ row }">
-          <span v-if="row.baseFlag === 1">基础功能</span>
-          <span v-else>订制功能</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="启用状态" align="center" width="100">
-        <template slot-scope="{ row }">
-          <el-switch v-model="row.status" :active-value="0" :inactive-value="1" @change="updateMenuStatus(row)" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="sort" label="排序" align="center" width="100">
-        <template slot-scope="{ row }">
-          <el-input v-model="row.sort" @change="updateMenuSort(row)" />
-        </template>
-      </el-table-column>
-      <el-table-column label="子菜单管理" align="center" width="240">
-        <template slot-scope="{ row }">
-          <el-button size="mini" @click="handleSearchChildren(row)">查看子菜单</el-button>
-          <el-button size="mini" @click="handleAddMenu(row)">添加子菜单</el-button>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200">
-        <template slot-scope="{ row }">
-
-          <el-button
-            type="primary"
-            size="mini"
-            @click="handleEditMenu(row)"
-          >编辑</el-button>
-          <el-button type="danger" size="mini" @click="deleteMenu(row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 页码 -->
-    <pagination
-      :total="total"
-      :page.sync="listQuery.pageNum"
-      :limit.sync="listQuery.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 
 <script>
-import { fetchMenuList, deleteMenu, updateMenuSelective } from '@/api/system'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import { fetchMenuList, updateMenuSelective, deleteMenu } from '@/api/system'
+import Pagination from '@/components/Pagination'
+import EditPage from './edit-page.vue'
 export default {
   name: 'TableList',
   components: {
-    Pagination
+    Pagination,
+    EditPage
+  },
+  filters: {
+    levelName(level) {
+      return '一二三四五六七八九十'.split('')[level - 1] + '级菜单'
+    }
   },
   props: {
     menuType: {
@@ -100,6 +131,8 @@ export default {
   data() {
     return {
       listLoading: false,
+      editDrawer: false,
+      editTitle: '',
       // 查询参数
       listQuery: {
         parentId: '',
@@ -110,111 +143,149 @@ export default {
       },
       total: 0,
       // 菜单列表
-      list: []
+      list: [],
+      currentMenuId: 0,
+      currentParentId: 0,
+      editType: 'add'
     }
   },
   created() {
-    this.initQuery()
     this.getList()
   },
   methods: {
-    // 初始化参数
-    initQuery() {
-      const { id = '', title = '' } = this.$route.params
-      this.listQuery.menuType = this.menuType
-      this.parentTitle = title
-      this.listQuery.parentId = id
+    // 编辑菜单
+    onEditMenu(row, type) {
+      this.editType = type
+      const titles = {
+        edit: '修改菜单信息',
+        add: '添加菜单',
+        child: '添加子菜单'
+      }
+      this.editTitle = titles[type]
+      if (type === 'edit') {
+        this.currentMenuId = row.id
+        this.currentParentId = row.parentId
+      } else if (type === 'child') {
+        this.currentMenuId = row.id
+      } else {
+        this.currentMenuId = 0
+      }
+      this.editDrawer = true
     },
-    // 添加菜单
-    handleAddMenu(row) {
-      if (row) {
-        this.$router.push({
-          path: '/settings/menus/children/add',
-          query: {
-            type: 'add',
-            parentId: row.id,
-            menuType: this.menuType
-          }
-        })
-      } else if (this.listQuery.parentId) {
-        this.$router.push({
-          path: '/settings/menus/children/add',
-          query: {
-            type: 'add',
-            parentId: this.listQuery.parentId,
-            menuType: this.menuType
-          }
+
+    // 加载子菜单
+    async load(tree, treeNode, resolve) {
+      try {
+        const res = await fetchMenuList({
+          parentId: tree.id,
+          menuType: this.menuType,
+          status: '',
+          pageSize: 1000,
+          pageNum: 1
         })
-      } else {
-        this.$router.push({
-          path: '/settings/menus/add',
-          query: {
-            type: 'add',
-            menuType: this.menuType
-          }
+        const list = res.data.list.map((item) => {
+          item.hasChildren = item.childCount > 0
+          item.level = tree.level + 1
+          item.rowId = tree.rowId + '-' + item.id
+          return item
         })
+        this.$set(tree, 'chidlren', list) // 菜单列表
+        resolve(list)
+      } catch (error) {
+        console.log(error)
       }
     },
-    // 查看子菜单
-    handleSearchChildren(row) {
-      this.listQuery.parentId = row.id
-      this.$router.replace(`/settings/menus/children/${this.menuType}/${row.id}/${row.title}`)
-    },
-    // 修改菜单
-    handleEditMenu(row) {
-      // $_navigationTo(`/settings/menus/edit?id=${row.id}&type=edit`)
-      this.$router.push({
-        path: '/settings/menus/edit',
-        query: {
-          id: row.id,
-          type: 'edit',
-          menuType: this.menuType
-        }
-      })
-    },
+
     // 获取列表
-    getList() {
+    async getList() {
+      this.listQuery.menuType = this.menuType
       this.listQuery.pageNum = 1
-      this.list = []
-      this.fetchMenuList()
-    },
-    // 获取菜单列表
-    fetchMenuList() {
-      fetchMenuList(this.listQuery).then(res => {
-        this.list = [...this.list, ...res.data.list]
+      try {
+        const res = await fetchMenuList(this.listQuery)
+        this.list = res.data.list.map((item) => {
+          item.hasChildren = item.childCount > 0
+          item.level = 1
+          item.rowId = item.id + ''
+          return item
+        })
         this.total = res.data.total
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 编辑成功
+    onEditSuccess() {
+      this.$store.dispatch('tagsView/delCachedView', this.$route).then(() => {
+        const { fullPath } = this.$route
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/redirect' + fullPath
+          })
+        })
       })
     },
+
     // 更新状态
-    updateMenuStatus(row) {
-      updateMenuSelective(row.id, { status: row.status }).then(() => {
+    async onUpdateMenuStatus(row) {
+      try {
+        await updateMenuSelective(row.id, { status: row.status })
         this.$message.success('操作成功')
-      })
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.onEditSuccess()
+      }
     },
+
     // 更新排序
-    updateMenuSort(row) {
-      updateMenuSelective(row.id, { sort: row.sort }).then(() => {
+    async onUpdateMenuSort(row) {
+      try {
+        await updateMenuSelective(row.id, { sort: row.sort })
         this.$message.success('操作成功')
-        this.getList()
-      })
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.onEditSuccess()
+      }
     },
+
     // 删除菜单
-    deleteMenu(row) {
-      this.$confirm('此操作将永久删除该菜单及其子菜单, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          deleteMenu(row.id).then(res => {
-            this.$message.success('删除成功')
-            this.getList()
-          })
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
+    async deleteMenu(row) {
+      try {
+        await deleteMenu(row.id)
+        this.$message.success('删除成功')
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.onEditSuccess()
+      }
+    },
+
+    // 删除菜单操作
+    async onDeleteMenu(row) {
+      try {
+        await this.$confirm('此操作将永久删除该菜单及其子菜单, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
+        this.deleteMenu(row)
+      } catch (error) {
+        this.$message.info('已取消删除')
+      }
     },
+
+    // 判断图标类型
+    isElementIcon(value) {
+      return value && value.substr(0, 7) === 'el-icon'
+    },
+
+    // 判断自定义图标
+    isOurIcon(value) {
+      return value && value.startsWith('iconfont')
+    },
+
     // 表格索引
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
@@ -223,4 +294,3 @@ export default {
 }
 </script>
 
-<style scoped></style>

src/views/admin/settings/menus/edit.vue

@@ -1,277 +0,0 @@
-<template>
-  <div class="app-container menus-edit">
-    <el-form ref="menuFrom" label-width="100px" :model="menuData" :rules="rules">
-      <el-form-item v-if="parentMenuData" label="上级菜单：">
-        <el-input v-model="parentMenuData.title" placeholder="上级菜单" readonly />
-      </el-form-item>
-      <el-form-item label="菜单名称：" prop="title">
-        <el-input v-model="menuData.title" placeholder="菜单名称" />
-      </el-form-item>
-      <el-form-item label="路由名称：" prop="name">
-        <el-input v-model="menuData.name" placeholder="路由名称" />
-      </el-form-item>
-      <el-form-item label="显示隐藏：">
-        <el-radio-group v-model="menuData.hidden">
-          <el-radio :label="0">显示</el-radio>
-          <el-radio :label="1">隐藏</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="前端图标：">
-        <el-input v-model="menuData.icon" style="width: 80%" placeholder="选择图标" clearable>
-          <template><el-button slot="append" icon="el-icon-edit" @click="handleChooseIcon" /></template>
-        </el-input>
-        <template>
-          <i v-if="isElementIcon(menuData.icon)" :class="menuData.icon" class="preview-icon" />
-          <i v-if="isOurIcon(menuData.icon)" :class="menuData.icon" class="preview-icon" />
-          <svg-icon v-else-if="menuData.icon" :icon-class="menuData.icon" class="preview-icon" />
-        </template>
-      </el-form-item>
-      <template v-if="!parentMenuData && menuType!== 1">
-        <el-form-item label="功能类型：" prop="baseFlag">
-          <el-radio-group v-model="menuData.baseFlag">
-            <el-radio :label="1">基础功能</el-radio>
-            <el-radio :label="0">会员特定</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="功能切换：" prop="moveFlag">
-          <el-radio-group v-model="menuData.moveFlag">
-            <el-radio :label="1">允许</el-radio>
-            <el-radio :label="0">禁止</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </template>
-      <el-form-item label="状态：">
-        <el-radio-group v-model="menuData.status">
-          <el-radio :label="0">启用</el-radio>
-          <el-radio :label="1">停用</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="排序：">
-        <el-input v-model="menuData.sort" />
-      </el-form-item>
-      <el-form-item label="按钮权限：">
-        <template>
-          <el-input v-show="false" v-model="menuData.permissionJson" />
-          <el-table border :data="permissions">
-            <el-table-column label="按钮名称" align="center">
-              <template slot-scope="{row}">
-                <el-input v-model="row.title" size="mini" />
-              </template>
-            </el-table-column>
-            <el-table-column label="权限标识" align="center">
-              <template slot-scope="{row}">
-                <el-input v-model="row.name" size="mini" />
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center">
-              <template slot-scope="{ row }">
-                <el-button type="danger" size="mini" @click="removeOne(row.uuid)">删除按钮</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div style="text-align:center;margin-top: 24px">
-            <el-button type="primary" size="mini" @click="insertOne">添加按钮</el-button>
-          </div>
-          <el-divider />
-        </template>
-      </el-form-item>
-      <el-form-item>
-        <!-- 确认 取消 -->
-        <div class="control-box">
-          <el-button type="warning" @click="$_back">返回</el-button>
-          <el-button type="primary" @click="submit">保存</el-button>
-        </div>
-      </el-form-item>
-    </el-form>
-
-    <!-- 选择图标icons -->
-    <el-dialog
-      title="提示"
-      :visible.sync="showIcons"
-      width="80%"
-    >
-      <icon-list @click="onChooseIcon" />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { createMenu, getMenu, updateMenu } from '@/api/system'
-import IconList from '@/components/IconList'
-let uuid = 0
-export default {
-  components: {
-    IconList
-  },
-  data() {
-    return {
-      showIcons: false,
-      // 编辑类型
-      editType: 'add',
-      menuType: '',
-      // 上级菜单信息
-      parentMenuData: null,
-      // 表单参数
-      menuData: {
-        id: '',
-        title: '',
-        name: '',
-        icon: '',
-        hidden: 0,
-        status: 0,
-        sort: 0,
-        childCount: 0,
-        permissionJson: '',
-        parentId: 0,
-        baseFlag: 1,
-        moveFlag: 1,
-        menuType: 1
-      },
-      // 按钮权限列表
-      permissions: [],
-      // 验证规则
-      rules: {
-        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
-        name: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }]
-      }
-    }
-  },
-  created() {
-    this.editType = this.$route.query.type
-    this.init()
-  },
-  methods: {
-    onChooseIcon(item) {
-      this.showIcons = false
-      this.menuData.icon = item
-    },
-    // 选择图标
-    handleChooseIcon() {
-      this.showIcons = true
-    },
-    // 初始化
-    init() {
-      this.menuType = parseInt(this.$route.query.menuType)
-      // 编辑修改菜单
-      if (this.editType === 'edit') {
-        this.menuData.id = parseInt(this.$route.query.id)
-        this.fetchMenuInfo()
-      }
-      // 添加菜单
-      if (this.editType === 'add') {
-        this.menuData.parentId = parseInt(this.$route.query.parentId)
-        this.menuData.menuType = this.menuType
-        console.log(this.menuType)
-        if (this.menuData.parentId > 0) {
-          this.fetchParentMenuInfo()
-        }
-      }
-    },
-    // 获取父菜单信息
-    fetchParentMenuInfo() {
-      getMenu(this.menuData.parentId).then(res => {
-        this.parentMenuData = res.data
-        this.menuData.baseFlag = res.data.baseFlag
-        console.log(res.data)
-      })
-    },
-    // 获取菜单数据
-    fetchMenuInfo() {
-      getMenu(this.menuData.id).then(res => {
-        console.log(res)
-        this.setMenuData(res.data)
-      })
-    },
-    // 设置菜单数据
-    setMenuData(data) {
-      for (const key in this.menuData) {
-        if (Object.hasOwnProperty.call(data, key)) {
-          this.menuData[key] = data[key]
-        }
-      }
-      // 按钮权限列表
-      if (this.permissionJson) {
-        this.permissions = JSON.parse(this.permissionJson)
-      }
-      // 父级菜单信息
-      if (this.menuData.parentId > 0) {
-        this.fetchParentMenuInfo()
-      }
-    },
-    // 判断图标类型
-    isElementIcon(value) {
-      return value && value.substr(0, 7) === 'el-icon'
-    },
-    // 判断自定义图标
-    isOurIcon(value) {
-      return value && value.startsWith('iconfont')
-    },
-    // 提交
-    submit() {
-      console.log(this.menuData)
-      this.menuData.permissionJson = JSON.stringify(this.permissions)
-      this.$refs.menuFrom.validate(valide => {
-        if (!valide) return
-        if (this.editType === 'add') {
-          this.createMenu()
-        } else {
-          this.updateMenu()
-        }
-      })
-    },
-    // 修改菜单
-    updateMenu() {
-      updateMenu(this.menuData.id, this.menuData).then(res => {
-        this.$message.success('修改菜单成功')
-        this.$store.dispatch('tagsView/delView', this.$route)
-        this.$router.back()
-      })
-    },
-    // 添加菜单
-    createMenu() {
-      console.log(this.menuData)
-      // return
-      createMenu(this.menuData).then(res => {
-        console.log(res)
-        this.$message.success('添加菜单成功')
-        this.$store.dispatch('tagsView/delView', this.$route)
-        this.$router.back()
-      })
-    },
-    // 添加按钮权限
-    insertOne() {
-      this.permissions.push({
-        uuid: ++uuid,
-        name: '',
-        title: ''
-      })
-    },
-    // 移除一条按钮权限
-    removeOne(uuid) {
-      const index = this.permissions.findIndex(item => item.uuid === uuid)
-      this.permissions.splice(index, 1)
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.menus-edit {
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 40px;
-
-  .preview-icon{
-    font-size: 24px;
-    margin-left: 8px;
-  }
-}
-.control-box {
-  margin: 20px 0;
-  text-align: center;
-  .el-button {
-    width: 120px;
-    margin: 0 8px;
-  }
-}
-</style>

src/views/admin/settings/menus/index-t.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane v-for="item in menusCategory" :key="item.menuType" :label="item.title" :name="item.name" :lazy="true">
-        <table-list :key="item.menuType" :menu-type="item.menuType" />
-      </el-tab-pane>
-      <!-- <el-tab-pane label="供应商" name="second">配置管理</el-tab-pane> -->
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-import TableList from './components/table-list.vue'
-export default {
-  name: 'SettingsMenus',
-  components: {
-    TableList
-  },
-  data() {
-    return {
-      activeName: 'manager',
-      menusCategory: [
-        {
-          id: 1,
-          title: '管理员菜单管理',
-          name: 'manager',
-          menuType: 1
-        },
-        {
-          id: 2,
-          title: '供应商管理',
-          name: 'supplier',
-          menuType: 2
-        }
-      ]
-    }
-  },
-  created() {
-    this.activeName = this.$route.query.activeName || 'manager'
-  },
-  methods: {
-    handleClick() {}
-  }
-}
-</script>
-
-<style scoped>
-.page-title {
-  font-size: 18px;
-  color: #404040;
-}
-</style>

src/views/admin/settings/menus/index.vue

@@ -1,219 +1,51 @@
 <template>
-  <div class="table-list">
-    <div class="app-container">
-      <div class="filter-container">
-        <div class="filter-control">
-          <span>菜单状态：</span>
-          <el-select
-            v-model="listQuery.status"
-            placeholder="启用状态"
-            clearable
-            style="width: 200px"
-            class="filter-item"
-            @change="getList"
-          >
-            <el-option label="全部" value="" />
-            <el-option label="已启用" :value="0" />
-            <el-option label="未启用" :value="1" />
-          </el-select>
-        </div>
-        <div class="filter-control">
-          <el-button type="primary" @click="onEditMenu(null, 'add')">添加菜单</el-button>
-        </div>
-      </div>
-      <!-- 搜索区域END -->
-      <el-table
-        v-loading="listLoading"
-        header-row-class-name="tableHeader"
-        class="table-cell"
-        row-key="id"
-        border
-        fit
-        lazy
-        :indent="24"
-        :data="list"
-        :load="load"
-        :tree-props="{ hasChildren: 'hasChildren' }"
-      >
-        <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
-        <el-table-column label="菜单名称" prop="title" align="center" class-name="text-left" />
-        <el-table-column prop="name" label="路由名称" align="center" />
-        <el-table-column label="菜单级别" width="120px" align="center">
-          <template slot-scope="{ row }">
-            {{ row.level | levelName }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="childCount" label="子菜单数量" align="center" width="100px" />
-        <el-table-column label="展示图标" align="center" width="100">
-          <template slot-scope="{ row }">
-            <i v-if="row.icon" :class="row.icon" />
-            <span v-else>无</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="listQuery.menuType === 2" prop="name" label="会员功能" align="center">
-          <template slot-scope="{ row }">
-            <span v-if="row.baseFlag === 1">基础功能</span>
-            <span v-else>订制功能</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="启用状态" align="center" width="100">
-          <template slot-scope="{ row }">
-            <el-switch v-model="row.status" :active-value="0" :inactive-value="1" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="sort" label="排序" align="center" width="100">
-          <template slot-scope="{ row }">
-            <el-input v-model="row.sort" />
-          </template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="center" width="180px">
-          <template slot-scope="{ row }">
-            <span>{{ row.createTime | formatTime }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="300">
-          <template slot-scope="{ row }">
-            <el-button type="primary" size="mini" @click="onEditMenu(row, 'edit')">编辑</el-button>
-            <el-button type="primary" size="mini" @click="onEditMenu(row, 'child')">添加子菜单</el-button>
-            <el-button type="danger" size="mini">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 页码 -->
-      <pagination
-        :total="total"
-        :page.sync="listQuery.pageNum"
-        :limit.sync="listQuery.pageSize"
-        @pagination="getList"
-      />
-      <edit-page
-        :title="editTitle"
-        :show="editDrawer"
-        :menu-type="menuType"
-        :edit-type="editType"
-        :menu-id="currentMenuId"
-        @close="editDrawer = false"
-      />
-    </div>
+  <div class="app-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane v-for="item in menusCategory" :key="item.menuType" :label="item.title" :name="item.name" :lazy="true">
+        <table-list :key="item.menuType" :menu-type="item.menuType" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { fetchMenuList } from '@/api/system'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import EditPage from './components/edit-page.vue'
+import TableList from './components/table-list.vue'
 export default {
-  name: 'TableList',
+  name: 'SettingsMenus',
   components: {
-    Pagination,
-    EditPage
-  },
-  filters: {
-    levelName(level) {
-      return '一二三四五六七八九十'.split('')[level - 1] + '级菜单'
-    }
-  },
-  props: {
-    menuType: {
-      type: Number,
-      default: 1
-    }
+    TableList
   },
   data() {
     return {
-      listLoading: false,
-      editDrawer: false,
-      editTitle: '',
-      // 查询参数
-      listQuery: {
-        parentId: '',
-        menuType: '', // 1：管理员 2：供应商
-        status: '',
-        pageSize: 10,
-        pageNum: 1
-      },
-      total: 0,
-      // 菜单列表
-      list: [],
-      currentMenuId: 0,
-      editType: 'add'
+      activeName: 'manager',
+      menusCategory: [
+        {
+          id: 1,
+          title: '管理员菜单管理',
+          name: 'manager',
+          menuType: 1
+        },
+        {
+          id: 2,
+          title: '供应商管理',
+          name: 'supplier',
+          menuType: 2
+        }
+      ]
     }
   },
   created() {
-    this.getList()
+    this.activeName = this.$route.query.activeName || 'manager'
   },
   methods: {
-    // 编辑菜单
-    onEditMenu(row, type) {
-      this.editType = type
-      const titles = {
-        edit: '修改菜单信息',
-        add: '添加菜单',
-        child: '添加子菜单'
-      }
-      this.editTitle = titles[type]
-      if (type === 'edit') {
-        this.currentMenuId = row.id
-      } else if (type === 'child') {
-        this.currentMenuId = row.id
-      } else {
-        this.currentMenuId = 0
-      }
-      this.editDrawer = true
-    },
-
-    // 加载子菜单
-    async load(tree, treeNode, resolve) {
-      try {
-        const res = await fetchMenuList({
-          parentId: tree.id,
-          menuType: this.menuType,
-          status: '',
-          pageSize: 1000,
-          pageNum: 1
-        })
-        const list = res.data.list.map((item) => {
-          item.hasChildren = item.childCount > 0
-          item.level = tree.level + 1
-          return item
-        })
-        resolve(list)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 获取列表
-    async getList() {
-      this.listQuery.menuType = this.menuType
-      this.listQuery.pageNum = 1
-      try {
-        const res = await fetchMenuList(this.listQuery)
-        this.list = res.data.list.map((item) => {
-          item.hasChildren = item.childCount > 0
-          item.level = 1
-          return item
-        })
-        this.total = res.data.total
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    // 表格索引
-    indexMethod(index) {
-      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
-    }
+    handleClick() {}
   }
 }
 </script>
 
-<style>
-.table-list .text-left {
-  text-align: left !important;
-}
-
-.table-list .text-left.is-leaf {
-  text-align: center !important;
+<style scoped>
+.page-title {
+  font-size: 18px;
+  color: #404040;
 }
 </style>