diff --git a/package.json b/package.json index 96de400..fe2d194 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@vueuse/core": "^10.1.2", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.10", + "@wangeditor/plugin-upload-attachment": "^1.1.0", "@zxcvbn-ts/core": "^3.0.1", "animate.css": "^4.1.1", "axios": "^1.4.0", diff --git a/src/api/uav/clue.js b/src/api/uav/clue.js new file mode 100644 index 0000000..e69de29 diff --git a/src/api/uav/record.js b/src/api/uav/record.js new file mode 100644 index 0000000..16330bc --- /dev/null +++ b/src/api/uav/record.js @@ -0,0 +1,8 @@ +import request from '@/config/axios' + +export const searchStudyRecords = async (data) => { + return await request.post({ + url: 'wrj-api/wrjQuestionPractice/query', + data + }) +} diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue index 33affc4..22df80b 100644 --- a/src/components/Editor/src/Editor.vue +++ b/src/components/Editor/src/Editor.vue @@ -42,7 +42,11 @@ const props = defineProps({ 'undo', // 撤销 'redo', // 重做 'fullScreen' - ] + ], + insertKeys: { + index: 20, // 自定义插入的位置 + keys: ['uploadAttachment'] // “上传附件”菜单 + } }) } }) @@ -104,6 +108,12 @@ const editorConfig = computed((): IEditorConfig => { }, autoFocus: false, scroll: true, + // 在编辑器中，点击选中“附件”节点时，要弹出的菜单 + hoverbarKeys: { + attachment: { + menuKeys: ['downloadAttachment'] // “下载附件”菜单 + } + }, MENU_CONF: { ['uploadImage']: { server: import.meta.env.VITE_UPLOAD_URL, @@ -218,6 +228,52 @@ const editorConfig = computed((): IEditorConfig => { customInsert(res: any, insertFn: InsertFnType) { insertFn(res.data, 'video', res.data) } + }, + uploadAttachment: { + server: import.meta.env.VITE_UPLOAD_URL, + timeout: 20 * 1000, // 2s + + fieldName: 'file', + // meta: { token: 'xxx', a: 100 }, // 请求时附加的数据 + // metaWithUrl: true, // meta 拼接到 url 上 + // headers: { Accept: 'text/x-json' }, + // 自定义增加 http header + headers: { + Accept: '*', + Authorization: 'Bearer ' + getAccessToken(), + 'tenant-id': getTenantId(), + 'instance-id': getAppId() + }, + + maxFileSize: 20 * 1024 * 1024, // 20M + + onBeforeUpload(file: File) { + console.log('onBeforeUpload', file) + return file // 上传 file 文件 + // return false // 会阻止上传 + }, + onProgress(progress: number) { + console.log('onProgress', progress) + }, + onSuccess(file: File, res: any) { + console.log('onSuccess', file, res) + }, + onFailed(file: File, res: any) { + alert(res.message) + console.log('onFailed', file, res) + }, + onError(file: File, err: Error, res: any) { + alert(err.message) + console.error('onError', file, err, res) + }, + // 上传成功后，用户自定义插入文件 + customInsert(res: any, file: File, insertFn: Function) { + console.log('customInsert', res) + + // 插入附件到编辑器 + insertFn(file.name, res.data) + // insertFn(res.data, `customInsert-${file.name}`, res.data) + } } }, uploadImgShowBase64: true diff --git a/src/main.js b/src/main.js index bb6458c..786fada 100644 --- a/src/main.js +++ b/src/main.js @@ -42,8 +42,14 @@ import '@/plugins/tongji' // 百度统计 import Logger from '@/utils/Logger' import VueDOMPurifyHTML from 'vue-dompurify-html' +import { Boot } from '@wangeditor/editor' +import attachmentModule from '@wangeditor/plugin-upload-attachment' + // 创建实例 const setupAll = async () => { + // 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。 + Boot.registerModule(attachmentModule) + const app = createApp(App) await setupI18n(app) diff --git a/src/views/UAVClue/StudyRecord/components/Practice.vue b/src/views/UAVClue/StudyRecord/components/Practice.vue index 05a7c3d..c7316a7 100644 --- a/src/views/UAVClue/StudyRecord/components/Practice.vue +++ b/src/views/UAVClue/StudyRecord/components/Practice.vue @@ -3,7 +3,7 @@ @@ -13,18 +13,18 @@ - + - 搜索 + 搜 索 - + @@ -62,11 +62,15 @@