添加弹框

src/ajax.js

 import createRequestor from 'create-requestor'
 import { default as API } from '@/api'
+import { MessageBox } from 'element-ui'
 
 const dev = process.env.NODE_ENV === 'development'
 
@@ -28,8 +29,11 @@ let config = {
     base: ''
   },
 
-  // alert: function (msg) {
-  // },
+  alert: function (msg) {
+    msg.forEach(item => {
+      MessageBox.alert(item.error)
+    })
+  },
 
   failedMsg: '请求失败，请稍后重试!'
 }

src/components/common/searchHeader.vue

@@ -8,11 +8,11 @@
         <div class="pull-right search-form">
           <el-form-item v-if="searchKey">
             <el-input size="small" v-model="search['ClientSearch[keyword]']" placeholder="关键词">
-              <el-button slot="append" type="primary" @click="searchKeyword">搜索</el-button>
+              <el-button slot="append" type="primary" @click.stop.prevent="searchKeyword">搜索</el-button>
             </el-input>
           </el-form-item>
           <el-form-item v-if="searchKey">
-            <el-button type="primary" size="mini" @click="addNew">
+            <el-button type="primary" size="mini" @click.stop.prevent="addNew">
               <i class="fa fa-plus faa-pulse animated"></i> {{addTitle}}
             </el-button>
           </el-form-item>

src/components/common/singleSelect.vue

 <template>
-  <section class="select-comp-wrap" @click="showList">
+  <section class="select-comp-wrap" @click.stop.prevent="showList">
     <div class="el-select">
       <div class="el-input" :class="{'is-disabled': disabled}">
         <i ref="icon" class="el-input__icon el-icon-caret-top" />
@@ -13,7 +13,7 @@
 
         <div>
           <ul v-if="noEmptyList">
-            <li v-for="item in list" :class="{ 'active': item.value == value }" @click.stop="select( item )">
+            <li v-for="item in list" :class="{ 'active': item.value == value }" @click.stop.prevent="select( item )">
               {{ item.text }}
               <template v-if="showValue && item.value !== '' && item.value !== '-1'">({{ item.value }})</template>
             </li>

src/components/schedule/scheduleModal.vue

 <template>
   <section>
-    <sidePopup ref="scheduleSidePopup">
+    <sidePopup ref="scheduleSidePopup" title="新建待办事项" :width="40">
       <ScheduleForm
        :model="model">
       </ScheduleForm>
-      <div slot="footer" class="dialog-footer" style="text-align: center;">
-        <el-button type="cancel" @click="diaVis = false" size="mini">取 消</el-button>
-        <el-button type="confirm" @click="save" size="mini">确 定</el-button>
+      <div class="mt20" style="margin-left: 150px;">
+        <el-button type="cancel" @click.stop.prevent="handleClose" size="mini">取 消</el-button>
+        <el-button type="confirm" @click.stop.prevent="save" size="mini">确 定</el-button>
       </div>
     </sidePopup>
-    <!-- <el-dialog title="新建待办事项" :visible.sync="diaVis" :modal-append-to-body="false" :close="handleClose">
-    </el-dialog> -->
   </section>
 </template>
 <script>
@@ -51,7 +49,6 @@ export default {
     show (model) {
       model && UTIL.flatten(this.model, model)
       model && (this.model.client_name = model.client.name)
-      // this.diaVis = true
       this.$refs.scheduleSidePopup.show()
     },
 
@@ -59,6 +56,7 @@ export default {
       Object.keys(this.model).forEach(item => {
         this.model[item] = ''
       })
+      this.$refs.scheduleSidePopup.close()
     },
 
     save () {
@@ -67,7 +65,7 @@ export default {
       !this.model.id && delete _params['Schedules[id]']
       requestAPI(Object.assign(_apiUrl, { method: 'POST' }), _params)
         .then((res) => {
-          this.diaVis = false
+          this.$refs.scheduleSidePopup.close()
           this.$message.success('操作成功')
         })
     }

src/components/schedule_list/scheduleHome.vue

@@ -38,7 +38,10 @@
         </leave-message>
       </div>
     </div>
-    <ScheduleModal ref="scheduleModal"></ScheduleModal>
+    <ScheduleModal
+      ref="scheduleModal"
+      v-click-outside="scheduleClose">
+    </ScheduleModal>
   </section>
 </template>
 
@@ -174,6 +177,11 @@ export default {
       this.$refs.leaveMessage.isClose()
     },
 
+    scheduleClose () {
+      this.$refs.scheduleModal &&
+      this.$refs.scheduleModal.handleClose()
+    },
+
     addSch () {
       this.$refs.scheduleModal.show()
     },