noob-components/packages/base/data/list-table.vue

<template>
    <div class="my-table">
        <el-table ref="table" :size="state.size.size" :data="page ? data.data : data"
            @selection-change="selectionChange" :border="border"
            :height="height || (page ? state.size.pTableHeight : state.size.tableHeight)" highlight-current-row
            :row-key="rowKey" :tree-porps="treeProps" :lazy="lazy" :load="load">

            <el-table-column v-for="item in props" :key="item.code" :prop="item.code" :label="item.name || t(item.i18n)"
                :type="item.type" :min-width="item.width" :width="item.type ? item.width : ''" :fixed="item.fixed"
                :align="item.align ? item.align : 'center'" show-overflow-tooltip
                :formatter="(row: any, column: any, value: any) => formatter(row, column, value, item)">

                <template v-if="item.slot" #default="scope">
                    <slot :name="item.code" :row="scope.row"></slot>
                </template>

                <template v-if="item.dict" #default="{ row }">
                    {{ formatterByDist(item.dict, row[item.code]) }}
                </template>

            </el-table-column>

        </el-table>
    </div>
    <div v-if="page" class="my-pagination">
        <el-pagination :small="state.size.size == 'small'" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="example.page" :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="example.size" layout="total, sizes, prev, pager, next, jumper" :total="data.total">
        </el-pagination>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref, watch, onUpdated } from "vue";
import { useI18n } from "vue3-i18n";
// import { PageExample } from "noob-mengyxu";
const { t } = useI18n();
const { state } = useStore();
const table = ref();

const prop = defineProps({
    data: {
        type: Object,
        default: null
    },
    props: {
        type: Array<any>(),
        default: [],
    },
    page: {
        type: Boolean,
        default: false,
    },
    height: {
        type: Number,
        default: null,
    },
    example: {
        type: Object,
        default: {},
    },
    rowKey: {
        type: String,
        default: null,
    },
    selectKey: {
        type: String,
        default: null,
    },
    treeProps: {
        type: Object,
        default: null,
    },
    lazy: {
        type: Boolean,
        default: false,
    },
    border: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(["query", "selection-change"]);

const selectionChange = selection => {
    emit("selection-change", selection);
};

const handleSizeChange = (val) => {
    prop.example.size = val;
    emit("query");
};

const handleCurrentChange = (val) => {
    prop.example.page = val;
    emit("query");
};

const getValue = (
    row: any,
    column: string,
    value: any,
    index?: number
) => {
    if ((typeof value === 'undefined' || value === null || value === '') && value !== 0) {
        return '--';
    }
    return value;
};

const formatStamp = (value: any) => {
    const date = new Date(value * 1000);
    const month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
    const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
    const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return date.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
};
const formatFileSize = (value: any) => {
    const k = value / 1024;
    if (k < 1) {
        return value + "B";
    }
    const m = k / 1024;
    if (m < 1) {
        return k.toFixed(2) + "K";
    }
    const g = m / 1024;
    if (g < 1) {
        return m.toFixed(2) + "M";
    }
    return g.toFixed(2) + "G";
};

const formatter = (row: any, column: any, value: any, item: any) => {
    if (item.dict)
        return formatterByDist(item.dict, value);
    if (item.timestamp)
        return formatStamp(value);
    if (item.filesize)
        return formatFileSize(value);
    if (row.scheme)
        return formatterByDist(row.scheme + '_' + column.property, value);
    return getValue(null, '', value);
};

const formatterByDist = (dictKey, value) => {
    if (!dictKey) {
        return getValue(null, '', value);
    }
    const mapping = state.dict[dictKey];
    if (mapping == null) {
        return getValue(null, '', value);
    }
    return mapping[value] == null ? value : mapping[value];
};

const select = (n) => {
    if (n.selectKey && table.value) {
        n.data.forEach(e => {
            table.value.toggleRowSelection(e, e[n.selectKey]);
        })
    }
}

const load = (dict, node, resolve) => {
    resolve(dict.child);
}

watch(prop, select);

onMounted(() => { });
onUpdated(() => {
    select(prop)
})
</script>
<style lang="scss" scoped>
.my-table * {
    --el-table-bg-color: v-bind('state.style.tableBg') !important;
    --el-table-tr-bg-color: v-bind('state.style.tableBg') !important;
    --el-table-expanded-cell-bg-color: v-bind('state.style.tableBg') !important;

    --el-table-border-color: v-bind('state.style.tableBorderColor');
    --el-table-border: 1px solid var(--el-table-border-color);
    --el-table-text-color: v-bind('state.style.tableColor');
    --el-table-header-text-color: v-bind('state.style.tableColor');
    --el-table-row-hover-bg-color: v-bind('state.style.tableCurBg');
    --el-table-current-row-bg-color: v-bind('state.style.tableCurBg');
    --el-table-header-bg-color: v-bind('state.style.tableHeadBg');
    --el-bg-color: v-bind('state.style.tableBg') !important;
}

::v-deep .el-table__row--level-1,
::v-deep .el-table__row--level-3 {
    background: v-bind('state.style.tableChildBg') !important;
}

::v-deep .el-table .el-table__cell {
    padding: v-bind('state.size.tablePad') 0px;
}

.my-pagination * {
    --el-pagination-bg-color: v-bind('state.style.bodyBg') !important;
    --el-pagination-disabled-bg-color: v-bind('state.style.bodyBg') !important;
    --el-pagination-text-color: v-bind('state.style.color') !important;
    --el-pagination-button-color: v-bind('state.style.color') !important;
    --el-pagination-button-disabled-bg-color: v-bind('state.style.bodyBg') !important;
}
</style>