参考企业微信日程 通过vue+elementUi编写一个按月统计会议的日程计划组件

news2024/12/27 10:08:25

这个组件的话 需要三个第三方依赖

npm install --save chinese-lunar-calendar sass sass-loader element-ui

sass因为我这里 还是习惯写sass样式 毕竟真的方便啊
chinese-lunar-calendar 是一款将日期转为农历的工具
element-ui主要是表格真的方便

在 项目src下的main.js入口文件 挂一下element-ui

import ElementUI from 'element-ui';
Vue.use(ElementUI)

组件参考代码如下

<template>
    <div class = "root">
        <el-table
            :data="tableData"
            style="width: 100%"
            height="calc(100vh - 40px)"
            border
            v-if = "isminkey"
        >
            <el-table-column
                label="周日"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.sunday&&scope.row.sunday.text?scope.row.sunday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.sunday&&scope.row.sunday.calendar?scope.row.sunday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme">
                            <div
                              class = "commandLine"
                              v-if = "scope.row.sunday&&scope.row.sunday.list"
                              v-for = "item in scope.row.sunday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
            <el-table-column
                label="周一"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.Monday&&scope.row.Monday.text?scope.row.Monday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.Monday&&scope.row.Monday.calendar?scope.row.Monday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme" v-if = "scope.row.Monday&&scope.row.Monday.list">
                            <div
                              class = "commandLine"
                              v-for = "item in scope.row.Monday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
            <el-table-column
                label="周二"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.Tuesday&&scope.row.Tuesday.text?scope.row.Tuesday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.Tuesday&&scope.row.Tuesday.calendar?scope.row.Tuesday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme" v-if = "scope.row.Tuesday&&scope.row.Tuesday.list">
                            <div
                              class = "commandLine"
                              v-for = "item in scope.row.Tuesday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
            <el-table-column
                label="周三"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.Wednesday&&scope.row.Wednesday.text?scope.row.Wednesday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.Wednesday&&scope.row.Wednesday.calendar?scope.row.Wednesday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme" v-if = "scope.row.Wednesday&&scope.row.Wednesday.list">
                            <div
                              class = "commandLine"
                              v-for = "item in scope.row.Wednesday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
            <el-table-column
                label="周四"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.Thursday&&scope.row.Thursday.text?scope.row.Thursday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.Thursday&&scope.row.Thursday.calendar?scope.row.Thursday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme" v-if = "scope.row.Thursday&&scope.row.Thursday.list">
                            <div
                              class = "commandLine"
                              v-for = "item in scope.row.Thursday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
            <el-table-column
                label="周五"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.Friday&&scope.row.Friday.text?scope.row.Friday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.Friday&&scope.row.Friday.calendar?scope.row.Friday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme" v-if = "scope.row.Friday&&scope.row.Friday.list">
                            <div
                              class = "commandLine"
                              v-for = "item in scope.row.Friday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
            <el-table-column
                label="周六"
            >
                <template slot-scope="scope">
                    <section
                        class = "module"
                    >
                        <header>
                            <span>{{ scope.row.saturday&&scope.row.saturday.text?scope.row.saturday.text:'' }}</span>
                            <span
                              style = "margin-left: 11px;"
                            >{{ scope.row.saturday&&scope.row.saturday.calendar?scope.row.saturday.calendar:'' }}</span>
                        </header>
                        <section class = "agendaTheme" v-if = "scope.row.saturday&&scope.row.saturday.list">
                            <div
                              class = "commandLine"
                              v-for = "item in scope.row.saturday.list"
                              :key = "item.id"
                            >
                                <div :style = "`background: ${colorMap[item.type]}`"></div>
                                <span>{{ item.name }}</span>
                            </div>
                        </section>
                    </section>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getLunar } from 'chinese-lunar-calendar'
