修改通知公示，以及富文本

oa-ui/src/components/Editor/index.vue

@@ -13,6 +13,32 @@
       v-if="this.type == 'url'"
     >
     </el-upload>
+    <el-upload
+      :action="uploadUrl"
+      :before-upload="handleBeforeUploadVideo"
+      :on-success="handleUploadSuccessVideo"
+      :on-error="handleUploadErrorVideo"
+      name="file"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: none"
+      ref="uploadVideo"
+      v-if="this.type == 'url'"
+    >
+    </el-upload>
+    <el-upload
+      :action="uploadUrl"
+      :before-upload="handleBeforeUploadFile"
+      :on-success="handleUploadSuccessFile"
+      :on-error="handleUploadErrorFile"
+      name="file"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: none"
+      ref="uploadFile"
+      v-if="this.type == 'url'"
+    >
+    </el-upload>
     <div class="editor" ref="editor" :style="styles"></div>
   </div>
 </template>
@@ -24,6 +50,34 @@ import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import { getToken } from "@/utils/auth";
 
+// 源码中是import直接倒入，这里要用Quill.import引入
+const Link = Quill.import("formats/link");
+// 自定义a链接
+class FileBlot extends Link {
+   
+  // 继承Link Blot
+  static create (value) {
+   
+    let node = undefined;
+    if (value && !value.href) {
+   
+      // 适应原本的Link Blot
+      node = super.create(value)
+    } else {
+   
+      // 自定义Link Blot
+      node = super.create(value.href)
+      node.href = value.href
+      node.innerText = value.innerText
+      // node.setAttribute('download', value.innerText);  // 左键点击即下载
+    }
+    return node;
+  }
+}
+FileBlot.blotName = "link" // 这里不用改，如果需要也可以保留原来的，这里用个新的blot
+FileBlot.tagName = "A"
+Quill.register(FileBlot) // 注册link
+
 export default {
   name: "Editor",
   props: {
@@ -49,9 +103,18 @@ export default {
     },
     /* 上传文件大小限制(MB) */
     fileSize: {
+      type: Number,
+      default: 50,
+    },
+    /* 上传图片大小限制(MB) */
+    imageSize: {
       type: Number,
       default: 5,
     },
+    videoSize: {
+      type: Number,
+      default: 500,
+    },
     /* 类型（base64格式、url格式） */
     type: {
       type: String,
@@ -77,7 +140,7 @@ export default {
             ["blockquote", "code-block"],                    // 引用  代码块
             [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
             [{ indent: "-1" }, { indent: "+1" }],            // 缩进
-            [{ size: ["small", false, "large", "huge"] }],   // 字体大小
+            [{ size: ["20px","14px","16px", "large", "huge"] }],   // 字体大小
             [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
             [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
             [{ align: [] }],                                 // 对齐方式
@@ -123,8 +186,11 @@ export default {
   },
   methods: {
     init() {
+      debugger
       const editor = this.$refs.editor;
       this.Quill = new Quill(editor, this.options);
+      var Size = Quill.import("formats/size");
+      Size.whitelist = ["14px","16px", "large","20px", "huge"];
       // 如果设置了上传地址则自定义图片上传事件
       if (this.type == 'url') {
         let toolbar = this.Quill.getModule("toolbar");
@@ -135,6 +201,20 @@ export default {
             this.quill.format("image", false);
           }
         });
+        toolbar.addHandler("video", (value) => {
+          if (value) {
+            this.$refs.uploadVideo.$children[0].$refs.input.click();
+          } else {
+            this.quill.format("video", false);
+          }
+        });
+        toolbar.addHandler("link", (value) => {
+          if (value) {
+            this.$refs.uploadFile.$children[0].$refs.input.click();
+          } else {
+            this.quill.format("link", false);
+          }
+        });
       }
       this.Quill.pasteHTML(this.currentValue);
       this.Quill.on("text-change", (delta, oldDelta, source) => {
@@ -164,6 +244,36 @@ export default {
         this.$message.error(`图片格式错误!`);
         return false;
       }
+      // 校检文件大小
+      if (this.imageSize) {
+        const isLt = file.size / 1024 / 1024 < this.imageSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.imageSize} MB!`);
+          return false;
+        }
+      }
+      return true;
+    },
+    handleBeforeUploadVideo(file) {
+      const type = ["video/mp4"];
+      const isVideo = type.includes(file.type);
+      // 检验文件格式
+      if (!isVideo) {
+        this.$message.error(`视频格式错误!`);
+        return false;
+      }
+      // 校检文件大小
+      if (this.videoSize) {
+        const isLt = file.size / 1024 / 1024 < this.videoSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.videoSize} MB!`);
+          return false;
+        }
+      }
+      return true;
+    },
+    // 上传前校检格式和大小
+    handleBeforeUploadFile(file) {
       // 校检文件大小
       if (this.fileSize) {
         const isLt = file.size / 1024 / 1024 < this.fileSize;
@@ -175,6 +285,7 @@ export default {
       return true;
     },
     handleUploadSuccess(res, file) {
+      debugger
       // 如果上传成功
       if (res.code == 200) {
         // 获取富文本组件实例
@@ -189,9 +300,50 @@ export default {
         this.$message.error("图片插入失败");
       }
     },
+    handleUploadSuccessVideo(res, file) {
+      // 如果上传成功
+      if (res.code == 200) {
+        // 获取富文本组件实例
+        let quill = this.Quill;
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "video", process.env.VUE_APP_BASE_API + res.fileName);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("视频插入失败");
+      }
+    },
+    handleUploadSuccessFile(res, file) {
+      // 如果上传成功
+      if (res.code == 200) {
+        // 获取富文本组件实例
+        let quill = this.Quill;
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入文件  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "link", 
+          {
+            href: process.env.VUE_APP_BASE_API + res.fileName, 
+            innerText: res.originalFilename
+          },
+        );
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("文件插入失败");
+      }
+    },
     handleUploadError() {
       this.$message.error("图片插入失败");
     },
+    handleUploadErrorVideo() {
+      this.$message.error("视频插入失败");
+    },
+    handleUploadErrorFile() {
+      this.$message.error("文件插入失败");
+    },
   },
 };
 </script>
@@ -204,6 +356,12 @@ export default {
 .quill-img {
   display: none;
 }
+.ql-align-right{
+  text-align: right;
+}
+.ql-align-center{
+  text-align: center;
+}
 .ql-snow .ql-tooltip[data-mode="link"]::before {
   content: "请输入链接地址:";
 }
@@ -223,14 +381,38 @@ export default {
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
   content: "10px";
 }
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+  content: "14px";
+}
+.ql-size-14px {
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
+  content: "16px";
+}
+.ql-size-16px {
+  font-size: 16px;
+}
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
   content: "18px";
 }
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
+  content: "20px";
+}
+.ql-size-20px {
+  font-size: 20px;
+}
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
   content: "32px";
 }
+
+
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
@@ -271,4 +453,9 @@ export default {
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";
 }
+.ql-video {
+  width: 100%;
+  height: 425px;
+}
 </style>
+

oa-ui/src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2024-01-03 09:23:11
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-07-16 09:50:08
+ * @LastEditTime: 2024-07-16 15:17:54
 -->
 
 <template>
@@ -59,9 +59,9 @@
         </div>
       </el-col>
       <el-col :span="16" :xs="24">
-        <div class="header">公告</div>
+        <div class="header">通知公示</div>
         <div class="notice-content">
-          <el-table v-loading="noticeLoading" :data="noticeList" height="320px" @row-click="handleRowClick">
+          <el-table v-loading="noticeLoading" :data="noticeList" height="320px">
             <!-- <el-table-column label="序号" align="center" prop="noticeId" width="100" /> -->
             <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
               <template slot-scope="scope">
@@ -75,6 +75,12 @@
                 <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="操作" width="90" align="center">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-view"
+                  @click="handleRowClick(scope.row)">查看详情</el-button>
+              </template>
+            </el-table-column>
           </el-table>
           <div style="text-align: right;margin-top: 20px;">
             <el-pagination @current-change="getNotice" :current-page.sync="noticeQueryParams.pageNum"
@@ -92,9 +98,9 @@
       </el-col> -->
     </el-row>
 
-    <el-dialog title="" :visible.sync="noticeOpen" width="65%" append-to-body>
+    <el-dialog title="" :visible.sync="noticeOpen" width="750px" append-to-body>
       <h2 class="text-center">{{ clickNotice.noticeTitle }}</h2>
-      <div v-html="clickNotice.noticeContent"></div>
+      <div class="pre-formatted" v-html="clickNotice.noticeContent"></div>
     </el-dialog>
   </div>
 </template>
@@ -123,7 +129,7 @@ export default {
   },
   data() {
     return {
-      noticeOpen:false,
+      noticeOpen: false,
       times: new Date(),
       user: {
         dept: {}
@@ -133,7 +139,7 @@ export default {
       projectData: [],
       noticeList: [],// 公告表格数据
       noticeTotal: 0,
-      clickNotice:{},
+      clickNotice: {},
       noticeLoading: true,
       noticeQueryParams: {
         pageNum: 1,
@@ -156,7 +162,7 @@ export default {
           bgColor: '#785aee',
           boxShadow: '0 5px 20px rgba(120,90,238,0.5)',
           path: '/task/process',
-          privilege:['system:deployment:add']
+          privilege: ['system:deployment:add']
         }, {
           id: 2,
           name: '待办任务',
@@ -164,7 +170,7 @@ export default {
           bgColor: '#e66794',
           boxShadow: '0 5px 20px rgba(230,103,148,0.5)',
           path: '/task/todo',
-          privilege:['system:deployment:add']
+          privilege: ['system:deployment:add']
         }, {
           id: 3,
           name: '已办任务',
@@ -172,7 +178,7 @@ export default {
           bgColor: '#6389f4',
           boxShadow: '0 5px 20px rgba(99,137,244,0.5)',
           path: '/task/finished',
-          privilege:['system:deployment:add']
+          privilege: ['system:deployment:add']
         }, {
           id: 4,
           name: '项目台账',
@@ -180,7 +186,7 @@ export default {
           bgColor: '#e64c56',
           boxShadow: '0 5px 20px rgba(230,76,86,0.5)',
           path: '/product/account/project',
-          privilege:['oa:project:query']
+          privilege: ['oa:project:query']
         }, {
           id: 5,
           name: '车辆管理',
@@ -188,7 +194,7 @@ export default {
           bgColor: '#eeb62f',
           boxShadow: '0 5px 20px rgba(238,182,47,0.5)',
           path: '/oa/car/index',
-          privilege:['oa:car:list']
+          privilege: ['oa:car:list']
         }, {
           id: 6,
           name: '设备管理',
@@ -196,7 +202,7 @@ export default {
           bgColor: '#0be1bd',
           boxShadow: '0 5px 20px rgba(11,225,189,0.5)',
           path: '/oa/device/equipment',
-          privilege:['oa:device:list']
+          privilege: ['oa:device:list']
         }, {
           id: 7,
           name: '投标管理',
@@ -204,7 +210,7 @@ export default {
           bgColor: '#F7C59F',
           boxShadow: '0 5px 20px rgba(247,197,159,0.5)',
           path: '/business/tender',
-          privilege:['oa:tender:query']
+          privilege: ['oa:tender:query']
         }, {
           id: 8,
           name: '人事管理',
@@ -212,8 +218,8 @@ export default {
           bgColor: '#20B2AA',
           boxShadow: '0 5px 20px rgba(32,178,170,0.5)',
           path: '/oa/staff/people',
-          privilege:['oa:salary:list']
-        }, 
+          privilege: ['oa:salary:list']
+        },
         // {
         //   id: 9,
         //   name: '预算管理',
@@ -300,15 +306,33 @@ export default {
         return null
       }
     },
-    handleRowClick(row){
-      console.log(row);
+    handleRowClick(row) {
       this.clickNotice = row;
+      this.clickNotice.noticeContent = this.format(row.noticeContent);
       this.noticeOpen = true;
+    },
+    format(html) {
+      var GRT = [
+        // img 样式
+        ['img', "max-width:100%;height:auto;"],
+      ];
+      for (let i = 0; i < GRT.length; i++) {
+        html = html.replace(new RegExp('<' + GRT[i][0] + '>|<' + GRT[i][0] + ' (.*?)>', 'gi'), function (word) {
+          // 分析 dom 上是否带有 style=""
+          if (word.indexOf('style=') != -1) {
+            var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
+            return word.replace(regIn, '<' + GRT[i][0] + '$1style="$2 ' + GRT[i][1] + '"$3$4>');
+          } else {
+            var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
+            return word.replace(regIn, '<' + GRT[i][0] + '$1 style="' + GRT[i][1] + '$2">');
+          }
+        });
+      }
+      return html;
     }
   }
 }
 </script>
-
 <style scoped lang="scss">
 .home {
   padding: 20px 40px;
@@ -419,6 +443,23 @@ export default {
   border-radius: 15px;
 }
 
+.pre-formatted {
+  white-space: pre-wrap;
+  /* css-2.1, curent FF, Opera, Safari */
+  word-wrap: break-word;
+
+  /* Internet Explorer 5.5+ */
+  p {
+    width: 100% !important;
+    height: 100% !important;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 ::v-deep .el-calendar-table .el-calendar-day {
   height: 39px;
   text-align: center;