修改

src/components/Editor/index.vue

@@ -1,19 +1,22 @@
 <template>
   <div>
-    <el-upload
+    <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"
-      :action="uploadUrl"
+      :on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" style="display: none"
-      :before-upload="handleBeforeUpload"
+      ref="upload" v-if="this.type == 'url'">
-      :on-success="handleUploadSuccess"
-      :on-error="handleUploadError"
-      name="file"
-      :show-file-list="false"
-      :headers="headers"
-      style="display: none"
-      ref="upload"
-      v-if="this.type == 'url'"
-    >
     </el-upload>
     <div class="editor" ref="editor" :style="styles"></div>
+    <el-dialog title="视频" :visible.sync="dialogFormVisible" style="text-align: center;" append-to-body>
+      <el-upload class="upload-demo" drag :action="videouploadUrl" multiple :headers="headers" :data="videotype"
+        v-if="dialogFormVisible" :before-upload="onBeforeUploadVideo" :on-success="onSuccessVideo"
+        :on-error="onErrorVideo">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过10M</div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -23,7 +26,8 @@ import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import { getToken } from "@/utils/auth";
-
+import Video from "@/utils/quillVideo";
+Quill.register(Video, true);
 export default {
   name: "Editor",
   props: {
@@ -60,30 +64,45 @@ export default {
   },
   data() {
     return {
+      videotype: {
+        type: 'commonVideoUrl'
+      },
       uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      videouploadUrl: process.env.VUE_APP_BASE_API + "/manage/file/uploadFile",  // 上传地址
       headers: {
         Authorization: "Bearer " + getToken()
       },
       Quill: null,
+      getindex: 0,
       currentValue: "",
+      dialogFormVisible: false,
       options: {
         theme: "snow",
         bounds: document.body,
         debug: "warn",
         modules: {
           // 工具栏配置
-          toolbar: [
+          toolbar: {
-            ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
+            container: [
-            ["blockquote", "code-block"],                    // 引用  代码块
+              ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
-            [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
+              ["blockquote", "code-block"],                    // 引用  代码块
-            [{ indent: "-1" }, { indent: "+1" }],            // 缩进
+              [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
-            [{ size: ["small", false, "large", "huge"] }],   // 字体大小
+              [{ indent: "-1" }, { indent: "+1" }],            // 缩进
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
+              [{ size: ["small", false, "large", "huge"] }],   // 字体大小
-            [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
+              [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
-            [{ align: [] }],                                 // 对齐方式
+              [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
-            ["clean"],                                       // 清除文本格式
+              [{ align: [] }],                                 // 对齐方式
-            ["link", "image", "video"]                       // 链接、图片、视频
+              ["clean"],                                       // 清除文本格式
-          ],
+              ["link", "image", "video"]                       // 链接、图片、视频
+            ],
+            handlers: {
+              // 点击上传视频阻止默认上传替换成自定义上传
+              video: () => {
+                this.getindex = this.Quill.getSelection().index
+                this.dialogFormVisible = true;
+              },
+            },
+          },
         },
         placeholder: "请输入内容",
         readOnly: this.readOnly,
@@ -186,21 +205,63 @@ export default {
     handleUploadError() {
       this.$message.error("图片插入失败");
     },
+    // el-文件上传组件
+    onBeforeUploadVideo(file) {
+      let acceptArr = ["video/mp4"];
+      const isVideo = acceptArr.includes(file.type);
+      const isLt1M = file.size / 1024 / 1024 < 30;
+      if (!isVideo) {
+        this.$message.error("只能上传mp4格式文件!");
+      }
+      if (!isLt1M) {
+        this.$message.error(`上传文件大小不能超过 30MB!`);
+      }
+      return isLt1M && isVideo;
+    },
+    // 文件上传成功时的钩子
+    onSuccessVideo(res) {
+      if (res.code === 200) {
+        this.insertVideoLink(process.env.VUE_APP_BASE_API + res.imgUrl);
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    // 文件上传失败时的钩子
+    onErrorVideo() {
+      this.$message.error("上传失败");
+    },
+    // 插入视频
+    insertVideoLink(videoLink) {
+      if (!videoLink) return this.$message.error("视频地址不能为空！");
+      this.dialogFormVisible = false;
+      // 获取富文本
+      let range = this.getindex;
+      // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null
+      let index = range ? range : 0;
+      // 在光标所在位置 插入视频
+      this.Quill.insertEmbed(index, "video", { url: videoLink, poster: 'https://7up.pics/images/2024/01/23/101sh.png' });
+      // 调整光标到最后
+      this.Quill.setSelection(index + 1);
+    },
   },
 };
 </script>
 
 <style>
-.editor, .ql-toolbar {
+.editor,
+.ql-toolbar {
   white-space: pre-wrap !important;
   line-height: normal !important;
 }
+
 .quill-img {
   display: none;
 }
+
 .ql-snow .ql-tooltip[data-mode="link"]::before {
   content: "请输入链接地址:";
 }
+
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   border-right: 0px;
   content: "保存";
@@ -215,14 +276,17 @@ export default {
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .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="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="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
   content: "32px";
@@ -232,26 +296,32 @@ export default {
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
   content: "标题1";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
   content: "标题2";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
   content: "标题3";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
   content: "标题4";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
   content: "标题5";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
   content: "标题6";
@@ -261,10 +331,12 @@ export default {
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: "标准字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
   content: "衬线字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";

src/utils/quillVideo.js

@@ -0,0 +1,72 @@
+// 这是 utils/quillVideo
+
+import Quill from "quill";
+// 源码中是import直接倒入，这里要用Quill.import引入
+const BlockEmbed = Quill.import("blots/block/embed");
+const Link = Quill.import("formats/link");
+
+const ATTRIBUTES = ["height", "width"];
+
+class Video extends BlockEmbed {
+    static create(value) {
+        const node = super.create();
+        // 添加video标签所需的属性
+        node.setAttribute('style', 'object-fit:fill;width: 30%;')
+        node.setAttribute('preload', 'auto')    // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频
+        // node.setAttribute('playsinline', 'true')
+        // node.setAttribute('x-webkit-airplay', 'allow')
+        // node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性
+        // node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏
+        // node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放
+        node.setAttribute('x5-video-player-fullscreen', 'true')    // 全屏设置，设置为 true 是防止横屏
+        node.setAttribute('controlsList', 'nofullscreen') // 控制删除
+
+        node.setAttribute("poster", value.poster); // 视频封面
+        node.setAttribute("controls", "controls");
+        node.setAttribute("type", "video/mp4");
+        node.setAttribute("src", this.sanitize(value.url));
+        return node;
+    }
+
+    static formats(domNode) {
+        return ATTRIBUTES.reduce((formats, attribute) => {
+            if (domNode.hasAttribute(attribute)) {
+                formats[attribute] = domNode.getAttribute(attribute);
+            }
+            return formats;
+        }, {});
+    }
+
+    static sanitize(url) {
+        return Link.sanitize(url);
+    }
+
+    static value(domNode) {
+        return {
+            url: domNode.getAttribute("src"),
+            poster: domNode.getAttribute('poster'),
+        }
+    }
+
+    format(name, value) {
+        if (ATTRIBUTES.indexOf(name) > -1) {
+            if (value) {
+                this.domNode.setAttribute(name, value);
+            } else {
+                this.domNode.removeAttribute(name);
+            }
+        } else {
+            super.format(name, value);
+        }
+    }
+
+    html() {
+        const { video } = this.value();
+        return `<a href="${video}">${video}</a>`;
+    }
+}
+Video.blotName = "video"; // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
+Video.className = "ql-video";
+Video.tagName = "video"; // 用video标签替换iframe
+
+export default Video;

src/views/manage/propaganda/index.vue

@@ -2,55 +2,25 @@
   <div class="app-container" ref="layout">
     <el-row :gutter="20">
       <el-col :span="5">
-        <DepartmentList
+        <DepartmentList ref="DepartmentList" @clickdepartment="clickdepartment" :methods="'selectNumByDept'">
-          ref="DepartmentList"
-          @clickdepartment="clickdepartment"
-          :methods="'selectNumByDept'"
-        >
         </DepartmentList>
       </el-col>
       <el-col :span="19" :xs="24">
         <div ref="topform" class="form">
-          <el-form
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-            :model="queryParams"
+            label-width="68px">
-            ref="queryForm"
-            size="small"
-            :inline="true"
-            v-show="showSearch"
-            label-width="68px"
-          >
             <el-form-item label="创建时间" prop="">
-              <el-date-picker
+              <el-date-picker v-model="queryParams.createTimeStart" type="date" value-format="yyyy-MM-dd"
-                v-model="queryParams.createTimeStart"
+                placeholder="选择日期" @change="changecreateTimeStart" :picker-options="pickerStartTime">
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="选择日期"
-                @change="changecreateTimeStart"
-                :picker-options="pickerStartTime"
-              >
               </el-date-picker>
               -
-              <el-date-picker
+              <el-date-picker v-model="queryParams.createTimeEnd" type="date" value-format="yyyy-MM-dd"
-                v-model="queryParams.createTimeEnd"
+                placeholder="选择日期" @change="changecreateTimeEnd" :picker-options="pickerEndTime">
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="选择日期"
-                @change="changecreateTimeEnd"
-                :picker-options="pickerEndTime"
-              >
               </el-date-picker>
             </el-form-item>
             <el-form-item label="宣教类型" prop="propagandaType">
-              <el-select
+              <el-select v-model="queryParams.propagandaType" placeholder="请选择">
-                v-model="queryParams.propagandaType"
+                <el-option v-for="item in optionstype" :key="item.value" :label="item.label" :value="item.value">
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="item in optionstype"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
                 </el-option>
               </el-select>
             </el-form-item>
@@ -62,16 +32,8 @@
               </el-select>
             </el-form-item> -->
             <el-form-item label="宣教状态" prop="propagandaStatus">
-              <el-select
+              <el-select v-model="queryParams.propagandaStatus" placeholder="请选择">
-                v-model="queryParams.propagandaStatus"
+                <el-option v-for="item in optionsstate" :key="item.value" :label="item.label" :value="item.value">
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="item in optionsstate"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
                 </el-option>
               </el-select>
               <!-- <el-input
@@ -82,191 +44,92 @@
         /> -->
             </el-form-item>
             <el-form-item>
-              <el-button
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                type="primary"
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-                icon="el-icon-search"
-                size="mini"
-                @click="handleQuery"
-                >搜索</el-button
-              >
-              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-                >重置</el-button
-              >
             </el-form-item>
           </el-form>
         </div>
         <div ref="mb8" class="mb8">
           <el-row :gutter="10" class="">
             <el-col :span="1.5">
-              <el-button
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                type="primary"
-                plain
-                icon="el-icon-plus"
-                size="mini"
-                @click="handleAdd"
                 :disabled="queryParams.hospitalAgencyId ? false : true"
-                v-hasPermi="['manage:propaganda:add']"
+                v-hasPermi="['manage:propaganda:add']">新增</el-button>
-                >新增</el-button
+              <el-button type="warning" plain icon="el-icon-upload2" size="mini" @click="handleUpload">导入</el-button>
-              >
-              <el-button
-                type="warning"
-                plain
-                icon="el-icon-upload2"
-                size="mini"
-                @click="handleUpload"
-                >导入</el-button
-              >
             </el-col>
-            <right-toolbar
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-              :showSearch.sync="showSearch"
-              @queryTable="getList"
-            ></right-toolbar>
           </el-row>
         </div>
         <div ref="table">
-          <el-table
+          <el-table :max-height="maxTableHeight" v-loading="loading" :data="propagandaList"
-            :max-height="maxTableHeight"
+            @selection-change="handleSelectionChange">
-            v-loading="loading"
-            :data="propagandaList"
-            @selection-change="handleSelectionChange"
-          >
             <!-- <el-table-column type="selection" width="55" align="center" /> -->
-            <el-table-column
+            <el-table-column label="序号" align="center" prop="id" type="index" />
-              label="序号"
+            <el-table-column label="宣教名称" align="center" prop="propagandaTitle" :show-overflow-tooltip="true">
-              align="center"
-              prop="id"
-              type="index"
-            />
-            <el-table-column
-              label="宣教名称"
-              align="center"
-              prop="propagandaTitle"
-              :show-overflow-tooltip="true"
-            >
             </el-table-column>
-            <el-table-column
+            <el-table-column label="宣教类型" align="center" prop="propagandaType">
-              label="宣教类型"
-              align="center"
-              prop="propagandaType"
-            >
               <template slot-scope="scope">
                 {{
-                  scope.row.propagandaType == "MEDICATION_KNOWLEDGE"
+      scope.row.propagandaType == "MEDICATION_KNOWLEDGE"
-                    ? "用药知识"
+        ? "用药知识"
-                    : ""
+        : ""
-                }}
+    }}
                 {{
-                  scope.row.propagandaType == "DISEASE_POPULARIZATION"
+        scope.row.propagandaType == "DISEASE_POPULARIZATION"
-                    ? "疾病科普"
+          ? "疾病科普"
-                    : ""
+          : ""
-                }}
+      }}
                 {{
-                  scope.row.propagandaType == "SPORT_NUTRITION"
+        scope.row.propagandaType == "SPORT_NUTRITION"
-                    ? "运动营养"
+          ? "运动营养"
-                    : ""
+          : ""
-                }}
+      }}
                 {{
-                  scope.row.propagandaType == "OTHER_KNOWLEDGE"
+        scope.row.propagandaType == "OTHER_KNOWLEDGE"
-                    ? "其他知识"
+          ? "其他知识"
-                    : ""
+          : ""
-                }}
+      }}
                 {{
-                  scope.row.propagandaType == "CUSTOMIZED_CONTENT"
+        scope.row.propagandaType == "CUSTOMIZED_CONTENT"
-                    ? "定制内容"
+          ? "定制内容"
-                    : ""
+          : ""
-                }}
+      }}
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column label="宣教ID" align="center" prop="propagandaCode" :show-overflow-tooltip="true" />
-              label="宣教ID"
+            <el-table-column label="宣教状态" align="center" prop="propagandaStatus">
-              align="center"
-              prop="propagandaCode"
-              :show-overflow-tooltip="true"
-            />
-            <el-table-column
-              label="宣教状态"
-              align="center"
-              prop="propagandaStatus"
-            >
               <template slot-scope="scope">
                 {{
-                  scope.row.propagandaStatus == "CREATE_PROCESS" ? "创作中" : ""
+      scope.row.propagandaStatus == "CREATE_PROCESS" ? "创作中" : ""
-                }}
+    }}
                 {{
-                  scope.row.propagandaStatus == "CREATE_COMPLETE"
+        scope.row.propagandaStatus == "CREATE_COMPLETE"
-                    ? "创作完成"
+          ? "创作完成"
-                    : ""
+          : ""
-                }}
+      }}
                 {{ scope.row.propagandaStatus == "IN_REVIEW" ? "审核中" : "" }}
                 {{ scope.row.propagandaStatus == "APPROVED" ? "审核通过" : "" }}
                 {{
-                  scope.row.propagandaStatus == "REVIEW_FAILED"
+      scope.row.propagandaStatus == "REVIEW_FAILED"
-                    ? "审核不通过"
+        ? "审核不通过"
-                    : ""
+        : ""
-                }}
+    }}
                 <div></div>
               </template>
             </el-table-column>
