完善菜单管理增删改查

server/api/migrations/0021_auto_20210406_1200.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.7 on 2021-04-06 12:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0020_auto_20210401_1342'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='menu',
+            name='icon',
+            field=models.CharField(max_length=120, null=True),
+        ),
+    ]

server/api/models.py

@@ -39,7 +39,7 @@ class Menu(models.Model):
     # 以下三个为菜单meta配置
     title = models.CharField(max_length=32, null=True)
     affix = models.BooleanField(default=1)
-    icon = models.CharField(max_length=32, null=True)
+    icon = models.CharField(max_length=120, null=True)
 
     def __unicode__(self):
         return self.name

server/api/urls.py

@@ -17,9 +17,6 @@ app_name = 'api'  # namespace 命名空间
 # 路由列表 urlpatterns
 urlpatterns = [
     # 不能以/ 开头
-    path('', views.index, name='index'),
-    # path('cbv/', views.cbv.as_view(), name='cbv'),
-    # path('excbv/', views.extend_cbv.as_view(), name='extend_cbv'),
     path('login/', views.login.as_view(), name='login'),
     path('getUserInfoById/', views.getUserInfoById.as_view(), name='get_user_info'),
     path('getUserList/', views.getUserList.as_view(), name='get_user_list'),
@@ -28,5 +25,7 @@ urlpatterns = [
     path('deleteUser/', views.deleteUser.as_view(), name='delete_user'),
     path('getMenuListById/', views.getMenuListById.as_view(), name='get_menu'),
     path('getAllMenuList/', views.getAllMenuList.as_view(), name='get_all_menu'),
-    path('menu/add/', views.add_menu.as_view(), name='add_menu'),
+    path('addMenu/', views.addMenu.as_view(), name='add_menu'),
+    path('editMenu/', views.editMenu.as_view(), name='edit_menu'),
+    path('deleteMenu/', views.deleteMenu.as_view(), name='delete_menu'),
 ]

server/api/views.py

@@ -6,38 +6,8 @@ from .models import User, Menu
 from django.core.serializers import serialize
 import json
 
-
 # Create your views here.
 
-def index(request):
-    data = {
-        'name': {
-            'firstname': 'Tom',
-            'lastname': 'john'
-        },
-        'age': 18,
-        'sex': '男'
-    }
-    return JsonResponse(data, json_dumps_params={"ensure_ascii": False})
-
-# class cbv(View):
-#   def get(self,request):
-#     print(request)
-#     print(request.GET.get('username'))
-#     return JsonResponse({'method':'get','data':request.GET})
-
-#   def post(self,request):
-#     return JsonResponse({'method':'post','data':request.POST})
-#   def put(self,request):
-#     return JsonResponse({'method':'put'})
-#   def delete(self,request):
-#     return JsonResponse({'method':'delete'})
-
-# class extend_cbv(cbv):
-#   # 重写post请求
-#   def post(self,request):
-#     return JsonResponse({'method':'post','msg':'重写post请求'},json_dumps_params={"ensure_ascii":False})
-
 
 def format_useinfo(user):
     format_user = json.loads(
@@ -199,7 +169,7 @@ class addUser(View):
         print(data)
         print('--------------data------------')
         if User.objects.all().filter(username=data.get('username')):
-            return JsonResponse({'code': 1, 'result': {'error': '该角色名已被占用'}}, json_dumps_params={"ensure_ascii": False})
+            return JsonResponse({'code': 1, 'type': 'error', 'message': '该角色名已被占用'}, json_dumps_params={"ensure_ascii": False})
         else:
             data['token'] = data.get('username') + 'token'
             userObj = User.objects.create(**data)
@@ -212,6 +182,8 @@ class editUser(View):
     def post(self, request):
         data = json.loads(request.body)
         user = User.objects.all().filter(id=data.get('id')).first()
+        if User.objects.all().filter(username=data.get('username')) and user.username != data.get('username'):
+            return JsonResponse({'code': 1, 'type': 'error', 'message': '该角色名已被占用'}, json_dumps_params={"ensure_ascii": False})
         if user:
             menuIdList = data.pop('menus')
             menus = Menu.objects.all().filter(id__in=menuIdList)
@@ -222,9 +194,9 @@ class editUser(View):
             user.detail = data.get('detail')
             user.menus.set(menus)
             user.save()
-            return JsonResponse({'code': 0, 'result': {'data': '修改成功'}}, json_dumps_params={"ensure_ascii": False})
+            return JsonResponse({'code': 0, 'type': 'error', 'message': '修改成功', 'result': {'data': '修改成功'}}, json_dumps_params={"ensure_ascii": False})
         else:
-            return JsonResponse({'code': 1, 'result': {'data': '查无此人'}}, json_dumps_params={"ensure_ascii": False})
+            return JsonResponse({'code': 1, 'type': 'error', 'message': '查无此人'}, json_dumps_params={"ensure_ascii": False})
             # userObj = User.objects.create(**data)
             # userObj.menus.set(menus)
 
@@ -236,18 +208,19 @@ class deleteUser(View):
         try:
             if user:
                 user.delete()
-                return JsonResponse({'code': 0, 'result': {'data': '删除成功'}}, json_dumps_params={"ensure_ascii": False})
+                return JsonResponse({'code': 0, 'result': {'data': '删除角色成功'}}, json_dumps_params={"ensure_ascii": False})
             else:
-                return JsonResponse({'code': 1, 'result': {'data': '查无此人'}}, json_dumps_params={"ensure_ascii": False})
+                return JsonResponse({'code': 1, 'type': 'error', 'message': '查无此人'}, json_dumps_params={"ensure_ascii": False})
         except Exception as e:
             print(e)
-            return JsonResponse({'code': 1, 'result': {'data': '服务端错误'}}, json_dumps_params={"ensure_ascii": False})
+            return JsonResponse({'code': 1, 'type': 'error', 'message': e}, json_dumps_params={"ensure_ascii": False})
 
 
 class getMenuListById(View):
     def post(self, request):
         # 获取参数id
         userId = json.loads(request.body).get('id')
+        print(userId)
         # 当前用户
         querSetUser = User.objects.all().filter(id=userId)
         user = format_useinfo(querSetUser)
@@ -266,8 +239,50 @@ class getAllMenuList(View):
         return JsonResponse({'code': 0, 'result': {'format': True, 'menus': menus}})
 
 
-class add_menu(View):
+class addMenu(View):
+    def post(self, request):
+        data = json.loads(request.body)
+        data['title'] = data.pop('menuName')
+        if data.get('parent'):
+            parentId = data.pop('parent')
+            parent = Menu.objects.all().filter(id=parentId).first()
+            data['parent'] = parent
+        menuObj = Menu.objects.create(**data)
+        # if parent:
+        #     menuObj.parent.set(parent)
+        return JsonResponse({'code': 0, 'result': {'data': '菜单添加成功'}}, json_dumps_params={"ensure_ascii": False})
+
+
+class editMenu(View):
+    def post(self, request):
+        data = json.loads(request.body)
+        menu = Menu.objects.all().filter(id=data.get('id')).first()
+        menu.icon = data.get('icon')
+        menu.title = data.get('menuName')
+        menu.path = data.get('path')
+        menu.reditect = data.get('reditect')
+        menu.component = data.get('component')
+        menu.status = data.get('status')
+        menu.detail = data.get('detail')
+        menu.parent = Menu.objects.all().filter(id=data.get('parent')).first()
+        # if data.get('parent'):
+        #     parentId = data.pop('parent')
+        #     menu.parent.add(parent)
+        # print(menu)
+        menu.save()
+        return JsonResponse({'code': 0, 'result': {'data': '菜单修改成功'}}, json_dumps_params={"ensure_ascii": False})
+
+
+class deleteMenu(View):
     def post(self, request):
-        data = request.POST
-        Menu.objects.create(**data)
-        return JsonResponse({'code': 1, 'error': '菜单添加成功'})
+        data = json.loads(request.body)
+        menu = Menu.objects.all().filter(id=data.get('id'))
+        try:
+            if menu:
+                menu.delete()
+                return JsonResponse({'code': 0, 'result': {'data': '删除菜单成功'}}, json_dumps_params={"ensure_ascii": False})
+            else:
+                return JsonResponse({'code': 1, 'result': {'data': '没有找到匹配菜单'}}, json_dumps_params={"ensure_ascii": False})
+        except Exception as e:
+            print(e)
+            return JsonResponse({'code': 1, 'result': {'data': '服务端错误'}}, json_dumps_params={"ensure_ascii": False})

src/api/sys/menu.ts

@@ -4,11 +4,17 @@ import {
   getMenuListByIdParams,
   getAllMenuListResultModel,
   getMenuListByIdParamsResultModel,
+  addMenuParams,
+  editMenuParams,
+  deleteMenuParams,
 } from './model/menuModel';
 
 enum Api {
   GetMenuListById = '/getMenuListById/',
   GETAllMenuList = '/getAllMenuList',
+  AddMenu = '/addMenu/',
+  EditMenu = '/editMenu/',
+  DeleteMenu = '/deleteMenu/',
 }
 
 /**
@@ -22,6 +28,36 @@ export function getMenuListById(params: getMenuListByIdParams) {
   });
 }
 /**
+ * @description: Get user menu based on id
+ */
+export function addMenu(params: addMenuParams) {
+  return defHttp.request({
+    url: Api.AddMenu,
+    method: 'POST',
+    params,
+  });
+}
+/**
+ * @description: Get user menu based on id
+ */
+export function editMenu(params: editMenuParams) {
+  return defHttp.request({
+    url: Api.EditMenu,
+    method: 'POST',
+    params,
+  });
+}
+/**
+ * @description: Get user menu based on id
+ */
+export function deleteMenu(params: deleteMenuParams) {
+  return defHttp.request({
+    url: Api.DeleteMenu,
+    method: 'POST',
+    params,
+  });
+}
+/**
  * @description: Get all based on id
  */
 export function getAllMenuList() {

src/api/sys/model/menuModel.ts

@@ -16,6 +16,39 @@ export interface RouteItem {
 export interface getMenuListByIdParams {
   id: number | string;
 }
+/**
+ * @description: Delete menu interface
+ */
+export interface deleteMenuParams {
+  id: number | string;
+}
+/**
+ * @description: Add menu interface
+ */
+export interface addMenuParams {
+  path: string;
+  name?: string;
+  component: any;
+  icon?: string;
+  parent?: number;
+  menuName?: string;
+  redirect?: string;
+  status?: boolean;
+}
+/**
+ * @description: Edit menu interface
+ */
+export interface editMenuParams {
+  id: number | number;
+  path: string;
+  name?: string;
+  component: any;
+  icon?: string;
+  parent?: number;
+  menuName?: string;
+  redirect?: string;
+  status?: boolean;
+}
 
 /**
  * @description: Get menu return value
@@ -33,7 +66,7 @@ export interface getAllMenuListResultModel {
   menuName?: string;
   // alias?: string | string[];
   redirect?: string;
-  status?: true;
+  status?: boolean;
   caseSensitive?: boolean;
   children?: getAllMenuListResultModel[];
 }

src/settings/projectSetting.ts

@@ -20,7 +20,7 @@ const setting: ProjectConfig = {
   settingButtonPosition: SettingButtonPositionEnum.AUTO,
 
   // Permission mode  ROLE--前端权限 BACK--后端权限
-  permissionMode: PermissionModeEnum.ROLE,
+  permissionMode: PermissionModeEnum.BACK,
 
   // Permission-related cache is stored in sessionStorage or localStorage
   permissionCacheType: CacheTypeEnum.LOCAL,

src/utils/http/axios/Axios.ts

@@ -215,8 +215,6 @@ export class VAxios {
               const { t } = useI18n();
               ret.menus.map((item) => (item.menuName = t(item.menuName)));
               ret = listToTree(ret.menus);
-              console.log('------treem--------');
-              console.log(ret);
             }
             ret !== errorResult ? resolve(ret) : reject(new Error('request error!'));
             return;

src/views/permission/menu/data.ts

@@ -74,6 +74,12 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     // show: ({ values }) => isMenu(values.type),
   },
+  {
+    field: 'detail',
+    label: '详情',
+    component: 'Input',
+    // show: ({ values }) => isMenu(values.type),
+  },
   // {
   //   field: 'permission',
   //   label: '权限标识',

src/views/permission/menu/index.vue

@@ -12,7 +12,7 @@
       <template #form-custom > custom-slot </template>
 
       <template #toolbar>
-        <a-button type="primary" @click="addMenu" >
+        <a-button type="primary" @click="addMenuModel" >
           {{ '新增菜单' }}
         </a-button>
       </template>
@@ -27,10 +27,7 @@
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
-
-  // import { dataSource } from './data'
-
-  import { getAllMenuList } from '/@/api/sys/menu';
+  import { getAllMenuList, addMenu, editMenu, deleteMenu } from '/@/api/sys/menu';
   import {
     BasicTable,
     useTable,
@@ -117,7 +114,7 @@
           fixed: undefined,
         },
       });
-      const [addRegister, { openModal: openAdd }] = useModal();
+      const [addRegister, { openModal: openAddModel }] = useModal();
       const rowClick = (e: any) => {
         console.log(e)
       }
@@ -137,18 +134,31 @@
         console.log(getTableAction().getSelectRowKeys());
       }
 
-      function addMenu() {
-        openAdd(true, {
-          id: 0,
+      function addMenuModel() {
+        openAddModel(true, {
           menuName: '',
+          conmponent: '',
+          id: 0,
+          icon: '',
+          path: '',
+          redirect: '',
+          parent: null,
           detail: '',
+          status: true,
           treeData: getTableAction().getDataSource(),
         });
       }
 
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id;  // record.key
-        openAdd(true, {
+        const data = getTableAction().getDataSource()
+        data.map(item => {
+          if (item.id === record.id) {
+            record = item
+          }
+        })
+        console.log(record)
+        openAddModel(true, {
           // id: record.id,
           // name: record.name,
           // password: record.password,
@@ -159,42 +169,31 @@
         });
       }
 
-      function handleDelete(record: Recordable) {
+      async function handleDelete(record: Recordable) {
         console.log('点击了删除', record.id);
-        console.log(record)
-        const data = getTableAction().getDataSource()
-        console.log(data)
-        getTableAction().setTableData(data.filter(item => item.id !== record.id))
+        // console.log(record)
+        // const data = getTableAction().getDataSource()
+        // console.log(data)
+        // getTableAction().setTableData(data.filter(item => item.id !== record.id))
+        await deleteMenu({id:record.id}).then(res => {
+          console.log(res)
+          getTableAction().reload()
+        })
       }
 
-      function saveData(data: any) {
-        console.log('saveDate--------')
-        if (!data.key) {
-          console.log('添加菜单')
-          console.log(data)
-          return
-        }
-
-        const mapTree = org => {
-          const haveChildren = Array.isArray(org.children) && org.children.length > 0;
-          if (org.key === data.key) {
-            org.menuName = data.menuName
-            org.icon = data.icon
-            org.status = data.status
-            org.detail = data.detail
-            return
-          }
-          if (haveChildren) {
-            org.children.map(item => mapTree(item))
-          }
-        }
-
-        const dataSource = getTableAction().getDataSource()
-
-        if (Array.isArray(dataSource)) {
-          dataSource.map(item => mapTree(item))
+      async function saveData(data: any) {
+        if (!data.id) { //判断id
+          console.log('-----------添加菜单----------')
+          await addMenu(data).then(res => {
+            console.log(res)
+          })
+        }else {
+            console.log('---------编辑菜单----------')
+           await editMenu(data).then(res => {
+            console.log(res)
+          })
         }
-        getTableAction().setTableData(dataSource)
+        getTableAction().reload()
       }
 
       function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
@@ -221,7 +220,7 @@
         tableRef,
         registerTable,
         rowClick,
-        addMenu,
+        addMenuModel,
         handleEdit,
         createActions,
         getTableAction,

src/views/permission/menu/model.vue

@@ -29,15 +29,13 @@
       const adaptWidth = adapt()
       const isUpdate = ref(true);
 
-      const [registerForm, { getFieldsValue, updateSchema, resetFields, setFieldsValue, /* validate*/ }] = useForm({
+      const [registerForm, { getFieldsValue, updateSchema, setFieldsValue, /* validate*/ }] = useForm({
         labelWidth: 100,
         schemas: formSchema,
-        // showActionButtonGroup: false,
+        showActionButtonGroup: false,
         actionColOptions: { span: 24 },
       });
       const [register, { closeModal } ] = useModalInner((data) => {
-        resetFields()
-
         console.log('-------------------data---------------')
         console.log(data)
         isUpdate.value = !!data?.isUpdate;
@@ -60,8 +58,21 @@
       const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
 
       function confirm() {
-        const data = getFieldsValue()
-        data.id = menu.id
+        const info = getFieldsValue()
+        if (menu.id) {
+          info.id = menu.id
+        }
+        const data = {}
+        for(let key  in info){
+          if (info[key]) {
+            data[key] = info[key]
+          }
+          // else {
+          //   data[key] = null
+          // }
+        }
+        console.log(data)
+        console.log('-------------11--------------')
         emit('saveData', data)
         closeModal()  // 关闭弹窗
       }

src/views/permission/role/index.vue

@@ -22,7 +22,6 @@
   import { defineComponent, reactive, ref, unref } from 'vue';
   import Add from './add.vue'
   import { useModal } from '/@/components/Modal';
-  // import { treeData } from './data';
   import { getAllMenuList } from '/@/api/sys/menu';
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';