广播内容页面-优化富文本框，表单验证

src/components/broadcastContent/index.vue

@@ -148,7 +148,7 @@
         <el-button
           type="primary"
           size="mini"
-          @click="dialogFormVisible = true;form = {}"
+          @click="handleAdd"
         >添加广播</el-button>
       </el-col>
       <el-col :span="5">
@@ -449,13 +449,14 @@
             action="#"
             :auto-upload="false"
             :show-file-list="false"
-            :on-change="uploadSuccessVoice2"
+            :on-change="uploadSuccessVoice"
           >
             <el-button
               size="small"
               type="primary"
             >点击上传
             </el-button>
+
             <div class="avatar">
               <div v-if="form.extraFile">{{form.extraFile}}</div>
               <audio
@@ -475,47 +476,11 @@
           label="播发内容"
           prop="content"
         >
-          <!-- 上传组件辅助-->
-          <el-upload
-            class="avatar-uploader-editor-voice"
-            action="#"
-            :auto-upload="false"
-            :show-file-list="false"
-            :on-change="uploadSuccessVoice"
-          > </el-upload>
-
           <quill-editor
             v-model="form.content"
-            ref="myQuillEditor"
-            style="height: 100px;margin-top: -22px;"
+            style="height: 100px"
             :options="editorOption"
           >
-            <div
-              id="toolbar"
-              slot="toolbar"
-            >
-              <button
-                class="ql-bold"
-                title="加粗"
-              >Bold</button>
-              <button
-                class="ql-italic"
-                title="斜体"
-              >Italic</button>
-              <button
-                class="ql-underline"
-                title="下划线"
-              >underline</button>
-              <button
-                class="ql-strike"
-                title="删除线"
-              >strike</button>
-
-              <button
-                class="ql-clean"
-                title="清除字体样式"
-              ></button>
-            </div>
           </quill-editor>
 
         </el-form-item>
@@ -595,7 +560,7 @@
             action="#"
             :auto-upload="false"
             :show-file-list="false"
-            :on-change="uploadSuccessVoice2"
+            :on-change="uploadSuccessVoice"
           >
             <el-button
               size="small"
@@ -621,52 +586,11 @@
           label="播发内容"
           prop="content"
         >
-          <!-- 上传组件辅助-->
-          <el-upload
-            class="avatar-uploader-editor-voice"
-            action="#"
-            :auto-upload="false"
-            :show-file-list="false"
-            :on-change="uploadSuccessVoice"
-          > </el-upload>
-
           <quill-editor
             v-model="form.content"
-            ref="myQuillEditor"
-            style="height: 100px;margin-top: -22px;"
+            style="height: 100px"
             :options="editorOption"
           >
-            <div
-              id="toolbar"
-              slot="toolbar"
-            >
-              <button
-                class="ql-bold"
-                title="加粗"
-              >Bold</button>
-              <button
-                class="ql-italic"
-                title="斜体"
-              >Italic</button>
-              <button
-                class="ql-underline"
-                title="下划线"
-              >underline</button>
-              <button
-                class="ql-strike"
-                title="删除线"
-              >strike</button>
-
-              <button
-                class="ql-clean"
-                title="清除字体样式"
-              ></button>
-
-              <!-- <button
-                class="ql-audio"
-                title="上传音频"
-              ><i class="el-icon-microphone"></i></button> -->
-            </div>
           </quill-editor>
         </el-form-item>
 
@@ -688,37 +612,11 @@
 
 <script>
 // 引入富文本编辑框和样式
