refactor(qms): 重构趋势图展示逻辑

baoshiwei

2025-05-20 e181f04c642204e79749af93fa921875ff6c21ba

 src/components/Editor/index.vue

@@ -2,7 +2,6 @@
  <div>
    <el-upload
      v-if="type === 'url'"
      ref="uploadRef"
      :action="upload.url"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
@@ -12,25 +11,29 @@
      :show-file-list="false"
      :headers="upload.headers"
    >
      <i ref="uploadRef"></i>
    </el-upload>
    <div class="editor">
      <quill-editor
        ref="quillEditorRef"
        v-model:content="content"
        content-type="html"
        :options="options"
        :style="styles"
        @text-change="(e: any) => $emit('update:modelValue', content)"
      />
    </div>
  </div>
  <div class="editor">
    <quill-editor
      ref="quillEditorRef"
      v-model:content="content"
      content-type="html"
      :options="options"
      :style="styles"
      @text-change="(e: any) => $emit('update:modelValue', content)"
    />
  </div>
</template>

<script setup lang="ts">
import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

import { QuillEditor, Quill } from '@vueup/vue-quill';
import { propTypes } from '@/utils/propTypes';
import { globalHeaders } from '@/utils/request';

defineEmits(['update:modelValue']);

const props = defineProps({
  /* 编辑器的内容 */
@@ -54,8 +57,9 @@
  url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
});
const quillEditorRef = ref();
const uploadRef = ref<HTMLDivElement>();

const options = ref({
const options = ref<any>({
  theme: 'snow',
  bounds: document.body,
  debug: 'warn',
@@ -75,10 +79,10 @@
        ['link', 'image', 'video'] // 链接、图片、视频
      ],
      handlers: {
        image: function (value: any) {
        image: (value: boolean) => {
          if (value) {
            // 调用element图片上传
            (document.querySelector('.editor-img-uploader>.el-upload') as HTMLDivElement)?.click();
            uploadRef.value.click();
          } else {
            Quill.format('image', true);
          }
@@ -104,9 +108,9 @@
const content = ref('');
watch(
  () => props.modelValue,
  (v) => {
  (v: string) => {
    if (v !== content.value) {
      content.value = v === undefined ? '<p></p>' : v;
      content.value = v || '<p></p>';
    }
  },
  { immediate: true }
@@ -126,7 +130,7 @@
    quill.setSelection(length + 1);
    proxy?.$modal.closeLoading();
  } else {
    proxy?.$modal.loading(res.msg);
    proxy?.$modal.msgError('图片插入失败');
    proxy?.$modal.closeLoading();
  }
};
@@ -154,7 +158,6 @@

// 图片失败拦截
const handleUploadError = (err: any) => {
  console.error(err);
  proxy?.$modal.msgError('上传文件失败');
};
</script>