ZhuangBeiCeShi/src/views/Home/index.vue

<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    style="width: 100%"
    border
    size="large"
    @cell-click="cellClick"
  >
    <el-table-column prop="index" label="#" align="center" />
    <el-table-column prop="numId" label="编号" align="center" />
    <el-table-column prop="name" label="测试产品名称" align="center" />
    <el-table-column prop="testState" label="测试类型状态" align="center" />
    <el-table-column prop="remark" label="备注" align="center" />
    <el-table-column label="创建时间" align="center">
      <template #default="scope">
        <div>{{ dayjs(scope.row.dateTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
      </template>
    </el-table-column>
  </el-table>
  <div class="mt-5 flex items-center justify-end">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="10"
      :pager-count="11"
      :current-page="page.current"
      @current-change="currentChange"
    />
  </div>
  <Drawer
    @drawClose="DrawerVisible = false"
    v-if="DrawerVisible"
    :testId="id"
    :visible="DrawerVisible"
  ></Drawer>
</template>
  <script setup >
import dayjs from "dayjs";
import Drawer from "./Drawer.vue";
import { productList } from "@/api/login";
import { onMounted, ref } from "vue";
const tableData = ref([]);
const page = ref({
  current: 1,
  size: 10,
});
const total = ref(0);
const loading = ref(false);
const getList = async () => {
  loading.value = true;
  let { code, data } = await productList(page.value);
  loading.value = false;
  if (code != 200) return;
  tableData.value = data.records.map((item, i) => ({
    ...item,
    index: (page.value.current - 1) * 10 + i + 1,
  }));
  total.value = data.total;
};

const currentChange = (val) => {
  page.value.current = val;
  getList();
};

const DrawerVisible = ref(false);
const id = ref("");
const cellClick = async ({ testId }) => {
  id.value = testId + "";
  DrawerVisible.value = true;
};

onMounted(() => {
  getList();
});
</script>
  <script>
export default {
  name: "Home",
};
</script>
  <style scoped lang="scss">
</style>