| | |
| | | <!-- 宣教内容 --> |
| | | <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> |
| | |
| | | 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 |
| | |
| | | <el-button type="info" @click="closeFm('ruleForm')" |
| | | >关闭</el-button |
| | | > |
| | | </div></el-col |
| | | > |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </div> |
| | |
| | | ]; |
| | | |
| | | 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, |
| | |
| | | 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, |
| | |
| | | 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", |
| | |
| | | }, |
| | | }; |
| | | }, |
| | | activated() { |
| | | if (this.id != this.$route.query.id) { |
| | | this.gettabList(); |
| | | this.getList(); |
| | | this.illnessUpdate(); |
| | | } |
| | | }, |
| | | |
| | | created() { |
| | | this.gettabList(); |
| | |
| | | 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); |
| | | } |
| | |
| | | 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; |
| | |
| | | : ""; |
| | | |
| | | 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) => { |
| | |
| | | |
| | | // -------------------------- |
| | | |
| | | // 预览模版 |
| | | // 预览模板 |
| | | PreviewTemplate() { |
| | | this.drawer = true; |
| | | }, |
| | |
| | | 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); |
| | | |
| | |
| | | // 获取光标所在位置 |
| | | 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 { |
| | |
| | | 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"); |
| | | }) |
| | |
| | | console.error("Failed to fetch file:", error); |
| | | }); |
| | | }, |
| | | // 处理url |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | .Questionnairemanagement { |
| | | // display: flex; |
| | | } |
| | | |
| | | .sidecolumn { |
| | | // width: 300px; |
| | | // min-height: 100vh; |
| | |
| | | -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; |
| | |
| | | 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; |
| | |
| | | margin: 0 20px; |
| | | } |
| | | } |
| | | |
| | | .xinz-inf { |
| | | font-size: 18px; |
| | | white-space: nowrap; |
| | |
| | | .el-tag + .el-tag { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | .button-new-tag { |
| | | margin-left: 10px; |
| | | height: 32px; |
| | |
| | | padding-top: 0; |
| | | padding-bottom: 0; |
| | | } |
| | | |
| | | .input-new-tag { |
| | | width: 90px; |
| | | margin-left: 10px; |
| | | vertical-align: bottom; |
| | | } |
| | | } |
| | | |
| | | .preview-left { |
| | | margin: 20px; |
| | | // margin: 20px; |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep .addtopic-input { |
| | | input { |
| | | background: #02a7f0; |
| | |
| | | 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; |
| | | // } |
| | |
| | | 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: "保存"; |
| | |
| | | .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"; |
| | |
| | | .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"; |
| | |
| | | .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: "等宽字体"; |