oa-ui/src/views/Home/Index.vue

<template>
  <el-row class="mt-8px" :gutter="8" justify="space-between" >
    <el-col :xl="7" :lg="7" :md="24" :sm="24" :xs="24">
      <el-card shadow="hover">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">新闻速递</span>
            <el-link
              type="primary"
              :underline="false"
              href="http://localhost/Home/img"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-card shadow="never" style="margin-bottom: 5px;height: 330px">
            <el-carousel :interval="4000" height="300px" motion-blur @change="handleCarouselChange">
              <el-carousel-item v-for="item in filteredList"  :key="item.imgId">
                <el-image  style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/>
              </el-carousel-item>
            </el-carousel>
          </el-card>
          <el-row>
            <el-col :span="24">
              <span class="ellipsis" v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].imgName}}</span>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-8px">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">内部刊物</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col
              v-for="(item,index) in todo"
              :key="`card-${index}`"
            >
              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-8px">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">系统聚焦</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col
              v-for="(item,index) in todo"
              :key="`card-${index}`"
            >
              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="hover">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">事务</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane label="待办">
              <el-row>
                <el-col
                  v-for="(item,index) in todo"
                  :key="`card-${index}`"
                >
                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="待阅">
              <el-row>
                <el-col
                  v-for="(item,index) in todo"
                  :key="`card-${index}`"
                >
                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="已办">
              <el-row>
                <el-col
                  v-for="(item,index) in todo"
                  :key="`card-${index}`"
                >
                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="已阅">
              <el-row>
                <el-col
                  v-for="(item,index) in todo"
                  :key="`card-${index}`"
                >
                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-8px">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">报销单</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col
              v-for="(item,index) in todo"
              :key="`card-${index}`"
            >
              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-8px">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">会议室管理</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col
              v-for="(item,index) in todo"
              :key="`card-${index}`"
            >
              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="hover">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">新闻</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              href="http://localhost/Home/img"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <div v-for="(item, index) in filteredList2" :key="`dynamics-${index}`">
            <div class="flex items-center">
              <div>
                <div class="text-14px" @click="openDialog(item.contentType,item.imgId)">
                  <dict-tag :type="DICT_TYPE.HOME_CONTENT_STATUS" :value="item.contentType" /> :
                  {{ item.imgName }}
                </div>
                <div class="text-12px text-gray-400">
                  {{ formatTime(item.imgCreatetime, 'yyyy-MM-dd') }}
                </div>
              </div>
            </div>
            <el-divider />
          </div>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-8px">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">邮件</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-table stripe :data="tableData" border style="width: 100%" max-height="300">
              <el-table-column :formatter="dateFormatter2" prop="Date" label="时间" width="100" />
              <el-table-column prop="Name" label="发件人" width="70" />
              <el-table-column
                prop="Address"
                label="标题"
                show-overflow-tooltip
              />
            </el-table>
          </el-row>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-8px">
        <template #header >
          <div class="SystemThem" style="height: 2px;"></div>
          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
            <span style="display: inline-block;">日历</span>
            <el-link
              type="primary"
              :underline="false"
              target="_blank"
              style="margin-top: 10px"
            >
              更多>>
            </el-link>
          </div>
        </template>
        <el-skeleton  :loading="loading" animated>
          <el-calendar ref="calendar" class="custom-calendar">
            <template #header = "{date}">
              <el-row>
                <el-col :span="6">
                  <span style="display: inline-block;font-size: 10px">{{ date }}</span>
                </el-col>
                <el-col :span="18">
                  <el-button-group style="display: flex; justify-content: space-between;">
                    <el-button size="small" @click="selectDate('prev-year')">上年</el-button>
                    <el-button size="small" @click="selectDate('prev-month')">上月</el-button>
                    <el-button size="small" @click="selectDate('today')">今天</el-button>
                    <el-button size="small" @click="selectDate('next-year')">下年</el-button>
                    <el-button size="small" @click="selectDate('next-month')">下月</el-button>
                  </el-button-group>
                </el-col>
              </el-row>
            </template>
          </el-calendar>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 85%">
    <el-form >
      <el-form-item >
        <span style="font-size: 20px; font-weight: bold;">{{formData.imgName}}</span>
        <el-divider style="border-top: none; margin: 0;"/>
        <span style="font-size: 12px">发布时间: {{formatTime(formData.imgCreatetime,'yyyy-MM-dd')}}</span>
        <el-divider style="margin-top: 10px"/>
        <span style="line-height: 1.2" v-html="formData.imgContent"></span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">确 定</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { formatTime } from '@/utils'
import type {Todo, Email} from './types'
import {dateFormatter2} from "@/utils/formatTime";
import {DICT_TYPE} from "@/utils/dict";
import {imgApi, imgVO} from "@/api/home/homeimg";
import {CalendarDateType, CalendarInstance} from "element-plus";