-            <el-table-column
+            <el-table-column label="宣教来源" align="center" prop="hospitalAgencyName" />
-              label="宣教来源"
+            <el-table-column label="创建时间" align="center" prop="createTime" />
-              align="center"
+            <el-table-column label="更新时间" align="center" prop="updateTime" />
-              prop="hospitalAgencyName"
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300%">
-            />
-            <el-table-column
-              label="创建时间"
-              align="center"
-              prop="createTime"
-            />
-            <el-table-column
-              label="更新时间"
-              align="center"
-              prop="updateTime"
-            />
-            <el-table-column
-              label="操作"
-              align="center"
-              class-name="small-padding fixed-width"
-              width="300%"
-            >
               <template slot-scope="scope">
-                <el-button
+                <el-button type="text" icon="el-icon-zoom-in" size="mini" @click="Preview(scope.row)">预览</el-button>
-                  type="text"
+                <el-button type="text" icon="el-icon-tickets" size="mini" @click="copyUrl(scope.row)">复制</el-button>
-                  icon="el-icon-zoom-in"
+                <el-button size="mini" type="text" icon="el-icon-aim"
-                  size="mini"
+                  v-if="scope.row.propagandaStatus == 'CREATE_COMPLETE'" @click="examine(scope.row)">审核</el-button>
-                  @click="Preview(scope.row)"
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                  >预览</el-button
+                  v-hasPermi="['manage:propaganda:edit']">修改</el-button>
-                >
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                <el-button
+                  v-hasPermi="['manage:propaganda:remove']">删除</el-button>
-                  type="text"
-                  icon="el-icon-tickets"
-                  size="mini"
-                  @click="copyUrl(scope.row)"
-                  >复制</el-button
-                >
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-aim"
-                  v-if="scope.row.propagandaStatus == 'CREATE_COMPLETE'"
-                  @click="examine(scope.row)"
-                  >审核</el-button
-                >
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleUpdate(scope.row)"
-                  v-hasPermi="['manage:propaganda:edit']"
-                  >修改</el-button
-                >
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleDelete(scope.row)"
-                  v-hasPermi="['manage:propaganda:remove']"
-                  >删除</el-button
-                >
                 <!-- <el-button
                 size="mini"
                 type="text"
