RunForge-Frontend/src/pages/path/pathList.vue

<template>
    <div class="container">
        <Breadcrumb :items="['路径数据', '路径列表']" />

        <a-card title="路径列表">
            <a-row>
                <a-col :flex="1">
                    <a-form :model="queryData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="left">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                <a-form-item field="area" label="跑区">
                                    <a-select v-model="queryData.area" placeholder="请选择乐跑跑区" default-value="">
                                        <a-option value="">所有</a-option>
                                        <a-option v-for="(item, index) in areas" :key="index" :value="item">
                                            {{ item }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="path_id" label="路径ID">
                                    <a-input-number v-model="queryData.path_id" placeholder="请输入路径ID" :step="1"
                                        :precision="0" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="min_distance" label="最短距离">
                                    <a-input-number v-model="queryData.min_distance" placeholder="请输入最短距离" :step="0.01"
                                        :precision="2" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="max_distance" label="最长距离">
                                    <a-input-number v-model="queryData.max_distance" placeholder="请输入最长距离" :step="0.01"
                                        :precision="2" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="area" label="状态">
                                    <a-select v-model="queryData.state" :options="state" placeholder="请选择路径状态"
                                        :default-value="-1" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
                <a-divider style="height: 84px" direction="vertical" />
                <a-col :flex="'86px'" style="text-align: right">
                    <a-space direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon>
                                <icon-search />
                            </template>
                            搜索
                        </a-button>
                        <a-button @click="reset">
                            <template #icon>
                                <icon-refresh />
                            </template>
                            重置
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>

            <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading" :columns="columns"
                :pagination="{
                    showPageSize: true,
                    showJumper: true,
                    showTotal: true,
                    pageSize: pagination.pagesize,
                    current: pagination.current,
                    total: pagination.total
                }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
                <template #distance="{ record }">
                    {{ Number(record.distance).toFixed(2) }} Km
                </template>
                <template #time="{ record }">
                    {{ formatSecondsToMinSec(record.time) }}
                </template>
                <template #state="{ record }">
                    <a-tag color="blue" v-if="!record.state">待审核</a-tag>
                    <a-tag color="green" v-else-if="record.state === 1">审核通过</a-tag>
                    <a-tag color="red" v-else-if="record.state === 2">审核失败</a-tag>
                </template>
                <template #optional="{ record }">
                    <a-button @click="$router.push(`/path/detail/${record.id}`)">查看详情</a-button>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { GetPathList } from '@/api/pathData'
import { Notification } from '@arco-design/web-vue'

const queryData = reactive({
    area: '',
    path_id: '',
    min_distance: 1.60,
    max_distance: 10.00,
    state: -1
})

const pagination = reactive({
    total: 0,
    current: 1, // 默认从第1页开始
    pagesize: 20
})

const loading = ref(false)
const data = ref([])

const state = [
    { label: '全部', value: -1 }, { label: '待审核', value: 0 }, { label: '审核通过', value: 1 }, { label: '审核失败', value: 2 }
]
const areas = ["重庆工程学院南泉校区", "重庆工程学院双桥校区"]

const columns = [{
    title: 'ID',
    dataIndex: 'id',
}, {
    title: '跑区',
    dataIndex: 'run_zone_name',
}, {
    title: '跑步距离(Km)',
    slotName: 'distance',
}, {
    title: '用时',
    slotName: 'time'
}, {
    title: '配速',
    dataIndex: 'speed',
}, {
    title: '使用次数',
    dataIndex: 'count',
}, {
    title: '状态',
    slotName: 'state'
}, {
    title: '操作',
    slotName: 'optional'
}]

const search = () => {
    pagination.current = 1
    getPathList()
}

const reset = () => {
    pagination.current = 1
    queryData.area = ''
    queryData.state = -1
    queryData.path_id = ''
    queryData.min_distance = 1.60
    queryData.max_distance = 10.00
    getPathList()
}

const getPathList = async () => {
    try {
        loading.value = true
        const reqData = {
            ...queryData,
            pagesize: pagination.pagesize,
            current: pagination.current
        }
        const res = await GetPathList(reqData)
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取路径数据失败！',
                content: res?.msg ?? '请稍后再试'
            })

        data.value = res.data
        pagination.total = res.pagination.total
    } catch (error) {
        Notification.error({
            title: '获取路径数据失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

// 分页 - 页码变化
const handlePageChange = (page) => {
    pagination.current = page
    getPathList()
}

// 分页 - 每页条数变化
const handlePageSizeChange = (size) => {
    pagination.pagesize = size
    pagination.current = 1 // 页大小变化后回到第一页
    getPathList()
}

onMounted(() => {
    getPathList()
})

function formatSecondsToMinSec(totalSeconds) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
}
</script>

<style scoped>
.container {
    padding: 0 20px 20px 20px;
}

.table {
    margin-top: 15px;
}
</style>