382 lines
13 KiB
Vue
382 lines
13 KiB
Vue
<template>
|
||
<ElDialog
|
||
v-model="visible"
|
||
title="一键测试权重"
|
||
width="560px"
|
||
:close-on-click-modal="false"
|
||
destroy-on-close
|
||
@close="onClose"
|
||
>
|
||
<ElForm ref="formRef" :model="form" label-width="140px">
|
||
<ElSteps :active="currentStep" finish-status="success" simple class="steps-wrap">
|
||
<ElStep title="付费抽奖券" />
|
||
<ElStep title="免费抽奖券" />
|
||
</ElSteps>
|
||
|
||
<!-- 第一页：付费抽奖券 -->
|
||
<div v-show="currentStep === 0" class="step-panel">
|
||
<ElFormItem label="测试数据档位类型" prop="paid_lottery_config_id">
|
||
<ElSelect
|
||
v-model="form.paid_lottery_config_id"
|
||
placeholder="不选则下方自定义档位概率（默认 type=0）"
|
||
clearable
|
||
filterable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption
|
||
v-for="item in paidLotteryOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<template v-if="form.paid_lottery_config_id == null">
|
||
<div class="tier-label">自定义档位概率（T1～T5），每档 0-100%，五档之和不能超过 100%</div>
|
||
<ElRow :gutter="12" class="tier-row">
|
||
<ElCol v-for="t in tierKeys" :key="'paid-' + t" :span="8">
|
||
<div class="tier-field">
|
||
<label class="tier-field-label">档位 {{ t }}（%）</label>
|
||
<input
|
||
type="number"
|
||
:value="getPaidTier(t)"
|
||
min="0"
|
||
max="100"
|
||
placeholder="0"
|
||
class="tier-input"
|
||
@input="setPaidTier(t, $event)"
|
||
/>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<div v-if="paidTierSum > 100" class="tier-error"
|
||
>当前五档之和为 {{ paidTierSum }}%，不能超过 100%</div
|
||
>
|
||
</template>
|
||
<ElFormItem label="顺时针次数" prop="paid_s_count" required>
|
||
<ElSelect v-model="form.paid_s_count" placeholder="请选择" style="width: 100%">
|
||
<ElOption v-for="c in countOptions" :key="c" :label="String(c)" :value="c" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem label="逆时针次数" prop="paid_n_count" required>
|
||
<ElSelect v-model="form.paid_n_count" placeholder="请选择" style="width: 100%">
|
||
<ElOption v-for="c in countOptions" :key="c" :label="String(c)" :value="c" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</div>
|
||
|
||
<!-- 第二页：免费抽奖券 -->
|
||
<div v-show="currentStep === 1" class="step-panel">
|
||
<ElFormItem label="测试数据档位类型" prop="free_lottery_config_id">
|
||
<ElSelect
|
||
v-model="form.free_lottery_config_id"
|
||
placeholder="不选则下方自定义档位概率（默认 type=1）"
|
||
clearable
|
||
filterable
|
||
style="width: 100%"
|
||
>
|
||
<ElOption
|
||
v-for="item in freeLotteryOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<template v-if="form.free_lottery_config_id == null">
|
||
<div class="tier-label">自定义档位概率（T1～T5），每档 0-100%，五档之和不能超过 100%</div>
|
||
<ElRow :gutter="12" class="tier-row">
|
||
<ElCol v-for="t in tierKeys" :key="'free-' + t" :span="8">
|
||
<div class="tier-field">
|
||
<label class="tier-field-label">档位 {{ t }}（%）</label>
|
||
<input
|
||
type="number"
|
||
:value="getFreeTier(t)"
|
||
min="0"
|
||
max="100"
|
||
placeholder="0"
|
||
class="tier-input"
|
||
@input="setFreeTier(t, $event)"
|
||
/>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<div v-if="freeTierSum > 100" class="tier-error"
|
||
>当前五档之和为 {{ freeTierSum }}%，不能超过 100%</div
|
||
>
|
||
</template>
|
||
<ElFormItem label="顺时针次数" prop="free_s_count" required>
|
||
<ElSelect v-model="form.free_s_count" placeholder="请选择" style="width: 100%">
|
||
<ElOption v-for="c in countOptions" :key="c" :label="String(c)" :value="c" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem label="逆时针次数" prop="free_n_count" required>
|
||
<ElSelect v-model="form.free_n_count" placeholder="请选择" style="width: 100%">
|
||
<ElOption v-for="c in countOptions" :key="c" :label="String(c)" :value="c" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</div>
|
||
</ElForm>
|
||
|
||
<template #footer>
|
||
<ElButton v-if="currentStep > 0" :disabled="running" @click="currentStep--">上一步</ElButton>
|
||
<ElButton v-if="currentStep < 1" type="primary" :disabled="running" @click="currentStep++"
|
||
>下一步</ElButton
|
||
>
|
||
<ElButton v-if="currentStep === 1" type="primary" :loading="running" @click="handleStart"
|
||
>开始测试</ElButton
|
||
>
|
||
<ElButton :disabled="running" @click="visible = false">取消</ElButton>
|
||
</template>
|
||
</ElDialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import api from '../../../api/reward/index'
|
||
import lotteryPoolApi from '../../../api/lottery_pool_config/index'
|
||
|
||
const countOptions = [0, 100, 500, 1000, 5000]
|
||
const tierKeys = ['T1', 'T2', 'T3', 'T4', 'T5'] as const
|
||
|
||
const visible = defineModel<boolean>({ default: false })
|
||
const emit = defineEmits<{ (e: 'success'): void }>()
|
||
|
||
const formRef = ref()
|
||
const currentStep = ref(0)
|
||
const form = reactive({
|
||
paid_lottery_config_id: undefined as number | undefined,
|
||
free_lottery_config_id: undefined as number | undefined,
|
||
paid_tier_weights: { T1: 20, T2: 20, T3: 20, T4: 20, T5: 20 } as Record<string, number>,
|
||
free_tier_weights: { T1: 20, T2: 20, T3: 20, T4: 20, T5: 20 } as Record<string, number>,
|
||
paid_s_count: 100,
|
||
paid_n_count: 100,
|
||
free_s_count: 100,
|
||
free_n_count: 100
|
||
})
|
||
const lotteryOptions = ref<Array<{ id: number; name: string; type: number }>>([])
|
||
/** 将 type 转为数字（接口可能返回字符串 "0"/"1"） */
|
||
function tierTypeNum(r: { type?: number | string }): number {
|
||
const t = r.type ?? 0
|
||
return typeof t === 'number' ? t : Number(t) || 0
|
||
}
|
||
/** 付费抽奖券可选档位：type=0 */
|
||
const paidLotteryOptions = computed(() =>
|
||
lotteryOptions.value.filter((r) => tierTypeNum(r) === 0)
|
||
)
|
||
/**
|
||
* 免费抽奖券可选档位：优先 type=1（DiceLotteryPoolConfig.type=1），若无则显示全部以便下拉有选项
|
||
*/
|
||
const freeLotteryOptions = computed(() => {
|
||
const type1List = lotteryOptions.value.filter((r) => tierTypeNum(r) === 1)
|
||
return type1List.length > 0 ? type1List : lotteryOptions.value
|
||
})
|
||
const running = ref(false)
|
||
|
||
function onClose() {
|
||
running.value = false
|
||
currentStep.value = 0
|
||
}
|
||
|
||
function getPaidTier(t: string): string {
|
||
const v = form.paid_tier_weights[t]
|
||
return v !== undefined && v !== null ? String(v) : ''
|
||
}
|
||
function setPaidTier(t: string, val: string | Event) {
|
||
const raw =
|
||
typeof val === 'string'
|
||
? val
|
||
: ((val as Event & { target: HTMLInputElement }).target?.value ?? '')
|
||
const num = raw === '' ? 0 : Math.max(0, Math.min(100, Number(raw) || 0))
|
||
form.paid_tier_weights[t] = num
|
||
}
|
||
const paidTierSum = computed(() =>
|
||
tierKeys.reduce((s, t) => s + (form.paid_tier_weights[t] ?? 0), 0)
|
||
)
|
||
function getFreeTier(t: string): string {
|
||
const v = form.free_tier_weights[t]
|
||
return v !== undefined && v !== null ? String(v) : ''
|
||
}
|
||
function setFreeTier(t: string, val: string | Event) {
|
||
const raw =
|
||
typeof val === 'string'
|
||
? val
|
||
: ((val as Event & { target: HTMLInputElement }).target?.value ?? '')
|
||
const num = raw === '' ? 0 : Math.max(0, Math.min(100, Number(raw) || 0))
|
||
form.free_tier_weights[t] = num
|
||
}
|
||
const freeTierSum = computed(() =>
|
||
tierKeys.reduce((s, t) => s + (form.free_tier_weights[t] ?? 0), 0)
|
||
)
|
||
|
||
async function loadLotteryOptions() {
|
||
try {
|
||
const list = await lotteryPoolApi.getOptions()
|
||
lotteryOptions.value = list.map(
|
||
(r: { id: number; name: string; type?: number | string }) => ({
|
||
id: r.id,
|
||
name: r.name,
|
||
type: tierTypeNum(r)
|
||
})
|
||
)
|
||
// 付费抽奖券默认使用 type=0 的档位类型
|
||
const type0 = list.find((r: { type?: number | string }) => tierTypeNum(r) === 0)
|
||
if (type0) {
|
||
form.paid_lottery_config_id = type0.id
|
||
}
|
||
// 免费抽奖券默认使用 type=1 的档位类型（DiceLotteryPoolConfig.type=1）；若无 type=1 则默认选第一项
|
||
const type1 = list.find((r: { type?: number | string }) => tierTypeNum(r) === 1)
|
||
if (type1) {
|
||
form.free_lottery_config_id = type1.id
|
||
} else if (list.length > 0) {
|
||
form.free_lottery_config_id = list[0].id
|
||
}
|
||
} catch (_) {
|
||
lotteryOptions.value = []
|
||
}
|
||
}
|
||
|
||
function buildPayload() {
|
||
const payload: Record<string, unknown> = {
|
||
paid_s_count: form.paid_s_count,
|
||
paid_n_count: form.paid_n_count,
|
||
free_s_count: form.free_s_count,
|
||
free_n_count: form.free_n_count
|
||
}
|
||
if (form.paid_lottery_config_id != null) {
|
||
payload.paid_lottery_config_id = form.paid_lottery_config_id
|
||
} else {
|
||
payload.paid_tier_weights = { ...form.paid_tier_weights }
|
||
}
|
||
if (form.free_lottery_config_id != null) {
|
||
payload.free_lottery_config_id = form.free_lottery_config_id
|
||
} else {
|
||
payload.free_tier_weights = { ...form.free_tier_weights }
|
||
}
|
||
return payload
|
||
}
|
||
|
||
function validateForm(): boolean {
|
||
if (form.paid_s_count + form.paid_n_count + form.free_s_count + form.free_n_count <= 0) {
|
||
ElMessage.warning('付费或免费至少一种方向次数之和大于 0')
|
||
return false
|
||
}
|
||
const needPaidTier = form.paid_lottery_config_id == null
|
||
const needFreeTier = form.free_lottery_config_id == null
|
||
if (needPaidTier) {
|
||
const sum = paidTierSum.value
|
||
if (sum <= 0) {
|
||
ElMessage.warning('付费未选奖池时，T1～T5 档位概率之和需大于 0')
|
||
return false
|
||
}
|
||
if (sum > 100) {
|
||
ElMessage.warning('付费档位概率 T1～T5 之和不能超过 100%')
|
||
return false
|
||
}
|
||
}
|
||
if (needFreeTier) {
|
||
const sum = freeTierSum.value
|
||
if (sum <= 0) {
|
||
ElMessage.warning('免费未选奖池时，T1～T5 档位概率之和需大于 0')
|
||
return false
|
||
}
|
||
if (sum > 100) {
|
||
ElMessage.warning('免费档位概率 T1～T5 之和不能超过 100%')
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
}
|
||
|
||
async function handleStart() {
|
||
if (!validateForm()) return
|
||
running.value = true
|
||
try {
|
||
await api.startWeightTest(buildPayload())
|
||
ElMessage.success(
|
||
'测试任务已创建，后台将自动执行。请在【玩家抽奖记录(测试数据)】中查看生成的测试数据'
|
||
)
|
||
visible.value = false
|
||
emit('success')
|
||
} catch (e: any) {
|
||
ElMessage.error(e?.message || '创建测试任务失败')
|
||
} finally {
|
||
running.value = false
|
||
}
|
||
}
|
||
|
||
watch(visible, (v) => {
|
||
if (v) {
|
||
loadLotteryOptions()
|
||
} else {
|
||
onClose()
|
||
}
|
||
})
|
||
|
||
// 切换到免费步骤时，若当前选中 id 不在免费档位列表中，则重置为第一个 type=1 的选项，避免显示错误
|
||
watch(currentStep, (step) => {
|
||
if (step === 1) {
|
||
const freeOpts = freeLotteryOptions.value
|
||
const id = form.free_lottery_config_id
|
||
if (freeOpts.length && (id == null || !freeOpts.some((o) => o.id === id))) {
|
||
form.free_lottery_config_id = freeOpts[0].id
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.steps-wrap {
|
||
margin-bottom: 16px;
|
||
}
|
||
.step-panel {
|
||
min-height: 200px;
|
||
}
|
||
.tier-label {
|
||
font-size: 13px;
|
||
color: var(--el-text-color-secondary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.tier-row {
|
||
margin-bottom: 12px;
|
||
}
|
||
.tier-field {
|
||
margin-bottom: 12px;
|
||
}
|
||
.tier-field-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
color: var(--el-text-color-regular);
|
||
margin-bottom: 4px;
|
||
line-height: 1.5;
|
||
}
|
||
.tier-input {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--el-text-color-regular);
|
||
background-color: var(--el-fill-color-blank);
|
||
border: 1px solid var(--el-border-color);
|
||
border-radius: var(--el-border-radius-base);
|
||
box-sizing: border-box;
|
||
}
|
||
.tier-input:hover {
|
||
border-color: var(--el-border-color-hover);
|
||
}
|
||
.tier-input:focus {
|
||
outline: none;
|
||
border-color: var(--el-color-primary);
|
||
box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
|
||
}
|
||
.tier-input::placeholder {
|
||
color: var(--el-text-color-placeholder);
|
||
}
|
||
.tier-error {
|
||
font-size: 12px;
|
||
color: var(--el-color-danger);
|
||
margin-top: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|