新增飞行器管理和订单管理的静态页面
This commit is contained in:
parent
f639dc8f40
commit
58f0440d84
42
src/api/aircraft.js
Normal file
42
src/api/aircraft.js
Normal file
@ -0,0 +1,42 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: 'api/aircraft',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function del(ids) {
|
||||
return request({
|
||||
url: 'api/aircraft',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function edit(data) {
|
||||
return request({
|
||||
url: 'api/aircraft',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function get(id) {
|
||||
return request({
|
||||
url: 'api/aircraft/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAll(params) {
|
||||
return request({
|
||||
url: 'api/aircraft',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export default { add, edit, del, get, getAll }
|
||||
@ -57,7 +57,28 @@ export const constantRouterMap = [
|
||||
meta: { title: '个人中心' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/aircraft',
|
||||
component: Layout,
|
||||
hidden: false,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'aircraft',
|
||||
component: (resolve) => require(['@/views/aircraft'], resolve),
|
||||
name: '飞行器管理',
|
||||
meta: { title: '飞行器管理', icon: 'develop', affix: true },
|
||||
},
|
||||
{
|
||||
hidden: true,
|
||||
path: 'aircraftDetail',
|
||||
component: (resolve) => require(['@/views/aircraft/aircraftDetail'], resolve),
|
||||
name: '查看飞行器',
|
||||
meta: { title: '查看飞行器', icon: 'develop', affix: true },
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
export default new Router({
|
||||
|
||||
301
src/views/aircraft/aircraftDetail/index.vue
Normal file
301
src/views/aircraft/aircraftDetail/index.vue
Normal file
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 基本信息 -->
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="color: #027db4;">飞行器基本信息</span>
|
||||
</div>
|
||||
<el-form :model="form" label-width="100px" class="detail-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="型号">
|
||||
<el-input v-model="form.model" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="类型">
|
||||
<el-input v-model="form.type" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="区域">
|
||||
<el-input v-model="form.region" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="景区">
|
||||
<el-input v-model="form.scenicArea" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="负责人">
|
||||
<el-input v-model="form.manager" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="备注">
|
||||
<el-input type="textarea" v-model="form.remarks" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="无人机图片">
|
||||
<div class="image-preview">
|
||||
<div v-for="(url, index) in form.imageUrls" :key="index" class="image-item" @click="handlePreview(url)">
|
||||
<img :src="url" class="preview-image">
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 维护记录表 -->
|
||||
<el-card class="box-card" style="margin-top: 20px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="color: #027db4;">飞行器维护记录</span>
|
||||
</div>
|
||||
<el-table :data="maintenanceData" style="width: 100%">
|
||||
<el-table-column prop="manager" label="负责人" />
|
||||
<el-table-column prop="type" label="维护类型" />
|
||||
<el-table-column prop="remarks" label="备注" />
|
||||
<el-table-column prop="time" label="维护时间" width="180" />
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page.sync="maintenancePage.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="maintenancePage.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="maintenancePage.total"
|
||||
@size-change="handleMaintenanceSizeChange"
|
||||
@current-change="handleMaintenanceCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 保险记录表 -->
|
||||
<el-card class="box-card" style="margin-top: 20px;">
|
||||
<div slot="header">
|
||||
<span style="color: #027db4;">飞行器保险记录</span>
|
||||
<el-button
|
||||
style="float: right; padding: 5px; background-color: #02a7f0; color: white;"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddInsurance"
|
||||
>新增保险</el-button>
|
||||
</div>
|
||||
<el-table :data="insuranceData" style="width: 100%">
|
||||
<el-table-column prop="name" label="保险名称" />
|
||||
<el-table-column prop="type" label="保险类型" />
|
||||
<el-table-column prop="expireTime" label="截至时间" width="180" />
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="handleInsuranceView(scope.row)">查看详情</el-button>
|
||||
<el-button type="text" size="small" @click="handleInsuranceEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="small" @click="handleInsuranceDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page.sync="insurancePage.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="insurancePage.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="insurancePage.total"
|
||||
@size-change="handleInsuranceSizeChange"
|
||||
@current-change="handleInsuranceCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- API模块入口 -->
|
||||
<div class="api-links">
|
||||
<a href="javascript:void(0)" class="api-link" @click="handleApiClick('data')">飞行器数据记录</a>
|
||||
<a href="javascript:void(0)" class="api-link" @click="handleApiClick('fault')">飞行器故障记录</a>
|
||||
<a href="javascript:void(0)" class="api-link" @click="handleApiClick('video')">飞行器视频记录</a>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<el-dialog :visible.sync="previewVisible" append-to-body>
|
||||
<img :src="previewUrl" alt="Preview" style="width: 100%">
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'aircraftDetail',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '大疆',
|
||||
model: 'T100',
|
||||
type: '载人飞行',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
manager: '小明',
|
||||
remarks: '设备状态良好',
|
||||
imageUrls: Array(6).fill('https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png'),
|
||||
},
|
||||
maintenanceData: Array(10).fill({
|
||||
manager: '小明',
|
||||
type: '维修',
|
||||
remarks: '电池损坏',
|
||||
time: '2016-09-21 08:50:08'
|
||||
}),
|
||||
insuranceData: Array(2).fill({
|
||||
name: '安全保险',
|
||||
type: '三方险',
|
||||
expireTime: '2016-09-21 08:50:08'
|
||||
}),
|
||||
maintenancePage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 20
|
||||
},
|
||||
insurancePage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 2
|
||||
},
|
||||
previewVisible: false,
|
||||
previewUrl: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取详情数据
|
||||
const id = this.$route.query.id
|
||||
if (id) {
|
||||
this.getDetail(id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail(id) {
|
||||
// 调用接口获取详情
|
||||
console.log('获取详情:', id)
|
||||
},
|
||||
handlePreview(url) {
|
||||
this.previewUrl = url
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleMaintenanceSizeChange(val) {
|
||||
this.maintenancePage.size = val
|
||||
// 重新获取维护记录数据
|
||||
},
|
||||
handleMaintenanceCurrentChange(val) {
|
||||
this.maintenancePage.page = val
|
||||
// 重新获取维护记录数据
|
||||
},
|
||||
handleInsuranceSizeChange(val) {
|
||||
this.insurancePage.size = val
|
||||
// 重新获取保险记录数据
|
||||
},
|
||||
handleInsuranceCurrentChange(val) {
|
||||
this.insurancePage.page = val
|
||||
// 重新获取保险记录数据
|
||||
},
|
||||
handleAddInsurance() {
|
||||
// 跳转到新增保险页面
|
||||
},
|
||||
handleInsuranceView(row) {
|
||||
// 查看保险详情
|
||||
console.log('查看保险详情:', row)
|
||||
},
|
||||
handleInsuranceEdit(row) {
|
||||
// 编辑保险信息
|
||||
console.log('编辑保险信息:', row)
|
||||
},
|
||||
handleInsuranceDelete(row) {
|
||||
// 删除保险记录
|
||||
console.log('删除保险记录:', row)
|
||||
},
|
||||
handleApiClick(type) {
|
||||
// 跳转到对应的API模块
|
||||
console.log('跳转到API模块:', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 0;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
.detail-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: white;
|
||||
color: #686868;
|
||||
}
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: white;
|
||||
color: #686868;
|
||||
}
|
||||
}
|
||||
.image-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.image-item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: none;
|
||||
.clearfix {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.pagination-container {
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.api-links {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
.api-link {
|
||||
color: #027db4;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/aircraft/index.vue
Normal file
399
src/views/aircraft/index.vue
Normal file
@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="query.name" clearable size="small" placeholder="请输入飞行器名称" style="width: 200px;" class="filter-item" />
|
||||
<el-input v-model="query.manager" clearable size="small" placeholder="请输入负责人" style="width: 200px;" class="filter-item" />
|
||||
<el-select v-model="query.scenicArea" placeholder="景区" clearable size="small" style="width: 200px" class="filter-item">
|
||||
<el-option label="北京" value="北京" />
|
||||
<el-option label="上海" value="上海" />
|
||||
<el-option label="广州" value="广州" />
|
||||
</el-select>
|
||||
<el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="crud.toQuery">查询</el-button>
|
||||
<el-button class="filter-item" size="small" type="success" icon="el-icon-plus" @click="crud.toAdd">新增飞行器</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--表单渲染-->
|
||||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
|
||||
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
|
||||
<el-form-item label="飞行器名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 150px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-input v-model="form.model" style="width: 150px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="form.type" style="width: 150px;">
|
||||
<el-option label="载人飞行" value="载人飞行" />
|
||||
<el-option label="无人机" value="无人机" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="form.role" style="width: 150px;">
|
||||
<el-option label="飞行员" value="飞行员" />
|
||||
<el-option label="技术员" value="技术员" />
|
||||
<el-option label="管理员" value="管理员" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="区域" prop="region">
|
||||
<el-select v-model="form.region" style="width: 150px;">
|
||||
<el-option label="北京" value="北京" />
|
||||
<el-option label="上海" value="上海" />
|
||||
<el-option label="广州" value="广州" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="景区" prop="scenicArea">
|
||||
<el-select v-model="form.scenicArea" style="width: 150px;">
|
||||
<el-option label="白云山" value="白云山" />
|
||||
<el-option label="故宫" value="故宫" />
|
||||
<el-option label="长城" value="长城" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remarks" :label-width="'100px'">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入备注"
|
||||
v-model="form.remarks"
|
||||
style="width: 150px;">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="无人机图片" prop="imageUrls" v-if="form.type === '载人飞行'" style="width: 100%;">
|
||||
<div class="image-list">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="api/upload"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
style="background-color: #fafafa; display: inline-block; margin-right: 10px;"
|
||||
>
|
||||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
<div v-for="(url, index) in form.imageUrls" :key="index" class="image-item">
|
||||
<img :src="url" class="avatar">
|
||||
<span class="delete-icon" @click="handleRemoveImage(index)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:data="crud.data"
|
||||
row-key="id"
|
||||
@select="crud.selectChange"
|
||||
@select-all="crud.selectAllChange"
|
||||
@selection-change="crud.selectionChangeHandler"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="飞行器名称" prop="name" />
|
||||
<el-table-column label="型号" prop="model" />
|
||||
<el-table-column label="类型" prop="type" />
|
||||
<el-table-column label="负责人" prop="manager" />
|
||||
<el-table-column label="区域" prop="region" />
|
||||
<el-table-column label="景区" prop="scenicArea" />
|
||||
<el-table-column label="创建时间" prop="createTime" width="180" />
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleView(scope.row)"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="crud.toEdit(scope.row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页-->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:background="true"
|
||||
:current-page.sync="page.page"
|
||||
:page-size.sync="page.size"
|
||||
:layout="'total, sizes, prev, pager, next, jumper'"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="page.total"
|
||||
@size-change="crud.sizeChangeHandler"
|
||||
@current-change="crud.pageChangeHandler"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import crudAircraft from '@/api/aircraft'
|
||||
|
||||
// crud交由presenter持有
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
name: null,
|
||||
model: null,
|
||||
type: '载人飞行',
|
||||
manager: null,
|
||||
role: '飞行员',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
imageUrls: [],
|
||||
remarks: '',
|
||||
createTime: null
|
||||
}
|
||||
export default {
|
||||
name: 'aircraft',
|
||||
components: { udOperation },
|
||||
cruds() {
|
||||
return CRUD({ title: '飞行器', url: 'api/aircraft', crudMethod: { ...crudAircraft }})
|
||||
},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
data() {
|
||||
return {
|
||||
page: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 5
|
||||
},
|
||||
// 默认数据
|
||||
defaultData: [{
|
||||
id: 1,
|
||||
name: '大疆',
|
||||
model: 'T100',
|
||||
type: '载人飞行',
|
||||
manager: '小明',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
createTime: '2016-09-21 08:50:08',
|
||||
imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '大疆',
|
||||
model: 'T100',
|
||||
type: '载人飞行',
|
||||
manager: '小明',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
createTime: '2016-09-21 08:50:08',
|
||||
imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '大疆',
|
||||
model: 'T100',
|
||||
type: '载人飞行',
|
||||
manager: '小明',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
createTime: '2016-09-21 08:50:08',
|
||||
imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '大疆',
|
||||
model: 'T100',
|
||||
type: '载人飞行',
|
||||
manager: '小明',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
createTime: '2016-09-21 08:50:08',
|
||||
imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '大疆',
|
||||
model: 'T100',
|
||||
type: '载人飞行',
|
||||
manager: '小明',
|
||||
region: '北京',
|
||||
scenicArea: '白云山',
|
||||
createTime: '2016-09-21 08:50:08',
|
||||
imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
|
||||
}],
|
||||
permission: {
|
||||
add: ['admin', 'aircraft:add'],
|
||||
edit: ['admin', 'aircraft:edit'],
|
||||
del: ['admin', 'aircraft:del']
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入飞行器名称', trigger: 'blur' }
|
||||
],
|
||||
model: [
|
||||
{ required: true, message: '请输入型号', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择类型', trigger: 'change' }
|
||||
],
|
||||
manager: [
|
||||
{ required: true, message: '请输入负责人', trigger: 'blur' }
|
||||
],
|
||||
role: [
|
||||
{ required: true, message: '请选择角色', trigger: 'change' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: '请选择区域', trigger: 'change' }
|
||||
],
|
||||
scenicArea: [
|
||||
{ required: true, message: '请选择景区', trigger: 'change' }
|
||||
],
|
||||
imageUrls: [
|
||||
{ required: true, message: '请上传无人机图片', trigger: 'change', type: 'array' }
|
||||
]
|
||||
},
|
||||
query: {
|
||||
name: '',
|
||||
manager: '',
|
||||
scenicArea: '北京'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
// 在刷新前将默认数据添加到crud.data中
|
||||
if (this.crud.data.length === 0) {
|
||||
this.crud.data = this.defaultData
|
||||
// this.crud.resetDataStatus()
|
||||
}
|
||||
},
|
||||
handleView(row) {
|
||||
this.$router.push({ path: '/aircraft/aircraftDetail', query: { id: row.id }})
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (!this.form.imageUrls) {
|
||||
this.form.imageUrls = []
|
||||
}
|
||||
this.form.imageUrls.push(res.url)
|
||||
},
|
||||
handleRemoveImage(index) {
|
||||
this.form.imageUrls.splice(index, 1)
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isImage = file.type.startsWith('image/')
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传文件只能是图片格式!')
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!')
|
||||
}
|
||||
return isImage && isLt2M
|
||||
},
|
||||
|
||||
handleDelete(row) {
|
||||
this.$confirm(`此操作将永久删除飞行器"${row.name}"，是否继续？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.crud.toDelete(row.id)
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.avatar-uploader {
|
||||
.el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
.image-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
.image-item {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
// background-color: rgba(0,0,0,0.5);
|
||||
// color: white;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.app-container {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
::v-deep .el-input-number .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
209
src/views/order/loadOrder/index.vue
Normal file
209
src/views/order/loadOrder/index.vue
Normal file
@ -0,0 +1,209 @@
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
330
src/views/order/loadOrder/loadOrderDetail/index.vue
Normal file
330
src/views/order/loadOrder/loadOrderDetail/index.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 订单基本信息 -->
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="color: #027db4;">订单基本信息</span>
|
||||
</div>
|
||||
<el-form :model="form" label-width="100px" class="detail-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单号">
|
||||
<el-input v-model="form.orderNo" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单类型">
|
||||
<el-input v-model="form.orderType" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单发起人">
|
||||
<el-input v-model="form.initiator" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="客户名称">
|
||||
<el-input v-model="form.customerName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="手机号码">
|
||||
<el-input v-model="form.phoneNumber" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="区域">
|
||||
<el-select v-model="form.region" placeholder="请选择区域">
|
||||
<el-option label="区域1" value="area1" />
|
||||
<el-option label="区域2" value="area2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="景区">
|
||||
<el-select v-model="form.scenicArea" placeholder="请选择景区">
|
||||
<el-option label="景区1" value="scenic1" />
|
||||
<el-option label="景区2" value="scenic2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="路线">
|
||||
<el-select v-model="form.route" placeholder="请选择路线">
|
||||
<el-option label="路线1" value="route1" />
|
||||
<el-option label="路线2" value="route2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="货物重量">
|
||||
<el-input v-model="form.weight" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="附加费">
|
||||
<el-input v-model="form.additionalFee" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="操作员">
|
||||
<el-input v-model="form.operator" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="下单时间">
|
||||
<el-date-picker
|
||||
v-model="form.orderTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单状态">
|
||||
<el-input v-model="form.orderStatus" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单确认人">
|
||||
<el-input v-model="form.confirmer" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单金额">
|
||||
<el-input v-model="form.amount" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 飞行任务信息表 -->
|
||||
<el-card class="box-card" style="margin-top: 20px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="color: #027db4;">飞行任务信息</span>
|
||||
</div>
|
||||
<el-table :data="flightTaskData" style="width: 100%">
|
||||
<el-table-column prop="operator" label="操作员" />
|
||||
<el-table-column prop="device" label="执行设备" />
|
||||
<el-table-column label="货物图片">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.cargoImage" style="height: 50px;" @click="handlePreview(scope.row.cargoImage)">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weight" label="载货重量" />
|
||||
<el-table-column prop="status" label="任务状态" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="handleVideoView(scope.row)">查看视频</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page.sync="taskPage.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="taskPage.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="taskPage.total"
|
||||
@size-change="handleTaskSizeChange"
|
||||
@current-change="handleTaskCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<el-dialog :visible.sync="previewVisible" append-to-body>
|
||||
<img :src="previewUrl" alt="Preview" style="width: 100%">
|
||||
</el-dialog>
|
||||
|
||||
<!-- 视频预览 -->
|
||||
<el-dialog
|
||||
title="视频预览"
|
||||
:visible.sync="videoDialogVisible"
|
||||
width="50%"
|
||||
append-to-body
|
||||
>
|
||||
<video
|
||||
:src="currentVideoUrl"
|
||||
controls
|
||||
style="width: 100%"
|
||||
>
|
||||
您的浏览器不支持 video 标签。
|
||||
</video>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loadOrderDetail',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
orderNo: 'ORDER2025001',
|
||||
orderType: '普通订单',
|
||||
initiator: '张三',
|
||||
customerName: '李四',
|
||||
phoneNumber: '13800138000',
|
||||
region: 'area1',
|
||||
scenicArea: 'scenic1',
|
||||
route: 'route1',
|
||||
weight: '100kg',
|
||||
additionalFee: '50',
|
||||
operator: '小明',
|
||||
orderTime: new Date(),
|
||||
orderStatus: '进行中',
|
||||
confirmer: '王五',
|
||||
amount: '1000'
|
||||
},
|
||||
flightTaskData: [
|
||||
{
|
||||
operator: '小明',
|
||||
device: 'T100',
|
||||
cargoImage: 'https://axure-file.lanhuapp.com/md5__aa8db5b0612acabf7c9b92c53293d1d3.png',
|
||||
weight: '100kg',
|
||||
status: '进行中',
|
||||
videoUrl: 'https://videos.pexels.com/video-files/32839562/13997147_2560_1440_30fps.mp4'
|
||||
}
|
||||
],
|
||||
taskPage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 3
|
||||
},
|
||||
previewVisible: false,
|
||||
previewUrl: '',
|
||||
videoDialogVisible: false,
|
||||
currentVideoUrl: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取详情数据
|
||||
const id = this.$route.query.id
|
||||
if (id) {
|
||||
this.getDetail(id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail(id) {
|
||||
// 调用接口获取详情
|
||||
console.log('获取详情:', id)
|
||||
},
|
||||
handlePreview(url) {
|
||||
this.previewUrl = url
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleTaskSizeChange(val) {
|
||||
this.taskPage.size = val
|
||||
// 重新获取任务记录数据
|
||||
},
|
||||
handleTaskCurrentChange(val) {
|
||||
this.taskPage.page = val
|
||||
// 重新获取任务记录数据
|
||||
},
|
||||
handleVideoView(row) {
|
||||
if (row.videoUrl) {
|
||||
this.currentVideoUrl = row.videoUrl
|
||||
this.videoDialogVisible = true
|
||||
}
|
||||
},
|
||||
handleApiClick(type) {
|
||||
// 跳转到对应的API模块
|
||||
console.log('跳转到API模块:', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 0;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
.detail-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
::v-deep .el-input {
|
||||
width: 240px;
|
||||
}
|
||||
::v-deep .el-select {
|
||||
width: 240px;
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
width: 240px;
|
||||
}
|
||||
::v-deep .el-input.is-disabled .el-input__inner {
|
||||
background-color: white;
|
||||
color: #686868;
|
||||
}
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
background-color: white;
|
||||
color: #686868;
|
||||
}
|
||||
}
|
||||
.image-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.image-item {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-card {
|
||||
margin-bottom: 20px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: none;
|
||||
.clearfix {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.pagination-container {
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.api-links {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
.api-link {
|
||||
color: #027db4;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #027db4;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: #027db4;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
311
src/views/order/settlementOrder/generateOrder/index.vue
Normal file
311
src/views/order/settlementOrder/generateOrder/index.vue
Normal file
@ -0,0 +1,311 @@
|
||||
<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-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>
|
||||
<el-button type="primary" class="filter-item" @click="handleSearch">
|
||||
查询
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单列表区域 -->
|
||||
<div class="order-list-container">
|
||||
<div class="list-header">
|
||||
<span class="list-title">订单列表：</span>
|
||||
<el-button type="primary" class="select-all-btn" @click="handleSelectAll">
|
||||
选择全部
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<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>{{ scope.row.settlementStatus }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分页 -->
|
||||
<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 class="generate-btn-container">
|
||||
<el-button type="primary" @click="handleGenerate">生成结算单</el-button>
|
||||
</div>
|
||||
<!-- 结算列表弹窗 -->
|
||||
<el-dialog
|
||||
title="结算列表"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
>
|
||||
<el-table :data="settlementList">
|
||||
<el-table-column prop="scenicArea" label="委托方">
|
||||
<template slot-scope="scope">
|
||||
委托方：{{ scope.row.scenicArea }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weight" label="重量">
|
||||
<template slot-scope="scope">
|
||||
重量：{{ scope.row.weight }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" label="金额">
|
||||
<template slot-scope="scope">
|
||||
金额：{{ scope.row.amount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">确认生成</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'generateOrder',
|
||||
data() {
|
||||
const defaultStartDate = new Date('2015-10-02')
|
||||
const defaultEndDate = new Date('2015-10-10')
|
||||
return {
|
||||
dialogVisible: false,
|
||||
settlementList: [],
|
||||
loading: false,
|
||||
query: {
|
||||
scenicArea: '',
|
||||
dateRange: [defaultStartDate, defaultEndDate]
|
||||
},
|
||||
defaultDateRange: [defaultStartDate, defaultEndDate],
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
},
|
||||
scenicAreaOptions: [
|
||||
{ value: 'baiYunShan', label: '白云山' },
|
||||
{ value: 'huangShan', label: '黄山' },
|
||||
{ value: 'taiShan', label: '泰山' }
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
customerName: '小明',
|
||||
phoneNumber: '12345678',
|
||||
orderTime: '2024-01-01 00:00:00',
|
||||
orderAmount: '100.00',
|
||||
scenicArea: '白云山',
|
||||
route: 'a-b',
|
||||
initiator: '小红',
|
||||
orderType: '载物飞行',
|
||||
orderStatus: '已完成',
|
||||
settlementStatus: '未结算'
|
||||
}
|
||||
],
|
||||
selection: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
// 仅显示已完成且未结算的订单
|
||||
this.loading = true
|
||||
// 实际环境中应该调用API
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
|
||||
handleSelectAll() {
|
||||
this.$refs.table.toggleAllSelection()
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.selection = val
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.page.size = val
|
||||
this.page.total = this.tableData.length // 更新总数
|
||||
// 重新加载数据
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page.current = val
|
||||
this.page.total = this.tableData.length // 更新总数
|
||||
// 重新加载数据
|
||||
},
|
||||
handleDetail(row) {
|
||||
// 查看详情
|
||||
console.log('查看详情:', row)
|
||||
},
|
||||
handlePrint(row) {
|
||||
// 打印结算单
|
||||
console.log('打印结算单:', row)
|
||||
},
|
||||
handleGenerate() {
|
||||
if (this.selection.length === 0) {
|
||||
this.$message.warning('请至少选择一个订单')
|
||||
return
|
||||
}
|
||||
|
||||
// 按景区分组并生成结算列表
|
||||
const ordersByScenic = {}
|
||||
this.selection.forEach(order => {
|
||||
if (!ordersByScenic[order.scenicArea]) {
|
||||
ordersByScenic[order.scenicArea] = []
|
||||
}
|
||||
ordersByScenic[order.scenicArea].push(order)
|
||||
})
|
||||
|
||||
// 生成结算列表数据
|
||||
this.settlementList = Object.keys(ordersByScenic).map(scenicArea => ({
|
||||
scenicArea: scenicArea,
|
||||
weight: '100kg', // 示例数据，实际应根据订单计算
|
||||
amount: '100元' // 示例数据，实际应根据订单计算
|
||||
}))
|
||||
|
||||
// 显示确认弹窗
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
handleConfirm() {
|
||||
this.dialogVisible = false
|
||||
// 跳转到订单详情页
|
||||
this.$router.push('/order/orderDetail')
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-bottom: 20px;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.filter-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list-container {
|
||||
background-color: #fff;
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-right: 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;
|
||||
}
|
||||
}
|
||||
|
||||
.generate-btn-container {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
196
src/views/order/settlementOrder/index.vue
Normal file
196
src/views/order/settlementOrder/index.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 查询及操作区域 -->
|
||||
<div class="head-container">
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="query.batchNo"
|
||||
placeholder="请输入结算单批次号"
|
||||
class="filter-item"
|
||||
style="width: 200px;"
|
||||
clearable
|
||||
/>
|
||||
<el-button type="primary" class="filter-item" @click="handleSearch">
|
||||
<i class="el-icon-search" style="color: white;" />
|
||||
查询
|
||||
</el-button>
|
||||
<el-button type="primary" class="filter-item" @click="handleGenerate">
|
||||
生成结算单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column prop="batchNo" label="订单批次号" align="left" />
|
||||
<el-table-column prop="status" label="结算状态" align="left">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="settlementTime" label="结算时间" width="180" align="left" />
|
||||
<el-table-column prop="operator" label="制单人" align="left" />
|
||||
<el-table-column prop="exportTime" label="导出时间" width="180" align="left" />
|
||||
<el-table-column prop="settlementStatus" label="结算状态" align="left">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.settlementStatus }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleDetail(scope.row)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handlePrint(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: 'settlementOrder',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
query: {
|
||||
batchNo: ''
|
||||
},
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 2
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
batchNo: 'JS123456789',
|
||||
status: '结算中',
|
||||
settlementTime: '2025-01-01 00:00:00',
|
||||
operator: '小明',
|
||||
exportTime: '2025-01-01 00:00:00',
|
||||
settlementStatus: '结算中'
|
||||
},
|
||||
{
|
||||
batchNo: 'JS123456789',
|
||||
status: '待付款',
|
||||
settlementTime: '2025-01-01 00:00:00',
|
||||
operator: '小明',
|
||||
exportTime: '2025-01-01 00:00:00',
|
||||
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) {
|
||||
// 查看详情
|
||||
console.log('查看详情:', row)
|
||||
},
|
||||
handlePrint(row) {
|
||||
// 打印结算单
|
||||
console.log('打印结算单:', row)
|
||||
},
|
||||
handleGenerate() {
|
||||
this.$router.push('/order/generateOrder')
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.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>
|
||||
331
src/views/order/settlementOrder/orderDetail/index.vue
Normal file
331
src/views/order/settlementOrder/orderDetail/index.vue
Normal file
@ -0,0 +1,331 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user