增加了日历显示组件
This commit is contained in:
muqing
@ -1,110 +1,118 @@
|
|||||||
{
|
{
|
||||||
"name": "ruoyi",
|
"name": "ruoyi",
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"description": "本一智慧平台管理系统",
|
"description": "本一智慧平台管理系统",
|
||||||
"author": "本一智慧平台",
|
"author": "本一智慧平台",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vue-cli-service serve",
|
"dev": "vue-cli-service serve",
|
||||||
"build:prod": "vue-cli-service build",
|
"build:prod": "vue-cli-service build",
|
||||||
"build:stage": "vue-cli-service build --mode staging",
|
"build:stage": "vue-cli-service build --mode staging",
|
||||||
"preview": "node build/index.js --preview",
|
"preview": "node build/index.js --preview",
|
||||||
"lint": "eslint --ext .js,.vue src",
|
"lint": "eslint --ext .js,.vue src",
|
||||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||||
"test:ci": "npm run lint && npm run test:unit",
|
"test:ci": "npm run lint && npm run test:unit",
|
||||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||||
"new": "plop"
|
"new": "plop"
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
"pre-commit": "lint-staged"
|
"pre-commit": "lint-staged"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"src/**/*.{js,vue}": [
|
"src/**/*.{js,vue}": [
|
||||||
"eslint --fix",
|
"eslint --fix",
|
||||||
"git add"
|
"git add"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"vue",
|
"vue",
|
||||||
"admin",
|
"admin",
|
||||||
"dashboard",
|
"dashboard",
|
||||||
"element-ui",
|
"element-ui",
|
||||||
"boilerplate",
|
"boilerplate",
|
||||||
"admin-template",
|
"admin-template",
|
||||||
"management-system"
|
"management-system"
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@fullcalendar/core": "^4.4.0",
|
||||||
"axios": "0.18.1",
|
"@fullcalendar/daygrid": "^4.4.0",
|
||||||
"clipboard": "2.0.4",
|
"@fullcalendar/interaction": "^4.4.0",
|
||||||
"echarts": "4.2.1",
|
"@fullcalendar/list": "^4.4.0",
|
||||||
"element-ui": "2.13.0",
|
"@fullcalendar/moment": "^4.4.0",
|
||||||
"file-saver": "2.0.1",
|
"@fullcalendar/timegrid": "^4.4.0",
|
||||||
"fuse.js": "3.4.4",
|
"@fullcalendar/vue": "^4.4.0",
|
||||||
"js-beautify": "^1.10.2",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"js-cookie": "2.2.0",
|
"axios": "0.18.1",
|
||||||
"jsencrypt": "3.0.0-rc.1",
|
"clipboard": "2.0.4",
|
||||||
"normalize.css": "7.0.0",
|
"echarts": "4.2.1",
|
||||||
"nprogress": "0.2.0",
|
"element-ui": "2.13.0",
|
||||||
"path-to-regexp": "2.4.0",
|
"file-saver": "2.0.1",
|
||||||
"screenfull": "4.2.0",
|
"fuse.js": "3.4.4",
|
||||||
"sortablejs": "1.8.4",
|
"js-beautify": "^1.10.2",
|
||||||
"v-distpicker": "^1.2.2",
|
"js-cookie": "2.2.0",
|
||||||
"vue": "2.6.10",
|
"jsencrypt": "3.0.0-rc.1",
|
||||||
"vue-count-to": "1.0.13",
|
"normalize.css": "7.0.0",
|
||||||
"vue-cropper": "0.4.9",
|
"nprogress": "0.2.0",
|
||||||
"vue-quill-editor": "3.0.6",
|
"path-to-regexp": "2.4.0",
|
||||||
"vue-router": "3.0.2",
|
"screenfull": "4.2.0",
|
||||||
"vue-splitpane": "1.0.4",
|
"sortablejs": "1.8.4",
|
||||||
"vuedraggable": "2.20.0",
|
"v-distpicker": "^1.2.2",
|
||||||
"vuex": "3.1.0"
|
"vue": "2.6.10",
|
||||||
},
|
"vue-count-to": "1.0.13",
|
||||||
"devDependencies": {
|
"vue-cropper": "0.4.9",
|
||||||
"@babel/core": "7.0.0",
|
"vue-quill-editor": "3.0.6",
|
||||||
"@babel/register": "7.0.0",
|
"vue-router": "3.0.2",
|
||||||
"@babel/parser": "^7.7.4",
|
"vue-splitpane": "1.0.4",
|
||||||
"@vue/cli-plugin-babel": "3.5.3",
|
"vuedraggable": "2.20.0",
|
||||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
"vuex": "3.1.0"
|
||||||
"@vue/cli-plugin-unit-jest": "3.5.3",
|
},
|
||||||
"@vue/cli-service": "3.5.3",
|
"devDependencies": {
|
||||||
"@vue/test-utils": "1.0.0-beta.29",
|
"@babel/core": "7.0.0",
|
||||||
"autoprefixer": "^9.5.1",
|
"@babel/register": "7.0.0",
|
||||||
"babel-core": "7.0.0-bridge.0",
|
"@babel/parser": "^7.7.4",
|
||||||
"babel-eslint": "10.0.1",
|
"@vue/cli-plugin-babel": "3.5.3",
|
||||||
"babel-jest": "23.6.0",
|
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||||
"chalk": "2.4.2",
|
"@vue/cli-plugin-unit-jest": "3.5.3",
|
||||||
"chokidar": "2.1.5",
|
"@vue/cli-service": "3.5.3",
|
||||||
"connect": "3.6.6",
|
"@vue/test-utils": "1.0.0-beta.29",
|
||||||
"eslint": "5.15.3",
|
"autoprefixer": "^9.5.1",
|
||||||
"eslint-plugin-vue": "5.2.2",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"babel-eslint": "10.0.1",
|
||||||
"http-proxy-middleware": "^0.19.1",
|
"babel-jest": "23.6.0",
|
||||||
"husky": "1.3.1",
|
"chalk": "2.4.2",
|
||||||
"lint-staged": "8.1.5",
|
"chokidar": "2.1.5",
|
||||||
"mockjs": "1.0.1-beta3",
|
"connect": "3.6.6",
|
||||||
"node-sass": "^4.9.0",
|
"eslint": "5.15.3",
|
||||||
"plop": "2.3.0",
|
"eslint-plugin-vue": "5.2.2",
|
||||||
"runjs": "^4.3.2",
|
"html-webpack-plugin": "3.2.0",
|
||||||
"sass-loader": "^7.1.0",
|
"http-proxy-middleware": "^0.19.1",
|
||||||
"script-ext-html-webpack-plugin": "2.1.3",
|
"husky": "1.3.1",
|
||||||
"script-loader": "0.7.2",
|
"lint-staged": "8.1.5",
|
||||||
"serve-static": "^1.13.2",
|
"mockjs": "1.0.1-beta3",
|
||||||
"svg-sprite-loader": "4.1.3",
|
"node-sass": "^4.9.0",
|
||||||
"svgo": "1.2.0",
|
"plop": "2.3.0",
|
||||||
"vue-template-compiler": "2.6.10"
|
"runjs": "^4.3.2",
|
||||||
},
|
"sass-loader": "^7.1.0",
|
||||||
"engines": {
|
"script-ext-html-webpack-plugin": "2.1.3",
|
||||||
"node": ">=8.9",
|
"script-loader": "0.7.2",
|
||||||
"npm": ">= 3.0.0"
|
"serve-static": "^1.13.2",
|
||||||
},
|
"svg-sprite-loader": "4.1.3",
|
||||||
"browserslist": [
|
"svgo": "1.2.0",
|
||||||
"> 1%",
|
"vue-template-compiler": "2.6.10"
|
||||||
"last 2 versions"
|
},
|
||||||
]
|
"engines": {
|
||||||
}
|
"node": ">=8.9",
|
||||||
|
"npm": ">= 3.0.0"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions"
|
||||||
|
],
|
||||||
|
"main": ".eslintrc.js"
|
||||||
|
}
|
||||||
|
|||||||
@ -50,4 +50,13 @@ export function exportCalendar(query) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询园历列表
|
||||||
|
export function getAllSchoolCalendars(query) {
|
||||||
|
return request({
|
||||||
|
url: '/benyi/calendar/getAllSchoolCalendars',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
}
|
}
|
||||||
164
ruoyi-ui/src/views/benyi/calendarshow/index.vue
Normal file
164
ruoyi-ui/src/views/benyi/calendarshow/index.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="4" :xs="24">
|
||||||
|
<el-button type="primary">日常活动</el-button>
|
||||||
|
<el-button type="success">教学活动</el-button>
|
||||||
|
<el-button type="info">大型活动</el-button>
|
||||||
|
<el-button type="warning">家长参与</el-button>
|
||||||
|
<el-button type="danger">节假日</el-button>
|
||||||
|
<!-- <Tag type="dot" :color="NORMAL_COLOR">未预约</Tag>
|
||||||
|
<Tag type="dot" :color="USED_COLOR">已预约</Tag>
|
||||||
|
<Tag type="dot" :color="DISABLED_COLOR">已停用</Tag> -->
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20" :xs="24">
|
||||||
|
<div>
|
||||||
|
<FullCalendar
|
||||||
|
ref="fullCalendar"
|
||||||
|
defaultView="dayGridMonth"
|
||||||
|
locale="zh-cn"
|
||||||
|
:header="header"
|
||||||
|
:buttonText="buttonText"
|
||||||
|
:plugins="calendarPlugins"
|
||||||
|
:weekends="calendarWeekends"
|
||||||
|
:views="views"
|
||||||
|
:events="calendarEvents"
|
||||||
|
:eventLimit="true"
|
||||||
|
:displayEventEnd="true"
|
||||||
|
eventLimitText="更多"
|
||||||
|
@dateClick="handleDateClick"
|
||||||
|
@eventClick="handleEventClick"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FullCalendar from '@fullcalendar/vue'
|
||||||
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||||
|
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||||
|
import interactionPlugin from '@fullcalendar/interaction'
|
||||||
|
import listPlugin from '@fullcalendar/list';
|
||||||
|
import { getAllSchoolCalendars } from "@/api/benyi/calendar"
|
||||||
|
export default {
|
||||||
|
name: 'fullcalendar_page',
|
||||||
|
components: {
|
||||||
|
FullCalendar
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// DISABLED_COLOR: '#c5c8ce',
|
||||||
|
// USED_COLOR: '#19be6b',
|
||||||
|
// NORMAL_COLOR: '#2db7f5',
|
||||||
|
views: {
|
||||||
|
list: {
|
||||||
|
noEventsMessage: '暂无日程'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
left: 'prev,next today',
|
||||||
|
center: 'title',
|
||||||
|
right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek'
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
today: '今天',
|
||||||
|
month: '月',
|
||||||
|
week: '周',
|
||||||
|
day: '日',
|
||||||
|
list: '周列表'
|
||||||
|
},
|
||||||
|
calendarPlugins: [ // plugins must be defined in the JS
|
||||||
|
dayGridPlugin,
|
||||||
|
// timeGridPlugin,
|
||||||
|
interactionPlugin,// needed for dateClick
|
||||||
|
listPlugin
|
||||||
|
],
|
||||||
|
calendarWeekends: true,
|
||||||
|
calendarEvents: [ // initial event data
|
||||||
|
{
|
||||||
|
title: 'Event Now',
|
||||||
|
start: new Date(),
|
||||||
|
color: '#A61000'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
calendarApi: null,
|
||||||
|
calendarData: [],
|
||||||
|
queryParams: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
getAllSchoolCalendars(this.queryParams).then(response => {
|
||||||
|
this.calendarEvents = response.calendarData;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCalendarEvents (info, successCallback, failureCallback) {
|
||||||
|
// const events = this.getSchoolCalendarList();
|
||||||
|
console.log("ceshi11111111");
|
||||||
|
getAllSchoolCalendars(this.queryParams).then(response => {
|
||||||
|
this.calendarData = response.calendarData;
|
||||||
|
});
|
||||||
|
console.log("ceshi22222222");
|
||||||
|
const events = this.calendarData;
|
||||||
|
console.log(this.calendarData);
|
||||||
|
console.log(events);
|
||||||
|
// const events = [
|
||||||
|
// ...this.calendarEvents,
|
||||||
|
// {
|
||||||
|
// title: '五一劳动节',
|
||||||
|
// start: '2020-05-01 00:00:00',
|
||||||
|
// end: '2020-05-06 00:00:00',
|
||||||
|
// color:'orange'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// start: '2020-05-02 10:00:00',
|
||||||
|
// end: '2020-05-02 14:00:00',
|
||||||
|
// title: '东南大学计算机学术会议',
|
||||||
|
// color:'green'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
successCallback(events)
|
||||||
|
},
|
||||||
|
toggleWeekends () {
|
||||||
|
this.calendarWeekends = !this.calendarWeekends // update a property
|
||||||
|
},
|
||||||
|
gotoPast () {
|
||||||
|
this.calendarApi.gotoDate('2019-08-01') // call a method on the Calendar object
|
||||||
|
},
|
||||||
|
handleDateClick (arg) {
|
||||||
|
if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
|
||||||
|
this.calendarEvents.push({ // add new event data
|
||||||
|
title: 'New Event',
|
||||||
|
start: arg.date,
|
||||||
|
allDay: arg.allDay
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.calendarApi.refetchEvents()
|
||||||
|
},
|
||||||
|
handleEventClick (info) {
|
||||||
|
alert('Event: ' + info.event.title)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.calendarApi = this.$refs.fullCalendar.getApi()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scope>
|
||||||
|
// you must include each plugins' css
|
||||||
|
// paths prefixed with ~ signify node_modules
|
||||||
|
@import '~@fullcalendar/core/main.css';
|
||||||
|
@import '~@fullcalendar/daygrid/main.css';
|
||||||
|
@import '~@fullcalendar/timegrid/main.css';
|
||||||
|
@import '~@fullcalendar/list/main.css';
|
||||||
|
.panel {
|
||||||
|
padding-top: 64px;
|
||||||
|
color: deeppink;
|
||||||
|
}
|
||||||
|
.calendar {
|
||||||
|
width: 820px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,6 +1,10 @@
|
|||||||
package com.ruoyi.project.benyi.controller;
|
package com.ruoyi.project.benyi.controller;
|
||||||
|
|
||||||
|
import java.text.SimpleDateFormat;
|
||||||
|
import java.util.ArrayList;
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
|
|
||||||
|
import com.ruoyi.project.benyi.domain.ByCalendarShow;
|
||||||
import org.springframework.security.access.prepost.PreAuthorize;
|
import org.springframework.security.access.prepost.PreAuthorize;
|
||||||
import org.springframework.beans.factory.annotation.Autowired;
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
import org.springframework.web.bind.annotation.GetMapping;
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
@ -100,4 +104,34 @@ public class ByCalendarController extends BaseController
|
|||||||
{
|
{
|
||||||
return toAjax(byCalendarService.deleteByCalendarByIds(ids));
|
return toAjax(byCalendarService.deleteByCalendarByIds(ids));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@PreAuthorize("@ss.hasPermi('benyi:schoolcalendar:list')")
|
||||||
|
@GetMapping("/getAllSchoolCalendars")
|
||||||
|
public AjaxResult getAllSchoolCalendars(ByCalendar byCalendar) {
|
||||||
|
|
||||||
|
|
||||||
|
List<ByCalendarShow> listvi= new ArrayList<>();
|
||||||
|
SimpleDateFormat formatter=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||||
|
//加载本一园历
|
||||||
|
List<ByCalendar> list = byCalendarService.selectByCalendarList(byCalendar);
|
||||||
|
for (ByCalendar calendar:list) {
|
||||||
|
ByCalendarShow by = new ByCalendarShow();
|
||||||
|
by.setId(calendar.getId());
|
||||||
|
by.setTitle(calendar.getName());
|
||||||
|
by.setStart(formatter.format(calendar.getActivitytime()));
|
||||||
|
by.setEnd(formatter.format(calendar.getActivityendtime()));
|
||||||
|
by.setColor(calendar.getStylecolor());
|
||||||
|
listvi.add(by);
|
||||||
|
}
|
||||||
|
//加载幼儿园园历
|
||||||
|
|
||||||
|
//接在班级园历
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
AjaxResult ajax = AjaxResult.success();
|
||||||
|
ajax.put("calendarData", listvi);
|
||||||
|
return ajax;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,54 @@
|
|||||||
|
package com.ruoyi.project.benyi.domain;
|
||||||
|
|
||||||
|
import com.ruoyi.framework.aspectj.lang.annotation.Excel;
|
||||||
|
|
||||||
|
import java.util.Date;
|
||||||
|
|
||||||
|
public class ByCalendarShow {
|
||||||
|
|
||||||
|
private Long id;
|
||||||
|
private String title;
|
||||||
|
private String start;
|
||||||
|
private String end;
|
||||||
|
private String color;
|
||||||
|
|
||||||
|
public Long getId() {
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setId(Long id) {
|
||||||
|
this.id = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getTitle() {
|
||||||
|
return title;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setTitle(String title) {
|
||||||
|
this.title = title;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getStart() {
|
||||||
|
return start;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setStart(String start) {
|
||||||
|
this.start = start;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getEnd() {
|
||||||
|
return end;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setEnd(String end) {
|
||||||
|
this.end = end;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getColor() {
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setColor(String color) {
|
||||||
|
this.color = color;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user