luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除多余代码

Browse Source
This commit is contained in:
sexygoat
2026-04-08 19:31:22 +08:00
parent b510b4539f
commit d1c6588d8f
110 changed files with 897 additions and 24613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
src/views/order-management/order-list/index.vue
View File

@@ -19,7 +19,7 @@
>
<template #left>
<ElButton @click="showCreateDialog" v-permission="'orders:add'">{{
t('orderManagement.createOrder')
'创建订单'
}}</ElButton>
</template>
</ArtTableHeader>
@@ -34,50 +34,37 @@
:pageSize="pagination.page_size"
:total="pagination.total"
:marginTop="10"
:row-class-name="getRowClassName"
:actions="getActions"
:actionsWidth="120"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@row-contextmenu="handleRowContextMenu"
@cell-mouse-enter="handleCellMouseEnter"
@cell-mouse-leave="handleCellMouseLeave"
>
<template #default>
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
</template>
</ArtTable>
<!-- 鼠标悬浮提示 -->
<TableContextMenuHint :visible="showContextMenuHint" :position="hintPosition" />
<!-- 右键菜单 -->
<ArtMenuRight
ref="contextMenuRef"
:menu-items="contextMenuItems"
:menu-width="120"
@select="handleContextMenuSelect"
/>
<!-- 创建订单对话框 -->
<ElDialog
v-model="createDialogVisible"
:title="t('orderManagement.createOrder')"
:title="'创建订单'"
width="600px"
@closed="handleCreateDialogClosed"
>
<ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
<ElFormItem :label="t('orderManagement.table.orderType')" prop="order_type">
<ElFormItem :label="'订单类型'" prop="order_type">
<ElSelect
v-model="createForm.order_type"
:placeholder="t('orderManagement.searchForm.orderTypePlaceholder')"
:placeholder="'请选择订单类型'"
style="width: 100%"
>
<ElOption :label="t('orderManagement.orderType.singleCard')" value="single_card" />
<ElOption :label="t('orderManagement.orderType.device')" value="device" />
<ElOption :label="'单卡订单'" value="single_card" />
<ElOption :label="'设备订单'" value="device" />
</ElSelect>
</ElFormItem>
<ElFormItem
v-if="createForm.order_type === 'single_card'"
:label="t('orderManagement.createForm.iotCardId')"
:label="'IoT卡'"
prop="iot_card_id"
>
<ElSelect
@@ -85,7 +72,7 @@
filterable
remote
reserve-keyword
:placeholder="t('orderManagement.createForm.iotCardIdPlaceholder')"
:placeholder="'请选择IoT卡'"
:remote-method="searchIotCards"
:loading="cardSearchLoading"
style="width: 100%"
@@ -106,17 +93,13 @@
</ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem
v-if="createForm.order_type === 'device'"
:label="t('orderManagement.createForm.deviceId')"
prop="device_id"
>
<ElFormItem v-if="createForm.order_type === 'device'" :label="'设备'" prop="device_id">
<ElSelect
v-model="createForm.device_id"
filterable
remote
reserve-keyword
:placeholder="t('orderManagement.createForm.deviceIdPlaceholder')"
:placeholder="'请选择设备'"
:remote-method="searchDevices"
:loading="deviceSearchLoading"
style="width: 100%"
@@ -137,10 +120,10 @@
</ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem :label="t('orderManagement.createForm.packageIds')" prop="package_ids">
<ElFormItem :label="'套餐'" prop="package_ids">
<ElSelect
v-model="createForm.package_ids"
:placeholder="t('orderManagement.createForm.packageIdsPlaceholder')"
:placeholder="'请选择套餐'"
multiple
filterable
remote
@@ -158,13 +141,13 @@
<ElOption
v-for="pkg in packageOptions"
:key="pkg.id"
:label="`${pkg.package_name} (¥${(pkg.cost_price / 100).toFixed(2)})`"
:label="`${pkg.package_name} (¥${((pkg.cost_price || 0) / 100).toFixed(2)})`"
:value="pkg.id"
>
<div style="display: flex; justify-content: space-between">
<span>{{ pkg.package_name }}</span>
<span style="font-size: 12px; color: var(--el-text-color-secondary)">
¥{{ (pkg.cost_price / 100).toFixed(2) }}
¥{{ ((pkg.cost_price || 0) / 100).toFixed(2) }}
</span>
</div>
</ElOption>
@@ -196,58 +179,52 @@
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="createDialogVisible = false">{{
t('orderManagement.actions.cancel')
}}</ElButton>
<ElButton @click="createDialogVisible = false">{{ '取消' }}</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"
>
<ElDialog v-model="detailDialogVisible" :title="'订单详情'" width="800px">
<div v-if="currentOrder" class="order-detail">
<ElDescriptions :column="2" border>
<ElDescriptionsItem :label="t('orderManagement.table.orderNo')">
<ElDescriptionsItem :label="'订单编号'">
{{ currentOrder.order_no }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.orderType')">
<ElDescriptionsItem :label="'订单类型'">
{{ getOrderTypeText(currentOrder.order_type) }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.paymentStatus')">
<ElDescriptionsItem :label="'支付状态'">
<ElTag :type="getPaymentStatusType(currentOrder.payment_status)">
{{ currentOrder.payment_status_text }}
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.totalAmount')">
<ElDescriptionsItem :label="'订单金额'">
{{ formatCurrency(currentOrder.total_amount) }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.paymentMethod')">
<ElDescriptionsItem :label="'支付方式'">
{{ getPaymentMethodText(currentOrder.payment_method) }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.buyerType')">
<ElDescriptionsItem :label="'买家类型'">
{{ getBuyerTypeText(currentOrder.buyer_type) }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.commissionStatus')">
<ElDescriptionsItem :label="'佣金状态'">
{{ getCommissionStatusText(currentOrder.commission_status) }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.paidAt')">
<ElDescriptionsItem :label="'支付时间'">
{{ currentOrder.paid_at ? formatDateTime(currentOrder.paid_at) : '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.createdAt')">
<ElDescriptionsItem :label="'创建时间'">
{{ formatDateTime(currentOrder.created_at) }}
</ElDescriptionsItem>
<ElDescriptionsItem :label="t('orderManagement.table.updatedAt')">
<ElDescriptionsItem :label="'更新时间'">
{{ formatDateTime(currentOrder.updated_at) }}
</ElDescriptionsItem>
</ElDescriptions>
@@ -257,28 +234,16 @@
v-if="currentOrder.items && currentOrder.items.length > 0"
style="margin-top: 20px"
>
<h4>{{ t('orderManagement.orderItems') }}</h4>
<h4>{{ '订单项' }}</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"
>
<ElTableColumn prop="package_name" :label="'套餐名称'" min-width="150" />
<ElTableColumn prop="quantity" :label="'数量'" width="100" />
<ElTableColumn prop="unit_price" :label="'单价'" width="120">
<template #default="{ row }">
{{ formatCurrency(row.unit_price) }}
</template>
</ElTableColumn>
<ElTableColumn prop="amount" :label="t('orderManagement.items.amount')" width="120">
<ElTableColumn prop="amount" :label="'金额'" width="120">
<template #default="{ row }">
{{ formatCurrency(row.amount) }}
</template>
@@ -288,9 +253,7 @@
</div>
<template #footer>
<div class="dialog-footer">
<ElButton @click="detailDialogVisible = false">{{
t('orderManagement.actions.close')
}}</ElButton>
<ElButton @click="detailDialogVisible = false">{{ '关闭' }}</ElButton>
</div>
</template>
</ElDialog>
@@ -301,7 +264,6 @@
<script setup lang="ts">
import { h } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { OrderService, CardService, DeviceService, PackageManageService } from '@/api/modules'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
@@ -318,45 +280,27 @@
StandaloneIotCard,
Device,
PackageResponse,
PurchaseCheckRequest,
PurchaseCheckResponse
PurchaseCheckRequest
} from '@/types/api'
import type { SearchFormItem } from '@/types'
import { useCheckedColumns } from '@/composables/useCheckedColumns'
import { useAuth } from '@/composables/useAuth'
import { useTableContextMenu } from '@/composables/useTableContextMenu'
import { useUserStore } from '@/store/modules/user'
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
import TableContextMenuHint from '@/components/core/others/TableContextMenuHint.vue'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
import { formatDateTime } from '@/utils/business/format'
import { RoutesAlias } from '@/router/routesAlias'
defineOptions({ name: 'OrderList' })
const { t } = useI18n()
const router = useRouter()
const { hasAuth } = useAuth()
const userStore = useUserStore()
// 使用表格右键菜单功能
const {
showContextMenuHint,
hintPosition,
getRowClassName,
handleCellMouseEnter,
handleCellMouseLeave
} = useTableContextMenu()
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 contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
const currentRow = ref<Order | null>(null)
// 搜索表单初始值
const initialSearchState: OrderQueryParams = {
@@ -385,37 +329,28 @@
// 搜索表单配置
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'),
label: '支付状态',
prop: 'payment_status',
type: 'select',
placeholder: t('orderManagement.searchForm.paymentStatusPlaceholder'),
placeholder: '请选择支付状态',
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 }
{ label: '待支付', value: 1 },
{ label: '已支付', value: 2 },
{ label: '已取消', value: 3 },
{ label: '已退款', value: 4 }
],
config: {
clearable: true
}
},
{
label: t('orderManagement.searchForm.orderType'),
label: '订单类型',
prop: 'order_type',
type: 'select',
placeholder: t('orderManagement.searchForm.orderTypePlaceholder'),
placeholder: '请选择订单类型',
options: [
{ label: t('orderManagement.orderType.singleCard'), value: 'single_card' },
{ label: t('orderManagement.orderType.device'), value: 'device' }
{ label: '单卡订单', value: 'single_card' },
{ label: '设备订单', value: 'device' }
],
config: {
clearable: true
@@ -437,13 +372,13 @@
}
},
{
label: t('orderManagement.searchForm.dateRange'),
label: '创建时间',
prop: 'dateRange',
type: 'daterange',
config: {
clearable: true,
startPlaceholder: t('orderManagement.searchForm.startDate'),
endPlaceholder: t('orderManagement.searchForm.endDate'),
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
valueFormat: 'YYYY-MM-DD HH:mm:ss'
}
}
@@ -458,19 +393,18 @@
// 列配置
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: '订单编号', prop: 'order_no' },
{ label: '订单类型', prop: 'order_type' },
{ label: '买家类型', prop: 'buyer_type' },
{ label: '订单渠道', prop: 'purchase_role' },
{ label: '购买备注', prop: 'purchase_remark' },
{ label: '操作者', prop: 'operator_name' },
{ label: t('orderManagement.table.paymentStatus'), prop: 'payment_status' },
{ label: t('orderManagement.table.totalAmount'), prop: 'total_amount' },
{ label: '支付状态', prop: 'payment_status' },
{ label: '订单金额', prop: 'total_amount' },
{ label: '实付金额', prop: 'actual_paid_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: '支付方式', prop: 'payment_method' },
{ label: '支付时间', prop: 'paid_at' },
{ label: '创建时间', prop: 'created_at' }
]
const createFormRef = ref<FormInstance>()
@@ -479,14 +413,14 @@
order_type: [
{
required: true,
message: t('orderManagement.validation.orderTypeRequired'),
message: '请选择订单类型',
trigger: 'change'
}
],
package_ids: [
{
required: true,
message: t('orderManagement.validation.packageIdsRequired'),
message: '请选择套餐',
trigger: 'change'
}
],
@@ -623,25 +557,21 @@
// 获取订单类型文本
const getOrderTypeText = (type: OrderType): string => {
return type === 'single_card'
? t('orderManagement.orderType.singleCard')
: t('orderManagement.orderType.device')
return type === 'single_card' ? '单卡订单' : '设备订单'
}
// 获取买家类型文本
const getBuyerTypeText = (type: BuyerType): string => {
return type === 'personal'
? t('orderManagement.buyerType.personal')
: t('orderManagement.buyerType.agent')
return type === 'personal' ? '个人' : '代理'
}
// 获取支付方式文本
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'),
offline: t('orderManagement.paymentMethod.offline')
wallet: '钱包',
wechat: '微信',
alipay: '支付宝',
offline: '线下'
}
return methodMap[method] || method
}
@@ -649,23 +579,18 @@
// 获取佣金状态文本
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')
0: '不适用',
1: '待结算',
2: '已结算'
}
return statusMap[status] || '-'
}
// 动态列配置
const { columnChecks, columns } = useCheckedColumns(() => [
{
prop: 'id',
label: t('orderManagement.table.id'),
width: 80
},
{
prop: 'order_no',
label: t('orderManagement.table.orderNo'),
label: '订单编号',
minWidth: 220,
formatter: (row: Order) => {
return h(
@@ -683,7 +608,7 @@
},
{
prop: 'order_type',
label: t('orderManagement.table.orderType'),
label: '订单类型',
width: 120,
formatter: (row: Order) => {
return h(ElTag, { type: row.order_type === 'single_card' ? 'primary' : 'success' }, () =>
@@ -693,7 +618,7 @@
},
{
prop: 'buyer_type',
label: t('orderManagement.table.buyerType'),
label: '买家类型',
width: 120,
formatter: (row: Order) => {
return h(ElTag, { type: row.buyer_type === 'personal' ? 'info' : 'warning' }, () =>
@@ -713,8 +638,8 @@
purchased_by_platform: 'danger',
purchase_for_subordinate: 'info'
}
return h(ElTag, { type: roleTypeMap[row.purchase_role] || 'info', size: 'small' }, () =>
getPurchaseRoleText(row.purchase_role)
return h(ElTag, { type: roleTypeMap[row.purchase_role || ''] || 'info', size: 'small' }, () =>
getPurchaseRoleText(row.purchase_role || '')
)
}
},
@@ -733,7 +658,7 @@
},
{
prop: 'payment_status',
label: t('orderManagement.table.paymentStatus'),
label: '支付状态',
width: 120,
formatter: (row: Order) => {
return h(
@@ -745,7 +670,7 @@
},
{
prop: 'total_amount',
label: t('orderManagement.table.totalAmount'),
label: '订单金额',
width: 120,
formatter: (row: Order) => formatCurrency(row.total_amount)
},
@@ -760,19 +685,19 @@
},
{
prop: 'payment_method',
label: t('orderManagement.table.paymentMethod'),
label: '支付方式',
width: 120,
formatter: (row: Order) => getPaymentMethodText(row.payment_method)
},
{
prop: 'paid_at',
label: t('orderManagement.table.paidAt'),
label: '支付时间',
width: 180,
formatter: (row: Order) => (row.paid_at ? formatDateTime(row.paid_at) : '-')
},
{
prop: 'created_at',
label: t('orderManagement.table.createdAt'),
label: '创建时间',
width: 180,
formatter: (row: Order) => formatDateTime(row.created_at)
}
@@ -1006,8 +931,11 @@
// 调用套餐购买预检接口
const checkData: PurchaseCheckRequest = {
order_type: createForm.order_type,
resource_id: createForm.order_type === 'single_card' ? createForm.iot_card_id! : createForm.device_id!,
order_type: createForm.order_type!,
resource_id:
createForm.order_type === 'single_card'
? createForm.iot_card_id!
: createForm.device_id!,
package_ids: createForm.package_ids
}
@@ -1042,7 +970,7 @@
if (createForm.payment_method === 'wallet') {
ElMessage.success('订单创建成功,已自动完成支付')
} else {
ElMessage.success(t('orderManagement.messages.createSuccess'))
ElMessage.success('订单创建成功')
}
createDialogVisible.value = false
@@ -1081,23 +1009,19 @@
const handleCancelOrder = (row: Order) => {
// 已支付的订单不能取消
if (row.payment_status === 2) {
ElMessage.warning(t('orderManagement.messages.cannotCancelPaid'))
ElMessage.warning('已支付的订单无法取消')
return
}
ElMessageBox.confirm(
t('orderManagement.messages.cancelConfirmText'),
t('orderManagement.messages.cancelConfirm'),
{
confirmButtonText: t('orderManagement.actions.confirm'),
cancelButtonText: t('orderManagement.actions.cancel'),
type: 'warning'
}
)
ElMessageBox.confirm('确定要取消该订单吗？', '取消订单', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
try {
await OrderService.cancelOrder(row.id)
ElMessage.success(t('orderManagement.messages.cancelSuccess'))
ElMessage.success('订单已取消')
await getTableData()
} catch (error) {
console.error(error)
@@ -1108,40 +1032,20 @@
})
}
// 右键菜单项配置
const contextMenuItems = computed((): MenuItemType[] => {
if (!currentRow.value) return []
const items: MenuItemType[] = []
// 获取操作按钮
const getActions = (row: Order) => {
const actions: any[] = []
// 只有待支付和已支付的订单可以删除
if (
(currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) &&
hasAuth('orders:delete')
) {
items.push({ key: 'cancel', label: '删除' })
if ((row.payment_status === 1 || row.payment_status === 2) && hasAuth('orders:delete')) {
actions.push({
label: '删除',
handler: () => handleCancelOrder(row),
type: 'danger'
})
}
return items
})
// 处理表格行右键菜单
const handleRowContextMenu = (row: Order, column: any, event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
currentRow.value = row
contextMenuRef.value?.show(event)
}
// 处理右键菜单选择
const handleContextMenuSelect = (item: MenuItemType) => {
if (!currentRow.value) return
switch (item.key) {
case 'cancel':
handleCancelOrder(currentRow.value)
break
}
return actions
}
</script>