From d9a869193fb1eeeabd8a3afbb5341a187684c3d0 Mon Sep 17 00:00:00 2001
From: heimawl <1785969728@qq.com>
Date: 星期一, 19 六月 2023 15:37:23 +0800
Subject: [PATCH] 完成标签管理模块数据交互
---
src/views/knowledge/education/compilequer/index.vue | 389 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 236 insertions(+), 153 deletions(-)
diff --git a/src/views/knowledge/education/compilequer/index.vue b/src/views/knowledge/education/compilequer/index.vue
index 81ced24..3df9ce1 100644
--- a/src/views/knowledge/education/compilequer/index.vue
+++ b/src/views/knowledge/education/compilequer/index.vue
@@ -44,7 +44,7 @@
multiple
filterable
placeholder="璇烽�夋嫨鍒嗙被"
- >
+ >
<el-option
class="ruleFormaa"
v-for="item in options"
@@ -90,164 +90,116 @@
<!-- 瀹ｆ暀鍐呭 -->
<div v-if="Editprogress == 2">
<div class="leftvlue-jbxx">瀹ｆ暀鍐呭</div>
- <el-form
- :model="ruleForm"
- :rules="rules"
- ref="ruleForm"
- label-width="100px"
- class="demo-ruleForm"
- >
- <el-form-item label="瀹ｆ暀浠嬬粛" prop="desc">
- <el-cascader
- class="demo-cascader"
- v-model="ruleForm.templatevalue"
- :options="asoptions"
- :props="{ expandTrigger: 'hover' }"
- ></el-cascader>
- <el-select v-model="ruleForm.data2" placeholder="鎻愪氦鎻愮ず">
- <el-option
- v-for="item in asoptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- <div style="display: flex; margin-top: 20px">
- <div class="PreviewTemplate" @click="PreviewTemplate()">
- 棰勮妯＄増
- </div>
- <el-button type="primary">纭寮曠敤</el-button>
- </div>
- </el-form-item>
- <el-form-item label="娲诲姩褰㈠紡" prop="desc">
- <el-input type="textarea" v-model="ruleForm.desc"></el-input>
- </el-form-item>
- <el-form-item label="娲诲姩褰㈠紡" prop="desc">
- <el-input type="textarea" v-model="ruleForm.desc"></el-input>
- <div class="addtopic">
- <el-select
- v-model="addvalue"
- @change="changeaddtopic"
- class="addtopic-input"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
-
- <div class="presentation">
- <div class="presentation-left">
- <el-table v-loading="loading" :data="userList">
- <el-table-column
- label="搴忓彿"
- align="center"
- key="userid"
- prop="userid"
- />
- <el-table-column
- label="棰樼洰"
- align="center"
- key="userName"
- prop="userName"
- :show-overflow-tooltip="true"
- />
-
- <el-table-column
- label="鎿嶄綔"
- align="center"
- width="300"
- class-name="small-padding fixed-width"
- >
- <template slot-scope="scope">
- <!-- <el-button
- size="medium"
- type="text"
- @click="goQRCode(scope.row)"
- v-hasPermi="['system:user:edit']"
- >
- <span class="button-text"
- ><i class="el-icon-edit"></i>浜岀淮鐮�</span
- ></el-button
- >
- <el-button
- size="medium"
- type="text"
- @click="ViewQuestionnaire(scope.row)"
- v-hasPermi="['system:user:edit']"
- ><span class="button-textck"
- ><i class="el-icon-edit"></i>鏌ョ湅</span
- ></el-button
- > -->
- <el-button
- size="medium"
- type="text"
- @click="handleUpdate(scope.row)"
- v-hasPermi="['system:user:edit']"
- ><span class="button-textxg"
- ><i class="el-icon-scissors"></i>淇敼</span
- ></el-button
- >
- <el-button
- size="medium"
- type="text"
- @click="handleDelete(scope.row)"
- v-hasPermi="['system:user:remove']"
- ><span class="button-textsc"
- ><i class="el-icon-delete"></i>鍒犻櫎</span
- ></el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
- </div>
- <div class="presentation-right">
- <div class="headline">棰樼洰璁剧疆璇︽儏</div>
- <div>棰樼洰鏍囬锛�<span>杩欏鏈烘瀯鎬庝箞鏍�</span></div>
- <div>鏄惁蹇呯瓟锛�<span>鏄�</span> 鏄惁闅愯棌锛�<span>鍚�</span></div>
- <div class="headline">閫夐」璁剧疆</div>
- <div>
- <p>閫夐」1:<span>鍖荤枟鏈烘瀯</span></p>
- <p>
- 濉啓鏄庣粏锛�<span>鏃�</span> 寮傚父閫夐」锛�<span>鏃�</span>
- 鍒嗗�硷細<span>3</span>
- </p>
- <p>閫変腑鎻愮ず锛�<span>杩欎釜棰樻湁鐐归毦璇锋敞鎰�</span></p>
- <p>閫変腑璺宠浆锛�<span>鏃�</span></p>
- </div>
- </div>
- </div>
- </el-form-item>
- <el-form-item>
- <el-button type="success" @click="submitForm('ruleForm')"
- >绔嬪嵆鍒涘缓</el-button
+ <div>
+ <div>
+ <el-button @click="openContent" type="primary">鏌ョ湅鍏冪礌</el-button>
+ </div>
+ <div id="quillEditorQiniu">
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload begin-->
+ <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-button type="primary" @click="laststep()">涓婁竴姝�</el-button>
- <el-button @click="resetForm('ruleForm')">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
+ </el-upload>
+ <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end-->
+ <quill-editor
+ class="editor"
+ v-model="content"
+ ref="customQuillEditor"
+ :options="editorOption"
+ >
+ </quill-editor>
+ </div>
+ </div>
</div>
</div>
</div>
</template>
<script>
+import { quillEditor } from "vue-quill-editor";
+// import * as Quill from "quill";
+import Quill from "quill";
+
+// 杩欓噷寮曞叆淇敼杩囩殑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 {
data() {
return {
+ headers: {
+ Authorization: "Bearer " + getToken(),
+ },
+ uploadImgUrl: "/v1/admin/common/upload",
+ uploadUrlPath: "娌℃湁鏂囦欢涓婁紶",
+ quillUpdateImg: false,
+ content: "", //鏈�缁堜繚瀛樼殑鍐呭
+ 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", //褰撳墠鐗堟湰
@@ -669,6 +621,13 @@
},
created() {},
+ watch: {
+ content(newVal, oldVal) {
+ //this.$emit('input', newVal);
+ console.log(newVal);
+ console.log(oldVal);
+ },
+ },
methods: {
submitForm(formName) {
@@ -714,6 +673,58 @@
},
resetForm(formName) {
this.$refs[formName].resetFields();
+ },
+
+ //涓婁紶鍥剧墖涔嬪墠async
+ beforeEditorUpload(res, file) {
+ //鏄剧ず涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = true;
+ // const res1 = await uploadImage()
+ // console.log(res1,'=====');
+ // this.$emit('before',res, file)
+ console.log(res);
+ console.log(file);
+ },
+ // 涓婁紶鍥剧墖鎴愬姛
+ uploadEditorSuccess(res, file) {
+ console.log("涓婁紶鎴愬姛");
+ // this.$emit('upload',res, file)
+ console.log(res, file);
+ //鎷兼帴鍑轰笂浼犵殑鍥剧墖鍦ㄦ湇鍔″櫒鐨勫畬鏁村湴鍧�
+ let imgUrl = res.data.url;
+ let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
+ console.log(type);
+ // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
+ let quill = this.$refs.customQuillEditor.quill;
+ // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
+ let length = quill.getSelection().index;
+ // 鎻掑叆鍥剧墖||瑙嗛 res.info涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
+ if (type == "mp4" || type == "MP4") {
+ window.jsValue = imgUrl;
+ quill.insertEmbed(length, "video", imgUrl);
+ } else {
+ quill.insertEmbed(length, "image", imgUrl);
+ }
+ // 璋冩暣鍏夋爣鍒版渶鍚�
+ quill.setSelection(length + 1);
+ //鍙栨秷涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = false;
+ },
+ // 涓婁紶(鏂囦欢)鍥剧墖澶辫触
+ uploadEditorError(res, file) {
+ console.log(res);
+ console.log(file);
+ //椤甸潰鎻愮ず
+ this.$message.error("涓婁紶鍥剧墖澶辫触");
+ //鍙栨秷涓婁紶鍔ㄧ敾
+ this.quillUpdateImg = false;
+ },
+ //涓婁紶缁勪欢杩斿洖鐨勭粨鏋�
+ uploadResult: function (res) {
+ this.uploadUrlPath = res;
+ },
+ openContent: function () {
+ console.log(this.content);
},
},
};
@@ -859,8 +870,80 @@
font-size: 24px;
}
}
-// ::v-deep.el-form-item--medium .el-form-item__content {
-// line-height: 36px;
-// display: flex;
-// }
+.editor {
+ line-height: normal !important;
+ height: 400px;
+ margin-bottom: 50px;
+}
+.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