修改了菜单管理页面

src/api/system/menu/menu.ts

+import {
+  AccountParams,
+  DeptListItem,
+  MenuParams,
+  RoleParams,
+  RolePageParams,
+  MenuListGetResultModel,
+  DeptListGetResultModel,
+  AccountListGetResultModel,
+  RolePageListGetResultModel,
+  RoleListGetResultModel,
+} from '../../demo/model/systemModel';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  deleteById = '/system/menu/deleteLogical/',
+  setMenuStatus = '/system/menu/statusChange/',
+  menuPageList = '/system/menu/list',
+  menuDetail = '/system/menu/detail/',
+  addMenu =  '/system/menu/add',
+  updataMenu = '/system/menu/update/',
+  menuList = '/system/menu/list'
+}
+
+
+/** 删除菜单*/
+export const deleteById = (params?: any) =>
+  defHttp.delete<any>({ url: Api.deleteById+params });
+
+/** 获取菜单详情信息*/
+export const menuDetailApi = (params: any) =>
+  defHttp.get<any>({ url: Api.menuDetail + params });
+
+/** 获取菜单列表信息*/
+export const getMenuListByPage = (params?: any) =>
+  defHttp.get<any>({ url: Api.menuPageList, params });
+
+/** 修改菜单状态*/
+export const setMenuStatus = (params: any) =>
+  defHttp.put({ url: Api.setMenuStatus+params.businessId,params });
+
+/** 新增菜单*/
+export const addMenuApi = (params: any) =>
+  defHttp.post({ url: Api.addMenu, params: params });
+
+/** 修改菜单*/
+export const menuUpdataApi = (params: any) =>
+  defHttp.put<any>({
+    url: Api.updataMenu+params.businessId,
+    params: params,
+  });
+
+/** 获取菜单列表信息*/
+export const getMenuList = (params?: any) =>
+  defHttp.get<any>({ url: Api.menuList, params });

src/api/system/role/role.ts

@@ -37,7 +37,7 @@ export const roleDetailApi = (params: any) =>
 
 /** 获取角色列表信息*/
 export const getRoleListByPage = (params?: any) =>
-  defHttp.get<RolePageListGetResultModel>({ url: Api.RolePageList, params });
+  defHttp.get<any>({ url: Api.RolePageList, params });
 
 /** 修改角色状态*/
 export const setRoleStatus = (params: any) =>

src/views/system/menu/MenuDrawer.vue

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="50%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './menu.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { menuDetailApi,menuUpdataApi,getMenuList,addMenuApi } from "@/api/system/menu/menu";
+  import {useMessage} from "@/hooks/web/useMessage";
+
+
+  defineOptions({ name: 'MenuDrawer' });
+  const emit = defineEmits(['success', 'register']);
+  const menuId = ref('');
+  const isUpdate = ref(true);
+  const { createMessage } = useMessage();
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 12, md: 24 },
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的菜单id
+      menuId.value = data.record.businessId;
+      // 通过id获取菜单详情信息
+      menuDetailApi(menuId.value).then(res => {
+        const form = res.data
+        // 塞值
+        setFieldsValue({
+          ...form,
+        });
+      })
+    }
+    const menuData = await getMenuList();
+    updateSchema({
+      field: 'parentMenu',
+      componentProps: {menuData},
+    });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
+  async function handleSubmit() {
+    try {
+      const formData = await validate();
+      setDrawerProps({ confirmLoading: true });
+      // 编辑
+      if(unref(isUpdate)) {
+        formData.businessId = menuId.value
+        menuUpdataApi(formData).then(res => {
+          if(res.code === 200){
+            createMessage.success('编辑成功');
+            closeDrawer();
+            emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: menuId.value } });
+          }
+        })
+      } else {
+        //新增
+        const paramsAdd = {
+          menuName: formData.menuName,
+          parentId: formData.parentId,
+          menuType: formData.menuType,
+          jumpType: formData.jumpType,
+          orderNum: formData.orderNum,
+          isFrame: formData.isFrame,
+          icon: formData.icon,
+          visible: formData.visible,
+          isProcess: formData.isProcess,
+          flag: formData.flag,
+          path: formData.path,
+          perms: formData.perms,
+          component: formData.component,
+        }
+        addMenuApi(paramsAdd).then(res => {
+          if(res.code === 200){
+            createMessage.success('新增成功');
+            closeDrawer();
+            emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: menuId.value } });
+          }
+        })
+      }
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/system/menu/index.vue

 <template>
-<div>
-  菜单管理
-</div>
+  <div>
+    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                // icon: 'clarity:note-edit-line',
+                label:'修改',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                // icon: 'ant-design:delete-outlined',
+                label:'删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
 </template>
-
 <script lang="ts" setup>
+  import { nextTick } from 'vue';
 