@@ -280,34 +143,15 @@
         </div>
         <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
-        <myPagination
+        <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
-          v-show="total > 0"
+          :indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
-          :total="total"
-          :pageSize="queryParams.pageSize"
-          :indexFromWrap="queryParams.pageNum"
-          @updateCPage="updateCPage"
-        ></myPagination>
       </el-col>
     </el-row>
     <!-- 添加或修改患者宣教信息对话框 -->
-    <el-dialog
+    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
-      :title="title"
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
-      :visible.sync="open"
-      width="1000px"
-      append-to-body
-    >
-      <el-form
-        ref="form"
-        :model="form"
-        :rules="rules"
-        label-width="100px"
-        :inline="true"
-      >
         <el-form-item label="宣教标题" prop="propagandaTitle">
-          <el-input
+          <el-input v-model="form.propagandaTitle" placeholder="请输入宣教标题" />
-            v-model="form.propagandaTitle"
-            placeholder="请输入宣教标题"
-          />
         </el-form-item>
         <!-- <el-form-item label="宣教ID" prop="propagandaCode">
           <el-input
@@ -317,17 +161,8 @@
           />
         </el-form-item> -->
         <el-form-item label="宣教类型" prop="propagandaType">
-          <el-select
+          <el-select v-model="form.propagandaType" placeholder="请选择" style="width: 206px">
-            v-model="form.propagandaType"
+            <el-option v-for="item in optionstype" :key="item.value" :label="item.label" :value="item.value">
-            placeholder="请选择"
-            style="width: 206px"
-          >
-            <el-option
-              v-for="item in optionstype"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
             </el-option>
           </el-select>
         </el-form-item>
