优化通过公告富文本插件

package.json

@@ -20,6 +20,8 @@
     "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
+    "@wangeditor/editor": "5.1.23",
+    "@wangeditor/editor-for-vue": "5.1.12",
     "axios": "0.28.1",
     "echarts": "^5.6.0",
     "element-plus": "2.7.6",
@@ -35,17 +37,17 @@
     "vue-router": "4.4.0"
   },
   "devDependencies": {
-    "@unocss/preset-attributify": "^66.7.4",
-    "@unocss/preset-uno": "^66.7.4",
-    "@unocss/transformer-directives": "^66.7.4",
-    "@unocss/vite": "^66.7.4",
-    "@vitejs/plugin-vue": "5.0.5",
-    "sass": "^1.77.5",
-    "unocss": "^66.7.4",
-    "unplugin-auto-import": "0.17.6",
-    "unplugin-vue-setup-extend-plus": "1.0.1",
-    "vite": "5.3.2",
-    "vite-plugin-compression": "0.5.1",
-    "vite-plugin-svg-icons": "2.0.1"
+    "@unocss/preset-attributify": "^66.11.0",
+    "@unocss/preset-uno": "^66.11.0",
+    "@unocss/transformer-directives": "^66.11.0",
+    "@unocss/vite": "^66.11.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "sass": "^1.105.1",
+    "unocss": "^66.11.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-vue-setup-extend-plus": "^1.0.1",
+    "vite": "^5.3.2",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-svg-icons": "^2.0.1"
   }
 }

src/api/system/user.js

@@ -104,7 +104,7 @@ export function updateUserPwd(oldPassword, newPassword) {
   return request({
     url: '/system/user/profile/updatePwd',
     method: 'put',
-    params: data
+    data: data
   })
 }
 

src/views/system/notice/index.vue

@@ -1,26 +1,17 @@
 <template>
    <div class="app-container">
       <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="公告标题" prop="noticeTitle">
+         <el-form-item label="标题" prop="noticeTitle">
             <el-input
                v-model="queryParams.noticeTitle"
-               placeholder="请输入公告标题"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="操作人员" prop="createBy">
-            <el-input
-               v-model="queryParams.createBy"
-               placeholder="请输入操作人员"
+               placeholder="请输入标题"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
             />
          </el-form-item>
          <el-form-item label="类型" prop="noticeType">
-            <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable style="width: 200px">
+            <el-select v-model="queryParams.noticeType" placeholder="类型" clearable style="width: 200px">
                <el-option
                   v-for="dict in sys_notice_type"
                   :key="dict.value"
@@ -70,14 +61,13 @@
 
       <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="序号" align="center" prop="noticeId" width="100" />
          <el-table-column
-            label="公告标题"
+            label="标题"
             align="center"
             prop="noticeTitle"
             :show-overflow-tooltip="true"
          />
-         <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+         <el-table-column label="类型" align="center" prop="noticeType" width="100">
             <template #default="scope">
                <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
             </template>
@@ -88,9 +78,9 @@
             </template>
          </el-table-column>
          <el-table-column label="创建者" align="center" prop="createBy" width="100" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+         <el-table-column label="创建时间" align="center" prop="createTime" width="160">
             <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+               <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
             </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -110,12 +100,12 @@
       />
 
       <!-- 添加或修改公告对话框 -->
-      <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+      <el-dialog :title="title" v-model="open" width="min(1100px, 95vw)" top="5vh" append-to-body destroy-on-close :close-on-click-modal="false" :close-on-press-escape="!submitting" :show-close="!submitting">
          <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
             <el-row>
                <el-col :span="12">
                   <el-form-item label="公告标题" prop="noticeTitle">
-                     <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+                     <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" maxlength="50" show-word-limit />
                   </el-form-item>
                </el-col>
                <el-col :span="12">
@@ -143,15 +133,15 @@
                </el-col>
                <el-col :span="24">
                   <el-form-item label="内容">
