feat(projects): page manage_menu

src/views/manage/menu/index.vue

@@ -1,7 +1,258 @@
-<script setup lang="ts"></script>
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetMenuList } from '@/service/api';
+import { useAppStore } from '@/store/modules/app';
+import { useTable } from '@/hooks/common/table';
+import { $t } from '@/locales';
+import { yesOrNoRecord } from '@/constants/common';
+import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';
+
+const appStore = useAppStore();
+const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
+
+const { columns, filteredColumns, data, loading, pagination, getData } = useTable<
+  Api.SystemManage.Menu,
+  typeof fetchGetMenuList,
+  'index' | 'operate'
+>({
+  apiFn: fetchGetMenuList,
+  transformer: res => {
+    const menus = res.data || [];
+
+    return {
+      data: menus,
+      pageNum: 1,
+      pageSize: 10,
+      total: menus.length
+    };
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      render: (_, index) => {
+        return <span>{getIndex(index)}</span>;
+      },
+      align: 'center'
+    },
+    {
+      key: 'menuType',
+      title: $t('page.manage.menu.menuType'),
+      align: 'center',
+      width: 100,
+      render: row => {
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+          1: 'default',
+          2: 'primary'
+        };
+
+        const label = $t(menuTypeRecord[row.menuType]);
+
+        return <NTag type={tagMap[row.menuType]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'menuName',
+      title: $t('page.manage.menu.menuName'),
+      render: row => {
+        const { i18nKey, menuName } = row;
+
+        const label = i18nKey ? $t(i18nKey) : menuName;
+
+        return <span>{label}</span>;
+      }
+    },
+    {
+      key: 'icon',
+      title: $t('page.manage.menu.icon'),
+      align: 'center',
+      width: 60,
+      render: row => {
+        const icon = row.iconType === '1' ? row.icon : undefined;
+
+        const localIcon = row.iconType === '2' ? row.icon : undefined;
+
+        return (
+          <div class="flex-center">
+            <SvgIcon icon={icon} localIcon={localIcon} class="text-icon" />
+          </div>
+        );
+      }
+    },
+    {
+      key: 'routeName',
+      title: $t('page.manage.menu.routeName')
+    },
+    {
+      key: 'routePath',
+      title: $t('page.manage.menu.routePath')
+    },
+    {
+      key: 'status',
+      title: $t('page.manage.menu.menuStatus'),
+      align: 'center',
+      width: 100,
+      render: row => {
+        if (row.status === null) {
+          return null;
+        }
+
+        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
+          1: 'success',
+          2: 'warning'
+        };
+
+        const label = $t(enableStatusRecord[row.status]);
+
+        return <NTag type={tagMap[row.status]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'hideInMenu',
+      title: $t('page.manage.menu.hideInMenu'),
+      align: 'center',
+      width: 100,
+      render: row => {
+        const hide: CommonType.YesOrNo = row.hideInMenu ? 'Y' : 'N';
+
+        const tagMap: Record<CommonType.YesOrNo, NaiveUI.ThemeColor> = {
+          Y: 'error',
+          N: 'default'
+        };
+
+        const label = $t(yesOrNoRecord[hide]);
+
+        return <NTag type={tagMap[hide]}>{label}</NTag>;
+      }
+    },
+    {
+      key: 'order',
+      title: $t('page.manage.menu.order'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 230,
+      render: row => (
+        <div class="flex-center justify-end gap-8px">
+          {row.menuType === '1' && (
+            <NButton type="primary" ghost size="small" onClick={() => handleAddChildMenu(row.id)}>
+              {$t('page.manage.menu.addChildMenu')}
+            </NButton>
+          )}
+          <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
+            {$t('common.edit')}
+          </NButton>
+          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
+            {{
+              default: () => $t('common.confirmDelete'),
+              trigger: () => (
+                <NButton type="error" ghost size="small">
+                  {$t('common.delete')}
+                </NButton>
+              )
+            }}
+          </NPopconfirm>
+        </div>
+      )
+    }
+  ]
+});
+
+const operateType = ref<OperateType>('add');
+
+function handleAdd() {
+  operateType.value = 'add';
+  openDrawer();
+}
+
+const checkedRowKeys = ref<string[]>([]);
+
+async function handleBatchDelete() {
+  // request
+  console.log(checkedRowKeys.value);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  checkedRowKeys.value = [];
+
+  getData();
+}
+
+function handleAddChildMenu(id: number) {
+  console.log('id: ', id);
+  operateType.value = 'add';
+  openDrawer();
+}
+
+/** the editing row data */
+const editingData = ref<Api.SystemManage.Menu | null>(null);
+
+function handleEdit(id: number) {
+  operateType.value = 'edit';
+  editingData.value = data.value.find(item => item.id === id) || null;
+  openDrawer();
+}
+
+async function handleDelete(id: number) {
+  // request
+  console.log(id);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  getData();
+}
+
+function getIndex(index: number) {
+  const { page = 0, pageSize = 10 } = pagination;
+
+  return String((page - 1) * pageSize + index + 1);
+}
+</script>
 
 <template>
-  <div>manage_menu</div>
+  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+    <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="filteredColumns"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="640"
+        :loading="loading"
+        :pagination="pagination"
+        :row-key="item => item.id"
+        class="sm:h-full"
+      />
+      <MenuOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+    </NCard>
+  </div>
 </template>
 
 <style scoped></style>