@@ -346,98 +181,47 @@
           </el-select>
         </el-form-item>-->
         <el-form-item label="科室名称" prop="departmentId">
-          <el-button
+          <el-button type="" @click="clickinnerVisible()" :style="form.departmentName == '请选择科室' ? 'color: #c0c4cc;' : ''
-            type=""
+      " style="
-            @click="clickinnerVisible()"
-            :style="
-              form.departmentName == '请选择科室' ? 'color: #c0c4cc;' : ''
-            "
-            style="
               width: 206px;
               text-align: left;
               height: 36px;
               overflow: hidden;
-            "
+            ">{{ form.departmentName }}</el-button>
-            >{{ form.departmentName }}</el-button
-          >
         </el-form-item>
         <el-form-item label="病种名称" prop="diseaseTypeName">
-          <el-button
+          <el-button type="" @click="clickdisease()" :style="form.diseaseTypeName == '请选择病种' ? 'color: #c0c4cc;' : ''
-            type=""
+      " style="
-            @click="clickdisease()"
-            :style="
-              form.diseaseTypeName == '请选择病种' ? 'color: #c0c4cc;' : ''
-            "
-            style="
               width: 206px;
               text-align: left;
               height: 36px;
               overflow: hidden;
-            "
+            ">{{ form.diseaseTypeName }}</el-button>
-            >{{ form.diseaseTypeName }}</el-button
-          >
         </el-form-item>
         <el-form-item label="语音播报" prop="voicebroadcast">
