mojiahui/webman-buildadmin-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化接口以及后台页面样式

Browse Source
This commit is contained in:
zhenhui
2026-03-31 15:37:32 +08:00
parent 2868899253
commit 520e950dc5
28 changed files with 1241 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lang/backend/en/mall/address.ts
View File

@@ -2,10 +2,10 @@ export default {
id: 'id',
playx_user_asset_id: 'PlayX user asset',
playxuserasset__username: 'username',
receiver_name: 'receiver name',
phone: 'phone',
region: 'region',
detail_address: 'detail_address',
address: 'address',
default_setting: 'Default address',
'default_setting 0': '--',
'default_setting 1': 'YES',

1
web/src/lang/backend/en/mall/order.ts
View File

@@ -30,6 +30,7 @@ export default {
receiver_name: 'receiver_name',
receiver_phone: 'receiver_phone',
receiver_address: 'receiver_address',
mall_address_id: 'mall_address_id',
create_time: 'create_time',
update_time: 'update_time',
'quick Search Fields': 'ID',

2
web/src/lang/backend/zh-cn/mall/address.ts
View File

@@ -2,10 +2,10 @@ export default {
id: 'ID',
playx_user_asset_id: '用户资产',
playxuserasset__username: '用户名',
receiver_name: '收货人',
phone: '电话',
region: '地区',
detail_address: '详细地址',
address: '地址',
default_setting: '默认地址',
'default_setting 0': '--',
'default_setting 1': '是',

2
web/src/lang/backend/zh-cn/mall/claimLog.ts
View File

@@ -1,6 +1,6 @@
export default {
id: 'ID',
claim_request_id: '领取幂等键',
claim_request_id: '领取订单号',
user_id: '用户ID',
claimed_amount: '领取积分',
create_time: '创建时间',

3
web/src/lang/backend/zh-cn/mall/order.ts
View File

@@ -15,7 +15,7 @@ export default {
points_cost: '消耗积分',
amount: '现金面值',
multiplier: '流水倍数',
external_transaction_id: '外部交易幂等键',
external_transaction_id: '订单号',
playx_transaction_id: 'PlayX流水号',
grant_status: '发放子状态',
'grant_status NOT_SENT': '未发送',
@@ -30,6 +30,7 @@ export default {
receiver_name: '收货人',
receiver_phone: '收货电话',
receiver_address: '收货地址',
mall_address_id: '地址ID',
create_time: '创建时间',
update_time: '修改时间',
'quick Search Fields': 'ID',

2
web/src/lang/backend/zh-cn/mall/playxClaimLog.ts
View File

@@ -1,6 +1,6 @@
export default {
id: 'ID',
claim_request_id: '领取幂等键',
claim_request_id: '领取订单号',
user_id: '用户ID',
claimed_amount: '领取积分',
create_time: '创建时间',

2
web/src/lang/backend/zh-cn/mall/playxOrder.ts
View File

@@ -15,7 +15,7 @@ export default {
points_cost: '消耗积分',
amount: '现金面值',
multiplier: '流水倍数',
external_transaction_id: '外部交易幂等键',
external_transaction_id: '订单号',
playx_transaction_id: 'PlayX流水号',
grant_status: '发放子状态',
'grant_status NOT_SENT': '未发送',

36
web/src/views/backend/mall/address/index.vue
View File

@@ -37,6 +37,17 @@ const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])
const hasChinese = (s: string) => /[\u4e00-\u9fa5]/.test(s)
const formatRegion = (raw: string) => {
const s = raw.toString().trim()
if (!s) return ''
if (hasChinese(s)) {
return s.replace(/[,，\s]+/g, '，')
}
return s.replace(/[,，\s]+/g, ',')
}
/**
* baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
*/
@@ -53,10 +64,19 @@ const baTable = new baTableClass(
align: 'center',
minWidth: 120,
operatorPlaceholder: t('Fuzzy query'),
render: 'tags',
showOverflowTooltip: true,
operator: 'LIKE',
comSearchRender: 'string',
},
{
label: t('mall.address.receiver_name'),
prop: 'receiver_name',
align: 'center',
minWidth: 100,
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.address.phone'),
prop: 'phone',
@@ -65,7 +85,17 @@ const baTable = new baTableClass(
sortable: false,
operator: 'LIKE',
},
{ label: t('mall.address.region'), prop: 'region_text', align: 'center', operator: false },
{
label: t('mall.address.region'),
prop: 'region_text',
align: 'center',
operator: false,
showOverflowTooltip: true,
formatter: (row: TableRow, _column: TableColumn, cellValue: string) => {
const raw = (cellValue || row.region || '').toString()
return formatRegion(raw)
},
},
{
label: t('mall.address.detail_address'),
prop: 'detail_address',
@@ -107,7 +137,7 @@ const baTable = new baTableClass(
width: 160,
timeFormat: 'yyyy-mm-dd hh:MM:ss',
},
{ label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
{ label: t('Operate'), align: 'center', width: 80, render: 'buttons', buttons: optButtons, operator: false, fixed: 'right' },
],
dblClickNotEditColumn: [undefined, 'default_setting'],
},

17
web/src/views/backend/mall/address/popupForm.vue
View File

@@ -37,6 +37,13 @@
:input-attr="{ pk: 'mall_user_asset.id', field: 'username', remoteUrl: '/admin/mall.UserAsset/select' }"
:placeholder="t('Please select field', { field: t('mall.address.playx_user_asset_id') })"
/>
<FormItem
:label="t('mall.address.receiver_name')"
type="string"
v-model="baTable.form.items!.receiver_name"
prop="receiver_name"
:placeholder="t('Please input field', { field: t('mall.address.receiver_name') })"
/>
<FormItem
:label="t('mall.address.phone')"
type="string"
@@ -58,16 +65,6 @@
prop="detail_address"
:placeholder="t('Please input field', { field: t('mall.address.detail_address') })"
/>
<FormItem
:label="t('mall.address.address')"
type="textarea"
v-model="baTable.form.items!.address"
prop="address"
:input-attr="{ rows: 3 }"
@keyup.enter.stop=""
@keyup.ctrl.enter="baTable.onSubmit(formRef)"
:placeholder="t('Please input field', { field: t('mall.address.address') })"
/>
<FormItem
:label="t('mall.address.default_setting')"
type="switch"

76
web/src/views/backend/mall/dailyPush/index.vue
View File

@@ -33,14 +33,73 @@ const baTable = new baTableClass(
column: [
{ type: 'selection', align: 'center', operator: false },
{ label: t('mall.dailyPush.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
{ label: t('mall.dailyPush.user_id'), prop: 'user_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.dailyPush.date'), prop: 'date', align: 'center', render: 'date', operator: 'RANGE', comSearchRender: 'date', sortable: 'custom', width: 120, operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.dailyPush.username'), prop: 'username', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.dailyPush.yesterday_win_loss_net'), prop: 'yesterday_win_loss_net', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.dailyPush.yesterday_total_deposit'), prop: 'yesterday_total_deposit', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.dailyPush.lifetime_total_deposit'), prop: 'lifetime_total_deposit', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.dailyPush.lifetime_total_withdraw'), prop: 'lifetime_total_withdraw', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.dailyPush.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{
label: t('mall.dailyPush.user_id'),
prop: 'user_id',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.dailyPush.date'),
prop: 'date',
align: 'center',
render: 'date',
operator: 'RANGE',
comSearchRender: 'date',
sortable: 'custom',
width: 120,
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.dailyPush.username'),
prop: 'username',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.dailyPush.yesterday_win_loss_net'),
prop: 'yesterday_win_loss_net',
align: 'center',
operator: 'RANGE',
sortable: false,
},
{
label: t('mall.dailyPush.yesterday_total_deposit'),
prop: 'yesterday_total_deposit',
align: 'center',
operator: 'RANGE',
sortable: false,
},
{
label: t('mall.dailyPush.lifetime_total_deposit'),
prop: 'lifetime_total_deposit',
align: 'center',
operator: 'RANGE',
sortable: false,
},
{
label: t('mall.dailyPush.lifetime_total_withdraw'),
prop: 'lifetime_total_withdraw',
align: 'center',
minWidth: 95,
operator: 'RANGE',
sortable: false,
},
{
label: t('mall.dailyPush.create_time'),
prop: 'create_time',
align: 'center',
render: 'datetime',
operator: 'RANGE',
comSearchRender: 'datetime',
sortable: 'custom',
width: 160,
timeFormat: 'yyyy-mm-dd hh:MM:ss',
},
],
dblClickNotEditColumn: [undefined],
},
@@ -62,4 +121,3 @@ onMounted(() => {
</script>
<style scoped lang="scss"></style>

5
web/src/views/backend/mall/item/index.vue
View File

@@ -52,6 +52,8 @@ const baTable = new baTableClass(
label: t('mall.item.description'),
prop: 'description',
align: 'center',
minWidth: 80,
// showOverflowTooltip: true,
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
@@ -60,6 +62,7 @@ const baTable = new baTableClass(
label: t('mall.item.score'),
prop: 'score',
align: 'center',
minWidth: 90,
sortable: false,
operator: 'RANGE',
},
@@ -173,7 +176,7 @@ const baTable = new baTableClass(
{
label: t('Operate'),
align: 'center',
width: 100,
width: 80,
render: 'buttons',
buttons: optButtons,
operator: false,

244
web/src/views/backend/mall/order/index.vue
View File

@@ -3,11 +3,13 @@
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
<TableHeader
:buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
:quick-search-placeholder="t('Quick search placeholder', { fields: t('mall.order.quick Search Fields') })"
></TableHeader>
<Table ref="tableRef"></Table>
<PopupForm />
</div>
</template>
@@ -19,7 +21,8 @@ import createAxios from '/@/utils/axios'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { ElMessageBox } from 'element-plus'
import PopupForm from './popupForm.vue'
import { defaultOptButtons } from '/@/components/table'
defineOptions({
name: 'mall/order',
@@ -27,6 +30,17 @@ defineOptions({
const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete']).map((btn) =>
btn.name === 'edit'
? {
...btn,
title: '审核',
type: 'primary',
class: 'table-row-edit',
icon: 'fa fa-check',
}
: btn
)
const baTable = new baTableClass(
new baTableApi('/admin/mall.Order/'),
@@ -35,11 +49,21 @@ const baTable = new baTableClass(
column: [
{ type: 'selection', align: 'center', operator: false },
{ label: t('mall.order.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
{ label: t('mall.order.user_id'), prop: 'user_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{
label: t('mall.order.user_id'),
prop: 'user_id',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.order.type'),
prop: 'type',
align: 'center',
effect: 'light',
custom: { BONUS: 'success', PHYSICAL: 'primary', WITHDRAW: 'info' },
minWidth: 140,
operator: 'eq',
sortable: false,
render: 'tag',
@@ -53,6 +77,9 @@ const baTable = new baTableClass(
label: t('mall.order.status'),
prop: 'status',
align: 'center',
effect: 'dark',
custom: { PENDING: 'success', COMPLETED: 'primary', SHIPPED: 'info', REJECTED: 'loading' },
minWidth: 160,
operator: 'eq',
sortable: false,
render: 'tag',
@@ -64,12 +91,36 @@ const baTable = new baTableClass(
},
},
{ label: t('mall.order.mall_item_id'), prop: 'mall_item_id', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.order.mallitem__title'), prop: 'mallItem.title', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.order.points_cost'), prop: 'points_cost', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.order.amount'), prop: 'amount', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.order.multiplier'), prop: 'multiplier', align: 'center', operator: 'eq', sortable: false },
{ label: t('mall.order.external_transaction_id'), prop: 'external_transaction_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.order.playx_transaction_id'), prop: 'playx_transaction_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{
label: t('mall.order.mallitem__title'),
prop: 'mallItem.title',
align: 'center',
minWidth: 90,
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{ label: t('mall.order.points_cost'), prop: 'points_cost', align: 'center', minWidth: 90, operator: 'RANGE', sortable: false },
{ label: t('mall.order.amount'), prop: 'amount', align: 'center', minWidth: 90, operator: 'RANGE', sortable: false },
{ label: t('mall.order.multiplier'), prop: 'multiplier', align: 'center', minWidth: 90, operator: 'eq', sortable: false },
{
label: t('mall.order.external_transaction_id'),
prop: 'external_transaction_id',
align: 'center',
minWidth: 80,
showOverflowTooltip: true,
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.order.playx_transaction_id'),
prop: 'playx_transaction_id',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.order.grant_status'),
prop: 'grant_status',
@@ -85,21 +136,100 @@ const baTable = new baTableClass(
FAILED_FINAL: t('mall.order.grant_status FAILED_FINAL'),
},
},
{ label: t('mall.order.fail_reason'), prop: 'fail_reason', align: 'center', showOverflowTooltip: true, operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.order.reject_reason'), prop: 'reject_reason', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.order.shipping_company'), prop: 'shipping_company', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.order.shipping_no'), prop: 'shipping_no', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.order.receiver_name'), prop: 'receiver_name', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.order.receiver_phone'), prop: 'receiver_phone', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.order.receiver_address'), prop: 'receiver_address', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.order.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{ label: t('mall.order.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{
label: t('mall.order.fail_reason'),
prop: 'fail_reason',
align: 'center',
showOverflowTooltip: true,
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.order.reject_reason'),
prop: 'reject_reason',
align: 'center',
showOverflowTooltip: true,
sortable: false,
operator: 'LIKE',
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.order.shipping_company'),
prop: 'shipping_company',
align: 'center',
showOverflowTooltip: true,
sortable: false,
operator: 'LIKE',
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.order.shipping_no'),
prop: 'shipping_no',
align: 'center',
showOverflowTooltip: true,
sortable: false,
operator: 'LIKE',
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.order.receiver_name'),
prop: 'receiver_name',
align: 'center',
showOverflowTooltip: true,
sortable: false,
operator: 'LIKE',
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.order.receiver_phone'),
prop: 'receiver_phone',
align: 'center',
showOverflowTooltip: true,
sortable: false,
operator: 'LIKE',
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.order.receiver_address'),
prop: 'receiver_address',
align: 'center',
showOverflowTooltip: true,
sortable: false,
operator: 'LIKE',
operatorPlaceholder: t('Fuzzy query'),
},
{ label: t('mall.order.mall_address_id'), prop: 'mall_address_id', align: 'center', width: 100, operator: 'eq', sortable: false },
{
label: t('mall.order.create_time'),
prop: 'create_time',
align: 'center',
render: 'datetime',
operator: 'RANGE',
comSearchRender: 'datetime',
sortable: 'custom',
width: 160,
timeFormat: 'yyyy-mm-dd hh:MM:ss',
},
{
label: t('mall.order.update_time'),
prop: 'update_time',
align: 'center',
render: 'datetime',
operator: 'RANGE',
comSearchRender: 'datetime',
sortable: 'custom',
width: 160,
timeFormat: 'yyyy-mm-dd hh:MM:ss',
},
{
label: t('Operate'),
align: 'center',
width: 220,
width: 80,
fixed: 'right',
render: 'buttons',
buttons: [
...optButtons,
{
render: 'confirmButton',
name: 'retry',
@@ -131,81 +261,6 @@ const baTable = new baTableClass(
await baTable.getData()
},
},
{
render: 'basicButton',
name: 'ship',
title: 'Ship',
text: '发货',
type: 'success',
icon: '',
display: (row: TableRow) => row.type === 'PHYSICAL' && row.status === 'PENDING',
click: async (row: TableRow) => {
try {
const shippingNoRes = await ElMessageBox.prompt('请输入物流单号', '发货', {
confirmButtonText: '确认',
cancelButtonText: '取消',
})
const shippingCompanyRes = await ElMessageBox.prompt('请输入物流公司', '发货', {
confirmButtonText: '确认',
cancelButtonText: '取消',
})
const shippingNo = shippingNoRes.value
const shippingCompany = shippingCompanyRes.value
await createAxios(
{
url: '/admin/mall.Order/ship',
method: 'post',
data: {
id: row.id,
shipping_company: shippingCompany,
shipping_no: shippingNo,
},
},
{
showSuccessMessage: true,
}
)
await baTable.getData()
} catch {
// 用户取消弹窗：不做任何提示，避免控制台报错
}
},
},
{
render: 'basicButton',
name: 'reject',
title: 'Reject',
text: '驳回',
type: 'danger',
icon: '',
display: (row: TableRow) => row.type === 'PHYSICAL' && row.status === 'PENDING',
click: async (row: TableRow) => {
try {
const res = await ElMessageBox.prompt('请输入驳回原因', '驳回', {
confirmButtonText: '确认',
cancelButtonText: '取消',
})
await createAxios(
{
url: '/admin/mall.Order/reject',
method: 'post',
data: {
id: row.id,
reject_reason: res.value,
},
},
{
showSuccessMessage: true,
}
)
await baTable.getData()
} catch {
// 用户取消：不提示
}
},
},
],
},
],
@@ -229,4 +284,3 @@ onMounted(() => {
</script>
<style scoped lang="scss"></style>

290
web/src/views/backend/mall/order/popupForm.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<el-dialog
class="ba-operate-dialog"
:close-on-click-modal="false"
:model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
@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 v-loading="baTable.form.loading" 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"
@submit.prevent=""
@keyup.enter="baTable.onSubmit(formRef)"
:model="baTable.form.items"
:label-position="config.layout.shrink ? 'top' : 'right'"
:label-width="baTable.form.labelWidth + 'px'"
:rules="rules"
>
<!-- PENDING：两页审核流程（PHYSICAL 显示收货信息，其它类型只显示基本信息） -->
<template v-if="usePagedActions && page === 1">
<FormItem :label="t('mall.order.type')" type="string" v-model="baTable.form.items!.type" prop="type" :input-attr="{ disabled: true }" />
<FormItem :label="t('mall.order.status')" type="string" v-model="baTable.form.items!.status" prop="status" :input-attr="{ disabled: true }" />
<template v-if="isPhysical">
<FormItem
:label="t('mall.order.receiver_name')"
type="string"
v-model="baTable.form.items!.receiver_name"
prop="receiver_name"
:input-attr="{ disabled: true }"
/>
<FormItem
:label="t('mall.order.receiver_phone')"
type="string"
v-model="baTable.form.items!.receiver_phone"
prop="receiver_phone"
:input-attr="{ disabled: true }"
/>
<FormItem
:label="t('mall.order.receiver_address')"
type="string"
v-model="baTable.form.items!.receiver_address"
prop="receiver_address"
:input-attr="{ disabled: true }"
/>
</template>
</template>
<template v-else-if="usePagedActions">
<template v-if="action === 'approveShip'">
<FormItem
:label="t('mall.order.shipping_company')"
type="string"
v-model="baTable.form.items!.shipping_company"
prop="shipping_company"
:placeholder="t('Please input field', { field: t('mall.order.shipping_company') })"
/>
<FormItem
:label="t('mall.order.shipping_no')"
type="string"
v-model="baTable.form.items!.shipping_no"
prop="shipping_no"
:placeholder="t('Please input field', { field: t('mall.order.shipping_no') })"
/>
</template>
<template v-else-if="action === 'reject'">
<FormItem
:label="t('mall.order.reject_reason')"
type="textarea"
v-model="baTable.form.items!.reject_reason"
prop="reject_reason"
:input-attr="{ rows: 3 }"
@keyup.enter.stop=""
:placeholder="t('Please input field', { field: t('mall.order.reject_reason') })"
/>
</template>
</template>
<!-- 其它订单：保留常规可编辑表单 + 保存 -->
<template v-else>
<FormItem :label="t('mall.order.type')" type="string" v-model="baTable.form.items!.type" prop="type" :input-attr="{ disabled: true }" />
<FormItem
:label="t('mall.order.status')"
type="select"
v-model="baTable.form.items!.status"
prop="status"
:input-attr="{ content: { PENDING: t('mall.order.status PENDING'), COMPLETED: t('mall.order.status COMPLETED'), SHIPPED: t('mall.order.status SHIPPED'), REJECTED: t('mall.order.status REJECTED') } }"
:placeholder="t('Please select field', { field: t('mall.order.status') })"
/>
<FormItem
:label="t('mall.order.shipping_company')"
type="string"
v-model="baTable.form.items!.shipping_company"
prop="shipping_company"
:placeholder="t('Please input field', { field: t('mall.order.shipping_company') })"
/>
<FormItem
:label="t('mall.order.shipping_no')"
type="string"
v-model="baTable.form.items!.shipping_no"
prop="shipping_no"
:placeholder="t('Please input field', { field: t('mall.order.shipping_no') })"
/>
<FormItem
:label="t('mall.order.reject_reason')"
type="textarea"
v-model="baTable.form.items!.reject_reason"
prop="reject_reason"
:input-attr="{ rows: 3 }"
@keyup.enter.stop=""
:placeholder="t('Please input field', { field: t('mall.order.reject_reason') })"
/>
</template>
</el-form>
</div>
</el-scrollbar>
<template #footer>
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
<el-button @click="onCancel">{{ t('Cancel') }}</el-button>
<template v-if="usePagedActions && page === 1">
<el-button v-if="canApprove" @click="onApprove" type="success">审核通过</el-button>
<el-button @click="goReject" type="danger">驳回</el-button>
</template>
<template v-else-if="usePagedActions">
<el-button @click="backToFirst">返回</el-button>
<el-button
v-if="action === 'approveShip'"
v-blur
:loading="submitting"
@click="submitShip"
type="success"
>
提交发货
</el-button>
<el-button v-if="action === 'reject'" v-blur :loading="submitting" @click="submitReject" type="danger">提交驳回</el-button>
</template>
<template v-else>
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
{{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
</el-button>
</template>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { computed, inject, reactive, ref, useTemplateRef, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { FormItemRule } from 'element-plus'
import { ElMessage } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import createAxios from '/@/utils/axios'
const config = useConfig()
const formRef = useTemplateRef('formRef')
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()
const isEdit = computed(() => baTable.form.operate === 'Edit')
const isPending = computed(() => isEdit.value && baTable.form.items?.status === 'PENDING')
const isPhysical = computed(() => baTable.form.items?.type === 'PHYSICAL')
const canApprove = computed(() => isPending.value)
const usePagedActions = computed(() => isPending.value)
const page = ref<1 | 2>(1)
const action = ref<'approveShip' | 'reject' | null>(null)
const submitting = ref(false)
const resetPager = () => {
page.value = 1
action.value = null
submitting.value = false
}
watch(
() => baTable.form.operate,
() => {
resetPager()
}
)
const onCancel = () => {
resetPager()
baTable.toggleForm()
}
const backToFirst = () => {
page.value = 1
action.value = null
}
const onApprove = async () => {
if (!isPending.value) {
return
}
if (isPhysical.value) {
page.value = 2
action.value = 'approveShip'
return
}
const id = baTable.form.items?.id
if (!id) {
return
}
submitting.value = true
try {
await createAxios({ url: '/admin/mall.Order/approve', method: 'post', data: { id } }, { showSuccessMessage: true })
resetPager()
baTable.toggleForm()
await baTable.getData()
} finally {
submitting.value = false
}
}
const goReject = () => {
page.value = 2
action.value = 'reject'
}
const submitShip = async () => {
const id = baTable.form.items?.id
const shippingCompany = (baTable.form.items?.shipping_company || '').toString().trim()
const shippingNo = (baTable.form.items?.shipping_no || '').toString().trim()
if (!id || shippingCompany === '' || shippingNo === '') {
ElMessage.error('请填写物流公司与物流单号')
return
}
submitting.value = true
try {
await createAxios(
{ url: '/admin/mall.Order/ship', method: 'post', data: { id, shipping_company: shippingCompany, shipping_no: shippingNo } },
{ showSuccessMessage: true }
)
resetPager()
baTable.toggleForm()
await baTable.getData()
} finally {
submitting.value = false
}
}
const submitReject = async () => {
const id = baTable.form.items?.id
const rejectReason = (baTable.form.items?.reject_reason || '').toString().trim()
if (!id || rejectReason === '') {
ElMessage.error('请填写驳回原因')
return
}
submitting.value = true
try {
await createAxios(
{ url: '/admin/mall.Order/reject', method: 'post', data: { id, reject_reason: rejectReason } },
{ showSuccessMessage: true }
)
resetPager()
baTable.toggleForm()
await baTable.getData()
} finally {
submitting.value = false
}
}
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
shipping_company: [buildValidatorData({ name: 'required', title: t('mall.order.shipping_company') })],
shipping_no: [buildValidatorData({ name: 'required', title: t('mall.order.shipping_no') })],
reject_reason: [buildValidatorData({ name: 'required', title: t('mall.order.reject_reason') })],
})
</script>
<style scoped lang="scss"></style>

72
web/src/views/backend/mall/userAsset/index.vue
View File

@@ -3,18 +3,22 @@
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
<TableHeader
:buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
:buttons="['refresh', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
:quick-search-placeholder="t('Quick search placeholder', { fields: t('mall.userAsset.quick Search Fields') })"
></TableHeader>
<Table ref="tableRef"></Table>
<PopupForm />
</div>
</template>
<script setup lang="ts">
import { onMounted, provide, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
@@ -25,6 +29,7 @@ defineOptions({
const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])
const baTable = new baTableClass(
new baTableApi('/admin/mall.UserAsset/'),
@@ -33,16 +38,68 @@ const baTable = new baTableClass(
column: [
{ type: 'selection', align: 'center', operator: false },
{ label: t('mall.userAsset.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
{ label: t('mall.userAsset.username'), prop: 'username', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.userAsset.phone'), prop: 'phone', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{ label: t('mall.userAsset.playx_user_id'), prop: 'playx_user_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
{
label: t('mall.userAsset.username'),
prop: 'username',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.userAsset.phone'),
prop: 'phone',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{
label: t('mall.userAsset.playx_user_id'),
prop: 'playx_user_id',
align: 'center',
operatorPlaceholder: t('Fuzzy query'),
sortable: false,
operator: 'LIKE',
},
{ label: t('mall.userAsset.locked_points'), prop: 'locked_points', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.userAsset.available_points'), prop: 'available_points', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.userAsset.today_limit'), prop: 'today_limit', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.userAsset.today_claimed'), prop: 'today_claimed', align: 'center', operator: 'RANGE', sortable: false },
{ label: t('mall.userAsset.today_limit_date'), prop: 'today_limit_date', align: 'center', render: 'date', operator: 'RANGE', comSearchRender: 'date', sortable: 'custom', width: 120, operatorPlaceholder: t('Fuzzy query') },
{ label: t('mall.userAsset.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{ label: t('mall.userAsset.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
{
label: t('mall.userAsset.today_limit_date'),
prop: 'today_limit_date',
align: 'center',
render: 'date',
operator: 'RANGE',
comSearchRender: 'date',
sortable: 'custom',
width: 120,
operatorPlaceholder: t('Fuzzy query'),
},
{
label: t('mall.userAsset.create_time'),
prop: 'create_time',
align: 'center',
render: 'datetime',
operator: 'RANGE',
comSearchRender: 'datetime',
sortable: 'custom',
width: 160,
timeFormat: 'yyyy-mm-dd hh:MM:ss',
},
{
label: t('mall.userAsset.update_time'),
prop: 'update_time',
align: 'center',
render: 'datetime',
operator: 'RANGE',
comSearchRender: 'datetime',
sortable: 'custom',
width: 160,
timeFormat: 'yyyy-mm-dd hh:MM:ss',
},
{ label: t('Operate'), align: 'center', fixed: 'right', width: 80, render: 'buttons', buttons: optButtons, operator: false },
],
dblClickNotEditColumn: [undefined],
},
@@ -64,4 +121,3 @@ onMounted(() => {
</script>
<style scoped lang="scss"></style>

124
web/src/views/backend/mall/userAsset/popupForm.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<el-dialog
class="ba-operate-dialog"
:close-on-click-modal="false"
:model-value="['Edit'].includes(baTable.form.operate!)"
@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 v-loading="baTable.form.loading" 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"
@submit.prevent=""
@keyup.enter="baTable.onSubmit(formRef)"
:model="baTable.form.items"
:label-position="config.layout.shrink ? 'top' : 'right'"
: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.playx_user_id')"
type="string"
v-model="baTable.form.items!.playx_user_id"
prop="playx_user_id"
:input-attr="{ disabled: true }"
/>
<FormItem
:label="t('mall.userAsset.username')"
type="string"
v-model="baTable.form.items!.username"
prop="username"
:placeholder="t('Please input field', { field: t('mall.userAsset.username') })"
/>
<FormItem
:label="t('mall.userAsset.phone')"
type="string"
v-model="baTable.form.items!.phone"
prop="phone"
:placeholder="t('Please input field', { field: t('mall.userAsset.phone') })"
/>
<FormItem
:label="t('mall.userAsset.locked_points')"
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') })"
/>
<FormItem
:label="t('mall.userAsset.today_limit')"
type="number"
v-model="baTable.form.items!.today_limit"
prop="today_limit"
:input-attr="{ step: 1, min: 0 }"
:placeholder="t('Please input field', { field: t('mall.userAsset.today_limit') })"
/>
<FormItem
:label="t('mall.userAsset.today_claimed')"
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') })"
/>
</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">
{{ t('Save') }}
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { inject, reactive, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
const config = useConfig()
const formRef = useTemplateRef('formRef')
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
username: [buildValidatorData({ name: 'required', title: t('mall.userAsset.username') })],
phone: [buildValidatorData({ name: 'required', title: t('mall.userAsset.phone') })],
locked_points: [buildValidatorData({ name: 'required', title: t('mall.userAsset.locked_points') })],
available_points: [buildValidatorData({ name: 'required', title: t('mall.userAsset.available_points') })],
today_limit: [buildValidatorData({ name: 'required', title: t('mall.userAsset.today_limit') })],
today_claimed: [buildValidatorData({ name: 'required', title: t('mall.userAsset.today_claimed') })],
})
</script>
<style scoped lang="scss"></style>