admin

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

@@ -5,7 +5,6 @@ Vue.use(Router)
 
 /* Layout */
 import Layout from '@/layout'
-import { title } from '@/settings'
 
 
 export const constantRoutes = [
@@ -41,7 +40,7 @@ export const constantRoutes = [
     },
     children: [
       {
-        path: "/level/list",
+        path: "/level/list/:id?",
         name: "LevelList",
         // @ 代表 src 目录
         component: () => import('@/views/level/LevelList.vue'),

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

@@ -54,7 +54,8 @@ export default {
         },
         // 跳转等级添加页面
         goAddLevel() {
-            this.$router.push("/level/add")
+            // this.$router.push("/level/add")
+            this.$router.push("/level/list/111")
         },
         // 获取等级列表
         getData() {

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

@@ -1,5 +1,68 @@
 <template>
-    <div>
-        <h1>添加消息</h1>
+    <div class="message-add">
+        <el-form :model="messageForm" :rules="rules" ref="messageForm" label-width="100px">
+            <el-form-item label="人员名称" prop="jrname">
+                <el-input v-model="messageForm.jrname"></el-input>
+            </el-form-item>
+            <el-form-item label="人员电话" prop="jrtel">
+                <el-input type="number" v-model="messageForm.jrtel"></el-input>
+            </el-form-item>
+            <el-form-item label="人员地址" prop="jraddressesid">
+                <el-select v-model="messageForm.region" placeholder="请选择人员地址">
+                    <el-option label="区域一" value="shanghai"></el-option>
+                    <el-option label="区域二" value="beijing"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="人员等级" prop="jrlevel">
+                <el-select v-model="messageForm.jrlevel" placeholder="请选择人员等级">
+                    <el-option label="区域一" value="shanghai"></el-option>
+                    <el-option label="区域二" value="beijing"></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item>
+                <!-- 提交按钮 -->
+                <el-button type="primary" @click="submitForm('messageForm')">
+                    添加信息
+                </el-button>
+                <!-- 重置按钮 -->
+                <el-button @click="resetForm('messageForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
     </div>
-</template>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            messageForm: {
+                jrname: "",//人员姓名
+                jrtel: "",//人员手机号
+                jraddressesid: "",//地址ID
+                jrlevel: "",//等级ID
+            },
+            // 表单验证规则
+            rules: {
+                jrname: [
+                    { required: true, message: "请输入人员姓名", trigger: "blur" }
+                ],
+                jrtel: [
+                    { required: true, message: "请输入人员手机号", trigger: "blur" }
+                ],
+                jraddressesid: [
+                    { required: true, message: "请输入人员地址", trigger: "blur" }
+                ],
+                jrlevel: [
+                    { required: true, message: "请输入人员等级", trigger: "blur" }
+                ]
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.message-add {
+    width: 600px;
+    margin: 100px auto;
+}
+</style>

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

@@ -1,6 +1,29 @@
 <template>
-    <div>
-        <h1>消息列表</h1>
+    <div class="message-list">
+        <div class="message-table">
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column type="index" label="序号" width="200">
+                </el-table-column>
+                <el-table-column prop="messageId" label="消息ID">
+                </el-table-column>
+                <el-table-column prop="userName" label="人员姓名">
+                </el-table-column>
+                <el-table-column prop="addressName" label="地址名称">
+                </el-table-column>
+                <el-table-column prop="levelName" label="等级名称">
+                </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> -->
+                        <el-popconfirm title="确定删除吗？" @onConfirm="deleteConfirm(scope.row)" confirm-button-text="确定删除">
+                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
+                        </el-popconfirm>
+
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
     </div>
 </template>
 <script>
@@ -14,6 +37,11 @@ export default {
         // 调用获取表格数据方法
         this.getTableData();
     },
+    data(){
+        return{
+            tableData: []
+        }
+    },
     methods: {
         // 获取表格数据
         async getTableData() {
@@ -23,23 +51,50 @@ export default {
             // 请求信息列表
             await getMessageList().then(res => {
                 // 处理成功响应
-                console.log("信息列表:", res);
                 messageList = res.data.records;
             })
             // 请求地址列表
             await getAddressList().then(res => {
                 // 处理成功响应
-                console.log("地址列表:", res);
                 addressList = res.data.records;
             })
             // 请求等级列表
             await getLevelList().then(res => {
                 // 处理成功响应
-                console.log("等级列表:", res);
                 levelList = res.data.records;
             })
 
-            console.log("合并后的列表:", messageList, addressList, levelList);
+            // console.log("合并后的列表:", messageList, addressList, levelList);
+
+            let newMessageList = messageList.map(item => {
+                // 创建新对象，避免直接修改原对象
+                let _message = {
+                    addressName: "",// 地址名称
+                    levelName: "",// 等级名称
+                    userName: item.jrname,//人员姓名
+                    userTel: item.jrtel,//人员手机号
+                    messageId: item.jrid,//信息ID
+                }
+                // 合并地址信息
+                for (let i = 0; i < addressList.length; i++) {
+                    // 匹配地址ID 如果信息内的id 和地址列表中的ID 相等 则将地址名称赋值给新对象
+                    if (item.jraddressesid == addressList[i].addressid) {
+                        _message.addressName = addressList[i].addressname;
+                        break;
+                    }
+                }
+                // 合并等级信息
+                for (let j = 0; j < levelList.length; j++) {
+                    // 匹配等级ID 如果信息内的id 和等级列表中的ID 相等 则将等级名称赋值给新对象
+                    if (item.jrlevel == levelList[j].jrid) {
+                        _message.levelName = levelList[j].levelname;
+                        break;
+                    }
+                }
+
+                return _message;
+            })
+            this.tableData = newMessageList;
 
             // let messagePro = getMessageList();
             // let addressPro = getAddressList();
@@ -52,4 +107,9 @@ export default {
         }
     }
 }
-</script>
+</script>
+<style>
+    .message-list{
+        padding: 20px;
+    }
+</style>