订单状态新增未确认状态,新增控制订单和结算状态的方法

This commit is contained in:
hr121 2025-08-04 21:01:04 +08:00
parent 01b7a3c71e
commit 8b96280027
7 changed files with 210 additions and 161 deletions

91
src/utils/orderStatus.js Normal file
View File

@ -0,0 +1,91 @@
// 订单状态映射
const orderStatusMap = {
0: "未进行",
1: "进行中",
2: "已完成",
3: "已取消",
4: "待确认"
};
// 结算状态映射 - 用于载物订单和生成订单
const settlementStatusMap = {
0: "未结算",
1: "结算中",
2: "结算完成"
};
// 结算状态映射 - 用于订单详情
const settlementDetailStatusMap = {
0: "结算中",
1: "已确认",
2: "结算完成",
3: "已取消"
};
// 状态颜色样式映射
const statusColorMap = {
default: 'status-default', // 默认状态
pending: 'status-pending', // 未进行/未结算
processing: 'status-processing', // 进行中/结算中
success: 'status-success', // 已完成/已结算
warning: 'status-warning', // 待确认
danger: 'status-danger' // 已取消
};
/**
* 获取订单状态文本
* @param {number} status 订单状态码
* @returns {string} 状态文本
*/
export function getOrderStatusText(status) {
return orderStatusMap[status] || "未知状态";
}
/**
* 获取结算状态文本
* @param {number} status 结算状态码
* @param {boolean} isDetail 是否为详情页面
* @returns {string} 状态文本
*/
export function getSettlementStatusText(status, isDetail = false) {
const statusMap = isDetail ? settlementDetailStatusMap : settlementStatusMap;
return statusMap[status] || "未知状态";
}
/**
* 获取订单状态样式类
* @param {number} status 订单状态码
* @returns {Object} 状态样式类
*/
export function getOrderStatusClass(status) {
return {
[statusColorMap.pending]: status === 0, // 未进行
[statusColorMap.processing]: status === 1, // 进行中
[statusColorMap.success]: status === 2, // 已完成
[statusColorMap.danger]: status === 3, // 已取消
[statusColorMap.warning]: status === 4 // 待确认
};
}
/**
* 获取结算状态样式类
* @param {number} status 结算状态码
* @param {boolean} isDetail 是否为详情页面
* @returns {Object} 状态样式类
*/
export function getSettlementStatusClass(status, isDetail = false) {
if (isDetail) {
return {
[statusColorMap.processing]: status === 0, // 结算中
[statusColorMap.warning]: status === 1, // 已确认
[statusColorMap.success]: status === 2, // 结算完成
[statusColorMap.danger]: status === 3 // 已取消
};
} else {
return {
[statusColorMap.pending]: status === 0, // 未结算
[statusColorMap.processing]: status === 1, // 结算中
[statusColorMap.success]: status === 2 // 结算完成
};
}
}

View File

