apassDialog弹窗组件优化

src/components/apass-dialog.vue

@@ -9,12 +9,27 @@
       <h3 class="dialog_title" slot="title">
         <span v-text="title"></span>
       </h3>
-      <div class="dialog_content appas_table">
+
+      <div v-if="$slots.content" class="dialog_content appas_table">
         <slot name="content"></slot>
       </div>
-      <div slot="footer" class="dialog_action apass_button">
+      <p v-else class="dialog_msg" v-text="msg"></p>
+
+      <div
+        v-if="$slots.action"
+        slot="footer"
+        class="dialog_action apass_button"
+      >
         <slot name="action"></slot>
       </div>
+      <div v-else slot="footer" class="dialog_action apass_button">
+        <el-button type="defalut" size="mini" @click="hide">
+          取消
+        </el-button>
+        <el-button type="primary" size="mini" @click="dialogSubmit">
+          确定
+        </el-button>
+      </div>
     </el-dialog>
   </transition>
 </template>
@@ -31,6 +46,10 @@ export default {
       type: String,
       default: () => "",
     },
+    msg: {
+      type: String,
+      default: () => "",
+    },
   },
   data: () => ({
     showDialog: false,
@@ -42,6 +61,10 @@ export default {
     hide() {
       this.showDialog = false;
     },
+    dialogSubmit() {
+      this.$emit("submit");
+      this.hide();
+    },
   },
 };
 </script>
@@ -64,6 +87,12 @@ export default {
   font-weight: bold;
   color: #1d1e20;
 }
+.dialog_msg {
+  font-size: 18px;
+  line-height: 34px;
+  color: #58617a;
+  margin: 30px 0 10px;
+}
 </style>
 
 <style>

src/components/dialog-action.vue

@@ -4,6 +4,7 @@
       :visible.sync="show"
       width="400px"
       top="25vh"
+      class="dialog_action"
       :class="{'user-dialog':true,'out':confirmOptions.position}"
     >
       <span slot="title">
@@ -62,7 +63,7 @@ export default {
 };
 </script>
 <style>
-.el-dialog__header {
+.dialog_action .el-dialog__header {
   border-bottom: 1px solid #edf0ff;
   padding: 20px 20px 16px !important;
   font-family: "MicrosoftYaHei";
@@ -70,7 +71,7 @@ export default {
   color: #1d1e20;
   font-weight: 800;
 }
-.el-dialog__header .iconLeft {
+.dialog_action .el-dialog__header .iconLeft {
   width: 4px;
   height: 16px;
   background-color: #0367f6;
@@ -79,23 +80,23 @@ export default {
   vertical-align: middle;
   margin-right: 3px;
 }
-.el-icon-close:before {
+.dialog_action .el-icon-close:before {
   font-weight: 800 !important;
 }
-.el-dialog__body {
+.dialog_action .el-dialog__body {
   padding: 49px 20px !important;
 }
-.out .el-dialog__body{
+.dialog_action .out .el-dialog__body{
   text-align: left;
 }
 </style>
 <style scoped>
-.group-dialog.el-dialog__wrapper {
+.dialog_action .group-dialog.el-dialog__wrapper {
   width: 100% !important;
   left: 0 !important;
   overflow: hidden;
 }
-.user-dialog {
+.dialog_action .user-dialog {
   overflow: hidden;
 }
 </style>

src/components/dialog-remove.vue

@@ -4,6 +4,7 @@
       :visible.sync="show"
       width="400px"
       top="25vh"
+      class="dialog_action"
       :class="this.confirmModalOptions.className ? this.confirmModalOptions.className : 'user-dialog'"
     >
       <span slot="title">
@@ -109,7 +110,7 @@ export default {
 };
 </script>
 <style>
-.el-dialog__header {
+.dialog_action .el-dialog__header {
   border-bottom: 1px solid #edf0ff;
   padding: 20px 20px 16px !important;
   font-family: "MicrosoftYaHei";
@@ -117,7 +118,7 @@ export default {
   color: #1d1e20;
   font-weight: 800;
 }
-.el-dialog__header .iconLeft {
+.dialog_action .el-dialog__header .iconLeft {
   width: 4px;
   height: 16px;
   background-color: #0367f6;
@@ -126,20 +127,20 @@ export default {
   vertical-align: middle;
   margin-right: 3px;
 }
-.el-icon-close:before {
+.dialog_action .el-icon-close:before {
   font-weight: 800 !important;
 }
-.el-dialog__body {
+.dialog_action .el-dialog__body {
   padding: 49px 20px !important;
 }
 </style>
 <style scoped>
-.group-dialog.el-dialog__wrapper {
+.dialog_action .group-dialog.el-dialog__wrapper {
   width: 100% !important;
   left: 0 !important;
   overflow: hidden;
 }
-.user-dialog {
+.dialog_action .user-dialog {
   overflow: hidden;
 }
 </style>
\ No newline at end of file

src/pages/authority/organization.vue

@@ -30,16 +30,12 @@
       ></organization-list>
     </apass-list>
 
-    <apass-dialog ref="dialog" title="提示">
-      <p slot="content" style="text-align: left;">确认删除该组织吗？</p>
-      <template slot="action">
-        <el-button type="defalut" size="mini" @click="dialogHide">
-          取消
-        </el-button>
-        <el-button type="primary" size="mini" @click="dialogSubmit">
-          确定
-        </el-button>
-      </template>
+    <apass-dialog
+      ref="dialog"
+      title="提示"
+      msg="确认删除该组织吗？"
+      @submit="dialogSubmit"
+    >
     </apass-dialog>
   </div>
 </template>
@@ -170,17 +166,10 @@ export default {
       console.log(value);
     },
     deleteAction(item) {
-      this.dialogShow();
-    },
-    dialogShow() {
       this.$refs.dialog.show();
     },
-    dialogHide() {
-      this.$refs.dialog.hide();
-    },
     dialogSubmit() {
       console.log("dialog submit");
-      this.dialogHide();
     },
   },
 };

src/pages/authority/users.vue

@@ -76,7 +76,12 @@
       </el-table>
     </apass-list>
 
-    <apass-dialog ref="dialog" width="590px" title="分配角色">
+    <apass-dialog
+      ref="dialog"
+      width="590px"
+      title="分配角色"
+      @submit="dialogSubmit"
+    >
       <el-table
         slot="content"
         :border="false"
@@ -96,14 +101,6 @@
           </template>
         </el-table-column>
       </el-table>
-      <template slot="action">
-        <el-button type="defalut" size="mini" @click="dialogHide">
-          取消
-        </el-button>
-        <el-button type="primary" size="mini" @click="dialogSubmit">
-          确定
-        </el-button>
-      </template>
     </apass-dialog>
   </div>
 </template>
@@ -189,7 +186,7 @@ export default {
     },
     setRole(item) {
       console.log("setRole " + item.name);
-      this.dialogShow();
+      this.$refs.dialog.show();
     },
     setState(item) {
       console.log("setState " + item.name);
@@ -197,15 +194,8 @@ export default {
     dialogSelectionChange(values) {
       console.log(values);
     },
-    dialogShow() {
-      this.$refs.dialog.show();
-    },
-    dialogHide() {
-      this.$refs.dialog.hide();
-    },
     dialogSubmit() {
       console.log("dialog submit");
-      this.dialogHide();
     },
   },
 };