增加积分调整日志

web/src/views/backend/mall/pointsLog/index.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="default-main ba-table-box">
+        <MallPageIntro page-key="pointsLog" />
+        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
+
+        <TableHeader
+            :buttons="['refresh', 'add', 'comSearch', 'quickSearch', 'columnDisplay']"
+            :quick-search-placeholder="t('Quick search placeholder', { fields: t('mall.pointsLog.quick_search_fields') })"
+        >
+            <el-button v-if="state.userAsset.id" v-blur class="table-header-operate">
+                <span class="table-header-operate-text">
+                    {{
+                        state.userAsset.username +
+                        ' (ID:' +
+                        state.userAsset.id +
+                        ') ' +
+                        t('mall.pointsLog.available_points') +
+                        ': ' +
+                        state.userAsset.available_points
+                    }}
+                </span>
+            </el-button>
+        </TableHeader>
+
+        <Table />
+        <PopupForm />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash-es'
+import { provide, reactive, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { getUserAsset, url } from '/@/api/backend/mall/pointsLog'
+import { baTableApi } from '/@/api/common'
+import MallPageIntro from '/@/components/mall/MallPageIntro.vue'
+import TableHeader from '/@/components/table/header/index.vue'
+import Table from '/@/components/table/index.vue'
+import baTableClass from '/@/utils/baTable'
+import PopupForm from './popupForm.vue'
+
+defineOptions({
+    name: 'mall/pointsLog',
+})
+
+interface UserAssetInfo {
+    id?: number
+    username?: string
+    phone?: string
+    playx_user_id?: string
+    available_points?: number
+}
+
+const { t } = useI18n()
+const route = useRoute()
+const routeUserAssetId = route.query.user_asset_id
+const defaultUserAssetId = typeof routeUserAssetId === 'string' ? routeUserAssetId : ''
+const state = reactive<{ userAsset: UserAssetInfo }>({
+    userAsset: {},
+})
+
+const baTable = new baTableClass(
+    new baTableApi(url),
+    {
+        column: [
+            { label: t('mall.pointsLog.id'), prop: 'id', align: 'center', operator: '=', width: 70 },
+            { label: t('mall.pointsLog.user_asset_id'), prop: 'user_asset_id', align: 'center', operator: '=', width: 100 },
+            {
+                label: t('mall.pointsLog.playx_user_id'),
+                prop: 'userAsset.playx_user_id',
+                align: 'center',
+                operator: 'LIKE',
+                operatorPlaceholder: t('Fuzzy query'),
+            },
+            {
+                label: t('mall.pointsLog.username'),
+                prop: 'userAsset.username',
+                align: 'center',
+                operator: 'LIKE',
+                operatorPlaceholder: t('Fuzzy query'),
+            },
+            { label: t('mall.pointsLog.score_value'), prop: 'score_value', align: 'center', operator: 'RANGE', sortable: 'custom' },
+            { label: t('mall.pointsLog.before'), prop: 'before', align: 'center', operator: 'RANGE', sortable: 'custom' },
+            { label: t('mall.pointsLog.after'), prop: 'after', align: 'center', operator: 'RANGE', sortable: 'custom' },
+            {
+                label: t('mall.pointsLog.memo'),
+                prop: 'memo',
+                align: 'center',
+                operator: 'LIKE',
+                operatorPlaceholder: t('Fuzzy query'),
+                showOverflowTooltip: true,
+            },
+            { label: t('mall.pointsLog.admin'), prop: 'admin.username', align: 'center', operator: 'LIKE' },
+            {
+                label: t('mall.pointsLog.create_time'),
+                prop: 'create_time',
+                align: 'center',
+                render: 'datetime',
+                sortable: 'custom',
+                operator: 'RANGE',
+                width: 160,
+            },
+        ],
+        dblClickNotEditColumn: ['all'],
+    },
+    {
+        defaultItems: {
+            user_asset_id: defaultUserAssetId,
+            score_value: 0,
+        },
+    }
+)
+
+const getUserAssetInfo = debounce((userAssetId: unknown) => {
+    if ((typeof userAssetId !== 'string' && typeof userAssetId !== 'number') || userAssetId === '') {
+        state.userAsset = {}
+        return
+    }
+
+    getUserAsset(userAssetId).then((response) => {
+        state.userAsset = response.data.userAsset
+    })
+}, 300)
+
+baTable.after.onSubmit = () => {
+    getUserAssetInfo(baTable.comSearch.form.user_asset_id)
+}
+baTable.after.onTableHeaderAction = ({ event }) => {
+    if (event == 'refresh') {
+        getUserAssetInfo(baTable.comSearch.form.user_asset_id)
+    }
+}
+
+baTable.mount()
+baTable.getData()
+provide('baTable', baTable)
+
+getUserAssetInfo(baTable.comSearch.form.user_asset_id)
+
+watch(
+    () => baTable.comSearch.form.user_asset_id,
+    (newValue) => {
+        baTable.form.defaultItems!.user_asset_id = newValue
+        getUserAssetInfo(newValue)
+    }
+)
+</script>
+
+<style scoped lang="scss"></style>

web/src/views/backend/mall/pointsLog/popupForm.vue

@@ -0,0 +1,173 @@
+<template>
+    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="baTable.form.operate == 'Add'" @close="baTable.toggleForm">
+        <template #header>
+            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
+                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
+            </div>
+        </template>
+
+        <el-scrollbar class="ba-table-form-scrollbar">
+            <div
+                class="ba-operate-form"
+                :class="'ba-' + baTable.form.operate + '-form'"
+                :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
+            >
+                <el-form
+                    v-if="!baTable.form.loading"
+                    ref="formRef"
+                    :model="baTable.form.items"
+                    :label-position="config.layout.shrink ? 'top' : 'right'"
+                    :label-width="baTable.form.labelWidth + 'px'"
+                    :rules="rules"
+                    @keyup.enter="baTable.onSubmit(formRef)"
+                >
+                    <FormItem
+                        type="remoteSelect"
+                        prop="user_asset_id"
+                        :label="t('mall.pointsLog.user_asset')"
+                        v-model="baTable.form.items!.user_asset_id"
+                        :placeholder="t('Click select')"
+                        :input-attr="{
+                            pk: 'id',
+                            field: 'username',
+                            remoteUrl: '/admin/mall.UserAsset/select',
+                            onChange: getUserAssetInfo,
+                        }"
+                    />
+                    <el-form-item :label="t('mall.pointsLog.playx_user_id')">
+                        <el-input v-model="state.userAsset.playx_user_id" disabled />
+                    </el-form-item>
+                    <el-form-item :label="t('mall.pointsLog.username')">
+                        <el-input v-model="state.userAsset.username" disabled />
+                    </el-form-item>
+                    <el-form-item :label="t('mall.pointsLog.current_points')">
+                        <el-input v-model="state.userAsset.available_points" disabled />
+                    </el-form-item>
+                    <el-form-item prop="score_value" :label="t('mall.pointsLog.score_value')">
+                        <el-input-number
+                            v-model="baTable.form.items!.score_value"
+                            :precision="0"
+                            :step="1"
+                            controls-position="right"
+                            style="width: 100%"
+                            @change="changeScore"
+                        />
+                    </el-form-item>
+                    <el-form-item :label="t('mall.pointsLog.after')">
+                        <el-input v-model="state.after" disabled />
+                    </el-form-item>
+                    <el-form-item :label="t('mall.pointsLog.memo')">
+                        <el-input v-model="state.memo" type="textarea" disabled />
+                    </el-form-item>
+                </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" type="primary" @click="baTable.onSubmit(formRef)">
+                    {{ t('Save') }}
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import type { FormItemRule } from 'element-plus'
+import { inject, reactive, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getUserAsset } from '/@/api/backend/mall/pointsLog'
+import FormItem from '/@/components/formItem/index.vue'
+import { useConfig } from '/@/stores/config'
+import type baTableClass from '/@/utils/baTable'
+import { buildValidatorData } from '/@/utils/validate'
+
+interface UserAssetInfo {
+    id?: number
+    username?: string
+    playx_user_id?: string
+    available_points?: number
+}
+
+const config = useConfig()
+const { t } = useI18n()
+const injectedBaTable = inject<baTableClass>('baTable')
+if (!injectedBaTable) {
+    throw new Error('baTable is not provided')
+}
+const baTable = injectedBaTable
+const formRef = useTemplateRef('formRef')
+
+const state = reactive<{
+    userAsset: UserAssetInfo
+    after: number
+    memo: string
+}>({
+    userAsset: {},
+    after: 0,
+    memo: '',
+})
+
+const validateScoreValue: FormItemRule['validator'] = (_rule, value, callback) => {
+    if (typeof value !== 'number' || !Number.isInteger(value) || value === 0) {
+        callback(new Error(t('mall.pointsLog.non_zero_integer_required')))
+        return
+    }
+    if ((state.userAsset.available_points ?? 0) + value < 0) {
+        callback(new Error(t('mall.pointsLog.insufficient_available_points')))
+        return
+    }
+    callback()
+}
+
+const rules: Partial<Record<string, FormItemRule[]>> = reactive({
+    user_asset_id: [buildValidatorData({ name: 'required', title: t('mall.pointsLog.user_asset') })],
+    score_value: [
+        {
+            validator: validateScoreValue,
+            trigger: 'blur',
+        },
+    ],
+})
+
+const changeScore = (value: number | undefined) => {
+    const scoreValue = value ?? 0
+    const availablePoints = state.userAsset.available_points ?? 0
+    state.after = availablePoints + scoreValue
+    if (scoreValue > 0) {
+        state.memo = t('mall.pointsLog.admin_add_memo', { value: Math.abs(scoreValue) })
+    } else if (scoreValue < 0) {
+        state.memo = t('mall.pointsLog.admin_deduct_memo', { value: Math.abs(scoreValue) })
+    } else {
+        state.memo = ''
+    }
+}
+
+const getUserAssetInfo = () => {
+    const userAssetId = baTable.form.items!.user_asset_id
+    if ((typeof userAssetId !== 'string' && typeof userAssetId !== 'number') || userAssetId === '') {
+        state.userAsset = {}
+        state.after = 0
+        state.memo = ''
+        return
+    }
+
+    getUserAsset(userAssetId).then((response) => {
+        state.userAsset = response.data.userAsset
+        changeScore(baTable.form.items!.score_value)
+    })
+}
+
+watch(
+    () => baTable.form.operate,
+    (operate) => {
+        if (operate == 'Add') {
+            getUserAssetInfo()
+        }
+    }
+)
+</script>
+
+<style scoped lang="scss"></style>

