[update]修Transaction的编辑界面
This commit is contained in:
@@ -19,28 +19,61 @@
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
@keyup.enter="baTable.onSubmit(formRef)"
|
||||
@keyup.enter="submitForm"
|
||||
:model="baTable.form.items"
|
||||
:label-position="config.layout.shrink ? 'top' : 'right'"
|
||||
:label-width="baTable.form.labelWidth + 'px'"
|
||||
:rules="rules"
|
||||
v-if="!baTable.form.loading"
|
||||
>
|
||||
<FormItem
|
||||
type="remoteSelect"
|
||||
prop="user_id"
|
||||
:label="t('user.moneyLog.User ID')"
|
||||
v-model="baTable.form.items!.user_id"
|
||||
:placeholder="t('Click select')"
|
||||
:input-attr="{
|
||||
pk: 'user.id',
|
||||
field: 'nickname_text',
|
||||
remoteUrl: '/admin/user.User/index',
|
||||
onChange: getAdd,
|
||||
disabled: baTable.form.operate == 'Edit'
|
||||
}"
|
||||
/>
|
||||
<el-form-item :label="t('user.moneyLog.bank_id')" prop="bank_id">
|
||||
<template v-if="baTable.form.operate == 'Edit'">
|
||||
<el-form-item label="Date & Time">
|
||||
<el-date-picker v-model="state.editTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
<el-radio-group v-model="state.timeMode" class="inline-mode">
|
||||
<el-radio value="Auto">Auto</el-radio>
|
||||
<el-radio value="Manual">Manual</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Category">
|
||||
<el-select v-model="baTable.form.items!.category">
|
||||
<el-option label="Customer" :value="1" />
|
||||
<el-option label="Other Adjust" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Type" prop="type">
|
||||
<el-radio-group v-model="baTable.form.items!.type">
|
||||
<el-radio-button :value="1">Deposit</el-radio-button>
|
||||
<el-radio-button :value="2">Withdraw</el-radio-button>
|
||||
<el-radio-button :value="3">IN</el-radio-button>
|
||||
<el-radio-button :value="4">OUT</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Username">
|
||||
<el-input v-model="baTable.form.items!.user_name" placeholder="e.g. PLAYER001" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Remark" prop="memo">
|
||||
<el-input v-model="baTable.form.items!.memo" placeholder="(optional)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Amount (AUD)" prop="money">
|
||||
<el-input-number v-model="baTable.form.items!.money" :min="0" :precision="2" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FormItem
|
||||
type="remoteSelect"
|
||||
prop="user_id"
|
||||
:label="t('user.moneyLog.User ID')"
|
||||
v-model="baTable.form.items!.user_id"
|
||||
:placeholder="t('Click select')"
|
||||
:input-attr="{
|
||||
pk: 'user.id',
|
||||
field: 'nickname_text',
|
||||
remoteUrl: '/admin/user.User/index',
|
||||
onChange: getAdd,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<el-form-item :label="baTable.form.operate == 'Edit' ? 'Bank' : t('user.moneyLog.bank_id')" prop="bank_id">
|
||||
<el-select
|
||||
v-model="baTable.form.items!.bank_id"
|
||||
filterable
|
||||
@@ -51,57 +84,64 @@
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.bankOptions"
|
||||
:key="item.id"
|
||||
:label="item.bank_name"
|
||||
:value="item.id"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<el-option v-for="item in state.bankOptions" :key="item.id" :label="item.bank_name" :value="item.id">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span>{{ item.bank_name }}</span>
|
||||
<span style="color: #a8abb2; font-size: 12px;">{{ item.bank_account }}</span>
|
||||
<span style="color: #a8abb2; font-size: 12px">{{ item.bank_account }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<FormItem
|
||||
:label="t('user.moneyLog.type')"
|
||||
type="select"
|
||||
v-model="baTable.form.items!.type"
|
||||
prop="type"
|
||||
:input-attr="{
|
||||
content: {
|
||||
'1': t('user.moneyLog.type_list.1'),
|
||||
'2': t('user.moneyLog.type_list.2'),
|
||||
},
|
||||
}"
|
||||
:placeholder="t('Please select field', { field: t('user.moneyLog.type') })"
|
||||
@change="(val) => { baTable.form.items!.type = val; }"
|
||||
/>
|
||||
<el-form-item prop="money" :label="t('user.moneyLog.Change amount')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.money"
|
||||
type="number"
|
||||
:placeholder="t('user.moneyLog.Please enter the balance change amount')"
|
||||
@input="changeMoney"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="memo" :label="t('user.moneyLog.remarks')">
|
||||
<el-input
|
||||
@keyup.enter.stop=""
|
||||
@keyup.ctrl.enter="baTable.onSubmit(formRef)"
|
||||
v-model="baTable.form.items!.memo"
|
||||
type="textarea"
|
||||
:placeholder="t('user.moneyLog.Please enter change remarks / description')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<template v-if="baTable.form.operate == 'Edit'">
|
||||
<el-form-item label="Label">
|
||||
<el-select v-model="baTable.form.items!.label" placeholder="- (optional) -" clearable>
|
||||
<el-option label="First Deposit" :value="1" />
|
||||
<el-option label="Unclaim" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Game Ticket Auto">
|
||||
<el-checkbox v-model="state.gameTicketAuto">Auto generate ticket</el-checkbox>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FormItem
|
||||
:label="t('user.moneyLog.type')"
|
||||
type="select"
|
||||
v-model="baTable.form.items!.type"
|
||||
prop="type"
|
||||
:input-attr="{
|
||||
content: {
|
||||
'1': t('user.moneyLog.type_list.1'),
|
||||
'2': t('user.moneyLog.type_list.2'),
|
||||
},
|
||||
}"
|
||||
:placeholder="t('Please select field', { field: t('user.moneyLog.type') })"
|
||||
@change="onTypeChange"
|
||||
/>
|
||||
<el-form-item prop="money" :label="t('user.moneyLog.Change amount')">
|
||||
<el-input
|
||||
v-model="baTable.form.items!.money"
|
||||
type="number"
|
||||
:placeholder="t('user.moneyLog.Please enter the balance change amount')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="memo" :label="t('user.moneyLog.remarks')">
|
||||
<el-input
|
||||
@keyup.enter.stop=""
|
||||
@keyup.ctrl.enter="submitForm"
|
||||
v-model="baTable.form.items!.memo"
|
||||
type="textarea"
|
||||
:placeholder="t('user.moneyLog.Please enter change remarks / description')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
||||
<el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
|
||||
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
|
||||
<el-button v-blur :loading="baTable.form.submitLoading" @click="submitForm" type="primary">
|
||||
{{ baTable.form.operateIds!.length > 1 ? t('Save and edit next item') : t('Save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -110,7 +150,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, watch, useTemplateRef, nextTick } from 'vue'
|
||||
import { reactive, inject, watch, useTemplateRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type baTableClass from '/@/utils/baTable'
|
||||
import { add } from '/@/api/backend/user/moneyLog'
|
||||
@@ -127,14 +167,16 @@ const getBankList = (query: string = '') => {
|
||||
params: {
|
||||
// BuildAdmin 后端标准的搜索与分页格式
|
||||
quickSearch: query,
|
||||
limit: 20
|
||||
}
|
||||
}).then((res) => {
|
||||
// BuildAdmin 列表的标准返回结构是 res.data.list
|
||||
state.bankOptions = res.data.list || []
|
||||
}).finally(() => {
|
||||
state.bankLoading = false
|
||||
limit: 20,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// BuildAdmin 列表的标准返回结构是 res.data.list
|
||||
state.bankOptions = res.data.list || []
|
||||
})
|
||||
.finally(() => {
|
||||
state.bankLoading = false
|
||||
})
|
||||
}
|
||||
const config = useConfig()
|
||||
const { t } = useI18n()
|
||||
@@ -162,13 +204,19 @@ const formRef = useTemplateRef('formRef')
|
||||
const state: {
|
||||
userInfo: anyObj
|
||||
after: number
|
||||
bankOptions: any[] // 新增：存放银行下拉选项
|
||||
bankLoading: boolean // 新增：下拉框加载状态
|
||||
bankOptions: any[]
|
||||
bankLoading: boolean
|
||||
editTime: string
|
||||
timeMode: 'Auto' | 'Manual'
|
||||
gameTicketAuto: boolean
|
||||
} = reactive({
|
||||
userInfo: {},
|
||||
after: 0,
|
||||
bankOptions: [], // 初始化
|
||||
bankLoading: false
|
||||
bankOptions: [],
|
||||
bankLoading: false,
|
||||
editTime: '',
|
||||
timeMode: 'Manual',
|
||||
gameTicketAuto: true,
|
||||
})
|
||||
|
||||
const getAdd = () => {
|
||||
@@ -190,9 +238,7 @@ watch(
|
||||
}
|
||||
|
||||
const inputAmount = newMoney === '' ? 0 : parseFloat(newMoney as string)
|
||||
const currentMoney = baTable.form.operate == 'Edit'
|
||||
? parseFloat(baTable.form.items!.before)
|
||||
: parseFloat(state.userInfo.money)
|
||||
const currentMoney = baTable.form.operate == 'Edit' ? parseFloat(baTable.form.items!.before) : parseFloat(state.userInfo.money)
|
||||
|
||||
// 核心逻辑判断
|
||||
let result = 0
|
||||
@@ -209,8 +255,71 @@ watch(
|
||||
{ deep: true } // 深度监听
|
||||
)
|
||||
|
||||
const changeMoney = (value: string) => {
|
||||
const pad = (number: number) => number.toString().padStart(2, '0')
|
||||
|
||||
const formatDateTime = (value: unknown) => {
|
||||
const timestamp = Number(value)
|
||||
if (!Number.isFinite(timestamp) || !timestamp) return ''
|
||||
|
||||
const date = new Date(timestamp * 1000)
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
||||
}
|
||||
|
||||
const timestampFromEditTime = () => {
|
||||
if (state.timeMode === 'Auto' || !state.editTime) {
|
||||
return Math.floor(Date.now() / 1000)
|
||||
}
|
||||
|
||||
const timestamp = Math.floor(new Date(state.editTime.replace(' ', 'T')).getTime() / 1000)
|
||||
return Number.isFinite(timestamp) ? timestamp : Math.floor(Date.now() / 1000)
|
||||
}
|
||||
|
||||
const onTypeChange = (val: number | string) => {
|
||||
baTable.form.items!.type = val
|
||||
}
|
||||
|
||||
const findTableRow = (rows: TableRow[] = [], id: number | string): TableRow | undefined => {
|
||||
for (const row of rows) {
|
||||
if (row.id == id) return row
|
||||
if (row.children) {
|
||||
const child = findTableRow(row.children, id)
|
||||
if (child) return child
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getUsername = (items: anyObj) => {
|
||||
const tableRow = findTableRow(baTable.table.data, items.id)
|
||||
return items.user?.username || tableRow?.user?.username || ''
|
||||
}
|
||||
|
||||
const initEditForm = () => {
|
||||
const items = baTable.form.items
|
||||
if (!items || baTable.form.operate !== 'Edit') return
|
||||
|
||||
items.category = items.category || 1
|
||||
if (!items.user_name) {
|
||||
items.user_name = getUsername(items)
|
||||
}
|
||||
items.bank_id = items.bank_id || items.bank?.id || ''
|
||||
items.label = items.label || ''
|
||||
state.editTime = formatDateTime(items.create_time)
|
||||
state.timeMode = 'Manual'
|
||||
state.gameTicketAuto =
|
||||
items.game_ticket !== undefined ? Number(items.game_ticket) === 1 : Array.isArray(items.scoreLog) && items.scoreLog.length > 0
|
||||
|
||||
if (items.bank && !state.bankOptions.some((bank) => bank.id === items.bank_id)) {
|
||||
state.bankOptions.unshift(items.bank)
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
if (baTable.form.operate === 'Edit') {
|
||||
baTable.form.items!.create_time = timestampFromEditTime()
|
||||
baTable.form.items!.game_ticket = state.gameTicketAuto ? 1 : 0
|
||||
}
|
||||
|
||||
baTable.onSubmit(formRef.value)
|
||||
}
|
||||
|
||||
// 打开表单时刷新用户数据
|
||||
@@ -219,9 +328,18 @@ watch(
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
getAdd()
|
||||
getBankList()
|
||||
initEditForm()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => baTable.form.items,
|
||||
() => {
|
||||
initEditForm()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -229,4 +347,11 @@ watch(
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.inline-mode {
|
||||
margin-left: 12px;
|
||||
}
|
||||
:deep(.el-form-item .el-select),
|
||||
:deep(.el-form-item .el-input) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user