150 lines
4.5 KiB
Vue
150 lines
4.5 KiB
Vue
<template>
|
||
<div class="art-full-height">
|
||
<!-- 搜索面板 -->
|
||
<TableSearch v-model="searchForm" @search="handleSearch" @reset="resetSearchParams" />
|
||
|
||
<ElCard class="art-table-card" shadow="never">
|
||
<!-- 表格头部 -->
|
||
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
|
||
<template #left>
|
||
<ElSpace wrap>
|
||
<ElButton
|
||
v-permission="'dice:lottery_config:index:save'"
|
||
@click="showDialog('add')"
|
||
v-ripple
|
||
>
|
||
<template #icon>
|
||
<ArtSvgIcon icon="ri:add-fill" />
|
||
</template>
|
||
新增
|
||
</ElButton>
|
||
<ElButton
|
||
v-permission="'dice:lottery_config:index:destroy'"
|
||
:disabled="selectedRows.length === 0"
|
||
@click="deleteSelectedRows(api.delete, refreshData)"
|
||
v-ripple
|
||
>
|
||
<template #icon>
|
||
<ArtSvgIcon icon="ri:delete-bin-5-line" />
|
||
</template>
|
||
删除
|
||
</ElButton>
|
||
</ElSpace>
|
||
</template>
|
||
</ArtTableHeader>
|
||
|
||
<!-- 表格 -->
|
||
<ArtTable
|
||
ref="tableRef"
|
||
rowKey="id"
|
||
:loading="loading"
|
||
:data="data"
|
||
:columns="columns"
|
||
:pagination="pagination"
|
||
@sort-change="handleSortChange"
|
||
@selection-change="handleSelectionChange"
|
||
@pagination:size-change="handleSizeChange"
|
||
@pagination:current-change="handleCurrentChange"
|
||
>
|
||
<!-- 操作列 -->
|
||
<template #operation="{ row }">
|
||
<div class="flex gap-2">
|
||
<SaButton
|
||
v-permission="'dice:lottery_config:index:update'"
|
||
type="secondary"
|
||
@click="showDialog('edit', row)"
|
||
/>
|
||
<SaButton
|
||
v-permission="'dice:lottery_config:index:destroy'"
|
||
type="error"
|
||
@click="deleteRow(row, api.delete, refreshData)"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</ArtTable>
|
||
</ElCard>
|
||
|
||
<!-- 编辑弹窗 -->
|
||
<EditDialog
|
||
v-model="dialogVisible"
|
||
:dialog-type="dialogType"
|
||
:data="dialogData"
|
||
@success="refreshData"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useTable } from '@/hooks/core/useTable'
|
||
import { useSaiAdmin } from '@/composables/useSaiAdmin'
|
||
import api from '../../api/lottery_config/index'
|
||
import TableSearch from './modules/table-search.vue'
|
||
import EditDialog from './modules/edit-dialog.vue'
|
||
|
||
// 搜索表单
|
||
const searchForm = ref({
|
||
name: undefined,
|
||
type: undefined
|
||
})
|
||
|
||
// 搜索处理
|
||
const handleSearch = (params: Record<string, any>) => {
|
||
Object.assign(searchParams, params)
|
||
getData()
|
||
}
|
||
|
||
// 奖池类型展示：0=正常 1=强制杀猪 2=T1高倍率
|
||
const typeFormatter = (row: Record<string, unknown>) =>
|
||
row.type === 0 ? '正常' : row.type === 1 ? '强制杀猪' : row.type === 2 ? 'T1高倍率' : '-'
|
||
|
||
// 权重列带 %
|
||
const weightFormatter = (prop: string) => (row: Record<string, unknown>) => {
|
||
const v = row[prop]
|
||
return v != null && v !== '' ? `${v}%` : '-'
|
||
}
|
||
|
||
// 表格配置
|
||
const {
|
||
columns,
|
||
columnChecks,
|
||
data,
|
||
loading,
|
||
getData,
|
||
searchParams,
|
||
pagination,
|
||
resetSearchParams,
|
||
handleSortChange,
|
||
handleSizeChange,
|
||
handleCurrentChange,
|
||
refreshData
|
||
} = useTable({
|
||
core: {
|
||
apiFn: api.list,
|
||
columnsFactory: () => [
|
||
{ type: 'selection' },
|
||
{ prop: 'name', label: '名称' },
|
||
{ prop: 'type', label: '奖池类型', width: 100, formatter: typeFormatter },
|
||
{ prop: 'safety_line', label: '安全线' },
|
||
{ prop: 't1_wight', label: 'T1池权重', width: 100, formatter: weightFormatter('t1_wight') },
|
||
{ prop: 't2_wight', label: 'T2池权重', width: 100, formatter: weightFormatter('t2_wight') },
|
||
{ prop: 't3_wight', label: 'T3池权重', width: 100, formatter: weightFormatter('t3_wight') },
|
||
{ prop: 't4_wight', label: 'T4池权重', width: 100, formatter: weightFormatter('t4_wight') },
|
||
{ prop: 't5_wight', label: 'T5池权重', width: 100, formatter: weightFormatter('t5_wight') },
|
||
{ prop: 'operation', label: '操作', width: 100, fixed: 'right', useSlot: true }
|
||
]
|
||
}
|
||
})
|
||
|
||
// 编辑配置
|
||
const {
|
||
dialogType,
|
||
dialogVisible,
|
||
dialogData,
|
||
showDialog,
|
||
deleteRow,
|
||
deleteSelectedRows,
|
||
handleSelectionChange,
|
||
selectedRows
|
||
} = useSaiAdmin()
|
||
</script>
|