style:通知

@@ -4,13 +4,23 @@
       aria-modal="true" :aria-label="title || 'dialog'">
       <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
         <div class="el-message-box__content">
-          <slot>
-            <p>{{ message }}</p>
-          </slot>
+          <div class="el-message-box__container">
+            <p v-if="title !== null">{{ title }}</p>
+            <div class="el-message-box__message" v-if="message !== ''">
+              <slot>
+                <p v-html="message"></p>
+              </slot>
+            </div>
+            <div class="postscript">
+              
+              <el-button type="text">下载</el-button>
+            </div>
+          </div>
         </div>
         <div class="el-message-box__btns">
-          <el-button :loading="cancelButtonLoading" :class="[cancelButtonClasses]" :round="roundButton" size="small"
-            @click.native="handleAction('cancel')" @keydown.enter="handleAction('cancel')">
+          <el-button :loading="cancelButtonLoading" :class="[cancelButtonClasses]" v-if="showCancelButton"
+            :round="roundButton" size="small" @click.native="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')">
             {{ cancelButtonText || t('el.messagebox.cancel') }}
           </el-button>
         </div>
@@ -22,6 +32,8 @@
 <script type="text/babel">
 import Popup from 'element-ui/src/utils/popup';
 import Locale from 'element-ui/src/mixins/locale';
+import ElInput from 'element-ui/packages/input';
+import ElButton from 'element-ui/packages/button';
 import { addClass, removeClass } from 'element-ui/src/utils/dom';
 import { t } from 'element-ui/src/locale';
 import Dialog from 'element-ui/src/utils/aria-dialog';
