admin

10_vuecli/helloworld/src/views/PageFour.vue

@@ -12,6 +12,7 @@
     </div>
 </template>
 <script>
+// 使用前 引入axios
 import axios from 'axios'
 export default {
     name: 'PageFour',
@@ -21,6 +22,7 @@ export default {
         }
     },
     created() {
+        // axios 是第三方公司开发的一款HTTP工具 发送请求
         axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList").then((res)=>{
             console.log(res);
         })

10_vuecli/vueadmin/src/api/message.js

@@ -25,3 +25,11 @@ export function addMessage(data) {
         data
     })
 }
+// 通过id获取信息
+export function getMessageById(id){
+    return request({
+        url:"/messageController/getMessageById",
+        method:"get",
+        params:{jrid:id}
+    })
+}

10_vuecli/vueadmin/src/router/index.js

@@ -139,7 +139,8 @@ export const constantRoutes = [
         meta:{title:'消息列表',icon:'el-icon-notebook-2'}
       },
       {
-        path: 'messageadd',
+        // url传递参数 就是在path后边拼接一个变量“/:变量名”
+        path: 'messageadd/:id',
         name: 'MessageAdd',
         component:()=>import('@/views/message/MessageAdd.vue'),
         meta:{title:'添加消息',icon:'el-icon-document-add'}

10_vuecli/vueadmin/src/views/level/LevelList.vue

@@ -7,25 +7,24 @@
             </div>
             <div class="table-content">
                 <!-- 表格 -->
-                <template>
-                    <el-table :data="tableData" style="width: 100%">
-                        <el-table-column label="序号" type="index" width="180"></el-table-column>
-                        <el-table-column label="等级ID" prop="jrid"></el-table-column>
-                        <el-table-column label="等级名称" prop="levelname"></el-table-column>
-                        <el-table-column label="操作">
-                            <template slot-scope="scope">
-                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                                <!-- <el-button size="mini" type="danger"
+                <el-table :data="tableData" style="width: 100%">
+                    <el-table-column label="序号" type="index" width="180"></el-table-column>
+                    <el-table-column label="等级ID" prop="jrid"></el-table-column>
+                    <el-table-column label="等级名称" prop="levelname"></el-table-column>
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                            <!-- <el-button size="mini" type="danger"
                                     @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
-                                <template>
-                                    <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(scope.row)">
-                                        <el-button :disabled="false" size="mini" type="danger" slot="reference">删除</el-button>
-                                    </el-popconfirm>
-                                </template>
+                            <template>
+                                <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(scope.row)">
+                                    <el-button :disabled="false" size="mini" type="danger"
+                                        slot="reference">删除</el-button>
+                                </el-popconfirm>
                             </template>
-                        </el-table-column>
-                    </el-table>
-                </template>
+                        </template>
+                    </el-table-column>
+                </el-table>
             </div>
         </div>
     </div>
@@ -67,7 +66,7 @@ export default {
             let levelId = row.jrid;
             let levelName = row.levelname;
             // 跳转编辑等级页面 并传递等级ID和等级名称
-            this.$router.push({path: '/level/leveladd', query: {levelId, levelName}})
+            this.$router.push({ path: '/level/leveladd', query: { levelId, levelName } })
         },
         // 删除等级函数
         handleDelete(row) {

10_vuecli/vueadmin/src/views/message/MessageAdd.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="message-add">
         <el-form :model="messageAddForm" ref="messageAddForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="信息ID" prop="jrid" v-if="messageAddForm.jrid">
+                <el-input disabled v-model="messageAddForm.jrid" autocomplete="off"></el-input>
+            </el-form-item>
             <el-form-item label="人员名称" prop="jrname" :rules="[
                 { required: true, message: '人员名称不能为空' },
             ]">
@@ -37,7 +40,7 @@
 <script>
 import { getAddressList } from '@/api/address';
 import { getLevelList } from '@/api/level';
-import { addMessage } from '@/api/message';
+import { addMessage,getMessageById } from '@/api/message';
 export default {
     name: 'MessageAdd',
     data() {
@@ -54,8 +57,28 @@ export default {
     },
     created(){
         this.initData();
+        this.initPage();
     },
     methods:{
+        // 初始化页面
+        initPage(){
+            // url 传递参数使用params接收
+            let id = this.$route.params.id;
+            console.log(id);
+            if(id){
+                getMessageById(id).then((res)=>{
+                    console.log(res);
+                    // this.messageAddForm = {
+                    //     jrid : res.data.jrid,
+                    //     jrtel:...
+                    // }
+                    let {jrid,jrtel,jraddressesid,jrlevel,jrname} = res.data;
+                    this.messageAddForm = {
+                        jrid,jrtel,jraddressesid,jrlevel,jrname
+                    }
+                })
+            }
+        },
         // 初始化数据
         initData(){
             // 获取地址列表
@@ -76,7 +99,7 @@ export default {
                     addMessage(this.messageAddForm).then(res => {
                         console.log(res);
                         this.$message({
-                            message: '添加成功',
+                            message: this.messageAddForm.jrid?"修改成功":'添加成功',
                             type: 'success'
                         });
                         // 跳转页面

10_vuecli/vueadmin/src/views/message/MessageList.vue

@@ -133,7 +133,8 @@ export default {
         },
         // 编辑方法
         handleEdit(row) {
-            console.log(row);
+            console.log(row.jrid);
+            this.$router.push("/message/messageadd/"+row.jrid)
         },
         // 重置方法
         resetData(){