123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415 |
- <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>
|