2025-10-14

项目简介富文本图片/视频上传

src/assets/wangeditor.css

@@ -0,0 +1,52 @@
+.editor-content-view {
+    border: 3px solid #ccc;
+    border-radius: 5px;
+    padding: 0 10px;
+    margin-top: 20px;
+    overflow-x: auto;
+}
+
+.editor-content-view p,
+.editor-content-view li {
+    white-space: pre-wrap; /* 保留空格 */
+}
+
+.editor-content-view blockquote {
+    border-left: 8px solid #d0e5f2;
+    padding: 10px 10px;
+    margin: 10px 0;
+    background-color: #f1f1f1;
+}
+
+.editor-content-view code {
+    font-family: monospace;
+    background-color: #eee;
+    padding: 3px;
+    border-radius: 3px;
+}
+.editor-content-view pre>code {
+    display: block;
+    padding: 10px;
+}
+
+.editor-content-view table {
+    border-collapse: collapse;
+}
+.editor-content-view td,
+.editor-content-view th {
+    border: 1px solid #ccc;
+    min-width: 50px;
+    height: 20px;
+}
+.editor-content-view th {
+    background-color: #f1f1f1;
+}
+
+.editor-content-view ul,
+.editor-content-view ol {
+    padding-left: 20px;
+}
+
+.editor-content-view input[type="checkbox"] {
+    margin-right: 5px;
+}

src/components/RichTextEditor.vue

@@ -52,7 +52,7 @@ const mode = 'default' // 或 'simple'
 // 工具栏配置
 const toolbarConfig = {
   excludeKeys: [
-    'group-video', // 排除视频
+    // 'group-video', // 排除视频
     'fullScreen' // 排除全屏
   ]
 }
@@ -63,26 +63,47 @@ const editorConfig = {
   MENU_CONF: {
     // 配置上传图片
     uploadImage: {
-      server: '/api/upload/image',
+      server: '/mid/upload/image',
       fieldName: 'file',
       meta: {
         token: localStorage.getItem('token') || ''
       },
       metaWithUrl: false,
       headers: {
-        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
+        'Authorization': `Bearer ${localStorage.getItem('admin_token') || ''}`
       },
       maxFileSize: 5 * 1024 * 1024, // 5M
       allowedFileTypes: ['image/*'],
       customInsert(res, insertFn) {
         // 自定义插入图片
-        if (res.code === 200) {
+        if (res.success) {
           insertFn(res.data.url, res.data.alt || '', res.data.url)
         } else {
           console.error('图片上传失败:', res.message)
         }
       }
     },
+    uploadVideo: {
+      server: '/mid/upload',
+      fieldName: 'file',
+      meta: {
+        token: localStorage.getItem('token') || ''
+      },
+      metaWithUrl: false,
+      headers: {
+        'Authorization': `Bearer ${localStorage.getItem('admin_token') || ''}`
+      },
+      maxFileSize: 20 * 1024 * 1024,
+      allowedFileTypes: ['video/*'],
+      customInsert(res, insertFn) {
+        // 自定义插入视频
+        if (res.success) {
+          insertFn(res.data.url, res.data.alt || '', res.data.url)
+        } else {
+          console.error('视频上传失败:', res.message)
+        }
+      }
+    },
     // 配置字体
     fontSize: {
       fontSizeList: [

src/views/Program.vue

@@ -87,7 +87,7 @@
 
     <!--  数据列表  -->
     <el-card class="table-card">
-      <el-row :gutter="10" class="mb8">
+      <el-row :gutter="10" class="mb8 mb-2">
         <el-col :span="1.5">
           <el-button
               type="primary"
@@ -140,7 +140,11 @@
         <el-table-column prop="startDate" label="开始时间"/>
         <el-table-column prop="endDate" label="结束时间"/>
         <el-table-column prop="createDate" label="创建时间"/>
-        <el-table-column prop="introduction" label="项目描述"/>
+        <el-table-column prop="introduction" label="项目描述">
+          <template #default="scope">
+            <el-button text type="primary" @click="handleDetail(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
 
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
           <template #default="scope">
@@ -166,7 +170,7 @@
     </el-card>
 
     <!-- 表单 -->
-    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+    <el-dialog :title="title" v-model="open" width="60%" append-to-body top="1vh">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="项目名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入项目名称"/>
@@ -196,7 +200,7 @@
         <!--          <el-input v-model="form.endDate" placeholder="请选择结束时间"/>-->
         <!--        </el-form-item>-->
         <el-form-item label="项目描述" prop="introduction" class="editor">
-          <RichTextEditor height="300px" />
+          <RichTextEditor v-model="form.introduction" class="w-100"/>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -207,10 +211,17 @@
       </template>
     </el-dialog>
 
+<!--  详情  -->
+    <el-dialog :title="detailTitle" v-model="openDetail" width="50%" class="h-75 overflow-hidden overflow-scroll">
+      <div class="p-5 border editor-content-view">
+        <div v-html="detailContent"></div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {getCurrentInstance, reactive, ref, shallowRef, toRefs} from "vue";
 import {Check, Money, Wallet} from "@element-plus/icons-vue";
 import {ElMessage, ElMessageBox} from "element-plus";
@@ -218,8 +229,7 @@ import {programAPI} from "@/api/program";
 import {useUserStore} from "@/stores/user";
 
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@/assets/wangeditor.css'
-import {IToolbarConfig} from "@wangeditor/editor";
 import RichTextEditor from "@/components/RichTextEditor.vue";
 
 const {proxy} = getCurrentInstance();
@@ -330,9 +340,15 @@ const handleDelete = (row) => {
   })
 }
 
+const openDetail = ref(false)
+const detailTitle = ref("")
+const detailContent = ref("")
+
 // 查看详情
 const handleDetail = (row) => {
-  ElMessage.info('查看详情')
+  detailTitle.value = row.name
+  detailContent.value = row.introduction
+  openDetail.value = true
 }
 
 const submitForm = () => {
@@ -359,9 +375,25 @@ const submitForm = () => {
     }
   })
 }
+const formRef = ref(null)
+const reset = () => {
+  form.value = {
+    linkmanId: undefined,
+    startDate: undefined,
+    endDate: undefined,
+    dataRange: [],
+    name: undefined,
+    company: undefined,
+    address: undefined,
+    introduction: undefined,
+    paymentMethod: undefined
+  }
+  formRef.value.resetForm()
+}
 
 const cancel = () => {
   open.value = false
+  reset()
 }
 
 // 获取统计