Cold_offline_web/src/views/project/index.vue

<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :bordered="false"
  />
</template>

<script setup>
import { h } from "vue";
import { NButton, NSpace } from "naive-ui";
import { getTaskData } from "@/api";

const router = useRouter();

// 查询参数
const queryData = reactive({
  T_uuid: "",
  T_name: "",
  page: 1,
  page_z: 10,
});

// 任务列表
const data = ref([]);

// 需要展示的列
const columns = [
  {
    title: "公司名称",
    key: "T_user_name",
  },
  {
    title: "报告名称",
    key: "T_name",
  },
  {
    title: "截止时间",
    key: "T_deadline",
  },
  {
    title: "流程",
    key: "length",
    render() {
      return ["数据采集", "报告编写", "交付审核"].map((item) =>
        h(
          "span",
          {},
          {
            default: () => item,
          }
        )
      );
    },
  },
  {
    title: "操作",
    key: "actions",
    render(row) {
      return h(
        NSpace,
        {},
        {
          default: () =>
            [
              "设备管理",
              "数据来源",
              "数据编辑",
              "数据校验",
              "报告生成",
              "报告编辑",
              "报告审核",
            ].map((item) =>
              h(
                NButton,
                {
                  type: "primary",
                  size: "small",
                  onClick: () => {
                    if (item === "设备管理") {
                      router.push(`/equipment/${row.Id}`);
                    } else if (item === "数据来源") {
                      router.push("/data_source");
                    } else if (item === "数据编辑") {
                      router.push("/data_source");
                    } else if (item === "数据校验") {
                      router.push("/data_source");
                    } else if (item === "报告生成") {
                      router.push("/data_source");
                    } else if (item === "报告编辑") {
                      router.push("/data_source");
                    } else {
                      router.push("/data_source");
                    }
                  },
                },
                { default: () => item }
              )
            ),
        }
      );
    },
  },
];

// 分页数据源
const pagination = reactive({
  page: queryData.page,
  pageSize: queryData.page_z,
  itemCount: 0,
  onChange: (page) => {
    pagination.page = page;
    queryData.page = page;
    getDataList();
  },
});

// 任务管理（列表）
const getDataList = async () => {
  const { data: res } = await getTaskData(queryData);
  pagination.itemCount = res.Data.Num;
  data.value = res.Data.List;
};

getDataList();
</script>

<style scoped></style>