antissoft / wurenji

<template>
    <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
            <el-row class="NCC-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="订单号">
                            <el-input v-model="query.orderNo" placeholder="请输入订单号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="设备名称">
                            <el-input v-model="query.deviceName" placeholder="请输入设备名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="场地名称">
                            <el-input v-model="query.siteName" placeholder="请输入场地名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户手机">
                            <el-input v-model="query.userPhone" placeholder="请输入用户手机号" clearable />
                        </el-form-item>
                    </el-col>
                    <template v-if="showAll">
                        <el-col :span="6">
                            <el-form-item label="无人机名称">
                                <el-input v-model="query.aircraftName" placeholder="请输入无人机名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="代理商名称">
                                <el-input v-model="query.agentName" placeholder="请输入代理商名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="租赁货道">
                                <el-input v-model="query.rentCellName" placeholder="请输入租赁货道" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="退租货道">
                                <el-input v-model="query.returnCellName" placeholder="请输入退租货道" clearable />
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                            <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true"
                                v-if="!showAll">展开</el-button>
                            <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false"
                                v-else>收起</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="NCC-common-layout-main NCC-flex-main">
                <div class="NCC-common-head">
                    <div class="NCC-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
                                @click="reset()" />
                        </el-tooltip>
                        <screenfull isContainer />
                    </div>
                </div>
                <NCC-table v-loading="listLoading" :data="list" class="order-table">
                    <!-- 订单基础信息 -->
                    <el-table-column label="订单信息" align="left" min-width="300">
                        <template slot-scope="scope">
                            <div class="order-info">
                                <div class="order-header">
                                    <div class="order-no">{{ scope.row.orderNo }}</div>
                                    <el-tag :type="getStatusColor(scope.row.status)" size="small">
                                        {{ scope.row.statusString }}
                                    </el-tag>
                                </div>
                                <div class="order-details">
                                    <div class="detail-row">
                                        <span class="label">创建时间：</span>
                                        <span class="value">{{ timestampToTime(scope.row.createTime) }}</span>
                                    </div>
                                    <div class="detail-row">
                                        <span class="label">用户信息：</span>
                                        <span class="value">{{ scope.row.userName || scope.row.userAccount || '未知用户' }}</span>
                                    </div>
                                    <div class="detail-row">
                                        <span class="label">手机号码：</span>
                                        <span class="value">{{ scope.row.userPhone || '-' }}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 设备场地信息 -->
                    <el-table-column label="设备场地" align="left" min-width="250">
                        <template slot-scope="scope">
                            <div class="device-site-info">
                                <div class="info-row">
                                    <i class="el-icon-cpu"></i>
                                    <span class="label">设备：</span>
                                    <span class="value">{{ scope.row.deviceName || scope.row.deviceId || '未知设备' }}</span>
                                </div>
                                <div class="info-row">
                                    <i class="el-icon-location"></i>
                                    <span class="label">场地：</span>
                                    <span class="value">{{ scope.row.siteName || scope.row.siteId || '未知场地' }}</span>
                                </div>
                                <div class="info-row">
                                    <i class="el-icon-cpu"></i>
                                    <span class="label">无人机：</span>
                                    <span class="value">{{ scope.row.aircraftName || scope.row.aircraftId || '未知无人机' }}</span>
                                </div>
                                <div class="info-row">
                                    <i class="el-icon-box"></i>
                                    <span class="label">货道：</span>
                                    <span class="value">{{ scope.row.rentCellName || scope.row.rentCellId || '-' }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 时间信息 -->
                    <el-table-column label="时间信息" align="left" min-width="200">
                        <template slot-scope="scope">
                            <div class="time-info">
                                <div class="time-row">
                                    <i class="el-icon-time"></i>
                                    <span class="label">开始时间：</span>
                                    <span class="value">{{ timestampToTime(scope.row.startTime) }}</span>
                                </div>
                                <div class="time-row">
                                    <i class="el-icon-time"></i>
                                    <span class="label">结束时间：</span>
                                    <span class="value">{{ timestampToTime(scope.row.endTime) }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 金额信息 -->
                    <el-table-column label="金额信息" align="left" min-width="200">
                        <template slot-scope="scope">
                            <div class="amount-info">
                                <div class="amount-row">
                                    <i class="el-icon-money"></i>
                                    <span class="label">实付金额：</span>
                                    <span class="price">¥{{ scope.row.actualAmount }}</span>
                                </div>
                                <div class="amount-row">
                                    <i class="el-icon-user"></i>
                                    <span class="label">代理商：</span>
                                    <span class="value">{{ scope.row.agentName || scope.row.agentId || '未知代理商' }}</span>
                                </div>
                                <div class="amount-row">
                                    <i class="el-icon-pie-chart"></i>
                                    <span class="label">分成比例：</span>
                                    <span class="ratio">{{ scope.row.shareRatio * 100 }}%</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 操作列 -->
                    <el-table-column label="操作" fixed="right" width="100" align="center">
                        <template slot-scope="scope">
                            <div class="action-buttons">
                                <el-button type="text" size="small" style="color: #F56C6C;" 
                                    v-if="scope.row.status == 2" 
                                    @click="liPayOperationCance(scope.row.orderNo)">
                                    取消订单
                                </el-button>
                                <el-button type="text" size="small" style="color: #409EFF;" 
                                    @click="viewOrderDetail(scope.row)" v-if="false">
                                    查看详情
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData" />
            </div>
        </div>
        <NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
        <OrderDetail 
          :visible.sync="detailVisible" 
          :orderId="currentOrderId" 
        />
    </div>
</template>
<script>
import { getOrderList, cancelOrder } from '@/api/extend/uavOrder'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import NCCForm from './Form'
import ExportBox from './ExportBox'
import OrderDetail from './OrderDetail'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
    components: { NCCForm, ExportBox, OrderDetail },
    data() {
        return {
            showAll: false,
            query: {
                orderNo: undefined,
                deviceName: undefined,
                siteName: undefined,
                userPhone: undefined,
                aircraftName: undefined,
                agentName: undefined,
                rentCellName: undefined,
                returnCellName: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [], total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 10,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            exportBoxVisible: false,
            detailVisible: false,
            currentOrderId: '',
            columnList: [
                { prop: 'orderNo', label: '订单号' },
                { prop: 'deviceName', label: '设备名称' },
                { prop: 'siteName', label: '场地名称' },
                { prop: 'aircraftName', label: '无人机名称' },
                { prop: 'agentName', label: '代理商名称' },
                { prop: 'userAccount', label: '租借人账号' },
                { prop: 'userPhone', label: '租借人手机号' },
                { prop: 'userName', label: '租借人姓名' },
                { prop: 'actualAmount', label: '实付金额' },
                { prop: 'shareRatio', label: '分成比例' },
                { prop: 'status', label: '订单状态' },
                { prop: 'createTime', label: '创建时间' },
            ],
            statusOptions: [{ "fullName": "进行中", "id": "进行中" }, { "fullName": "已完成", "id": "已完成" }, { "fullName": "已取消", "id": "已取消" }, { "fullName": "已退款", "id": "已退款" }],
        }
    },
    computed: {},
    created() {
        this.initData()
    },
    methods: {
        viewOrderDetail(order) {
            // 查看订单详情
            this.currentOrderId = order.id;
            this.detailVisible = true;
        },
        liPayOperationCance(outOrderNo) {
            cancelOrder(outOrderNo).then(res => {
                this.$message({
                    type: 'success',
                    message: res.msg,
                    onClose: () => {
                        this.initData()
                    }
                });
            })
        },
        getStatusColor(status) {
            const colorMap = {
                1: 'warning',  // 进行中 - 橙色
                2: 'success',  // 已完成 - 绿色
                3: 'danger',   // 已取消 - 红色
                4: 'info'      // 已退款 - 灰色
            }
            return colorMap[status] || 'info'
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                } else {
                    query[key] = _query[key]
                }
            }
            getOrderList(query).then(res => {
                this.list = res.data.list
                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },
        handleDel(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                request({
                    url: `/api/Extend/UavOrder/${id}`,
                    method: 'DELETE'
                }).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.initData()
                        }
                    });
                })
            }).catch(() => {
            });
        },
        //时间戳转时间
        timestampToTime(timestamp) {
            if (!timestamp) return '-'
            let date = new Date(timestamp)
            let Y = date.getFullYear() + '-'
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
            let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
            let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
            let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return Y + M + D + h + m + s
        },
        addOrUpdateHandle(id, isDetail) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.NCCForm.init(id, isDetail)
            })
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 10,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 10,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        }
    }
}
</script>
<style lang="scss" scoped>
.order-table {
    .order-info {
        .order-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            
            .order-no {
                font-weight: 600;
                color: #303133;
                font-size: 14px;
            }
        }
        
        .order-details {
            .detail-row {
                display: flex;
                align-items: center;
                margin: 6px 0;
                font-size: 13px;
                
                .label {
                    color: #606266;
                    min-width: 70px;
                }
                
                .value {
                    color: #303133;
                    font-weight: 500;
                }
            }
        }
    }
    
    .device-site-info, .time-info, .amount-info {
        .info-row, .time-row, .amount-row {
            display: flex;
            align-items: center;
            margin: 8px 0;
            font-size: 13px;
            
            i {
                margin-right: 6px;
                color: #909399;
                width: 14px;
            }
            
            .label {
                color: #606266;
                margin-right: 6px;
                min-width: 60px;
            }
            
            .value {
                color: #303133;
                font-weight: 500;
            }
            
            .price {
                color: #F56C6C;
                font-weight: 600;
            }
            
            .ratio {
                color: #67C23A;
                font-weight: 600;
            }
        }
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 4px;
        
        .el-button {
            padding: 2px 8px;
            font-size: 12px;
        }
    }
}

.el-table {
    .el-table__cell {
        padding: 12px 0;
    }
}
</style>