web/src/views/backend/mall/userAsset/popupForm.vue

@@ -27,7 +27,13 @@
                     :label-width="baTable.form.labelWidth + 'px'"
                     :rules="rules"
                 >
-                    <FormItem :label="t('mall.userAsset.id')" type="number" v-model="baTable.form.items!.id" prop="id" :input-attr="{ disabled: true }" />
+                    <FormItem
+                        :label="t('mall.userAsset.id')"
+                        type="number"
+                        v-model="baTable.form.items!.id"
+                        prop="id"
+                        :input-attr="{ disabled: true }"
+                    />
                     <FormItem
                         :label="t('mall.userAsset.playx_user_id')"
                         type="string"
@@ -54,17 +60,15 @@
                         type="number"
                         v-model="baTable.form.items!.locked_points"
                         prop="locked_points"
-                        :input-attr="{ step: 1, min: 0 }"
-                        :placeholder="t('Please input field', { field: t('mall.userAsset.locked_points') })"
-                    />
-                    <FormItem
-                        :label="t('mall.userAsset.available_points')"
-                        type="number"
-                        v-model="baTable.form.items!.available_points"
-                        prop="available_points"
-                        :input-attr="{ step: 1, min: 0 }"
-                        :placeholder="t('Please input field', { field: t('mall.userAsset.available_points') })"
+                        :input-attr="{ disabled: true }"
                     />
