领导日程展示

2024-11-18 13:42:11 +08:00 · 2024-11-18 13:42:11 +08:00 · 0413ae4eb2
commit 0413ae4eb2
parent 7e7e8ec0fa
2 changed files with 340 additions and 0 deletions
--- a/src/views/Home/rcgl/rcglInfo/RcglInfoForm.vue
+++ b/src/views/Home/rcgl/rcglInfo/RcglInfoForm.vue
@ -0,0 +1,165 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 70%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      label-width="110px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="日程标题" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入日程标题" disabled />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="日程状态" prop="status">
+            <el-select v-model="formData.status" placeholder="请选择日程状态类型" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.RCGL_RC_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否展示" prop="ispublic">
+            <el-radio-group v-model="formData.ispublic" disabled>
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.RCGL_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="开始日期" prop="date">
+        <el-date-picker
+          v-model="formData.date"
+          type="date"
+          value-format="x"
+          placeholder="选择开始日期"
+          disabled
+        />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="预计开始时间" prop="startTime">
+            <el-date-picker
+              v-model="formData.startTime"
+              type="datetime"
+              value-format="x"
+              placeholder="选择日程开始时间"
+              @change="validateDate"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="预计结束时间" prop="endTime">
+            <el-date-picker
+              v-model="formData.endTime"
+              type="datetime"
+              value-format="x"
+              placeholder="选择日程结束时间"
+              @change="validateDate"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="日程内容" prop="content">
+        <span style="line-height: 1.4"  v-html="formData.content"></span>
+      </el-form-item>
+      <el-form-item label="相关链接" prop="videoLink">
+        <el-input v-model="formData.videoLink" placeholder="请输入日程相关链接" disabled/>
+      </el-form-item>
+      <el-form-item label="地点" prop="location">
+        <el-input autosize v-model="formData.location" type="textarea" placeholder="请输入日程地点" disabled/>
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <el-input autosize v-model="formData.remarks" type="textarea" placeholder="请输入备注" disabled/>
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { RcglApi } from '@/api/home/rcgl'
+
+/** 领导日程安排 表单 */
+defineOptions({ name: 'RcglForm' })
+
+// const { t } = useI18n() // 国际化
+// const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('详情') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  title: undefined,
+  location: undefined,
+  videoLink: undefined,
+  content: undefined,
+  date: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  status: undefined,
+  remarks: undefined,
+  ispublic: undefined,
+})
+const formRef = ref() // 表单 Ref
+
+// 方法：验证开始时间是否小于结束时间
+const validateDate = () => {
+  if (formData.value.startTime && formData.value.endTime) {
+    const start = formData.value.startTime
+    const end = formData.value.endTime
+    if (start > end) {
+      formData.value.endTime = undefined
+      message.error('开始时间不能大于结束时间')
+    }
+  }
+}
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await RcglApi.getRcgl(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    title: undefined,
+    location: undefined,
+    videoLink: undefined,
+    content: undefined,
+    date: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    status: undefined,
+    remarks: undefined,
+    ispublic: undefined,
+  }
+  formRef.value?.resetFields()
+}
+</script>
+<style>
+</style>
--- a/src/views/Home/rcgl/rcglInfo/index.vue
+++ b/src/views/Home/rcgl/rcglInfo/index.vue
@ -0,0 +1,175 @@
+<template>
+  <ContentWrap>
+    <el-form-item label="领导日程展示" prop="createTime"/>
+    <el-calendar
+      ref="calendar"
+      class="custom-calendar"
+      :model-value="new Date()"
+    >
+      <template #header="{ date }">
+        <el-row>
+          <el-col :span="24" class="header-date">
+            <span class="cl-title"> {{ date }}</span>
+          </el-col>
+        </el-row>
+      </template>
+
+      <template #date-cell="{ data }">
+        <div
+          class='holiday'
+        >
+          <span style="font-size: 14px">{{ data.date.getDate()}}</span>
+          <br/>
+          <span
+            v-for="item in (holidays2[data.day] || [])"
+            :key="item"
+            class="seSpan"
+          >
+              <span @click="openForm(item.id)">{{item.title}}</span>
+              <br/>
+            </span>
+        </div>
+      </template>
+    </el-calendar>
+  </ContentWrap>
+<!--  展示表单-->
+  <RcglInfoForm ref="formRef"/>
+</template>
+
+<script setup lang="ts">
+import { CalendarInstance} from 'element-plus';
+import {RcglApi, RcglVO} from "@/api/home/rcgl";
+import RcglInfoForm from './RcglInfoForm.vue'
+
+defineOptions({ name: 'RcInfo' })
+
+const listRcgl = ref<RcglVO[]>([]) // 列表的数据
+const holidays2 = reactive({});
+const queryParamsRcgl = reactive({
+  pageNo: 1,
+  pageSize: 50,
+  id: undefined,
+  title: undefined,
+  location: undefined,
+  videoLink: undefined,
+  content: undefined,
+  date: [],
+  startTime: [],
+  endTime: [],
+  status: undefined,
+  remarks: undefined,
+  ispublic: 1,
+  createTime: [] as string[],
+})
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (id: number) => {
+  formRef.value.open(id)
+}
+
+const calendar = ref<CalendarInstance>()
+
+// 获取当前日期和14天前的日期
+const endDate2 = new Date();
+const startDate2 = new Date();
+startDate2.setDate(endDate2.getDate() - 14); // 设置14天前的日期
+
+/** 获取数据 */
+const handleQuery = () => {
+  queryParamsRcgl.pageNo = 1
+  queryParamsRcgl.createTime = [formatDate(startDate2,false),formatDate(endDate2,true)]//设置时间区域
+  getList() //获取数据
+}
+
+/** 查询列表 */
+const getList = async () => {
+  try {
+    const rcglData = await RcglApi.getRcglPage(queryParamsRcgl)
+    listRcgl.value = rcglData.list
+    for(let item of listRcgl.value){
+      const formattedDate = formatDate2(item.createTime);
+      // 如果 holidays2[formattedDate] 不存在或不是数组，初始化为数组
+      if (!Array.isArray(holidays2[formattedDate])) {
+        holidays2[formattedDate] = [];
+      }
+      // 将 title 添加到数组中
+      holidays2[formattedDate].push({id:item.id,title:item.title});
+    }
+  } finally {
+  }
+}
+
+//获取详细日期时间
+function formatDate(date: Date,time:boolean) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours =time? '23' : '00';
+  const minutes =time? '59' : '00';
+  const seconds =time? '59' : '00';
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+// 获取日期
+function formatDate2(dat: number) {
+  const date = new Date(dat)
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+onMounted(()=> {
+  handleQuery()
+})
+</script>
+<style>
+/* 隐藏滚动条 */
+.holiday::-webkit-scrollbar {
+  display: none;
+}
+.custom-calendar .is-today {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+.custom-calendar {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
+  border-radius: 5px; /* 可选：添加圆角 */
+}
+.el-calendar-table .el-calendar-day {
+  height: 105px/*这个覆盖了原组件宽度*/
+}
+</style>
+<style scoped lang="scss">
+.holiday {
+  overflow-x: scroll;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+}
+.month-title {
+  text-align: center
+}
+.cl-title {
+  display: inline-block;
+  font-size: 12px
+}
+//标题的大小
+.header-date {
+  height: 40px;
+  text-align: center;
+  font-size: 16px;
+}
+.seSpan {
+  font-size: 14px;
+  color: var(--el-color-primary);
+  border: 1px solid var(--el-color-primary);
+  border-radius: 2px; /* 可选：添加圆角 */
+  padding: 0 2px 0 2px;
+}
+</style>