1，解决大日历前端时间置灰问题,2，只能选择当天选择问题

src/pages/main/fullcalendar/calendar.vue

@@ -38,7 +38,8 @@
                 :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 :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>
@@ -69,27 +70,38 @@
                         <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%;" >
+                                                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-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>
@@ -97,6 +109,7 @@
                         <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="选择日期"
@@ -108,16 +121,26 @@
                         <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-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>
@@ -199,36 +222,36 @@
                 },
                 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'}],
+                    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,
+                    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,//所有视图显示结束时间
@@ -240,46 +263,148 @@
                     // 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() {
             // 获取用户信息
@@ -323,7 +448,7 @@
                     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)
 
                 });
             },
@@ -333,15 +458,18 @@
                 arrayData.forEach((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.isParty)}   ${'会议名称:' +item.title}    ${'召集人:' +item.leaderName}`,
+                        title: `${this.getTitle(item.begindate, item.enddate, item.isParty)}   ${'会议名称:' + item.title}    ${'召集人:' + item.leaderName}`,
                     })
                 });
                 this.calendarOptions.events = newArr;
-                console.log(newArr)
+                // console.log(newArr)
+                // debugger
             },
             // 切换教室
             chooseRoom(index) {
@@ -369,7 +497,7 @@
             // },
             // 获取会议事件title
             getTitle(date1, date2, isParty) {
-                let start = isParty =='1' ? '★'+date1.substring(11, 16) : date1.substring(11, 16) ;
+                let start = isParty == '1' ? '★' + date1.substring(11, 16) : date1.substring(11, 16);
                 let end = date2.substring(11, 16);
                 return `${start}~${end}`;
             },
@@ -397,6 +525,10 @@
                 }
                 this.$forceUpdate();
                 console.log(arg, '事件1')
+                //开始时间
+                this.form.begindate = arg.dateStr
+                //结束时间
+                this.form.enddate = arg.dateStr
                 this.dialogVisible = true;
             },
             // 日历日程点击事件
@@ -441,6 +573,9 @@
                         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",
@@ -481,13 +616,100 @@
             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{
+
+    .el-row--flex.is-justify-space-between {
         justify-content: center;
     }
 </style>

vue.config.js

@@ -93,7 +93,7 @@ module.exports = {
         proxy: {
             // 开发环境变化可注释 ⬇️⬇️
             "/market/CMK": {
-                target: "http://192.168.1.9:9114",
+                target: "http://192.168.0.90:9113",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -101,7 +101,7 @@ module.exports = {
                 },
             },
             "/market/mk": {
-                target: "http://192.168.1.9:9114",
+                target: "http://192.168.3.12:9114",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -109,7 +109,7 @@ module.exports = {
                 },
             },
             "/market/techcentergj": {
-                target: "http://192.168.1.9:9114",
+                target: "http://192.168.3.12:9114",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -117,7 +117,7 @@ module.exports = {
                 },
             },
             "/mkWangge": {
-                target: "http://192.168.1.9:9114",
+                target: "http://192.168.3.12:9114",
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {
@@ -136,7 +136,6 @@ module.exports = {
                 // target: 'http://192.168.2.170:9600/',
                 // target: 'http://192.168.2.169:9600/',
                 target: "http://192.168.0.90:9600",
-                // target: "http://192.168.3.165:9600",
                 changeOrigin: true,
             },
         },