Cold_offline_web/src/views/report/audit/TabFour.vue

<template>
  <n-space>
    <n-input
      v-model:value="queryData.T_sn"
      type="text"
      placeholder="请输入SN搜索"
    />
    <n-input
      v-model:value="queryData.T_id"
      type="text"
      placeholder="请输入设备编号搜索"
    />
    <n-date-picker
      type="datetimerange"
      value-format="yyyy-MM-dd HH:mm"
      @update:formatted-value="
        (value) => {
          queryData.Time_start = value[0];
          queryData.Time_end = value[1];
        }
      "
      clearable
    />
    <n-button type="primary" @click="extractTask">搜索</n-button>
  </n-space>
  <n-data-table
    remote
    :loading="loading"
    :columns="columns"
    :data="dataList"
    :pagination="pagination"
    :bordered="false"
    flex-height
    class="flex-1"
  />
</template>

<script setup>
import { extractTaskData } from '@/api';

const props = defineProps({
  task: {
    required: true,
    default: {},
  },
});

// 查询参数
const queryData = reactive({
  T_task_id: props.task.T_task_id,
  Time_start: null,
  Time_end: null,
});

// 列表
const dataList = ref([]);

const loading = ref(false);

// 需要展示的列
const columns = [
  {
    title: 'ID',
    key: 'T_id',
  },
  {
    title: '设备编号',
    key: 'T_Class_id',
  },
  {
    title: 'SN',
    key: 'T_sn',
  },
  {
    title: '温度℃',
    key: 'T_t',
  },
];

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

// 获取列表
const extractTask = async () => {
  try {
    loading.value = true;
    const { data: res } = await extractTaskData({
      T_task_id: queryData.T_task_id,
      Time_start: queryData.Time_start + '',
      Time_end: queryData.Time_end + '',
    });
    dataList.value = res.Data.List || [];
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

extractTask();
</script>

<style scoped></style>