WXL
2025-01-15 1cb1fbf80c955986385377b5f84e8915d1e655d6
src/views/knowledge/education/compilequer/index.vue
@@ -255,7 +255,9 @@
      <!-- 宣教内容 -->
      <div v-if="Editprogress == 2">
        <el-row :gutter="20">
          <el-col :span="4"><div class="leftvlue-jbxx">宣教内容</div></el-col>
          <el-col :span="4">
            <div class="leftvlue-jbxx">宣教内容</div>
          </el-col>
        </el-row>
        <div>
@@ -266,7 +268,7 @@
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row gutter="20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="资料形式" prop="region">
                  <el-select
@@ -299,8 +301,8 @@
                  <el-button type="info" @click="closeFm('ruleForm')"
                    >关闭</el-button
                  >
                </div></el-col
              >
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
@@ -408,13 +410,14 @@
];
export default {
  name: "aEducationinfo",
  components: { OptionalForm },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadSort",
      uploadImgUrlword: process.env.VUE_APP_BASE_API + "/common/uploadShow",
      uploadUrlPath: "没有文件上传",
      quillUpdateImg: false,
@@ -428,7 +431,7 @@
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      content: "", //最终保存的内容
      content: `<p>测试</p><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://218.108.11.22:8093/profile-api/upload/vadio/营养泵操作规范.mp4"></video><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://218.108.11.22:8093/profile-api/upload/vadio/注射器推注.mp4"></video><p>321</p>"`, //最终保存的内容
      fileName: "", //文件名
      dynamicTags: [],
      inputVisible: false,
@@ -507,6 +510,13 @@
      deptList: [],
      tempDetpRelevanceslist: [],
      props: { multiple: true, value: "deptId", label: "deptName" },
      // 内网的部分(文件)
      oldPattern: "http://192.168.191.181:8095/profile/upload",
      // 内网的部分(文件)
      oldPatternhtml: "/http:\/\/192\.168\.191\.181:8095\/profile\/upload\//g",
      // 外网部分(文件)
      newPattern: "http://218.108.11.22:8093/profile-api/upload",
      xjxsoptions: [
        {
          value: "1",
@@ -542,6 +552,13 @@
      },
    };
  },
  activated() {
    if (this.id != this.$route.query.id) {
      this.gettabList();
      this.getList();
      this.illnessUpdate();
    }
  },
  created() {
    this.gettabList();
@@ -573,11 +590,14 @@
      if (this.id) {
        getlibraryinfo({ id: this.id }).then((res) => {
          this.ruleForm = res.data[0];
          this.ruleForm.campus = this.ruleForm.campus.split(",");
          if (this.ruleForm.campus)
            this.ruleForm.campus = this.ruleForm.campus.split(",");
          this.dynamicTags = res.data[0].heLibraryTagList.map(
            this.processElement
          );
          this.Getmissioncontent(this.ruleForm.richText);
          if (this.ruleForm.htmlRichText) {
            this.Getmissioncontent(this.ruleForm.htmlRichText);
          }
          if (this.ruleForm.deptNames) {
            this.tempDetpRelevanceslist = JSON.parse(this.ruleForm.deptNames);
          }
@@ -598,15 +618,51 @@
      listDept(this.queryParams).then((response) => {
        this.deptList = this.handleTree(response.data, "deptId");
      });
      this.loading = false;
    },
      // ------------------
      // let html =
      //   '<p>测试</p><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://192.168.191.181:8095/profile/upload/vadio/营养泵介绍.mp4"></video><p>测试111</p><video class="ql-video" controls="controls" controlslist="nofullscreen" type="video/mp4" style="object-fit:fill;width: 100%;" preload="auto" playsinline="true" x-webkit-airplay="allow" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" src="http://192.168.191.181:8095/profile/upload/vadio/注射器推注.mp4"></video><p><br></p>';
      // // html = html.parserdom(this.oldPattern, this.newPattern);
      // html = this.parserdom(html);
      // console.log(html, "html");
      // this.loading = false;
    },
    // parser
    parserdom(html) {
      // 创建一个新的DOM解析器
      var parser = new DOMParser();
      // 将字符串解析为文档对象
      var doc = parser.parseFromString(html, "text/html");
      // 定义要替换的新旧URL
      var oldUrlBase = "http://192.168.191.181:8095/profile/upload";
      var newUrlBase = "http://218.108.11.22:8093/profile-api/upload";
      // 获取所有的video元素
      var videos = doc.querySelectorAll("video");
      // 遍历所有的video元素并替换src属性
      videos.forEach(function (video) {
        var src = video.getAttribute("src");
        if (src.startsWith(oldUrlBase)) {
          video.setAttribute("src", src.replace(oldUrlBase, newUrlBase));
        }
      });
      // 将修改后的文档转换回字符串
      var newContent = doc.body.innerHTML;
      return newContent;
    },
    submitForm(formName) {
      let tgs = [];
      this.dynamicTags.forEach((item) => {
        tgs.push(item.tagname);
      });
      this.ruleForm.campus = this.ruleForm.campus.join(",");
      if (this.ruleForm.campus) {
        this.ruleForm.campus = this.ruleForm.campus.join(",");
      }
      this.ruleForm.labelInfo = tgs.length != 0 ? tgs.join(", ") : "";
      this.ruleForm.otherdata = JSON.stringify(this.variablelist);
      this.ruleForm.hetype = 1;
@@ -617,27 +673,58 @@
          : "";
      addrichText({
        content: this.content,
        fileName: this.fileName ? this.fileName : "测试.html",
        content: this.parserdom(this.content),
        fileName: this.generateRandomHtmlFilename(),
      }).then((res) => {
        this.ruleForm.richText = res.msg;
        if (this.id) {
          this.ruleForm.isoperation = 2;
          compilelibrary(this.ruleForm).then((res) => {
            this.$modal.msgSuccess("编辑成功");
            this.confirmillness();
            this.$router.go(-1);
          });
        } else {
          this.ruleForm.isoperation = 1;
          compilelibrary(this.ruleForm).then((res) => {
            this.$modal.msgSuccess("新增成功");
            this.confirmillness(res.data);
            this.$router.go(-1);
          });
        }
        console.log(this.ruleForm.richText, "this.ruleForm.richText");
        // 处理内网html
        addrichText({
          content: this.content,
          fileName: this.generateRandomHtmlFilename(),
        }).then((resf) => {
          this.ruleForm.htmlRichText = resf.msg.replace(
            this.newPattern,
            this.oldPattern
          );
          console.log(this.ruleForm.htmlRichText, "this.ruleForm.htmlRichText");
          if (this.id) {
            this.ruleForm.isoperation = 2;
            compilelibrary(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess("编辑成功");
                this.confirmillness();
                this.$router.go(-1);
              }
            });
          } else {
            this.ruleForm.isoperation = 1;
            compilelibrary(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.confirmillness(res.data);
                this.$router.go(-1);
              }
            });
          }
        });
      });
    },
    generateRandomHtmlFilename() {
      // 生成一个0到1之间的随机数,并将其转换为字符串
      let randomNumber = Math.random().toString();
      // 移除前面的0和小数点
      randomNumber = randomNumber.substring(6);
      // 确保生成的随机数是一定长度的,例如8位
      while (randomNumber.length < 8) {
        randomNumber = "0" + randomNumber;
      }
      // 拼接上.html后缀
      return randomNumber + ".html";
    },
    // 保存疾病
    confirmillness(guid) {
      this.illnesslist.forEach((item, index) => {
@@ -820,7 +907,7 @@
    // --------------------------
    // 预览模版
    // 预览模板
    PreviewTemplate() {
      this.drawer = true;
    },
@@ -843,6 +930,11 @@
      console.log("上传成功");
      //拼接出上传的图片在服务器的完整地址
      let imgUrl = res.url;
      console.log(res.url);
      imgUrl = imgUrl.replace(this.newPattern, this.oldPattern);
      console.log(imgUrl, "imgUrl");
      let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
      this.fileName = this.getFileNameFromPath(res.url);
@@ -851,7 +943,7 @@
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片||视频  res.info为服务器返回的图片地址
      if (type == "mp4" || type == "MP4") {
      if (type == "mp4" || type == "MP4"|| type == "avi"|| type == "AVI") {
        window.jsValue = imgUrl;
        quill.insertEmbed(length, "video", imgUrl);
      } else {
@@ -906,17 +998,18 @@
      console.log(res);
      console.log(file);
    },
    // 上传图片成功
    // 上传word成功
    uploadEditorSuccessword(res, file) {
      console.log("上传成功");
      const data = null;
      console.log("上传word文件成功");
      console.log(res, file, "word");
      let fileurl = res.url.replace(this.newPattern, this.oldPattern);
      axios
        .get(res.url)
        .get(fileurl)
        .then((response) => {
          console.log(response.data, "数据"); // 输出获取到的文件内容
          this.content = response.data;
          this.texturl = res.url;
          this.$nextTick(() => {
            this.content = response.data;
          });
          this.fileName = this.getFileNameFromPath(response.url);
          console.log(this.fileName, "this.fileName");
        })
@@ -937,6 +1030,7 @@
          console.error("Failed to fetch file:", error);
        });
    },
    // 处理url
  },
};
</script>
@@ -945,6 +1039,7 @@
.Questionnairemanagement {
  // display: flex;
}
.sidecolumn {
  // width: 300px;
  // min-height: 100vh;
@@ -959,6 +1054,7 @@
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.leftvlue {
  //   display: flex;
  //   flex: 1;
@@ -968,20 +1064,25 @@
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .mulsz {
    font-size: 20px;
  }
  .leftvlue-jbxx {
    margin-bottom: 50px;
    font-size: 20px;
    span {
      position: absolute;
      right: 80px;
    }
  }
  .demo-cascader {
    margin-right: 20px;
  }
  .PreviewTemplate {
    color: #02a7f0;
    cursor: pointer;
@@ -989,6 +1090,7 @@
    margin: 0 20px;
  }
}
.xinz-inf {
  font-size: 18px;
  white-space: nowrap;
@@ -1000,6 +1102,7 @@
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
@@ -1007,12 +1110,14 @@
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
.preview-left {
  margin: 20px;
  //   margin: 20px;
@@ -1021,41 +1126,51 @@
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .topic-dev {
    margin-bottom: 25px;
    font-size: 20px !important;
    .dev-text {
      margin-bottom: 10px;
    }
  }
}
.addtopic {
  margin-top: 30px;
}
.presentation {
  margin: 20px 0;
  display: flex;
  .presentation-left {
    width: 50%;
    height: 500px;
    .button-textxg {
      color: #024df0;
    }
    .button-textsc {
      color: #f52727;
    }
  }
  .presentation-right {
    width: 50%;
    height: 500px;
    padding: 20px;
    font-size: 18px;
    border: 1px solid #909091;
    span {
      padding: 0 35px;
      margin-right: 10px;
      border-bottom: 1px solid #909091;
    }
    .headline {
      font-size: 20px;
      border-left: 3px solid #41a1be;
@@ -1064,6 +1179,7 @@
    }
  }
}
::v-deep .addtopic-input {
  input {
    background: #02a7f0;
@@ -1071,25 +1187,31 @@
    width: 150px;
  }
}
::v-deep.el-step.is-vertical .el-step__title {
  font-size: 25px;
}
::v-deep.el-input--medium {
  font-size: 18px !important;
}
::v-deep.ruleFormaa.el-select {
  display: inline-block;
  position: relative;
  width: 700px;
}
.el-select__tags {
  font-size: 20px;
  max-width: 888px !important;
}
::v-deep.el-radio__inner {
  width: 22px;
  height: 22px;
}
// ::v-deep.topic-dev.el-radio__label {
//   font-size: 24px;
// }
@@ -1098,19 +1220,23 @@
    font-size: 24px;
  }
}
::v-deep.el-checkbox-group {
  span {
    font-size: 24px;
  }
}
.editor {
  line-height: normal !important;
  height: 600px;
  margin-bottom: 80px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
@@ -1125,14 +1251,17 @@
.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";
@@ -1142,26 +1271,32 @@
.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";
@@ -1171,10 +1306,12 @@
.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: "等宽字体";