aircraft-admin/src/views/order/loadOrder/index.vue

210 lines
5.3 KiB
Vue
Raw Normal View History

<template>
<div class="app-container">
<!-- 搜索栏 -->
<div class="head-container">
<div class="filter-container">
<el-input
v-model="query.scenicArea"
placeholder="请输入景区名称"
class="filter-item"
style="width: 200px;"
clearable
/>
<el-input
v-model="query.customerName"
placeholder="请输入客户名称"
class="filter-item"
style="width: 200px;"
clearable
/>
<el-input
v-model="query.phone"
placeholder="请输入手机号"
class="filter-item"
style="width: 200px;"
clearable
/>
<el-button type="primary" class="filter-item" @click="handleSearch">查询</el-button>
</div>
</div>
<!-- 表格 -->
<el-table
ref="table"
v-loading="loading"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="customerName" label="客户名称" align="left" />
<el-table-column prop="phone" label="手机号码" align="left" />
<el-table-column prop="orderTime" label="下单时间" width="180" align="left" />
<el-table-column prop="cost" label="下单费用" align="right">
<template slot-scope="scope">
{{ scope.row.cost.toFixed(2) }}
</template>
</el-table-column>
<el-table-column prop="area" label="区域" align="left" />
<el-table-column prop="scenicArea" label="景区" align="left" />
<el-table-column prop="route" label="路线" align="left" />
<el-table-column prop="initiator" label="订单发起人" align="left" />
<el-table-column prop="type" label="订单类型" align="left" />
<el-table-column prop="status" label="订单状态" align="left">
<template slot-scope="scope">
<span class="status-text">{{ scope.row.status }}</span>
</template>
</el-table-column>
<el-table-column prop="settlementStatus" label="结算状态" align="left">
<template slot-scope="scope">
<span class="status-text">{{ scope.row.settlementStatus }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="handleDetail(scope.row)"
>
查看详情
</el-button>
</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>
</template>
<script>
export default {
name: 'loadOrder',
data() {
return {
loading: false,
query: {
scenicArea: '',
customerName: '',
phone: ''
},
page: {
current: 1,
size: 10,
total: 2
},
tableData: [
{
customerName: '小明',
phone: '12345678',
orderTime: '2025-07-07 18:28:51',
cost: 100.00,
area: '广州区域',
scenicArea: '白云山',
route: 'a-b',
initiator: '小红',
type: '载物飞行',
status: '未执行',
settlementStatus: '未结算'
},
{
customerName: '小明',
phone: '12345678',
orderTime: '2025-07-07 18:28:51',
cost: 100.00,
area: '广州区域',
scenicArea: '白云山',
route: 'a-b',
initiator: '小红',
type: '载物飞行',
status: '进行中',
settlementStatus: '结算中'
}
],
selection: []
}
},
methods: {
handleSearch() {
// 实现搜索逻辑
console.log('搜索条件:', this.query)
},
handleSelectionChange(val) {
this.selection = val
},
handleSizeChange(val) {
this.page.size = val
// 重新加载数据
},
handleCurrentChange(val) {
this.page.current = val
// 重新加载数据
},
handleDetail(row) {
this.$router.push({ path: '/order/loadOrderDetail', query: { id: row.orderId }})
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
padding: 20px;
}
.filter-container {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 10px;
.filter-item {
margin-right: 10px;
}
}
2025-07-11 12:18:39 +08:00
// .pagination-container {
// position: fixed;
// bottom: 0;
// right: 0;
// left: 200px;
// height: 150px;
// background: white;
// padding: 10px;
// text-align: left;
// box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
// }
// .el-pagination {
// padding: 2px 25px;
// }
.status-text {
color: #f56c6c;
}
.el-button--text {
color: #409EFF;
&:hover {
color: #66b1ff;
}
}
.el-table {
margin-top: 20px;
::v-deep .el-table__body-wrapper {
overflow-x: auto;
}
}
</style>