+                    <el-form-item :label="t('mall.userAsset.available_points')">
+                        <el-input v-model="baTable.form.items!.available_points" readonly>
+                            <template #append>
+                                <el-button @click="changeAvailablePoints">{{ t('mall.userAsset.adjust_available_points') }}</el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
                     <FormItem
                         :label="t('mall.userAsset.today_limit')"
                         type="number"
@@ -78,8 +82,7 @@
                         type="number"
                         v-model="baTable.form.items!.today_claimed"
                         prop="today_claimed"
-                        :input-attr="{ step: 1, min: 0 }"
-                        :placeholder="t('Please input field', { field: t('mall.userAsset.today_claimed') })"
+                        :input-attr="{ disabled: true }"
                     />
                 </el-form>
             </div>
@@ -104,8 +107,10 @@ import baTableClass from '/@/utils/baTable'
 import FormItem from '/@/components/formItem/index.vue'
 import type { FormItemRule } from 'element-plus'
 import { buildValidatorData } from '/@/utils/validate'
+import { useRouter } from 'vue-router'
 
 const config = useConfig()
+const router = useRouter()
 const formRef = useTemplateRef('formRef')
 const baTable = inject('baTable') as baTableClass
 const { t } = useI18n()
@@ -118,7 +123,17 @@ const rules: Partial<Record<string, FormItemRule[]>> = reactive({
     today_limit: [buildValidatorData({ name: 'required', title: t('mall.userAsset.today_limit') })],
     today_claimed: [buildValidatorData({ name: 'required', title: t('mall.userAsset.today_claimed') })],
 })
+
+const changeAvailablePoints = () => {
+    const userAssetId = baTable.form.items!.id
+    baTable.toggleForm()
+    router.push({
+        name: 'mall/pointsLog',
+        query: {
+            user_asset_id: userAssetId,
+        },
+    })
+}
 </script>
 
 <style scoped lang="scss"></style>
-