From a95986eb5695f669f160969997553c9b01f89bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Tue, 28 May 2024 15:19:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/course/course-add-or-update.vue   | 284 +++++++-----------
 1 file changed, 114 insertions(+), 170 deletions(-)

diff --git a/src/views/modules/course/course-add-or-update.vue b/src/views/modules/course/course-add-or-update.vue
index b4607d1..0a6048d 100644
--- a/src/views/modules/course/course-add-or-update.vue
+++ b/src/views/modules/course/course-add-or-update.vue
@@ -1,5 +1,6 @@
 <template>
   <el-dialog
+  width="1200px"
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
     :visible.sync="visible"
@@ -44,151 +45,29 @@
           <img width="100%" :src="dataForm.image" alt="" />
         </el-dialog>
       </el-form-item>
-     
-          <div style="height: auto;margin-bottom: 80px;">
-            <el-form-item label="内容" prop="url">
-              <el-upload
-                class="chapter-avatar-uploader"
-                :action="baseUrl + '/oss/fileoss'"
-                accept=".jpeg,.jpg,.gif,.png"
-                :show-file-list="false"
-                :on-success="contentUploadSuccess"
-              >
-              </el-upload>
-              <quill-editor
-                v-model="dataForm.content"
-                ref="myQuillEditor"
-                style="height: 400px;"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @ready="onEditorReady($event)"
-                class="chapter_editor"
-              >
-              </quill-editor>
-            </el-form-item>
-          </div>
-       
-      <!-- <el-row>
-        <el-col :span="12">
-          <el-form-item label="作者" prop="authorId">
-        <el-select
-          v-model="dataForm.authorId"
-          multiple
-          filterable
-          allow-create
-          size="small"
-          default-first-option
-          placeholder="请输入作者姓名">
-          <el-option
-            v-for="item in authorList"
-            :key="item.value + ''"
-            :label="item.value"
-            :value="item.id + ''">
-          </el-option>
-        </el-select>
+      <el-form-item label="内容" prop="sort" style="margin-bottom: 140px;">
+        <div style="height: calc(620px - 120px)">
+          <el-upload
+            class="chapter-avatar-uploader"
+            :action="baseUrl + '/oss/fileoss'"
+            accept=".jpeg,.jpg,.gif,.png"
+            :show-file-list="false"
+            :on-success="contentUploadSuccess"
+          >
+          </el-upload>
+          <quill-editor
+            v-model="dataForm.content"
+            ref="myQuillEditor"
+            :options="editorOption"
+            @blur="onEditorBlur($event)"
+            @focus="onEditorFocus($event)"
+            @ready="onEditorReady($event)"
+            class="chapter_editor"
+            style="height: 100%;"
+          >
+          </quill-editor>
+        </div>
       </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="出版社" prop="publisherId">
-            <el-select v-model="dataForm.publisherId" multiple filterable allow-create default-first-option
-              placeholder="请输入出版社名称">
-              <el-option v-for="item in publisherList" :key="item.value + ''" :label="item.value" :value="item.id + ''">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-form-item label="序言" prop="title">
-        <el-input v-model="dataForm.title" placeholder="序言" :rows="3" type="textarea"></el-input>
-      </el-form-item>
-      <el-form-item label="拆分类型" prop="splits">
-        <el-radio-group v-model="dataForm.splits">
-          <el-radio v-for="item in splitsTypeList" :key="item.dictType" :label="item.dictType"
-            :value="item.dictType">{{item.dictValue}}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="目录" prop="content">
-        <el-input v-model="dataForm.content" placeholder="目录" :rows="5" type="textarea"></el-input>
-      </el-form-item>
-      <el-form-item label="简介" prop="description">
-        <el-input v-model="dataForm.description" placeholder="简介" :rows="5" type="textarea"></el-input>
-      </el-form-item>
-      <el-form-item label="图书分类" prop="bookType">
-       <el-radio-group v-model="dataForm.bookType">
-         <el-radio :label="0">普通</el-radio>
-         <el-radio :label="1">中医经典</el-radio>
-         <el-radio :label="2">国学经典</el-radio>
-       </el-radio-group>
-      </el-form-item>
-      <el-form-item label="相关古书" prop="relationId">
-        <el-select v-model="dataForm.relationId" filterable allow-create default-first-option
-          placeholder="请选择古书">
-          <el-option :key="0" label="无" :value="0"></el-option>
-          <el-option v-for="item in gushuList" :key="item.id" :label="item.name" :value="item.id">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-row>
-        <el-form-item label="图书类型" prop="medicaldesBookType">
-          <el-checkbox-group v-model="dataForm.medicaldesBookType">
-            <el-checkbox v-for="item in medicaldesBookTypeList" :key="item.dictType" :label="item.dictType"
-              :value="item.dictType">{{item.dictValue}}</el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-        <el-col :span="12">
-          <el-form-item label="是否可听">
-            <el-switch style="display: block" v-model="dataForm.canListen" active-color="#13ce66"
-              inactive-color="#ff4949" active-text="可听" inactive-text="不可听">
-            </el-switch>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-form-item label="是否参与打卡" prop="clockIn" label-width="250">
-        <el-radio-group v-model="dataForm.clockIn">
-          <el-radio :label="1">参与打卡</el-radio>
-          <el-radio :label="2">不参与打卡</el-radio>
-
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="是否参与讲书" prop="teachIn" label-width="250">
-        <el-radio-group v-model="dataForm.teachIn">
-          <el-radio :label="1">参与</el-radio>
-          <el-radio :label="0">不参与</el-radio>
-
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="付费类型" prop="isVip">
-        <el-radio-group v-model="dataForm.isVip">
-          <el-radio :label="2">付费</el-radio>
-          <el-radio :label="1">会免</el-radio>
-          <el-radio :label="0">免费</el-radio>
-
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="免费章节数" prop="freeChapterCount" label-width="250">
-        <el-input-number v-model="dataForm.freeChapterCount" :min="0" :max="10" label="免费章节数"></el-input-number>
-      </el-form-item>
-      <el-form-item label="文件上传" prop="novel">
-        <el-upload class="upload-demo" :action="baseUrl + '/oss/fileoss'" :on-preview="handlePreview"
-          :on-remove="handleRemoveNovel" :before-remove="beforeRemove" :on-success="handleNovelSuccess" multiple
-          :limit="3" :on-exceed="handleExceed" :file-list="fileListNovel">
-          <el-button size="small" type="primary">点击上传</el-button>
-        </el-upload>
-      </el-form-item>
-      <el-form-item label="插图" prop="images">
-        <el-upload :action="baseUrl + '/oss/fileoss'" list-type="picture-card" :on-preview="handlePictureCardPreview"
-          :file-list="fileList" :on-success="handlePicSuccess" :on-remove="handleRemove">
-          <i class="el-icon-plus"></i>
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
-          <img width="100%" :src="dataForm.images" alt="">
-        </el-dialog>
-      </el-form-item> -->
-      <!-- <el-form-item label="排序" prop="sort">
-        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
-      </el-form-item> -->
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="handlereset">取消</el-button>
@@ -199,9 +78,68 @@
 
 <script>
 import global from "../../common/common.vue"; //引入共用组间
