project-vue/src/views/orders/list/index.vue

<!-- order.vue -->
<template>
  <div class="order-container">
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ record.status }}
        </a-tag>
      </template>
      <template #createTime="{ text }">
        {{ formatDate(text) }}
      </template>
      <template #completeTime="{ text }">
        {{ text ? formatDate(text) : '-' }}
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Table as ATable, Tag as ATag } from 'ant-design-vue';
import axios from 'axios';
import { localStg } from '@/utils/storage';
import { apiRequestGet } from '@/utils/api';
// 表格列定义
const columns = [
  {
    title: '工单ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '设备编码',
    dataIndex: 'facilityCode',
    key: 'facilityCode',
  },
  {
    title: '设备类型',
    dataIndex: 'facilityType',
    key: 'facilityType',
  },
  {
    title: '创建者',
    dataIndex: 'creatorName',
    key: 'creatorName',
  },
  {
    title: '负责人',
    dataIndex: 'assigneeName',
    key: 'assigneeName',
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    slots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    slots: { customRender: 'createTime' },
  },
  {
    title: '完成时间',
    dataIndex: 'completeTime',
    key: 'completeTime',
    slots: { customRender: 'completeTime' },
  },
  {
    title: '成本',
    dataIndex: 'cost',
    key: 'cost',
  },
];

// 表格数据和状态
const dataSource = ref([]);
const loading = ref(false);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '30', '50'],
});

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'PENDING':
      return 'orange';
    case 'IN_PROGRESS':
      return 'blue';
    case 'COMPLETED':
      return 'green';
    default:
      return 'red';
  }
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

// 获取数据
const fetchData = async (page = 1, pageSize = 10) => {
  loading.value = true;
  const token = localStg.get('token'); // 替换为你的 token 键

  try {
    const response = await apiRequestGet('/work-orders/my-orders', 
    // {
    // params: {
    //   page: page - 1, // 后端通常从0开始计数
    //   size: pageSize,
    // }
    //}
  );
    
    if (response.data.success) {
      dataSource.value = response.data.data.content;
      pagination.value = {
        current: response.data.data.pageable.pageNumber + 1,
        pageSize: response.data.data.pageable.pageSize,
        total: response.data.data.totalElements,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50'],
      };
    }
  } catch (error) {
    console.error('Failed to fetch orders:', error);
  } finally {
    loading.value = false;
  }
};

// 表格变更事件处理（分页、排序等）
const handleTableChange = (pag, filters, sorter) => {
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;
  fetchData(pag.current, pag.pageSize);
};

// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.order-container {
  padding: 20px;
}
</style>