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="场地ID">
                            <el-input v-model="query.siteId" placeholder="场地ID" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="设备ID">
                            <el-input v-model="query.deviceId" placeholder="设备ID" clearable />
                        </el-form-item>
                    </el-col>
                    <template v-if="showAll">
                        <el-col :span="6">
                            <el-form-item label="无人机ID">
                                <el-input v-model="query.aircraftId" placeholder="无人机ID" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="代理商ID">
                                <el-input v-model="query.agentId" placeholder="代理商ID" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="租赁格子ID">
                                <el-input v-model="query.rentCellId" placeholder="租赁格子ID" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="退租格子ID">
                                <el-input v-model="query.returnCellId" placeholder="退租格子ID" 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="220">
                        <template slot-scope="scope">
                            <div class="info-block">
                                <div class="order-no">
                                    <b>订单编号：{{ scope.row.orderNo }}</b>
                                    <el-tag :type="getStatusColor(scope.row.status)" style="margin-left: 10px;">
                                        {{ scope.row.statusString }}
                                    </el-tag>
                                </div>
                                <div class="time-info">
                                    <div><b>创建时间:</b> {{ timestampToTime(scope.row.createTime) }}</div>
                                    <div><b>无人机:</b> {{ scope.row.aircraftId }} </div>

                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 设备信息列 -->
                    <el-table-column label="租赁信息" align="left" min-width="180">
                        <template slot-scope="scope">
                            <div class="info-block device-info">
                                <div><b>开始时间:</b> {{ timestampToTime(scope.row.startTime) }}</div>
                                <div><b>租赁设备:</b> {{ scope.row.deviceId }}</div>
                                <div><b>租赁货道:</b> {{ scope.row.rentCellId }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 格子信息列 -->
                    <el-table-column label="归还信息" align="left" min-width="180">
                        <template slot-scope="scope">
                            <div class="info-block cell-info">
                                <div><b>结束时间:</b> {{ timestampToTime(scope.row.endTime) }}</div>
                                <div><b>退租设备:</b> {{ scope.row.returnDeviceId }}</div>
                                <div><b>退租货道:</b> {{ scope.row.returnCellId }}</div>
                                <!-- <div><b>备注:</b> <span class="remark">{{ scope.row.remark || '-' }}</span></div> -->
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 用户信息列 -->
                    <el-table-column label="用户信息" align="left" min-width="180">
                        <template slot-scope="scope">
                            <div class="info-block user-info">
                                <div><b>账号:</b> {{ scope.row.userAccount }}</div>
                                <div><b>手机:</b> {{ scope.row.userPhone }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 金额信息列 -->
                    <el-table-column label="金额信息" align="left" min-width="180">
                        <template slot-scope="scope">
                            <div class="info-block amount-info">
                                <div><b>代理商:</b> {{ scope.row.agentId }}</div>
                                <!-- <div class="amount"><b>实付:</b> <span class="price">¥{{ scope.row.actualAmount }}</span></div> -->
                                <div><b>分成比例:</b> <span class="ratio">{{ scope.row.shareRatio * 100 }}%</span></div>
                                <div class="share"><b>订单金额:</b> <span class="price">¥{{ scope.row.actualAmount }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- 操作列 -->
                    <el-table-column label="操作" fixed="right" width="100" align="center">
                        <template slot-scope="scope">
                            <div style="display: flex; flex-direction: column; gap: 5px;">
                                <el-button type="text" style="color: #F56C6C;" v-if="scope.row.status ==2" @click="liPayOperationCance(scope.row.orderNo)">取消订单</el-button>
                                <el-button type="text" style="color: #67C23A;" v-if="false">完结订单</el-button>
                                <el-button type="text" style="color: #409EFF;" 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" />
    </div>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import NCCForm from './Form'
import ExportBox from './ExportBox'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
    components: { NCCForm, ExportBox },
    data() {
        return {
            showAll: false,
            query: {
                orderNo: undefined,
                siteId: undefined,
                deviceId: undefined,
                aircraftId: undefined,
                agentId: undefined,
                rentCellId: undefined,
                returnCellId: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [], total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 10,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            exportBoxVisible: false,
            columnList: [
                { prop: 'orderNo', label: '订单号' },
                { prop: 'deviceId', label: '设备ID' },
                { prop: 'siteId', label: '场地ID' },
                { prop: 'aircraftId', label: '无人机ID' },
                { prop: 'agentId', label: '代理商ID' },
                { prop: 'userAccount', label: '租借人账号' },
                { prop: 'userPhone', label: '租借人手机号' },
                { prop: 'userName', label: '租借人姓名' },
                { prop: 'discountAmount', label: '优惠金额' },
                { prop: 'actualAmount', label: '实付金额' },
                { prop: 'shareRatio', label: '分成比例' },
                { prop: 'shareAmount', label: '分成金额' },
                { prop: 'finalAmount', label: '平台分成后金额' },
                { prop: 'rentCellId', label: '租赁格子ID' },
                { prop: 'returnCellId', label: '退租格子ID' },
                { prop: 'status', label: '订单状态' },
                { prop: 'remark', label: '备注' },
            ],
            statusOptions: [{ "fullName": "进行中", "id": "进行中" }, { "fullName": "已完成", "id": "已完成" }, { "fullName": "已取消", "id": "已取消" }, { "fullName": "已退款", "id": "已退款" }],
        }
    },
    computed: {},
    created() {
        this.initData()
    },
    methods: {
        liPayOperationCance(outOrderNo) {
            let query = {
                outOrderNo: outOrderNo,
                outRequestNo: outOrderNo
            };
            request({
                url: `/api/Extend/alipay/liPayOperationCance`,
                method: 'POST',
                data: query
            }).then(res => {
                this.$message({
                    type: 'success',
                    message: res.msg,
                    onClose: () => {
                        this.initData()
                    }
                });
            })
        },
        getStatusColor(status) {
            const colorMap = {
                1: 'success', // 空闲 - 绿色
                2: 'info',    // 停用 - 灰色  
                3: 'warning', // 充电 - 橙色
                4: 'danger',  // 损坏 - 红色
                5: 'primary'  // 已租接 - 蓝色
            }
            return colorMap[status] || 'success'
        },
        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]
                }
            }
            request({
                url: `/api/Extend/UavOrder`,
                method: 'GET',
                data: 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 {
    .info-block {
        padding: 8px 0;

        div {
            margin: 4px 0;
            line-height: 1.5;
        }

        .highlight-text {
            color: #409EFF;
            font-weight: bold;
        }

        .price {
            color: #F56C6C;
            font-weight: bold;
        }

        .ratio {
            color: #67C23A;
            font-weight: bold;
        }

        .user-text,
        .phone-text {
            color: #606266;
        }

        .remark {
            color: #909399;
            font-style: italic;
        }
    }

    .time-info {
        color: #606266;
    }

    .status-tag {
        margin-top: 8px;
    }
}
</style>