@ -75,25 +75,15 @@
<el-table-column prop="type" label="订单类型" align="center" />
<el-table-column prop="status" label="订单状态" align="center">
<template slot-scope="scope">
<span
:class="[
'status-text',
scope.row.status === '已完成' ? 'success' : '',
]"
>
{{ scope.row.status }}
<span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
{{ getOrderStatusText(scope.row.mainOrderStatus) }}
</span>
</template>
</el-table-column>
<el-table-column prop="settlementStatus" label="结算状态" align="center">
<template slot-scope="scope">
<span
:class="[
'status-text',
scope.row.settlementStatus === '已结算' ? 'success' : '',
]"
>
{{ scope.row.settlementStatus }}
<span :class="getSettlementStatusClass(scope.row.settlementStatus)">
{{ getSettlementStatusText(scope.row.settlementStatus) }}
</span>
</template>
</el-table-column>
@ -135,6 +125,7 @@ import { allCustomer } from "@/api/system/customer";
import { getList } from "@/api/system/pilot";
import { getOrderDetail } from "@/api/order";
import { getUser } from "@/api/system/user";
import { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
import store from "@/store";
export default {
@ -168,6 +159,10 @@ export default {
};
},
methods: {
getOrderStatusText,
getSettlementStatusText,
getOrderStatusClass,
getSettlementStatusClass,
getList() {
this.loading = true;
const params = {
@ -200,10 +195,8 @@ export default {
route: record.routeName,
initiator: initiator ? initiator.name : "未知发起人",
type: record.orderType === 1 ? "载物飞行" : "载人飞行",
status: this.getOrderStatus(record.mainOrderStatus),
settlementStatus: this.getSettlementStatus(
record.settlementStatus
),
mainOrderStatus: record.mainOrderStatus,
settlementStatus: record.settlementStatus,
id: record.id,
};
});
@ -298,25 +291,6 @@ export default {
console.error("获取订单详情失败:", error);
}
},
//
getOrderStatus(status) {
const statusMap = {
0: "未进行",
1: "进行中",
2: "已完成",
3: "已取消",
};
return statusMap[status] || "未知状态";
},
//
getSettlementStatus(status) {
const statusMap = {
0: "未结算",
1: "结算中",
2: "结算完成",
};
return statusMap[status] || "未知状态";
},
handleSearch() {
this.page.current = 1;
this.getList();
@ -372,12 +346,12 @@ export default {
// padding: 2px 25px;
// }
.status-text {
color: #f56c6c;
&.success {
color: #67c23a;
}
}
.status-default { color: #909399; }
.status-pending { color: #909399; }
.status-processing { color: #409EFF; }
.status-success { color: #67c23a; }
.status-warning { color: #e6a23c; }
.status-danger { color: #f56c6c; }
.el-button--text {
color: #409eff;

View File

@ -97,7 +97,7 @@
</el-col>
<el-col :span="8">
<el-form-item label="订单确认人">
<el-input v-model="form.confirmer" disabled />
<el-input v-model="form.customerName" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
@ -123,7 +123,13 @@
</template>
</el-table-column>
<el-table-column prop="weight" label="载货重量" />
<el-table-column prop="status" label="任务状态" />
<el-table-column prop="status" label="任务状态">
<template slot-scope="scope">
<span :class="getTaskStatusClass(scope.row.status)">
{{ scope.row.status }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleVideoView(scope.row)">查看视频</el-button>
@ -249,6 +255,15 @@ export default {
this.taskPage.page = 1
})
},
getTaskStatusClass(status) {
return {
'status-pending': status === '未进行',
'status-processing': status === '进行中',
'status-success': status === '已完成',
'status-warning': status === '待确认',
'status-danger': status === '已取消'
}
},
handlePreview(url) {
this.previewUrl = url
this.previewVisible = true
@ -356,4 +371,11 @@ export default {
}
}
}
.status-default { color: #909399; }
.status-pending { color: #909399; }
.status-processing { color: #409EFF; }
.status-success { color: #67c23a; }
.status-warning { color: #e6a23c; }
.status-danger { color: #f56c6c; }
</style>

View File

@ -69,15 +69,15 @@
<el-table-column prop="orderType" label="订单类型" align="center" />
<el-table-column prop="orderStatus" label="订单状态" align="center">
<template slot-scope="scope">
<span :class="['status-text', scope.row.orderStatus === '已完成' ? 'success' : '']">
{{ scope.row.orderStatus }}
<span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
{{ getOrderStatusText(scope.row.mainOrderStatus) }}
</span>
</template>
</el-table-column>
<el-table-column prop="settlementStatus" label="结算状态" align="center">
<template slot-scope="scope">
<span :class="['status-text', scope.row.settlementStatus === '已结算' ? 'success' : '']">
{{ scope.row.settlementStatus }}
<span :class="getSettlementStatusClass(scope.row.settlementStatus)">
{{ getSettlementStatusText(scope.row.settlementStatus) }}
</span>
</template>
</el-table-column>
@ -137,6 +137,7 @@ import { allScenic } from "@/api/system/scenic";
import { allCustomer } from "@/api/system/customer";
import { getList } from "@/api/system/pilot";
import { getUser } from "@/api/system/user";
import { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
import store from "@/store";
export default {
@ -173,6 +174,10 @@ export default {
}
},
methods: {
getOrderStatusText,
getSettlementStatusText,
getOrderStatusClass,
getSettlementStatusClass,
getList() {
this.loading = true;
const params = {
@ -205,8 +210,8 @@ export default {
route: record.routeName,
initiator: initiator ? initiator.name : "未知发起人",
orderType: record.orderType === 1 ? "载物飞行" : "载人飞行",
orderStatus: this.getOrderStatus(record.mainOrderStatus),
settlementStatus: this.getSettlementStatus(record.settlementStatus),
mainOrderStatus: record.mainOrderStatus,
settlementStatus: record.settlementStatus,
};
});
this.page.total = Number(response.total) || 0;
@ -271,25 +276,6 @@ export default {
}
},
getOrderStatus(status) {
const statusMap = {
0: "未进行",
1: "进行中",
2: "已完成",
3: "已取消"
};
return statusMap[status] || "未知状态";
},
getSettlementStatus(status) {
const statusMap = {
0: "未结算",
1: "结算中",
2: "结算完成"
};
return statusMap[status] || "未知状态";
},
handleSearch() {
this.page.current = 1;
this.getList();
@ -384,13 +370,6 @@ export default {
</script>
<style lang="scss" scoped>
.status-text {
color: #f56c6c;
&.success {
color: #67c23a;
}
}
.app-container {
padding: 20px;
}
@ -434,7 +413,12 @@ export default {
}
}
.status-default { color: #909399; }
.status-pending { color: #909399; }
.status-processing { color: #409EFF; }
.status-success { color: #67c23a; }
.status-warning { color: #e6a23c; }
.status-danger { color: #f56c6c; }
.el-table {
margin-bottom: 70px;
@ -468,22 +452,35 @@ export default {
gap: 10px;
}
::v-deep .el-card__body {
padding: 10px 20px;
}
::v-deep .el-dialog__body {
padding: 10px;
}
.settlement-card {
flex: 0 0 auto;
width: calc(33.33% - 7px);
min-width: 200px;
margin: 0;
width: 100%;
.settlement-item {
text-align: center;
display: flex;
align-items: center;
justify-content: flex-start;
h3 {
margin: 0 0 8px 0;
margin-right: 10px;
color: #303133;
font-size: 14px;
}
.settlement-info {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
p {
margin: 4px 0;
color: #606266;

View File

@ -41,7 +41,9 @@
<el-table-column prop="updateTime" label="导出时间" width="180" align="center" />
<el-table-column prop="settlementStatus" label="结算状态" align="center">
<template slot-scope="scope">
<span>{{ scope.row.settlementStatus }}</span>
<span :class="getSettlementStatusClass(scope.row.rawSettlementStatus, true)">
{{ getSettlementStatusText(scope.row.rawSettlementStatus, true) }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
@ -83,6 +85,7 @@
import { getSettleOrderList } from '@/api/order'
import { getUserNameValue } from '@/api/dropdown'
import SettlementPdf from './orderDetail/settlementPdf.vue'
import { getSettlementStatusText, getSettlementStatusClass } from "@/utils/orderStatus";
export default {
components: {
@ -121,11 +124,13 @@ export default {
this.fetchData()
},
methods: {
getSettlementStatusText,
getSettlementStatusClass,
async fetchData() {
this.loading = true
try {
const response = await getSettleOrderList(this.query)
const operatorList = await getUserNameValue(0); //
const operatorList = await getUserNameValue(0);
const operatorMap = new Map();
operatorList.forEach(item => {
@ -133,10 +138,9 @@ export default {
});
response.records = response.records.map(record => ({
...record,
settlementStatus: this.getSettlementStatus(record.settlementStatus),
rawSettlementStatus: record.settlementStatus,
operator: record.operatorId ? (operatorMap.get(record.operatorId) || '未知') : '未知',
}))
console.log('获取结算单列表:', response)
this.tableData = response.records || []
this.page.total = Number(response.total) || 0
} catch (error) {
@ -146,41 +150,24 @@ export default {
}
},
getSettlementStatus(status) {
const statusMap = {
0: "结算中",
1: "已确认",
2: "结算完成",
3: "已取消",
};
return statusMap[status] || "未知状态";
},
async getOperatorName(operatorId) {
const response = await getUserNameValue(0);
if (!response || response.length === 0) {
return '未知';
}
const operatorName = response.find(item => item.key === operatorId);
return operatorName.value || '未知';
return getSettlementStatusText(status, true);
},
handleSearch() {
//
console.log('搜索条件:', this.query)
this.page.current = 1
this.fetchData()
},
handleSelectionChange(val) {
this.selection = val
},
handleSizeChange(val) {
this.page.size = val
//
this.fetchData()
},
handleCurrentChange(val) {
this.page.current = val
//
this.fetchData()
},
handleDetail(row) {
//
console.log('查看详情:', row)
//
this.$router.push({
path: '/order/orderDetail',
query: { orderId: row.id.toString() }
@ -190,7 +177,6 @@ export default {
if (row.id) {
this.currentSettlementId = row.id.toString()
try {
// vue
await this.$nextTick()
await this.$refs.settlementPdf.generatePDF()
} catch (error) {
@ -238,23 +224,25 @@ export default {
// padding: 2px 25px;
// }
.status-default { color: #909399; }
.status-pending { color: #909399; }
.status-processing { color: #409EFF; }
.status-success { color: #67c23a; }
.status-warning { color: #e6a23c; }
.status-danger { color: #f56c6c; }
.el-table {
margin-bottom: 70px;
margin-top: 20px;
::v-deep .el-table__body-wrapper {
overflow-x: auto;
}
}
.el-button--text {
color: #409EFF;
&:hover {
color: #66b1ff;
}
}
.el-table {
margin-top: 20px;
::v-deep .el-table__body-wrapper {
overflow-x: auto;
}
}
</style>

View File

@ -89,8 +89,8 @@
align="center"
>
<template slot-scope="scope">
<span :class="getSettlementStatusClass(scope.row.mainOrderStatus)">
{{ getOrderStatus(scope.row.mainOrderStatus) }}
<span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
{{ getOrderStatusText(scope.row.mainOrderStatus) }}
</span>
</template>
</el-table-column>
@ -100,8 +100,8 @@
align="center"
>
<template slot-scope="scope">
<span :class="getSettlementStatusClass(scope.row.settlementStatus)">
{{ getSettlementStatusText(scope.row.settlementStatus) }}
<span :class="getSettlementStatusClass(scope.row.settlementStatus, true)">
{{ getSettlementStatusText(scope.row.settlementStatus, true) }}
</span>
</template>
</el-table-column>
@ -158,6 +158,7 @@
</template>
<script>
import { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
import { getSettleOrderDetail, updateSettleOrderStatus, printSettleOrderData } from '@/api/order'
import { getDetail } from "@/api/system/pilot";
import { getCustomerId } from '@/api/system/customer'
@ -241,6 +242,10 @@ export default {
}
},
methods: {
getOrderStatusText,
getSettlementStatusText,
getOrderStatusClass,
getSettlementStatusClass,
handleSearch() {
this.loading = true
try {
@ -283,31 +288,6 @@ export default {
this.loading = false
}
},
getOrderStatus(status) {
const statusMap = {
0: "未进行",
1: "进行中",
2: "已完成",
3: "已取消"
};
return statusMap[status] || "未知状态";
},
getSettlementStatusText(status) {
const statusMap = {
0: '结算中',
1: '已确认',
2: '结算完成',
3: '已取消'
};
return statusMap[status] || '未知状态';
},
getSettlementStatusClass(status) {
return {
'status-red': [0, 3].includes(status),
'status-green': status === 2,
'status-orange': status === 1
};
},
async handleCancelSettlement() {
try {
await updateSettleOrderStatus(this.$route.query.orderId, 3)
@ -408,15 +388,12 @@ export default {
}
}
.status-red {
color: #f56c6c;
}
.status-green {
color: #67c23a;
}
.status-orange {
color: #e6a23c;
}
.status-default { color: #909399; }
.status-pending { color: #909399; }
.status-processing { color: #409EFF; }
.status-success { color: #67c23a; }
.status-warning { color: #e6a23c; }
.status-danger { color: #f56c6c; }
.el-table {
margin-bottom: 70px;

View File

@ -7,7 +7,7 @@
<div class="info-row">
<div class="info-item">
<span class="label">结算单号:</span>
<span class="value">{{ data.statementId }}</span>
<span class="value">{{ data.batchNo }}</span>
</div>
<div class="info-item">
<span class="label">结算时间:</span>
@ -20,7 +20,7 @@
<span class="value">{{ data.customer }}</span>
</div>
<div class="info-item">
<span class="label">:</span>
<span class="label">:</span>
<span class="value">{{ data.quantity }}</span>
</div>
</div>
@ -39,7 +39,7 @@
<thead>
<tr>
<th style="width: 20%;">订单号</th>
<th style="width: 25%;">执行时间</th>
<th style="width: 25%;">订单创建时间</th>
<th style="width: 15%;">重量</th>
<th style="width: 20%;">金额</th>
<th style="width: 20%;">确认人</th>
@ -102,14 +102,14 @@ export default {
methods: {
async formatData(data) {
if (!data) {
console.warn('No data provided')
console.warn('暂无此数据')
return
}
// PDF
this.data = {
statementId: this.settlementOrderId || '',
date: data.settlementTimeScope || '',
batchNo: data.batchNo || '',
customer: data.clientName || '',
quantity: data.cargoWeight ? `${data.cargoWeight}KG` : '0KG',
amount: data.totalAmount ? `${data.totalAmount}` : '0元',