feat(notice): 公告内容使用富文本编辑器替换普通文本域

- 用 Editor 组件替换了原有的 el-input textarea
- 添加了上传配置，支持文件上传
- 对富文本内容进行 URL 编码和解码，确保数据传输的正确性
-优化了表单提交逻辑，增加了错误处理

src/views/system/notice/index.vue

@@ -207,15 +207,11 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item label="内容" prop="noticeContent">
-          <!-- <editor v-model="form.noticeContent" :min-height="192" /> -->
-          <el-input
-            type="textarea"
+        <el-form-item label="公告内容" prop="noticeContent">
+          <editor
             v-model="form.noticeContent"
-            :rows="8"
-            show-word-limit
-            maxlength="500"
-            placeholder="请输入内容"
+            :min-height="192"
+            :upload-config="uploadConfig"
           />
         </el-form-item>
       </el-form>
@@ -233,11 +229,15 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice'
 import { deptTreeSelect } from '@/api/system/user'
 import { listRole } from '@/api/system/role'
+import Editor from '@/components/Editor'
 
 export default {
   name: 'Notice',
   dicts: ['sys_notice_status', 'sys_notice_type'],
-  components: { Treeselect },
+  components: {
+    Treeselect,
+    Editor
+  },
   data() {
     return {
       // 遮罩层
@@ -292,6 +292,30 @@ export default {
           return time.getTime() < new Date().setHours(0, 0, 0, 0)
         },
       },
+      uploadConfig: {
+        action: process.env.VUE_APP_BASE_API + '/file/upload',
+        headers: {
+          Authorization: 'Bearer ' + this.$store.getters.token
+        },
+        data: {
+          // 其他需要传递的参数
+        },
+        // 自定义上传成功后的处理
+        onSuccess: (response) => {
+          // 根据后端返回的数据结构调整
+          if (response.code === 200) {
+            return {
+              url: response.data?.url || response.url,
+              name: response.data?.name || response.name
+            }
+          }
+          return false
+        },
+        onError: (error) => {
+          this.$modal.msgError('文件上传失败')
+          console.error('上传错误:', error)
+        }
+      },
     }
   },
   created() {
@@ -360,7 +384,12 @@ export default {
       this.reset()
       const noticeId = row.noticeId || this.ids
       listNotice({ noticeId, isHome: 1 }).then((response) => {
-        this.form = response.data.rows[0]
+        const data = response.data.rows[0]
+        this.form = {
+          ...data,
+          // 如果后端存储的是编码后的内容，需要解码
+          noticeContent: data.noticeContent ? decodeURIComponent(data.noticeContent) : ''
+        }
         this.open = true
       })
     },
@@ -368,18 +397,31 @@ export default {
     submitForm: function () {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          console.log('🚀 ~ 提交 ~ this.form:', this.form)
-          if (this.form.noticeId != undefined) {
-            updateNotice(this.form).then((response) => {
+          const formData = {
+            ...this.form,
+            // 对富文本内容进行URL编码，避免JSON解析错误
+            noticeContent: encodeURIComponent(this.form.noticeContent || '')
+          }
+
+          console.log('🚀 ~ 提交 ~ formData:', formData)
+
+          if (formData.noticeId != undefined) {
+            updateNotice(formData).then((response) => {
               this.$modal.msgSuccess('修改成功')
               this.open = false
               this.getList()
+            }).catch(error => {
+              console.error('更新失败:', error)
+              this.$modal.msgError('更新失败，请检查输入内容')
             })
           } else {
-            addNotice(this.form).then((response) => {
+            addNotice(formData).then((response) => {
               this.$modal.msgSuccess('新增成功')
               this.open = false
               this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$modal.msgError('新增失败，请检查输入内容')
             })
           }
         }