iot-gateway_fontend/src/views/user/bulletin-card/index.vue

<template>
  <div class="container">
    <Breadcrumb :items="['个人中心', '公告通知']" />
    <a-card class="general-card" title=" ">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="right"
          >
            <a-row :gutter="18">
              <a-col :span="9">
                <a-form-item field="title" label="标题">
                  <a-input
                    v-model="formModel.title"
                    style="width: 360px"
                    placeholder="请输入标题"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item field="Time" label="时间">
                  <a-range-picker
                    show-time
                    format="YYYY-MM-DD HH:mm"
                    @ok="timeRangs"
                  />
                </a-form-item>
              </a-col>
<!--              <a-col :span="9">-->
<!--                <a-form-item field="isRead" label="状态">-->
<!--                  <a-select-->
<!--                    v-model="formModel.isRead"-->
<!--                    style="width: 360px"-->
<!--                    placeholder="请选择状态"-->
<!--                    :options="statusOptions"-->
<!--                  />-->
<!--                </a-form-item>-->
<!--              </a-col>-->
            </a-row>
          </a-form>
        </a-col>
<!--        <a-divider style="height: 84px" direction="vertical" />-->
        <a-col :flex="'46px'" style="text-align: right">
          <a-space :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
<!--      <a-divider style="margin-top: 0" />-->
      <div class="list-wrap">
        <a-row class="list-row" :gutter="20">
          <a-col
            v-for="item in renderData"
            :key="item.id"
            class="list-col"
            :xs="12"
            :sm="12"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <CardWrap
              :loading="loading"
              :id="item.id"
              :title="item.title"
              :remark="item.remark"
              :createBy="item.createBy"
              :publishTime="item.publishTime"
              open-txt="详情"
            >
              <template #skeleton>
                <a-skeleton :animation="true">
                  <a-skeleton-line
                    :widths="['50%', '50%', '100%', '40%']"
                    :rows="4"
                  />
                  <a-skeleton-line :widths="['40%']" :rows="1" />
                </a-skeleton>
              </template>
            </CardWrap>
          </a-col>
        </a-row>
      </div>
      <a-pagination
        style="float: right; position: relative; right: 1px; bottom: 25px"
        :total="pagination.total"
        show-total
        show-jumper
        show-page-size
        @page-size-change="onSizeChange"
        @change="onPageChange"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useBulletinsStore } from '@/store';
  import usePagination from '@/hooks/pagination';
  import { BulletinsList, BulletinsRecord } from '@/api/bulletins';
  import CardWrap from './components/card-wrap.vue';

  const generateFormModel = () => {
    return {
      title: '',
      state: '',
      publishTimeBegin: '',
      publishTimeEnd: '',
    };
  };

  const { loading, setLoading } = useLoading(true);
  const renderData = ref<BulletinsList[]>([]);
  const formModel = ref(generateFormModel());
  const { pagination, setPagination} = usePagination();


  const bulletinsStore = useBulletinsStore();


  // 获取公告列表
  const fetchData = async (
    params: BulletinsRecord = { size: 8, current: 1 }
  ) => {
    setLoading(true);
    try {
      const res = await bulletinsStore.getBulletinsList(params);
      renderData.value = res.data.records;
      setPagination(res.data);
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };


  // 时间范围
  const timeRangs = (dateString: string[]) => {
    // eslint-disable-next-line prefer-destructuring
    formModel.value.publishTimeBegin = dateString[0];
    // eslint-disable-next-line prefer-destructuring
    formModel.value.publishTimeEnd = dateString[1];
  };


  // 查询
  const search = () => {
    fetchData({
      ...pagination,
      ...formModel.value,
    } as unknown as BulletinsRecord);
  };

  // 分页发生改变
  const onPageChange = (current: number) => {
    setPagination({
      current,
    })
    search();
  };

  // 数据条数改变
  const onSizeChange = (total: number) => {
    setPagination({
      total,
    })
    search();
  };

  onMounted(() => {
    search();
  })

  // 重置
  const reset = () => {
    formModel.value = generateFormModel();
  };
</script>

<style scoped>
  .container {
    padding: 0 20px 20px 20px;
  }
  :deep(.list-wrap) {
    .list-row {
      align-items: stretch;
      .list-col {
        margin-bottom: 16px;
      }
    }
  }
</style>