<template>
|
<div class="table-container">
|
<el-table :data="tableData" style="width: 100%" height="400" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" />
|
<el-table-column type="index" label="序号" width="60" />
|
<el-table-column prop="nickname" label="机巢名称" />
|
<el-table-column prop="estimated_arrival_time" label="预计到达时间" />
|
<el-table-column prop="exe_distance" label="执行里程" />
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pageParams.page"
|
v-model:page-size="pageParams.limit"
|
:page-sizes="[10, 20, 30]"
|
layout="total, sizes, prev, pager, next"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getFlyingNestBy } from '@/api/home/task';
|
|
const props = defineProps({
|
waylineId: {
|
type: String,
|
default: ''
|
},
|
waylineType: {
|
type: Number,
|
default: 0
|
}
|
});
|
|
// 选中的数据
|
const selectedRows = ref([]);
|
// 分页参数
|
let pageParams = reactive({
|
wayline_id: props.waylineId,
|
type: props.waylineType,
|
page: 1,
|
limit: 10
|
});
|
// 获取可用机巢列表数据
|
const total = ref(0);
|
const tableData = ref([]);
|
const getNestList = async () => {
|
tableData.value = [];
|
const res = await getFlyingNestBy(pageParams);
|
|
if (res.data.code === 0) {
|
console.log(res.data.data, '哒哒哒');
|
tableData.value = res.data.data;
|
}
|
};
|
// 分页大小改变
|
const handleSizeChange = (val) => {
|
pageParams.limit = val;
|
getNestList();
|
};
|
|
// 页码改变
|
const handleCurrentChange = (val) => {
|
pageParams.page = val;
|
getNestList();
|
};
|
const emit = defineEmits(['update:selected']);
|
const handleSelectionChange = (val) => {
|
selectedRows.value = val;
|
// 可以通过emit将选中数据传给父组件
|
emit('update:selected', val);
|
};
|
// 监听航线ID变化
|
watch(() => props.waylineId, (newVal) => {
|
pageParams.wayline_id = newVal;
|
if (newVal) {
|
pageParams.page = 1;
|
getNestList();
|
}
|
}, { immediate: true });
|
onMounted(() => {
|
// getNestList();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.table-container {
|
height: 500px;
|
// display: flex;
|
// flex-direction: column;
|
|
.pagination {
|
margin-top: 10px;
|
}
|
|
// :deep(.el-table) {
|
// flex: 1;
|
// background-color: transparent;
|
// --el-table-border-color: rgba(255, 255, 255, 0.1);
|
// --el-table-header-bg-color: rgba(31, 62, 122, 0.5);
|
// --el-table-header-text-color: #fff;
|
// --el-table-text-color: #fff;
|
// }
|
}
|
</style>
|
