feat(projects): use @sa/alova & add demo.vue

src/views/manage/user/demo.vue

@@ -0,0 +1,211 @@
+<!-- <script setup lang="tsx">
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { usePagination } from 'alova/client';
+import { reactive } from 'vue';
+import { fetchGetUserList } from '@/service/api';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { enableStatusRecord, userGenderRecord } from '@/constants/business';
+import {  useTableOperate } from '@/hooks/common/table';
+import UserOperateDrawer from './modules/user-operate-drawer.vue';
+import UserSearch from './modules/user-search.vue';
+
+const appStore = useAppStore();
+
+const searchParams = reactive<Api.SystemManage.UserSearchParams>({
+  status: null,
+  userName: null,
+  userGender: null,
+  nickName: null,
+  userPhone: null,
+  userEmail: null
+});
+
+const { loading, data, page, pageSize, pageCount, total, refresh, reload } = usePagination(
+  (page, pageSize) => fetchGetUserList({ current: page, size: pageSize }),
+  {
+    initialData: {
+      total: 0,
+      data: []
+    },
+    initialPage: 1,
+    initialPageSize: 10,
+    watchingStates: [searchParams],
+    data: res => res.data,
+    total: res => res.total
+  }
+);
+
+const columns = [
+  {
+    type: 'selection',
+    align: 'center',
+    width: 48
+  },
+  {
+    key: 'index',
+    title: $t('common.index'),
+    align: 'center',
+    width: 64
+  },
+  {
+    key: 'userName',
+    title: $t('page.manage.user.userName'),
+    align: 'center',
+    minWidth: 100
+  },
+  {
+    key: 'userGender',
+    title: $t('page.manage.user.userGender'),
+    align: 'center',
+    width: 100,
+    render: row => {
+      if (row.userGender === null) {
+        return null;
+      }
+
+      const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
+        1: 'primary',
+        2: 'error'
+      };
+
+      const label = $t(userGenderRecord[row.userGender]);
+
+      return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
+    }
+  },
+  {
+    key: 'nickName',
+    title: $t('page.manage.user.nickName'),
+    align: 'center',
+    minWidth: 100
+  },
+  {
+    key: 'userPhone',
+    title: $t('page.manage.user.userPhone'),
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'userEmail',
+    title: $t('page.manage.user.userEmail'),
+    align: 'center',
+    minWidth: 200
+  },
+  {
+    key: 'status',
+    title: $t('page.manage.user.userStatus'),
+    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: 'operate',
+    title: $t('common.operate'),
+    align: 'center',
+    width: 130,
+    render: row => (
+      <div class="flex-center gap-8px">
+        <NButton type="primary" ghost size="small" onClick={() => edit(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 getData = async () => {
+  reload();
+};
+
+const {
+  drawerVisible,
+  operateType,
+  editingData,
+  handleAdd,
+  handleEdit,
+  checkedRowKeys,
+  onBatchDeleted,
+  onDeleted
+  // closeDrawer
+} = useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  console.log(checkedRowKeys.value);
+
+  onBatchDeleted();
+}
+
+function handleDelete(id: number) {
+  // request
+  console.log(id);
+
+  onDeleted();
+}
+
+function edit(id: number) {
+  handleEdit(id);
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="refresh" />
+    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="refresh"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.id"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <UserOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="refresh"
+      />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style> -->