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

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>