日程父子组件深度通信

src/views/workbench/person/components/calenderList.vue

@@ -1,5 +1,5 @@
 <template>
-  <article>
+  <article ref="calender-list">
     <div class="table-top">
       <el-radio-group v-model="busy" size="small" @change="queryWorkList">
         <el-radio-button :label="Number(1)">忙碌</el-radio-button>
@@ -56,12 +56,12 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            @click="handleEdit(scope.row)"
+            @click="control.update=scope.row"
           >编辑</el-button>
           <el-button
             size="mini"
             type="danger"
-            @click="handleDelete(scope.row)"
+            @click="control.delete=scope.row"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -95,6 +95,11 @@ export default {
       return newArr.join(',')
     }
   },
+  inject: {
+    control: {
+      default: () => ({})
+    }
+  },
   data() {
     return {
       total: 0,
@@ -131,6 +136,14 @@ export default {
       tableData: []
     }
   },
+  watch: {
+    control: {
+      handler(newV, oldV) {
+        this.queryWorkList()
+      },
+      deep: true
+    }
+  },
   created() {
     this.queryWorkList()
   },
@@ -143,7 +156,7 @@ export default {
       this.curIndex = e
       this.queryWorkList()
     },
-    async queryWorkList() {
+    async queryWorkList() { // 获取列表
       if (this.busy === 1) {
         this.form_busy_1.pageInfoDO = this.pages
         const res = await queryWorkList(this.form_busy_1)
@@ -159,12 +172,6 @@ export default {
           this.total = res.data.total
         }
       }
-    },
-    handleEdit(data) {
-      this.$emit('edit', data)
-    },
-    handleDelete(data) {
-      this.$emit('delete', data)
     }
   }
 }

src/views/workbench/person/index.vue

@@ -97,6 +97,7 @@
       <el-container>
         <section class="main-section">
           <MyFullCalendar
+            ref="my-FullCalendar"
             :events="calendarEvents"
             @dateClick="dateClick"
             @change="queryWorkListByTime"
@@ -144,7 +145,7 @@
         :title="'编辑日程'"
         :visible.sync="updateSchedule.visible"
         :data="updateSchedule.data"
-        @confirm="queryWorkListByTime(calendarView)"
+        @confirm="queryWorkListByTime(calendarView);changeSuccess('update')"
       />
       <calendar-dialog
         :title="'新建日程'"
@@ -159,7 +160,7 @@
         :visible.sync="visibleSchedule"
         :detail-data="updateSchedule.data"
         :title="'修改排期'"
-        @update="queryWorkListByTime(calendarView)"
+        @update="queryWorkListByTime(calendarView);changeSuccess('update')"
       />
     <!-- 排期操作弹框 -->
     </el-container>
@@ -191,6 +192,11 @@ export default {
       return Array.isArray(val) ? val.join(',') : val
     }
   },
+  provide() {
+    return {
+      control: this.control
+    }
+  },
   data() {
     return {
       activeName: '1',
@@ -219,7 +225,23 @@ export default {
       realname: localStorage.getItem('realname'),
       nowDetailData: null, // 当前日程详情
       showDetail: false,
-      visibleSchedule: false // 排期任务弹框
+      visibleSchedule: false, // 排期任务弹框
+      control: {
+        update: null,
+        delete: null
+      }
+    }
+  },
+  watch: {
+    control: {
+      handler(newV, oldV) {
+        if (newV.update) {
+          this.handleEdit(newV.update)
+        } else if (newV.delete) {
+          this.handleDelete(newV.delete)
+        }
+      },
+      deep: true
     }
   },
   created() {
@@ -227,7 +249,7 @@ export default {
   },
   mounted() {
     this.$store.state.data.status = false
-    document.body.addEventListener('click', e => {
+    document.body.addEventListener('click', e => { // 日历弹出层操作
       const event = document.querySelector('.show-schedule-detail')
       const isIn = e.target.className === 'fc-content' || e.target.className === 'fc-time' || e.target.className === 'fc-title'
       if (!event || isIn) {
@@ -307,6 +329,7 @@ export default {
         this.showDetail = false
         this.queryWorkListByTime(this.calendarView)
         this.$message({ type: 'success', message: '删除成功!' })
+        this.changeSuccess('delete')
       }
     },
     async deleteSchedule_0() { // 删除排期
@@ -315,6 +338,7 @@ export default {
         this.showDetail = false
         this.queryWorkListByTime(this.calendarView)
         this.$message({ message: '删除成功', type: 'success', duration: 1000, offset: 150 })
+        this.changeSuccess('delete')
       }
     },
     async queryWorkListByTime(view) { // 获取指定时间段用户日程信息
@@ -388,7 +412,14 @@ export default {
     },
     handleDelete(data) { // 日程列表中的删除
       this.nowDetailData = data
-      this.deleteSchedule
+      this.deleteSchedule()
+    },
+    changeSuccess(control) {
+      if (control === 'update') {
+        this.control.update = null
+      } else if (control === 'delete') {
+        this.control.delete = null
+      }
     }
   }
 }

src/views/workbench/person/myFullCalendar.vue

@@ -23,7 +23,7 @@
         <div class="calender-top-title">{{ calendarTitle }}</div>
         <div><el-button type="primary" size="small" @click="add()">添加日程</el-button></div>
       </article>
-      <calender-list v-show="activeName === '2'" @edit="handleEdit" @delete="handleDelete" />
+      <calender-list v-show="activeName === '2'" />
     </div>
     <FullCalendar
       v-show="activeName === '1'"
@@ -208,12 +208,6 @@ export default {
     },
     add() {
       this.$emit('add')
-    },
-    handleEdit(data) {
-      this.$emit('edit', data)
-    },
-    handleDelete(data) {
-      this.$emit('delete', data)
     }
   }
 }