gypsy-crm-frontend-vu/components/cwg-tabel.vue

<template>
    <view class="table-container">
        <!-- 表格 -->
        <uni-table :type="selectionType" :border="false" @selection-change="handleSelectionChange">
            <uni-tr class="tabel-header">
                <uni-th v-for="column in columns" :key="column.prop" :align="column.align || 'center'"
                    :width="column.width || '50'">
                    {{ column.label }}
                </uni-th>
                <uni-th v-if="showOperation" align="center" width="200">操作</uni-th>
            </uni-tr>

            <uni-tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
                <uni-td v-for="column in columns" :key="column.prop" :align="column.align || 'center'">
                    <!-- 自定义渲染插槽 -->
                    <slot v-if="column.slot" :name="column.slot" :row="row" :column="column" :index="rowIndex">
                        {{ row[column.prop] }}
                    </slot>

                    <!-- 标签类型渲染 -->
                    <uni-tag v-else-if="column.type === 'tag'" :text="formatTagText(row[column.prop], column)"
                        :type="formatTagType(row[column.prop], column)" size="small" />

                    <!-- 文件类型渲染 -->
                    <view v-else-if="column.type === 'file'">
                        <cwg-file :path="row[column.prop]" />
                    </view>

                    <!-- 默认文本渲染 -->
                    <template v-else>{{ formatCellValue(row[column.prop], column, row) }}</template>
                </uni-td>

                <!-- 操作按钮 -->
                <uni-td v-if="showOperation" align="center">
                    <view class="operation-btns">
                        <template v-for="(action, index) in operationActions" :key="index">
                            <button v-if="showAction(action, row)" class="btn" size="mini"
                                :type="action.type || 'default'" @click="handleAction(action, row)">
                                <cwg-icon :name="action.icon" :size="16" color="#fff" v-if="action.icon" />
                                {{ action.text }}
                            </button>
                        </template>
                    </view>
                </uni-td>
            </uni-tr>

            <!-- 空数据提示 -->
            <uni-tr v-if="tableData.length === 0">
                <uni-td :colspan="columnSpan" align="center">
                    <view class="empty-data">
                        <uni-icons type="info" size="30" color="#999"></uni-icons>
                        <text class="empty-text">暂无数据</text>
                    </view>
                </uni-td>
            </uni-tr>
        </uni-table>

        <!-- 分页组件 -->
        <view class="pagination-container" v-if="showPagination">
            <view class="pagination-info">
                <text>共 {{ pagination.total }} 条记录</text>
                <view v-if="showPageSize" class="page-size-select">
                    <text>每页显示</text>
                    <picker @change="handlePageSizeChange" :value="pageSizeIndex" :range="pageSizes">
                        <view class="page-size-value">{{ pagination.pageSize }}条/页</view>
                    </picker>
                </view>
            </view>
            <view class="pagination">
                <view class="page-item prev" :class="{ disabled: pagination.current === 1 }"
                    @click="handlePageChange('prev')">
                    <uni-icons type="arrowleft" size="16" color="#666"></uni-icons>
                    <text>上一页</text>
                </view>

                <view class="page-numbers">
                    <view v-for="page in visiblePages" :key="page" class="page-number"
                        :class="{ active: pagination.current === page }" @click="handlePageChange(page)">
                        {{ page }}
                    </view>
                </view>

                <view class="page-item next" :class="{ disabled: pagination.current === pagination.pages }"
                    @click="handlePageChange('next')">
                    <text>下一页</text>
                    <uni-icons type="arrowright" size="16" color="#666"></uni-icons>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps({
    // 表格列配置
    columns: {
        type: Array,
        required: true,
        default: () => []
    },
    // API 请求函数
    api: {
        type: Function,
        required: true
    },
    // 查询参数
    queryParams: {
        type: Object,
        default: () => ({})
    },
    // 是否立即加载
    immediate: {
        type: Boolean,
        default: true
    },
    // 选择类型：'selection' | null
    selectionType: {
        type: String,
        default: null
    },
    // 是否显示操作列
    showOperation: {
        type: Boolean,
        default: false
    },
    // 操作按钮配置
    operationActions: {
        type: Array,
        default: () => [
            { text: '编辑', type: 'primary', action: 'edit', icon: 'crm-puls' },
            { text: '删除', type: 'warn', action: 'delete', icon: 'crm-delete' },
            { text: '查看', type: 'default', action: 'view', icon: 'view' }
        ]
    },
    // 是否显示底部操作栏
    showBottomActions: {
        type: Boolean,
        default: false
    },
    // 底部操作按钮
    bottomActions: {
        type: Array,
        default: () => []
    },
    // 是否显示每页条数选择
    showPageSize: {
        type: Boolean,
        default: true
    },
    // 是否显示分页
    showPagination: {
        type: Boolean,
        default: true
    },
    // 每页条数选项
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 50, 100]
    },
    // 默认每页条数
    defaultPageSize: {
        type: Number,
        default: 10
    }
})

