From e2f129ee192ae3469848beeceac262b13ba8eacb Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Wed, 14 Jun 2023 15:52:11 +0800
Subject: [PATCH] 新增页面和配置，对接口
---
src/views/Admin/msgRecord.vue | 161 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 127 insertions(+), 34 deletions(-)
diff --git a/src/views/Admin/msgRecord.vue b/src/views/Admin/msgRecord.vue
index d35a394..3cf0327 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="getData">查询</a-button>
+ <a-button style="margin-left: 12px" @click="resetSearch">重置</a-button>
</a-col>
</a-row>
<div class="table-cont">
@@ -20,7 +21,7 @@
<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">
@@ -32,66 +33,135 @@
</p>
<template #actions>
<div>
- 接收号码：<span>{{item.phone.join(',')}}</span>
+ 接收号码：<span>{{item.recipients.map(i=>i.name + '(' + i.phone + ')').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-pagination v-model="search.pageIndex" :total="total" :show-total="total => `共 ${total} 条数据`" show-less-items/>
+ <a-modal v-model="visible" width="40%" title="短信详情" @ok="handleOk" cancelText="取消" okText="确认" centered>
+ <div class="detail-mod">
+ <a-row :gutter="24"><a-col :span="4" style="text-align: right">{{ details.emergType == 1?'紧急':details.emergType == 2?'常规':'' }}</a-col></a-row>
+ <a-row :gutter="24"><a-col :span="4" style="text-align: right">发送时间</a-col><a-col :span="14" style="border: 1px solid #d9d9d9;padding: 5px 10px !important;">{{details.gmtCreate}}</a-col></a-row>
+ <a-row :gutter="24"><a-col :span="4" style="text-align: right">灾种类型</a-col><a-col :span="14" style="border: 1px solid #d9d9d9;padding: 5px 10px !important;">{{ getRiskName(details.disasterType)}}</a-col></a-row>
+ <a-row :gutter="24"><a-col :span="4" style="text-align: right">预警级别</a-col><a-col :span="14" style="border: 1px solid #d9d9d9;padding: 5px 10px !important;">{{ getLevelName(details.warningLevel)}}</a-col></a-row>
+ <a-row :gutter="24"><a-col :span="4" style="text-align: right">信息内容</a-col><a-col :span="14" style="border: 1px solid #d9d9d9;padding: 5px 10px !important;">{{details.content}}</a-col></a-row>
+ <a-row :gutter="24">
+ <a-col :span="4" style="text-align: right">接收人</a-col>
+ <a-col :span="20" style="border: 1px solid #d9d9d9;padding: 0 !important;">
+ <div v-for="(item,index) in details.recipients" :key="index" class="table">
+ <div style="width: 20%">
+ {{item.name}}
+ </div>
+ <div style="width: 20%">
+ {{item.phone}}
+ </div>
+ <div style="width: 60%">
+ {{item.recipientUnit}}
+ </div>
+ </div>
+ </a-col>
+ </a-row>
+ </div>
</a-modal>
</div>
</template>
<script>
import {getUser} from '@/api/user'
+import {getMassRecord} from "@/api/send";
+
export default {
name: 'msgRecord',
components: {},
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: 10,
+ searchParams:{
+ startTime: '',
+ endTime: ''
}
+ },
+ timeRange: [],
+ total: 0,
+ msg: [],
+ visible: false,
+ details: {},
+ riskOptions: [
+ {name: '地震',value: 1},
+ {name: '洪涝',value: 2},
+ {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.pagination.total = res.data.total
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ },
+
+ resetSearch(){
+ const t = this
+ t.search = {
+ pageIndex: 1,
+ pageSize: 10,
+ searchParams:{
+ startTime: '',
+ endTime: ''
+ }
+ }
+ t.timeRange = []
+ 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.details = item
t.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,9 +179,9 @@
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%;
}
@@ -138,5 +208,28 @@
}
}
}
+.detail-mod{
+ font-size: 16px;
+
+ .ant-row{
+ margin-bottom: 24px;
+
+ .table{
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid @blackBorder;
+ &:last-of-type{
+ border-bottom: none;
+ }
+ &>div{
+ border-right: 1px solid @blackBorder;
+ padding: 5px 10px;
+ &:last-of-type{
+ border-right: none;
+ }
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.2