admin

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

@@ -17,3 +17,11 @@ export function getMessageByAddrId(id) {
         }
     })
 }
+// 添加消息
+export function addMessage(data) {
+    return request({
+        url: '/messageController/saveOrUpdateMessage',
+        method: 'post',
+        data
+    })
+}

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

@@ -1,5 +1,101 @@
 <template>
     <div class="message-add">
-        <h1>添加消息</h1>
+        <el-form :model="messageAddForm" ref="messageAddForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="人员名称" prop="jrname" :rules="[
+                { required: true, message: '人员名称不能为空' },
+            ]">
+                <el-input v-model="messageAddForm.jrname" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="人员电话" prop="jrtel" :rules="[
+                { required: true, message: '人员电话不能为空' },
+            ]">
+                <el-input v-model="messageAddForm.jrtel" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="人员地址" prop="jraddressesid" :rules="[
+                { required: true, message: '人员地址不能为空' },
+            ]">
+                <el-select v-model="messageAddForm.jraddressesid" placeholder="请选择人员地址">
+                    <el-option v-for="item in addressList" :key="item.addressid" :label="item.addressname" :value="item.addressid">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="人员等级" prop="jrlevel" :rules="[
+                { required: true, message: '人员等级不能为空' },
+            ]">
+                <el-select v-model="messageAddForm.jrlevel" placeholder="请选择人员等级">
+                    <el-option v-for="item in levelList" :key="item.jrid" :label="item.levelname" :value="item.jrid">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('messageAddForm')">提交</el-button>
+                <el-button @click="resetForm('messageAddForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
     </div>
-</template>
+</template>
+<script>
+import { getAddressList } from '@/api/address';
+import { getLevelList } from '@/api/level';
+import { addMessage } from '@/api/message';
+export default {
+    name: 'MessageAdd',
+    data() {
+        return {
+            addressList: [],
+            levelList: [],
+            messageAddForm: {
+                jrname: '',
+                jrtel: '',
+                jraddressesid: "",
+                jrlevel: "",
+            }
+        };
+    },
+    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) {
+                    // 提交表单
+                    addMessage(this.messageAddForm).then(res => {
+                        console.log(res);
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        });
+                        // 跳转页面
+                        this.$router.push({
+                            path: '/message/messageList'
+                        })
+                    })
+                } else {
+                    console.log('校验失败');
+                }
+            })
+            
+        }
+    }
+}
+</script>
+<style scoped>
+.message-add {
+    width: 500px;
+    margin: 100px auto;
+}
+</style>