From ed9c3d2d0354d493209769f0013de98eb7e443e5 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期四, 18 九月 2025 16:39:54 +0800
Subject: [PATCH] 电话、详情、表单
---
src/views/knowledge/education/compilequer/index.vue | 513 +++++++++++++++++++++++---------------------------------
1 files changed, 208 insertions(+), 305 deletions(-)
diff --git a/src/views/knowledge/education/compilequer/index.vue b/src/views/knowledge/education/compilequer/index.vue
index 116116c..7d0db6e 100644
--- a/src/views/knowledge/education/compilequer/index.vue
+++ b/src/views/knowledge/education/compilequer/index.vue
@@ -24,6 +24,7 @@
<!-- 鍩烘湰淇℃伅 -->
<div v-if="Editprogress == 1">
<div class="leftvlue-jbxx">鍩烘湰淇℃伅</div>
+ <el-divider></el-divider>
<el-form
:model="ruleForm"
:rules="rules"
@@ -252,96 +253,48 @@
</el-form-item>
</el-form>
</div>
- <!-- 瀹ｆ暀鍐呭 -->
+ <!-- 瀹ｆ暀鍐呭 -->
<div v-if="Editprogress == 2">
<el-row :gutter="20">
<el-col :span="4">
<div class="leftvlue-jbxx">瀹ｆ暀鍐呭</div>
</el-col>
- </el-row>
-
- <div>
- <el-form
- :model="ruleForm"
- :rules="rules"
- ref="ruleForm"
- label-width="100px"
- class="demo-ruleForm"
- >
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="璧勬枡褰㈠紡" prop="region">
- <el-select
- v-model="ruleForm.shape"
- placeholder="璇烽�夋嫨鍐呭褰㈠紡"
- >
- <el-option
- v-for="item in xjxsoptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <div>
- <el-button @click="laststep('ruleForm')">涓婁竴姝�</el-button>
- <el-button
- type="success"
- @click="Departmenttreatment('ruleForm')"
- >淇濆瓨</el-button
- >
- <el-button
- type="warning"
- @click="Departmenttreatment('ruleForm')"
- >鍙﹀瓨鏂扮増鏈�</el-button
- >
- <el-button type="info" @click="closeFm('ruleForm')"
- >鍏抽棴</el-button
- >
- </div>
- </el-col>
- </el-row>
- </el-form>
- </div>
- <div>
- <el-upload
- class="upload-demo"
- :action="uploadImgUrlword"
- :on-success="uploadEditorSuccessword"
- :on-error="uploadEditorErrorword"
- :before-upload="beforeEditorUploadword"
- :headers="headers"
- >
- <el-button size="small" type="primary">word鏂囦欢涓婁紶</el-button>
- </el-upload>
- <div id="quillEditorQiniu">
- <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload begin-->
+ <el-col :offset="16" :span="4">
<el-upload
- class="avatar-uploader"
- :action="uploadImgUrl"
- :accept="'image/*,video/*'"
- :show-file-list="false"
- :on-success="uploadEditorSuccess"
- :on-error="uploadEditorError"
- :before-upload="beforeEditorUpload"
+ class="upload-demo"
+ :action="uploadImgUrlword"
+ :on-success="uploadEditorSuccessword"
+ :on-error="uploadEditorErrorword"
+ :before-upload="beforeEditorUploadword"
:headers="headers"
>
+ <el-button size="small" type="primary">word鏂囦欢涓婁紶</el-button>
</el-upload>
- <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end-->
- <quill-editor
- class="editor"
- v-model="content"
- ref="customQuillEditor"
- :options="editorOption"
- @blur="onEditorBlur"
- @focus="onEditorFocus"
- @change="onEditorChange"
- >
- </quill-editor>
- </div>
+ </el-col>
+ </el-row>
+
+ <!-- WangEditor 瀵屾枃鏈紪杈戝櫒 -->
+ <div style="border: 1px solid #ccc; margin: 10px">
+ <Toolbar
+ style="border-bottom: 1px solid #ccc"
+ :editor="editorRef"
+ :defaultConfig="toolbarConfig"
+ :mode="mode"
+ />
+ <Editor
+ style="height: 800px; overflow-y: hidden"
+ v-model:html="content"
+ :defaultConfig="editorConfig"
+ :mode="mode"
+ @onCreated="handleEditorCreated"
+ />
+ </div>
+
+ <div>
+ <el-button @click="laststep('ruleForm')">涓婁竴姝�</el-button>
+ <el-button type="success" @click="Departmenttreatment('ruleForm')">淇濆瓨</el-button>
+ <el-button type="warning" @click="Departmenttreatment('ruleForm')">鍙﹀瓨鏂扮増鏈�</el-button>
+ <el-button type="info" @click="closeFm('ruleForm')">鍏抽棴</el-button>
</div>
</div>
</div>
@@ -357,129 +310,141 @@
</template>
<script>
-import { quillEditor } from "vue-quill-editor";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import '@wangeditor/editor/dist/css/style.css';
import axios from "axios";
+import { getToken } from "@/utils/auth";
import {
getheLibraryAssort,
- delheLibraryAssort,
- addheLibraryAssort,
addtargetillness,
- getlibrarylist,
- dellibraryinfo,
- deltargetillness,
compilelibrary,
addrichText,
getlibraryinfo,
getillnesslist,
- illnesslistget,
- getillness,
} from "@/api/AiCentre/index";
-import OptionalForm from "@/components/OptionalForm"; //姝ｅ垯缁勪欢
-
+import OptionalForm from "@/components/OptionalForm";
import { listDept } from "@/api/system/dept";
-// import * as Quill from "quill";
-import Quill from "quill";
import { listtag } from "@/api/system/label";
import store from "@/store";
-// 杩欓噷寮曞叆淇敼杩囩殑video妯″潡骞舵敞鍐�
-import Video from "./video";
-Quill.register(Video, true);
-//鑾峰彇鐧诲綍token锛屽紩鍏ユ枃浠讹紝濡傛灉鍙槸绠�鍗曟祴璇曪紝娌℃湁涓婁紶鏂囦欢鏄惁鐧诲綍鐨勯檺鍒剁殑璇濓紝
-//杩欎釜token鍙互涓嶇敤鑾峰彇锛屾枃浠跺彲浠ヤ笉寮曞叆锛屾妸涓婇潰瀵瑰簲鐨勪笂浼犳枃浠舵惡甯﹁姹傚ご :headers="headers" 杩欎釜浠ｇ爜鍒犳帀鍗冲彲
-import { getToken } from "@/utils/auth";
-const toolbarOptions = [
- ["bold", "italic", "underline", "strike"], // toggled buttons
- ["blockquote", "code-block"],
-
- [{ header: 1 }, { header: 2 }], // custom button values
- [{ list: "ordered" }, { list: "bullet" }],
- [{ script: "sub" }, { script: "super" }], // superscript/subscript
- [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
- [{ direction: "rtl" }], // text direction
-
- [{ size: ["small", false, "large", "huge"] }], // custom dropdown
- [{ header: [1, 2, 3, 4, 5, 6, false] }],
-
- [{ color: [] }, { background: [] }], // dropdown with defaults from theme
- [{ font: [] }],
- [{ align: [] }],
- ["link", "image", "video"],
- ["clean"], // remove formatting button
-];
-
export default {
name: "aEducationinfo",
- components: { OptionalForm },
+ components: { OptionalForm, Editor, Toolbar },
data() {
return {
- headers: {
- Authorization: "Bearer " + getToken(),
+ // 缂栬緫鍣ㄥ疄渚�
+ editorRef: null,
+
+ // 缂栬緫鍣ㄥ唴瀹�
+ content: "<p>娴嬭瘯</p>",
+
+ // 缂栬緫鍣ㄦā寮�
+ mode: "default",
+
+ // 宸ュ叿鏍忛厤缃�
+ toolbarConfig: {
+ excludeKeys: [
+ "group-video",
+ "insertVideo",
+ "uploadVideo",
+ "emotion",
+ "codeBlock",
+ ]
},
- uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadSort",
+
+ // 缂栬緫鍣ㄩ厤缃�
+ editorConfig: {
+ placeholder: "璇疯緭鍏ュ鏁欏唴瀹�...",
+ MENU_CONF: {
+ uploadImage: {
+ server: process.env.VUE_APP_BASE_API + "/common/uploadSort",
+ fieldName: "file",
+ maxFileSize: 2 * 1024 * 1024,
+ maxNumberOfFiles: 1,
+ allowedFileTypes: ["image/*"],
+ headers: {
+ Authorization: "Bearer " + getToken()
+ },
+ customUpload: async (file, insertFn) => {
+ try {
+ const formData = new FormData();
+ formData.append("file", file);
+
+ const response = await axios.post(
+ process.env.VUE_APP_BASE_API + "/common/uploadSort",
+ formData,
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ Authorization: "Bearer " + getToken()
+ }
+ }
+ );
+
+ if (response.data && response.data.url) {
+ let imgUrl = response.data.url;
+ imgUrl = imgUrl.replace(
+ "http://218.108.11.22:8093/profile-api/upload",
+ "http://192.168.191.181:8095/profile/upload"
+ );
+ insertFn(imgUrl);
+ }
+ } catch (error) {
+ console.error("鍥剧墖涓婁紶澶辫触", error);
+ this.$message.error("鍥剧墖涓婁紶澶辫触");
+ }
+ }
+ }
+ }
+ },
+ // 涓婁紶閰嶇疆
+ headers: {
+ Authorization: "Bearer " + getToken()
+ },
uploadImgUrlword: process.env.VUE_APP_BASE_API + "/common/uploadShow",
- uploadUrlPath: "娌℃湁鏂囦欢涓婁紶",
- quillUpdateImg: false,
- fileList: [
- {
- name: "food.jpeg",
- url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
- },
- {
- name: "food2.jpeg",
- url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
- },
- ],
- 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: "", //鏂囦欢鍚�
+
+ // 椤甸潰鐘舵��
+ Editprogress: 1,
+ loading: false,
+
+ // 琛ㄥ崟鏁版嵁
+ ruleForm: {
+ campus: [],
+ heLibraryTagList: [],
+ tempDetpRelevances: [],
+ version: "1.0.1",
+ preachname: "",
+ preachcontent: "",
+ isAvailable: "",
+ suitway: []
+ },
+
+ // 鍏朵粬鏁版嵁
dynamicTags: [],
+ sortlist: [],
+ courtyardlist: [],
+ illnesslist: [],
+ deptList: [],
+ tempDetpRelevanceslist: [],
+ variablelist: [
+ { variatename: "濮撳悕", variate: "${name}", default: 1 },
+ { variatename: "鐢佃瘽", variate: "${phone}", default: 1 },
+ { variatename: "鐥呮儏", variate: "${illness}", default: 1 }
+ ],
+
+ props: {
+ multiple: true,
+ value: "deptId",
+ label: "deptName"
+ },
+ fileName: "", //鏂囦欢鍚�
inputVisible: false,
illnessVisible: false,
dialogVisiblepatient: false, //閫傜敤鐤剧梾绐楀彛
inputValue: "",
- // 瀵屾枃鏈�
- editorOption: {
- placeholder: "浣犳兂璇翠粈涔堬紵",
- modules: {
- imageResize: {
- displayStyles: {
- backgroundColor: "black",
- border: "none",
- color: "white",
- },
- modules: ["Resize", "DisplaySize", "Toolbar"],
- },
- toolbar: {
- container: toolbarOptions, // 宸ュ叿鏍�
- handlers: {
- image: function (value) {
- if (value) {
- document
- .querySelector("#quillEditorQiniu .avatar-uploader input")
- .click();
- } else {
- this.quill.format("image", false);
- }
- },
- video: function (value) {
- if (value) {
- document
- .querySelector("#quillEditorQiniu .avatar-uploader input")
- .click();
- } else {
- this.quill.format("video", false);
- }
- },
- },
- },
- },
- },
-
sidecolumnrabs: "left", //鏂瑰悜
- Editprogress: 1, //缂栬緫杩涘害
currentVersion: "1.2.3", //褰撳墠鐗堟湰
- loading: false, // 閬僵灞�
drawer: false, //鎺у埗灞曞紑
radio: "false", //鍗曢�夐閫変腑
radios: [], //澶氶�夐閫変腑
@@ -488,28 +453,16 @@
total: 1,
hetype: "",
id: null,
- ruleForm: {
- campus: [],
- heLibraryTagList: [],
- tempDetpRelevances: [],
- version: "1.0.1",
- },
rules: {},
rulesa: {},
mode: [],
editableTabs: [],
- sortlist: [],
usable: [],
- courtyardlist: [],
precedencetype: [],
optionsillness: [],
illnesslistapi: [],
- illnesslist: [],
options: [],
optionstag: [],
- deptList: [],
- tempDetpRelevanceslist: [],
- props: { multiple: true, value: "deptId", label: "deptName" },
// 鍐呯綉鐨勯儴鍒嗭紙鏂囦欢锛�
oldPattern: "http://192.168.191.181:8095/profile/upload",
// 鍐呯綉鐨勯儴鍒嗭紙鏂囦欢锛�
@@ -540,11 +493,7 @@
],
addvalue: "娣诲姞棰樼洰",
- variablelist: [
- { variatename: "濮撳悕", variate: "${name}", default: 1 },
- { variatename: "鐢佃瘽", variate: "${phone}", default: 1 },
- { variatename: "鐥呮儏", variate: "${illness}", default: 1 },
- ],
+
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
@@ -571,14 +520,44 @@
this.courtyardlist = store.getters.courtyardlist;
},
watch: {
- content(newVal, oldVal) {
- //this.$emit('input', newVal);
- console.log(newVal, "A");
- console.log(oldVal, "B");
- },
+ // content(newVal, oldVal) {
+ // //this.$emit('input', newVal);
+ // console.log(newVal, "A");
+ // console.log(oldVal, "B");
+ // },
+ content(newVal) {
+ // 鍐呭鍙樺寲鏃惰Е鍙戯紝鍙互鍦ㄨ繖閲屽鐞嗚嚜鍔ㄤ繚瀛樼瓑閫昏緫
+ this.$emit('content-change', newVal)
+ }
},
-
+ beforeDestroy() {
+ const editor = this.editor;
+ if (editor == null) return;
+ editor.destroy(); // 缁勪欢閿�姣佹椂锛屽強鏃堕攢姣佺紪杈戝櫒
+ },
methods: {
+ onCreated(editor) {
+ this.editor = Object.seal(editor); // 涓�瀹氳鐢� Object.seal()锛屽惁鍒欎細鎶ラ敊
+ },
+ // 缂栬緫鍣ㄥ垱寤哄洖璋�
+ handleEditorCreated(editor) {
+ this.editorRef = editor;
+ console.log("缂栬緫鍣ㄥ凡鍒涘缓", editor);
+ },
+
+ // 閿�姣佺紪杈戝櫒
+ destroyEditor() {
+ if (this.editorRef) {
+ this.editorRef.destroy();
+ this.editorRef = null;
+ }
+ },
+
+ // 鑾峰彇鍐呭HTML
+ getEditorContent() {
+ return this.content;
+ },
+ // ---------------------------------
processElement(element) {
return { ...element, isoperation: null };
},
@@ -610,7 +589,7 @@
});
}
// 瀹ｆ暀鍒嗙被
- getheLibraryAssort({}).then((res) => {
+ getheLibraryAssort({ hetype: 1 }).then((res) => {
this.sortlist = res.rows;
console.log(this.sortlist);
});
@@ -943,7 +922,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 {
@@ -1017,29 +996,41 @@
console.error("Failed to fetch file:", error);
});
},
+ // Getmissioncontent(url) {
+ // axios
+ // .get(url)
+ // .then((response) => {
+ // console.log(response.data, "鏁版嵁"); // 杈撳嚭鑾峰彇鍒扮殑鏂囦欢鍐呭
+ // this.content = response.data;
+ // this.fileName = this.getFileNameFromPath(response.url);
+ // console.log(this.fileName, "this.fileName");
+ // })
+ // .catch((error) => {
+ // console.error("Failed to fetch file:", error);
+ // });
+ // },
+ // 鑾峰彇杩滅▼鍐呭
Getmissioncontent(url) {
- axios
- .get(url)
+ axios.get(url)
.then((response) => {
- console.log(response.data, "鏁版嵁"); // 杈撳嚭鑾峰彇鍒扮殑鏂囦欢鍐呭
this.content = response.data;
- this.fileName = this.getFileNameFromPath(response.url);
- console.log(this.fileName, "this.fileName");
})
.catch((error) => {
- console.error("Failed to fetch file:", error);
+ console.error("鑾峰彇鍐呭澶辫触:", error);
});
},
// 澶勭悊url
},
+ // 鐢熷懡鍛ㄦ湡閽╁瓙
+ beforeUnmount() {
+ this.destroyEditor()
+ },
};
</script>
-
+<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style src="@/assets/styles/global.css"></style>
+<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
-.Questionnairemanagement {
- // display: flex;
-}
-
.sidecolumn {
// width: 300px;
// min-height: 100vh;
@@ -1070,8 +1061,10 @@
}
.leftvlue-jbxx {
- margin-bottom: 50px;
- font-size: 20px;
+ font-size: 24px;
+ height: 30px;
+ border-left: 3px solid #41a1be;
+ padding-left: 3px;
span {
position: absolute;
@@ -1225,95 +1218,5 @@
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: "淇濆瓨";
- padding-right: 0px;
-}
-
-.ql-snow .ql-tooltip[data-mode="video"]::before {
- content: "璇疯緭鍏ヨ棰戝湴鍧�:";
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label::before,
-.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-label::before,
-.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-label::before,
-.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: "绛夊瀛椾綋";
}
</style>
--
Gitblit v1.9.3