style:通知

任超
Showing 6 changed files with 81 additions and 92 deletions
src/components/MessageBox/src/main.vue
src/styles/index.scss
src/views/system/xttz/components/addDialog.vue
src/views/system/xttz/components/viewDialog.vue
src/views/system/xttz/xttz.vue
src/views/system/xttz/xttzdata.js
--- a/src/components/MessageBox/src/main.vue
View file @b3da648
+++ b/src/components/MessageBox/src/main.vue
View file @b3da648
@@ -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">
+          <div class="el-message-box__container">
+            <p v-if="title !== null">{{ title }}</p>
+            <div class="el-message-box__message" v-if="message !== ''">
              <slot>
-            <p>{{ message }}</p>
+                <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"
+          <el-button :loading="cancelButtonLoading" :class="[cancelButtonClasses]" v-if="showCancelButton"
-            @click.native="handleAction('cancel')" @keydown.enter="handleAction('cancel')">
+            :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>
--- a/src/styles/index.scss
View file @b3da648
+++ b/src/styles/index.scss
View file @b3da648
@@ -325,8 +325,7 @@ aside {
 }
 .allow,
-.prohibit
+.prohibit .suspend {
-.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;
@@ -390,3 +390,7 @@ aside {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
 }
+.item-cwnr img {
+  height: 30px;
+}
\ No newline at end of file
--- a/src/views/system/xttz/components/addDialog.vue
View file @b3da648
+++ b/src/views/system/xttz/components/addDialog.vue
View file @b3da648
 <template>
-  <dialogBox
+  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
-    title="新增系统通知"
+    @closeDialog="closeDialog" v-model="value">
-    @submitForm="submitForm"
-    saveButton="保存"
-    :isFullscreen="false"
-    width="60%"
-    @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
+          <quill-editor v-model="ruleForm.noticeContent" class="editor ql-editor" ref="myQuillEditor"
-              v-model="ruleForm.noticeContent"
+            :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
-              class="editor ql-editor"
+            @change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-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-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="附件:" prop="noticeFileUrl">
-            <el-upload
+            <el-upload action multiple :auto-upload="false" :limit="1" :on-change="handleChange"
-              action
+              :before-upload="beforeUpload">
-              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
+        <el-upload action multiple :auto-upload="false" :on-change="RichTexthandleChange" :before-upload="beforeUpload"
-          action
+          class="richUpload">
-          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{
+.quill-editor {
-//          height:500px;
+  padding: 0;
-//      }
+}
-/deep/.ql-editor {
-  padding: 0px;
+.ql-editor {
-  height: 500px;
+  height: auto !important;
+}
+/deep/.ql-container {
+  padding: 0;
+  max-height: 400px;
+  min-height: 160px;
+  overflow-y: scroll;
 }
 </style>
\ No newline at end of file
--- a/src/views/system/xttz/components/viewDialog.vue
View file @b3da648
+++ b/src/views/system/xttz/components/viewDialog.vue
View file @b3da648
@@ -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"
-        <quill-editor class="ql-editor"
+          :options="editorOption">
-              v-model="formData.item.noticeContent"
-              ref="myQuillEditor"
-              :options="editorOption"
-            >
        </quill-editor>
-        <!-- <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input> -->
      </el-col>
    </el-row>
    <el-row :gutter="8">
@@ -63,6 +58,7 @@ export default {
 .margin-top-middle {
  margin-top: 10px
 }
 /deep/.ql-editor {
  padding: 0px;
 }
--- a/src/views/system/xttz/xttz.vue
View file @b3da648
+++ b/src/views/system/xttz/xttz.vue
View file @b3da648
@@ -53,6 +53,7 @@ export default {
    return {
      isDialog: false,
      viewDialog: false,
      ruleForm: {
        noticeTitle: '',
        noticeStatus: ''
--- a/src/views/system/xttz/xttzdata.js
View file @b3da648
+++ b/src/views/system/xttz/xttzdata.js
View file @b3da648
@@ -28,7 +28,7 @@ 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>
        }
      },
      {