Sfoglia il codice sorgente

fix: 优化富文本编辑器和文件上传功能,修复文件名显示问题

sunqijun 1 mese fa
parent
commit
598729a192

+ 19 - 14
src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagementDept/components/addTrainingInformation.vue

@@ -37,7 +37,8 @@
   const emit = defineEmits(['update:visible', 'refreshList', 'saveSuccess']);
   const formRef = ref();
   const rules = ref(TRAINING_FORM_RULES);
- 
+   // 富文本编辑器
+  const editorRef = shallowRef();
   const form = reactive({
     courseType: '',
     courseName: '',
@@ -52,9 +53,8 @@
     isSign: 0,
     courseImg: '', //[] as FileItem[],
   });
-  const fileList = ref<FileItem[]>([]);
+  const fileList = ref<any>([]);
   const courseImgList = ref<FileItem[]>([]);
-  const fileInfo = ref<any>(null);
 
   const categoryOptions = ref([
     { label: '入院三级安全教育', value: 1 },
@@ -132,8 +132,7 @@ const openState = ref(false)
   
 
 
-  // 富文本编辑器
-  const editorRef = shallowRef();
+
   const editorConfig = computed(() => ({
     placeholder: '请输入培训课程简述',
     MENU_CONF: {},
@@ -418,9 +417,10 @@ const openState = ref(false)
           <div class="editor-container">
             <Toolbar style="border-bottom: 1px solid #dcdfe6" :editor="editorRef" />
             <Editor
+              :disabled="isViewMode"
+              mode="default"
               style="height: 400px; overflow-y: auto"
               v-model="form.courseIntroduction"
-              :disabled="isViewMode"
               :defaultConfig="editorConfig"
               @on-created="handleEditorCreated"
               @on-change="handleEditorChange"
@@ -434,6 +434,7 @@ const openState = ref(false)
             ref="courseContentUpload"
             :auto-upload="false"
             :disabled="isViewMode"
+            v-if="!isViewMode"
             :on-change="handleFileChange"
             accept=".rar, .zip, .doc, .docx, .pdf, .mp4"
             :file-list="fileList"
@@ -448,11 +449,11 @@ const openState = ref(false)
               <div class="el-upload__tip"> 支持格式:.rar .zip .doc .docx .pdf .mp4,单个文件不能超过20MB </div>
             </template>
           </el-upload>
-          <div class="file-list" >
+          <div class="file-list" v-else>
           <div class="file-item" v-for="file in fileList" :key="file.fileId">
-            <span class="file-item--name">{{ file.fileName }}</span>
+            <span class="file-item--name">{{ file.name }}</span>
             <div class="file-item--footer">
-              <el-button link type="primary" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</el-button>
+              <el-button link type="primary" @click.stop="downloadFile(file.fileUrl, file.name)">下载</el-button>
             </div>
           </div>
         </div>
@@ -473,17 +474,13 @@ const openState = ref(false)
             :file-list="courseImgList"
             :disabled="isViewMode"
             :auto-upload="false"
-            :limit="1"
             accept="image/*"
             :on-change="handleImageUploadChange"
-            :on-exceed="handleImageExceed"
             :before-upload="validateImage"
-            list-type="picture-card"
-          >
+            list-type="picture-card">
             <el-icon>
               <Plus />
             </el-icon>
-
             <template #tip>
               <div class="el-upload__tip"> 支持格式:.jpg .png .jpeg,单个文件不能超过300k,设置一个默认图片。</div>
             </template>
@@ -571,4 +568,12 @@ const openState = ref(false)
   pre {
     white-space: pre-wrap;
   }
+  .file-item{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .file-item--name {
+        margin-right: 20px;
+    }
+  }
 </style>