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,47 +1,48 @@
-<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 label="操作" width="150">
-      <template #default="scope">
-        <el-button size="small" type="primary">编辑</el-button>
-        <el-button size="small" @click="del(scope.row)">删除</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
 <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()
 
-    import { reactive } from "vue";
+//数据
-    import AxiosDR from "@/utils/AxiosDr.js";
+const data = reactive({
-    import { ElMessage, ElMessageBox } from "element-plus";
+  list: []
+})
 
-    const data = reactive({
+//在组件成功挂载到DOM并完成首次渲染后调用
-      list:[
+onMounted(() => {
-        {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)
+    //console.log(result)
-      //错误提示
+
-      if ( !res.status ) {
+    if(!res.status){
       ElMessage.error(res.msg)
       return
     }
 
     data.list = res.data.list
-    }) .catch (err => {
+  }).catch(err => {
-      console.log("err:",err)
+    console.log("err:", err)
   })
+})
 
-    const del = async (row) => {
+//删除
+/*
+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',
@@ -51,16 +52,16 @@
 
     //删除
     //let delResult = await AxiosDR.post('/api/adm/del',{id: row.id})
-        let delResult = await AxiosDR.post('/api/adm/del', {id: String(row.id)})
+    let delResult = await AxiosDR.post('/api/adm/del',{id: String(row.id)})
-        if (!delResult.status) {
+    if(!delResult.status){
       ElMessage.error(delResult.msg)
       return
     }
 
     //重新获取列表
     let getListResult = await AxiosDR.get('/api/adm/list')
-        if (!getListResult.status) {
+    if(!getListResult.status){
-          ElMessage.error(getListResult.msg)
+      ElMessage.error(delResult.msg)
       return
     }
 
@@ -68,12 +69,31 @@
   } catch (err) {
     console.log("err:", err)
   }
-    }
+}
-
-
 
+//编辑
+const edit = (row) => {
+  //跳转至编辑页
+  router.push({ path: '/admin/administrator/edit', query: { id: row.id } })
+}
 </script>
 
-<style lang="scss" scoped>
+<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 label="操作" width="150">
+      <template #default="scope">
+        <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>
+
+<style scoped>
 
 </style>