const emit = defineEmits([
    'selection-change',
    'action-click',
    'bottom-action-click',
    'page-change',
    'load-success',
    'load-error'
])

// 表格数据
const tableData = ref([])
const selectedItems = ref([])

// 分页参数
const pagination = ref({
    current: 1,
    pageSize: props.defaultPageSize,
    total: 0,
    pages: 0
})

// 加载状态
const loading = ref(false)

// 计算列跨度
const columnSpan = computed(() => {
    let span = props.columns.length
    if (props.showOperation) span += 1
    return span
})

// 计算每页条数索引
const pageSizeIndex = computed(() => {
    return props.pageSizes.indexOf(pagination.value.pageSize)
})

// 计算显示的页码
const visiblePages = computed(() => {
    const maxVisible = 5
    const half = Math.floor(maxVisible / 2)
    let start = Math.max(1, pagination.value.current - half)
    let end = Math.min(pagination.value.pages, start + maxVisible - 1)

    if (end - start + 1 < maxVisible) {
        start = Math.max(1, end - maxVisible + 1)
    }

    return Array.from({ length: end - start + 1 }, (_, i) => start + i)
})

// 监听查询参数变化
watch(() => props.queryParams, () => {
    console.log(props.queryParams, 123123);

    refreshTable()
}, { deep: true })

// 加载数据
const loadData = async () => {
    if (loading.value) return

    loading.value = true
    try {
        const params = {
            page: {
                current: pagination.value.current,
                size: pagination.value.pageSize
            },
            ...props.queryParams
        }

        const res = await props.api(params)

        // 处理不同的API返回格式
        if (res.code === 200 || res.code === 0) {
            const data = res.data || res

            // 支持不同的分页数据结构
            if (Array.isArray(data)) {
                tableData.value = data
                pagination.value.total = data.length
                pagination.value.pages = 1
            } else if (data.list || data.records) {
                tableData.value = data.list || data.records
                pagination.value.total = data.total || data.list?.length || 0
                pagination.value.pages = data.pages || Math.ceil(pagination.value.total / pagination.value.pageSize)
            } else {
                tableData.value = []
            }

            emit('load-success', res)
        } else {
            throw new Error(res.message || '加载失败')
        }
    } catch (error) {
        console.error('表格数据加载失败:', error)
        uni.showToast({
            title: error.message || '加载失败',
            icon: 'none'
        })
        emit('load-error', error)
    } finally {
        loading.value = false
    }
}

// 刷新表格
const refreshTable = () => {
    pagination.value.current = 1
    loadData()
}

// 重新加载
const reload = () => {
    loadData()
}

// 分页变化
const handlePageChange = (page) => {
    if (page === 'prev') {
        if (pagination.value.current > 1) {
            pagination.value.current--
        } else {
            return
        }
    } else if (page === 'next') {
        if (pagination.value.current < pagination.value.pages) {
            pagination.value.current++
        } else {
            return
        }
    } else {
        pagination.value.current = page
    }

    loadData()
    emit('page-change', pagination.value)
}

// 每页条数变化
const handlePageSizeChange = (e) => {
    const size = props.pageSizes[e.detail.value]
    pagination.value.pageSize = size
    pagination.value.current = 1
    loadData()
}

// 选择变化
const handleSelectionChange = (e) => {
    selectedItems.value = e.detail.value
    emit('selection-change', selectedItems.value)
}

// 操作按钮点击
const handleAction = (action, row) => {
    emit('action-click', { action: action.action, row, original: action })
}

// 底部操作点击
const handleBottomAction = (action) => {
    emit('bottom-action-click', action)
}

// 判断是否显示操作按钮
const showAction = (action, row) => {
    if (action.show) {
        return action.show(row)
    }
    return true
}

// 格式化单元格值
const formatCellValue = (value, column, row) => {
    if (column.formatter) {
        return column.formatter({ value, row })
    }

    if (column.type === 'date' && value) {
        return formatDate(value, column.dateFormat || 'YYYY-MM-DD HH:mm:ss')
    }

    if (value === null || value === undefined) {
        return '-'
    }

    return value
}

// 格式化标签文本
const formatTagText = (value, column) => {
    if (column.tagMap && column.tagMap[value]) {
        return column.tagMap[value]
    }
    return value || '-'
}