@@ -36,6 +48,7 @@ let typeMap = {
 
 export default {
   mixins: [Popup, Locale],
+
   props: {
     modal: {
       default: true
@@ -65,6 +78,12 @@ export default {
       type: Boolean
     }
   },
+
+  components: {
+    ElInput,
+    ElButton
+  },
+
   computed: {
     icon () {
       const { type, iconClass } = this;
@@ -186,6 +205,11 @@ export default {
     visible (val) {
       if (val) {
         this.uid++;
+        if (this.$type === 'alert' || this.$type === 'confirm') {
+          this.$nextTick(() => {
+            this.$refs.confirm.$el.focus();
+          });
+        }
         this.focusAfterClosed = document.activeElement;
         messageBox = new Dialog(this.$el, this.focusAfterClosed, this.getFirstFocus());
       }
@@ -257,17 +281,3 @@ export default {
   }
 };
 </script>
-<style scoped lang="scss">
-.el-message-box__wrapper {
-  background: none;
-}
-
-.el-message-box {
-  border: none;
-}
-
-.el-message-box__content {
-  min-height: 150px;
-  padding-top: 30px;
-}
-</style>

@@ -325,8 +325,7 @@ aside {
 }
 
 .allow,
-.prohibit
-.suspend {
+.prohibit .suspend {
   position: relative;
   margin: 0 auto;
   text-align: left;
@@ -380,6 +379,7 @@ aside {
   height: 5px;
   border-radius: 50%;
 }
+
 //错误日志样式 后期超优化
 .item-cwnr {
   white-space: pre-wrap;
@@ -389,4 +389,8 @@ aside {
   overflow-wrap: break-word;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+}
+
+.item-cwnr img {
+  height: 30px;
 }
\ No newline at end of file

 <template>
-  <dialogBox
-    title="新增系统通知"
-    @submitForm="submitForm"
-    saveButton="保存"
-    :isFullscreen="false"
-    width="60%"
-    @closeDialog="closeDialog"
-    v-model="value"
-  >
+  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
+    @closeDialog="closeDialog" v-model="value">
     <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
       <el-row>
-        <el-col :span="12">
+        <el-col :span="24">
           <el-form-item label="通知标题:" prop="noticeTitle">
-            <el-input v-model="ruleForm.noticeTitle"></el-input>
+            <el-input v-model="ruleForm.noticeTitle" class="width100"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="12">
+        <el-col :span="24">
           <el-form-item label="通知来源:" prop="noticeSource">
-            <el-input v-model="ruleForm.noticeSource"></el-input>
+            <el-input v-model="ruleForm.noticeSource" class="width100"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="24">
-          <el-form-item label="通知内容:" prop="noticeContent">
-            <quill-editor
-              v-model="ruleForm.noticeContent"
-              class="editor ql-editor"
-              ref="myQuillEditor"
-              :options="editorOption"
-              @blur="onEditorBlur($event)"
-              @focus="onEditorFocus($event)"
-              @change="onEditorChange($event)"
-              @ready="onEditorReady($event)"
-            ></quill-editor>
-            <!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
-          </el-form-item>
-        </el-col>
+        <el-form-item label="通知内容:" prop="noticeContent">
+          <quill-editor v-model="ruleForm.noticeContent" class="editor ql-editor" ref="myQuillEditor"
+            :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
+            @change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-editor>
+        </el-form-item>
       </el-row>
       <el-row>
         <el-col :span="8">
           <el-form-item label="附件:" prop="noticeFileUrl">
-            <el-upload
-              action
-              multiple
-              :auto-upload="false"
-              :limit="1"
-              :on-change="handleChange"
-              :before-upload="beforeUpload"
-            >
+            <el-upload action multiple :auto-upload="false" :limit="1" :on-change="handleChange"
+              :before-upload="beforeUpload">
               <el-button icon="el-icon-upload" type="primary">上传</el-button>
               <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
             </el-upload>
@@ -58,14 +35,8 @@
         </el-col>
       </el-row>
       <div v-show="false">
-        <el-upload
-          action
-          multiple
-          :auto-upload="false"
-          :on-change="RichTexthandleChange"
-          :before-upload="beforeUpload"
-          class="richUpload"
-        >
+        <el-upload action multiple :auto-upload="false" :on-change="RichTexthandleChange" :before-upload="beforeUpload"
+          class="richUpload">
           <el-button icon="el-icon-upload" type="primary">上传</el-button>
           <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
         </el-upload>
@@ -83,7 +54,7 @@ export default {
     value: { type: Boolean, default: false }
   },
   components: { quillEditor },
-  data() {
+  data () {
     return {
       ruleForm: {
         noticeTitle: "",
@@ -125,7 +96,7 @@ export default {
               ["image", "video"] // 链接、图片、视频
             ],
             handlers: {
-              image: function(value) {
+              image: function (value) {
                 if (value) {
                   // 用upload的点击事件代替文本编辑器的图片上传事件
                   document.querySelector(".richUpload input").click();
@@ -141,7 +112,7 @@ export default {
     };
   },
   watch: {
-    value(val) {
+    value (val) {
       if (val) {
         let that = this
         this.$nextTick(() => {
@@ -170,9 +141,9 @@ export default {
       }
     }
   },
-  mounted() {},
+  mounted () { },
   methods: {
-    submitForm() {
+    submitForm () {
       let that = this;
       that.$refs.ruleForm.validate(valid => {
         if (valid) {
@@ -193,20 +164,20 @@ export default {
       });
     },
     //关闭窗口
-    closeDialog() {
+    closeDialog () {
       this.$emit("input", false);
       this.resetRuleForm();
     },
     //
-    resetRuleForm() {
+    resetRuleForm () {
       this.$refs["ruleForm"].resetFields();
       this.ruleForm.noticeType = "1";
     },
-    beforeUpload(file) {
+    beforeUpload (file) {
       return true;
     },
     //附件上传事件
-    async handleChange(file) {
+    async handleChange (file) {
       var formdata = new FormData();
       formdata.append("file", file.raw);
       upload(formdata).then(res => {
@@ -214,14 +185,14 @@ export default {
       });
     },
     //富文本图片上传事件
-    RichTexthandleChange(file) {
+    RichTexthandleChange (file) {
       this.uploadPicture(file.raw)
     },
     //图片粘贴事件
-    clipboardPictureChange(file) {
+    clipboardPictureChange (file) {
       this.uploadPicture(file)
     },
-    uploadPicture(file){
+    uploadPicture (file) {
       let that = this;
       var formdata = new FormData();
       formdata.append("file", file);
@@ -238,23 +209,23 @@ export default {
         //that.quillUpdateImg = false;
       });
     },
-    onSubmit() {
+    onSubmit () {
       //console.log("submit!");
     },
     // 失去焦点事件
-    onEditorBlur(quill) {
+    onEditorBlur (quill) {
       //console.log("editor blur!", quill);
     },
     // 获得焦点事件
-    onEditorFocus(quill) {
+    onEditorFocus (quill) {
       //console.log("editor focus!", quill);
     },
     // 准备富文本编辑器
-    onEditorReady(quill) {
+    onEditorReady (quill) {
       //console.log("editor ready!", quill);
     },
     // 内容改变事件
-    onEditorChange({ quill, html, text }) {
+    onEditorChange ({ quill, html, text }) {
       //console.log("editor change!", quill, html, text);
       //this.content = html;
     }
@@ -262,11 +233,18 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-// .ql-editor{
-//          height:500px;
-//      }
-/deep/.ql-editor {
-  padding: 0px;
-  height: 500px;
+.quill-editor {
+  padding: 0;
+}
+
+.ql-editor {
+  height: auto !important;
+}
+
+/deep/.ql-container {
+  padding: 0;
+  max-height: 400px;
+  min-height: 160px;
+  overflow-y: scroll;
 }
 </style>
\ No newline at end of file

@@ -9,14 +9,9 @@
     <el-row :gutter="8">
       <el-col :span="24" class="margin-top-middle">
         通知内容：
-        <!-- <span v-html="formData.item.noticeContent"></span> -->
-        <quill-editor class="ql-editor"
-              v-model="formData.item.noticeContent"
-              ref="myQuillEditor"
-              :options="editorOption"
-            >
-            </quill-editor>
-        <!-- <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input> -->
+        <quill-editor class="ql-editor" v-model="formData.item.noticeContent" ref="myQuillEditor"
+          :options="editorOption">
+        </quill-editor>
       </el-col>
     </el-row>
     <el-row :gutter="8">
@@ -30,10 +25,10 @@
 <script>
 import { quillEditor } from "vue-quill-editor";
 export default {
-    components: { quillEditor },
+  components: { quillEditor },
   data () {
     return {
-       // 富文本编辑器配置
+      // 富文本编辑器配置
       editorOption: {
         theme: "snow", // or 'bubble'
         placeholder: "请输入正文",
@@ -63,7 +58,8 @@ export default {
 .margin-top-middle {
   margin-top: 10px
 }
+
 /deep/.ql-editor {
   padding: 0px;
-}  
+}
 </style>
\ No newline at end of file

@@ -53,6 +53,7 @@ export default {
     return {
       isDialog: false,
       viewDialog: false,
+      
       ruleForm: {
         noticeTitle: '',
         noticeStatus: ''

@@ -28,27 +28,27 @@ class data extends filter {
       {
         label: "通知内容",
         render: (h, scope) => {
-          return <div class="item-cwnr">{scope.row.noticeContent}</div>
+          return <div class="item-cwnr" domPropsInnerHTML={scope.row.noticeContent}></div>
         }
       },
       {
         prop: "noticeFileName",
         label: "通知附件",
         render: (h, scope) => {
-          return <div  class="pointer" onClick={() => { vm.downloadFile(scope.row) }}>{scope.row.noticeFileName}</div>
+          return <div class="pointer" onClick={() => { vm.downloadFile(scope.row) }}>{scope.row.noticeFileName}</div>
         }
       },
       {
         label: "发布状态",
         width: '80',
         render: (h, scope) => {
-            switch (scope.row.noticeStatus) {
-              case '1':
-                return <div class='prohibit'>未发布</div>
-              case '2':
-                return <div class='allow'>已发布</div>
-            }
+          switch (scope.row.noticeStatus) {
+            case '1':
+              return <div class='prohibit'>未发布</div>
+            case '2':
+              return <div class='allow'>已发布</div>
           }
+        }
       },
       {
         prop: "creater",
@@ -72,9 +72,9 @@ class data extends filter {
                 <el-button type="text" icon="el-icon-delete" onClick={() => { vm.delNotice(scope.row) }}>删除</el-button>
               </div>
             case '2':
-              return  <div>
-                  <el-button type="text" onClick={() => { vm.viewDetail(scope.row) }}>查看</el-button>
-                  <el-button type="text" icon="el-icon-edit-outline" onClick={() => { vm.toUnPublish(scope.row) }}>撤销通知</el-button>
+              return <div>
+                <el-button type="text" onClick={() => { vm.viewDetail(scope.row) }}>查看</el-button>
+                <el-button type="text" icon="el-icon-edit-outline" onClick={() => { vm.toUnPublish(scope.row) }}>撤销通知</el-button>
               </div>
           }
         }