26.编辑管理员-路由传参

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/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,79 +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" @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, ElMessageBox } 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)
-    })
-
-    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(getListResult.msg)
-          return
-        }
-
-        data.list = getListResult.data.list //重置
-      } catch (err) {
-        console.log("err:", err)
-      }
-    }
-
-
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+</style>