admin

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

@@ -1,8 +1,16 @@
 import request from '@/utils/request2'
- // 获取消息列表
- export function getMessageList(){
-        return request({
-            url:"/messageController/getMessage",
-            method:"get"
-        })
- }
+// 获取消息列表
+export function getMessageList() {
+    return request({
+        url: "/messageController/getMessage",
+        method: "get"
+    })
+}
+//  添加或修改消息
+export function addOrUpdateMessage(data) {
+    return request({
+        url: "/messageController/saveOrUpdateMessage",
+        method: "post",
+        data
+    })
+}

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

@@ -8,15 +8,15 @@
                 <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 v-model="messageForm.jraddressesid" placeholder="请选择人员地址">
+                    <el-option v-for="item in addressList" :label="item.addressname" :value="item.addressid"
+                        :key="item.addressid"></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-option v-for="item in levelList" :label="item.levelname" :value="item.jrid"
+                        :key="item.jrid"></el-option>
                 </el-select>
             </el-form-item>
 
@@ -32,9 +32,17 @@
     </div>
 </template>
 <script>
+// 引入请求接口
+import { getAddressList } from '@/api/address';
+import { getLevelList } from '@/api/level';
+import { addOrUpdateMessage } from '@/api/message';
 export default {
     data() {
         return {
+            // 地址列表
+            addressList: [],
+            // 等级列表
+            levelList: [],
             messageForm: {
                 jrname: "",//人员姓名
                 jrtel: "",//人员手机号
@@ -57,7 +65,50 @@ export default {
                 ]
             }
         }
+    },
+    created() {
+        // 初始化数据
+        this.initData();
+    },
+    methods: {
+        // 初始化数据
+        initData() {
+            // 初始化地址列表
+            getAddressList().then(res => {
+                // 处理成功响应
+                this.addressList = res.data.records;
+            })
+            // 初始化等级列表
+            getLevelList().then(res => {
+                // 处理成功响应
+                this.levelList = res.data.records;
+            })
+        },
+        // 添加或修改信息
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    // 表单验证通过
+                    addOrUpdateMessage(this.messageForm).then(() => {
+                        // 提示添加成功
+                        this.$message({
+                            message: "添加成功",
+                            type: "success"
+                        })
+                        // 重置表单
+                        this.resetForm(formName);
+                        // 跳转页面
+                        this.$router.push("/message/list");
+                    })
+                }
+            })
+        },
+        // 重置表单
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        }
     }
+
 }
 </script>
 <style scoped>

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

@@ -8,6 +8,8 @@
                 </el-table-column>
                 <el-table-column prop="userName" label="人员姓名">
                 </el-table-column>
+                <el-table-column prop="userTel" label="人员手机号">
+                </el-table-column>
                 <el-table-column prop="addressName" label="地址名称">
                 </el-table-column>
                 <el-table-column prop="levelName" label="等级名称">