-          <el-input
+          <el-input v-model="form.voicebroadcast" type="textarea" style="width: 206px" placeholder="请输入语音播报" />
-            v-model="form.voicebroadcast"
-            type="textarea"
-            style="width: 206px"
-            placeholder="请输入语音播报"
-          />
         </el-form-item>
         <br>
         <el-form-item label="添加封面" prop="propagandaCoverPath">
-          <stationAcatar
+          <stationAcatar v-if="open" @imgUrl="imgUrl" :img="form.propagandaCoverPath" :type="'propagandaCoverUrl'" />
-            v-if="open"
-            @imgUrl="imgUrl"
-            :img="form.propagandaCoverPath"
-            :type="'propagandaCoverUrl'"
-          />
         </el-form-item>
         <el-form-item label="素材选择" prop="imgPath">
           <div class="propagandaselect" @click="material" v-if="!form.imgPath">
             <div class="add">+</div>
           </div>
-          <img
+          <img @click="material" class="propagandaselect" :src="baseUrl + form.imgPath" alt="" v-else-if="form.imgPath && querymaterial.materialsType == 'IMAGE_TEXT'
-            @click="material"
+      " />
-            class="propagandaselect"
+          <video @click="material" style="height: 200px; width: 300px"
-            :src="baseUrl + form.imgPath"
+            v-else-if="form.imgPath && querymaterial.materialsType == 'VIDEO'" ref="myVideo"
-            alt=""
+            :src="baseUrl + form.imgPath" controls></video>
-            v-else-if="
-              form.imgPath && querymaterial.materialsType == 'IMAGE_TEXT'
-            "
-          />
-          <video
-            @click="material"
-            style="height: 200px; width: 300px"
-            v-else-if="form.imgPath && querymaterial.materialsType == 'VIDEO'"
-            ref="myVideo"
-            :src="baseUrl + form.imgPath"
-            controls
-          ></video>
         </el-form-item>
-        <el-form-item
+        <el-form-item label="文章摘要" prop="articleSummary" class="articleSummary">
-          label="文章摘要"
+          <el-input v-model="form.articleSummary" type="textarea" style="width: 800px" placeholder="请输入文章摘要"
-          prop="articleSummary"
+            maxlength="300" />
-          class="articleSummary"
-        >
-          <el-input
-            v-model="form.articleSummary"
-            type="textarea"
-            style="width: 800px"
-            placeholder="请输入文章摘要"
-            maxlength="300"
-          />
         </el-form-item>
-        <el-form-item label="正文内容" prop="propagandaContent">
+        <el-form-item label="正文内容" prop="propagandaContent" v-if="open">
-          <editor
+          <editor id="id" ref="myTextarea" v-model="form.propagandaContent" :min-height="192" style="width: 800px"
-            id="id"
+            @paste.native.prevent="handlePaste" />
-            ref="myTextarea"
-            v-model="form.propagandaContent"
-            :min-height="192"
-            style="width: 800px"
-            @paste.native.prevent="handlePaste"
-          />
           <!-- <editor
             v-model="form.propagandaContent"
             :min-height="192"
@@ -451,166 +235,63 @@
       </div>
     </el-dialog>
     <!-- 科室弹框 -->
-    <el-dialog
+    <el-dialog title="" :visible.sync="innerVisibleshow" width="1000px" append-to-body
-      title=""
+      :before-close="innerVisiblecancel">
-      :visible.sync="innerVisibleshow"
+      <el-form ref="queryForm" :model="informationqueryParams" :rules="rules" label-width="80px" :inline="true">
-      width="1000px"
-      append-to-body
-      :before-close="innerVisiblecancel"
-    >
-      <el-form
-        ref="queryForm"
-        :model="informationqueryParams"
-        :rules="rules"
-        label-width="80px"
-        :inline="true"
-      >
         <el-form-item label="科室名称" prop="departmentName" label-width="120">
-          <el-input
+          <el-input v-model="informationqueryParams.departmentName" placeholder="请输入科室名称" clearable />
-            v-model="informationqueryParams.departmentName"
-            placeholder="请输入科室名称"
-            clearable
-          />
         </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="informationInfoinfo">搜索</el-button>
