mojiahui/dafuweng-saiadmin6.x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[色子游戏]玩家抽奖记录-优化样式

Browse Source
This commit is contained in:
zhenhui
2026-03-03 16:21:41 +08:00
parent 3606d4635e
commit 878dbbf578
7 changed files with 444 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
saiadmin-artd/src/views/plugin/dice/api/play_record/index.ts
View File

@@ -61,5 +61,26 @@ export default {
url: '/dice/play_record/DicePlayRecord/destroy',
data: params
})
},
/** 获取玩家选项（id、username） */
getPlayerOptions() {
return request.get<{ id: number; username: string }[]>({
url: '/dice/play_record/DicePlayRecord/getPlayerOptions'
})
},
/** 获取彩金池配置选项（id、name） */
getLotteryConfigOptions() {
return request.get<{ id: number; name: string }[]>({
url: '/dice/play_record/DicePlayRecord/getLotteryConfigOptions'
})
},
/** 获取奖励配置选项（id、ui_text、tier） */
getRewardConfigOptions() {
return request.get<{ id: number; ui_text: string; tier: string }[]>({
url: '/dice/play_record/DicePlayRecord/getRewardConfigOptions'
})
}
}

69
saiadmin-artd/src/views/plugin/dice/play_record/index/index.vue
View File

@@ -8,7 +8,11 @@
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
<template #left>
<ElSpace wrap>
<ElButton v-permission="'dice:play_record:index:save'" @click="showDialog('add')" v-ripple>
<ElButton
v-permission="'dice:play_record:index:save'"
@click="showDialog('add')"
v-ripple
>
<template #icon>
<ArtSvgIcon icon="ri:add-fill" />
</template>
@@ -42,6 +46,22 @@
@pagination:size-change="handleSizeChange"
@pagination:current-change="handleCurrentChange"
>
<!-- 彩金池配置 tag -->
<template #lottery_config_id="{ row }">
<ElTag size="small">{{ lotteryConfigNameFormatter(row) }}</ElTag>
</template>
<!-- 抽奖类型 tag -->
<template #lottery_type="{ row }">
<ElTag size="small" :type="row.lottery_type === 0 ? 'warning' : 'success'">
{{ row.lottery_type === 0 ? '付费' : row.lottery_type === 1 ? '赠送' : '-' }}
</ElTag>
</template>
<!-- 中奖 tag -->
<template #is_win="{ row }">
<ElTag size="small" :type="row.is_win === 1 ? 'success' : 'info'">
{{ row.is_win === 0 ? '无' : row.is_win === 1 ? '中奖' : '-' }}
</ElTag>
</template>
<!-- 操作列 -->
<template #operation="{ row }">
<div class="flex gap-2">
@@ -77,11 +97,16 @@
import TableSearch from './modules/table-search.vue'
import EditDialog from './modules/edit-dialog.vue'
// 搜索表单
const searchForm = ref({
const searchForm = ref<Record<string, unknown>>({
username: undefined,
lottery_config_name: undefined,
lottery_type: undefined,
lottery_name: undefined,
is_win: undefined,
win_coin_min: undefined,
win_coin_max: undefined,
reward_ui_text: undefined,
reward_tier: undefined
})
// 搜索处理
@@ -90,6 +115,13 @@
getData()
}
const usernameFormatter = (row: Record<string, any>) =>
row?.dicePlayer?.username ?? row?.player_id ?? '-'
const lotteryConfigNameFormatter = (row: Record<string, any>) =>
row?.diceLotteryConfig?.name ?? row?.lottery_config_id ?? '-'
const rewardTierFormatter = (row: Record<string, any>) =>
row?.diceRewardConfig?.tier ?? row?.reward_config_id ?? '-'
// 表格配置
const {
columns,
@@ -109,14 +141,28 @@
apiFn: api.list,
columnsFactory: () => [
{ type: 'selection' },
{ prop: 'player_id', label: '玩家id' },
{ prop: 'lottery_config_id', label: '彩金池配置' },
{ prop: 'lottery_type', label: '抽奖类型' },
{ prop: 'is_win', label: '中奖' },
{ prop: 'id', label: 'ID', width: 80 },
{
prop: 'player_id',
label: '玩家',
formatter: (row: Record<string, any>) => usernameFormatter(row)
},
{
prop: 'lottery_config_id',
label: '彩金池配置',
width: 120,
useSlot: true
},
{ prop: 'lottery_type', label: '抽奖类型', width: 100, useSlot: true },
{ prop: 'is_win', label: '中奖', width: 80, useSlot: true },
{ prop: 'win_coin', label: '赢取平台币' },
{ prop: 'reward_config_id', label: '奖励配置id' },
{ prop: 'lottery_id', label: '奖池' },
{ prop: 'lottery_name', label: '奖池名' },
{
prop: 'reward_config_id',
label: '奖励配置',
formatter: (row: Record<string, any>) => rewardTierFormatter(row)
},
{ prop: 'create_time', label: '创建时间', width: 170 },
{ prop: 'update_time', label: '修改时间', width: 170 },
{ prop: 'operation', label: '操作', width: 100, fixed: 'right', useSlot: true }
]
}
@@ -133,5 +179,4 @@
handleSelectionChange,
selectedRows
} = useSaiAdmin()
</script>

