添加了信息模块的功能页面

src/views/message/addMessage.vue

@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <h1 class="list-title">添加信息</h1>
+    <h4 v-show="!cancelTitle">页面正在加载，可能会有些延迟</h4>
+    <div v-show="isShow">
+      <el-form :model="addMessageRuleForm" :rules="rules" ref="addMessageRuleForm" label-width="100px"
+        class="demo-addMessageRuleForm">
+        <el-form-item label="用户名称" prop="uname">
+          <el-input v-model="addMessageRuleForm.uname" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="addressid">
+          <el-select v-model="addMessageRuleForm.addressid" placeholder="请选择">
+            <el-option
+              v-for="item in addressOptions"
+              :key="item.addressid"
+              :label="item.addressname"
+              :value="item.addressid">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="等级" prop="levelid">
+          <el-select v-model="addMessageRuleForm.levelid" placeholder="请选择">
+            <el-option
+              v-for="item in levelOptions"
+              :key="item.jrid"
+              :label="item.levelname"
+              :value="item.jrid">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电话号码" prop="tel">
+          <el-input v-model="addMessageRuleForm.tel" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('addMessageRuleForm')">提交</el-button>
+          <el-button @click="resetForm('addMessageRuleForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div v-show="!isShow">
+      <div v-show="addressShow">
+        <p>地址库还没有任何地址，请前往地址管理添加地址</p>
+      </div>
+      <div v-show="levelShow">
+        <p>等级库还没有任何等级，请前往等级管理添加等级</p> 
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getAddressList} from '@/api/address'
+import { getLevelList } from '@/api/level';
+import { addMessage } from '@/api/message';
+
+export default {
+  data() {
+    return {
+      addMessageRuleForm: {
+        uname: '',
+        tel: '',
+        addressid: '',
+        levelid: ''
+      },
+      addressOptions: [],
+      levelOptions: [],
+      rules: {
+        uname: [
+          { required: true, message: '用户名称不能为空' }
+        ],
+        tel: [
+          { required: true, message: '电话号码不能为空' }
+        ],
+        addressid: [
+          { required: true, message: '地址选择为必须' }
+        ],
+        levelid: [
+          { required: true, message: '等级选择为必须' }
+        ]
+      },
+      
+      isShow: false,
+      addressShow: true,
+      levelShow: true,
+      sysError: false,
+      cancelTitle: false
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addMessage({
+            uname: this.addMessageRuleForm.uname,
+            addressid: this.addMessageRuleForm.addressid,
+            levelid: this.addMessageRuleForm.levelid,
+            tel: this.addMessageRuleForm.tel
+          }).then(res => {
+            if (res.code == 101) {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              this.$router.push({
+                name: 'MessageList'
+              })
+            } else {
+              this.$message.error(res.message);
+            }
+          }).catch(err => {
+            this.$message.error(err.message);
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    getAddressOptions() {
+      getAddressList().then(res => {
+        if (res.code == 101) {
+          this.addressOptions = res.data
+          this.addressShow = false
+        } else if (res.code != 0) {
+          this.$message.error('系统错误');
+          this.addressShow = false 
+          this.sysError = true
+        }
+      }).catch(err => {
+        this.$message.error('系统错误');
+        this.addressShow = false 
+        this.sysError = true
+      })
+    },
+    getLevelOptions() {
+      getLevelList().then(res => {
+        if (res.code == 101) {
+          this.levelOptions = res.data
+          this.levelShow = false
+          return true;
+        } else if (res.code != 0) {
+          this.$message.error('系统错误');
+          this.levelShow = false
+          this.sysError = true
+        }
+      }).catch(err => {
+        this.$message.error('系统错误');
+        this.sysError = true
+      })
+    },
+    calculateShow() {
+      if (!this.levelShow && !this.addressShow && !this.sysError) {
+        this.isShow = true
+      }
+      this.cancelTitle = true
+    }
+  },
+  created() {
+    this.getAddressOptions();
+    this.getLevelOptions();
+    setTimeout(() => {
+      this.calculateShow();
+    }, 1000)
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.demo-addMessageRuleForm {
+  margin: 50px auto 0;
+  transform: translateX(-50px);
+  width: 700px;
+}
+</style>

src/views/message/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>信息首页</h1>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+} 
+</style>

src/views/message/messageList.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <h1 class="list-title">信息列表</h1>
+    <hr>
+    <div v-show="isShow">
+      <div class="list-select">
+        <span>地址筛选器</span>
+        <el-select v-model="value" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.addressid"
+            :label="item.addressname"
+            :value="item.addressid">
+          </el-option>
+        </el-select>
+        <el-button @click="searchMessage">查询</el-button>
+      </div>
+      <el-table :data="tableData" style="width: 900px" max-height="250" class="list-table">
+        <el-table-column fixed prop="jrid" label="信息ID" width="150">
+        </el-table-column>
+        <el-table-column prop="jrname" label="姓名" width="120">
+        </el-table-column>
+        <el-table-column prop="jrtel" label="电话号码" width="120">
+        </el-table-column>
+        <el-table-column prop="levelname" label="等级名称" width="120">
+        </el-table-column>
+        <el-table-column prop="addressname" label="地址名称" width="120">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button @click.native.prevent="updateRow(scope.row)" type="text" size="small">
+              修改
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-show="!isShow">
+      <p>暂时没有信息</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMessageList, deleteMessage,getMessagesByAddressid} from '@/api/message'
+import {getAddressList} from '@/api/address'
+import {getLevelList} from '@/api/level'
+export default {
+  methods: {
+    searchMessage() {
+      if (this.value != '') {
+        getMessagesByAddressid({
+          searchid: this.value
+        }).then(res => {
+          if (res.code == 101) {
+            let currentAddressname = ''
+            this.options.forEach((item) => {
+              if (item.addressid == this.value) 
+                currentAddressname = item.addressname
+            })
+            this.tableData = res.data.map(item => {
+              this.levelBox.forEach(elem => {
+                if (item.jrlevel == elem.jrid) {
+                  item.levelname = elem.levelname
+                }
+              })
+              item.addressname = currentAddressname
+              return item
+            })
+          } else if (res.code == 0) {
+            this.tableData = [] 
+          } else {
+            this.$message.error(res.message);
+          }
+        }).catch(err => {
+          this.$message.error(err.message);
+        })
+      } else {
+        this.showMessageList()
+      }
+    },
+    updateRow(row) {
+      this.$router.push({
+        name: 'UpdateMessage',
+        params: {
+          id: row.jrid,
+          addressValue: this.value 
+        }
+      })
+    },
+    deleteRow(row) {
+      deleteMessage({
+        id: row.jrid
+      }).then(res => {
+        if (res.code == 101) {
+          this.$message({
+            message: res.message,
+            type: 'success'
+          })
+          this.searchMessage();
+        }else {
+          this.$message.error(res.message);
+        }
+      }).catch(err => {
+        this.$message.error(err.message);
+      })
+    },
+    showMessageList() {
+      getMessageList().then(res => {
+        if (res.code == 101) {
+          this.tableData = res.data
+        } else {
+          this.isShow = false
+        }
+      }).catch(err => {
+        console.log('err', err)
+      })
+    },
+    getOptions() {
+      getAddressList().then(res => {
+        if (res.code == 101) {
+          this.options = res.data
+          this.options.unshift({
+            addressid: '',
+            addressname: '> 所有地址 <',
+            longitude: undefined,
+            latitude: undefined
+          })
+        }
+      }).catch(err => {
+        this.$message.error('系统错误');
+      })
+    },
+    initLevelBox() {
+      getLevelList().then(res => {
+        if (res.code == 101) 
+          this.levelBox = res.data
+        else if (res == 0) 
+          this.levelBox = []
+      }).catch(err => {
+        console.log(err)
+      }) 
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      isShow: true,
+      options: [],
+      value: '',
+      levelBox: []
+    }
+  },
+  created() {
+    this.value = this.$route.params.value || ''
+    this.searchMessage()
+    this.getOptions()
+    this.initLevelBox()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.list-table {
+  margin: 0 auto;
+}
+
+.list-select {
+  transform: translateX(400px);
+  padding: 50px 0;
+
+  button {
+    margin-left: 10px;
+  }
+
+  span {
+    margin-right: 10px;
+  }
+}
+</style>

src/views/message/updateMessage.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <h1 class="list-title">修改信息</h1>
+    <div v-show="isShow">
+      <el-form :model="addMessageRuleForm" :rules="rules" ref="addMessageRuleForm" label-width="100px"
+        class="demo-addMessageRuleForm">
+        <el-form-item label="用户名称" prop="uname">
+          <el-input v-model="addMessageRuleForm.uname" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="地址" prop="addressid">
+          <el-select v-model="addMessageRuleForm.addressid" placeholder="请选择">
+            <el-option
+              v-for="item in addressOptions"
+              :key="item.addressid"
+              :label="item.addressname"
+              :value="item.addressid">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="等级" prop="levelid">
+          <el-select v-model="addMessageRuleForm.levelid" placeholder="请选择">
+            <el-option
+              v-for="item in levelOptions"
+              :key="item.jrid"
+              :label="item.levelname"
+              :value="item.jrid">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电话号码" prop="tel">
+          <el-input v-model="addMessageRuleForm.tel" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('addMessageRuleForm')">提交</el-button>
+          <el-button @click="resetForm('addMessageRuleForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div v-show="!isShow">
+      <h1>请前往信息列表点击指定信息的修改按钮</h1>
+      <router-link to="/message/messageList" class="goBtn">快速前往信息列表</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getAddressList} from '@/api/address'
+import { getLevelList } from '@/api/level';
+import { getMessageById, updateMessage } from '@/api/message';
+
+export default {
+  data() {
+    return {
+      addMessageRuleForm: {
+        uname: '',
+        tel: '',
+        addressid: '',
+        levelid: ''
+      },
+      addressOptions: [],
+      levelOptions: [],
+      rules: {
+        uname: [
+          { required: true, message: '用户名称不能为空' }
+        ],
+        tel: [
+          { required: true, message: '电话号码不能为空' }
+        ],
+        addressid: [
+          { required: true, message: '地址选择为必须' }
+        ],
+        levelid: [
+          { required: true, message: '等级选择为必须' }
+        ]
+      },
+      isShow: false
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          updateMessage({
+            id: this.$route.params.id,
+            uname: this.addMessageRuleForm.uname,
+            addressid: this.addMessageRuleForm.addressid,
+            levelid: this.addMessageRuleForm.levelid,
+            tel: this.addMessageRuleForm.tel
+          }).then(res => {
+            if (res.code == 101) {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              this.$router.push({
+                name: 'MessageList',
+                params: {
+                  value: this.$route.params.addressValue
+                }
+              })
+            } else {
+              this.$message.error(res.message);
+            }
+          }).catch(err => {
+            this.$message.error(err.message);
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.showThisMessage()
+    },
+    getAddressOptions() {
+      getAddressList().then(res => {
+        if (res.code == 101) {
+          this.addressOptions = res.data
+        } else if (res.code != 0) {
+          this.$message.error('系统错误');
+        }
+      }).catch(err => {
+        this.$message.error('系统错误');
+      })
+    },
+    getLevelOptions() {
+      getLevelList().then(res => {
+        if (res.code == 101) {
+          this.levelOptions = res.data
+        } else if (res.code != 0) {
+          this.$message.error('系统错误');
+        }
+      }).catch(err => {
+        this.$message.error('系统错误');
+      })
+    },
+    showThisMessage() {
+      getMessageById({
+        id: this.$route.params.id
+      }).then(res => {
+        if (res.code == 101) {
+          this.addMessageRuleForm.uname = res.data[0].jrname
+          this.addMessageRuleForm.tel = res.data[0].jrtel
+          this.addMessageRuleForm.levelid = res.data[0].jrlevel
+          this.addMessageRuleForm.addressid = res.data[0].jraddressesid
+          this.isShow = true
+        }
+      }).catch(err => {
+        this.$message.error('系统错误');
+      })
+    }
+  },
+  created() {
+    this.getAddressOptions()
+    this.getLevelOptions()
+    this.showThisMessage()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.demo-addMessageRuleForm {
+  margin: 50px auto 0;
+  transform: translateX(-50px);
+  width: 700px;
+}
+
+.goBtn {
+  background: #00f;
+  color: #fff;
+  width: 150px;
+  height: 30px;
+  display: block;
+  text-align: center;
+  border-radius: 5px;
+  &:hover {
+    background: rgb(89, 89, 185);
+  }
+  line-height: 30px;
+}
+</style>