defineOptions({ name: 'Home' })

const loading = ref(false)
const imgList = ref<imgVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数

const pageNo = ref<number>(1)
const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const handleCarouselChange = async (currentIndex:number) => {
  pageNo.value=currentIndex+1

}
let tableData = reactive<Email[]>([])
const getTableData = async () => {
  const data = [
    {
      Date:new Date(),
      Name:'张三',
      Address:'关于会议的审批关于会议的审批关于会议的',
    },
    {
      Date:new Date(),
      Name:'李四',
      Address:'关于会议的审批关于会议的审批关于会议的',
    },
    {
      Date:new Date(),
      Name:'王二',
      Address:'关于会议的审批关于会议的审批关于会议的',
    },
    {
      Date:new Date(),
      Name:'麻子',
      Address:'关于会议的审批关于会议的审批关于会议的',
    },
    {
      Date:new Date(),
      Name:'张三',
      Address:'关于会议的审批关于会议的审批关于会议的',
    },
  ]
  tableData = Object.assign(tableData, data)
}
//获取待办已办信息
let todo = reactive<Todo[]>([])
const getTodo = async () => {
  const data = [
    {
      title: '集团政研会六届五次会员大会在贵州遵义召开',
      type: '请假',
      content: '',
      date: new Date()
    },
    {
      title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
      type: '任务',
      content: '',
      date: new Date()
    },
    {
      title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
      type: '出差',
      content: '',
      date: new Date()
    },
    {
      title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
      type: '会议',
      content: '需要你在某日某月开会',
      date: new Date()
    },
    {
      title: '集团政研会六届五次会员大会在贵州遵义召开',
      type: '会议',
      content: '需要你在某日某月开会',
      date: new Date()
    },
    {
      title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
      type: '会议',
      content: '需要你在某日某月开会',
      date: new Date()
    }
  ]
  todo = Object.assign(todo, data)
}
const formData = ref({
  imgId: undefined,
  imgName: undefined,
  imgCreatetime: new Date(),
  imgImg: [],
  imgContent: undefined,
  contentType: undefined,
  imgStatus: undefined,
  contentStatus: undefined,
})
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const openDialog = async (type:number,id?:number) => {
  dialogVisible.value = true
  dialogTitle.value = type===1?'公告':'通知'
  resetForm()
  if (id) {
    formData.value = await imgApi.getimg(id)
  }
}
/** 重置表单 */
const resetForm = () => {
    formData.value = {
      imgId: undefined,
      imgName: undefined,
      imgCreatetime: new Date(),
      imgImg: [],
      imgContent: undefined,
      contentType: undefined,
      imgStatus: undefined,
      contentStatus: undefined,
    }
  }
const filteredList = computed(() => {
  return imgList.value.filter(item => item.imgStatus !== 0 && item.contentStatus!==0);
});
// const filteredList2 = computed(() => {
//   return imgList.value.filter(item => item.contentStatus !== 0 );
// });
const filteredList2 = computed(() => {
  return imgList.value
    .filter(item => item.contentStatus !== 0)
    .slice(0, 3); // 限制只显示前3条
});
const queryParamsImg = reactive({
  pageNo: 1,
  pageSize: 20,
  imgId: undefined,
  imgName: undefined,
  imgCreatetime: [],
  imgImg: undefined,
  imgContent: undefined,
  contentType: undefined,
  imgStatus: undefined,
  contentStatus: undefined,
  createTime: [],
})
const imgUrl = "//images.weserv.nl/?url="

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const imgData = await imgApi.getimgPage(queryParamsImg)
    imgList.value = imgData.list
    total.value = imgData.total

  } finally {
    loading.value = false
  }
}

const getAllApi = async () => {
  await Promise.all([
    getTableData(),
    getTodo(),
  ])
  loading.value = false
}

getAllApi()

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style scoped>
.el-carousel__item h3 {
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
</style>

<style  lang="scss">

.el-table .warning-row {
  display: none;
}
</style>

<style>
.SystemThem {
  background-color: var(--el-color-primary);
}
.custom-calendar {
  height: 310px; /* 根据需要调整高度 */
}
.custom-calendar .el-calendar-table__row {
  height: 40px; /* 设置行高度，根据需要调整 */
}
.custom-calendar .el-calendar-day {
  height: 100%; /* 设置每个日历单元格的高度为100% */
  display: flex; /* 使用 flexbox */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.ellipsis {
  display: inline-block;    /* 需要是块状元素，span默认是行内元素，所以使用inline-block */
  max-width: 400px;         /* 设置最大宽度，超出部分将显示省略号 */
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 超出容器的内容隐藏 */
  text-overflow: ellipsis;  /* 超出的内容以省略号显示 */
}
</style>