大日历前端

src/components/p-header.vue

@@ -15,6 +15,7 @@
     </div> -->
     <div class="bars">
       <div class="bars-item user-info">Hello，{{ username }}</div>
+      <div class="bars-item"><el-button @click="handleGoToCalendar">日曆</el-button></div>
 
       <div class="bars-item" @click="handleHelp">
         <i class="el-icon-time"></i>
@@ -72,6 +73,9 @@ export default {
     //this.menuClose();
   },
   methods: {
+      handleGoToCalendar(){
+        this.$router.push('calendar');
+      },
     handleCall() {
       this.$switchTab(this, { rountPath: "/knowledgetop", name: "知识库" },'knowledgetop');
     },

src/pages/main/fullcalendar/calendar.vue

@@ -1,136 +1,137 @@
 <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">
+                        <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="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 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>
+    </div>
 </template>
 
 <script>
@@ -191,7 +192,9 @@
                     roleColor: '',
                     id: '',
                     isParty: '否',
-                    roleName: '分管公司领导/部门负责人'
+                    // roleName: '分管公司领导/部门负责人'
+                    // roleName: [],
+                    orgId: []
                 },
                 rules: {
                     title: [{required: true, message: '请输入会议主题', trigger: 'blur'}],
@@ -203,7 +206,8 @@
                     remark:[{required: true, message: '请填写会议备注', trigger: 'blur'}],
                     leaderName:[{required: true, message: '发起科室', trigger: 'blur'}],
                     isParty:[{required: true, message: '是否是党会', trigger: 'change'}],
-                    roleName:[{required: true, message: '参会角色', trigger: 'change'}]
+                    // roleName:[{required: true, message: '参会角色', trigger: 'change'}]
+                    orgId:[{required: true, message: '参会角色', trigger: 'change'}]
         },
             calendarOptions: {
                 //   timeGridPlugin  可显示每日时间段
@@ -332,7 +336,7 @@
                         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;
@@ -357,8 +361,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}`;
             },
@@ -423,6 +433,8 @@
             },
             // 提交数据
             submitForm(formName) {
+                console.log(this.form)
+                debugger
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         this.form.begindate = `${this.form.begindate} ${this.form.startTime}`;
@@ -475,4 +487,7 @@
 </script>
 <style lang="scss" scoped>
     @import "src/assets/calendar";
+    .el-row--flex.is-justify-space-between{
+        justify-content: center;
+    }
 </style>

vue.config.js

@@ -135,8 +135,8 @@ module.exports = {
                 // target: 'http://192.168.0.156:9600/',
                 // 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",
+                target: "http://192.168.0.90:9600",
+                // target: "http://192.168.3.165:9600",
                 changeOrigin: true,
             },
         },