admin

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

@@ -6,4 +6,14 @@ export function getMessageList() {
         url: '/messageController/getMessage',
         method: 'get',
     })
-}
+}
+// 根据地址id获取消息列表
+export function getMessageByAddrId(id) {
+    return request({
+        url: '/messageController/getMessageByAddrId',
+        method: 'get',
+        params:{
+            jraddressesid:id
+        }
+    })
+}

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

@@ -1,5 +1,18 @@
 <template>
     <div class="message-list">
+        <div class="search-content">
+            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+                <el-form-item label="根据地址筛选">
+                    <el-select @change="searchByAddress" v-model="searchForm.address" placeholder="请选择地址">
+                        <el-option label="区域一" value="shanghai" v-for="item in addressList" :key="item.addressid" :label="item.addressname" :value="item.addressid"></el-option>
+                        
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="resetData">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
         <div class="table-content">
             <!-- 表格 -->
             <el-table :data="tableData" style="width: 100%">
@@ -28,7 +41,7 @@
     </div>
 </template>
 <script>
-import { getMessageList } from '@/api/message'
+import { getMessageList, getMessageByAddrId } from '@/api/message'
 import { getAddressList } from '@/api/address'
 import { getLevelList } from '@/api/level'
 export default {
@@ -36,12 +49,25 @@ export default {
     data() {
         return {
             tableData: [],
+            addressList: [],
+            searchForm: {
+                address: ''
+            }
         };
     },
     created() {
         this.formatData();
     },
     methods: {
+        // 根据地址筛选消息
+        searchByAddress(val){
+            console.log("change",val);
+            // 根据地址id获取消息列表
+            getMessageByAddrId(val).then(res => {
+                console.log(res.data);
+                this.formatTable(res.data, this.addressList, this.levelList);
+            })
+        },
         // // 获取消息列表
         // getMessage(){
         //     getMessageList().then(res => {
@@ -56,7 +82,7 @@ export default {
         //     })
         // },
         // 格式化数据
-        async formatData(){
+        async formatData() {
             let addressList = [];
             let messageList = [];
             let levelList = [];
@@ -66,34 +92,40 @@ export default {
             })
             // 获取地址列表
             await getAddressList().then(res => {
+                this.addressList = res.data.records;
                 addressList = res.data.records;
             })
             // 获取等级列表
             await getLevelList().then(res => {
+                this.levelList = res.data.records;
                 levelList = res.data.records;
             })
-            console.log(messageList, addressList,levelList);
+            console.log(messageList, addressList, levelList);
             // 格式化数据
-            let newData = messageList.map((val)=>{
-                let addressName = addressList.find((v)=>{
-                    if(v.addressid == val.jraddressesid){
+            this.formatTable(messageList, addressList, levelList);
+
+        },
+        // 根据数据格式化表格数据
+        formatTable(messageList, addressList, levelList){
+            let newData = messageList.map((val) => {
+                let addressName = addressList.find((v) => {
+                    if (v.addressid == val.jraddressesid) {
                         return v.addressname;
                     }
                 })
-                let levelName = levelList.find((v)=>{
-                    if(v.jrid == val.jrlevel){
+                let levelName = levelList.find((v) => {
+                    if (v.jrid == val.jrlevel) {
                         return v.levelname;
                     }
                 })
                 return {
                     ...val,
-                    addressName:addressName? addressName.addressname : '',
-                    levelName:levelName? levelName.levelname : ''
+                    addressName: addressName ? addressName.addressname : '',
+                    levelName: levelName ? levelName.levelname : ''
                 }
 
             });
             this.tableData = newData;
-
         },
         // 删除方法
         handleDelete(row) {
@@ -102,13 +134,18 @@ export default {
         // 编辑方法
         handleEdit(row) {
             console.log(row);
+        },
+        // 重置方法
+        resetData(){
+            this.searchForm.address = '';
+            this.formatData();
         }
 
     }
 }
 </script>
 <style scoped>
-.message-list{
+.message-list {
     padding: 20px;
 }
 </style>