增加音频上传功能

src/components/broadcastContent/index.vue

@@ -148,7 +148,7 @@
         <el-button
           type="primary"
           size="mini"
-          @click="dialogFormVisible = true;form = {};"
+          @click="dialogFormVisible = true;form = {}"
         >添加广播</el-button>
       </el-col>
       <el-col :span="5">
@@ -391,7 +391,7 @@
       title="添加广播"
       :visible.sync="dialogFormVisible"
       center
-      top="6vh"
+      top="5vh"
     >
       <el-form
         :model="form"
@@ -441,17 +441,47 @@
         </el-form-item>
 
         <el-form-item
+          label="播发音频"
+          prop="extraFileShowUrl"
+        >
+          <el-upload
+            class="upload-demo"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="uploadSuccessVoice2"
+          >
+            <el-button
+              size="small"
+              type="primary"
+            >点击上传
+            </el-button>
+            <div class="avatar">
+              <div v-if="form.extraFile">{{form.extraFile}}</div>
+              <audio
+                controls="controls"
+                v-if="form.extraFileShowUrl"
+                :src="form.extraFileShowUrl"
+              ></audio>
+            </div>
+            <div
+              slot="tip"
+              class="el-upload__tip"
+            >只能上传mp3文件,且不超过30M</div>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item
           label="播发内容"
           prop="content"
         >
           <!-- 上传组件辅助-->
           <el-upload
             class="avatar-uploader-editor-voice"
-            :action="serverUrl"
-            name="voice"
+            action="#"
+            :auto-upload="false"
             :show-file-list="false"
-            :on-success="uploadSuccessVoice"
-            :on-error="uploadError"
+            :on-change="uploadSuccessVoice"
           > </el-upload>
 
           <quill-editor
@@ -485,15 +515,11 @@
                 class="ql-clean"
                 title="清除字体样式"
               ></button>
-
-              <button
-                class="ql-audio"
-                title="上传音频"
-              ><i class="el-icon-microphone"></i></button>
             </div>
           </quill-editor>
 
         </el-form-item>
+
       </el-form>
       <div
         slot="footer"
@@ -512,7 +538,7 @@
       title="修改广播"
       :visible.sync="dialogFormVisible2"
       center
-      top="6vh"
+      top="3vh"
     >
       <el-form
         :model="form"
@@ -561,13 +587,87 @@
         </el-form-item>
 
         <el-form-item
+          label="播发音频"
+          prop="extraFileShowUrl"
+        >
+          <el-upload
+            class="upload-demo"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="uploadSuccessVoice2"
+          >
+            <el-button
+              size="small"
+              type="primary"
+            >点击上传
+            </el-button>
+            <div class="avatar">
+              <div v-if="form.extraFile">{{form.extraFile}}</div>
+              <audio
+                controls="controls"
+                v-if="form.extraFileShowUrl"
+                :src="form.extraFileShowUrl"
+              ></audio>
+            </div>
+            <div
+              slot="tip"
+              class="el-upload__tip"
+            >只能上传mp3文件,且不超过30M</div>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item
           label="播发内容"
           prop="content"
         >
-          <!-- <vue-editor
-            :editorToolbar="customToolbar"
+          <!-- 上传组件辅助-->
+          <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"
-          ></vue-editor> -->
+            ref="myQuillEditor"
+            style="height: 100px;margin-top: -22px;"
+            :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>
 
       </el-form>
@@ -615,7 +715,7 @@ var Font = Quill.import("formats/font");
 Font.whitelist = fonts;
 Quill.register(Font, true);
 
-//音频标签插入
+//音频标签插入 （样式保持宽度100%）
 import Audio from "./audio.js";
 Quill.register(Audio, true);
 
@@ -646,6 +746,8 @@ export default {
         messageType: "", //消息类型
         playTime: "", //播发时间
         title: "", //广播概括
+        extraFileShowUrl: "", //广播音频
+        extraFile: "", //广播音频名称
       },
       // 验证规则
       rules: {
@@ -661,14 +763,17 @@ export default {
         playTime: [
           { required: true, message: "请选择播发时间", trigger: "change" },
         ],
+        extraFileShowUrl: [
+          { required: true, message: "请选择播发音频", trigger: "change" },
+        ],
       },
       curPage: 1, // 当前页
       pageSize: 4, // 每页记录数
       totalCount: null, // 总条数
-      fullscreenLoading: false,
-      actionUrl: "",
+      // 富文本自定义
       editorOption: {
-        placeholder: "请输入",
+        placeholder:
+          "请输入内容,如需插入音频,请不要在上传音频时做其他操作，并在提示音频插入成功后再提交",
         theme: "snow",
         modules: {
           toolbar: {
@@ -688,13 +793,11 @@ export default {
           },
         },
       },
-      serverUrl: "", //上传的图片服务器地址
     };
   },
   mounted() {
     this.getData();
     this.getBroadcastInfo();
-    // this.editorOption.initVoiceButton();
   },
   methods: {
     // 获取广播播发记录列表
@@ -709,7 +812,7 @@ export default {
         method: "get",
         params,
       });
