编辑专病路径

src/components/Editor/index.vue

@@ -1,22 +1,155 @@
 <template>
   <div>
-    <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :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
+      :action="uploadUrl"
+      :before-upload="handleBeforeUpload"
+      :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">
+    <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>
+        <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>
+    <!-- 素材选择弹框 -->
+    <el-dialog
+      title="请选择素材"
+      :visible.sync="dialogmaterial"
+      width="900px"
+      append-to-body
+      :before-close="materialClose"
+    >
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="68px"
+        @submit.native.prevent
+      >
+        <el-form-item label="素材名称" prop="materialsName">
+          <el-input
+            v-model="querymaterial.materialsName"
+            placeholder="请输入素材名称"
+            clearable
+            @keyup.enter.native="handleQuerysc"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            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
+        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>
+
+      <div class="bodytopxjsc" v-if="dialogmaterial">
+        <div class="bodylist" v-for="item in materialsList" :key="item.id">
+          <!-- <el-checkbox
+            v-model="item.checked"
+            @change="changecheck($event, item)"
+          ></el-checkbox> -->
+          <div @click.stop="viewshow(item)">
+            <img
+              class="images"
+              :src="baseUrl + item.materialsFilePath"
+              alt=""
+              v-if="item.materialsFilePath && !item.videoCoverFilePath"
+            />
+            <img
+              class="images"
+              :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.createTime }}</span>
+            </div>
+            <!-- <div class="dataliat">素材来源：</div> -->
+            <!-- <div class="dataliat">标签：暂无</div> -->
+            <div
+              class="dataliat bq"
+              v-if="
+                item.indications ||
+                item.drugName ||
+                item.applicableDiseases ||
+                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"
+                >{{ item.applicableDiseases }}，</span
+              >
+              <span v-if="item.surgicalName">{{ item.surgicalName }}，</span>
+              <span v-if="item.inspectionItems"
+                >{{ item.inspectionItems }}，</span
+              >
+              <span v-if="item.checkItems">{{ item.checkItems }}，</span>
+            </div>
+            <div class="dataliat bq" v-else>标签：暂无</div>
+          </div>
+          <div class="label" @click.stop="labelchange(item)">加到文章</div>
+        </div>
+      </div>
+      <myPagination
+        v-show="totalmaterial > 0"
+        :total="totalmaterial"
+        :pageSize="querymaterial.pageSize"
+        :indexFromWrap="querymaterial.pageNum"
+        @updateCPage="updateCPagefour"
+      ></myPagination>
+    </el-dialog>
   </div>
 </template>
 
@@ -29,6 +162,8 @@ import { getToken } from "@/utils/auth";
 import {
   uploadimg
 } from '@/api/system/editor.js'
