fetch(add): 订单管理-企业设备
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 3m30s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 3m30s
This commit is contained in:
sexygoat
663
src/views/order-management/order-list/index.vue
Normal file
663
src/views/order-management/order-list/index.vue
Normal file
@@ -0,0 +1,663 @@
|
||||
<template>
|
||||
<ArtTableFullScreen>
|
||||
<div class="order-list-page" id="table-full-screen">
|
||||
<!-- 搜索栏 -->
|
||||
<ArtSearchBar
|
||||
v-model:filter="searchForm"
|
||||
:items="searchFormItems"
|
||||
:show-expand="false"
|
||||
@reset="handleReset"
|
||||
@search="handleSearch"
|
||||
></ArtSearchBar>
|
||||
|
||||
<ElCard shadow="never" class="art-table-card">
|
||||
<!-- 表格头部 -->
|
||||
<ArtTableHeader
|
||||
:columnList="columnOptions"
|
||||
v-model:columns="columnChecks"
|
||||
@refresh="handleRefresh"
|
||||
>
|
||||
<template #left>
|
||||
<ElButton @click="showCreateDialog">{{ t('orderManagement.createOrder') }}</ElButton>
|
||||
</template>
|
||||
</ArtTableHeader>
|
||||
|
||||
<!-- 表格 -->
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
:data="orderList"
|
||||
:currentPage="pagination.page"
|
||||
:pageSize="pagination.page_size"
|
||||
:total="pagination.total"
|
||||
:marginTop="10"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||||
</template>
|
||||
</ArtTable>
|
||||
|
||||
<!-- 创建订单对话框 -->
|
||||
<ElDialog
|
||||
v-model="createDialogVisible"
|
||||
:title="t('orderManagement.createOrder')"
|
||||
width="600px"
|
||||
@closed="handleCreateDialogClosed"
|
||||
>
|
||||
<ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
|
||||
<ElFormItem :label="t('orderManagement.table.orderType')" prop="order_type">
|
||||
<ElSelect
|
||||
v-model="createForm.order_type"
|
||||
:placeholder="t('orderManagement.searchForm.orderTypePlaceholder')"
|
||||
style="width: 100%"
|
||||
>
|
||||
<ElOption
|
||||
:label="t('orderManagement.orderType.singleCard')"
|
||||
value="single_card"
|
||||
/>
|
||||
<ElOption :label="t('orderManagement.orderType.device')" value="device" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('orderManagement.createForm.packageIds')" prop="package_ids">
|
||||
<ElSelect
|
||||
v-model="createForm.package_ids"
|
||||
:placeholder="t('orderManagement.createForm.packageIdsPlaceholder')"
|
||||
multiple
|
||||
style="width: 100%"
|
||||
>
|
||||
<!-- TODO: Load actual packages from API -->
|
||||
<ElOption label="套餐示例" :value="1" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="createForm.order_type === 'single_card'"
|
||||
:label="t('orderManagement.createForm.iotCardId')"
|
||||
prop="iot_card_id"
|
||||
>
|
||||
<ElInputNumber
|
||||
v-model="createForm.iot_card_id"
|
||||
:placeholder="t('orderManagement.createForm.iotCardIdPlaceholder')"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="createForm.order_type === 'device'"
|
||||
:label="t('orderManagement.createForm.deviceId')"
|
||||
prop="device_id"
|
||||
>
|
||||
<ElInputNumber
|
||||
v-model="createForm.device_id"
|
||||
:placeholder="t('orderManagement.createForm.deviceIdPlaceholder')"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<ElButton @click="createDialogVisible = false">{{
|
||||
t('orderManagement.actions.cancel')
|
||||
}}</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="handleCreateOrder(createFormRef)"
|
||||
:loading="createLoading"
|
||||
>
|
||||
{{ t('orderManagement.actions.submit') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
|
||||
<!-- 订单详情对话框 -->
|
||||
<ElDialog
|
||||
v-model="detailDialogVisible"
|
||||
:title="t('orderManagement.orderDetail')"
|
||||
width="800px"
|
||||
>
|
||||
<div v-if="currentOrder" class="order-detail">
|
||||
<ElDescriptions :column="2" border>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.orderNo')">
|
||||
{{ currentOrder.order_no }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.orderType')">
|
||||
{{ getOrderTypeText(currentOrder.order_type) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.paymentStatus')">
|
||||
<ElTag :type="getPaymentStatusType(currentOrder.payment_status)">
|
||||
{{ currentOrder.payment_status_text }}
|
||||
</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.totalAmount')">
|
||||
{{ formatCurrency(currentOrder.total_amount) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.paymentMethod')">
|
||||
{{ getPaymentMethodText(currentOrder.payment_method) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.buyerType')">
|
||||
{{ getBuyerTypeText(currentOrder.buyer_type) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.commissionStatus')">
|
||||
{{ getCommissionStatusText(currentOrder.commission_status) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.paidAt')">
|
||||
{{ currentOrder.paid_at ? formatDateTime(currentOrder.paid_at) : '-' }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.createdAt')">
|
||||
{{ formatDateTime(currentOrder.created_at) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="t('orderManagement.table.updatedAt')">
|
||||
{{ formatDateTime(currentOrder.updated_at) }}
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
|
||||
<!-- 订单项列表 -->
|
||||
<div v-if="currentOrder.items && currentOrder.items.length > 0" style="margin-top: 20px">
|
||||
<h4>{{ t('orderManagement.orderItems') }}</h4>
|
||||
<ElTable :data="currentOrder.items" border style="margin-top: 10px">
|
||||
<ElTableColumn
|
||||
prop="package_name"
|
||||
:label="t('orderManagement.items.packageName')"
|
||||
min-width="150"
|
||||
/>
|
||||
<ElTableColumn
|
||||
prop="quantity"
|
||||
:label="t('orderManagement.items.quantity')"
|
||||
width="100"
|
||||
/>
|
||||
<ElTableColumn
|
||||
prop="unit_price"
|
||||
:label="t('orderManagement.items.unitPrice')"
|
||||
width="120"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.unit_price) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="amount"
|
||||
:label="t('orderManagement.items.amount')"
|
||||
width="120"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.amount) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<ElButton @click="detailDialogVisible = false">{{
|
||||
t('orderManagement.actions.close')
|
||||
}}</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</ElCard>
|
||||
</div>
|
||||
</ArtTableFullScreen>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { OrderService } from '@/api/modules'
|
||||
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import type {
|
||||
Order,
|
||||
OrderQueryParams,
|
||||
CreateOrderRequest,
|
||||
PaymentStatus,
|
||||
OrderType,
|
||||
BuyerType,
|
||||
OrderPaymentMethod,
|
||||
OrderCommissionStatus
|
||||
} from '@/types/api'
|
||||
import type { SearchFormItem } from '@/types'
|
||||
import { useCheckedColumns } from '@/composables/useCheckedColumns'
|
||||
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
|
||||
import { formatDateTime } from '@/utils/business/format'
|
||||
|
||||
defineOptions({ name: 'OrderList' })
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(false)
|
||||
const createLoading = ref(false)
|
||||
const tableRef = ref()
|
||||
const createDialogVisible = ref(false)
|
||||
const detailDialogVisible = ref(false)
|
||||
const currentOrder = ref<Order | null>(null)
|
||||
|
||||
// 搜索表单初始值
|
||||
const initialSearchState: OrderQueryParams = {
|
||||
order_no: '',
|
||||
payment_status: undefined,
|
||||
order_type: undefined,
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
}
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive<OrderQueryParams>({ ...initialSearchState })
|
||||
|
||||
// 搜索表单配置
|
||||
const searchFormItems: SearchFormItem[] = [
|
||||
{
|
||||
label: t('orderManagement.searchForm.orderNo'),
|
||||
prop: 'order_no',
|
||||
type: 'input',
|
||||
placeholder: t('orderManagement.searchForm.orderNoPlaceholder'),
|
||||
config: {
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('orderManagement.searchForm.paymentStatus'),
|
||||
prop: 'payment_status',
|
||||
type: 'select',
|
||||
placeholder: t('orderManagement.searchForm.paymentStatusPlaceholder'),
|
||||
options: [
|
||||
{ label: t('orderManagement.paymentStatus.pending'), value: 1 },
|
||||
{ label: t('orderManagement.paymentStatus.paid'), value: 2 },
|
||||
{ label: t('orderManagement.paymentStatus.cancelled'), value: 3 },
|
||||
{ label: t('orderManagement.paymentStatus.refunded'), value: 4 }
|
||||
],
|
||||
config: {
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('orderManagement.searchForm.orderType'),
|
||||
prop: 'order_type',
|
||||
type: 'select',
|
||||
placeholder: t('orderManagement.searchForm.orderTypePlaceholder'),
|
||||
options: [
|
||||
{ label: t('orderManagement.orderType.singleCard'), value: 'single_card' },
|
||||
{ label: t('orderManagement.orderType.device'), value: 'device' }
|
||||
],
|
||||
config: {
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t('orderManagement.searchForm.dateRange'),
|
||||
prop: 'dateRange',
|
||||
type: 'daterange',
|
||||
config: {
|
||||
clearable: true,
|
||||
startPlaceholder: t('orderManagement.searchForm.startDate'),
|
||||
endPlaceholder: t('orderManagement.searchForm.endDate'),
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 列配置
|
||||
const columnOptions = [
|
||||
{ label: t('orderManagement.table.id'), prop: 'id' },
|
||||
{ label: t('orderManagement.table.orderNo'), prop: 'order_no' },
|
||||
{ label: t('orderManagement.table.orderType'), prop: 'order_type' },
|
||||
{ label: t('orderManagement.table.buyerType'), prop: 'buyer_type' },
|
||||
{ label: t('orderManagement.table.paymentStatus'), prop: 'payment_status' },
|
||||
{ label: t('orderManagement.table.totalAmount'), prop: 'total_amount' },
|
||||
{ label: t('orderManagement.table.paymentMethod'), prop: 'payment_method' },
|
||||
{ label: t('orderManagement.table.paidAt'), prop: 'paid_at' },
|
||||
{ label: t('orderManagement.table.createdAt'), prop: 'created_at' },
|
||||
{ label: t('orderManagement.table.operation'), prop: 'operation' }
|
||||
]
|
||||
|
||||
const createFormRef = ref<FormInstance>()
|
||||
|
||||
const createRules = reactive<FormRules>({
|
||||
order_type: [
|
||||
{
|
||||
required: true,
|
||||
message: t('orderManagement.validation.orderTypeRequired'),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
package_ids: [
|
||||
{
|
||||
required: true,
|
||||
message: t('orderManagement.validation.packageIdsRequired'),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const createForm = reactive<CreateOrderRequest>({
|
||||
order_type: 'single_card',
|
||||
package_ids: [],
|
||||
iot_card_id: null,
|
||||
device_id: null
|
||||
})
|
||||
|
||||
const orderList = ref<Order[]>([])
|
||||
|
||||
// 格式化货币 - 将分转换为元
|
||||
const formatCurrency = (amount: number): string => {
|
||||
return `¥${(amount / 100).toFixed(2)}`
|
||||
}
|
||||
|
||||
// 获取支付状态标签类型
|
||||
const getPaymentStatusType = (
|
||||
status: PaymentStatus
|
||||
): 'success' | 'info' | 'warning' | 'danger' => {
|
||||
const statusMap: Record<PaymentStatus, 'success' | 'info' | 'warning' | 'danger'> = {
|
||||
1: 'warning', // 待支付
|
||||
2: 'success', // 已支付
|
||||
3: 'info', // 已取消
|
||||
4: 'danger' // 已退款
|
||||
}
|
||||
return statusMap[status] || 'info'
|
||||
}
|
||||
|
||||
// 获取订单类型文本
|
||||
const getOrderTypeText = (type: OrderType): string => {
|
||||
return type === 'single_card'
|
||||
? t('orderManagement.orderType.singleCard')
|
||||
: t('orderManagement.orderType.device')
|
||||
}
|
||||
|
||||
// 获取买家类型文本
|
||||
const getBuyerTypeText = (type: BuyerType): string => {
|
||||
return type === 'personal'
|
||||
? t('orderManagement.buyerType.personal')
|
||||
: t('orderManagement.buyerType.agent')
|
||||
}
|
||||
|
||||
// 获取支付方式文本
|
||||
const getPaymentMethodText = (method: OrderPaymentMethod): string => {
|
||||
const methodMap: Record<OrderPaymentMethod, string> = {
|
||||
wallet: t('orderManagement.paymentMethod.wallet'),
|
||||
wechat: t('orderManagement.paymentMethod.wechat'),
|
||||
alipay: t('orderManagement.paymentMethod.alipay')
|
||||
}
|
||||
return methodMap[method] || method
|
||||
}
|
||||
|
||||
// 获取佣金状态文本
|
||||
const getCommissionStatusText = (status: OrderCommissionStatus): string => {
|
||||
const statusMap: Record<OrderCommissionStatus, string> = {
|
||||
0: t('orderManagement.commissionStatus.notApplicable'),
|
||||
1: t('orderManagement.commissionStatus.pending'),
|
||||
2: t('orderManagement.commissionStatus.settled')
|
||||
}
|
||||
return statusMap[status] || '-'
|
||||
}
|
||||
|
||||
// 动态列配置
|
||||
const { columnChecks, columns } = useCheckedColumns(() => [
|
||||
{
|
||||
prop: 'id',
|
||||
label: t('orderManagement.table.id'),
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
prop: 'order_no',
|
||||
label: t('orderManagement.table.orderNo'),
|
||||
minWidth: 180
|
||||
},
|
||||
{
|
||||
prop: 'order_type',
|
||||
label: t('orderManagement.table.orderType'),
|
||||
width: 120,
|
||||
formatter: (row: Order) => {
|
||||
return h(
|
||||
ElTag,
|
||||
{ type: row.order_type === 'single_card' ? 'primary' : 'success' },
|
||||
() => getOrderTypeText(row.order_type)
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'buyer_type',
|
||||
label: t('orderManagement.table.buyerType'),
|
||||
width: 120,
|
||||
formatter: (row: Order) => {
|
||||
return h(
|
||||
ElTag,
|
||||
{ type: row.buyer_type === 'personal' ? 'info' : 'warning' },
|
||||
() => getBuyerTypeText(row.buyer_type)
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'payment_status',
|
||||
label: t('orderManagement.table.paymentStatus'),
|
||||
width: 120,
|
||||
formatter: (row: Order) => {
|
||||
return h(ElTag, { type: getPaymentStatusType(row.payment_status) }, () =>
|
||||
row.payment_status_text
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'total_amount',
|
||||
label: t('orderManagement.table.totalAmount'),
|
||||
width: 120,
|
||||
formatter: (row: Order) => formatCurrency(row.total_amount)
|
||||
},
|
||||
{
|
||||
prop: 'payment_method',
|
||||
label: t('orderManagement.table.paymentMethod'),
|
||||
width: 120,
|
||||
formatter: (row: Order) => getPaymentMethodText(row.payment_method)
|
||||
},
|
||||
{
|
||||
prop: 'paid_at',
|
||||
label: t('orderManagement.table.paidAt'),
|
||||
width: 180,
|
||||
formatter: (row: Order) => (row.paid_at ? formatDateTime(row.paid_at) : '-')
|
||||
},
|
||||
{
|
||||
prop: 'created_at',
|
||||
label: t('orderManagement.table.createdAt'),
|
||||
width: 180,
|
||||
formatter: (row: Order) => formatDateTime(row.created_at)
|
||||
},
|
||||
{
|
||||
prop: 'operation',
|
||||
label: t('orderManagement.table.operation'),
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
formatter: (row: Order) => {
|
||||
return h('div', { style: 'display: flex; gap: 8px;' }, [
|
||||
h(ArtButtonTable, {
|
||||
icon: '',
|
||||
tooltip: t('orderManagement.actions.viewDetail'),
|
||||
onClick: () => showOrderDetail(row)
|
||||
}),
|
||||
// 只有待支付和已支付的订单可以取消
|
||||
row.payment_status === 1 || row.payment_status === 2
|
||||
? h(ArtButtonTable, {
|
||||
type: 'delete',
|
||||
tooltip: t('orderManagement.actions.cancel'),
|
||||
onClick: () => handleCancelOrder(row)
|
||||
})
|
||||
: null
|
||||
])
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
getTableData()
|
||||
})
|
||||
|
||||
// 获取订单列表
|
||||
const getTableData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params: OrderQueryParams = {
|
||||
page: pagination.page,
|
||||
page_size: pagination.page_size,
|
||||
order_no: searchForm.order_no || undefined,
|
||||
payment_status: searchForm.payment_status,
|
||||
order_type: searchForm.order_type,
|
||||
start_time: searchForm.start_time || undefined,
|
||||
end_time: searchForm.end_time || undefined
|
||||
}
|
||||
const res = await OrderService.getOrders(params)
|
||||
if (res.code === 0) {
|
||||
orderList.value = res.data.items || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置搜索
|
||||
const handleReset = () => {
|
||||
Object.assign(searchForm, { ...initialSearchState })
|
||||
pagination.page = 1
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
// 处理日期范围
|
||||
if (searchForm.dateRange && Array.isArray(searchForm.dateRange)) {
|
||||
searchForm.start_time = searchForm.dateRange[0]
|
||||
searchForm.end_time = searchForm.dateRange[1]
|
||||
} else {
|
||||
searchForm.start_time = ''
|
||||
searchForm.end_time = ''
|
||||
}
|
||||
pagination.page = 1
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 刷新表格
|
||||
const handleRefresh = () => {
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 处理表格分页变化
|
||||
const handleSizeChange = (newPageSize: number) => {
|
||||
pagination.page_size = newPageSize
|
||||
getTableData()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (newCurrentPage: number) => {
|
||||
pagination.page = newCurrentPage
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 显示创建订单对话框
|
||||
const showCreateDialog = () => {
|
||||
createDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 对话框关闭后的清理
|
||||
const handleCreateDialogClosed = () => {
|
||||
// 重置表单（会同时清除验证状态）
|
||||
createFormRef.value?.resetFields()
|
||||
|
||||
// 重置表单数据到初始值
|
||||
createForm.order_type = 'single_card'
|
||||
createForm.package_ids = []
|
||||
createForm.iot_card_id = null
|
||||
createForm.device_id = null
|
||||
}
|
||||
|
||||
// 创建订单
|
||||
const handleCreateOrder = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
|
||||
await formEl.validate(async (valid) => {
|
||||
if (valid) {
|
||||
createLoading.value = true
|
||||
try {
|
||||
const data: CreateOrderRequest = {
|
||||
order_type: createForm.order_type,
|
||||
package_ids: createForm.package_ids,
|
||||
iot_card_id: createForm.order_type === 'single_card' ? createForm.iot_card_id : null,
|
||||
device_id: createForm.order_type === 'device' ? createForm.device_id : null
|
||||
}
|
||||
|
||||
await OrderService.createOrder(data)
|
||||
ElMessage.success(t('orderManagement.messages.createSuccess'))
|
||||
createDialogVisible.value = false
|
||||
formEl.resetFields()
|
||||
await getTableData()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
createLoading.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看订单详情
|
||||
const showOrderDetail = async (row: Order) => {
|
||||
try {
|
||||
const res = await OrderService.getOrderById(row.id)
|
||||
if (res.code === 0) {
|
||||
currentOrder.value = res.data
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
const handleCancelOrder = (row: Order) => {
|
||||
// 已支付的订单不能取消
|
||||
if (row.payment_status === 2) {
|
||||
ElMessage.warning(t('orderManagement.messages.cannotCancelPaid'))
|
||||
return
|
||||
}
|
||||
|
||||
ElMessageBox.confirm(
|
||||
t('orderManagement.messages.cancelConfirmText'),
|
||||
t('orderManagement.messages.cancelConfirm'),
|
||||
{
|
||||
confirmButtonText: t('orderManagement.actions.confirm'),
|
||||
cancelButtonText: t('orderManagement.actions.cancel'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
try {
|
||||
await OrderService.cancelOrder(row.id)
|
||||
ElMessage.success(t('orderManagement.messages.cancelSuccess'))
|
||||
await getTableData()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消操作
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.order-list-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.order-detail {
|
||||
:deep(.el-descriptions__label) {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user