测试完成

WXL (wul)

21 小时以前 6e413d95d035e6d798f62fde7964287e1d2fa416

 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 };
@@ -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;