init: UserBaseFront (frontend)

2026-08-10 14:41:13 +08:00
commit eea881b616
174 changed files with 32833 additions and 0 deletions
@@ -0,0 +1,105 @@
+<template>
+    <Table :columns="columns" :data="list" :height="tableH" :loading="loading" no-data-text="暂无数据"
+        class="link-table table-bottom-box" @on-selection-change="selectChange">
+        <template #loading>
+            <div class="table-spin-load">加载中</div>
+        </template>
+        <template v-for="slotName in tableSlotNames" :key="slotName" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps" />
+        </template>
+    </Table>
+
+    <div class="page-panel">
+        <div class="fl ml-15 align-middle">
+            <slot :checkList="selectList" />
+        </div>
+
+        <Page class="page-box fr" :total="total" :model-value="page" :page-size="pageSize"
+            :page-size-opts="[10, 20, 30, 40]" show-total show-sizer placement="top" @on-change="onPageChange"
+            @on-page-size-change="onSizeChange" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue'
+import Utils from '@/utils'
+import { OperatorEnum } from '@/types'
+
+interface Props {
+    dataApi: any
+    columns: any[]
+    tableHeight?: number
+    autoLoad?: boolean
+    dataFilter?: (resp: any) => any[]
+    formatResponse?: (res: any) => { total: number; list: any[] }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    autoLoad: true,
+    formatResponse: (res: any) => ({ total: res.total, list: res.content })
+})
+
+const emit = defineEmits<{
+    (e: 'selection-change', list: number[]): void
+}>()
+const slots = useSlots()
+
+const tableH = ref(props.tableHeight ?? Utils.useTableHeight())
+const tableSlotNames = computed(() => Object.keys(slots).filter(name => !['default', 'loading'].includes(name)))
+
+const selectList = ref<number[]>([])
+function selectChange(rows: any[]) {
+    selectList.value = rows.map((r: any) => r.id)
+    emit('selection-change', selectList.value)
+}
+
+const {
+    loading,
+    data: resp,
+    send: sendLoad,
+    page,
+    pageSize,
+    total,
+    reload
+} = usePagination(
+    (current: number, size: number) =>
+        props.dataApi({ pageIndex: current, pageSize: size }),
+    {
+        total: res => props.formatResponse(res).total,
+        data: res => props.formatResponse(res).list,
+        initialPage: 1,
+        initialPageSize: 10,
+        immediate: props.autoLoad,
+    }
+)
+
+const list = computed(() => {
+    if (!resp.value) return []
+    return props.dataFilter ? props.dataFilter(resp.value) : resp.value
+})
+
+const onPageChange = (p: number) => (page.value = p)
+const onSizeChange = (s: number) => (pageSize.value = s)
+
+function refreshData() {
+    page.value = 1
+    reload()
+}
+
+function reloadData(type: OperatorEnum = OperatorEnum.sel) {
+    let p = page.value
+    const s = pageSize.value
+
+    if (type === OperatorEnum.add && p * s === total.value) p += 1
+    if (type === OperatorEnum.del && (p - 1) * s + 1 === total.value) p -= 1
+    if (type === OperatorEnum.sel) p = 1
+    if (p < 1) p = 1
+
+    page.value = p
+    sendLoad()
+}
+
+defineExpose({ list, refreshData, reloadData })
+</script>
+
+<style scoped></style>