增加菜单排序功能 fix #66 close #66

server/alembic/versions/a5e2cea226d4_添加菜单排序字段.py

@@ -0,0 +1,29 @@
+"""添加菜单排序字段
+
+Revision ID: a5e2cea226d4
+Revises: 334040db4d77
+Create Date: 2022-10-31 09:44:30.289049
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel
+from sqlalchemy.dialects import mysql
+
+# revision identifiers, used by Alembic.
+revision = 'a5e2cea226d4'
+down_revision = '334040db4d77'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('menu', sa.Column('sort', sa.Integer(), nullable=True, comment='菜单排序'))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('menu', 'sort')
+    # ### end Alembic commands ###

server/alembic/versions/b703662d9cf9_更新菜单排序字段.py

@@ -0,0 +1,37 @@
+"""更新菜单排序字段
+
+Revision ID: b703662d9cf9
+Revises: a5e2cea226d4
+Create Date: 2022-10-31 10:22:22.613017
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel
+from sqlalchemy.dialects import mysql
+
+# revision identifiers, used by Alembic.
+revision = 'b703662d9cf9'
+down_revision = 'a5e2cea226d4'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.alter_column('menu', 'sort',
+               existing_type=mysql.INTEGER(),
+               type_=sa.Float(),
+               existing_comment='菜单排序',
+               existing_nullable=True)
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.alter_column('menu', 'sort',
+               existing_type=sa.Float(),
+               type_=mysql.INTEGER(),
+               existing_comment='菜单排序',
+               existing_nullable=True)
+    # ### end Alembic commands ###

server/crud/internal/menu.py

@@ -1,6 +1,6 @@
 from typing import Optional, List
 from sqlmodel import Session, select
-from server.models.internal.menu import Menu
+from ...models.internal.menu import Menu
 from ..base import CRUDBase
 
 
@@ -9,6 +9,7 @@ def search(self, session: Session, q: Optional = None) -> List[Menu]:
         sql = select(self.model)
         if q is not None:
             sql = sql.where(self.model.name.like(f'%{q}%'))
+        sql = sql.order_by(self.model.sort)
         return session.exec(sql).all()
 
     def update(self, session: Session, db_obj, obj_in: Menu):

server/models/internal/menu.py

@@ -11,6 +11,7 @@ class MenuBase(SQLModel):
     auth: Optional[str] = Field(max_length=50, sa_column_kwargs={'comment': '授权标识'})
     type: str = Field(max_length=10, sa_column_kwargs={'comment': '类型'})
     parent_id: Optional[int] = Field(sa_column_kwargs={'comment': '父级ID'})
+    sort: Optional[float] = Field(sa_column_kwargs={'comment': '菜单排序'})
     enable: bool = Field(default=True, sa_column=Column(Boolean, comment='启用'))
 
 

server/routers/internal/login.py

@@ -54,15 +54,15 @@ async def get_permission(request: Request, session: Session = Depends(get_sessio
     user: User = crud.internal.user.get(session, uid)
     print(user.roles)
     user_menus = []
-    user_btns = []
     # admin组用户获取所有菜单列表
     if uid == 1 or crud.internal.role.check_admin(session, uid):
-        menu_list = session.exec(select(Menu).where(Menu.type != 'btn')).all()
+        menu_list = session.exec(select(Menu).where(Menu.type != 'btn').order_by(Menu.sort)).all()
         btn_list = session.exec(select(Menu.auth).where(Menu.type == 'btn').where(Menu.auth.is_not(None))).all()
     else:
         for role in user.roles:
             user_menus.extend([menu.id for menu in role.menus])
-        menu_list = session.exec(select(Menu).where(Menu.id.in_(set(user_menus))).where(Menu.type != 'btn')).all()
+        menu_list = session.exec(
+            select(Menu).where(Menu.id.in_(set(user_menus))).where(Menu.type != 'btn').order_by(Menu.sort)).all()
         btn_list = session.exec(select(Menu.auth).where(Menu.id.in_(set(user_menus))).where(Menu.type == 'btn')).all()
     print('menulist')
     print(menu_list)

www/src/views/system/menus/MenuForm.vue

@@ -11,13 +11,13 @@
   <el-form-item label="菜单路径" prop="path" :rules="[{required:true,message:'请填写菜单路径'}]">
     <el-input v-model="selectData.path"></el-input>
   </el-form-item>
-  <el-form-item v-if="selectData.type !== 'btn'" label="前端组件" prop="component"
+  <el-form-item label="前端组件" prop="component"
                 :rules="[{required:true,message:'一级菜单填写Layout'}]">
     <!-- <el-input v-if="selectData.parent_id == null" v-model="selectData.component" disabled></el-input> -->
     <el-input v-model="selectData.component"></el-input>
   </el-form-item>
-  <el-form-item v-else label="URL地址">
-    <el-input v-model="selectData.url"></el-input>
+  <el-form-item label="排序" prop="sort" :rules="[{type:'float',message:'请输入数字'}]">
+    <el-input v-model="selectData.sort"/>
   </el-form-item>
   <el-form-item label="状态">
     <el-radio-group v-model="selectData.enable">

www/src/views/system/menus/index.vue

@@ -17,11 +17,12 @@
     </el-col>
   </el-row>
   <div style="padding-top:10px">
-    <el-table :data="menuData" style="width: 100%; margin-bottom: 20px;" row-key="id" border stripe
+    <el-table :data="menuData"
+              style="width: 100%; margin-bottom: 20px;" row-key="id" border stripe
               :header-cell-style="{background:'#eef1f6',color:'#606266'}">
       <!--      <el-table-column prop="id" label="主键" width="180"/>-->
-      <el-table-column prop="name" label="名称" width="180"/>
-      <el-table-column prop="type" label="类型" width="100" align="center">
+      <el-table-column prop="name" label="菜单名称" width="180"/>
+      <el-table-column prop="type" label="菜单类型" width="100" align="center">
         <template #default="scope">
           <el-tag effect="dark" v-if="scope.row.type === 'page'" type='info'>
             一级菜单
@@ -34,7 +35,7 @@
       </el-table-column>
       <el-table-column prop="path" label="路径" width="180"/>
       <el-table-column prop="component" label="组件" width="180"/>
-      <el-table-column prop="auth" label="权限标识" align="center"/>
+      <el-table-column prop="sort" label="排序" align="center"/>
       <el-table-column prop="enable" label="状态" width="80">
         <template #default="scope">
           <el-tag effect="dark" :type="scope.row.enable === true?'success':'danger'">