修复confirm在dialog使用后遮罩无法关闭。

.env.development

@@ -1,5 +1,5 @@
 #VUE_APP_BACKEND_URL=http://wisdomhouse.sudaonline.net
-#VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-community-server
-VUE_APP_BACKEND_URL=http://192.168.33.26:8080/smart-community-server
+VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-community-server
+#VUE_APP_BACKEND_URL=http://192.168.33.26:8080/smart-community-server
 #VUE_APP_BACKEND_URL=http://zldb.xiaoxinda.com:8088/smart-community-server
 #VUE_APP_BACKEND_URL=http://kr6zr7.natappfree.cc/smart-community-server/

src/components/Confirm/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    :modal-append-to-body="false"
+    :top="'10%'"
+    :modal="true"
+    :width="'400px'">
+    <div class="el-message-box__container">
+        <div class="el-message-box__status el-icon-warning"></div>
+        <div class="el-message-box__message"><p v-html="content"></p></div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="no()">否</el-button>
+        <el-button type="primary" @click="yes()">是</el-button>
+    </span>
+    </el-dialog>
+</template>
+<script>
+export default {
+    data() {
+      return {
+        title: "",
+        content:"",
+        visible: false
+      };
+    },
+    methods: {
+        yes() {
+            this.$emit("confirm", true);
+            this.visible = false;
+        },
+        no() {
+            this.$emit("confirm", false);
+            this.visible = false;
+        }
+    }
+  };
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -7,16 +7,16 @@ import './plugins/element.js'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import './assets/iconfont/iconfont.css'
 import VueQuillEditor from 'vue-quill-editor';
-
 import 'quill/dist/quill.core.css';
-
 import 'quill/dist/quill.snow.css';
-
 import 'quill/dist/quill.bubble.css';
+import ConfirmPlugin from '@/plugins/ConfirmPlugin'
 
 Vue.config.productionTip = false
-Vue.use(AxiosPlugin)
+Vue.use(AxiosPlugin);
 Vue.use(VueQuillEditor);
+//Vue.use(ConfirmPlugin);
+
 Vue.prototype.$echarts = echarts
 
 new Vue({

src/plugins/ConfirmPlugin.js

@@ -0,0 +1,25 @@
+import ConfirmComponent from '@/components/Confirm'
+
+let $vm
+
+export default {
+  install (Vue) {
+    if (!$vm) {
+      const Confirm = Vue.extend(ConfirmComponent) // 补齐方法
+
+      $vm = new Confirm({
+        el: document.createElement('div')
+      })
+
+      document.body.appendChild($vm.$el);
+    }
+
+    Vue.prototype.$confirmEx = (title, content, callback) => {
+        $vm.title = title || '提示';
+        $vm.content = content;
+        $vm.visible = true;
+
+        $vm.$on("confirm", callback);
+    };
+  }
+}

src/views/base/companyDeviceRelation-list.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :visible.sync="showDialog"
     title="查看设备"
-    :modal-append-to-body="false"
+    append-to-body
     :modal="true"
     style="text-align:left;"
     @close="closeDialog"
@@ -169,34 +169,39 @@ export default {
       var idList = this.multipleSelection.map(record => {
         return record.device.id;
       });
-      if (confirm("是否绑定？")) {
-        self.loading = true;
-        var formData = new FormData();
-        formData.append("companyId", self.companyId);
-        formData.append("deviceIds", idList);
-        return companyInfoApi.bindDevice(formData).then(function(response) {
-          self.loading = false;
 
-          var jsonData = response.data;
-          self.changePage(self.pageIndex);
-          if (jsonData.result) {
-            self.$message({
-              message: "绑定成功!",
-              type: "success"
-            });
-          } else {
-            self.$message({
-              message: jsonData.message + "",
-              type: "warning"
-            });
-          }
-        });
-      }
+      this.$confirm("是否绑定?","提示","warning").then((result)=>{        
+        if (result) {
+          self.loading = true;
+          var formData = new FormData();
+          formData.append("companyId", self.companyId);
+          formData.append("deviceIds", idList);
+          return companyInfoApi.bindDevice(formData).then(function(response) {
+            self.loading = false;
+
+            var jsonData = response.data;
+            self.changePage(self.pageIndex);
+            if (jsonData.result) {
+              self.$message({
+                message: "绑定成功!",
+                type: "success"
+              });
+            } else {
+              self.$message({
+                message: jsonData.message + "",
+                type: "warning"
+              });
+            }
+          });
+        }
+      });
     },
     handleBound(record) {
       //绑定设备
       var self = this;
-      if (confirm("是否绑定？")) {
+
+      this.$confirm("是否绑定?","提示",{type:"success"}).then((result)=>{
+        if (result) {
         self.loading = true;
         var formData = new FormData();
         formData.append("companyId", self.companyId);
@@ -219,6 +224,7 @@ export default {
           }
         });
       }
+      });
     },
     handleUnBound(record) {
       //取消绑定

src/views/business/workAttendance-list.vue

@@ -6,7 +6,7 @@
         <a href="#">系统管理</a>
       </el-breadcrumb-item>
       <el-breadcrumb-item>
-        <a href="/workAttendance">考勤记录</a>
+        <a href="/workAttendance">考勤统计</a>
       </el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>

vue.config.js

@@ -17,5 +17,14 @@ module.exports = {
     chainWebpack: (config)=>{
         config.resolve.alias
             .set('@', resolve('src'))
+    },
+    // webpack配置 - 简单配置方式
+    configureWebpack: {
+        resolve: {
+            alias: {
+                // 别名
+                vue$: "vue/dist/vue.esm.js"
+            }
+        }
     }
   }