cxyy-web/src/views/center/notice.vue

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }">
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column prop="type" align="center" label="通知种类" width="180" />
            <el-table-column prop="title" align="center" label="标题" />
            <el-table-column prop="time" align="center" label="时间" width="180" />
          </el-table>
        </el-col>
        <el-col :span="24" class="two">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
const search = async (query = { skip, limit }) => {
  // skip = query.skip
  // limit = query.limit
  // const info = {
  //   skip: query.skip,
  //   limit: query.limit,
  //   user: user.value.id
  // }
  // const res = await store.query(info)
  // if (res.errcode == '0') {
  //   list.value = res.data
  //   total.value = res.total
  // }
}
const searchOther = async () => {}
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  .two {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
}
</style>