-            type="primary"
+          <el-button icon="el-icon-refresh" size="mini" @click="addresetQuerylist">重置</el-button>
-            icon="el-icon-search"
-            size="mini"
-            @click="informationInfoinfo"
-            >搜索</el-button
-          >
-          <el-button
-            icon="el-icon-refresh"
-            size="mini"
-            @click="addresetQuerylist"
-            >重置</el-button
-          >
         </el-form-item>
       </el-form>
-      <el-table
+      <el-table :data="infolist" @cell-dblclick="nurseclick" v-loading="loading">
-        :data="infolist"
-        @cell-dblclick="nurseclick"
-        v-loading="loading"
-      >
         <el-table-column label="请选择" width="100" align="center">
           <template slot-scope="scope">
-            <el-button
+            <el-button type="primary" style="width: 15px; height: 15px" v-if="form.departmentId == scope.row.id" circle
-              type="primary"
+              @click="nurseclick(scope.row)"></el-button>
-              style="width: 15px; height: 15px"
+            <el-button v-else style="width: 15px; height: 15px" circle @click="nurseclick(scope.row)"></el-button>
-              v-if="form.departmentId == scope.row.id"
-              circle
-              @click="nurseclick(scope.row)"
-            ></el-button>
-            <el-button
-              v-else
-              style="width: 15px; height: 15px"
-              circle
-              @click="nurseclick(scope.row)"
-            ></el-button>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column property="departmentName" label="科室名称" align="center" :show-overflow-tooltip="true">
-          property="departmentName"
-          label="科室名称"
-          align="center"
-          :show-overflow-tooltip="true"
-        >
         </el-table-column>
       </el-table>
-      <myPagination
+      <myPagination v-show="totaldepartment > 0" :total="totaldepartment" :pageSize="informationqueryParams.pageSize"
-        v-show="totaldepartment > 0"
+        :indexFromWrap="informationqueryParams.pageNum" @updateCPage="updateCPagetwo"></myPagination>
-        :total="totaldepartment"
-        :pageSize="informationqueryParams.pageSize"
-        :indexFromWrap="informationqueryParams.pageNum"
-        @updateCPage="updateCPagetwo"
-      ></myPagination>
       <!-- <pagination v-show="totaldepartment > 0" :total="totaldepartment" :page.sync="informationqueryParams.pageNum"
         :limit.sync="informationqueryParams.pageSize" @pagination="informationInfoinfo" /> -->
     </el-dialog>
     <!-- 病种弹框 -->
-    <el-dialog
+    <el-dialog title="" :visible.sync="diseaseshowst" width="1000px" append-to-body :before-close="canceldiseases">
-      title=""
+      <el-form ref="queryForm" :model="querydisease" :rules="rules" label-width="80px" :inline="true">
-      :visible.sync="diseaseshowst"
-      width="1000px"
-      append-to-body
-      :before-close="canceldiseases"
-    >
-      <el-form
-        ref="queryForm"
-        :model="querydisease"
-        :rules="rules"
-        label-width="80px"
-        :inline="true"
-      >
         <el-form-item label="病种名称" prop="diseaseTypeName" label-width="120">
-          <el-input
+          <el-input v-model="querydisease.diseaseTypeName" placeholder="请输入病种名称" clearable />
-            v-model="querydisease.diseaseTypeName"
-            placeholder="请输入病种名称"
-            clearable
-          />
         </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="infodisease">搜索</el-button>
-            type="primary"
+          <el-button icon="el-icon-refresh" size="mini" @click="resetdisease">重置</el-button>
-            icon="el-icon-search"
-            size="mini"
-            @click="infodisease"
-            >搜索</el-button
-          >
-          <el-button icon="el-icon-refresh" size="mini" @click="resetdisease"
-            >重置</el-button
-          >
         </el-form-item>
       </el-form>
-      <el-table
+      <el-table :data="listdisease" @cell-dblclick="nurseclickdisease" v-loading="loading">
-        :data="listdisease"
-        @cell-dblclick="nurseclickdisease"
-        v-loading="loading"
-      >
         <el-table-column label="请选择" width="100" align="center">
           <template slot-scope="scope">
-            <el-button
+            <el-button type="primary" style="width: 15px; height: 15px" v-if="form.diseaseTypeId == scope.row.id" circle
-              type="primary"
+              @click="nurseclickdisease(scope.row)"></el-button>
-              style="width: 15px; height: 15px"
+            <el-button v-else style="width: 15px; height: 15px" circle
-              v-if="form.diseaseTypeId == scope.row.id"
+              @click="nurseclickdisease(scope.row)"></el-button>
-              circle
-              @click="nurseclickdisease(scope.row)"
-            ></el-button>
-            <el-button
-              v-else
-              style="width: 15px; height: 15px"
-              circle
-              @click="nurseclickdisease(scope.row)"
-            ></el-button>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column property="diseaseTypeName" label="病种名称" align="center" :show-overflow-tooltip="true">
-          property="diseaseTypeName"
-          label="病种名称"
-          align="center"
-          :show-overflow-tooltip="true"
-        >
         </el-table-column>
       </el-table>
       <!-- <pagination v-show="diseasetotal > 0" :total="diseasetotal" :page.sync="querydisease.pageNum"
         :limit.sync="querydisease.pageSize" @pagination="infodisease" /> -->
