nuclear-detection-frontend/src/components/Task.vue

<template>
  <div class="task_component">
    <t-card>
      <template #title>
        <t-space direction="vertical">
          <t-breadcrumb>
            <t-breadcrumbItem>首页</t-breadcrumbItem>
            <t-breadcrumbItem>任务管理中心</t-breadcrumbItem>
          </t-breadcrumb>
        </t-space>
      </template>

      <t-table
        bordered
        hover
        tableLayout="auto"
        row-key="id"
        :data="data"
        :columns="columns"
        resizable
      />
    </t-card>
  </div>
</template>

<script lang="jsx">
import { taskListApi } from '@/api/task'
export default {
  data() {
    return {
      data: [],
      columns: [
        {
          colKey: 'operatorName',
          title: '操作员',
        },
        {
          colKey: 'publishTime',
          title: '发布时间',
        },
        {
          colKey: 'nuclearStationName',
          title: '核电站名称',
          ellipsis: true,
        },
        {
          colKey: 'nuclearCoreName',
          title: '核反应堆',
        },
        {
          colKey: 'status',
          title: '任务状态',
        },
        {
          colKey: 'startTime',
          title: '开始时间',
        },
        {
          colKey: 'endTime',
          title: '完成时间',
        },
        {
          title: '操作',
          cell: (h, { row }) => (
            <div>
              <t-button theme="danger" onClick={() => this.delTask(row.id)}>
                删除任务
              </t-button>
              <t-button theme="danger" onClick={() => this.delExcel(row.id)}>
                删除excel
              </t-button>
              <t-button theme="danger" onClick={() => this.uploadExcel(row.id)}>
                上传Excel
              </t-button>
            </div>
          ),
        },
      ],
    }
  },
  methods: {
    delTask(taskId) {},
    delExcel(taskId) {},
    uploadExcel(taskId) {},
    async getTaskList() {
      const res = await taskListApi()
      if (res?.code == 200) {
        this.data = res?.data
      }
    },
  },
  mounted() {
    this.getTaskList()
  },
}
</script>

<style lang="scss" scoped>
.task_component {
}
</style>