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 | 417 ++++++++++++++++++++++------------------------------------
1 files changed, 159 insertions(+), 258 deletions(-)
diff --git a/src/views/knowledge/education/compilequer/index.vue b/src/views/knowledge/education/compilequer/index.vue
index 1060bfa..7d0db6e 100644
--- a/src/views/knowledge/education/compilequer/index.vue
+++ b/src/views/knowledge/education/compilequer/index.vue
@@ -253,7 +253,7 @@
</el-form-item>
</el-form>
</div>
- <!-- 瀹ｆ暀鍐呭 -->
+ <!-- 瀹ｆ暀鍐呭 -->
<div v-if="Editprogress == 2">
<el-row :gutter="20">
<el-col :span="4">
@@ -273,86 +273,27 @@
</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"> -->
-
- <!-- </el-col>
- </el-row> -->
- </el-form>
- </div>
- <!-- <div>
- <div id="quillEditorQiniu">
- <el-upload
- class="avatar-uploader"
- :action="uploadImgUrl"
- :accept="'image/*,video/*'"
- :show-file-list="false"
- :on-success="uploadEditorSuccess"
- :on-error="uploadEditorError"
- :before-upload="beforeEditorUpload"
- :headers="headers"
- >
- </el-upload>
- <quill-editor
- class="editor"
- v-model="content"
- ref="customQuillEditor"
- :options="editorOption"
- @blur="onEditorBlur"
- @focus="onEditorFocus"
- @change="onEditorChange"
- >
- </quill-editor>
- </div>
- </div> -->
- <!-- 鏂扮粍浠� -->
+ <!-- WangEditor 瀵屾枃鏈紪杈戝櫒 -->
<div style="border: 1px solid #ccc; margin: 10px">
<Toolbar
style="border-bottom: 1px solid #ccc"
- :editor="editor"
+ :editor="editorRef"
:defaultConfig="toolbarConfig"
- :mode="modes"
+ :mode="mode"
/>
<Editor
- style="height: 500px; overflow-y: hidden"
- v-model="content"
+ style="height: 800px; overflow-y: hidden"
+ v-model:html="content"
:defaultConfig="editorConfig"
- :mode="modes"
- @onCreated="onCreated"
+ :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="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>
@@ -369,201 +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, Editor, Toolbar },
data() {
return {
- editor: null,
- content: "<p>hello</p>",
- toolbarConfig: {},
+ // 缂栬緫鍣ㄥ疄渚�
+ editorRef: null,
+
+ // 缂栬緫鍣ㄥ唴瀹�
+ content: "<p>娴嬭瘯</p>",
+
+ // 缂栬緫鍣ㄦā寮�
+ mode: "default",
+
+ // 宸ュ叿鏍忛厤缃�
+ toolbarConfig: {
+ excludeKeys: [
+ "group-video",
+ "insertVideo",
+ "uploadVideo",
+ "emotion",
+ "codeBlock",
+ ]
+ },
+
+ // 缂栬緫鍣ㄩ厤缃�
editorConfig: {
- placeholder: "璇疯緭鍏ュ唴瀹�...",
- menus: [
- "head",
- "bold",
- "italic",
- "underline",
- "image",
- "link",
- "list",
- "undo",
- "redo",
- "file", // 娣诲姞鑷畾涔夋枃浠朵笂浼犺彍鍗�
- ],
- uploadImgServer: process.env.VUE_APP_BASE_API + "/common/uploadSort", // 鍥剧墖涓婁紶鎺ュ彛
- uploadImgHeaders: {
- Authorization: "Bearer " + getToken(),
- }, // 鑷畾涔変笂浼犵殑 headers
- uploadImgParams: { key: "value" }, // 鑷畾涔変笂浼犵殑鍙傛暟
- uploadImgMaxSize: 2 * 1024 * 1024, // 鍥剧墖鏈�澶уぇ灏忥紝鍗曚綅 Byte
- uploadImgMaxLength: 1, // 涓�娆℃渶澶氫笂浼犲浘鐗囨暟閲�
- uploadImgTimeout: 3 * 60 * 1000, // 瓒呮椂鏃堕棿锛屽崟浣� ms
- uploadImgHooks: {
- customInsert: (insertImgFn, result) => {
- const url = result.url; // 鑾峰彇鍥剧墖鍦板潃
- insertImgFn(url); // 鎻掑叆鍥剧墖
- },
- },
- customMenus: {
- file: {
- tip: "涓婁紶鏂囦欢",
- click: (editor) => {
- const input = document.createElement("input");
- input.type = "file";
- input.accept =
- "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"; // 鏀寔鐨勬枃浠剁被鍨�
- input.onchange = (e) => {
- const file = e.target.files[0];
- if (!file) return;
+ 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);
- // 纭繚 process.env.VUE_APP_BASE_API 鏄纭殑
- const uploadUrl =
- process.env.VUE_APP_BASE_API + "/common/uploadSort";
- axios
- .post(uploadUrl, formData, {
+ const response = await axios.post(
+ process.env.VUE_APP_BASE_API + "/common/uploadSort",
+ formData,
+ {
headers: {
- Authorization: "Bearer " + getToken(),
- },
- })
- .then((res) => {
- const url = res.data.url; // 鑾峰彇鏂囦欢鍦板潃
- // 鎻掑叆鏂囦欢閾炬帴浣滀负鏅�氭枃鏈�
- editor.txt.append(url + " ");
- // 鎴栬�呮彃鍏ユ枃浠堕摼鎺ヤ綔涓鸿秴閾炬帴
- // editor.cmd.do('insertLink', { name: '鏂囦欢閾炬帴', url: url });
- })
- .catch((err) => {
- console.error("鏂囦欢涓婁紶澶辫触", err);
- });
- };
- input.click();
- },
- },
- },
+ "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("鍥剧墖涓婁紶澶辫触");
+ }
+ }
+ }
+ }
},
- modes: "default", // or 'simple'
+ // 涓婁紶閰嶇疆
headers: {
- Authorization: "Bearer " + getToken(),
+ Authorization: "Bearer " + getToken()
},
- uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadSort",
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: [], //澶氶�夐閫変腑
@@ -572,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",
// 鍐呯綉鐨勯儴鍒嗭紙鏂囦欢锛�
@@ -624,11 +493,7 @@
],
addvalue: "娣诲姞棰樼洰",
- variablelist: [
- { variatename: "濮撳悕", variate: "${name}", default: 1 },
- { variatename: "鐢佃瘽", variate: "${phone}", default: 1 },
- { variatename: "鐥呮儏", variate: "${illness}", default: 1 },
- ],
+
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
@@ -655,11 +520,15 @@
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;
@@ -670,7 +539,24 @@
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 };
@@ -703,7 +589,7 @@
});
}
// 瀹ｆ暀鍒嗙被
- getheLibraryAssort({}).then((res) => {
+ getheLibraryAssort({ hetype: 1 }).then((res) => {
this.sortlist = res.rows;
console.log(this.sortlist);
});
@@ -1110,25 +996,40 @@
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>
.sidecolumn {
// width: 300px;
--
Gitblit v1.9.3