127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<template>
|
||
<a-table
|
||
:columns="columns"
|
||
:data-source="tableData"
|
||
:pagination="pagination"
|
||
@change="handleTableChange"
|
||
>
|
||
<!-- 如果需要自定义列，可以在这里添加 slot -->
|
||
</a-table>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { Table, message } from 'ant-design-vue'; // 导入 Table 和 message 组件
|
||
import axios from 'axios'; // 用于 HTTP 请求
|
||
import { localStg } from '@/utils/storage';
|
||
|
||
// 定义表格列
|
||
const columns = [
|
||
{
|
||
title: 'ID',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
},
|
||
{
|
||
title: 'Facility Code',
|
||
dataIndex: 'facilityCode',
|
||
key: 'facilityCode',
|
||
},
|
||
{
|
||
title: 'Facility Type',
|
||
dataIndex: 'facilityType',
|
||
key: 'facilityType',
|
||
},
|
||
{
|
||
title: 'Creator Name',
|
||
dataIndex: 'creatorName',
|
||
key: 'creatorName',
|
||
},
|
||
{
|
||
title: 'Assignee Name',
|
||
dataIndex: 'assigneeName',
|
||
key: 'assigneeName',
|
||
},
|
||
{
|
||
title: 'Description',
|
||
dataIndex: 'description',
|
||
key: 'description',
|
||
},
|
||
{
|
||
title: 'Status',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
},
|
||
{
|
||
title: 'Create Time',
|
||
dataIndex: 'createTime',
|
||
key: 'createTime',
|
||
},
|
||
{
|
||
title: 'Complete Time',
|
||
dataIndex: 'completeTime',
|
||
key: 'completeTime',
|
||
},
|
||
{
|
||
title: 'Cost',
|
||
dataIndex: 'cost',
|
||
key: 'cost',
|
||
},
|
||
];
|
||
|
||
// 状态变量
|
||
const tableData = ref([]); // 表格数据源，来自 API 的 data.content
|
||
const pagination = ref({
|
||
current: 1, // 当前页（前端从 1 开始）
|
||
pageSize: 10, // 每页大小
|
||
total: 0, // 总记录数
|
||
showSizeChanger: true, // 是否显示每页大小切换
|
||
showQuickJumper: true, // 是否显示快速跳转
|
||
});
|
||
|
||
// 发起 API 请求的函数
|
||
const fetchData = async (page = 1, size = 10) => {
|
||
try {
|
||
const token = localStg.get('token'); // 替换为你的 token 键
|
||
|
||
const response = await axios.get('http://localhost:8080/api/work-orders/my-orders', {
|
||
params: {
|
||
page: page - 1, // 后端 pageNumber 从 0 开始，前端从 1 开始，所以减 1
|
||
size: size,
|
||
},
|
||
headers: {
|
||
Authorization: `Bearer ${token}`, // 添加 Authorization 头部
|
||
},
|
||
});
|
||
|
||
if (response.data.success) {
|
||
tableData.value = response.data.data.content; // 更新数据源
|
||
pagination.value.total = response.data.data.totalElements; // 更新总记录数
|
||
pagination.value.current = response.data.data.number + 1; // 更新当前页
|
||
pagination.value.pageSize = response.data.data.size; // 更新每页大小
|
||
} else {
|
||
message.error(response.data.errorMsg || '请求失败');
|
||
}
|
||
} catch (error) {
|
||
message.error('网络错误或服务器异常');
|
||
console.error(error);
|
||
}
|
||
};
|
||
|
||
// 处理表格变化（分页变化时调用）
|
||
const handleTableChange = (pagination) => {
|
||
fetchData(pagination.current, pagination.pageSize);
|
||
};
|
||
|
||
// 组件挂载时加载数据
|
||
onMounted(() => {
|
||
fetchData(); // 初始加载第一页数据
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 可选：添加一些样式 */
|
||
.a-table {
|
||
margin-top: 20px;
|
||
}
|
||
</style> |