208
saiadmin-artd/src/views/plugin/dice/play_record/index/modules/edit-dialog.vue
View File

@@ -8,34 +8,98 @@
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="玩家id" prop="player_id">
<el-cascader v-model="formData.player_id" :options="[]" placeholder="请选择玩家id" allow-clear />
<el-form-item label="玩家" prop="player_id">
<el-select
v-model="formData.player_id"
placeholder="请选择玩家（显示用户名）"
clearable
filterable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option
v-for="item in playerOptions"
:key="item.id"
:label="item.username"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="彩金池配置" prop="lottery_config_id">
<el-cascader v-model="formData.lottery_config_id" :options="[]" placeholder="请选择彩金池配置" allow-clear />
<el-select
v-model="formData.lottery_config_id"
placeholder="请选择彩金池配置"
clearable
filterable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option
v-for="item in lotteryConfigOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="抽奖类型" prop="lottery_type">
<el-select v-model="formData.lottery_type" :options="[]" placeholder="请选择抽奖类型" clearable />
<el-select
v-model="formData.lottery_type"
placeholder="请选择"
clearable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option label="付费" :value="0" />
<el-option label="赠送" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="中奖" prop="is_win">
<el-select v-model="formData.is_win" :options="[]" placeholder="请选择中奖" clearable />
<el-select
v-model="formData.is_win"
placeholder="请选择"
clearable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option label="无" :value="0" />
<el-option label="中奖" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="赢取平台币" prop="win_coin">
<el-input-number v-model="formData.win_coin" placeholder="请输入赢取平台币" />
<el-input-number
v-model="formData.win_coin"
placeholder="请输入赢取平台币"
:precision="2"
style="width: 100%"
:disabled="dialogType === 'edit'"
/>
</el-form-item>
<el-form-item label="奖励配置id" prop="reward_config_id">
<el-cascader v-model="formData.reward_config_id" :options="[]" placeholder="请选择奖励配置id" allow-clear />
</el-form-item>
<el-form-item label="奖池" prop="lottery_id">
<el-cascader v-model="formData.lottery_id" :options="[]" placeholder="请选择奖池" allow-clear />
</el-form-item>
<el-form-item label="奖池名" prop="lottery_name">
<el-input v-model="formData.lottery_name" placeholder="请输入奖池名" />
<el-form-item label="奖励配置" prop="reward_config_id">
<el-select
v-model="formData.reward_config_id"
placeholder="请选择奖励配置（显示前端文本）"
clearable
filterable
style="width: 100%"
:disabled="dialogType === 'edit'"
>
<el-option
v-for="item in rewardConfigOptions"
:key="item.id"
:label="
item.ui_text
? `${item.ui_text}${item.tier ? ' (' + item.tier + ')' : ''}`
: String(item.id)
"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="handleClose">{{ dialogType === 'edit' ? '关闭' : '取消' }}</el-button>
<el-button v-if="dialogType === 'add'" type="primary" @click="handleSubmit">提交</el-button>
</template>
</el-dialog>
</template>
@@ -66,103 +130,103 @@
const formRef = ref<FormInstance>()
/**
* 弹窗显示状态双向绑定
*/
const visible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
/**
* 表单验证规则
*/
const rules = reactive<FormRules>({
player_id: [{ required: true, message: '玩家id必需填写', trigger: 'blur' }],
lottery_config_id: [{ required: true, message: '彩金池配置必需填写', trigger: 'blur' }],
lottery_type: [{ required: true, message: '抽奖类型必需填写', trigger: 'blur' }],
is_win: [{ required: true, message: '中奖必需填写', trigger: 'blur' }],
win_coin: [{ required: true, message: '赢取平台币必需填写', trigger: 'blur' }],
reward_config_id: [{ required: true, message: '奖励配置id必需填写', trigger: 'blur' }],
lottery_id: [{ required: true, message: '奖池必需填写', trigger: 'blur' }],
lottery_name: [{ required: true, message: '奖池名必需填写', trigger: 'blur' }],
player_id: [{ required: true, message: '请选择玩家', trigger: 'change' }],
lottery_config_id: [{ required: true, message: '请选择彩金池配置', trigger: 'change' }],
lottery_type: [{ required: true, message: '请选择抽奖类型', trigger: 'change' }],
is_win: [{ required: true, message: '请选择中奖', trigger: 'change' }],
win_coin: [{ required: true, message: '赢取平台币必填', trigger: 'blur' }],
reward_config_id: [{ required: true, message: '请选择奖励配置', trigger: 'change' }]
})
/**
* 初始数据
*/
const playerOptions = ref<Array<{ id: number; username: string }>>([])
const lotteryConfigOptions = ref<Array<{ id: number; name: string }>>([])
const rewardConfigOptions = ref<Array<{ id: number; ui_text: string; tier: string }>>([])
const initialFormData = {
id: null,
player_id: null,
lottery_config_id: null,
lottery_type: null,
is_win: null,
win_coin: null,
reward_config_id: null,
lottery_id: null,
lottery_name: '',
id: null as number | null,
player_id: null as number | null,
lottery_config_id: null as number | null,
lottery_type: null as number | null,
is_win: null as number | null,
win_coin: null as number | null,
reward_config_id: null as number | null
}
/**
* 表单数据
*/
const formData = reactive({ ...initialFormData })
/**
* 监听弹窗打开，初始化表单数据
*/
watch(
() => props.modelValue,
(newVal) => {
if (newVal) {
async (open) => {
if (open) {
initPage()
try {
const [players, lotteryConfigs, rewardConfigs] = await Promise.all([
api.getPlayerOptions(),
api.getLotteryConfigOptions(),
api.getRewardConfigOptions()
])
playerOptions.value = Array.isArray(players) ? players : ((players as any)?.data ?? [])
lotteryConfigOptions.value = Array.isArray(lotteryConfigs)
? lotteryConfigs
: ((lotteryConfigs as any)?.data ?? [])
rewardConfigOptions.value = Array.isArray(rewardConfigs)
? rewardConfigs
: ((rewardConfigs as any)?.data ?? [])
} catch {
playerOptions.value = []
lotteryConfigOptions.value = []
rewardConfigOptions.value = []
}
}
}
)
/**
* 初始化页面数据
*/
const initPage = async () => {
// 先重置为初始值
Object.assign(formData, initialFormData)
// 如果有数据，则填充数据
Object.assign(formData, { ...initialFormData })
if (props.data) {
await nextTick()
initForm()
}
}
/**
* 初始化表单数据
*/
const initForm = () => {
if (props.data) {
for (const key in formData) {
if (props.data[key] != null && props.data[key] != undefined) {
;(formData as any)[key] = props.data[key]
}
if (!props.data) return
const keys = [
'id',
'player_id',
'lottery_config_id',
'lottery_type',
'is_win',
'win_coin',
'reward_config_id'
]
keys.forEach((key) => {
const val = props.data![key]
if (val != null && val !== undefined) {
;(formData as Record<string, unknown>)[key] = val
}
}
})
}
/**
* 关闭弹窗并重置表单
*/
const handleClose = () => {
visible.value = false
formRef.value?.resetFields()
}
/**
* 提交表单
*/
const handleSubmit = async () => {
if (!formRef.value) return
try {
await formRef.value.validate()
if (props.dialogType === 'add') {
await api.save(formData)
const rest = { ...formData } as Record<string, unknown>
delete rest.id
await api.save(rest)
ElMessage.success('新增成功')
} else {
await api.update(formData)

106
saiadmin-artd/src/views/plugin/dice/play_record/index/modules/table-search.vue
View File

@@ -2,20 +2,73 @@
<sa-search-bar
ref="searchBarRef"
v-model="formData"
label-width="100px"
label-width="120px"
:showExpand="false"
@reset="handleReset"
@search="handleSearch"
@expand="handleExpand"
>
<el-col v-bind="setSpan(6)">
<el-form-item label="抽奖类型" prop="lottery_type">
<el-select v-model="formData.lottery_type" :options="[]" placeholder="请选择抽奖类型" clearable />
<el-form-item label="玩家" prop="username">
<el-input v-model="formData.username" placeholder="用户名模糊" clearable />
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="奖池名" prop="lottery_name">
<el-input v-model="formData.lottery_name" placeholder="请输入奖池名" clearable />
<el-form-item label="彩金池配置" prop="lottery_config_name">
<el-input v-model="formData.lottery_config_name" placeholder="名称模糊" clearable />
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="抽奖类型" prop="lottery_type">
<el-select v-model="formData.lottery_type" placeholder="全部" clearable style="width: 100%">
<el-option label="付费" :value="0" />
<el-option label="赠送" :value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="中奖" prop="is_win">
<el-select v-model="formData.is_win" placeholder="全部" clearable style="width: 100%">
<el-option label="无" :value="0" />
<el-option label="中奖" :value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="赢取平台币" prop="win_coin_min">
<div class="range-wrap">
<el-input-number
v-model="formData.win_coin_min"
placeholder="最小"
:precision="2"
controls-position="right"
class="range-input"
/>
<span class="range-sep">至</span>
<el-input-number
v-model="formData.win_coin_max"
placeholder="最大"
:precision="2"
controls-position="right"
class="range-input"
/>
</div>
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="奖励配置" prop="reward_ui_text">
<el-input v-model="formData.reward_ui_text" placeholder="前端显示文本模糊" clearable />
</el-form-item>
</el-col>
<el-col v-bind="setSpan(6)">
<el-form-item label="中奖名(档位)" prop="reward_tier">
<el-select v-model="formData.reward_tier" placeholder="全部" clearable style="width: 100%">
<el-option label="T1" value="T1" />
<el-option label="T2" value="T2" />
<el-option label="T3" value="T3" />
<el-option label="T4" value="T4" />
<el-option label="T5" value="T5" />
</el-select>
</el-form-item>
</el-col>
</sa-search-bar>
@@ -32,41 +85,52 @@
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
// 展开/收起
const isExpanded = ref<boolean>(false)
// 表单数据双向绑定
const searchBarRef = ref()
const formData = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
// 重置
function handleReset() {
searchBarRef.value?.ref.resetFields()
emit('reset')
}
// 搜索
async function handleSearch() {
emit('search', formData.value)
}
// 展开/收起
function handleExpand(expanded: boolean) {
isExpanded.value = expanded
}
// 栅格占据的列数
const setSpan = (span: number) => {
return {
span: span,
xs: 24, // 手机：满宽显示
sm: span >= 12 ? span : 12, // 平板：大于等于12保持，否则用半宽
md: span >= 8 ? span : 8, // 中等屏幕：大于等于8保持，否则用三分之一宽
lg: span,
xl: span
}
}
const setSpan = (span: number) => ({
span,
xs: 24,
sm: span >= 12 ? span : 12,
md: span >= 8 ? span : 8,
lg: span,
xl: span
})
</script>
<style lang="scss" scoped>
.range-wrap {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.range-input {
flex: 1;
min-width: 0;
}
.range-sep {
color: var(--el-text-color-secondary);
flex-shrink: 0;
}
</style>