-      <myPagination
+      <myPagination v-show="diseasetotal > 0" :total="diseasetotal" :pageSize="querydisease.pageSize"
-        v-show="diseasetotal > 0"
+        :indexFromWrap="querydisease.pageNum" @updateCPage="updateCPagethree"></myPagination>
-        :total="diseasetotal"
-        :pageSize="querydisease.pageSize"
-        :indexFromWrap="querydisease.pageNum"
-        @updateCPage="updateCPagethree"
-      ></myPagination>
     </el-dialog>
     <!-- 审核弹框 -->
-    <el-dialog
+    <el-dialog title="提示" :visible.sync="dialogexamine" width="30%" :before-close="handleClose" center>
-      title="提示"
-      :visible.sync="dialogexamine"
-      width="30%"
-      :before-close="handleClose"
-      center
-    >
       <span style="font-size: 18px; margin-left: 55px">是否同意审核？</span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cancelamine">同意</el-button>
@@ -618,12 +299,7 @@
       </span>
     </el-dialog>
     <!-- 预览弹框 -->
-    <el-dialog
+    <el-dialog title="预览" :visible.sync="dialogview" width="50%" :before-close="handleview">
-      title="预览"
-      :visible.sync="dialogview"
-      width="50%"
-      :before-close="handleview"
-    >
       <div class="titletop">文章模板:{{ formview.propagandaTitle }}</div>
       <div class="bodytop">
         <div class="titledata">{{ formview.propagandaTitle }}</div>
@@ -640,46 +316,18 @@
       </div>
     </el-dialog>
     <!-- 素材选择弹框 -->
-    <el-dialog
+    <el-dialog title="请选择素材" :visible.sync="dialogmaterial" width="900px" :before-close="materialClose">
-      title="请选择素材"
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      :visible.sync="dialogmaterial"
-      width="900px"
-      :before-close="materialClose"
-    >
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        :inline="true"
-        v-show="showSearch"
-        label-width="68px"
-      >
         <el-form-item label="素材名称" prop="materialsName">
-          <el-input
+          <el-input v-model="querymaterial.materialsName" placeholder="请输入素材名称" clearable
-            v-model="querymaterial.materialsName"
+            @keyup.enter.native="handleQuerysc" />
-            placeholder="请输入素材名称"
-            clearable
-            @keyup.enter.native="handleQuerysc"
-          />
         </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuerysc">搜索</el-button>
-            type="primary"
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuerysc">重置</el-button>
-            icon="el-icon-search"
-            size="mini"
-            @click="handleQuerysc"
-            >搜索</el-button
-          >
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuerysc"
-            >重置</el-button
-          >
         </el-form-item>
       </el-form>
-      <el-tabs
+      <el-tabs v-model="querymaterial.materialsType" type="card" @tab-click="handleClick">
-        v-model="querymaterial.materialsType"
-        type="card"
-        @tab-click="handleClick"
-      >
         <el-tab-pane label="图片" name="IMAGE_TEXT"></el-tab-pane>
         <el-tab-pane label="视频" name="VIDEO"></el-tab-pane>
       </el-tabs>
@@ -690,44 +338,29 @@
             @change="changecheck($event, item)"
           ></el-checkbox> -->
           <div @click.stop="viewshow(item)">
-            <img
+            <img :src="baseUrl + item.materialsFilePath" alt=""
-              :src="baseUrl + item.materialsFilePath"
+              v-if="item.materialsFilePath && !item.videoCoverFilePath" />
-              alt=""
+            <img :src="baseUrl + item.videoCoverFilePath" alt=""
-              v-if="item.materialsFilePath && !item.videoCoverFilePath"
+              v-if="item.videoCoverFilePath && item.materialsFilePath" />
-            />
-            <img
-              :src="baseUrl + item.videoCoverFilePath"
-              alt=""
-              v-if="item.videoCoverFilePath && item.materialsFilePath"
-            />
             <div class="texttitle">{{ item.materialsName }}</div>
             <div class="dataliat">
-              创建人/创建时间：<span>{{ item.createBy }}</span
+              创建人/创建时间：<span>{{ item.createBy }}</span>/<span>{{ item.createTime }}</span>
-              >/<span>{{ item.createTime }}</span>
             </div>
             <!-- <div class="dataliat">素材来源：</div> -->
             <!-- <div class="dataliat">标签：暂无</div> -->
-            <div
+            <div class="dataliat bq" v-if="item.indications ||
-              class="dataliat bq"
+      item.drugName ||
-              v-if="
+      item.applicableDiseases ||
-                item.indications ||
+      item.surgicalName ||
-                item.drugName ||
+      item.inspectionItems ||
-                item.applicableDiseases ||
+      item.checkItems
-                item.surgicalName ||
+      ">
-                item.inspectionItems ||
-                item.checkItems
-              "
-            >
               标签：
               <span v-if="item.indications">{{ item.indications }}，</span>
               <span v-if="item.drugName">{{ item.drugName }}，</span>
