27.类别列表页面-布局

src/assets/admin/css/home.css

@@ -112,6 +112,24 @@ li {
     overflow-y: auto;
 }
 
+/* color */
+
+.blue {
+    color: #1e9eff;
+}
+
+.green {
+    color: #15baaa;
+}
+
+.orange {
+    color: #feb801;
+}
+
+.red {
+    color: #f75a23;
+}
+
 /* 重写 ElementPlus 默认样式 */
 /* 表格 */
 .el-table {

src/views/admin/category/list.vue

@@ -1,20 +1,68 @@
-<template>
-  <div>
-    类别管理页面
+<script setup>
+import { reactive } from 'vue'
 
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-
-
-    return {}
-  }
-}
+//数据
+const data = reactive({
+  path: [
+    { id: '1', name: '类别', parent_id: '0', create_time: '2024-03-22' },
+    { id: '2', name: '前端', parent_id: '1', create_time: '2024-03-23' }
+  ],
+  list: [
+    { id: '3', name: 'Vue', parent_id: '2', status: '1', create_time: '2024-03-23' },
+    { id: '4', name: 'ES', parent_id: '2', status: '1', create_time: '2024-03-24' },
+    { id: '5', name: 'JS', parent_id: '2', status: '0', create_time: '2024-03-25' }
+  ]
+})
 </script>
 
-<style lang="scss" scoped>
+<template>
+  <!-- 面包屑
+  <el-breadcrumb separator="/">
+      <el-breadcrumb-item><a href="#"><el-icon><House /></el-icon></a></el-breadcrumb-item>
+      <el-breadcrumb-item><a href="#">类别</a></el-breadcrumb-item>
+      <el-breadcrumb-item><a href="#">前端</a></el-breadcrumb-item>
+  </el-breadcrumb>
+  -->
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item>
+      <a href="/admin/category/list?parent_id=0"><el-icon><House /></el-icon></a>
+    </el-breadcrumb-item>
 
-</style>
+    <el-breadcrumb-item v-for="value in data.path" :key="value.id">
+      <a :href="`/admin/category/list?parent_id=${value.id}`">{{ value.name }}</a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+
+  <!-- 按钮 -->
+  <el-button type="primary">添加类别</el-button>
+
+  <!-- 表格 -->
+  <el-table :data="data.list" border>
+    <el-table-column prop="id" label="ID" width="80" />
+    <!-- <el-table-column prop="name" label="名称"/> -->
+    <el-table-column prop="name" label="名称">
+      <template #default="scope">
+        <a :href="`/admin/category/list?parent_id=${scope.row.id}`" class="blue">{{ scope.row.name }}</a>
+      </template>
+    </el-table-column>
+    <!-- <el-table-column prop="status" label="状态" width="80" /> -->
+    <el-table-column prop="status" label="状态" width="80">
+      <template #default="scope">
+        <span v-if="scope.row.status === '1'" class="green">显示</span>
+        <span v-else class="orange">隐藏</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="create_time" label="日期" width="200" />
+
+    <el-table-column label="操作" width="150">
+      <template #default="scope">
+        <el-button size="small" type="primary">编辑</el-button>
+        <el-button size="small">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+
+</style>