oa-system/src/components/child/Aideindex.vue

<template>
    <div>
        <div class="all-box">
            <div class="list-staff">
                <div class="aide-schedule">
                    <!-- 代办任务  日程表 -->
                    <div class="top" style="background: #fff; padding: 8px 6px">
                        <div class="modelBox">
                        <span class="radis"></span>
                        </div>
                        <div class="tabs" style="width: 100%">
                        <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" />
                        </div>
                    </div>
                </div>
                <div class="staff-list">
                    <div class="staff-title">
                        <div>员工列表</div>
                        <div class="staff-box">
                            <el-input
                                placeholder="请输入内容"
                                v-model="input"
                                clearable>
                            </el-input>
                            <el-button type="primary"><i class="iconfont icon-sousuo"></i></el-button>
                        </div>
                    </div>
                    <template>
                        <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        border
                        style="width: 100%">
                            <el-table-column
                                prop="num"
                                label="序 号"
                                width="60">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                width="100"
                                label="员工号">
                            </el-table-column>
                            <el-table-column
                                width="100" 
                                prop="name"
                                label="姓 名">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="分属公司"
                                width="220">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="职 位"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="分机号"
                                width="100">
                            </el-table-column>
                            <el-table-column
                                prop="pnum"
                                label="手机号"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="pnum"
                                label="紧急联络电话"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="电子邮箱">
                            </el-table-column>
                        </el-table>
                    </template>
                    <div class="block">
                        <el-pagination align='center' 
                            @size-change="handleSizeChange" 
                            @current-change="handleCurrentChange"
                            :current-page="currentPage" 
                            :page-sizes="[10,15,20]" 
                            :page-size="pageSize" 
                            layout="total, sizes, prev, pager, next" 
                            :total="tableData.length">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
import tippy from 'tippy.js';
export default {
    components:{
        FullCalendar
    },
    data(){
        return{
            tableData: [
                {
                    num:'1',
                    date: '2016-05-03',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'2',
                    date: '2016-05-02',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'3',
                    date: '2016-05-04',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'4',
                    date: '2016-05-01',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'5',
                    date: '2016-05-08',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'6',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'7',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'8',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'9',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'10',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'11',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'12',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'13',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'14',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'15',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'16',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'17',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            currentPage: 1, // 当前页码
            pageSize: 8 ,// 每页的数据条数
            input:'',
            //日程数据
            calendarOptions: {
                plugins: [
                // 加载插件，V5采用插件模块方式加入
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin, // needed for dateClick
                ],
                //height: 660, //日历高度
                width: 600,
                headerToolbar: {
                // 头部toolba
                left: 'prev,next today',
                center: 'title',
                right: 'timeGridDay,timeGridWeek,dayGridMonth',
                // right: 'dayGridMonth'
                },
                handleWindowResize: true, //随浏览器窗口变化
                initialView: 'dayGridMonth', // 初始化插件显示
                // initialDate:""//初始化日期
                // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
                //editable: true, //是否可编辑
                // droppable: true,//可拖拽的
                // timeZone: 'local',//采用时区
                selectable: true,
                // selectMirror: true,
                dayMaxEvents: true,
                // weekends: true, // 是否显示一周七天
                // select: this.handleDateSelect,
                // eventClick: this.handleEventClick, // 日程点击事件
                eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发
                // eventsSet: this.handleEvents,
                dateClick: this.handleDateClick,//日期方格点击事件
                eventClick: this.handleEventClick, //日程点击事件
                locale: zhCnLocale,
                nextDayThreshold: '01:00:00',
                events: [
                //日程事件的json
                    { title: '雷怡', date: '2023-03-24 12:00:00',color:'#ff9900'},
                    { title: '雷怡', date: '2023-03-24 15:00:00',color:'#ff9900'},
                    { title: 'event 1', start: '2023-03-25 10:59:23',end:'2023-03-26 14:59:23' },
                    { title: 'event 3', date: '2023-03-25 08:23:00' },
                    { title: 'event 4', date: '2023-03-25 09:30:00' },
                    { title: 'event 5', date: '2023-03-26 12:00:00' },
                    { title: 'event 2', date: '2023-03-26 15:00:00' }
                ],
                // datesSet: this.handleDateSet,
                /* you can update a remote database when these fire:
                eventAdd:
                eventChange:
                eventRemove:
                */
            }
        }
    },
    methods:{
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        handleEventMouseEnter(info) {
            console.log(info, 'yyyy')
            let col = info.event.borderColor
            let eve = info.event._def.extendedProps
            let category = info.event._def.extendedProps.category

            tippy(info.el, {
                // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" +
                //         "</div>",
                content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'>
                        <div style='display:flex;color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}">
                            <div><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称： </div>
                            <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div>
                        </div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div>
                        </div>`,
                theme: 'light', //主题选取
                // trigger: 'click', //触发类型
                interactive: true, //可交互的
                placement: 'top-start', //悬浮框位置
                allowHTML: true, //是否允许html文本
                zIndex: 99999,
            })
        },
        handleEventClick(info){
            console.log(info)
        },
        handleDateClick(inif){
            // console.log(info)
        }
    }
}
</script>
<style>
    .staff-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .staff-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .staff-box{
        display: flex;
    }
    .staff-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
    .aide-schedule{
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 0 5px #0005;
        overflow: hidden;
    }

    /*element*/
    .el-table td.el-table__cell div{
        text-align: center;
    }
    .el-table th.el-table__cell>.cell{
        text-align: center;
    }

    /*FullCalendar*/
    .fc .fc-toolbar-title{
        color: #555;
    }
    .fc .fc-button-primary{
        background-color: #5EADFF;
        border-color: #5EADFF;
    }
    .fc .fc-button-primary:hover{
        background-color: #108dff;
        border-color: #108dff;
    }
    .fc .fc-button-primary:not(:disabled):active:focus {
        box-shadow: none;
    }
    .fc .fc-button-primary:not(:disabled):active {
        background-color: #108dff;
        border-color: #108dff;
    }
    .fc .fc-button-primary:focus {
        box-shadow: none;
    }
    .fc .fc-button-primary:disabled {
        background-color: #5EADFF;
        border-color: #5EADFF;
    }
    .fc .fc-button-primary:not(:disabled).fc-button-active:focus{
        box-shadow:none;
    }
    .fc .fc-button-primary:not(:disabled).fc-button-active{
        background-color: #108dff;
        border-color: #108dff;
    }
    .fc .fc-toolbar.fc-header-toolbar{
        margin-bottom: 0.1em;
    }
</style>