Web/admin.ui.plus-master/src/views/admin/statement/sendMessage/index.vue

<template>
    <div class="layout-pd" >
      <el-row>
        <!--操作-->
        <el-col :xs="24" >
          <el-card style="text-align: center;font-weight: 600;font-size: large;">
            信息发送列表
          </el-card>
        </el-col>
        <!--表格-->
        <el-col  :xs="24" >
          <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
            <el-table ref="multipleTableRef"
              v-loading="Data.loading"
              stripe :data="Data.tableModel"
              row-key="id"
              style="width: 100%" >
              <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
            </el-table>
            <div class="my-flex my-flex-end" style="margin-top: 20px">
              <el-pagination
                v-model:currentPage="Data.pageInput.currentPage"
                v-model:page-size="Data.pageInput.pageSize"
                :total="Data.total"
                :page-sizes="[5, 10, 20, 50, 100]"
                small
                background
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  
  </template>
  
  <script setup lang="ts" name="partsManagement/oilGun">
  import {onMounted, reactive, watch} from "vue";

  import { sendMessageApi } from "/@/api/admin/AlarmService/sendMessageApi";
import { Filter } from "@element-plus/icons";

  
  /**页面对象 */
  const Data = reactive({
    /** 选择框列表 */
    statusList : [] as any,
    supplierList : [] as any,
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
    Filter:{

    },
    
    /**表格信息 */
    tableModel: [],
    /**动态表头 */
    dynamicColumns: [
      { prop: 'pushUserid', label: '推送用户id' },
      { prop: 'pushUser', label: '推送用户' },
      { prop: 'content', label: '推送内容' },
      { prop: 'isPushed', label: '是否推送' },
      { prop: 'pushTime', label: '推送时间' },
      { prop: 'alarmhistoryID', label: '报警id' },
      { prop: 'taskPriority', label: '优先级' },
    ],
    /**分页总数 */
    total: 0,
    /**分页标识 */
    pageInput:{
      currentPage: 1,
      pageSize: 10,
    },
    })


    onMounted(() => {
  init()
})

// 条件查询
const init = async () => {
  // Data.loading = true
  const res: any = await new sendMessageApi().getData({ ...Data.pageInput, filter: Data.Filter })
  console.log(res)
  // Data.tableModel = res?.data ?? []
  // Data.total = res?.data?.length ?? 0
  // Data.loading = false
}


  /**
 * 页条变化
 * @param val
 */
const onSizeChange = (val: number) => {
  Data.pageInput.pageSize = val
//   init()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  Data.pageInput.currentPage = val
//   init()
}
  


  </script>
  
  <style scoped lang="scss">
  .my-el-link {
    font-size: 14px;
  }
  .el-form .el-col.mb20 {
    margin: 0 !important;
  }
  .el-input, .el-select {
    width: 240px;
  }
  </style>