1. init 添加alert的组件 全局注册

src/apppackage/common-alert/message-alert-register.ts

+import Vue, { VueConstructor } from "vue";
+import MessageAlert from "@/apppackage/common-alert/message-alert.vue";
+import { Notice, NoticePrams4Props, NoticePrams4Events } from "@/apppackage/common-alert/notice-model";
+
+function isFunction(f: any) {
+    return Object.prototype.toString.call(f) === '[object Function]';
+}
+
+export function create(Component: VueConstructor, params: any) {
+    const props = {};
+    const on = {};
+    Object.keys(params).forEach(function(key) {
+        if (isFunction(params[key])) {
+            Object.assign(on, {
+                [key]: params[key]
+            });
+        } else {
+            Object.assign(props, {
+                [key]: params[key]
+            });
+        }
+    });
+    const vm = new Vue({
+        render(h) {
+            return h(Component, { props, on });
+        }
+    }).$mount();
+    document.body.appendChild(vm.$el);
+    const comp = vm.$children[0] as Notice;
+    comp.remove = () => {
+        document.body.removeChild(vm.$el);
+        vm.$destroy();
+    };
+    return comp;
+}
+
+export function registerNotice(params: NoticePrams4Props | NoticePrams4Events) {
+    const comp = create(MessageAlert, params);
+    return comp;
+}

src/apppackage/common-alert/message-alert.vue

