home update

package.json

@@ -13,6 +13,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@vueuse/core": "^10.0.2",
     "axios": "^1.3.6",
+    "dayjs": "^1.11.7",
     "element-plus": "^2.3.3",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.33",

src/api/login.js

@@ -9,6 +9,15 @@ export const login = (params) => {
   });
 };
 
+export const productInformationList = (params) => {
+  return request({
+    url: "/test-information/page",
+    method: "get",
+    params
+  });
+};
+
+// 测试被测设备列表
 export const productList = (params) => {
   return request({
     url: "/product-information/page",

src/router/index.js

@@ -16,7 +16,7 @@ const routes = [
       {
         path: '/home',
         name: 'home',
-        component: () => import('../views/Home.vue'),
+        component: () => import('../views/Home/index.vue'),
       },
       {
         path: '/test',

src/views/Home.vue

@@ -1,6 +1,14 @@
 <template>
-  <div>
-    <el-table :data="tableData" style="width: 100%" border size="large ">
+  <el-drawer
+    ref="drawerRef"
+    v-model="props.visible"
+    title="I have a nested form inside!"
+    :before-close="handleClose"
+    direction="ltr"
+    class="demo-drawer"
+    size="80%"
+  >
+    <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" />
@@ -19,35 +27,46 @@
         @current-change="currentChange"
       />
     </div>
-  </div>
+  </el-drawer>
 </template>
-<script setup >
-import { productList } from "@/api/login";
+
+<script setup>
+import { productInformationList } from "@/api/login";
 import { onMounted, ref } from "vue";
-const tableData = ref([]);
+const props = defineProps({
+  testId: {
+    type: String,
+    default: "",
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
 const page = ref({
   current: 1,
   size: 10,
 });
 const total = ref(0);
-const getList = async () => {
-  let { code, data } = await productList(page.value);
+const tableData = ref([]);
+const getData = async () => {
+  let { code, data } = await productInformationList({
+    ...page.value,
+    testId: props.testId,
+  });
   if (code != 200) return;
-  tableData.value = data.records.map((item,i)=>({...item,index:(page.value.current-1)*10+i+1}));
+  tableData.value = data.records;
   total.value = data.total;
 };
-const currentChange = (val) => {
-  page.value.current = val;
-  getList();
-};
 onMounted(() => {
-  getList();
+  getData();
 });
+const handleClose = () => {};
 </script>
-<script>
+ <script>
 export default {
-  name: "Home",
+  name: "DrawerM",
 };
 </script>
-<style scoped lang="scss">
+<style lang='scss' scoped>
 </style>

src/views/Home/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-table
+    :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 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>
+  <Drawer v-if="DrawerVisible" :testId="id" :visible="DrawerVisible"></Drawer>
+</template>
+  <script setup >
+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 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();
+};
+
+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>
+  

yarn.lock

@@ -579,6 +579,11 @@ dayjs@^1.11.3:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
+dayjs@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"