332 lines
12 KiB
Vue
332 lines
12 KiB
Vue
<template>
|
|
<div class="default-main ba-table-box">
|
|
<MallPageIntro page-key="order" />
|
|
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
|
|
|
|
<TableHeader
|
|
: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>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, provide, useTemplateRef } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { baTableApi } from '/@/api/common'
|
|
import createAxios from '/@/utils/axios'
|
|
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'
|
|
import { defaultOptButtons } from '/@/components/table'
|
|
|
|
defineOptions({
|
|
name: 'mall/order',
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const tableRef = useTemplateRef('tableRef')
|
|
|
|
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete']).map((btn) =>
|
|
btn.name === 'edit'
|
|
? {
|
|
...btn,
|
|
title: t('mall.order.approve'),
|
|
type: 'primary',
|
|
class: 'table-row-edit',
|
|
icon: 'fa fa-check',
|
|
display: (row: TableRow) => ['PHYSICAL', 'WITHDRAW'].includes(String(row.type)) && row.status === 'PENDING',
|
|
}
|
|
: btn
|
|
)
|
|
|
|
const baTable = new baTableClass(
|
|
new baTableApi('/admin/mall.Order/'),
|
|
{
|
|
pk: 'id',
|
|
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',
|
|
formatter: (row: TableRow, _column: TableColumn, cellValue: string) => {
|
|
const r = row as Record<string, unknown>
|
|
const rel = r.mallUserAsset ?? r.mall_user_asset
|
|
if (rel && typeof rel === 'object' && 'username' in rel) {
|
|
const u = (rel as { username?: unknown }).username
|
|
if (typeof u === 'string' && u.trim() !== '') {
|
|
return u
|
|
}
|
|
}
|
|
return (cellValue ?? row.user_id ?? '').toString()
|
|
},
|
|
},
|
|
{
|
|
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',
|
|
replaceValue: {
|
|
BONUS: t('mall.order.type BONUS'),
|
|
PHYSICAL: t('mall.order.type PHYSICAL'),
|
|
WITHDRAW: t('mall.order.type WITHDRAW'),
|
|
},
|
|
},
|
|
{
|
|
label: t('mall.order.status'),
|
|
prop: 'status',
|
|
align: 'center',
|
|
effect: 'dark',
|
|
custom: { PENDING: 'success', COMPLETED: 'primary', SHIPPED: 'info', REJECTED: 'danger' },
|
|
minWidth: 100,
|
|
operator: 'eq',
|
|
sortable: false,
|
|
render: 'tag',
|
|
replaceValue: {
|
|
PENDING: t('mall.order.status PENDING'),
|
|
COMPLETED: t('mall.order.status COMPLETED'),
|
|
SHIPPED: t('mall.order.status SHIPPED'),
|
|
REJECTED: t('mall.order.status REJECTED'),
|
|
},
|
|
},
|
|
{
|
|
label: t('mall.order.mall_item_id'),
|
|
prop: 'mall_item_id',
|
|
align: 'center',
|
|
show: false,
|
|
operator: 'RANGE',
|
|
sortable: false,
|
|
},
|
|
{
|
|
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.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.grant_status'),
|
|
prop: 'grant_status',
|
|
align: 'center',
|
|
minWidth: 100,
|
|
custom: {
|
|
NOT_SENT: 'info',
|
|
SENT_PENDING: 'primary',
|
|
ACCEPTED: 'primary',
|
|
FAILED_RETRYABLE: 'error',
|
|
FAILED_FINAL: 'error',
|
|
'---': 'info',
|
|
},
|
|
operator: 'eq',
|
|
sortable: false,
|
|
render: 'tag',
|
|
replaceValue: {
|
|
NOT_SENT: t('mall.order.grant_status NOT_SENT'),
|
|
SENT_PENDING: t('mall.order.grant_status SENT_PENDING'),
|
|
ACCEPTED: t('mall.order.grant_status ACCEPTED'),
|
|
FAILED_RETRYABLE: t('mall.order.grant_status FAILED_RETRYABLE'),
|
|
FAILED_FINAL: t('mall.order.grant_status FAILED_FINAL'),
|
|
'---': t('mall.order.grant_status ---'),
|
|
},
|
|
},
|
|
{
|
|
label: t('mall.order.fail_reason'),
|
|
prop: 'fail_reason',
|
|
align: 'center',
|
|
minWidth: 140,
|
|
render: 'failReason',
|
|
operatorPlaceholder: t('Fuzzy query'),
|
|
sortable: false,
|
|
operator: 'LIKE',
|
|
},
|
|
{
|
|
label: t('mall.order.reject_reason'),
|
|
prop: 'reject_reason',
|
|
align: 'center',
|
|
minWidth: 140,
|
|
render: 'failReason',
|
|
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.start_time'),
|
|
prop: 'start_time',
|
|
align: 'center',
|
|
operator: 'RANGE',
|
|
comSearchRender: 'datetime',
|
|
sortable: 'custom',
|
|
width: 160,
|
|
},
|
|
{
|
|
label: t('mall.order.end_time'),
|
|
prop: 'end_time',
|
|
align: 'center',
|
|
operator: 'RANGE',
|
|
comSearchRender: 'datetime',
|
|
sortable: 'custom',
|
|
width: 160,
|
|
},
|
|
{
|
|
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',
|
|
show: false,
|
|
render: 'datetime',
|
|
operator: 'RANGE',
|
|
comSearchRender: 'datetime',
|
|
sortable: 'custom',
|
|
width: 160,
|
|
timeFormat: 'yyyy-mm-dd hh:MM:ss',
|
|
},
|
|
{
|
|
label: t('Operate'),
|
|
align: 'center',
|
|
width: 120,
|
|
fixed: 'right',
|
|
render: 'buttons',
|
|
buttons: [
|
|
...optButtons,
|
|
{
|
|
render: 'confirmButton',
|
|
name: 'retry',
|
|
title: t('mall.order.manual_retry'),
|
|
text: '',
|
|
type: 'primary',
|
|
class: 'table-row-edit',
|
|
icon: 'fa fa-refresh',
|
|
display: (row: TableRow) =>
|
|
row.type === 'BONUS' &&
|
|
row.status === 'PENDING' &&
|
|
['NOT_SENT', 'SENT_PENDING', 'FAILED_RETRYABLE', 'FAILED_FINAL'].includes(String(row.grant_status)),
|
|
popconfirm: {
|
|
title: t('mall.order.retry_confirm'),
|
|
confirmButtonText: t('Confirm'),
|
|
cancelButtonText: t('Cancel'),
|
|
confirmButtonType: 'primary',
|
|
},
|
|
click: async (row: TableRow) => {
|
|
await createAxios(
|
|
{
|
|
url: '/admin/mall.Order/retry',
|
|
method: 'post',
|
|
data: {
|
|
id: row.id,
|
|
},
|
|
},
|
|
{
|
|
showSuccessMessage: true,
|
|
}
|
|
)
|
|
await baTable.getData()
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
dblClickNotEditColumn: [undefined],
|
|
},
|
|
{
|
|
defaultItems: {},
|
|
}
|
|
)
|
|
|
|
provide('baTable', baTable)
|
|
|
|
onMounted(() => {
|
|
baTable.table.ref = tableRef.value
|
|
baTable.mount()
|
|
baTable.getData()?.then(() => {
|
|
baTable.initSort()
|
|
baTable.dragSort()
|
|
})
|
|
})
|
|
</script>
|