Explorar o código

修改日历组件

lrf402788946 %!s(int64=5) %!d(string=hai) anos
pai
achega
73722db4e0
Modificáronse 3 ficheiros con 10 adicións e 82 borrados
  1. 2 0
      components/calendar.md
  2. 5 79
      components/calendar.vue
  3. 3 3
      config/menu-config.js

+ 2 - 0
components/calendar.md

@@ -4,6 +4,8 @@
 |:-:|:-:|:-:|:-:|:-:|
 |year|String|new Date().getFullYear()|否|日历的当前年|
 |events|Array|-|是|日历上的事件|
+|useDraft|Boolean|true|否|是否启用拖拽事件|
+|useEvent|Boolean|true|否|是否启用点击事件的事件|
 
 ##### events:
 |事件名|说明|参数|参数说明|

+ 5 - 79
components/calendar.vue

@@ -21,35 +21,12 @@
       :slot-event-overlap="false"
       defaultView="dayGridMonth"
       :plugins="calendarPlugins"
-      :selectable="true"
+      :selectable="useDraft"
       :events="events"
       @select="drawSelect"
       :eventOrder="`start`"
       @eventClick="clickEvent"
     />
-    <el-dialog :visible.sync="dialog" :title="addTitle" center @close="toClose">
-      <el-form :model="form" label-width="80px" size="mini">
-        <el-form-item label="时间"> {{ form.start }} 至 {{ form.end }} </el-form-item>
-        <el-form-item label="期数">
-          <el-input v-model="form.qishu"></el-input>
-        </el-form-item>
-        <el-form-item label="批次">
-          <el-input v-model="form.pici"></el-input>
-        </el-form-item>
-        <el-form-item label="是否全天">
-          <el-checkbox v-model="form.isAllDay"></el-checkbox>
-        </el-form-item>
-        <el-form-item label="上/下午" v-if="!form.isAllDay">
-          <el-radio-group v-model="form.isMorning">
-            <el-radio label="0">上午</el-radio>
-            <el-radio label="1">下午</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="toSave">保存</el-button>
-        </el-form-item>
-      </el-form>
-    </el-dialog>
   </div>
 </template>
 
@@ -62,6 +39,8 @@ export default {
   props: {
     year: { type: String, default: `${new Date().getFullYear()}` }, //当前日历的年份
     events: { type: Array, default: () => [] },
+    useDraft: { type: Boolean, default: true },
+    useEvent: { type: Boolean, default: true },
   },
   components: {
     FullCalendar, // make the <FullCalendar> tag available
@@ -83,66 +62,13 @@ export default {
   },
   methods: {
     handleDateClick(arg) {
-      console.log(arg);
-      this.dialog = true;
-      // let calendarApi = this.$refs.fullCalendar.getApi();
+      this.$emit('click', arg);
     },
     drawSelect(arg) {
-      // this.dialog = true;
-      // let { startStr, endStr } = arg;
-      // this.form.start = startStr;
-      // this.form.end = endStr;
-      // this.addTitle = '新增计划安排';
       this.$emit('draft', arg);
     },
-    toSave() {
-      //处理数据
-      let data = {
-        title: `第${JSON.parse(JSON.stringify(this.form.qishu))}期第${JSON.parse(JSON.stringify(this.form.pici))}批次`,
-        start: JSON.parse(JSON.stringify(this.form.start)),
-        end: JSON.parse(JSON.stringify(this.form.end)),
-        qishu: parseInt(JSON.parse(JSON.stringify(this.form.qishu))),
-        pici: parseInt(JSON.parse(JSON.stringify(this.form.pici))),
-        isAllDay: JSON.parse(JSON.stringify(this.form.isAllDay)),
-      };
-      if (this.form.isMorning) {
-        data.isMorning = JSON.parse(JSON.stringify(this.form.isMorning));
-        JSON.parse(JSON.stringify(this.form.isMorning)) === '0' ? (data.title = `上午 ${data.title}`) : (data.title = `下午 ${data.title}`);
-      }
-      //添加/修改
-      if (!this.form.id) {
-        data.id = new Date().getTime();
-        this.calendarEvents.push(data);
-      } else {
-        data.id = JSON.parse(JSON.stringify(this.form.id));
-        this.$set(
-          this.calendarEvents,
-          _.findIndex(this.calendarEvents, item => item.id == data.id),
-          data
-        );
-      }
-      //先排批次,再排期数=>期数优先级最高,其次是批次
-      //优先级高的后排,低的先排
-      let mid = _.sortBy(this.calendarEvents, item => item.pici);
-      mid = _.sortBy(this.calendarEvents, item => item.qishu);
-      this.$set(this, `calendarEvents`, mid);
-      this.toClose();
-    },
-    toClose() {
-      this.form = { isAllDay: true };
-      this.dialog = false;
-    },
     clickEvent(arg) {
-      // let event = arg.event;
-      // let arr = this.calendarEvents.filter(fil => fil.id == event.id);
-      // if (arr.length > 0) this.form = arr[0];
-      // else {
-      //   console.warn(`无对应id事件`);
-      //   return;
-      // }
-      // this.dialog = true;
-      // this.addTitle = `修改计划安排`;
-      this.$emit('eventClick', arg);
+      if (this.useEvent) this.$emit('eventClick', arg);
     },
   },
   computed: {

+ 3 - 3
config/menu-config.js

@@ -98,17 +98,17 @@ export const devMenu = [
     ],
   },
   {
-    path: '/plan/list',
+    path: '/plan/index',
     name: '计划管理', //上报名单
     module: 'school',
   },
   {
-    path: '/teacher/list',
+    path: '/teacher/index',
     name: '教师确认',
     module: 'school',
   },
   {
-    path: '/leave/list',
+    path: '/leave/index',
     name: '请假管理',
     module: 'school',
   },