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/router/index.js

@@ -23,6 +23,10 @@ const routes= [
                 path: "administrator/add", // http://localhost:5173/admin/administrator/add
                 component: () => import("@/views/admin/administrator/add.vue")
             },
+            {
+                path: "administrator/edit", // http://localhost:5173/admin/administrator/edit
+                component: () => import("@/views/admin/administrator/edit.vue")
+            },
             {
                 path: "administrator/list", // http://localhost:5173/admin/administrator/list
                 component: () => import("@/views/admin/administrator/list.vue")

src/views/admin/administrator/add.vue

@@ -1,19 +1,90 @@
-<template>
+<script setup>
-  <div>
+  import { reactive } from 'vue'
-    添加管理员
+  import {ElMessage} from "element-plus";
-  </div>
+  import axiosDr from "@/utils/AxiosDr.js";
-</template>
+  import TimeDR from "@/utils/TimeDR.js";
+  import AxiosDR from "@/utils/AxiosDr.js";
 
-<script>
+  const data = reactive({
-export default {
+    name: '',
-  setup() {
+    password: '',
+    email: '',
+    gender: '0',
+    remark: 'dengruicode.com',
+  })
 
+  //添加
+  const add = () => {
+    console.log(data)
 
-    return {}
+    if ( data.name == '' ) {
+      ElMessage.error("请输入用户名")
+      return
+    }
+
+    if ( data.password == '' ) {
+      ElMessage.error("请输入密码")
+      return
+    }
+
+    data.create_time = TimeDR.now()
+
+    AxiosDR.post('/api/adm/add',data).then(res => {
+      console.log(res)
+      //错误提示
+      if ( !res.status ) {
+        ElMessage.error(res.msg)
+        return
+      }
+      ElMessage.success("添加成功")
+    }) .catch (err => {
+      console.log("err:",err)
+    })
+  }
+
+  //重置
+  const reset = () => {
+    data.name = ''
+    data.password = ''
+    data.email = ''
+    data.gender = '0'
+    data.remark = 'dengruicode.com'
   }
-}
 </script>
 
-<style lang="scss" scoped>
+<template>
+  <el-form label-width="80" style="width: 400px;">
+    <el-form-item label="名称">
+      <el-input v-model="data.name" placeholder="请填写名称" />
+    </el-form-item>
+
+    <el-form-item label="密码">
+      <el-input v-model="data.password" show-password placeholder="请填写密码" />
+    </el-form-item>
+
+    <el-form-item label="邮箱">
+      <el-input v-model="data.email" />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input type="textarea" v-model="data.remark" rows="4" />
+    </el-form-item>
+
+    <el-form-item label="性别">
+      <el-radio-group v-model="data.gender">
+        <el-radio value="0">未知</el-radio>
+        <el-radio value="1">男</el-radio>
+        <el-radio value="2">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="add">添加</el-button>
+      <el-button @click="reset">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
 
 </style>

src/views/admin/administrator/edit.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { reactive,onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute,useRouter } from 'vue-router'
+import AxiosDR from '@/utils/AxiosDr.js'
+
+//数据
+const data = reactive({
+  name: '',
+  password: '',
+  email: '',
+  gender: '0',
+  remark: 'dengruicode.com',
+})
+
+//初始化
+const route = useRoute() //路由
+const router = useRouter() //路由器
+
+//参数
+let id = route.query.id
+//console.log(id)
+
+onMounted(() => {
+  //获取当前记录
+  AxiosDR.get(`/api/adm/getById?id=${id}`).then(res => {
+    console.log(res)
+
+    if(!res.status){
+      ElMessage.error(res.msg)
+      return
+    }
+
+    data.name = res.data.name
+    data.email = res.data.email
+    data.gender = String(res.data.gender)
+    data.remark = res.data.remark
+  }).catch(err => {
+    console.log("err:", err)
+  })
+})
+
+//编辑
+const edit = () => {
+  //console.log(data)
+
+  if (data.name == '') {
+    ElMessage.error("请填写名称")
+    return
+  }
+
+  data.id = id //添加属性
+  if (data.password == '') {
+    delete data.password //删除属性
+  }
+
+  AxiosDR.post('/api/adm/edit',data).then(res => {
+    console.log(res)
+
+    if(!res.status){
+      ElMessage.error(res.msg)
+      return
+    }
+
+    ElMessage.success("编辑成功")
+  }).catch(err => {
+    console.log("err:", err)
+  })
+}
+
+//返回
+const back = () => {
+  router.go(-1)
+}
+</script>
+
+<template>
+  <el-form label-width="80" style="width: 400px;">
+    <el-form-item label="名称">
+      <el-input v-model="data.name" placeholder="请填写名称" />
+    </el-form-item>
+
+    <el-form-item label="密码">
+      <el-input v-model="data.password" show-password placeholder="请填写密码" />
+    </el-form-item>
+
+    <el-form-item label="邮箱">
+      <el-input v-model="data.email" />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input type="textarea" v-model="data.remark" rows="4" />
+    </el-form-item>
+
+    <el-form-item label="性别">
+      <el-radio-group v-model="data.gender">
+        <el-radio value="0">未知</el-radio>
+        <el-radio value="1">男</el-radio>
+        <el-radio value="2">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="edit">编辑</el-button>
+      <el-button @click="back">返回</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+
+</style>

src/views/admin/administrator/list.vue

@@ -1,54 +1,99 @@
+<script setup>
+import { reactive,onMounted } from 'vue'
+import { ElMessage,ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
+import AxiosDR from '@/utils/AxiosDr.js'
+
+//初始化
+const router = useRouter()
+
+//数据
+const data = reactive({
+  list: []
+})
+
+//在组件成功挂载到DOM并完成首次渲染后调用
+onMounted(() => {
+  AxiosDR.get('/api/adm/list').then(res => {
+    //console.log(result)
+
+    if(!res.status){
+      ElMessage.error(res.msg)
+      return
+    }
+
+    data.list = res.data.list
+  }).catch(err => {
+    console.log("err:", err)
+  })
+})
+
+//删除
+/*
+const del = (row) => {
+    ElMessageBox.confirm('确认删除?', '标题', {
+        type: 'warning', // success | warning | info | error
+        confirmButtonText: '确认',
+        cancelButtonText: '取消'
+    }).then(() => {
+        console.log('确认删除 id:',row.id)
+    }).catch(() => {
+        console.log('取消删除')
+    })
+}
+*/
+const del = async (row) => {
+  try {
+    await ElMessageBox.confirm('确认删除?', '标题', {
+      type: 'warning',
+      confirmButtonText: '确认',
+      cancelButtonText: '取消'
+    })
+
+    //删除
+    //let delResult = await AxiosDR.post('/api/adm/del',{id: row.id})
+    let delResult = await AxiosDR.post('/api/adm/del',{id: String(row.id)})
+    if(!delResult.status){
+      ElMessage.error(delResult.msg)
+      return
+    }
+
+    //重新获取列表
+    let getListResult = await AxiosDR.get('/api/adm/list')
+    if(!getListResult.status){
+      ElMessage.error(delResult.msg)
+      return
+    }
+
+    data.list = getListResult.data.list //重置
+  } catch (err) {
+    console.log("err:", err)
+  }
+}
+
+//编辑
+const edit = (row) => {
+  //跳转至编辑页
+  router.push({ path: '/admin/administrator/edit', query: { id: row.id } })
+}
+</script>
+
 <template>
   <el-table :data="data.list" border>
     <el-table-column prop="id" label="ID" width="60" />
     <el-table-column prop="name" label="名称" />
     <el-table-column prop="email" label="邮箱" />
-    <el-table-column prop="remark" label="备注" />
+    <el-table-column prop="remark" label="备注"/>
 
     <el-table-column label="操作" width="150">
       <template #default="scope">
-        <el-button size="small" type="primary">编辑</el-button>
+        <el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button>
-        <el-button size="small">删除</el-button>
+        <el-button size="small" @click="del(scope.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
 </template>
 
-<script setup>
+<style scoped>
-
-//模拟数据
-
-    import { reactive } from "vue";
-    import AxiosDR from "@/utils/AxiosDr.js";
-    import {ElMessage} from "element-plus";
-
-    const data = reactive({
-      list:[
-        {id: '1', name: '李龙龙', email:'lilonglong@koteladt.com', remark:'lll'},
-        {id: '2', name: '张三', email:'zhangsan@koteladt.com', remark:'zs'},
-      ]
-    })
-    AxiosDR.get('/api/adm/list').then(res => {
-      console.log(res)
-      //错误提示
-      if ( !res.status ) {
-        ElMessage.error(res.msg)
-        return
-      }
-
-      data.list = res.data.list
-    }) .catch (err => {
-      console.log("err:",err)
-    })
-
-
-
-
-
-
-
-</script>
-
-<style lang="scss" scoped>
 
 </style>

src/views/admin/category/list.vue

@@ -1,20 +1,68 @@
-<template>
+<script setup>
-  <div>
+import { reactive } from 'vue'
-    类别管理页面
 
-  </div>
+//数据
-</template>
+const data = reactive({
-
+  path: [
-<script>
+    { id: '1', name: '类别', parent_id: '0', create_time: '2024-03-22' },
-export default {
+    { id: '2', name: '前端', parent_id: '1', create_time: '2024-03-23' }
-  setup() {
+  ],
-
+  list: [
-
+    { id: '3', name: 'Vue', parent_id: '2', status: '1', create_time: '2024-03-23' },
-    return {}
+    { 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>
+
+    <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>