feat(article-management): 增加文章附件上传功能

- 在文章管理页面添加公告附件列表
- 实现附件上传和展示功能- 优化 Tinymce 组件，支持附件上传事件

src/components/Tinymce.vue

@@ -38,7 +38,7 @@ import 'tinymce/plugins/wordcount'
 import 'tinymce/plugins/autosave'
 import '@/assets/axupimgs/plugin.js'//多图上传插件
 
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value','getFiles'])
 const props = defineProps({
   //默认值
   value: {
@@ -78,6 +78,7 @@ const props = defineProps({
     default: 500
   }
 })
+const fileLists=ref([])
 const content = ref(props.value);
 const imgUrl = ref();
 // const apiKey = reactive("v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg");
@@ -168,6 +169,9 @@ const init = reactive({
           type: res.code === 1000 ? 'success' : 'error'
         })
         loading.close()
+        console.log("🚀 ~ file:res.data ", res.data)
+        fileLists.value.push(res.data)
+        emit('getFiles',fileLists.value)
         const fileUrl = res.data.url;
         // '?fileId='+res.data.id+
         callback(fileUrl + '?fileName=' + res.data.originalFilename, {text: file.name, title: file.name});

src/views/article-management/add.vue

@@ -27,10 +27,26 @@
         </el-col>
         <el-col :span="24" style="margin-left: 10px">
           <el-form-item label="文章内容" prop="articleContent">
-            <Tinymce v-model:value="formData.articleContent" imageUrl="/workflow/process/file/upload" :height="500" v-if="showTinymce" :toolbar="['undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image axupimgs']" />
+            <Tinymce v-model:value="formData.articleContent" @getFiles="getFiles" imageUrl="/workflow/process/file/upload" :height="500" v-if="showTinymce" :toolbar="['undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image axupimgs']" />
           </el-form-item>
         </el-col>
 
+        <el-col :span="24"  style="margin-left:90px;">
+          <el-form-item label="公告附件列表" prop="" style="display: flex;flex-direction: column;justify-content: flex-start;">
+            <template #label>
+             <div style="width: 100%;display: flex;align-items: center;justify-content: flex-start">
+               <el-icon size="16"><Paperclip /></el-icon>公告附件列表
+             </div>
+            </template>
+            <el-col :span="24" style="margin-left: -15px">
+            <div style="display: flex;flex-direction: column">
+              <div v-for="(item,index) in articleFile" style="display: flex;align-items: center">
+                {{index+1}}{{item.originalFilename}}<el-icon size="18" style="margin-left: 30px" color="#84cdfd"><CircleClose /></el-icon>
+              </div>
+            </div>
+            </el-col>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <div class="oper-page-btn">
@@ -54,6 +70,7 @@ const loading = ref(false)
 const showTinymce = ref(true)
 const fundForm = ref()
 const formData = ref({})
+const articleFile = ref({})
 const routerName = ref(router.currentRoute.value.name)
 const rules = reactive({
   articleTitle: [{required: true, message: '请输入文章标题', trigger: ['blur', 'change']}],
@@ -64,7 +81,10 @@ const rules = reactive({
 const handleBack = () => {
   history.back()
 }
-
+const getFiles=(filelist)=>{
+  console.log("🚀 ~ file:filelist ", filelist)
+  articleFile.value=filelist
+}
 const submitParam = (item) => {
   return {
     articleContent: item.articleContent,

src/views/article-management/detail.vue

@@ -10,7 +10,7 @@
       <el-row gutter="20">
         <el-col :span="24">
           <el-form-item>
-            <div class="article-a" v-html="formData.articleContent" @click="clickHandle"></div>
+<!--            <div class="article-a" v-html="formData.articleContent" @click="clickHandle"></div>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -43,7 +43,7 @@ const clickHandle = (e) => {
       fileName
     }
         // handleDownload(fileId,fileName)
-    download(item)
+    // download(item)
     // }else {
     // e.preventDefault()
     // }