菜单管理优化a

src/main.ts

@@ -12,6 +12,9 @@ import { setupI18n } from '/@/locales/setupI18n';
 
 import { registerGlobComp } from '/@/components/registerGlobComp';
 
+// Register icon Sprite
+// import 'vite-plugin-svg-icons/register';
+
 import { isDevMode } from '/@/utils/env';
 
 const app = createApp(App);

src/utils/http/axios/Axios.ts

@@ -211,10 +211,12 @@ export class VAxios {
           if (transformRequestHook && isFunction(transformRequestHook)) {
             let ret = transformRequestHook(res, opt);
             if (ret.format) {
-              // 权限菜单页面数据格式化
+              // 权限菜单管理页面数据格式化
               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

@@ -1,24 +1,24 @@
 import { FormSchema } from '/@/components/Table';
 
-const isDir = (type: string) => type === '0';
-const isMenu = (type: string) => type === '1';
-const isButton = (type: string) => type === '2';
+// const isDir = (type: string) => type === '0';
+// const isMenu = (type: string) => type === '1';
+// const isButton = (type: string) => type === '2';
 
 export const formSchema: FormSchema[] = [
-  {
-    field: 'type',
-    label: '菜单类型',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '目录', value: '0' },
-        { label: '菜单', value: '1' },
-        { label: '按钮', value: '2' },
-      ],
-    },
-    colProps: { lg: 24, md: 24 },
-  },
+  // {
+  //   field: 'type',
+  //   label: '菜单类型',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: '0',
+  //   componentProps: {
+  //     options: [
+  //       { label: '目录', value: '0' },
+  //       { label: '菜单', value: '1' },
+  //       { label: '按钮', value: '2' },
+  //     ],
+  //   },
+  //   colProps: { lg: 24, md: 24 },
+  // },
   {
     field: 'menuName',
     label: '菜单名称',
@@ -27,14 +27,14 @@ export const formSchema: FormSchema[] = [
   },
 
   {
-    field: 'parentMenu',
+    field: 'parent',
     label: '上级菜单',
     component: 'TreeSelect',
     componentProps: {
       replaceFields: {
         title: 'menuName',
-        key: 'key',
-        value: 'key',
+        key: 'id',
+        value: 'id',
       },
       getPopupContainer: () => document.body,
     },
@@ -51,28 +51,35 @@ export const formSchema: FormSchema[] = [
     label: '图标',
     component: 'IconPicker',
     required: true,
-    show: ({ values }) => !isButton(values.type),
+    // show: ({ values }) => !isButton(values.type),
   },
 
   {
-    field: 'routePath',
+    field: 'path',
     label: '路由地址',
     component: 'Input',
     required: true,
-    show: ({ values }) => !isButton(values.type),
+    // show: ({ values }) => !isButton(values.type),
   },
   {
-    field: 'component',
-    label: '组件路径',
+    field: 'redirect',
+    label: '重定向',
     component: 'Input',
-    show: ({ values }) => isMenu(values.type),
+    required: true,
+    // show: ({ values }) => !isButton(values.type),
   },
   {
-    field: 'permission',
-    label: '权限标识',
+    field: 'component',
+    label: '组件路径',
     component: 'Input',
-    show: ({ values }) => !isDir(values.type),
+    // show: ({ values }) => isMenu(values.type),
   },
+  // {
+  //   field: 'permission',
+  //   label: '权限标识',
+  //   component: 'Input',
+  //   // show: ({ values }) => !isDir(values.type),
+  // },
   {
     field: 'status',
     label: '状态',
@@ -85,47 +92,47 @@ export const formSchema: FormSchema[] = [
       ],
     },
   },
-  {
-    field: 'isExt',
-    label: '是否外链',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    show: ({ values }) => !isButton(values.type),
-  },
+  // {
+  //   field: 'isExt',
+  //   label: '是否外链',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: false,
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: false },
+  //       { label: '是', value: true },
+  //     ],
+  //   },
+  //   show: ({ values }) => !isButton(values.type),
+  // },
 
-  {
-    field: 'keepalive',
-    label: '是否缓存',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '否', value: '0' },
-        { label: '是', value: '1' },
-      ],
-    },
-    show: ({ values }) => isMenu(values.type),
-  },
+  // {
+  //   field: 'keepalive',
+  //   label: '是否缓存',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: false,
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: false },
+  //       { label: '是', value: true },
+  //     ],
+  //   },
+  //   show: ({ values }) => isMenu(values.type),
+  // },
 