-</script>
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  // import { getMenuList } from '@/api/demo/system';
+  import { getMenuListByPage } from '@/api/system/menu/menu';
+  import { useDrawer } from '@/components/Drawer';
+  import MenuDrawer from './MenuDrawer.vue';
+  import { getMenuList } from '@/api/demo/system';
+  import { columns, searchFormSchema } from './menu.data';
+  import { deleteById } from "@/api/system/menu/menu";
+  import { useMessage } from "@/hooks/web/useMessage";
+
+  defineOptions({ name: 'MenuManagement' });
+  const { createMessage } = useMessage();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, expandAll }] = useTable({
+    title: '菜单列表',
+    api: getMenuListByPage,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    isTreeTable: true,
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
 
-<style scoped>
+  function handleEdit(record: Recordable) {
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
 
-</style>
+  async function handleDelete(record: Recordable) {
+    await deleteById(record.businessId);
+    createMessage.success('删除成功!');
+    await reload();
+  }
+
+  function handleSuccess() {
+    reload();
+  }
+
+  function onFetchSuccess() {
+    // 演示默认展开所有表项
+    nextTick(expandAll);
+  }
+</script>

src/views/system/menu/menu.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import {Switch, Tag} from 'ant-design-vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useMessage} from "@/hooks/web/useMessage";
+import {setMenuStatus} from "@/api/system/menu/menu";
+
+export const columns: BasicColumn[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'menuName',
+    width: 200,
+    align: 'left',
+  },
+  {
+    title: '图标',
+    dataIndex: 'icon',
+    width: 50,
+    customRender: ({ record }) => {
+      return h(Icon, { icon: record.icon });
+    },
+  },
+  {
+    title: '排序',
+    dataIndex: 'orderNum',
+    width: 50,
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'perms',
+    width: 180,
+  },
+  {
+    title: '组件路径',
+    dataIndex: 'path',
+    width: 200,
+  },
+  {
+    title: '状态',
+    dataIndex: 'flag',
+    width: 120,
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.flag === '1',
+        loading: record.pendingStatus,
+        onChange(checked: CheckedType) {
+          record.pendingStatus = true;
+          const newStatus = checked ? '1' : '0';
+          const { createMessage } = useMessage();
+          const params = {
+            businessId: record.businessId,
+            flag: newStatus,
+            menuName: record.menuName,
+            parentId: record.parentId,
+            menuType: record.menuType,
+            jumpType: record.jumpType,
+            orderNum: record.orderNum,
+            isFrame: record.isFrame,
+            icon: record.icon,
+            visible: record.visible,
+            isProcess: record.isProcess,
+            path: record.path,
+            perms: record.perms,
+            component: record.component,
+          }
+          setMenuStatus(params)
+            .then(() => {
+              record.flag = newStatus;
+              const text = record.flag === '1' ? '启用' : '停用'
+              createMessage.success( text + `成功`);
+            })
+            .catch(() => {
+              // createMessage.error('操作失败');
+            })
+            .finally(() => {
+              record.pendingStatus = false;
+            });
+        },
+      });
+    },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 180,
+  },
+];
+
+const isDir = (menuType: string) => menuType === 'M';
+const isMenu = (menuType: string) => menuType === 'C';
+const isButton = (menuType: string) => menuType === 'F';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'menuName',
+    label: '菜单名称',
+    component: 'Input',
+    colProps: { span: 7 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'menuType',
+    label: '菜单类型',
+    component: 'RadioButtonGroup',
+    defaultValue: 'M',
+    componentProps: {
+      options: [
+        { label: '目录', value: 'M' },
+        { label: '菜单', value: 'C' },
+        { label: '按钮', value: 'F' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'jumpType',
+    label: '跳转类型',
+    component: 'RadioButtonGroup',
+    defaultValue: 'R',
+    componentProps: {
+      options: [
+        { label: '正常路由跳转', value: 'R' },
+        { label: '新页面无菜单', value: 'Y' },
+        { label: '新页面有菜单', value: 'G' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+    ifShow: ({ values }) => isMenu(values.menuType),
+  },
+  {
+    field: 'menuName',
+    label: '菜单名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'parentMenu',
+    label: '上级菜单',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        label: 'menuName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    // required: true,
+  },
+  {
+    field: 'orderNum',
+    label: '菜单排序',
+    component: 'InputNumber',
+    required: true,
+  },
+  {
+    field: 'icon',
+    label: '菜单图标',
+    component: 'IconPicker',
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'component',
+    label: '组件路径',
+    component: 'Input',
+    ifShow: ({ values }) => isMenu(values.menuType),
+  },
+  {
+    field: 'perms',
+    label: '权限标识',
+    component: 'Input',
+    ifShow: ({ values }) => !isDir(values.menuType),
+  },
+  {
+    field: 'flag',
+    label: '菜单状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '启用', value: '1' },
+        { label: '停用', value: '0' },
+      ],
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'visible',
+    label: '显示状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '显示', value: '1' },
+        { label: '隐藏', value: '0' },
+      ],
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'isFrame',
+    label: '是否外链',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '是', value: '1' },
+        { label: '否', value: '0' },
+      ],
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'isCache',
+    label: '是工作流',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '是', value: '1' },
+        { label: '否', value: '0' },
+      ],
+    },
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+  {
+    field: 'path',
+    label: '路由地址',
+    component: 'Input',
+    required: true,
+    ifShow: ({ values }) => !isButton(values.menuType),
+  },
+];

src/views/system/role/index.vue

@@ -89,7 +89,6 @@
 
   /**编辑按钮*/
   function handleEdit(record: Recordable) {
-    console.log('编辑----', record)
     openDrawer(true, {
       record,
       isUpdate: true,
@@ -99,17 +98,10 @@
   /**数据权限按钮*/
   function dataPermiss(record: Recordable) {
     console.log('数据权限----', record)
-    openModal(true, {
-      record,
-      isDialog: true,
-    });
   }
 
   /**删除按钮*/
   async function handleDelete(record: Recordable) {
-    // deleteById(record.businessId);
-    // createMessage.success('删除成功!');
-    // reload();
     await deleteById(record.businessId);
     createMessage.success('删除成功!');
     await reload();