home 接口对接

src/api/login.js

@@ -1,10 +1,18 @@
-import request from './request'
+import request from "./request";
 
-export const login = params => {
-  console.log(params)
+export const login = (params) => {
+  console.log(params);
   return request({
-    url: 'url',
-    method: 'post',
+    url: "url",
+    method: "post",
     params,
-  })
-}
+  });
+};
+
+export const productList = (params) => {
+  return request({
+    url: "/product-information/page",
+    method: "get",
+    params
+  });
+};

src/api/request.js

@@ -1,7 +1,6 @@
 import axios from 'axios'
-
 const instance = axios.create({
-  baseURL: '',
+  baseURL: 'http://172.20.10.2:8080',
   timeout: 1000 * 30,
 })
 
@@ -19,7 +18,7 @@ instance.interceptors.request.use(
 // 添加响应拦截器
 instance.interceptors.response.use(
   function (response) {
-    return response
+    return response.data
   },
   function (error) {
     return Promise.reject(error)

src/views/Home.vue

@@ -1,15 +1,53 @@
 <template>
-  <el-calendar v-model="value" />
-
+  <div>
+    <el-table :data="tableData" style="width: 100%" border size="large ">
+      <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 prop="dateTime" label="创建时间" align="center" />
+    </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>
+  </div>
 </template>
 <script setup >
-import { ref } from 'vue'
-const value = ref(new Date())
+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 getList = async () => {
+  let { code, data } = await productList(page.value);
+  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();
+};
+onMounted(() => {
+  getList();
+});
 </script>
 <script>
 export default {
-  name: 'Home',
-}
+  name: "Home",
+};
 </script>
 <style scoped lang="scss">
 </style>