-      //   console.log(res);
+      // console.log(res);
       if (res.data.success) {
         this.tableData = res.data.data.recordPage.list;
         this.totalCount = res.data.data.recordPage.totalCount;
@@ -758,7 +861,7 @@ export default {
             },
             data: this.form,
           });
-          //   console.log(res);
+          // console.log(res);
           if (res.data.success) {
             this.getData();
             this.$message.success("添加成功!");
@@ -773,6 +876,7 @@ export default {
     },
     // 修改广播
     amendBroadcast(row) {
+      // console.log(row);
       this.dialogFormVisible2 = true;
       this.form = { ...row };
     },
@@ -883,90 +987,96 @@ export default {
       this.curPage = 1;
       this.getData();
     },
-    beforeUpload(file) {
-      // file.type好像只能返回图片的格式，其他的将会是 ""， 所以需要自己获取后缀名判断文件格式
-      let pointIndex = file.name.lastIndexOf(".");
-      let fileType = file.name.substring(pointIndex + 1); //获取到文件后缀名
-      // if (fileType !== 'mp3' && fileType !== 'ogg' && fileType !== 'wav') {
-      if (fileType !== "mp3" && fileType !== "ogg") {
-        this.$message.error("你选择的文件不是音频哦，仅支持mp3和ogg格式");
-        return false;
-      }
-    },
-    uploadIng() {
-      //上传时显示loading
-      this.fullscreenLoading = true;
-    },
-    handleSuccess(res, file, fileList) {
-      this.fullscreenLoading = false;
-      // 获取富文本组件实例
-      let quill = this.$refs.myTextEditor.quill;
-      if (res.code === 0) {
-        // 如果上传成功
-        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", value.url); //设置audio的src属性
-            node.setAttribute("controls", true); //设置audio的controls，否则他将不会显示
-            node.setAttribute("controlsList", "nodownload"); //设置audio的下载功能为不能下载
-            node.setAttribute("id", "voice"); //设置一个id
-            return node;
-          }
+    //上传音频 处理很重要
+    async uploadSuccessVoice(file) {
+      // 上传前限制文件大小
+      const isMp3 = file.raw.type === "audio/mpeg";
 
-          // static value(node) {
-          //   return {
-          //     url: node.getAttribute('src')
-          //   };
-          // }
-        }
-        AudioBlot.blotName = "audio";
-        AudioBlot.tagName = "audio"; //自定义的标签为audio
-        Quill.register(AudioBlot);
+      const isLt30M = file.size / 1024 / 1024 < 30;
 
-        // insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
-        quill.insertEmbed(length, "audio", { url: res.data.url }, "api");
-        quill.setSelection(length + 1); //光标位置向后移动一位
+      if (!isMp3 || !isLt30M) {
+        this.$message.error("上传音频只能是 Mp3 格式，且不能超过 30MB!");
       } else {
-        this.$message.error(res.msg); // 上传失败，提示错误信息
+        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: "上传中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      // setTimeout(() => {
+      //   loading.close();
+      // }, 2000);
+      // 上传前限制文件大小
+      const isMp3 = file.raw.type === "audio/mpeg";
 
-    //上传音频-处理很重要！！！！
-    uploadSuccessVoice(res, file) {
-      let quill = this.$refs.myQuillEditor.quill;
-      // 如果上传成功
-      if (res.code == 0) {
-        // 获取光标所在位置
-        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.url); //设置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);
+      const isLt30M = file.size / 1024 / 1024 < 30;
 
-        // insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
-        quill.insertEmbed(length, "audio", res.data.url);
-        quill.setSelection(length + 1); //光标位置向后移动一位
+      if (!isMp3 || !isLt30M) {
+        loading.close();
+        this.$message.error("上传音频只能是 Mp3 格式，且不能超过 30MB!");
       } else {
-        this.$message.error("音频插入失败");
+        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) {
+          // 响应式添加image的值
+          this.$set(this.form, "extraFileShowUrl", res.data.data.showUrl);
+          this.$set(this.form, "extraFile", res.data.data.imageName);
+          this.$message.success("音频上传成功");
+        } else {
+          this.$message.error("音频上传失败");
+        }
+        loading.close();
       }
     },
-    // 富文本图片/视频/音频上传失败
-    uploadError() {
-      this.$message.error("上传失败");
-    },
   },
 };
 </script>
