优化菜单管理添加显示

server/api/form.py

@@ -12,34 +12,35 @@
 from django import forms
 from django.core.exceptions import ValidationError
 
+
 class MenuForm(forms.Form):
-  path = forms.CharField(required=True,error_messages={
-    'required':'路径必须输入',
-  })
-  name = forms.CharField(required=True,error_messages={
-    'required':'路径名必须输入',
-  })
-  component = forms.CharField(required=True,error_messages={
-    'required':'组件路径必须输入',
-  })
-  title = forms.CharField(required=True,error_messages={
-    'required':'菜单名必须输入',
-  })
-  # icon = forms.CharField(required=True,error_messages={
-  #   'required':'菜单图标必须输入',
-  # })
+    path = forms.CharField(required=True, error_messages={
+        'required': '路径必须输入',
+    })
+    name = forms.CharField(required=True, error_messages={
+        'required': '路径名必须输入',
+    })
+    component = forms.CharField(required=True, error_messages={
+        'required': '组件路径必须输入',
+    })
+    title = forms.CharField(required=True, error_messages={
+        'required': '菜单名必须输入',
+    })
+    # icon = forms.CharField(required=True,error_messages={
+    #   'required':'菜单图标必须输入',
+    # })
 
-  # # 单个字段验证 clean_xxx
-  # def clean_password(self):
-  #   password = self.cleaned_data.get('password')
-  #   if password and password.isdigit():
-  #     raise ValidationError("密码不能是纯数字")
-  #   return password
+    # # 单个字段验证 clean_xxx
+    # def clean_password(self):
+    #   password = self.cleaned_data.get('password')
+    #   if password and password.isdigit():
+    #     raise ValidationError("密码不能是纯数字")
+    #   return password
 
-  # # 全局验证
-  # def clean(self):
-  #   password = self.cleaned_data.get('password',None)
-  #   confirm = self.cleaned_data.get('confirm',None)
-  #   if password != confirm:
-  #     raise ValidationError({'confirm':"两次密码输入不一致"})
-  #   return self.cleaned_data
+    # # 全局验证
+    # def clean(self):
+    #   password = self.cleaned_data.get('password',None)
+    #   confirm = self.cleaned_data.get('confirm',None)
+    #   if password != confirm:
+    #     raise ValidationError({'confirm':"两次密码输入不一致"})
+    #   return self.cleaned_data

server/api/serializers.py

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+'''
+@Desc    :
+@File    :   serializers.py
+@Time    :   2021/04/07 15:19:03
+@Author  :   wang
+@Version :   1.0
+'''
+
+# here put the import lib
+
+from rest_framework import serializers
+from api.models import *
+
+
+# 通过模型生成序列化器
+class UserSerializer(serializers.Serializer):
+    class Meta:
+        models = User
+        # fields = []
+        # fields = "__all__"
+        # exclude = []

server/api/views.py

@@ -144,9 +144,9 @@ class getUserInfoById(View):
         if user:
             # res = {'codeList': ['1000', '3000', '5000']}
             res = format_useinfo(user)
-            return JsonResponse({'code': 0, 'result': res, })
+            return JsonResponse({'code': 0, 'result': res, }, json_dumps_params={"ensure_ascii": False})
         else:
-            return JsonResponse({'code': 1, 'result': {'message': 'error'}}, json_dumps_params={"ensure_ascii": False})
+            return JsonResponse({'code': 1, 'type': 'error', 'message': 'no role,create role'}, json_dumps_params={"ensure_ascii": False})
 
 
 class getUserList(View):
@@ -156,7 +156,7 @@ class getUserList(View):
             res = format_uselist(users)
             return JsonResponse({'code': 0, 'result': res, }, json_dumps_params={"ensure_ascii": False})
         else:
-            return JsonResponse({'code': 1, 'result': {'message': 'no role,create role'}}, json_dumps_params={"ensure_ascii": False})
+            return JsonResponse({'code': 1, 'type': 'error', 'message': 'no role,create role'}, json_dumps_params={"ensure_ascii": False})
 
 
 class addUser(View):
@@ -236,7 +236,7 @@ class getAllMenuList(View):
     def get(self, request):
         querySetObj = Menu.objects.all()
         menus = format_menus(querySetObj, False)
-        return JsonResponse({'code': 0, 'result': {'format': True, 'menus': menus}})
+        return JsonResponse({'code': 0, 'result': {'format': True, 'menus': menus}}, json_dumps_params={"ensure_ascii": False})
 
 
 class addMenu(View):
@@ -282,7 +282,7 @@ class deleteMenu(View):
                 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})
+                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': 'server error'}, json_dumps_params={"ensure_ascii": False})

src/components/Form/src/hooks/useFormEvents.ts