-              <span v-if="item.applicableDiseases"
+              <span v-if="item.applicableDiseases">{{ item.applicableDiseases }}，</span>
-                >{{ item.applicableDiseases }}，</span
-              >
               <span v-if="item.surgicalName">{{ item.surgicalName }}，</span>
-              <span v-if="item.inspectionItems"
+              <span v-if="item.inspectionItems">{{ item.inspectionItems }}，</span>
-                >{{ item.inspectionItems }}，</span
-              >
               <span v-if="item.checkItems">{{ item.checkItems }}，</span>
             </div>
             <div class="dataliat bq" v-else>标签：暂无</div>
@@ -737,29 +370,16 @@
       </div>
       <!--  <pagination v-show="totalmaterial > 0" :total="totalmaterial" :page.sync="querymaterial.pageNum"
         :limit.sync="querymaterial.pageSize" @pagination="getmaterial" /> -->
-      <myPagination
+      <myPagination v-show="totalmaterial > 0" :total="totalmaterial" :pageSize="querymaterial.pageSize"
-        v-show="totalmaterial > 0"
+        :indexFromWrap="querymaterial.pageNum" @updateCPage="updateCPagefour"></myPagination>
-        :total="totalmaterial"
-        :pageSize="querymaterial.pageSize"
-        :indexFromWrap="querymaterial.pageNum"
-        @updateCPage="updateCPagefour"
-      ></myPagination>
     </el-dialog>
     <!-- 预览弹框 -->
     <el-dialog title="预览" :visible.sync="openview" width="60%">
       <div class="viewbody">
         <div class="left">
-          <video
+          <video v-if="querymaterial.materialsType == 'VIDEO'" ref="myVideo" :src="baseUrl + viewform.materialsFilePath"
-            v-if="querymaterial.materialsType == 'VIDEO'"
+            controls></video>
-            ref="myVideo"
+          <img :src="baseUrl + viewform.materialsFilePath" alt="" v-if="querymaterial.materialsType == 'IMAGE_TEXT'" />
-            :src="baseUrl + viewform.materialsFilePath"
-            controls
-          ></video>
-          <img
-            :src="baseUrl + viewform.materialsFilePath"
-            alt=""
-            v-if="querymaterial.materialsType == 'IMAGE_TEXT'"
-          />
         </div>
         <div class="right">
           <div class="nametitle">素材名称</div>
@@ -784,17 +404,8 @@
       </div>
     </el-dialog>
     <!-- 导入弹框 -->
-    <el-dialog
+    <el-dialog title="" :visible.sync="innerexport" width="1000px" append-to-body :before-close="exportcancel">
-      title=""
+      <propagandaexport @submit="submit" ref="childComponent"></propagandaexport>
-      :visible.sync="innerexport"
-      width="1000px"
-      append-to-body
-      :before-close="exportcancel"
-    >
-      <propagandaexport
-        @submit="submit"
-        ref="childComponent"
-      ></propagandaexport>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitexport">确 定</el-button>
         <el-button @click="innerexport = false">取 消</el-button>
@@ -1452,9 +1063,21 @@ export default {
     imgUrl(imgUrl) {
       this.form.propagandaCoverPath = imgUrl;
     },
+    fn(str) {
+      let outstr = str.replace(/<iframe [^>]*src=['"]([^'"]+)[^>]*><\/iframe>/g, function (match, capture) {
+        if (match.indexOf('ql-video') != -1) {
+          console.log(match, capture)
+          return `<video class="ql-video" controls="controls" style="width: 100%" poster="${capture}?vframe/jpg/offset/0/w/480" type="video/mp4" src="${capture}"/>`
+        } else {
+          return match
+        }
+      });
+      console.log(outstr)
+      return outstr
+    },
     /** 提交按钮 */
     submitForm() {
-      console.log(this.form, 'this.form')
+      this.form.propagandaContent = this.fn(this.form.propagandaContent)
       this.form.hospitalAgencyId = this.queryParams.hospitalAgencyId
       this.form.hospitalAgencyName = this.queryParams.hospitalAgencyName
       if (this.form.propagandaContent && (this.form.propagandaContent.length - 7 > this.maxLength)) {
@@ -1472,16 +1095,16 @@ export default {
             }
             if (this.form.id != null) {
               updatePropaganda(this.form).then(response => {
+                this.open = false;
                 this.$modal.msgSuccess("修改成功");
                 this.$refs.DepartmentList.Departmentlist()
-                this.open = false;
                 this.getList();
               });
             } else {
               addPropaganda(this.form).then(response => {
+                this.open = false;
                 this.$modal.msgSuccess("新增成功");
                 this.$refs.DepartmentList.Departmentlist()
-                this.open = false;
                 this.getList();
               });
             }
@@ -1560,6 +1183,7 @@ export default {
     height: 100px;
   }
 }
+
 ::v-deep .el-dialog__body {
   padding-bottom: 60px !important;
 }