@@ -1016,4 +1126,10 @@ export default {
 .avatar-uploader-editor-voice {
   display: inline-block;
 }
+.avatar {
+  margin-top: 5px;
+  width: 200px;
+  height: 12px;
+  display: block;
+}
 </style>

src/components/systemSetup/index.vue

@@ -37,7 +37,7 @@
           size="small"
           @click="showInput"
         >{{inputValue}}</el-button>
-        秒
+        分钟
       </el-col>
     </el-row>
   </div>
@@ -48,16 +48,20 @@ export default {
   name: "",
   data() {
     return {
-      inputVisible: false,
-      inputValue: "",
+      inputVisible: false, //输入框和按钮切换控制
+      inputValue: "", //输入框绑定数据
+      id: "", //修改id
     };
   },
+  mounted() {
+    this.getData();
+  },
   methods: {
     // 失去焦点或者回车 切换回按钮框 并更新数据
     handleInputConfirm() {
       this.inputVisible = false;
       this.inputValue = this.inputValue;
-      // this.reDisposeData();
+      this.amendData();
     },
     // 点击按钮 切换输入框 并聚焦
     showInput() {
@@ -66,67 +70,49 @@ export default {
         this.$refs.saveTagInput.$refs.input.focus();
       });
     },
-    // 获取应急处置信息
-    async getDisposeData() {
-      // let res = await this.$axios({
-      //   url: "/diseaseRight/emergencyDisposalStatistics/info",
-      //   method: "get",
-      //   headers: {
-      //     "Admin-Token": sessionStorage.getItem("token"),
-      //   },
-      // });
+    // 获取 管理端推送时间间隔 信息
+    async getData() {
+      let res = await this.$axios({
+        url: "/diseaseRight/warningOfSmokeRecord/setting/info",
+        method: "get",
+      });
       // console.log(res);
-      // if (res.status == 200) {
-      //   this.inputValue1 = res.data.data.numOfPutOutTheFire;
-      //   this.inputValue2 = res.data.data.numOfTransfer;
-      //   this.inputValue3 = res.data.data.numOfCure;
-      //   this.inputValue4 = res.data.data.numOfImportantTarget;
-      //   this.inputValue5 = res.data.data.numOfPublicSecurity;
-      //   this.inputValue6 = res.data.data.numOfInfo;
-      //   this.inputValue7 = res.data.data.numOfAftermath;
-      //   this.inputValue8 = res.data.data.numOfFireClean;
-      //   this.inputValue9 = res.data.data.numOfSmoke;
-      // } else {
-      //   console.log("获取 应急处置信息 请求失败");
-      // }
+      if (res.data.success) {
+        this.inputValue = res.data.data.pushFrequency / 60;
+        this.id = res.data.data.id;
+      } else {
+        console.log("获取 管理端推送时间间隔 请求失败");
+      }
     },
-    // 修改应急处置信息
-    async reDisposeData() {
-      // let data = {
-      //   id: 1,
-      //   numOfPutOutTheFire: this.inputValue1,
-      //   numOfTransfer: this.inputValue2,
-      //   numOfCure: this.inputValue3,
-      //   numOfImportantTarget: this.inputValue4,
-      //   numOfPublicSecurity: this.inputValue5,
-      //   numOfInfo: this.inputValue6,
-      //   numOfAftermath: this.inputValue7,
-      //   numOfFireClean: this.inputValue8,
-      //   numOfSmoke: this.inputValue9,
-      // };
-      // let res = await this.$axios({
-      //   url: "/diseaseRight/emergencyDisposalStatistics/update",
-      //   method: "put",
-      //   data: data,
-      //   headers: {
-      //     "Admin-Token": sessionStorage.getItem("token"),
-      //   },
-      // });
+    // 修改 管理端推送时间间隔
+    async amendData() {
+      let data = {
+        id: this.id,
+        pushFrequency: this.inputValue * 60,
+      };
+      let res = await this.$axios({
+        url: "/diseaseRight/warningOfSmokeRecord/setting/update",
+        method: "put",
+        data,
+        headers: {
+          "Admin-Token": sessionStorage.getItem("token"),
+        },
+      });
       // console.log(res);
-      // if (res.data.success) {
-      //   this.$message({
-      //     showClose: true,
-      //     message: "修改成功",
-      //     type: "success",
-      //   });
-      // } else {
-      //   this.$message({
-      //     showClose: true,
-      //     message: "修改失败",
-      //     type: "error",
-      //   });
-      //   this.getDisposeData();
-      // }
+      if (res.data.success) {
+        this.$message({
+          showClose: true,
+          message: "修改成功",
+          type: "success",
+        });
+      } else {
+        this.$message({
+          showClose: true,
+          message: "修改失败",
+          type: "error",
+        });
+      }
+      this.getData();
     },
   },
 };

src/main.js

@@ -9,7 +9,7 @@ import Axios from "axios"
 // element - ui按需引入
 import {
 	Row, Col, Upload, Button, Select, Input, Menu, MenuItem, Form, FormItem, DatePicker, Table, TableColumn, Pagination, Dialog, Option, Message, MessageBox, Tabs,
-	TabPane, Card, TimePicker,
+	TabPane, Card, TimePicker, Loading,
 } from 'element-ui';
 
 // 注册使用element - ui组件
@@ -33,7 +33,9 @@ Vue.use(Tabs)
 Vue.use(TabPane)
 Vue.use(Card)
 Vue.use(TimePicker)
+Vue.use(Loading.directive);
 
+Vue.prototype.$loading = Loading.service;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$message = Message;