+<template>
+    <div
+        class="alert-container d-flex align-items-center justify-content-center"
+    >
+        <div class="content" :class="{ offset: isOffset }">
+            <div class="title">{{ currentTitle }}</div>
+            <div class="d-flex align-items-start">
+                <i
+                    class="icon el-icon-success"
+                    :class="{
+                        'el-icon-success': type === 'success',
+                        'el-icon-warning': type === 'warning',
+                    }"
+                ></i>
+                <div class="text">
+                    <template v-if="message">
+                        <div v-html="message"></div>
+                    </template>
+                    <template v-else>
+                        <slot name="message"></slot>
+                    </template>
+                </div>
+            </div>
+            <div class="footer d-flex justify-content-end">
+                <mg-button @click="close">{{ cancelText || "取消" }}</mg-button>
+                <mg-button type="primary" @click="confirm">{{
+                    confirmText
+                }}</mg-button>
+            </div>
+        </div>
+        <div class="mask" @click="close"></div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Vue, Prop } from "vue-property-decorator";
+    import { Notice, ALERT_TYPES } from "@/apppackage/common-alert/notice-model";
+
+    @Component({ components: {} })
+    export default class InnerApplyDrawer extends Vue implements Notice {
+        @Prop({ default: "提示" })
+        private currentTitle!: string;
+
+        @Prop({
+            required: false,
+            default: "warning",
+            validator: (v) => !v || ALERT_TYPES.indexOf(v) > -1,
+        })
+        private type!: string;
+
+        @Prop({ default: "确定" })
+        private confirmText!: string;
+
+        @Prop({})
+        private cancelText!: string;
+
+        @Prop()
+        private message!: string;
+
+        @Prop({ default: true })
+        private isOffset!: boolean;
+
+        @Prop({ default: true })
+        private onlyConfirm!: boolean;
+
+        private confirm() {
+            this.$emit("confirm");
+            if (this.onlyConfirm) {
+                this.remove();
+                return;
+            }
+            this.close();
+        }
+
+        public close() {
+            this.$emit("cancel");
+            this.remove();
+        }
+
+        public remove() {
+            return "";
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    @import "~@/css/variables.less";
+    .alert-container {
+        position: fixed;
+        left: 0px;
+        right: 0px;
+        top: 0px;
+        bottom: 0px;
+        z-index: 10000;
+
+        .mask {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            opacity: 0.2;
+        }
+
+        .content {
+            position: absolute;
+            z-index: 1;
+            box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
+            padding: 26px 30px 28px 37px;
+            background-color: #fff;
+            min-width: 380px;
+            max-width: 424px;
+
+            &.offset {
+                margin-left: 252px;
+            }
+
+            .title {
+                font-size: 18px;
+                color: #333;
+                line-height: 22px;
+                margin-bottom: 26px;
+            }
+
+            .icon {
+                font-size: 21px;
+                margin-right: 8px;
+                color: #e6a23c;
+            }
+
+            .text {
+                font-size: 14px;
+                color: #999;
+                line-height: 21px;
+            }
+
+            .footer {
+                margin-top: 28px;
+            }
+        }
+    }
+</style>

src/apppackage/common-alert/notice-model.ts

+export const ALERT_TYPES = ["success", "warning"];
+
+export interface Notice extends Vue {
+    remove: () => void | string;
+}
+
+export interface NoticePrams4Props {
+    currentTitle?: string;
+    type?: string;
+    confirmText?: string;
+    cancelText?: string;
+    message?: string;
+    isOffset?: boolean;
+    onlyConfirm?: boolean;
+}
+
+export interface NoticePrams4Events {
+    confirm?: () => any;
+    cancel?: () => any;
+}

src/installer/index.ts

@@ -50,8 +50,9 @@ import {
 import Vue, { VueConstructor } from 'vue';
 import './lodash';
 import 'element-ui/lib/theme-chalk/index.css';
-
 import MgButton from "@/views/components/components/mg-button.vue";
+import { registerNotice } from "@/apppackage/common-alert/message-alert-register";
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const scrollbar = require('element-ui/lib/scrollbar');
 
@@ -82,6 +83,7 @@ locale.el.pagination.pageClassifier = '';
 Vue.component('el-autocomplete', Autocomplete);
 Vue.component('el-scrollbar', scrollbar.default);
 Vue.component('mg-button', MgButton);
+Vue.prototype.$notice = registerNotice;
 
 Vue.use(Avatar);
 Vue.use(Pagination);

src/views/pages/employ-management/application-record/application-record.vue

@@ -85,13 +85,13 @@
                         <template slot-scope="scope">
                             <mg-button
                                 type="primary"
-                                @click="handleClick(1, scope.row.id)"
+                                @click="onPass(scope.row.id)"
                                 v-if="scope.row.status === 0"
                                 >通过</mg-button
                             >
                             <mg-button
                                 class="table-operation"
-                                @click="handleClick(-1, scope.row.id)"
+                                @click="onReject(scope.row.id)"
                                 v-if="scope.row.status === 0"
                                 >拒绝</mg-button
                             >
@@ -178,19 +178,25 @@
         }
 
         private onPass(id: number) {
-            this.$confirm("是否通过?", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            }).then(() => this.operateApplyRecord(id, ApplyOperateType.Pass));
+            this.$notice({
+                message: "是否通过?",
+                confirmText: "确定",
+                cancelText: "取消",
+                confirm: () => {
+                    this.operateApplyRecord(id, ApplyOperateType.Pass);
+                },
+            });
         }
 
         private onReject(id: number) {
-            this.$confirm("是否拒绝?", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            }).then(() => this.operateApplyRecord(id, ApplyOperateType.Reject));
+            this.$notice({
+                message: "是否拒绝?",
+                confirmText: "确定",
+                cancelText: "取消",
+                confirm: () => {
+                    this.operateApplyRecord(id, ApplyOperateType.Reject);
+                },
+            });
         }
 
         private operateApplyRecord(id: number, type: ApplyOperateType) {

src/vue.d.ts

@@ -2,6 +2,8 @@ import { VNode } from "vue";
 import { Dictionary } from "vue-router/types/router";
 import { Direction } from "./router";
 import { UniplatSdk } from "uniplat-sdk";
+import { NoticePrams4Props, NoticePrams4Events } from "@/apppackage/common-alert/notice-model";
+
 
 declare module "vue/types/vue" {
     interface NewDirectionOption {
@@ -11,6 +13,7 @@ declare module "vue/types/vue" {
     }
 
     interface Vue {
+        $notice: (params: NoticePrams4Props | NoticePrams4Events) => any;
         sdk: UniplatSdk;
         beforeCreate?(): void;
         created?(): void;