登录key

zhouwx

2024-06-07 a309b65e80f3f21b5ab7c182acb9764f47c677f1

 src/views/Admin/msgRecord.vue

@@ -12,7 +12,7 @@
        />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getData">查询</a-button>
        <a-button type="primary" @click="searchData()">查询</a-button>
        <a-button style="margin-left: 12px" @click="resetSearch">重置</a-button>
      </a-col>
    </a-row>
@@ -25,15 +25,16 @@
            </div>
            <a-divider type="vertical" />
            <div class="tit">
              任务ID：<span>{{item.id}}</span>
              任务ID：<span>{{item.id}}</span>   
            </div>
               发送人数：{{item.recipients.length}}
          </template>
          <p>
            {{item.content}}
          </p>
          <template #actions>
            <div>
              接收号码：<span>{{item.recipients.map(i=>i.name + '(' + i.phone + ')').join('、')}}</span>
              接收号码：<span>{{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(item)">查看详情</a-button>
@@ -42,62 +43,38 @@
        </a-card>
      </div>
    </div>
    <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>
    <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 {
      search:{
        pageIndex: 1,
        pageSize: 10,
        pageSize: 5,
        searchParams:{
          startTime: '',
          endTime: ''
        }
      },
      timeRange: [],
      total: 0,
      total: null,
      msg: [],
      visible: false,
      details: {},
      riskOptions: [
        {name: '地震',value: 1},
        {name: '洪涝',value: 2},
        {name: '气象',value: 3},
        {name: '泥石流',value: 4},
        {name: '地质灾害',value: 4},
        {name: '水旱',value: 5},
        {name: '森林草原火灾',value: 6}
      ],
@@ -119,10 +96,15 @@
      const res = await getMassRecord(this.search)
      if(res.data.code == 200){
        t.msg = res.data.data
        t.pagination.total = res.data.total
        t.total = res.data.total
      }else{
        this.$message.error(res.data.msg)
      }
    },

    searchData(){
      this.search.pageIndex = 1
      this.getData()
    },

    resetSearch(){
@@ -139,6 +121,12 @@
      t.getData()
    },

    onPageChange(page, pageSize) {
      const t= this
      t.search.pageIndex = page
      t.getData()
    },

    timeChange(value, dateString) {
      const t = this
      if(dateString){
@@ -151,8 +139,8 @@
    },
    viewDetails(item){
      const t = this
      t.details = item
      t.visible = true
      t.$refs.msgDetail.details = item
      t.$refs.msgDetail.visible = true
    },

    getRiskName(disasterType){
@@ -184,6 +172,7 @@
      align-items: center !important;
      .tit{
        width: 50%;
        color: @base
      }
    }
    /deep/ .ant-card-actions{
@@ -203,29 +192,6 @@
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.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;
        }
      }
    }