sc

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",

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
+  })
+}

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

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)

src/views/UAVClue/StudyRecord/components/Practice.vue

@@ -3,7 +3,7 @@
     <el-form :model="searchForm" inline @submit.prevent>
       <el-form-item>
         <el-input
-          v-model="searchForm.nameOrPhone"
+          v-model="searchForm.userNameOrPhone"
           placeholder="输入学员姓名/手机号"
           @keyup.enter="handleQuery"
         />
@@ -13,18 +13,18 @@
       </el-form-item>
       <el-form-item>
         <el-select
-          v-model="searchForm.status"
+          v-model="searchForm.answerResult"
           placeholder="选择答题结果"
           @change="handleQuery"
           style="width: 150px"
           clearable
         >
           <el-option label="答对" :value="1" />
-          <el-option label="答错" :value="0" />
+          <el-option label="答错" :value="2" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleQuery"> 搜索 </el-button>
+        <el-button type="primary" @click="handleQuery">搜 索</el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -42,9 +42,9 @@
       <el-table-column label="姓名" prop="name" />
       <el-table-column label="手机号" prop="phone" />
       <el-table-column label="答题选择" prop="yourAnswer" />
-      <el-table-column label="答题结果" prop="status">
+      <el-table-column label="答题结果" prop="answerResult">
         <template #default="{ row }">
-          <el-tag v-if="row.status == 0" type="danger">答错</el-tag>
+          <el-tag v-if="row.answerResult == 2" type="danger">答错</el-tag>
           <el-tag v-else type="success">答对</el-tag>
         </template>
       </el-table-column>
@@ -62,11 +62,15 @@
 </template>
 
 <script setup>
+import { searchStudyRecords } from '@/api/uav/record'
+
 const searchForm = ref({
+  userNameOrPhone: '',
+  practiceType: 1,
   question: '',
-  status: '',
+  answerResult: undefined,
   pageNo: 1,
-  pageSize: 100
+  pageSize: 50
 })
 
 const loading = ref(false)
@@ -76,20 +80,26 @@ const tableList = ref([])
 onMounted(() => {
   handleQuery()
 })
-function getList() {
+async function getList() {
   loading.value = true
+  try {
+    const resp = await searchStudyRecords(searchForm.value)
+    console.log(resp)
+
     tableList.value = [
       {
         id: 1,
         question: '1+1=？',
         answer: 'B',
         yourAnswer: 'B',
-      status: '1',
+        answerResult: 1,
         createTime: ''
       }
     ]
     total.value = 1
+  } finally {
     loading.value = false
+  }
 }
 
 function handleQuery() {

yarn.lock

@@ -2502,6 +2502,13 @@
   resolved "https://registry.yarnpkg.com/@wangeditor/list-module/-/list-module-1.0.5.tgz#3fc0b167acddf885536b45fa0c127f9c6adaea33"
   integrity sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==
 
+"@wangeditor/plugin-upload-attachment@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@wangeditor/plugin-upload-attachment/-/plugin-upload-attachment-1.1.0.tgz#a014de72703a9f3d5ae44a428ac01406640ac80a"
+  integrity sha512-K6SsV3Cv1g+Ob1xjRRQ13Sh3lcj3yAa/aXMaKKbaPI76rNZiOpyAGH/iVv5i9enmwbZql01IXpvhK+HtrikVyQ==
+  dependencies:
+    dom7 "^4.0.4"
+
 "@wangeditor/table-module@^1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@wangeditor/table-module/-/table-module-1.1.4.tgz#757d4a5868b2b658041cd323854a4d707c8347e9"
@@ -3733,6 +3740,13 @@ dom7@^3.0.0:
   dependencies:
     ssr-window "^3.0.0-alpha.1"
 
+dom7@^4.0.4:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.6.tgz#091a51621d7a19ce0fb86045cafb3c10035e97ed"
+  integrity sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -7245,6 +7259,11 @@ ssr-window@^3.0.0-alpha.1:
   resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
   integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
 
+ssr-window@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"