-                    <editor v-model="form.noticeContent" :min-height="192"/>
+                    <NoticeEditor v-if="open" v-model="form.noticeContent" />
                   </el-form-item>
                </el-col>
             </el-row>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
+               <el-button type="primary" :loading="submitting" @click="submitForm">确 定</el-button>
+               <el-button :disabled="submitting" @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
@@ -161,6 +151,8 @@
 <script setup name="Notice">
 import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
 
+import NoticeEditor from "./NoticeEditor.vue";
+
 const { proxy } = getCurrentInstance();
 const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");
 
@@ -173,6 +165,8 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const submitting = ref(false);
+let detailRequest = 0;
 
 const data = reactive({
   form: {},
@@ -181,10 +175,11 @@ const data = reactive({
     pageSize: 10,
     noticeTitle: undefined,
     createBy: undefined,
-    status: undefined
+    noticeType: undefined
   },
+  // 新增/修改共用表单，正文统一为字符串，避免编辑器空值回显异常
   rules: {
-    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
+    noticeTitle: [{ required: true, whitespace: true, message: "公告标题不能为空", trigger: "blur" }, { max: 50, message: "公告标题不能超过50个字符", trigger: "blur" }],
     noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
   },
 });
@@ -192,13 +187,16 @@ const data = reactive({
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询公告列表 */
-function getList() {
+async function getList() {
   loading.value = true;
-  listNotice(queryParams.value).then(response => {
-    noticeList.value = response.rows;
-    total.value = response.total;
+  try {
+    const response = await listNotice(queryParams.value);
+    noticeList.value = response.rows || [];
+    total.value = response.total || 0;
+  } catch {
+  } finally {
     loading.value = false;
-  });
+  }
 }
 
 /** 取消按钮 */
@@ -211,9 +209,9 @@ function cancel() {
 function reset() {
   form.value = {
     noticeId: undefined,
-    noticeTitle: undefined,
+    noticeTitle: "",
     noticeType: undefined,
-    noticeContent: undefined,
+    noticeContent: "",
     status: "0"
   };
   proxy.resetForm("noticeRef");
@@ -246,35 +244,46 @@ function handleAdd() {
 }
 
 /**修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const noticeId = row.noticeId || ids.value;
-  getNotice(noticeId).then(response => {
-    form.value = response.data;
-    open.value = true;
+async function handleUpdate(row) {
+  const noticeId = row?.noticeId ?? ids.value[0];
+  if (noticeId == null) return;
+  const requestId = ++detailRequest;
+  try {
+    const response = await getNotice(noticeId);
+    if (requestId !== detailRequest) return;
+    if (!response.data) {
+      proxy.$modal.msgError("公告不存在或已被删除");
+      return;
+    }
+    reset();
+    form.value = {
+      noticeId: response.data.noticeId,
+      noticeTitle: response.data.noticeTitle ?? "",
+      noticeType: response.data.noticeType == null ? undefined : String(response.data.noticeType),
+      noticeContent: response.data.noticeContent ?? "",
+      status: String(response.data.status ?? "0")
+    };
     title.value = "修改公告";
-  });
+    open.value = true;
+  } catch {}
 }
 
 /** 提交按钮 */
-function submitForm() {
-  proxy.$refs["noticeRef"].validate(valid => {
-    if (valid) {
-      if (form.value.noticeId != undefined) {
-        updateNotice(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addNotice(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+async function submitForm() {
+  if (submitting.value) return;
+  submitting.value = true;
+  try {
+    const valid = await proxy.$refs.noticeRef.validate().catch(() => false);
+    if (!valid) return;
+    const payload = { ...form.value, noticeTitle: form.value.noticeTitle.trim(), noticeContent: form.value.noticeContent || "" };
+    const editing = payload.noticeId != null;
+    await (editing ? updateNotice(payload) : addNotice(payload));
+    proxy.$modal.msgSuccess(editing ? "修改成功" : "新增成功");
+    open.value = false;
+    await getList();
+  } catch {} finally {
+    submitting.value = false;
+  }
 }
 
 /** 删除按钮操作 */