// 格式化标签类型
const formatTagType = (value, column) => {
    if (column.tagTypeMap && column.tagTypeMap[value]) {
        return column.tagTypeMap[value]
    }
    return 'default'
}

// 格式化日期
const formatDate = (date, format) => {
    if (!date) return '-'
    const d = new Date(date)
    const year = d.getFullYear()
    const month = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    const hour = String(d.getHours()).padStart(2, '0')
    const minute = String(d.getMinutes()).padStart(2, '0')
    const second = String(d.getSeconds()).padStart(2, '0')

    return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hour)
        .replace('mm', minute)
        .replace('ss', second)
}

// 预览图片
const handlePreviewImage = (url) => {
    uni.previewImage({
        urls: [url]
    })
}

// 获取选中项
const getSelectedItems = () => {
    return selectedItems.value
}

// 清空选中
const clearSelection = () => {
    selectedItems.value = []
}

// 暴露方法给父组件
defineExpose({
    refreshTable,
    reload,
    getSelectedItems,
    clearSelection,
    loadData,
    tableData,
    pagination
})

// 初始化加载
onMounted(() => {
    if (props.immediate) {
        loadData()
    }
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.table-container {
    max-height: calc(100vh - 209px);
    overflow: hidden;
    color: var(--color-slate-800);

    :deep(.uni-table-scroll) {
        width: 100%;
        max-height: calc(100vh - 375px);
        overflow: auto;
    }

    :depp(.table--border) {
        border: none !important;
    }

    :deep(.uni-table) {

        /* 固定表头样式 */
        .uni-table-th {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: var(--color-slate-200) !important;
            padding: px2rpx(12);
            color: var(--color-slate-800);
            font-weight: 600;

            &::after {
                display: none;
            }
        }


        .tr-table--border,
        .table--border {
            border: none !important;
        }

        .uni-table-tr {
            border-bottom: 5px solid var(--color-slate-200) !important;
        }

        .uni-table-th,
        .uni-table-td {
            padding: px2rpx(12) px2rpx(20);
            color: var(--color-slate-800);
        }
    }

}

.table-image {
    width: px2rpx(30);
    height: px2rpx(30);
    border-radius: px2rpx(8);
}

.operation-btns {
    display: flex;
    gap: px2rpx(10);
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    margin: 0 px2rpx(4);
    font-size: px2rpx(16);
    padding: 0 px2rpx(20);
    height: px2rpx(36);
    border-radius: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.empty-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: px2rpx(60) 0;
}

.empty-text {
    margin-top: px2rpx(20);
    font-size: px2rpx(16);
    color: #999;
}

.bottom-actions {
    margin: px2rpx(30) px2rpx(20);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-actions,
.right-actions {
    display: flex;
    gap: px2rpx(20);
}

/* 分页样式 */
.pagination-container {
    margin: px2rpx(20) px2rpx(20);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: px2rpx(20);

    .pagination {
        display: flex;
        align-items: center;
        padding: px2rpx(10);
    }

    .page-item {
        display: flex;
        align-items: center;
        padding: 0 px2rpx(12);
        height: px2rpx(30);
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(8);
        font-size: px2rpx(16);
        color: #606266;
        cursor: pointer;
        transition: all 0.3s;
        margin: 0 px2rpx(6);
    }

    .page-item.prev {
        margin-right: px2rpx(10);
    }

    .page-item.next {
        margin-left: px2rpx(10);
    }

    .page-item:not(.disabled):hover {
        color: #007aff;
        border-color: #007aff;
    }

    .page-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    .page-numbers {
        display: flex;
        gap: px2rpx(8);
    }

    .page-number {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: px2rpx(40);
        height: px2rpx(30);
        padding: 0 px2rpx(4);
        background-color: #fff;
        border-radius: px2rpx(8);
        font-size: px2rpx(16);
        color: #606266;
        cursor: pointer;
        transition: all 0.3s;
    }

    .page-number:hover {
        color: #007aff;
        border-color: #007aff;
    }

    .page-number.active {
        background-color: #007aff;
        border-color: #007aff;
        color: #fff;
    }

    .pagination-info {
        display: flex;
        align-items: center;
        gap: px2rpx(30);
        font-size: px2rpx(16);
        color: #909399;
    }

    .page-size-select {
        display: flex;
        align-items: center;
        gap: px2rpx(10);
    }

    .page-size-value {
        padding: px2rpx(6) px2rpx(20);
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(8);
        color: #606266;
    }
}








@media screen and (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-item {
        padding: 0 px2rpx(16);
    }

    .page-number {
        min-width: px2rpx(60);
    }

    .pagination-info {
        flex-direction: column;
        gap: px2rpx(10);
    }
}
</style>