+import { quillEditor } from "vue-quill-editor";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
+  ["blockquote", "code-block"], //引用，代码块
+  [{ header: 1 }, { header: 2 }], // 几级标题
+  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
+  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
+  [{ indent: "-1" }, { indent: "+1" }], // 缩进
+  [{ direction: "rtl" }], // 文字输入方向
+  [{ size: ["small", false, "large", "huge"] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 颜色选择
+  [
+    {
+      font: [
+        "SimSun",
+        "SimHei",
+        "Microsoft-YaHei",
+        "KaiTi",
+        "FangSong",
+        "Arial"
+      ]
+    }
+  ], // 字体
+  [{ align: [] }], // 居中
+  ["clean"], // 清除样式,
+  ["link", "image"] // 上传图片、上传视频
+];
 export default {
+  components: {
+    quillEditor
+  },
   data() {
     return {
+      editorOption: {
+        modules: {
+          history: {
+            delay: 1000,
+            maxStack: 50,
+            userOnly: false
+          },
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              image: function(value) {
+                if (value) {
+                  // 调用element的图片上传组件
+                  document
+                    .querySelector(".chapter-avatar-uploader input")
+                    .click();
+                } else {
+                  this.quill.format("image", false);
+                }
+              }
+            }
+          }
+        },
+        placeholder: "请输入正文"
+      },
       baseUrl: global.baseUrl,
       visible: false,
       bookList: [
@@ -350,9 +288,37 @@ export default {
     // this.restaurants = this.loadAll();
   },
   methods: {
+    contentUploadSuccess(res, file) {
+      // console.log(res)
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, "image", res.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error("图片插入失败！");
+      }
+    },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      //  console.log('editor blur!', quill)
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      //console.log('editor focus!', quill)
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      // console.log('editor ready!', quill)
+    },
     init(row) {
       console.log("11111", row);
-      if (row&&row.id) {
+      if (row && row.id) {
         this.$http
           .request({
             url: this.$http.adornUrl(this.urlList.info),
@@ -414,31 +380,9 @@ export default {
               id: this.dataForm.id || undefined,
               title: this.dataForm.title,
               sort: this.dataForm.sort,
-              image: this.dataForm.image
-              // 'authorId': this.dataForm.authorId.join(','),
-              // 'description': this.dataForm.description,
-              // 'title': this.dataForm.title,
-              // 'bookType': this.dataForm.bookType,
-              // 'publisherName': this.dataForm.publisherName,
-              // 'content': this.dataForm.content,
-              // 'type': this.dataForm.type.join(','),
-              // "medicaldesBookType": this.dataForm.medicaldesBookType.join(','),
-              // 'isVip': this.dataForm.isVip,
-              // 'freeChapterCount': this.dataForm.freeChapterCount,
-              // 'publisherId': this.dataForm.publisherId.join(','),
-              // 'images': this.dataForm.images,
-              // 'pid': this.dataForm.pid,
-              // 'level': this.dataForm.level,
-              // 'createTime': this.dataForm.createTime,
-              // 'updateTime': this.dataForm.updateTime,
-              // 'sort': this.dataForm.sort,
-              // 'delFlag': this.dataForm.delFlag,
-              // 'novel': this.dataForm.novel,
-              // 'splits': this.dataForm.splits,
-              // 'canListen': this.dataForm.canListen,
-              // 'relationId': this.dataForm.relationId,
-              // 'clockIn': this.dataForm.clockIn,
-              // 'teachIn': this.dataForm.teachIn
+              image: this.dataForm.image,
+              content: this.dataForm.content,
+              
             })
           }).then(({ data }) => {
             if (data && data.code === 0) {