From 457f9c817adef8b003ee6379f493798bae5cbb69 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 19 五月 2025 09:31:19 +0800
Subject: [PATCH] 修改

---
 src/views/Admin/msgRecord.vue |  135 ++++++++++++++++++++++++++++++++------------
 1 files changed, 97 insertions(+), 38 deletions(-)

diff --git a/src/views/Admin/msgRecord.vue b/src/views/Admin/msgRecord.vue
index d35a394..20a1e70 100644
--- a/src/views/Admin/msgRecord.vue
+++ b/src/views/Admin/msgRecord.vue
@@ -3,16 +3,17 @@
     <a-row type="flex" :gutter="12" style="margin-bottom: 20px">
       <a-col :span="6">
         <a-range-picker
+            v-model="timeRange"
             format="YYYY-MM-DD"
             :placeholder="['开始时间', '结束时间']"
-            @change="onChange"
+            @change="timeChange"
             @ok="onOk"
             style="width: 100%"
         />
       </a-col>
       <a-col :span="4">
-        <a-button type="primary">查询</a-button>
-        <a-button style="margin-left: 12px">重置</a-button>
+        <a-button type="primary" @click="searchData()">查询</a-button>
+        <a-button style="margin-left: 12px" @click="resetSearch">重置</a-button>
       </a-col>
     </a-row>
     <div class="table-cont">
@@ -20,78 +21,135 @@
         <a-card hoverable class="msg-item" v-for="item in msg" :key="item.id">
           <template #title>
             <div class="tit">
-              发送时间:<span>{{item.time}}</span>
+              发送时间:<span>{{item.gmtCreate}}</span>
             </div>
             <a-divider type="vertical" />
             <div class="tit">
-              任务ID:<span>{{item.id}}</span>
+              任务ID:<span>{{item.id}}</span>   
             </div>
+			      发送人数:{{item.recipients?item.recipients.length:0}}
           </template>
           <p>
             {{item.content}}
           </p>
           <template #actions>
             <div>
-              接收号码:<span>{{item.phone.join(',')}}</span>
+              接收号码:<span>{{item.recipients?item.recipients.map(i=>i.realName + '(' + i.phone.replace(/(\d{3})\d{4}(\d+)/, "$1****$2") + ')').join('、'):'暂无'}}</span>
             </div>
             <div>
-              <a-button type="primary" @click="viewDetails">查看详情</a-button>
+              <a-button type="primary" @click="viewDetails(item)">查看详情</a-button>
             </div>
           </template>
         </a-card>
       </div>
     </div>
-    <a-modal v-model="visible" width="50%" title="短信详情" @ok="handleOk" cancelText="取消" okText="确认">
-      短信详情
-    </a-modal>
+    <a-pagination class="pageItem" v-model="search.pageIndex" :total="total" :defaultPageSize="search.pageSize" @change="onPageChange" :show-total="total => `共 ${total} 条数据`"/>
+    <msg-detail-mod ref="msgDetail"></msg-detail-mod>
   </div>
 </template>
 
 <script>
 import {getUser} from '@/api/user'
+import {getMassRecord} from "@/api/send";
+import msgDetailMod from "@/views/Admin/components/msgDetailMod";
+
 export default {
   name: 'msgRecord',
-  components: {},
+  components: {msgDetailMod},
   data () {
     return {
-      msg: [
-        {
-          time: '2023-05-30',
-          id: '1201',
-          content: '第一条短信',
-          phone: ['15261806176','15261806176','15261806176','15261806176','15261806176','15261806176','15261806176','15261806176','15261806176']
-        },
-        {
-          time: '2023-05-30',
-          id: '1202',
-          content: '第二条短信',
-          phone: ['15261806176','15261806176','15261806176','15261806176','15261806176']
-        },
-        {
-          time: '2023-05-30',
-          id: '1203',
-          content: '第三条短信',
-          phone: ['15261806176','15261806176','15261806176','15261806176','15261806176']
+      search:{
+        pageIndex: 1,
+        pageSize: 5,
+        searchParams:{
+          startTime: '',
+          endTime: ''
         }
+      },
+      timeRange: [],
+      total: null,
+      msg: [],
+      visible: false,
+      details: {},
+      riskOptions: [
+        {name: '地震',value: 1},
+        {name: '气象',value: 3},
+        {name: '地质灾害',value: 4},
+        {name: '水旱',value: 5},
+        {name: '森林草原火灾',value: 6}
       ],
-      visible: false
+      levelOptions: [
+        {name: '红色预警',value: 1},
+        {name: '橙色预警',value: 2},
+        {name: '黄色预警',value: 3},
+        {name: '蓝色预警',value: 4}
+      ]
     }
   },
   created() {
     const t = this
+    t.getData()
   },
   methods:{
-    onChange(value, dateString) {
-      console.log('Selected Time: ', value);
-      console.log('Formatted Selected Time: ', dateString);
+    async getData(){
+      const t = this
+      const res = await getMassRecord(this.search)
+      if(res.data.code == 200){
+        t.msg = res.data.data
+        t.total = res.data.total
+      }else{
+        this.$message.error(res.data.msg)
+      }
+    },
+
+    searchData(){
+      this.search.pageIndex = 1
+      this.getData()
+    },
+
+    resetSearch(){
+      const t = this
+      t.search = {
+        pageIndex: 1,
+        pageSize: 10,
+        searchParams:{
+          startTime: '',
+          endTime: ''
+        }
+      }
+      t.timeRange = []
+      t.getData()
+    },
+
+    onPageChange(page, pageSize) {
+      const t= this
+      t.search.pageIndex = page
+      t.getData()
+    },
+
+    timeChange(value, dateString) {
+      const t = this
+      if(dateString){
+        t.search.searchParams.startTime = value[0].format('YYYY-MM-DD 00:00:00')
+        t.search.searchParams.endTime = value[1].format('YYYY-MM-DD 23:59:59')
+      }
     },
     onOk(value) {
       console.log('onOk: ', value);
     },
-    viewDetails(){
+    viewDetails(item){
       const t = this
-      t.visible = true
+      t.$refs.msgDetail.details = item
+      t.$refs.msgDetail.visible = true
     },
+
+    getRiskName(disasterType){
+      return this.riskOptions.find(i => i.value === disasterType)?.name;
+    },
+    getLevelName(warningLevel){
+      return this.levelOptions.find(i => i.value === warningLevel)?.name;
+    },
+
     handleOk(e) {
       console.log(e);
       this.visible = false;
@@ -109,11 +167,12 @@
     width: 100%;
     margin-bottom: 24px;
 
-    /deep/ .ant-card-head-title{
-      display: flex;
-      align-items: center;
+    /deep/.ant-card-head-title{
+      display: flex !important;
+      align-items: center !important;
       .tit{
         width: 50%;
+        color: @base
       }
     }
     /deep/ .ant-card-actions{

--
Gitblit v1.9.2