-import { quillEditor, Quill } from "vue-quill-editor";
+import { quillEditor } from "vue-quill-editor";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 
-// 自定义字体大小
-let Size = Quill.import("attributors/style/size");
-Size.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px", "30px"];
-Quill.register(Size, true);
-
-// 自定义字体类型
-var fonts = [
-  "SimSun",
-  "SimHei",
-  "Microsoft-YaHei",
-  "KaiTi",
-  "FangSong",
-  "Arial",
-  "Times-New-Roman",
-  "sans-serif",
-  "宋体",
-  "黑体",
-];
-var Font = Quill.import("formats/font");
-Font.whitelist = fonts;
-Quill.register(Font, true);
-
-//音频标签插入 （样式保持宽度100%）
-import Audio from "./audio.js";
-Quill.register(Audio, true);
-
 export default {
   name: "broadcastContent",
   components: { quillEditor },
@@ -749,6 +647,17 @@ export default {
         extraFileShowUrl: "", //广播音频
         extraFile: "", //广播音频名称
       },
+      // 重置表单
+      temForm: {
+        content: "",
+        address: "",
+        broadcastType: "",
+        messageType: "",
+        playTime: "",
+        title: "",
+        extraFileShowUrl: "",
+        extraFile: "",
+      },
       // 验证规则
       rules: {
         content: [{ required: true, message: "请输入内容", trigger: "blur" }],
@@ -773,23 +682,12 @@ export default {
       // 富文本自定义
       editorOption: {
         placeholder: "请输入内容",
-        theme: "snow",
         modules: {
-          toolbar: {
-            container: "#toolbar",
-            handlers: {
-              audio: function (value) {
-                if (value) {
-                  // 触发input框选择音频文件
-                  document
-                    .querySelector(".avatar-uploader-editor-voice input")
-                    .click();
-                } else {
-                  this.quill.format("audio", false);
-                }
-              },
-            },
-          },
+          toolbar: [
+            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
+            [{ indent: "-1" }, { indent: "+1" }], // 缩进
+            ["clean"], //清除字体样式
+          ],
         },
       },
     };
@@ -847,6 +745,14 @@ export default {
         this.$message.error("获取应急广播调度统计信息失败");
       }
     },
+    // 添加按钮回调
+    handleAdd() {
+      this.form = this.temForm;
+      this.dialogFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs.form.resetFields();
+      });
+    },
     // 添加广播
     addBroadcast(formName) {
       this.$refs[formName].validate(async (valid) => {
@@ -986,56 +892,8 @@ export default {
       this.curPage = 1;
       this.getData();
     },
-    //上传音频 处理很重要
+    //上传音频
     async uploadSuccessVoice(file) {
-      // 上传前限制文件大小
-      const isMp3 = file.raw.type === "audio/mpeg";
-
-      const isLt30M = file.size / 1024 / 1024 < 30;
-
-      if (!isMp3 || !isLt30M) {
-        this.$message.error("上传音频只能是 Mp3 格式，且不能超过 30MB!");
-      } else {
-        let quill = this.$refs.myQuillEditor.quill;
-        let formData = new FormData();
-        formData.append("file", file.raw);
-        let res = await this.$axios({
-          url: "/diseaseRight/file/imageUpload",
-          method: "post",
-          data: formData,
-          headers: {
-            "Admin-Token": sessionStorage.getItem("token"),
-          },
-        });
-        // console.log(res);
-        if (res.data.success) {
-          this.$message.success("音频插入成功");
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
-          let BlockEmbed = Quill.import("blots/block/embed");
-          class AudioBlot extends BlockEmbed {
-            static create(value) {
-              let node = super.create();
-              node.setAttribute("src", res.data.data.showUrl); //设置audio的src属性
-              node.setAttribute("controls", true); //设置audio的controls，否则他将不会显示
-              node.setAttribute("controlsList", "nodownload"); //设置audio的下载功能为不能下载
-              node.setAttribute("id", "voice"); //设置一个id
-              return node;
-            }
-          }
-          AudioBlot.blotName = "audio";
-          AudioBlot.tagName = "audio"; //自定义的标签为audio
-          Quill.register(AudioBlot);
-
-          // insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
-          quill.insertEmbed(length, "audio", res.data.data.showUrl);
-          quill.setSelection(length + 1); //光标位置向后移动一位
-        } else {
-          this.$message.error("音频插入失败");
-        }
-      }
-    },
-    async uploadSuccessVoice2(file) {
       const loading = this.$loading({
         lock: true,
         text: "上传中",