zjugis_OA/client_h5/src/pages/dailyNotify/index.vue

<template>
  <div class="dailyNotify_box">
    <van-sticky>
      <div class="filter_tags">
        <span v-for="(item,index) in tabs" :key="index" :class="{active: currentTab === item['index']}" @click="switchTabHandle(item)">{{item['title']}}({{item['num']}})</span>
      </div>
    </van-sticky>
    <div class="handlecenter_card_box">
      <template v-if="currentTab === '2'">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="(item,index) in noticeLists" :key="index" @click="clickHandler(item, false)" :class="{ handlecenter_card: true, handlecenter_card_0: index === 0 }">
              <img src="../../assets/images/mrsd_icon.png" />
              <div class="box">
                <div class="title">{{(item['content']??'暂无标题').substring(0, 50)}}<span class="news" v-if="item['isToday']"><img src="../../assets/images/news_icon.png" /></span></div>
                <div class="tip">
                  <span>{{ item['nickname'] }}</span>
                  <span>{{item['createTime']}}</span>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </template>
      <template v-else>
        <van-swipe-cell v-for="(item,index) in listMap[currentTab]" :key="index">
          <div  :class="{ handlecenter_card: true, handlecenter_card_1: index === 0 }" @click="clickHandler(item, false)">
            <img src="../../assets/images/mrsd_icon.png" />
            <div class="box">
              <div class="title">{{(item['content']??'暂无标题').substring(0, 50)}}<span class="news" v-if="currentTab != '1' && item['isToday']"><img src="../../assets/images/news_icon.png" /></span></div>
              <div class="tip">
                <span>{{ item['nickname'] }}</span>
                <span>{{item['createTime']}}</span>
              </div>
            </div>
          </div>
          <template v-if="currentTab === '3'" #right>
            <van-button square type="danger" @click="onDeleteHandle(item)" text="删除" />
          </template>
        </van-swipe-cell>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { showNotify } from 'vant';
import reqest from "@/utils/request";

defineOptions({
  name: 'Notice'
})
interface TabType {
  title: string,
  index: string,
  num: number
}
const currentTab = ref<string>("0")
const switchTabHandle = (item: TabType)=>{
  currentTab.value = item.index
}
const tabs = ref<TabType[]>([
  {
    title: '近三日',
    index: "0",
    num: 0
  },{
    title: '今日',
    index: "1",
    num: 0
  },{
    title: '所有',
    index: "2",
    num: 0
  },{
    title: '我的',
    index: "3",
    num: 0
  }
])
const queryDailyNotifyTotal = () => {
  const sendData = {
    type: 3,
    readType: 2
  }
  reqest.post('/admin-api/adm/noticeAndLearn/query/total', sendData).then((result: any) => { 
    const resultData = result.data;
    if (resultData) {
      tabs.value = resultData;
    }
  });
}

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onRefresh = () => {
  queryDailyNotifyByPage(true);
};
const onLoad = () => {
  loading.value = true;
  pageData.value.pageNo = pageData.value.pageNo + 1
  queryDailyNotifyByPage();
};
const pageData = ref<{
  pageNo: number
  pageSize: number
  total?: number
}>({
  pageNo: 0,
  pageSize: 8,
  total: 0
})
/**
 * 所有数据
 */
const noticeLists = ref<any[]>([]);
const queryDailyNotifyByPage = (isPull = false) => {
  if (isPull) {
    pageData.value.pageNo = 1
    refreshing.value = true;
    finished.value = false;
  }
  const sendData = {
    type: 3,
    readType: 2,
    ...pageData.value
  }
  if(pageData.value.pageNo === 1) noticeLists.value = []
  reqest.post('/admin-api/adm/noticeAndLearn/query/page', sendData).then((result: any) => { 
    const resultData = result.data;
    if (resultData) {
      if (resultData && resultData.list) {
        (isPull) ? noticeLists.value = resultData.list : noticeLists.value?.push(...resultData.list) 
      }
      if (isPull) {
        refreshing.value = false
      } else {
        loading.value = false
      }
      /** 用来解决tab切换时，容器高度发生变化自动触发loading事件 */
      const time = setTimeout(() => {
        loading.value = false;
        clearTimeout(time);
      }, 800);
      if (resultData.total === noticeLists.value.length) { 
        finished.value = true;
      }
    } else {
      loading.value = false;
      finished.value = true;
    }
  });
}

/**
 * 数据列表分组
 */
const listMap = ref<any>({})
const queryDailyNotifyGroup = () => {
  const sendData = {
    type: 3,
    readType: 2
  }
  reqest.post('/admin-api/adm/noticeAndLearn/query/group', sendData).then((result: any) => { 
    const resultData = result.data;
    if (resultData) {
      listMap.value = resultData;
    }
  });
}
const initDailyNotifyData = () => {
  pageData.value.pageNo = 0
  loading.value = false
  finished.value = false
  refreshing.value = false
  queryDailyNotifyTotal()
  queryDailyNotifyGroup()
}
initDailyNotifyData()
const router = useRouter()
const clickHandler = (item: any) => {
  router.push({
    path: currentTab.value === '3' ? '/dailyNotifyPublish' : '/dailyNotifyDetail',
    query: {
      id: item['id']
    }
  });
}

const onDeleteHandle = (item: any) => {
  reqest.get(`/admin-api/adm/noticeAndLearn/delete?id=${item.id}`).then((result: any) => { 
    if(result.data){
      showNotify({
        type: 'primary',
        message: '删除成功',
        duration: 800,
        position: 'top',
        onOpened() {
          initDailyNotifyData();
        }
      });
    }
  });
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>