zhywpt-web/src/views/messagePush/messageManagement/informationAlarmLog/index.vue

<template>
  <div>
    <crud-template
      class="as-weight"
      :ref="(el) => (crudRef = el)"
      :home-data="field"
      @btnSearch="btnSearch"
      @refreshLeft="refreshLeft"
      :tableData="tableData"
      @CurrentChange="handleCurrentChange"
      @pageSizeChange="
        (val) => {
          field.paging.currentPage = 1
          field.paging.pageSize = val
          getList()
        }
      "
    >
      <template #search>
        <el-select
          clearable
          v-model="searchForm.messageClientId"
          placeholder="请选择客户端"
          style="width: 200px"
        >
          <el-option
            v-for="item in messageClientData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-cascader :options="options" placeholder="请选择消息类型" clearable v-model="optionsValue" style="width: 200px"/>

        <el-select
          clearable
          v-model="searchForm.sendResult"
          placeholder="请选择状态"
          style="width: 200px"
        >
          <el-option
            v-for="item in MESSAGE_RESULT"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </crud-template>
  </div>
</template>

<!-- 信息告警日志 -->
<script lang="ts" setup>
// @ts-ignore crudFrom模板
import CrudTemplate from '@/crud/index.vue'
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
// 请求函数
// @ts-ignore
import BaseService from '@/utils/baseService'

//crud配置
import crudConfig from './crudConfig'
// 拿到配置
const { field } = crudConfig()

onMounted(() => {
  getoptionsList()
  getList()
  getmessageClientData()
})
//整个crud虚拟dom
const crudRef = ref()
// 获取数据，查询条件
const searchForm = ref({
  sendResult: '',
  messageClientId: '',
  messageType: '',
  messageChannel: '',
})
const tableData = ref([])
// 搜索按钮
function btnSearch() {
  field.value.paging.currentPage = 1
  getList()
}

// 搜索重置
function refreshLeft() {
  field.value.paging.currentPage = 1
  optionsValue.value = []

  searchForm.value = {
    sendResult: '',
    messageClientId: '',
    messageType: '',
    messageChannel: '',
  }
  tableData.value = []
  getList()
}

// 处理请求参数
const handleParams = () => {
  
  if(optionsValue.value.length>0){
    searchForm.value.messageType = optionsValue.value[0]
    searchForm.value.messageChannel = optionsValue.value[1]
  }
  let data: any = {
    pageNo: field.value.paging.currentPage,
    pageSize: field.value.paging.pageSize,
    ...searchForm.value,
  }
  let params: any = {}
  for (let key in data) {
    if (data[key] || data[key] === 0) {
      params[key] = data[key]
    }
  }
  return params
}

// @ts-ignore
import $storeinitData from '@/store/initData' //引入tab vuex
// 消息类型
const MESSAGE_TYPE = computed(() => {
  return $storeinitData.state.dictData['MESSAGE_TYPE'] || []
})
// 是否发送成功
const MESSAGE_RESULT = computed(() => {
  return $storeinitData.state.dictData['MESSAGE_RESULT'] || []
})
// 消息渠道
const MESSAGE_CHANNEL = computed(() => {
  return $storeinitData.state.dictData['MESSAGE_CHANNEL'] || []
})
// 获取数据
function getList() {
  const params = handleParams()
  crudRef.value.tableLoding = true //表格loading效果
  BaseService.post('/msgw/messagealarm/logpage', params).then(
    (res: any) => {
      crudRef.value.tableLoding = false
      if (res && res.statusCode === 0) {
        let bizContent = res.data
        let data = bizContent.data || []
        console.log(data)
        data.forEach((element) => {
          element.messageTypeName = MESSAGE_TYPE.value.find(
            (item) => item.value == element.messageType
          )?.label
          element.sendResultName = MESSAGE_RESULT.value.find(
            (item) => item.value == element.sendResult
          )?.label
          element.messageChannelName = MESSAGE_CHANNEL.value.find(
            (item) => item.value == element.messageChannel
          )?.label
        })
        tableData.value = data
        field.value.paging.total = bizContent.totalCount
      } else {
        ElMessage.error(res.message)
      }
    }
  )
}
// 处理当前页数
function handleCurrentChange(val: number) {
  field.value.paging.currentPage = val
  getList()
}

const messageClientData = ref<any>([])
// 获取客户端数据
function getmessageClientData() {
  BaseService.post('/msgw/clientconfig/list').then((res: any) => {
    if (res && res.statusCode === 0) {
      let bizContent = res.data
      let data = bizContent.data || []
      messageClientData.value = data
    } else {
      ElMessage.error(res.message)
    }
  })
}
const options = ref<any>([])
const optionsValue = ref<any>([])
// 获取通道列表
function getoptionsList() {
  BaseService.post('/msgw/clientconfig/messagetypechanneltree').then((res: any) => {
    if (res && res.statusCode === 0) {
      let bizContent = res.data
      let data = bizContent.data || []
      options.value = data
    } else {
      ElMessage.error(res.message)
    }
  })
}
const isDisabled = ref(true)
const MessageChannelList = ref<any>([])

function handleTypeChange(val) {
  console.log(val)
  if (val) {
    getChannelList(val)
  } else {
    MessageChannelList.value = []
    isDisabled.value = true
    searchForm.value.messageChannel = ''
  }
}
function getChannelList(messageType) {
  BaseService.post('/msgw/clientconfig/messagetypelist', {
    messageType,
  }).then((res: any) => {
    if (res && res.statusCode === 0) {
      const data = JSON.parse(res.bizContent).data.map((ele) => {
        return MESSAGE_CHANNEL.value.find((item) => item.value == ele)
      })
      searchForm.value.messageChannel = JSON.parse(res.bizContent).data[0]
      MessageChannelList.value = data
      isDisabled.value = false
    } else {
      ElMessage.error(res.message)
    }
  })
}

</script>