refactor: 重构标准模块列表

apps/example/src/views/standard_module_example/list.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { TableColumn } from '@fantastic-admin/components'
 import apiStandardModule from '@/api/modules/standardModule'
 import eventBus from '@/utils/eventBus'
 import DetailForm from './components/DetailForm/index.vue'
@@ -7,8 +8,13 @@ defineOptions({
   name: 'PagesExampleFormModeList',
 })
 
+interface StandardModuleItem {
+  id: number
+  title: string
+}
+
 const router = useRouter()
-const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()
+const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()
 
 // 表格是否自适应高度
 const tableAutoHeight = ref(false)
@@ -23,7 +29,7 @@ const formMode = ref<'router' | 'modal' | 'drawer'>('router')
 
 // 详情
 const formModeProps = ref({
-  id: '',
+  id: '' as number | string,
 })
 
 // 搜索
@@ -41,12 +47,33 @@ function searchReset() {
 // 批量操作
 const batch = ref({
   enable: true,
-  selectionDataList: [],
+  selectionDataList: [] as StandardModuleItem[],
 })
 
 // 列表
 const loading = ref(false)
-const dataList = ref([])
+const dataList = ref<StandardModuleItem[]>([])
+
+const tableColumns = computed<TableColumn<StandardModuleItem>[]>(() => [
+  ...(batch.value.enable
+    ? [{
+      type: 'selection',
+      fixed: 'left',
+      width: 48,
+    } satisfies TableColumn<StandardModuleItem>]
+    : []),
+  {
+    accessorKey: 'title',
+    header: '标题',
+  },
+  {
+    id: 'operation',
+    header: '操作',
+    width: 120,
+    align: 'center',
+    fixed: 'right',
+  },
+])
 
 onMounted(() => {
   getDataList()
@@ -86,11 +113,6 @@ function currentChange(page = 1) {
   onCurrentChange(page).then(() => getDataList())
 }
 
-// 字段排序
-function sortChange({ prop, order }: { prop: string, order: string }) {
-  onSortChange(prop, order).then(() => getDataList())
-}
-
 const formRef = ref<InstanceType<typeof DetailForm>>()
 
 const { open: openModal, update: updateModal } = useFaModal().create({
@@ -160,7 +182,7 @@ function onCreate() {
   }
 }
 
-function onEdit(row: any) {
+function onEdit(row: StandardModuleItem) {
   if (formMode.value === 'router') {
     router.push({
       name: 'standardModuleExampleDetail',
@@ -186,7 +208,7 @@ function onEdit(row: any) {
   }
 }
 
-function onDel(row: any) {
+function onDel(row: StandardModuleItem) {
   useFaModal().confirm({
     title: '确认信息',
     content: `确认删除「${row.title}」吗？`,
@@ -198,6 +220,24 @@ function onDel(row: any) {
     },
   })
 }
+
+function onBatchDel() {
+  const rows = batch.value.selectionDataList
+  if (!rows.length) {
+    return
+  }
+
+  useFaModal().confirm({
+    title: '确认信息',
+    content: `确认删除选中的 ${rows.length} 条数据吗？`,
+    onConfirm: () => {
+      Promise.all(rows.map(row => apiStandardModule.delete(row.id))).then(() => {
+        getDataList()
+        useFaToast().success('批量删除成功')
+      })
+    },
+  })
+}
 </script>
 
 <template>
@@ -302,41 +342,61 @@ function onDel(row: any) {
           </div>
         </template>
       </FaSearchBar>
-      <div class="mx--4 my-4 border-t border-t-dashed" />
+      <div class="mx--4 my-3 border-t border-t-dashed" />
-      <div class="flex-center-between gap-2">
+      <FaTable
-        <FaButton v-if="batch.enable" variant="outline" :disabled="!batch.selectionDataList.length">
+        v-loading="loading"
-          批量操作
+        table-root-class="rounded-lg overflow-hidden"
-        </FaButton>
+        :class="{ 'min-h-0 flex-1': tableAutoHeight }"
-        <FaButton @click="onCreate">
+        row-key="id"
-          <FaIcon name="i-ri:add-line" />
+        selectable
-          新增
+        multiple
-        </FaButton>
+        stripe
-      </div>
+        column-visibility
-      <ElTable v-loading="loading" class="my-4" :data="dataList" stripe highlight-current-row border height="100%" @sort-change="sortChange" @selection-change="batch.selectionDataList = $event">
+        border
-        <ElTableColumn v-if="batch.enable" type="selection" align="center" fixed />
+        :columns="tableColumns"
-        <ElTableColumn prop="title" label="标题" />
+        :data="dataList"
-        <ElTableColumn label="操作" width="120" align="center" fixed="right">
+        @selection-change="batch.selectionDataList = $event"
-          <template #default="scope">
+      >
-            <div class="flex-center gap-2">
+        <template #toolbar>
-              <FaButton variant="outline" size="icon-sm" @click="onEdit(scope.row)">
+          <div class="flex flex-1 gap-2 items-center">
-                <FaIcon name="i-ri:edit-line" />
+            <FaButton @click="onCreate">
+              新增
+            </FaButton>
+            <FaDropdown
+              v-if="batch.enable"
+              :items="[
+                [
+                  { label: '批量删除', variant: 'destructive', disabled: !batch.selectionDataList.length, handle: onBatchDel },
+                ],
+              ]"
+            >
+              <FaButton variant="outline" :disabled="!batch.selectionDataList.length">
+                批量操作
+                <FaIcon name="i-ep:arrow-down" />
               </FaButton>
-              <FaDropdown
+            </FaDropdown>
-                :items="[
+          </div>
-                  [
+        </template>
-                    { label: '删除', variant: 'destructive', handle: () => onDel(scope.row) },
+        <template #cell-operation="{ row }">
-                  ],
+          <div class="flex-center gap-2">
-                ]"
+            <FaButton variant="outline" size="icon-sm" @click="onEdit(row.original)">
-              >
+              <FaIcon name="i-ri:edit-line" />
-                <FaButton variant="outline" size="icon-sm">
+            </FaButton>
-                  <FaIcon name="i-ri:more-line" />
+            <FaDropdown
-                </FaButton>
+              :items="[
-              </FaDropdown>
+                [
-            </div>
+                  { label: '删除', variant: 'destructive', handle: () => onDel(row.original) },
-          </template>
+                ],
-        </ElTableColumn>
+              ]"
-      </ElTable>
+            >
-      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" @page-change="currentChange" @size-change="sizeChange" />
+              <FaButton variant="outline" size="icon-sm">
+                <FaIcon name="i-ri:more-line" />
+              </FaButton>
+            </FaDropdown>
+          </div>
+        </template>
+      </FaTable>
+      <FaPagination :page="pagination.page" :size="pagination.size" :total="pagination.total" class="mt-2" @page-change="currentChange" @size-change="sizeChange" />
     </FaPageMain>
   </div>
 </template>