+import { listMaterials } from "@/api/manage/materials";
+
 import Video from "@/utils/quillVideo";
 Quill.register(Video, true);
 export default {
@@ -67,6 +202,41 @@ export default {
   },
   data() {
     return {
+      // 素材弹框
+      dialogmaterial: false,
+      // 素材信息表格数据
+      materialsList: [],
+      totalmaterial: 0,
+      // 查询参数
+      querymaterial: {
+        pageNum: 1,
+        pageSize: 10,
+        materialsType: 'IMAGE_TEXT',
+        materialsName: null,
+        materialsStatus: null,
+        createTime: null,
+      },
+      baseUrl: process.env.VUE_APP_BASE_API,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        patientId: null,
+        propagandaId: null,
+        departmentName: null,
+        createTimeStart: null,
+        createTimeEnd: null,
+        propagandaTitle: null,
+        propagandaType: null,
+        propagandaCode: null,
+        propagandaContent: null,
+        propagandaCoverPath: null,
+        articleSummary: null,
+        voicebroadcast: null,
+        diseaseTypeName: null,
+        propagandaLink: null,
+        propagandaBarcodePath: null,
+      },
       videotype: {
         type: 'commonVideoUrl'
       },
@@ -77,6 +247,7 @@ export default {
       },
       Quill: null,
       getindex: 0,
+      videoindex: 0,
       currentValue: "",
       dialogFormVisible: false,
       options: {
@@ -96,7 +267,9 @@ export default {
               [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
               [{ align: [] }],                                 // 对齐方式
               ["clean"],                                       // 清除文本格式
-              ["link", "image", "video"]                       // 链接、图片、视频
+              ["link", "image", "video"],
+              // 链接、图片、视频
+              ['scmages']
             ],
             handlers: {
               // 点击上传视频阻止默认上传替换成自定义上传
@@ -104,6 +277,12 @@ export default {
                 this.getindex = this.Quill.getSelection().index
                 this.dialogFormVisible = true;
               },
+              scmages: () => {
+                this.videoindex = this.Quill.getSelection().index
+                this.dialogmaterial = true;
+
+
+              }
             },
           },
         },
@@ -139,11 +318,72 @@ export default {
   },
   mounted() {
     this.init();
+    this.getmaterial()
   },
   beforeDestroy() {
     this.Quill = null;
   },
   methods: {
+    // 分页
+    updateCPagefour(index, size) {
+      this.querymaterial.pageNum = index
+      this.querymaterial.pageSize = size
+      this.getmaterial();
+    },
+    /** 查询素材信息列表 */
+    getmaterial() {
+      this.loading = true;
+      this.querymaterial.params = {};
+      listMaterials(this.querymaterial).then(response => {
+        this.materialsList = response.rows;
+        this.totalmaterial = response.total;
+        this.loading = false;
+      });
+    },
+    // 素材选择
+    material() {
+      this.dialogmaterial = true
+      this.querymaterial.materialsType = 'IMAGE_TEXT'
+      this.getmaterial()
+    },
+    // 关闭素材
+    materialClose() {
+      this.dialogmaterial = false
+    },
+    // 图片/视频
+    handleClick(e) {
+      this.querymaterial.materialsType = e.name
+      this.getmaterial()
+    },
+    handleQuerysc() {
+      this.querymaterial.pageNum = 1;
+      this.getmaterial();
+    },
+    resetQuerysc() {
+      this.querymaterial.materialsName = null
+      this.handleQuerysc()
+    },
+    // 加到文章
+    async labelchange(item) {
+      console.log(item, 'item')
+      if (this.querymaterial.materialsType == 'IMAGE_TEXT') {//图片
+        this.insertVideo(process.env.VUE_APP_BASE_API + item.materialsFilePath);
+      } else if (this.querymaterial.materialsType == 'VIDEO') {//视频
+        const dataURL = await this.getVideoBase64(process.env.VUE_APP_BASE_API + item.materialsFilePath);
+        // console.log(dataURL.PromiseResult,'视频')
+        const imgUrl = await this.getFileFromBase64(dataURL, "kefu.jpeg");
+        const fd1 = new FormData();
+        //拿到图片文件请求后端接口返回链接
+        fd1.append("file", imgUrl);
+        let CoverImg = await uploadimg(fd1).then(res => {
+          if (res.code == 200) {
+            return res.url
+          }
+        })
+        this.insertVideo(process.env.VUE_APP_BASE_API + item.materialsFilePath, CoverImg);
+      }
+
+    },
     init() {
       const editor = this.$refs.editor;
       this.Quill = new Quill(editor, this.options);
@@ -158,6 +398,7 @@ export default {
             this.quill.format("image", false);
           }
         });
+
       }
       this.Quill.pasteHTML(this.currentValue);
       this.Quill.on("text-change", (delta, oldDelta, source) => {
@@ -267,6 +508,7 @@ export default {
     },
     // base64转图片
     getFileFromBase64(base64URL, filename) {
+      console.log(base64URL, filename)
       var arr = base64URL.split(","),
         bstr = atob(arr[1]),
         n = bstr.length,
@@ -276,8 +518,27 @@ export default {
       }
       return new File([u8arr], filename, { type: "image/png" });
     },
+    // 插入素材视频/image
+    insertVideo(videoLink, CoverImg) {
+      // if (!videoLink) return this.$message.error("视频地址不能为空！");
+      this.dialogmaterial = false;
+      // 获取富文本
+      let range = this.videoindex;
+      // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null
+      let index = range ? range : 0;
+      // 在光标所在位置 插入视频
+      if (this.querymaterial.materialsType == 'IMAGE_TEXT') {
+        this.Quill.insertEmbed(index, "image", videoLink);
+
+      } else if (this.querymaterial.materialsType == 'VIDEO') {
+        this.Quill.insertEmbed(index, "video", { url: videoLink, poster: CoverImg });
+      }
+      // 调整光标到最后
+      this.Quill.setSelection(index + 1);
+    },
     // 插入视频
     insertVideoLink(videoLink, CoverImg) {
+      console.log(videoLink, CoverImg, '2222')
       if (!videoLink) return this.$message.error("视频地址不能为空！");
       this.dialogFormVisible = false;
       // 获取富文本
@@ -290,6 +551,7 @@ export default {
       this.Quill.setSelection(index + 1);
     },
   },
+
 };
 </script>
 
@@ -299,6 +561,65 @@ export default {
   white-space: pre-wrap !important;
   line-height: normal !important;
 }
+button.ql-scmages {
+  background-image: url("~@/assets/images/sucai.jpg") !important;
+  border: none !important;
+  cursor: pointer !important;
+  display: inline-block !important;
+  float: left !important;
+  height: 23px !important;
+    margin-left: -14px;
+    margin-top: -8px;
+    width: 24px !important;
+}
+.bodytopxjsc {
+  width: 100%;
+  display: flex;
+  white-space: wrap;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding-bottom: 20px;
+}
+.bodylist {
+  width: 31%;
+  height: 221px;
+  border: 2px solid #e2e3e5;
+  border-radius: 10px;
+  position: relative;
+  margin: 6px;
+}
+.texttitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 700;
+  margin: 5px 0px 5px 10px;
+}
+.dataliat {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0px 0px 5px 10px;
+  font-size: 12px;
+  color: #989992;
+}
+.bq {
+  width: 155px;
+}
+.images {
+  width: 100%;
+  height: 100px;
+}
+
+.label {
+  position: absolute;
+  right: 0px;
+  right: 18px;
+  color: #409eff;
+  bottom: 23px;
+  font-size: 13px;
+}
 
 .quill-img {
   display: none;

src/views/system/editorialSpecialization/index.vue

@@ -356,6 +356,7 @@ export default {
         this.form.version = res.data.version;
         this.form.routeName = res.data.routeName;
         this.form.diseaseTypeName = res.data.diseaseTypeName;
+        this.form.departmentId=res.data.departmentId
         this.list = res.data;
         if (this.list.totalNumber == 0) {
           this.list.percentage = 0;