留言模块

src/components/common/leaveMessage.vue

+<template>
+  <transition name="move">
+    <section class="lm-content" v-show="is">
+      <div class="content">
+        <el-row>
+          <el-col :span="24">
+            <i class="fa fa-angle-double-right" @click.prevent="isShow"></i>
+          </el-col>
+          <el-col :span="24" class="lm-content-leaveMessage">
+            <span>留言</span>
+          </el-col>
+        </el-row>
+        <div class="page-body-content leaveMessage">
+        </div>
+      </div>
+    </section>
+  </transition>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        is: false
+      }
+    },
+    methods: {
+      isShow () {
+        this.is = !this.is
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .lm-content {
+    position: fixed;
+    top: 100px;
+    right: 0;
+    height: 100%;
+    width: 60%;
+    background-color:#333744;
+    color: white;
+    & i {
+      cursor:pointer;
+      font-size: 20px;
+      margin-top: 6px;
+      margin-left: 10px;
+    }
+  }
+  .lm-content-leaveMessage {
+
+  }
+
+  .move-enter-active, .move-leave-active {
+    transition: all 0.5s ease;
+    transform: trandslate3d(0, 0, 0);
+  }
+
+  .move-enter, .move-leave {
+    transform: translate3d(100%, 0, 0);
+  }
+</style>

src/components/common/scheduleItem.vue

@@ -129,7 +129,7 @@ export default {
     flex-wrap: wrap;
   }
   @include c('schedule-left') {
-    background-color: #FF6A6A;
+    background-color: #EB7567;
     min-height: 100%;
     padding: 10px 15px 6px;
     > .el-row {

src/components/schedule_list/scheduleHome.vue

@@ -14,23 +14,24 @@
         :filter="filter"
         @update:clientList="form =>{ updateForm(form) }">
       </search-form>
-      <div class="page-body-content">
+      <div class="page-body-content leaveMessage">
         <ScheduleItem
           v-for="item in result.list"
           :item="item"
           :key="item.id">
           <span slot="opearate" class="obear-opearate-button">
-            <el-button type="primary" size="mini"><i class="fa fa-commenting"></i>留言</el-button>
+            <el-button type="primary" size="mini" @click="leaveMessageSch"><i class="fa fa-commenting"></i>留言</el-button>
             <el-button type="primary" size="mini"><i class="fa fa-calendar-check-o"></i>汇报</el-button>
             <el-button type="primary" size="mini" @click="editSch(item)"><i class="fa fa-edit animated"></i>编辑</el-button>
             <el-button type="primary" size="mini" @click="deleteSch(item.id)"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
           </span>
         </ScheduleItem>
-      </div>
         <Pagenation
           :pager.sync="result.pagenation"
           :total="result.pagenation.totalcount">
         </Pagenation>
+        <leave-message ref="leaveMessage"></leave-message>
+      </div>
     </div>
     <ScheduleModal ref="scheduleModal"></ScheduleModal>
   </section>
@@ -41,6 +42,7 @@ import SearchHeader from '../common/searchHeader'
 import SearchForm from '../common/SearchForm'
 import ScheduleItem from '../common/scheduleItem'
 import ScheduleModal from '../schedule/scheduleModal'
+import LeaveMessage from '../common/leaveMessage'
 import Pagenation from './schedulePagenation'
 import {
   requestWithJsonAPI,
@@ -54,6 +56,7 @@ export default {
     SearchForm,
     ScheduleItem,
     ScheduleModal,
+    LeaveMessage,
     Pagenation
   },
 
@@ -101,6 +104,10 @@ export default {
       })
     },
 
+    leaveMessageSch () {
+      this.$refs.leaveMessage.isShow()
+    },
+
     addSch () {
       this.$refs.scheduleModal.show()
     },
@@ -149,4 +156,6 @@ export default {
       margin-right:0px;
     }
   }
+  .leaveMessage {
+  }
 </style>