zhiyu_duanju_distribution_manage_front/src/views/notice/mynotice/index.vue

<template>
	
	<div v-show="showAll == false"> 
		<el-card style="padding: 5px; 15px;height: calc(24vh);">
			<div class="header-title"> <h3>最新通知 </h3> <h4  @click="go2page">查看全部</h4></div>
			<noticeBlock></noticeBlock>
		</el-card>

		<el-card shadow="always"  v-action="'statistic.HomeStatistics.statistics'"  v-ac style="margin-top: 20px;height: calc(70vh);">
			<todayData></todayData>
		</el-card>
	</div>
	<div  v-show="showAll == true">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-tabs  type="border-card" v-model="activeName" class="tabs" @tab-click="handleClick">
				  <el-tab-pane v-for="item in noticesTypes" :key="item.id" :label="item.name" :name="item.id">
				<!-- 	<el-table style="height: 800px;" :data="currentTableData" class="mt-3" v-loading="loading">
					  <el-table-column prop="created_at" width="200" label="时间" />
					  <el-table-column prop="title" label="">
						<template #default="scope">
						  <el-tag type="success" class="title" size="default" effect="dark" @click="titleClick(scope.row)">{{
							scope.row.title }}</el-tag>
						</template>
					  </el-table-column>
					</el-table> -->
						<div class="noticebody h-full">
							<div class="notice-item itme" :class="item.id == notice.id ? 'active':'' " @click="titleClick(item)"  v-for="(item,index) in currentTableData" :key="index" >
							 <el-badge v-if="item.is_read == 0" is-dot class="item">
								<el-icon><Bell /></el-icon>
							  </el-badge>
							  <el-icon   v-else ><Bell /></el-icon>
								<label class="notices" >
								{{item.title}}
								<p class="n-time-text">{{item.created_at}}</p>
								</label>
								
							</div>
						</div>
						<div v-show="currentTableData.length < 1"  style="display: flex;justify-content: center;">
							<label style="color: darkgray;"> 暂无新通知</label>
						</div>
				  </el-tab-pane>
				  <Paginate />
				</el-tabs>
			</el-col>
			<el-col :span="0"  >
				<div > </div>
			</el-col>
			<el-col :span="16" style="background-color: #fff;">
				<div style="width: 100%;height: 40px;background-color: #fff;"><el-button class="bak-txt" @click="go2page">返回</el-button></div>
				 <div sclass="flex h-full flex-wrap break-all" v-html="notice.content"></div>
			</el-col>
		</el-row>
	</div>
  <el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
    <div class="flex flex-wrap break-all" v-html="notice.content"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="readNotice">我知道了</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { useGetList} from '@/hook/curd/useGetList';
import noticeBlock from "./dataStatistics/notices.vue";
import todayData from "./dataStatistics/todayData.vue";
import { Bell } from '@element-plus/icons-vue';
import { ref } from 'vue'

import type { TabsPaneContext } from 'element-plus'
import {noticeListMine, noticesTypesList, noticeDetail, noticeRead, noticePopup } from '@/api/notice/index';
import showVue from '@/components/admin/buttons/show.vue';
const api = 'system/notices/notice/mine';

const centerDialogVisible = ref(false)
const notice = ref({})
const noticesTypes = ref<object>([]);
const activeName = ref(0)
const showAll = ref(false)
const { data, query, search, reset, loading } = useGetList(api, true);
const currentTableData = computed(() => data.value?.data);

const readNotice = () => {
  noticeRead(notice.value.id).then(res => {
    // console.log(res);
    search();
  })
  centerDialogVisible.value = false
}
const getFistNotice = async () => {
	let param  = query.value;
	param.limit = 1;
	await	noticeListMine(param).then(res => {
		let temp = res.data.shift(0);
		if(temp){
			if(showAll.value == true){
				titleClick(temp);
			}
			notice.value = temp;
		}else{
			notice.value = {};
		}
		
	})
};
const initNoticeOtion = (params: object) => {
  noticesTypesList(params).then(res => {
    noticesTypes.value = res.data
    noticesTypes.value.unshift({ id: 0, name: '全部' })
  })
}
const go2page = () =>{
	showAll.value = !showAll.value;
	if(showAll.value == true){
		if(notice.value.id){
			titleClick(notice.value);
		}
		
	}
}

const titleClick = (e) => {
  noticeDetail(e.id).then(res => {
    console.log(res);
    // centerDialogVisible.value = true;
    notice.value.id = res.data.id
    notice.value.title = res.data.title
    notice.value.content = res.data.content
	readNotice();
  })
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event, tab.props.name)
  activeName.value = Number(tab?.props?.name)
  query.value.notice_type_id = tab.props.name;
  search();
  getFistNotice();
}

onMounted(async () => {
  noticePopup().then(res => {
    if (res.data.id) {
      centerDialogVisible.value = true;
      notice.value.id = res.data.id
      notice.value.title = res.data.title
      notice.value.content = res.data.content
    }
  })
  query.value.notice_type_id = activeName;
	await search();
	initNoticeOtion({})
	getFistNotice();
});
</script>

<style lang="scss" scoped>
	
.header-title {
	margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content:space-between;
  h4{
	  margin-right: 50px;
	  color: #29d;
  }
}
.bak-txt{
	border-color: aliceblue;
	line-height: 40px;
	float: right;
	margin-top: 20px;
	// color: #29d;;
	margin-right: 40px;
}
.tabs>.el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  
}


.title {
  cursor: pointer;
}
.notice-item{
	display: flex;
	margin-top: 5px;
}
.active{
	color:#29d;
}
.notices{
	font-size: 20px;
	margin-left: 10px;
	line-height: 18px;;
}
.n-time-text{
	margin-top: 5px;
	font-size: 14px;
}
.logo{
	width: 18px;
}
.h-full{
	height: calc(60vh);
}
</style>