-  {
-    field: 'show',
-    label: '是否显示',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '是', value: '0' },
-        { label: '否', value: '1' },
-      ],
-    },
-    show: ({ values }) => !isButton(values.type),
-  },
+  // {
+  //   field: 'show',
+  //   label: '是否显示',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: false,
+  //   componentProps: {
+  //     options: [
+  //       { label: '否', value: false },
+  //       { label: '是', value: true },
+  //     ],
+  //   },
+  //   show: ({ values }) => !isButton(values.type),
+  // },
 ];
 
 export const dataSource = [

src/views/permission/menu/index.vue

@@ -46,7 +46,7 @@
     {
       title: '菜单名称',
       dataIndex: 'menuName',
-      width: 150,
+      width: 120,
       align: 'left',
     },
     {
@@ -63,27 +63,36 @@
       },
     },
     {
-      title: '创建时间',
-      dataIndex: 'create_time',
-      width: 150,
+      title: '路径',
+      dataIndex: 'path',
+      width: 180,
     },
     {
-      title: '详情',
-      dataIndex: 'detail',
-      width: 200,
+      title: '创建时间',
+      dataIndex: 'create_time',
+      width: 180,
     },
     {
       title: '状态',
       dataIndex: 'status',
       width: 80,
       customRender: ({ record }) => {
+        // const status = record.status;
+        // const enable = ~~status === 0;
+        // const color = enable ? 'green' : 'red';
+        // const text = enable ? '启用' : '停用';
+        // return h(Tag, { color: color }, () => text);
         const status = record.status;
-        const enable = ~~status === 0;
-        const color = enable ? 'green' : 'red';
-        const text = enable ? '启用' : '停用';
+        const color = status ? 'green' : 'red';
+        const text = status ? '启用' : '停用';
         return h(Tag, { color: color }, () => text);
       },
     },
+     {
+      title: '详情',
+      dataIndex: 'detail',
+      width: 200,
+    },
   ];
 
   export default defineComponent({
@@ -97,7 +106,6 @@
         title: "菜单列表",
         titleHelpMessage: "温馨提醒",
         columns: columns,
-        // dataSource: dataSource,
         api:getAllMenuList,
         bordered: true,
         showIndexColumn: false,
@@ -134,26 +142,19 @@
           id: 0,
           menuName: '',
           detail: '',
+          treeData: getTableAction().getDataSource(),
         });
       }
 
       function handleEdit(record: EditRecordRow) {
         currentEditKeyRef.value = record.id;  // record.key
-        console.log(record)
-
-        // console.log(record.id)
-        // const data = getTableAction().getDataSource()
-        // data.map(item => {
-        //   if (item.id === record.id) {
-        //     record = item
-        //   }
-        // })
         openAdd(true, {
           // id: record.id,
           // name: record.name,
           // password: record.password,
           // detail: record.detail,
           ...record,
+          treeData: getTableAction().getDataSource(),
           isUpdate: true,
         });
       }

src/views/permission/menu/model.vue

@@ -9,10 +9,10 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { adapt } from '/@/utils/adapt'
-  import { formSchema, dataSource } from './data'
+  import { formSchema,  } from './data'
 
   interface Menu {
-    key: string|number
+    id: string|number
   }
 
   export default defineComponent({
@@ -22,7 +22,7 @@
     setup(_, { emit }) {
 
       const menu = reactive<Menu>({
-        key: ''
+        id: ''
       })
 
       const modelRef = ref({});
@@ -32,23 +32,9 @@
       const [registerForm, { getFieldsValue, updateSchema, resetFields, setFieldsValue, /* validate*/ }] = useForm({
         labelWidth: 100,
         schemas: formSchema,
-        showActionButtonGroup: false,
+        // showActionButtonGroup: false,
         actionColOptions: { span: 24 },
       });
-      // const [
-      //   registerForm,
-      //   {
-      //     getFieldsValue,
-      //     // setProps
-      //   },
-      // ] = useForm({
-      //   labelWidth: 120,
-      //   schemas,
-      //   showActionButtonGroup: false,
-      //   actionColOptions: {
-      //     span: 24,
-      //   },
-      // });
       const [register, { closeModal } ] = useModalInner((data) => {
         resetFields()
 
@@ -61,13 +47,13 @@
             ...data
           });
         }
-        menu.key = data.key
+        menu.id = data.id
         // setProps({
         //   model:{ field2: data.data, field1: data.info }
         // })
         updateSchema({
-          field: 'parentMenu',
-          componentProps: { treeData: dataSource },
+          field: 'parent',
+          componentProps: { treeData: data.treeData },
         });
       });
 
@@ -75,7 +61,7 @@
 
       function confirm() {
         const data = getFieldsValue()
-        data.key = menu.key
+        data.id = menu.id
         emit('saveData', data)
         closeModal()  // 关闭弹窗
       }

src/views/permission/role/index.vue

@@ -152,8 +152,7 @@
           menus: [],
           roleName: '',
           realName: '',
-          status: true,
-          isUpdate: true,
+          status: true
         });
       }