webman-buildadmin/web/src/views/backend/config/depositTier/index.vue

<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" type="info" :closable="false" show-icon>
            {{ t('config.depositTier.desc') }}
        </el-alert>

        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('config.depositTier.quick Search Fields') })"
        ></TableHeader>

        <Table ref="tableRef"></Table>

        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'

defineOptions({
    name: 'config/depositTier',
})

const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

function formatAmount4(_row: anyObj, _column: any, cellValue: unknown) {
    if (cellValue === null || cellValue === undefined || cellValue === '') {
        return '-'
    }
    const s = String(cellValue).trim().replace(',', '.')
    const n = parseFloat(s)
    if (!Number.isFinite(n)) {
        return String(cellValue)
    }
    return n.toFixed(2)
}

function formatPayCell(row: anyObj, _column: any, cellValue: unknown) {
    const amt = formatAmount4(row, _column, cellValue)
    const cur = row.currency && String(row.currency).trim() !== '' ? String(row.currency).toUpperCase() : ''
    if (amt === '-' || cur === '') {
        return amt
    }
    return `${amt} ${cur}`
}

function formatTotalPlatform(row: anyObj) {
    const a = parseFloat(String(row.amount ?? '0').replace(',', '.'))
    const b = parseFloat(String(row.bonus_amount ?? '0').replace(',', '.'))
    const base = Number.isFinite(a) ? a : 0
    const bonus = Number.isFinite(b) ? b : 0
    return (base + bonus).toFixed(2)
}

const baTable = new baTableClass(
    new baTableApi('/admin/config.DepositTier/'),
    {
        pk: 'id',
        filter: {
            page: 1,
            limit: 100,
        },
        defaultOrder: { prop: 'sort', order: 'asc' },
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: t('config.depositTier.sort'),
                prop: 'sort',
                align: 'center',
                width: 88,
                operator: 'RANGE',
                sortable: 'custom',
            },
            {
                label: t('config.depositTier.status'),
                prop: 'status',
                align: 'center',
                width: 100,
                operator: 'eq',
                sortable: false,
                render: 'switch',
                replaceValue: { 0: t('config.depositTier.status_off'), 1: t('config.depositTier.status_on') },
            },
            {
                label: t('config.depositTier.tier_id'),
                prop: 'id',
                align: 'center',
                minWidth: 120,
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                showOverflowTooltip: true,
            },
            {
                label: t('config.depositTier.title_col'),
                prop: 'title',
                align: 'center',
                minWidth: 140,
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                showOverflowTooltip: true,
            },
            {
                label: t('config.depositTier.title_en_col'),
                prop: 'title_en',
                align: 'center',
                minWidth: 120,
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                showOverflowTooltip: true,
            },
            {
                label: t('config.depositTier.pay_currency'),
                prop: 'currency',
                align: 'center',
                width: 100,
                operator: 'eq',
            },
            {
                label: t('config.depositTier.pay_amount'),
                prop: 'pay_amount',
                align: 'center',
                minWidth: 130,
                operator: 'RANGE',
                formatter: formatPayCell,
            },
            {
                label: t('config.depositTier.platform_base'),
                prop: 'amount',
                align: 'center',
                minWidth: 120,
                operator: 'RANGE',
                formatter: formatAmount4,
            },
            {
                label: t('config.depositTier.bonus_amount'),
                prop: 'bonus_amount',
                align: 'center',
                minWidth: 110,
                operator: 'RANGE',
                formatter: formatAmount4,
            },
            {
                label: t('config.depositTier.total_platform'),
                prop: '__total_platform',
                align: 'center',
                minWidth: 120,
                operator: false,
                formatter: (row: anyObj) => formatTotalPlatform(row),
            },
            {
                label: t('config.depositTier.desc_col'),
                prop: 'desc',
                align: 'center',
                minWidth: 160,
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                showOverflowTooltip: true,
            },
            {
                label: t('Operate'),
                align: 'center',
                width: 100,
                render: 'buttons',
                buttons: optButtons,
                operator: false,
                fixed: 'right',
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {
            id: '',
            title: '',
            title_en: '',
            currency: 'MYR',
            pay_amount: '',
            amount: '',
            bonus_amount: '0',
            desc: '',
            desc_en: '',
            sort: 10,
            status: 1,
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getData()?.then(() => {
        baTable.initSort()
    })
})
</script>

<style scoped lang="scss"></style>