admin

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

@@ -46,3 +46,5 @@ export function deleteAddress(addressIdArr){
     })
 }
 
+
+

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

@@ -13,4 +13,15 @@ export function addOrUpdateMessage(data) {
         method: "post",
         data
     })
+}
+// 根据地址ID获取信息列表
+// get 方式传参数 格式 params: { jraddressesid: "1" }
+// 也可以在url 拼接地址 url:"/messageController/getMessageByAddrId?jraddressesid=1"
+// 两种方式均可 
+export function getMessageByAddressId(params){
+    return request({
+        url:"/messageController/getMessageByAddrId",
+        method:"get",
+        params
+    })
 }

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

@@ -1,5 +1,18 @@
 <template>
     <div class="message-list">
+        <div class="message-form">
+            <el-form :inline="true" :model="messageForm">
+                <el-form-item label="根据地址筛选">
+                    <el-select @change="searchMessage" v-model="messageForm.addressId" 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>
+                    <el-button type="primary" @click="resetSearch">重置查询</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
         <div class="message-table">
             <el-table :data="tableData" style="width: 100%">
                 <el-table-column type="index" label="序号" width="200">
@@ -30,7 +43,7 @@
 </template>
 <script>
 // 引入请求接口
-import { getMessageList } from '@/api/message';
+import { getMessageList, getMessageByAddressId } from '@/api/message';
 import { getAddressList } from '@/api/address';
 import { getLevelList } from '@/api/level';
 export default {
@@ -39,14 +52,35 @@ export default {
         // 调用获取表格数据方法
         this.getTableData();
     },
-    data(){
-        return{
-            tableData: []
+    data() {
+        return {
+            addressList: [],
+            levelList: [],
+            tableData: [],
+            messageForm: {
+                addressId: "",
+            }
         }
     },
     methods: {
+        // 根据地址筛选
+        searchMessage() {
+            // 获取选中地址的ID
+            let addressId = this.messageForm.addressId;
+            // 调用根据地址ID获取信息列表接口
+            getMessageByAddressId({ jraddressesid: addressId }).then((res) => {
+                this.formatTableData(res.data, this.addressList, this.levelList);
+            })
+        },
+        // 重置查询
+        resetSearch() { 
+            // 清空查询条件
+            this.messageForm.addressId = "";
+            // 调用获取表格数据方法
+            this.getTableData();
+        },
         // 编辑信息
-        handleEdit(row){
+        handleEdit(row) {
             console.log(row);
             let queryData = {
                 messageId: row.messageId,
@@ -75,15 +109,32 @@ export default {
             await getAddressList().then(res => {
                 // 处理成功响应
                 addressList = res.data.records;
+                this.addressList = addressList;
             })
             // 请求等级列表
             await getLevelList().then(res => {
                 // 处理成功响应
                 levelList = res.data.records;
-            })
+                this.levelList = levelList;
 
+            })
+            // 调用拼接表格数据方法
+            this.formatTableData(messageList, addressList, levelList);
             // console.log("合并后的列表:", messageList, addressList, levelList);
 
+
+
+            // let messagePro = getMessageList();
+            // let addressPro = getAddressList();
+            // let levelPro = getLevelList();
+
+            // Promise.all([messagePro, addressPro, levelPro]).then(res => {
+            //     // 处理成功响应
+            //     console.log("合并后的列表:", res);
+            // })
+        },
+        // 拼接表格数据
+        formatTableData( messageList, addressList, levelList ) {
             let newMessageList = messageList.map(item => {
                 // 创建新对象，避免直接修改原对象
                 let _message = {
@@ -115,21 +166,12 @@ export default {
                 return _message;
             })
             this.tableData = newMessageList;
-
-            // let messagePro = getMessageList();
-            // let addressPro = getAddressList();
-            // let levelPro = getLevelList();
-
-            // Promise.all([messagePro, addressPro, levelPro]).then(res => {
-            //     // 处理成功响应
-            //     console.log("合并后的列表:", res);
-            // })
         }
     }
 }
 </script>
 <style>
-    .message-list{
-        padding: 20px;
-    }
+.message-list {
+    padding: 20px;
+}
 </style>