|
|
@@ -1,136 +1,173 @@
|
|
|
<template>
|
|
|
- <basic-block title="日历">
|
|
|
- <!--
|
|
|
- <div class="tag-tip">
|
|
|
- <el-tag size="small" color="#f08f00">审核中</el-tag>
|
|
|
- <el-tag size="small" color="#6bb377">已审核</el-tag>
|
|
|
- <el-tag size="small" color="#999">已结算</el-tag>
|
|
|
- </div>
|
|
|
- -->
|
|
|
- <el-row type="flex" justify="space-between">
|
|
|
+ <div>
|
|
|
+ <basic-block title="日历">
|
|
|
<!--
|
|
|
- <el-col :span="4">
|
|
|
- <div class="room-content">
|
|
|
- <div class="room-title">会议室列表</div>
|
|
|
- <div class="room-list" :class="{'active-list': index === activeNum}"
|
|
|
- v-for="(item, index) in meetingRoomList" :key="index" @click="chooseRoom(index)">
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
+ <div class="tag-tip">
|
|
|
+ <el-tag size="small" color="#f08f00">审核中</el-tag>
|
|
|
+ <el-tag size="small" color="#6bb377">已审核</el-tag>
|
|
|
+ <el-tag size="small" color="#999">已结算</el-tag>
|
|
|
+ </div>
|
|
|
-->
|
|
|
- <el-col :span="19">
|
|
|
- <div class="calendar-box">
|
|
|
- <full-calendar
|
|
|
- ref="fullCalendar"
|
|
|
- style="height: 100%"
|
|
|
- :options="calendarOptions"
|
|
|
- >
|
|
|
- </full-calendar>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!--日程新增弹窗start-->
|
|
|
- <el-dialog
|
|
|
- title="会议新增"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- :before-close="close"
|
|
|
- :modal="false"
|
|
|
- width="45%">
|
|
|
- <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small" class="demo-ruleForm" :disabled="auth? false: 'disabled'">
|
|
|
- <el-form-item label="会议名称" prop="title">
|
|
|
- <el-input v-model="form.title"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="参会角色" prop="roleName">
|
|
|
- <el-select v-model="form.roleName" clearable filterable placeholder="参会角色">
|
|
|
- <el-option
|
|
|
- v-for="item in roleNameList"
|
|
|
- :key="item.userId"
|
|
|
- :label="item.name"
|
|
|
- :value="item.userId">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="是否是党会" prop="isParty">
|
|
|
- <el-select v-model="form.isParty" clearable filterable placeholder="是否是党会">
|
|
|
- <el-option
|
|
|
- v-for="item in isParrty"
|
|
|
- :key="item.is_party"
|
|
|
- :label="item.name"
|
|
|
- :value="item.is_party">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="发起科室" prop="leaderName">
|
|
|
- <el-input v-model="form.leaderName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="会议开始时间" required>
|
|
|
- <el-col :span="11">
|
|
|
- <el-form-item prop="begindate" style="margin-bottom: 0">
|
|
|
- <el-date-picker type="date"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- placeholder="选择日期"
|
|
|
- v-model="form.begindate"
|
|
|
- style="width: 100%;" >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col class="line" :span="2">-</el-col>
|
|
|
- <el-col :span="11">
|
|
|
- <el-form-item prop="startTime" style="margin-bottom: 0">
|
|
|
- <el-time-select placeholder="选择时间"
|
|
|
- v-model="form.startTime"
|
|
|
- :picker-options="{
|
|
|
- start: '00:00',
|
|
|
- step: '00:30',
|
|
|
- end: '23:30 ',
|
|
|
- }"
|
|
|
- @change="onStartTime"
|
|
|
- style="width: 100%;">
|
|
|
- </el-time-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="会议结束时间" required>
|
|
|
- <el-col :span="11">
|
|
|
- <el-form-item prop="enddate" style="margin-bottom: 0">
|
|
|
- <el-date-picker type="date"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- placeholder="选择日期"
|
|
|
- v-model="form.enddate"
|
|
|
- style="width: 100%;">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col class="line" :span="2">-</el-col>
|
|
|
- <el-col :span="11">
|
|
|
- <el-form-item prop="endTime" style="margin-bottom: 0">
|
|
|
- <el-time-select placeholder="选择时间"
|
|
|
- v-model="form.endTime"
|
|
|
- :picker-options="{
|
|
|
- start: '00:00',
|
|
|
- step: '00:30',
|
|
|
- end: '23:30 ',
|
|
|
- minTime: form.startTime
|
|
|
- }"
|
|
|
- style="width: 100%;">
|
|
|
- </el-time-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="会议备注" prop="remark">
|
|
|
- <el-input type="textarea" v-model="form.remark"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button @click="resetForm('form')">取消</el-button>
|
|
|
- <el-button type="primary" @click="submitForm('form')">提交</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-dialog>
|
|
|
- <!--日程新增弹窗end-->
|
|
|
- </basic-block>
|
|
|
+ <el-row type="flex" justify="space-between">
|
|
|
+ <!--
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="room-content">
|
|
|
+ <div class="room-title">会议室列表</div>
|
|
|
+ <div class="room-list" :class="{'active-list': index === activeNum}"
|
|
|
+ v-for="(item, index) in meetingRoomList" :key="index" @click="chooseRoom(index)">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ -->
|
|
|
+ <el-col :span="19">
|
|
|
+ <div class="calendar-box" style="color:black">
|
|
|
+<!-- 日历菜单栏 -->
|
|
|
+ <full-calendar
|
|
|
+ ref="fullCalendar"
|
|
|
+ style="height: 100%;color:black"
|
|
|
+ :options="calendarOptions"
|
|
|
+ >
|
|
|
+ </full-calendar>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 悬停窗体 -->
|
|
|
+ <div class="over" v-if="xuanting" >
|
|
|
+ <!-- <button class="fr" @click="closexuan">关闭</button> -->
|
|
|
+ <img src="../../../assets/close.png" class="fr" @click="closexuan">
|
|
|
+ <img src="../../../assets/del.png" class="fr" @click="delxuan">
|
|
|
+ <img src="../../../assets/xiugai.png" class="fr" @click="xiuxuan">
|
|
|
+ <div><img src="../../../assets/POINT.png"><span class="aaaa"></span></div>
|
|
|
+ <div><img src="../../../assets/time.png"><span class="bbbb"></span></div>
|
|
|
+ <div><img src="../../../assets/steam.png"><span class="cccc"></span></div>
|
|
|
+ <div><img src="../../../assets/neirong.png"><span class="dddd"></span></div>
|
|
|
+ </div>
|
|
|
+ <!--日程新增弹窗start-->
|
|
|
+ <el-dialog
|
|
|
+ title="会议新增"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :before-close="close"
|
|
|
+ :modal="false"
|
|
|
+ width="45%">
|
|
|
+ <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small" class="demo-ruleForm"
|
|
|
+ :disabled="auth? false: 'disabled'">
|
|
|
+ <el-form-item label="会议名称" prop="title">
|
|
|
+ <el-input v-model="form.title"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参会角色" prop="orgId">
|
|
|
+ <el-select v-model="form.orgId" clearable filterable placeholder="参会角色" multiple>
|
|
|
+ <el-option
|
|
|
+ v-for="item in roleNameList"
|
|
|
+ :key="item.userId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.userId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否是党会" prop="isParty">
|
|
|
+ <el-select v-model="form.isParty" clearable filterable placeholder="是否是党会">
|
|
|
+ <el-option
|
|
|
+ v-for="item in isParrty"
|
|
|
+ :key="item.is_party"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.is_party">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发起科室" prop="leaderName">
|
|
|
+ <el-input v-model="form.leaderName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议开始时间" required>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="begindate" style="margin-bottom: 0">
|
|
|
+ <el-date-picker type="date"
|
|
|
+ disabled
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期"
|
|
|
+ v-model="form.begindate"
|
|
|
+ style="width: 100%;">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="line" :span="2">-</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="startTime" style="margin-bottom: 0">
|
|
|
+ <el-select v-model="form.startTime" placeholder="选择时间" clearable @visible-change="handleBeginTimeOptionShow">
|
|
|
+ <el-option
|
|
|
+ v-for="item in timeOptions"
|
|
|
+ :key="item.time"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :label="item.time"
|
|
|
+ :value="item.time"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-time-select placeholder="选择时间"-->
|
|
|
+ <!-- v-model="form.startTime"-->
|
|
|
+
|
|
|
+ <!-- :picker-options="{-->
|
|
|
+ <!-- start: '09:00',-->
|
|
|
+ <!-- step: '00:30',-->
|
|
|
+ <!-- end: '20:00 ',-->
|
|
|
+ <!-- }"-->
|
|
|
+ <!-- @change="onStartTime"-->
|
|
|
+ <!-- style="width: 100%;">-->
|
|
|
+ <!-- </el-time-select>-->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议结束时间" required>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="enddate" style="margin-bottom: 0">
|
|
|
+ <el-date-picker type="date"
|
|
|
+ disabled
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期"
|
|
|
+ v-model="form.enddate"
|
|
|
+ style="width: 100%;">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="line" :span="2">-</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="endTime" style="margin-bottom: 0">
|
|
|
+<!-- <el-time-select placeholder="选择时间"-->
|
|
|
+
|
|
|
+<!-- v-model="form.endTime"-->
|
|
|
+<!-- :picker-options="{-->
|
|
|
+<!-- start: '00:00',-->
|
|
|
+<!-- step: '00:30',-->
|
|
|
+<!-- end: '23:30 ',-->
|
|
|
+<!-- minTime: form.startTime-->
|
|
|
+<!-- }"-->
|
|
|
+<!-- style="width: 100%;">-->
|
|
|
+<!-- </el-time-select>-->
|
|
|
+ <el-select v-model="form.endTime" placeholder="选择时间" clearable @visible-change="handleEndTimeOptionShow">
|
|
|
+ <el-option
|
|
|
+ v-for="item in timeOptions"
|
|
|
+ :key="item.time"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :label="item.time"
|
|
|
+ :value="item.time"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议备注" prop="remark">
|
|
|
+ <el-input type="textarea" v-model="form.remark"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="resetForm('form')">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('form')">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <!--日程新增弹窗end-->
|
|
|
+ </basic-block>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -150,7 +187,13 @@
|
|
|
data() {
|
|
|
return {
|
|
|
activeNum: 0,
|
|
|
+ // fontc={
|
|
|
+ // idss:[],
|
|
|
+ // fcolor:[]
|
|
|
+ // },
|
|
|
+ // Colorr:"",
|
|
|
dialogVisible: false,
|
|
|
+ xuanting:false,
|
|
|
// meetingRoomList: [],
|
|
|
subList: [],
|
|
|
array: [],
|
|
|
@@ -178,6 +221,8 @@
|
|
|
},
|
|
|
|
|
|
],
|
|
|
+ idx:"",
|
|
|
+ calEventt:{},
|
|
|
form: {
|
|
|
title: '',
|
|
|
userId: '',
|
|
|
@@ -191,95 +236,201 @@
|
|
|
roleColor: '',
|
|
|
id: '',
|
|
|
isParty: '否',
|
|
|
- roleName: '分管公司领导/部门负责人'
|
|
|
+ // roleName: '分管公司领导/部门负责人'
|
|
|
+ // roleName: [],
|
|
|
+ orgId: []
|
|
|
},
|
|
|
rules: {
|
|
|
title: [{required: true, message: '请输入会议主题', trigger: 'blur'}],
|
|
|
- userid:[{required: true, message: '请选择会议室使用人', trigger: 'change'}],
|
|
|
- begindate:[{required: true, message: '请选择开始日期', trigger: 'change'}],
|
|
|
- startTime:[{required: true, message: '请选择开始时间', trigger: 'change'}],
|
|
|
- enddate:[{required: true, message: '请选择结束日期', trigger: 'change'}],
|
|
|
- endTime:[{required: true, message: '请选择结束时间', trigger: 'change'}],
|
|
|
- remark:[{required: true, message: '请填写会议备注', trigger: 'blur'}],
|
|
|
- leaderName:[{required: true, message: '发起科室', trigger: 'blur'}],
|
|
|
- isParty:[{required: true, message: '是否是党会', trigger: 'change'}],
|
|
|
- roleName:[{required: true, message: '参会角色', trigger: 'change'}]
|
|
|
- },
|
|
|
- calendarOptions: {
|
|
|
- // timeGridPlugin 可显示每日时间段
|
|
|
- height: 700,
|
|
|
+ userid: [{required: true, message: '请选择会议室使用人', trigger: 'change'}],
|
|
|
+ begindate: [{required: true, message: '请选择开始日期', trigger: 'change'}],
|
|
|
+ startTime: [{required: true, message: '请选择开始时间', trigger: 'change'}],
|
|
|
+ enddate: [{required: true, message: '请选择结束日期', trigger: 'change'}],
|
|
|
+ endTime: [{required: true, message: '请选择结束时间', trigger: 'change'}],
|
|
|
+ remark: [{required: true, message: '请填写会议备注', trigger: 'blur'}],
|
|
|
+ leaderName: [{required: true, message: '发起科室', trigger: 'blur'}],
|
|
|
+ isParty: [{required: true, message: '是否是党会', trigger: 'change'}],
|
|
|
+ // roleName:[{required: true, message: '参会角色', trigger: 'change'}]
|
|
|
+ orgId: [{required: true, message: '参会角色', trigger: 'change'}]
|
|
|
+ },
|
|
|
+ calendarOptions: {
|
|
|
+ // timeGridPlugin 可显示每日时间段
|
|
|
+ height: 700,
|
|
|
plugins: [dayGridPlugin, interactionPlugin],
|
|
|
headerToolbar: {
|
|
|
- left: "prev,next today",
|
|
|
- center: "title",
|
|
|
- right: "dayGridMonth,dayGridWeek,dayGrid",
|
|
|
- // right: 'agendaWeek,dayGridWeek,dayGrid'
|
|
|
- },
|
|
|
- buttonText: {
|
|
|
- // 设置按钮
|
|
|
- today: "今天",
|
|
|
+ left: "prev,next today",
|
|
|
+ center: "title",
|
|
|
+ right: "dayGridMonth,dayGridWeek,dayGrid",
|
|
|
+ // right: 'agendaWeek,dayGridWeek,dayGrid'
|
|
|
+ },
|
|
|
+ buttonText: {
|
|
|
+ // 设置按钮
|
|
|
+ today: "今天",
|
|
|
month: "月",
|
|
|
week: "周",
|
|
|
dayGrid: "天",
|
|
|
- },
|
|
|
- // allDaySlot: false,
|
|
|
- editable: false,
|
|
|
+ },
|
|
|
+ // allDaySlot: false,
|
|
|
+ editable: false,
|
|
|
selectable: true,
|
|
|
navLinks: true,
|
|
|
// displayEventEnd: true,//所有视图显示结束时间
|
|
|
initialView: "dayGridMonth", // 设置默认显示月，可选周、日
|
|
|
- dateClick: this.handleDateClick,
|
|
|
- eventClick: this.handleEventClick,
|
|
|
+ dateClick: this.handleDateClick,//点击日历
|
|
|
+ eventClick: this.handleEventClick,//日历日程点击
|
|
|
eventsSet: this.handleEvents,
|
|
|
select: this.handleDateSelect,
|
|
|
+ eventMouseEnter: this.eventmouseover,//鼠标滑过
|
|
|
+ eventMouseLeave:this.eventmouseout,//鼠标离开
|
|
|
// timezone
|
|
|
// 设置日程
|
|
|
events: [
|
|
|
- // {
|
|
|
- // id: 1,
|
|
|
- // title: '09:30~11:30 小破孩',
|
|
|
- // start: '2020-12-11',
|
|
|
- // end: '2020-12-13',
|
|
|
- // color: '#f08f00',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // id: 2,
|
|
|
- // title: '9:30~14:30 项目会议',
|
|
|
- // start: '2020-12-14',
|
|
|
- // end: '2020-12-14',
|
|
|
- // color: '#6bb377',
|
|
|
- // },
|
|
|
- ],
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // title: '09:30~11:30 小破孩',
|
|
|
+ // start: '2020-12-11',
|
|
|
+ // end: '2020-12-13',
|
|
|
+ // color: '#f08f00',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 2,
|
|
|
+ // title: '9:30~14:30 项目会议',
|
|
|
+ // start: '2020-12-14',
|
|
|
+ // end: '2020-12-14',
|
|
|
+ // color: '#6bb377',
|
|
|
+ // },
|
|
|
+ ],
|
|
|
eventColor: "", // 修改日程背景色
|
|
|
locale: "zh-cn", // 设置语言
|
|
|
weekNumberCalculation: "ISO", // 周数
|
|
|
customButtons: {
|
|
|
- prev: { // this overrides the prev button
|
|
|
- text: "PREV",
|
|
|
+ prev: { // this overrides the prev button
|
|
|
+ text: "PREV",
|
|
|
click: () => {
|
|
|
- this.prev();
|
|
|
- }
|
|
|
- },
|
|
|
- next: { // this overrides the next button
|
|
|
- text: "PREV",
|
|
|
+ this.prev();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ next: { // this overrides the next button
|
|
|
+ text: "PREV",
|
|
|
click: () => {
|
|
|
- this.next();
|
|
|
- }
|
|
|
- },
|
|
|
- today: {
|
|
|
- text: "今天",
|
|
|
+ this.next();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ today: {
|
|
|
+ text: "今天",
|
|
|
click: () => {
|
|
|
- this.today();
|
|
|
+ this.today();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 时间选项
|
|
|
+ timeOptions: [
|
|
|
+ {time:'00:00'},
|
|
|
+ {time:'00:30'},
|
|
|
+ {time:'01:00'},
|
|
|
+ {time:'01:30'},
|
|
|
+ {time:'02:00'},
|
|
|
+ {time:'02:30'},
|
|
|
+ {time:'03:00'},
|
|
|
+ {time:'03:30'},
|
|
|
+ {time:'04:00'},
|
|
|
+ {time:'04:30'},
|
|
|
+ {time:'05:00'},
|
|
|
+ {time:'05:30'},
|
|
|
+ {time:'06:00'},
|
|
|
+ {time:'06:30'},
|
|
|
+ {time:'07:00'},
|
|
|
+ {time:'07:30'},
|
|
|
+ {time:'08:00'},
|
|
|
+ {time:'08:30'},
|
|
|
+ {time:'09:00'},
|
|
|
+ {time:'09:30'},
|
|
|
+ {time:'10:00'},
|
|
|
+ {time:'10:30'},
|
|
|
+ {time:'11:00'},
|
|
|
+ {time:'11:30'},
|
|
|
+ {time:'12:00'},
|
|
|
+ {time:'12:30'},
|
|
|
+ {time:'13:00'},
|
|
|
+ {time:'13:30'},
|
|
|
+ {time:'14:00'},
|
|
|
+ {time:'14:30'},
|
|
|
+ {time:'15:00'},
|
|
|
+ {time:'15:30'},
|
|
|
+ {time:'16:00'},
|
|
|
+ {time:'16:30'},
|
|
|
+ {time:'17:00'},
|
|
|
+ {time:'17:30'},
|
|
|
+ {time:'18:00'},
|
|
|
+ {time:'18:30'},
|
|
|
+ {time:'19:00'},
|
|
|
+ {time:'19:30'},
|
|
|
+ {time:'20:00'},
|
|
|
+ {time:'20:30'},
|
|
|
+ {time:'21:00'},
|
|
|
+ {time:'21:30'},
|
|
|
+ {time:'22:00'},
|
|
|
+ {time:'22:30'},
|
|
|
+ {time:'23:00'},
|
|
|
+ {time:'23:30'},
|
|
|
+ ],
|
|
|
+ // 备份
|
|
|
+ backupTimeOptions: [
|
|
|
+ {time:'00:00'},
|
|
|
+ {time:'00:30'},
|
|
|
+ {time:'01:00'},
|
|
|
+ {time:'01:30'},
|
|
|
+ {time:'02:00'},
|
|
|
+ {time:'02:30'},
|
|
|
+ {time:'03:00'},
|
|
|
+ {time:'03:30'},
|
|
|
+ {time:'04:00'},
|
|
|
+ {time:'04:30'},
|
|
|
+ {time:'05:00'},
|
|
|
+ {time:'05:30'},
|
|
|
+ {time:'06:00'},
|
|
|
+ {time:'06:30'},
|
|
|
+ {time:'07:00'},
|
|
|
+ {time:'07:30'},
|
|
|
+ {time:'08:00'},
|
|
|
+ {time:'08:30'},
|
|
|
+ {time:'09:00'},
|
|
|
+ {time:'09:30'},
|
|
|
+ {time:'10:00'},
|
|
|
+ {time:'10:30'},
|
|
|
+ {time:'11:00'},
|
|
|
+ {time:'11:30'},
|
|
|
+ {time:'12:00'},
|
|
|
+ {time:'12:30'},
|
|
|
+ {time:'13:00'},
|
|
|
+ {time:'13:30'},
|
|
|
+ {time:'14:00'},
|
|
|
+ {time:'14:30'},
|
|
|
+ {time:'15:00'},
|
|
|
+ {time:'15:30'},
|
|
|
+ {time:'16:00'},
|
|
|
+ {time:'16:30'},
|
|
|
+ {time:'17:00'},
|
|
|
+ {time:'17:30'},
|
|
|
+ {time:'18:00'},
|
|
|
+ {time:'18:30'},
|
|
|
+ {time:'19:00'},
|
|
|
+ {time:'19:30'},
|
|
|
+ {time:'20:00'},
|
|
|
+ {time:'20:30'},
|
|
|
+ {time:'21:00'},
|
|
|
+ {time:'21:30'},
|
|
|
+ {time:'22:00'},
|
|
|
+ {time:'22:30'},
|
|
|
+ {time:'23:00'},
|
|
|
+ {time:'23:30'},
|
|
|
+ ],
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
// 获取用户信息
|
|
|
this.calendarApi = this.$refs.fullCalendar.getApi();
|
|
|
-
|
|
|
// this.meetingRoomList = this.array.meetingRoomList;
|
|
|
// console.log('this.array', this.array)
|
|
|
// this.getReservationList(this.array.scheduleList0);
|
|
|
@@ -315,10 +466,10 @@
|
|
|
},
|
|
|
data: {isFile: "0"},
|
|
|
}).then((res) => {
|
|
|
- console.log('res====', typeof res.data)
|
|
|
- console.log(res.data)
|
|
|
+ // console.log('res====', typeof res.data)
|
|
|
+ // console.log(res.data)
|
|
|
this.auth = res.data;
|
|
|
- console.log("res.data",res.data)
|
|
|
+ // console.log("res.data", res.data)
|
|
|
|
|
|
});
|
|
|
},
|
|
|
@@ -326,17 +477,20 @@
|
|
|
let newArr = [];
|
|
|
this.subList = arrayData;
|
|
|
arrayData.forEach((item) => {
|
|
|
- console.log('item', item)
|
|
|
+ // console.log('item', item)
|
|
|
newArr.push({
|
|
|
+ newBeginTime: item.begindate.split(' ')[1].substr(0,5),
|
|
|
+ newEndTime: item.enddate.split(' ')[1].substr(0,5),
|
|
|
start: this.dealWithTime(item.begindate),
|
|
|
end: this.addDate(this.dealWithTime(item.enddate), 1),
|
|
|
color: item.roleColor,
|
|
|
id: item.id,
|
|
|
- title: `${this.getTitle(item.begindate, item.enddate)} ${item.title} ${item.leaderName}`,
|
|
|
+ title: `${this.getTitle(item.begindate, item.enddate, item.isParty)} ${'会议名称:' + item.title} ${'召集人:' + item.leaderName}`,
|
|
|
})
|
|
|
});
|
|
|
this.calendarOptions.events = newArr;
|
|
|
- console.log(newArr)
|
|
|
+
|
|
|
+ // debugger
|
|
|
},
|
|
|
// 切换教室
|
|
|
chooseRoom(index) {
|
|
|
@@ -357,8 +511,14 @@
|
|
|
return `${d.getFullYear()}-${mon}-${endD}`;
|
|
|
},
|
|
|
// 获取会议事件title
|
|
|
- getTitle(date1, date2) {
|
|
|
- let start = date1.substring(11, 16);
|
|
|
+ // getTitle(date1, date2) {
|
|
|
+ // let start = date1.substring(11, 16);
|
|
|
+ // let end = date2.substring(11, 16);
|
|
|
+ // return `${start}~${end}`;
|
|
|
+ // },
|
|
|
+ // 获取会议事件title
|
|
|
+ getTitle(date1, date2, isParty) {
|
|
|
+ let start = isParty == '1' ? '★' + date1.substring(11, 16) : date1.substring(11, 16);
|
|
|
let end = date2.substring(11, 16);
|
|
|
return `${start}~${end}`;
|
|
|
},
|
|
|
@@ -379,6 +539,54 @@
|
|
|
let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];
|
|
|
return newDate;
|
|
|
},
|
|
|
+ //鼠标滑过事件
|
|
|
+ eventmouseover(calEvent){
|
|
|
+ this.idx=calEvent.event.id
|
|
|
+ this.calEventt=calEvent
|
|
|
+ console.log(this.array, '鼠标经过arr');
|
|
|
+ console.log(calEvent, '鼠标经过cal');
|
|
|
+ this.xuanting=true
|
|
|
+ var a=document.querySelector(".aaaa")
|
|
|
+ var b=document.querySelector(".bbbb")
|
|
|
+ var c=document.querySelector(".cccc")
|
|
|
+ var d=document.querySelector(".dddd")
|
|
|
+ var j=0
|
|
|
+ for(var i=0;i<this.array.length;i++){
|
|
|
+ if(this.array[i].id==calEvent.event.id){
|
|
|
+ j=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a.innerHTML="<span>"+this.array[j].title+"</span>"
|
|
|
+ b.innerHTML="<span>"+calEvent.event.startStr.substring(5,7)+"月"+
|
|
|
+ calEvent.event.startStr.substring(8)+"日"+
|
|
|
+ calEvent.event._def.extendedProps.newBeginTime+"-"+
|
|
|
+ calEvent.event._def.extendedProps.newEndTime+"</span>"
|
|
|
+ c.innerHTML="<span>"+this.array[j].leaderName+"</span>"
|
|
|
+ d.innerHTML="<span>"+this.array[j].remark+"</span>"
|
|
|
+ },
|
|
|
+ //关闭悬停窗口
|
|
|
+ closexuan(){
|
|
|
+ this.xuanting=false
|
|
|
+ },
|
|
|
+ //悬停窗体修改按钮
|
|
|
+ xiuxuan(events){
|
|
|
+ console.log(events)
|
|
|
+ console.log(this.array)
|
|
|
+ var j=0
|
|
|
+ for(var i=0;i<this.array.length;i++){
|
|
|
+ if(this.array[i].id==this.idx){
|
|
|
+ j=i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.calEventt.event=this.array[j]
|
|
|
+ var aa=this.calEventt
|
|
|
+ console.log(aa)
|
|
|
+ this.handleEventClick(aa)
|
|
|
+ },
|
|
|
+ //悬停窗体删除按钮
|
|
|
+ delxuan(){
|
|
|
+ this.savedel()
|
|
|
+ },
|
|
|
// 点击日历
|
|
|
handleDateClick: function (arg) {
|
|
|
if (!this.auth) {
|
|
|
@@ -386,6 +594,10 @@
|
|
|
}
|
|
|
this.$forceUpdate();
|
|
|
console.log(arg, '事件1')
|
|
|
+ //开始时间
|
|
|
+ this.form.begindate = arg.dateStr
|
|
|
+ //结束时间
|
|
|
+ this.form.enddate = arg.dateStr
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
// 日历日程点击事件
|
|
|
@@ -421,14 +633,34 @@
|
|
|
today() {
|
|
|
this.calendarApi.today();
|
|
|
},
|
|
|
+ //提交删除后的数据
|
|
|
+ savedel(calEvent){
|
|
|
+ this.$http({
|
|
|
+ url: "/market/calendar/del",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ id:this.idx
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(res)
|
|
|
+ location.reload();
|
|
|
+ });
|
|
|
+ },
|
|
|
// 提交数据
|
|
|
submitForm(formName) {
|
|
|
+ console.log(this.form)
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.form.begindate = `${this.form.begindate} ${this.form.startTime}`;
|
|
|
this.form.enddate = `${this.form.enddate} ${this.form.endTime}`;
|
|
|
console.log(this.form, '数据');
|
|
|
this.dialogVisible = false;
|
|
|
+ if (this.form.id === '') {
|
|
|
+ this.form === ""
|
|
|
+ }
|
|
|
this.$http({
|
|
|
url: this.form.id === '' ? '/market/calendar/add' : '/market/calendar/update',
|
|
|
method: "post",
|
|
|
@@ -469,10 +701,130 @@
|
|
|
onStartTime(val) {
|
|
|
console.log('val', val)
|
|
|
this.form.startTime = val
|
|
|
+ },
|
|
|
+ //开始时间 option显示/隐藏
|
|
|
+ handleBeginTimeOptionShow(_value) {
|
|
|
+ if (_value) {
|
|
|
+
|
|
|
+ let disabledOnOff = false
|
|
|
+
|
|
|
+ // 第一次过滤，过滤掉结束时间
|
|
|
+ this.timeOptions = this.backupTimeOptions.map(_item => {
|
|
|
+ const result = { time: _item.time, disabled: _item.disabled }
|
|
|
+ if (_item.time === this.form.endTime) {
|
|
|
+ disabledOnOff = true
|
|
|
+ }
|
|
|
+ if (disabledOnOff) {
|
|
|
+ result.disabled = true
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ })
|
|
|
+ // 第二次过滤，过滤掉后端返回的数据
|
|
|
+ disabledOnOff = false
|
|
|
+
|
|
|
+
|
|
|
+ this.calendarOptions.events.map(_item => {
|
|
|
+
|
|
|
+ this.timeOptions = this.timeOptions.map(_timeOptionItem => {
|
|
|
+ // debugger
|
|
|
+ // 开始
|
|
|
+ if (_item.newBeginTime === _timeOptionItem.time) {
|
|
|
+ disabledOnOff = true
|
|
|
+ }
|
|
|
+ // 结束
|
|
|
+ if (_item.newEndTime === _timeOptionItem.time) {
|
|
|
+ disabledOnOff = false
|
|
|
+ }
|
|
|
+ if (disabledOnOff) {
|
|
|
+ _timeOptionItem.disabled = true
|
|
|
+ }
|
|
|
+ return _timeOptionItem
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.timeOptions = this.backupTimeOptions
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //结束时间 option显示/隐藏
|
|
|
+ handleEndTimeOptionShow(_value) {
|
|
|
+ // 下拉显示
|
|
|
+ if (_value) {
|
|
|
+ let disabledOnOff = true
|
|
|
+ if (this.form.startTime !== '') {
|
|
|
+ // 第一次过滤，过滤掉开始时间
|
|
|
+ this.timeOptions = this.backupTimeOptions.map(_item => {
|
|
|
+ const result = { time: _item.time, disabled: _item.disabled }
|
|
|
+ if (disabledOnOff) {
|
|
|
+ result.disabled = true
|
|
|
+ }
|
|
|
+ if (_item.time === this.form.startTime) {
|
|
|
+ disabledOnOff = false
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 第二次过滤，过滤掉后端返回的数据
|
|
|
+ disabledOnOff = false
|
|
|
+ this.calendarOptions.events.map(_item => {
|
|
|
+ this.timeOptions = this.timeOptions.map(_timeOptionItem => {
|
|
|
+ // debugger
|
|
|
+ if (disabledOnOff) {
|
|
|
+ _timeOptionItem.disabled = true
|
|
|
+ }
|
|
|
+ // 开始
|
|
|
+ if (_item.newBeginTime === _timeOptionItem.time) {
|
|
|
+ disabledOnOff = true
|
|
|
+ }
|
|
|
+
|
|
|
+ // 结束
|
|
|
+ if (_item.newEndTime === _timeOptionItem.time) {
|
|
|
+ disabledOnOff = false
|
|
|
+ }
|
|
|
+
|
|
|
+ return _timeOptionItem
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.timeOptions = this.backupTimeOptions
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "src/assets/calendar";
|
|
|
+
|
|
|
+ .el-row--flex.is-justify-space-between {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .over{position: absolute; width: 200px;height: 200px;background: #eee; border: 1px solid black; z-index: 100;top: 300px;left:100px;opacity: 0.8; padding: 10px; border-radius: 5px;}
|
|
|
+ .over img{width: 20px;height: 20px;}
|
|
|
+ .over div{margin: 20px 0px;height: 17px;}
|
|
|
+ .over div img{height: 17px;}
|
|
|
+ .over div span{margin-left: 5px; line-height: 17px;height: 17px;}
|
|
|
+ .fr{float: right;}
|
|
|
+ ::v-deep .fc-daygrid-event{
|
|
|
+ background-color:#ffffff !important;
|
|
|
+ border: 1px solid black !important;
|
|
|
+ }
|
|
|
+ // ::v-deep .fc-event-title{
|
|
|
+ // // color: v-band(Color) !important;
|
|
|
+ // color: black !important;
|
|
|
+ // }
|
|
|
+ // ::v-deep .fc-daygrid-event-harness:nth-child(odd){
|
|
|
+ // color: black !important;
|
|
|
+ // }
|
|
|
+ // ::v-deep .fc-daygrid-event-harness:nth-child(even){
|
|
|
+ // color: blue !important;
|
|
|
+ // }
|
|
|
+ // ::v-deep .fc-event-title-container:nth-child(odd){
|
|
|
+ // color: black !important;
|
|
|
+ // }
|
|
|
+ // ::v-deep .fc-event-title-container:nth-child(even){
|
|
|
+ // color: blue !important;
|
|
|
+ // }
|
|
|
+ ::v-deep .fc-sticky{
|
|
|
+ // color: v-band(Color) !important;
|
|
|
+ color: black !important;
|
|
|
+ }
|
|
|
</style>
|
胡俊炜