export default {
    data() {
        return {
            DateConversion: {
                0: "周日",
                1: "周一",
                2: "周二",
                3: "周三",
                4: "周四",
                5: "周五",
                6: "周六",
            },
            monthComparison: {
                1: 31,
                2: null,
                3: 31,
                4: 30,
                5: 31,
                6: 30,
                7: 31,
                8: 31,
                9: 30,
                10: 31,
                11: 30,
                12: 31
            },
            tableData: [],
            minutesTheMeeting: {
                "2023-05-13":[
                    {
                        id: 1,
                        type: 1,
                        name: "09:00 这是他人同步的时间计划内容"
                    },
                    {
                        id: 2,
                        type: 0,
                        name: "11:00 这是事件名称"
                    }
                ],
                "2023-05-02":[
                    {
                        id: 1,
                        type: 1,
                        name: "09:00 这是他人同步的时间计划内容"
                    },
                    {
                        id: 2,
                        type: 0,
                        name: "11:00 这是事件名称"
                    }
                ],
                "2023-05-18":[
                    {
                        id: 1,
                        type: 1,
                        name: "09:00 这是他人同步的时间计划内容"
                    },
                    {
                        id: 2,
                        type: 0,
                        name: "11:00 这是事件名称"
                    },
                    {
                        id: 3,
                        type: 2,
                        name: "13:00 数据管理测试"
                    },
                    {
                        id: 4,
                        type: 0,
                        name: "13:00 时间管理"
                    },
                    {
                        id: 5,
                        type: 0,
                        name: "13:00 时间管理"
                    },
                    {
                        id: 6,
                        type: 0,
                        name: "13:00 时间管理"
                    },
                    {
                        id: 7,
                        type: 0,
                        name: "13:00 时间管理"
                    }
                ]
            },
            colorMap: {
                0: "#21B1FF",
                1: "#2ECC71",
                2: "#F8A124"
            },
            isminkey: true
        }
    },
    methods: {
        ObtainPlan(date) {
            const { minutesTheMeeting } = this;
            return new Promise((resolve)=>{
                setTimeout(function(){
                    if(minutesTheMeeting[date]){
                        resolve(minutesTheMeeting[date]);
                    }else{
                        resolve([]);
                    }
                },50)
            })
        },
        ateToString(year,month,day) {
            var dateTime = year+'-' +
            (month.length <= 1?("0"+month):month)+
            '-' +
            (day.length <= 1?("0"+day):day)
            return dateTime
        },
        getLunar(date,number) {
            let data = getLunar(date.year, date.month, number);
            return data.dateStr.split("月")[1]?data.dateStr.split("月")[1]:data.dateStr;
        },
        backDay(year) {
            return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)?29:28;
        },
        identify(currentDate,date) {
            this.ObtainPlan(this.ateToString(String(date.year), String(date.month), String(currentDate))).then(list=>{
                if(this.tableData.length) {
                    let tableData = this.tableData[this.tableData.length - 1];
                    if(!tableData.Monday || !tableData.Monday.text) {
                        tableData.Monday = {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    } else if(!tableData.Tuesday || !tableData.Tuesday.text) {
                        tableData.Tuesday = {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    } else if(!tableData.Wednesday || !tableData.Wednesday.text) {
                        tableData.Wednesday = {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    } else if(!tableData.Thursday || !tableData.Thursday.text) {
                        tableData.Thursday = {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    } else if(!tableData.Friday || !tableData.Friday.text) {
                        tableData.Friday = {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    } else if(!tableData.saturday || !tableData.saturday.text) {
                        tableData.saturday = {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    } else {
                        this.tableData.push({
                            sunday: {
                                text: currentDate,
                                calendar: this.getLunar(date,currentDate),
                                list
                            }
                        })
                    }
                } else {
                    this.tableData.push({
                        sunday: {
                            text: currentDate,
                            calendar: this.getLunar(date,currentDate),
                            list
                        }
                    })
                }
                this.isminkey = false;
                this.$nextTick(()=>{
                    this.isminkey = true;
                })
            }).catch(err=>{})
        },
        RotaryCalendar(years,month,index) {
            let theSameDay = new Date(years);
            if((index+1) == 1) {
                years += "-01";
                if(theSameDay.getDay() != 0) {
                    let Day = theSameDay.getDay();
                    let daiyear = theSameDay.getFullYear();
                    let base;
                    if(month == 1){
                        base = 12;
                        daiyear -= 1;
                    }else{
                        base = (Number(month) - 1);
                    }

                    for(let i = Day;i > 0;i--) {
                        let currentDate = this.monthComparison[base] - (i-1);
                        this.identify(currentDate,{
                            year: daiyear,
                            month: base
                        });
                    }
                }
                this.identify(1,{
                    year: theSameDay.getFullYear(),
                    month: theSameDay.getMonth() + 1
                });
            } else if((index+1) == this.monthComparison[Number(month)]) {
                years += `-${this.monthComparison[Number(month)]}`;
                let theSameDay = new Date(years);
                this.identify(
                    (index+1),
                    {
                        year: theSameDay.getFullYear(),
                        month: theSameDay.getMonth() + 1
                    }
                );
                if(theSameDay.getDay() != 6) {
                    let Day = theSameDay.getDay();
                    let daiyear = theSameDay.getFullYear();
                    let base;
                    if(month == 12) {
                        daiyear += 1;
                        base = 1;
                    }else{
                        base = (Number(month) + 1);
                    }
                    let min = 1;
                    for(let i = Day;i < 6;i++) {
                        this.identify(min,{
                            year: daiyear,
                            month: base
                        });
                        min ++;
                    }
                }
            } else {
                this.identify(
                    (index+1),
                    {
                        year: theSameDay.getFullYear(),
                        month: theSameDay.getMonth() + 1
                    }
                );
            }
        },
        getMonthlyObject(years) {
            let date = years?new Date(years):new Date();
            if(!years) {
                years = `${date.getFullYear()}-${date.getMonth() + 1}`
            }
            this.monthComparison[2] = this.backDay(date.getFullYear());
            let month = years.split("-")[1];
            month = Number(month);
            this.tableData = [];
            for(let i = 0;i < this.monthComparison[month];i++) {
                this.RotaryCalendar(years,month,i);
            }
            console.log(this.tableData);
        },
    },
    created() {
        this.getMonthlyObject();
    }

}
</script>

<style lang='scss' scoped>
.module{
    width: calc(100% - 32px);
    height: 141px;
    padding: 16px;
    display: flex;
    flex-direction:column;
    header{
        padding: 0;
        text-align: center;
        font-size: 14px;
        color: #999999;
        margin-bottom: 12px;
    }
    .agendaTheme{
        width: 100%;
        flex: 1;
        overflow: auto;
        .commandLine{
            width: 100%;
            display: flex;
            align-items: center;
            height: 20px;
            font-size: 12px;
            div{
                height: 4px;
                width: 4px;
                margin: 0 4px;
                border-radius: 50%;
            }
            span{
                display: inline-block;
                height: 20px;
                line-height: 20px;
                width: calc(100% - 12px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow:ellipsis; 
            }
        }
    }
}
</style>
<style scoped>
.root >>> .el-table .has-gutter tr{
    height: 48px;
}
.root >>> .el-table th.el-table__cell>.cell{
    text-align: center;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}
</style>

效果大概是这样
在这里插入图片描述
可以获取到这个月所有关联的周的日期 并转成农历日期 同时我有判断 如果一号不是周日 就继续去取上一个月的日期 保证第一个是周日
然后最后一天不是周六 也会去下一个月继续取日期 其中也考虑到了 12 或 1月 去去年12 下一年1月接着取的逻辑

然后 minutesTheMeeting存了会议 因为考虑大家可能要用接口获取 所以这里写了定时器获取 模仿异步操作

同时 样式上 高度超出滚动 横向超出文本给省略号都有处理
如果大家有兴趣二开 能有所帮助 就太好了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/559266.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何学好人工智能?

“在主流的视频直播教学之外&#xff0c;直接与老师在课件上互动能够更快地让我进入学习状态。” 大家的时间都很宝贵&#xff0c;当我们好不容易下定决心要学习一门新知识时&#xff0c;各种影响学习的噪声会在本不富裕的耐心上大打折扣&#xff0c;万事开头难变成了真理。特别…

[技术分享]Android平台实时音视频录像模块设计之道

实现背景 录像有什么难的&#xff1f;无非就是数据过来&#xff0c;编码保存mp4而已&#xff0c;这可能是好多开发者在做录像模块的时候的思考输出。是的&#xff0c;确实不难&#xff0c;但是做好&#xff0c;或者和其他模块有非常好的逻辑配合&#xff0c;确实不容易。 好多…

考研复试第十六天:合并果子 【哈佛曼树】

前置知识 哈佛曼树&#xff1a;我们先来复习一下啥叫做哈佛曼树 1.背景 我们有下面这样一个字符串需要编码&#xff0c;就是将下面的字符转为二进制。我们采用的方法是前缀编码&#xff0c;用一颗树的叶节点来放字符。 2.前缀编码 编码是咋样的呢&#xff1f;看下面这个例子…

BurpSuite—Project options模块(项目选择)

本文主要BurpSuite—Project options模块(项目选择)介绍的相关内容 关于BurpSuite的安装可以看一下之前这篇文章&#xff1a; http://t.csdn.cn/cavWt 一、简介 Project options主要用来对Project的一些设置。 二、模块说明 Project options主要由五个模块组成: 1.Connect…

Zabbix“专家坐诊”第192期问答汇总

问题一 Q&#xff1a;请问下&#xff0c;客户机snmptrap发告警为啥server web收不到&#xff0c;关键是snmptrap日志已经收到&#xff0c;zabbix server配置以及开启snmptrap1 snmptrapvar log snmptrap snmptrap.log&#xff1f; A&#xff1a;有配置trap的监控项吗&#xff…

Install ELK+Filebeat on Kubernetes Cluster with Helm

目录 Node & Software & Docker Images Lists Prerequisites Install ELK Manually Deploying ElasticSearch Create deployment Expose deployment Deploying Kibana Create deployment Accessing the Kibana UI Deploying Logstash Create ConfigMap and…

快手上市后首次盈利,直播电商业务成造血利器

5月22日盘前&#xff0c;快手业绩还没有发布&#xff0c;股价却先涨为敬&#xff0c;中信证券、彭博、中金公司等多家机构给出超预期业绩的预测。盘后公布的业绩确实超过市场的一致预期&#xff0c;市场在今天也给出正面回应&#xff0c;股价再次上扬&#xff0c;最高点达57.10…

revit窗族的平面出图设置,revit快速创建幕墙

一、revit窗族的平面出图设置 在平面视图中&#xff0c;为了满足出图的需要&#xff0c;我们经常要修改在不同的详细程度的可见性设置。 例如我们的窗在没有进行设置时在粗略/中等/精细的详细程度中都可以看到清晰的窗体构件。那么要使窗在精细程度中才可以看见详细的窗体结构&…

Sentinel如何实现对分布式系统的高可用性和流量控制?我们通过源码一起学习

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章将详细介绍Sentinel源码实现对分布式系统高可用性和流量控制&#xff0c;后续文章将详细介绍Sentinel的其他知识。 如果文章有什么需要改进的地方还请大佬不吝赐教…

蓝桥杯单片机DS18b20单总线测温模块常见问题解决

蓝桥杯单片机DS18b20单总线测温模块常见问题解决 有道是&#xff1a;“溪水声声留我住&#xff0c;梅花朵朵唤人回” DS18b20测温模块作为一个比较简单、稳定的蓝桥杯单片机外设模块&#xff0c; 使用时却经常出现各种问题&#xff0c;总是让我们不禁三番多次回顾其基础知识…

再获认可!腾讯连续三年被Gartner列为CWPP供应商之一

随着云的快速发展&#xff0c;企业的工作负载已经从服务器发展到虚拟机、容器、serverless等&#xff0c;部署的模式也日益复杂&#xff0c;包括公有云、混合云和多云等。在此背景下&#xff0c;传统的主机安全防护已无法满足需求&#xff0c;CWPP&#xff08;云工作负载保护平…

飞鹤乳业携手用友,重塑财务价值,开创财务共享服务新局面

在这个数字化时代&#xff0c;企业需要不断地面对各种变革和挑战&#xff0c;而数字化财务共享服务正是帮助企业应对挑战和实现数字化转型的有效手段之一。飞鹤乳业携手用友&#xff0c;以数字化财务共享服务平台为契机&#xff0c;旨在整合财务资源&#xff0c;优化财务流程&a…

小白必看!数据库自学入门教程,免费的SQL认证课程

在数据库国产化浪潮下&#xff0c;你是否想尽快更新你的知识体系&#xff1f;好程序员整理了免费的SQL认证教程&#xff0c;方便大家按需选择学习&#xff0c;证明自己的实力&#xff0c;获得更多职场机会&#xff01; 1.SQL数据分析- Udacity 2.SQL入i]- Codecademy 3.SQL Ser…

从零实现一个数据库(DataBase) Go语言实现版 4.B树实现(Part1))

英文源地址 本章将使用Go语言实现一个不可变地B树.这是一个最小实现, 因此很容易理解. Node节点的格式 我们的B树最终将被持久化到磁盘上, 因此我们首先需要为b树节点设计数据格式.如果没有这种格式, 我们将无法知道节点的大小以及何时拆分节点. 一个节点包含: 一个固定大小…

Bug可以说是一种缺陷吗?

我叫缺陷&#xff0c;从被创建至关闭&#xff0c;到最后做缺陷分析&#xff0c;这是我的完整生命周期。我的整个生命周期贯穿着整个项目的项目周期&#xff0c;因此&#xff0c;掌握我的生命周期&#xff0c;不止是测试人员必修的课程&#xff0c;也是测试人员的灵魂。 缺陷的…

Android 动态加载资源

资源文件分类 1.android资源文件分为两类&#xff1a; 第一类是res目录下存放的可编译资源文件&#xff0c;编译时&#xff0c;系统会自动在R.java中生成资源文件的十六进制值&#xff0c;如下所示&#xff1a; public final class R {public static final class id {public …

从注解@EventListener和@TransactionalEventListener掌握Spring的事件机制原理

文章目录 Spring事件监听机制Spring事件监听机制概述Spring事件监听机制介绍Spring事件相关的几个类使用硬编码简单还原Spring事件机制 Spring事件机制正确的使用方式Spring事件创建Spring事件发布方式Spring事件监听方式面向接口的方式面向注解的方式EventListenerTransaction…

SpringBoot开发实用篇2---与数据层技术有关的替换和整合

四、数据层解决方案 1.SQL 现有数据层解决方案技术选型&#xff1a;DruidMyBatis-plusMySQL 数据源&#xff1a;DruidDataSource 持久化技术&#xff1a;MyBatis-plus/MyBatis 数据库&#xff1a;MySql 内置数据源&#xff1a; SpringBoot提供了3种内嵌的数据源对象供开发者选…

2023年数据治理企业老板为啥都让员工考CDGA/CDGP证书?

企业老板让员工考取CDGA证书一般有以下几个原因: 提升数据治理能力 CDGA认证是一种全球通用的数据治理认证&#xff0c;可以帮助员工提升数据治理的技能和能力更好地管理、保护和分析企业的数据。 增强员工竞争力 随着数据治理在企业中的重要性越来越高&#xff0c;拥有CDGA…

day01_单元测试_配置文件

一、软件的生命周期 **软件的可行性分析:**分析该软件是否值的研发,会消耗多少成本,能带来多少的利益等分析 **需求分析:**分析该软件具体该具备有那些功能,产品经理与客户一起讨论 **软件设计:**该软件应该使用什么样的架构,用什么样的数据库,每个模块的具体功能 **程序编…