332 lines
8.3 KiB
Vue
332 lines
8.3 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<!-- 页面标题 -->
|
|||
|
|
<h2 class="page-title">结算单详情</h2>
|
|||
|
|
|
|||
|
|
<!-- 查询区域 -->
|
|||
|
|
<div class="head-container">
|
|||
|
|
<div class="filter-container">
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<span class="label">订单批次号：</span>
|
|||
|
|
<el-input
|
|||
|
|
v-model="query.batchNo"
|
|||
|
|
placeholder="请输入订单批次号"
|
|||
|
|
style="width: 200px"
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<span class="label">景区：</span>
|
|||
|
|
<el-select
|
|||
|
|
v-model="query.scenicArea"
|
|||
|
|
placeholder="请选择景区"
|
|||
|
|
clearable
|
|||
|
|
style="width: 200px"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in scenicAreaOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<span class="label">日期：</span>
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="query.dateRange"
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="~"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
:default-time="['00:00:00', '23:59:59']"
|
|||
|
|
:default-value="defaultDateRange"
|
|||
|
|
style="width: 350px"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单列表区域 -->
|
|||
|
|
<div class="order-list-container">
|
|||
|
|
<div class="list-header">
|
|||
|
|
<span class="list-title">订单列表：</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 表格 -->
|
|||
|
|
<el-table
|
|||
|
|
ref="table"
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="customerName" label="客户名称" align="center" />
|
|||
|
|
<el-table-column prop="phoneNumber" label="手机号码" align="center" />
|
|||
|
|
<el-table-column
|
|||
|
|
prop="orderTime"
|
|||
|
|
label="下单时间"
|
|||
|
|
align="center"
|
|||
|
|
width="180"
|
|||
|
|
/>
|
|||
|
|
<el-table-column prop="orderAmount" label="下单费用" align="center" />
|
|||
|
|
<el-table-column prop="scenicArea" label="景区" align="center" />
|
|||
|
|
<el-table-column prop="route" label="路线" align="center" />
|
|||
|
|
<el-table-column prop="initiator" label="订单发起人" align="center" />
|
|||
|
|
<el-table-column prop="orderType" label="订单类型" align="center" />
|
|||
|
|
<el-table-column prop="orderStatus" label="订单状态" align="center">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span>{{ scope.row.orderStatus }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="settlementStatus"
|
|||
|
|
label="结算状态"
|
|||
|
|
align="center"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span :class="getSettlementStatusClass(scope.row.settlementStatus)">
|
|||
|
|
{{ scope.row.settlementStatus }}
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<div class="pagination-container">
|
|||
|
|
<el-pagination
|
|||
|
|
:current-page.sync="page.current"
|
|||
|
|
:page-sizes="[10, 20, 50, 100]"
|
|||
|
|
:page-size="page.size"
|
|||
|
|
:total="page.total"
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|||
|
|
@size-change="handleSizeChange"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<div class="action-buttons">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
@click="handleCancelSettlement"
|
|||
|
|
:disabled="settlementStatus !== '结算中'"
|
|||
|
|
>
|
|||
|
|
取消结算
|
|||
|
|
</el-button>
|
|||
|
|
<el-button type="primary" @click="handlePrint"> 打印结算单 </el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "orderDetail",
|
|||
|
|
data() {
|
|||
|
|
const defaultStartDate = new Date("2015-10-02");
|
|||
|
|
const defaultEndDate = new Date("2015-10-10");
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
settlementStatus: "结算中", // 当前结算单状态
|
|||
|
|
scenicAreaOptions: [
|
|||
|
|
{ value: "baiYunShan", label: "白云山" },
|
|||
|
|
{ value: "huangShan", label: "黄山" },
|
|||
|
|
{ value: "taiShan", label: "泰山" },
|
|||
|
|
],
|
|||
|
|
query: {
|
|||
|
|
batchNo: "",
|
|||
|
|
scenicArea: "",
|
|||
|
|
dateRange: [defaultStartDate, defaultEndDate],
|
|||
|
|
},
|
|||
|
|
defaultDateRange: [defaultStartDate, defaultEndDate],
|
|||
|
|
page: {
|
|||
|
|
current: 1,
|
|||
|
|
size: 10,
|
|||
|
|
total: 3,
|
|||
|
|
},
|
|||
|
|
tableData: [
|
|||
|
|
{
|
|||
|
|
customerName: "小明",
|
|||
|
|
phoneNumber: "12345678",
|
|||
|
|
orderTime: "2024-01-01 00:00:00",
|
|||
|
|
orderAmount: "100.00",
|
|||
|
|
scenicArea: "白云山",
|
|||
|
|
route: "a-b",
|
|||
|
|
initiator: "小红",
|
|||
|
|
orderType: "载物飞行",
|
|||
|
|
orderStatus: "已完成",
|
|||
|
|
settlementStatus: "未结算",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
customerName: "小明",
|
|||
|
|
phoneNumber: "12345678",
|
|||
|
|
orderTime: "2024-01-01 00:00:00",
|
|||
|
|
orderAmount: "100.00",
|
|||
|
|
scenicArea: "白云山",
|
|||
|
|
route: "a-b",
|
|||
|
|
initiator: "小红",
|
|||
|
|
orderType: "载物飞行",
|
|||
|
|
orderStatus: "进行中",
|
|||
|
|
settlementStatus: "结算中",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
customerName: "小明",
|
|||
|
|
phoneNumber: "12345678",
|
|||
|
|
orderTime: "2024-01-01 00:00:00",
|
|||
|
|
orderAmount: "100.00",
|
|||
|
|
scenicArea: "白云山",
|
|||
|
|
route: "a-b",
|
|||
|
|
initiator: "小红",
|
|||
|
|
orderType: "载物飞行",
|
|||
|
|
orderStatus: "已完成",
|
|||
|
|
settlementStatus: "结算完成",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
selection: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleSearch() {
|
|||
|
|
// 实现搜索逻辑
|
|||
|
|
console.log("搜索条件:", this.query);
|
|||
|
|
},
|
|||
|
|
getSettlementStatusClass(status) {
|
|||
|
|
return {
|
|||
|
|
"status-red": ["未结算", "结算中"].includes(status),
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleCancelSettlement() {
|
|||
|
|
if (this.settlementStatus === "结算中") {
|
|||
|
|
// 更新所有订单的结算状态为未结算
|
|||
|
|
this.tableData.forEach((order) => {
|
|||
|
|
order.settlementStatus = "未结算";
|
|||
|
|
});
|
|||
|
|
this.settlementStatus = "未结算";
|
|||
|
|
this.$message.success("已取消结算");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleSizeChange(val) {
|
|||
|
|
this.page.size = val;
|
|||
|
|
// 重新加载数据
|
|||
|
|
},
|
|||
|
|
handleCurrentChange(val) {
|
|||
|
|
this.page.current = val;
|
|||
|
|
// 重新加载数据
|
|||
|
|
},
|
|||
|
|
handleDetail(row) {
|
|||
|
|
// 查看详情
|
|||
|
|
console.log("查看详情:", row);
|
|||
|
|
},
|
|||
|
|
handlePrint() {
|
|||
|
|
// 根据当前状态流转到下一个状态
|
|||
|
|
switch (this.settlementStatus) {
|
|||
|
|
case "结算中":
|
|||
|
|
this.settlementStatus = "已确认";
|
|||
|
|
this.$message.success("结算单状态已更新为：已确认");
|
|||
|
|
break;
|
|||
|
|
case "已确认":
|
|||
|
|
this.settlementStatus = "已完成";
|
|||
|
|
this.$message.success("结算单状态已更新为：已完成");
|
|||
|
|
break;
|
|||
|
|
case "已完成":
|
|||
|
|
// 执行打印逻辑
|
|||
|
|
console.log("打印结算单");
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.app-container {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-container {
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.filter-item {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #606266;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-list-container {
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.list-header {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.list-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-red {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .pagination-container {
|
|||
|
|
// position: fixed;
|
|||
|
|
// bottom: 0;
|
|||
|
|
// left: 200px;
|
|||
|
|
// right: 0;
|
|||
|
|
// height: 60px;
|
|||
|
|
// background: white;
|
|||
|
|
// padding: 10px;
|
|||
|
|
// text-align: left;
|
|||
|
|
// box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
|
|||
|
|
// z-index: 1000;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// .el-pagination {
|
|||
|
|
// padding: 10px 20px;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.el-table {
|
|||
|
|
margin-bottom: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-button--text {
|
|||
|
|
color: #409eff;
|
|||
|
|
&:hover {
|
|||
|
|
color: #66b1ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
::v-deep .el-table__body-wrapper {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|