@@ -44,7 +44,7 @@ export function useFormEvents({
     clearValidate();
     emit('reset', toRaw(formModel));
     submitOnReset && handleSubmit();
-    console.log('重置按钮默认触发查询事件');
+    // console.log('重置按钮默认触发查询事件');
   }
 
   /**

src/views/permission/menu/data.ts

@@ -62,16 +62,22 @@ export const formSchema: FormSchema[] = [
     // show: ({ values }) => !isButton(values.type),
   },
   {
+    field: 'name',
+    label: '路径名',
+    component: 'Input',
+    // show: ({ values }) => !isButton(values.type),
+  },
+  {
     field: 'redirect',
     label: '重定向',
     component: 'Input',
-    required: true,
     // show: ({ values }) => !isButton(values.type),
   },
   {
     field: 'component',
     label: '组件路径',
     component: 'Input',
+    // required: true,
     // show: ({ values }) => isMenu(values.type),
   },
   {
@@ -141,57 +147,57 @@ export const formSchema: FormSchema[] = [
   // },
 ];
 
-export const dataSource = [
-  {
-    key: '0-1',
-    menuName: 'Dashboard',
-    status: true,
-    icon: 'ion:layers-outline',
-    create_time: '2021-01-01',
-    detail: '',
-    children: [
-      {
-        key: '0-1-1',
-        menuName: '工作台',
-        status: true,
-        icon: 'ion:git-compare-outline',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-      {
-        key: '0-1-2',
-        menuName: '分析页',
-        status: false,
-        icon: 'ion:tv-outline',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-    ],
-  },
-  {
-    key: '1-1',
-    menuName: '权限管理',
-    status: true,
-    icon: 'bx:bx-lock',
-    create_time: '2021-01-01',
-    detail: '',
-    children: [
-      {
-        key: '1-1-1',
-        menuName: '角色管理',
-        status: true,
-        icon: 'bx:bx-lock',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-      {
-        key: '1-1-2',
-        menuName: '菜单管理',
-        status: true,
-        icon: 'bx:bx-lock',
-        create_time: '2021-01-01',
-        detail: '',
-      },
-    ],
-  },
-];
+// export const dataSource = [
+//   {
+//     key: '0-1',
+//     menuName: 'Dashboard',
+//     status: true,
+//     icon: 'ion:layers-outline',
+//     create_time: '2021-01-01',
+//     detail: '',
+//     children: [
+//       {
+//         key: '0-1-1',
+//         menuName: '工作台',
+//         status: true,
+//         icon: 'ion:git-compare-outline',
+//         create_time: '2021-01-01',
+//         detail: '',
+//       },
+//       {
+//         key: '0-1-2',
+//         menuName: '分析页',
+//         status: false,
+//         icon: 'ion:tv-outline',
+//         create_time: '2021-01-01',
+//         detail: '',
+//       },
+//     ],
+//   },
+//   {
+//     key: '1-1',
+//     menuName: '权限管理',
+//     status: true,
+//     icon: 'bx:bx-lock',
+//     create_time: '2021-01-01',
+//     detail: '',
+//     children: [
+//       {
+//         key: '1-1-1',
+//         menuName: '角色管理',
+//         status: true,
+//         icon: 'bx:bx-lock',
+//         create_time: '2021-01-01',
+//         detail: '',
+//       },
+//       {
+//         key: '1-1-2',
+//         menuName: '菜单管理',
+//         status: true,
+//         icon: 'bx:bx-lock',
+//         create_time: '2021-01-01',
+//         detail: '',
+//       },
+//     ],
+//   },
+// ];

src/views/permission/menu/index.vue

@@ -136,14 +136,15 @@
 
       function addMenuModel() {
         openAddModel(true, {
-          menuName: '',
-          conmponent: '',
           id: 0,
-          icon: '',
-          path: '',
-          redirect: '',
-          parent: null,
-          detail: '',
+          // menuName: '',
+          // name:'',
+          // component: '',
+          // icon: '',
+          // path: '',
+          // redirect: '',
+          // parent: null,
+          // detail: '',
           status: true,
           treeData: getTableAction().getDataSource(),
         });
@@ -171,10 +172,7 @@
 
       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))
+
         await deleteMenu({id:record.id}).then(res => {
           console.log(res)
           getTableAction().reload()

src/views/permission/menu/model.vue

@@ -30,7 +30,7 @@
       const adaptWidth = adapt()
       const isUpdate = ref(true);
 
-      const [registerForm, { getFieldsValue, updateSchema, setFieldsValue, /* validate*/ }] = useForm({
+      const [registerForm, { getFieldsValue, updateSchema, setFieldsValue, resetFields/* validate*/ }] = useForm({
         labelWidth: 100,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -39,17 +39,13 @@
       const [register, { closeModal } ] = useModalInner((data) => {
         console.log('-------------------data---------------')
         console.log(data)
+        resetFields()
         isUpdate.value = !!data?.isUpdate;
-        // 方式2
-        if (unref(isUpdate)) {
-          setFieldsValue({
-            ...data
-          });
-        }
+        // if (unref(isUpdate)) {
+        //   setFieldsValue(data);
+        // }
+        setFieldsValue(data);
         menu.id = data.id
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
         updateSchema({
           field: 'parent',
           componentProps: { treeData: data.treeData },
@@ -62,15 +58,16 @@
         const info = getFieldsValue()
         if (menu.id) {
           info.id = menu.id
-        }
-        if(info.id === info.parent) {
+          if(info.id === info.parent) {
            notification.error({
               message: '错误!',
               description: "不能选择当前菜单作为上级菜单！",
               duration: 3,
             });
             return
+          }
         }
+
         const data = {}
         for(let key  in info){
           if (info[key]) {