fashion-ssr-vue3/components/business/account/notice/index.vue

<!-- @format -->

<script lang="ts" setup>
import dayjs from 'dayjs'
import { PageSizeEnum } from '~/enums/sizeEnum'
import { getNoticeListApi } from '@/api/model/notice'
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()
const tableData = ref([])
const currentPage = ref(1)
const page_size = ref(10)
const total = ref(1)
const visible = ref(false)
const detailData = ref()

async function getTableList(
  pageNo = PageSizeEnum.PAGE,
  pageSize = PageSizeEnum.PAGE_SIZE,
) {
  try {
    const res: any = await getNoticeListApi({
      pageNo,
      pageSize,
    })
    total.value = res.total
    tableData.value = res.records.map((item: any) => {
      return {
        ...item,
        sendTime: dayjs(item.sendTime).format('YYYY-MM-DD'),
      }
    })
    await commonStore.getNoticeRemind()
  }
  catch (e) {
    console.log(e)
  }
}
function changePage(page: number, pageSize: number) {
  currentPage.value = page
  getTableList(page, pageSize)
}
function tableRowClassName({ rowIndex }: any) {
  if (rowIndex % 2 === 0)
    return 'warning-row'
  return ''
}
function onDetail(row: any) {
  visible.value = true
  detailData.value = row
}
getTableList()
</script>

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="title" label="Notification Name" />
      <el-table-column prop="sendTime" label="Notification Time" />
      <el-table-column fixed="right" label="Action">
        <template #default="{ row }">
          <el-button
            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
          >
            <div class="text-primary" @click="onDetail(row)">
              View details
            </div>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="tableData.length" class="mt-25px flex justify-end">
      <el-pagination
        :page-size="page_size"
        class="custom-pagination"
        :pager-count="10"
        layout="prev, pager, next"
        :total="total"
        @change="changePage"
      />
    </div>
    <Business-account-notice-detail-modal v-if="visible" v-model:visible="visible" :detail="detailData" />
  </div>
</template>

<style lang="less" scoped>
::v-deep(.el-table) {
  color: #333;

  .el-table__header-wrapper {
    .el-table__header {
      height: 50px;

      .el-table__cell {
        color: #333;
        font-weight: 400 !important;
        background-color: #fff2e1;
      }
    }
  }

  .el-table__row {
    height: 68px;

    &.warning-row {
      --el-table-tr-bg-color: #f7f7f7;
    }
  }
}
</style>