refactor: ♻️ 通知公告解耦重构

2025-02-22 23:51:30 +08:00
parent 2be92dacd1
commit b1d3003099
7 changed files with 238 additions and 154 deletions
--- a/src/views/system/notice/components/MyNotice.vue
+++ b/src/views/system/notice/components/MyNotice.vue
@@ -59,7 +59,7 @@
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="80">
          <template #default="scope">
-            <el-button type="primary" size="small" link @click="viewNoticeDetail(scope.row.id)">
+            <el-button type="primary" size="small" link @click="handleReadNotice(scope.row.id)">
              查看
            </el-button>
          </template>
@@ -75,7 +75,29 @@
      />
    </el-card>

-    <NoticeDetail ref="noticeDetailRef" />
+    <el-dialog
+      v-model="noticeDialogVisible"
+      :title="noticeDetail?.title ?? '通知详情'"
+      width="800px"
+      custom-class="notice-detail"
+    >
+      <div v-if="noticeDetail" class="notice-detail__wrapper">
+        <div class="notice-detail__meta">
+          <span>
+            <el-icon><User /></el-icon>
+            {{ noticeDetail.publisherName }}
+          </span>
+          <span class="ml-2">
+            <el-icon><Timer /></el-icon>
+            {{ noticeDetail.publishTime }}
+          </span>
+        </div>
+
+        <div class="notice-detail__content">
+          <div v-html="noticeDetail.content"></div>
+        </div>
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -85,11 +107,9 @@ defineOptions({
  inheritAttrs: false,
 });

-import NoticeAPI, { NoticePageVO, NoticePageQuery } from "@/api/system/notice";
+import NoticeAPI, { NoticePageVO, NoticePageQuery, NoticeDetailVO } from "@/api/system/notice";

 const queryFormRef = ref();
-const noticeDetailRef = ref();
-
 const pageData = ref<NoticePageVO[]>([]);

 const loading = ref(false);
@@ -100,7 +120,10 @@ const queryParams = reactive<NoticePageQuery>({
  pageSize: 10,
 });

-/** 查询通知公告 */
+const noticeDialogVisible = ref(false);
+const noticeDetail = ref<NoticeDetailVO | null>(null);
+
+// 查询通知公告
 function handleQuery() {
  loading.value = true;
  NoticeAPI.getMyNoticePage(queryParams)
@@ -113,18 +136,61 @@ function handleQuery() {
    });
 }

-/** 重置通知公告查询 */
+// 重置通知公告查询
 function handleResetQuery() {
  queryFormRef.value!.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
 }

-function viewNoticeDetail(id: string) {
-  noticeDetailRef.value.openNotice(id);
+// 阅读通知公告
+function handleReadNotice(id: string) {
+  NoticeAPI.getDetail(id).then((data) => {
+    noticeDialogVisible.value = true;
+    noticeDetail.value = data;
+  });
 }

 onMounted(() => {
  handleQuery();
 });
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog__header) {
+  text-align: center;
+}
+.notice-detail {
+  &__wrapper {
+    padding: 0 20px;
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__publisher {
+    margin-right: 24px;
+
+    i {
+      margin-right: 4px;
+    }
+  }
+
+  &__content {
+    max-height: 60vh;
+    padding-top: 16px;
+    margin-bottom: 24px;
+    overflow-y: auto;
+    border-top: 1px solid var(--el-border-color);
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+  }
+}
+</style>
--- a/src/views/system/notice/components/NoticeDetail.vue
+++ b/src/views/system/notice/components/NoticeDetail.vue
@@ -1,90 +0,0 @@
-<template>
-  <el-dialog
-    v-model="visible"
-    :show-close="false"
-    :fullscreen="isFullscreen"
-    width="50%"
-    append-to-body
-    @close="handleClose"
-  >
-    <template #header>
-      <div class="flex-x-between">
-        <span>通知公告详情</span>
-        <div class="dialog-toolbar">
-          <!-- 全屏/退出全屏按钮 -->
-          <el-button circle @click="toggleFullscreen">
-            <div :class="`i-svg:${isFullscreen ? 'fullscreen-exit' : 'fullscreen'}`" />
-          </el-button>
-          <!-- 关闭按钮 -->
-          <el-button circle @click="handleClose">
-            <template #icon>
-              <Close />
-            </template>
-          </el-button>
-        </div>
-      </div>
-    </template>
-
-    <el-descriptions :column="1">
-      <el-descriptions-item label="标题：">
-        {{ notice.title }}
-      </el-descriptions-item>
-      <el-descriptions-item label="发布状态：">
-        <el-tag v-if="notice.publishStatus == 0" type="info">未发布</el-tag>
-        <el-tag v-else-if="notice.publishStatus == 1" type="success">已发布</el-tag>
-        <el-tag v-else-if="notice.publishStatus == -1" type="warning">已撤回</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="发布人：">
-        {{ notice.publisherName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="发布时间：">
-        {{ notice.publishTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label="公告内容：">
-        <div class="notice-content" v-html="notice.content" />
-      </el-descriptions-item>
-    </el-descriptions>
-  </el-dialog>
-</template>
-
-<script setup lang="ts">
-import NoticeAPI, { NoticeDetailVO } from "@/api/system/notice";
-
-const visible = ref(false);
-const notice = ref<NoticeDetailVO>({});
-const isFullscreen = ref(false); // 控制全屏状态
-
-// 切换全屏
-const toggleFullscreen = () => {
-  isFullscreen.value = !isFullscreen.value;
-};
-
-// 关闭弹窗
-const handleClose = () => {
-  visible.value = false;
-};
-
-// 接收公告详情
-const openNotice = async (id: string) => {
-  visible.value = true;
-  const noticeDetail = await NoticeAPI.getDetail(id);
-  notice.value = noticeDetail;
-};
-
-defineExpose({
-  openNotice,
-});
-</script>
-
-<style scoped>
-.notice-content {
-  width: 100%;
-  overflow-x: hidden;
-}
-
-/* 由于 v-html 内容不受 scoped 样式影响，需要使用 :deep() */
-:deep(.notice-content img) {
-  max-width: 100%;
-  height: auto;
-}
-</style>
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -103,12 +103,7 @@
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
-            <el-button
-              type="primary"
-              size="small"
-              link
-              @click="handleOpenNoticeDetailDialog(scope.row.id)"
-            >
+            <el-button type="primary" size="small" link @click="openDetailDialog(scope.row.id)">
              查看
            </el-button>
            <el-button
@@ -168,17 +163,15 @@
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
-      top="4vh"
-      width="1250"
+      top="3vh"
+      width="80%"
      @close="handleCloseDialog"
    >
      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="通知标题" prop="title">
          <el-input v-model="formData.title" placeholder="通知标题" clearable />
        </el-form-item>
-        <el-form-item label="通知内容" prop="content">
-          <WangEditor v-model="formData.content" />
-        </el-form-item>
+
        <el-form-item label="通知类型" prop="type">
          <Dict v-model="formData.type" code="notice_type" />
        </el-form-item>
@@ -201,6 +194,9 @@
            />
          </el-select>
        </el-form-item>
+        <el-form-item label="通知内容" prop="content">
+          <WangEditor v-model="formData.content" />
+        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@@ -210,7 +206,45 @@
      </template>
    </el-dialog>
    <!-- 通知公告详情 -->
-    <NoticeDetail ref="noticeDetailRef" />
+    <el-dialog
+      v-model="detailDialog.visible"
+      :show-close="false"
+      width="50%"
+      append-to-body
+      @close="closeDetailDialog"
+    >
+      <template #header>
+        <div class="flex-x-between">
+          <span>通知公告详情</span>
+          <div class="dialog-toolbar">
+            <el-button circle @click="closeDetailDialog">
+              <template #icon>
+                <Close />
+              </template>
+            </el-button>
+          </div>
+        </div>
+      </template>
+      <el-descriptions :column="1">
+        <el-descriptions-item label="标题：">
+          {{ currentNotice.title }}
+        </el-descriptions-item>
+        <el-descriptions-item label="发布状态：">
+          <el-tag v-if="currentNotice.publishStatus == 0" type="info">未发布</el-tag>
+          <el-tag v-else-if="currentNotice.publishStatus == 1" type="success">已发布</el-tag>
+          <el-tag v-else-if="currentNotice.publishStatus == -1" type="warning">已撤回</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="发布人：">
+          {{ currentNotice.publisherName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="发布时间：">
+          {{ currentNotice.publishTime }}
+        </el-descriptions-item>
+        <el-descriptions-item label="公告内容：">
+          <div class="notice-content" v-html="currentNotice.content" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
  </div>
 </template>

@@ -220,12 +254,16 @@ defineOptions({
  inheritAttrs: false,
 });

-import NoticeAPI, { NoticePageVO, NoticeForm, NoticePageQuery } from "@/api/system/notice";
+import NoticeAPI, {
+  NoticePageVO,
+  NoticeForm,
+  NoticePageQuery,
+  NoticeDetailVO,
+} from "@/api/system/notice";
 import UserAPI from "@/api/system/user";

 const queryFormRef = ref();
 const dataFormRef = ref();
-const noticeDetailRef = ref();

 const loading = ref(false);
 const selectIds = ref<number[]>([]);
@@ -272,6 +310,11 @@ const rules = reactive({
  type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
 });

+const detailDialog = reactive({
+  visible: false,
+});
+const currentNotice = ref<NoticeDetailVO>({});
+
 // 查询通知公告
 function handleQuery() {
  loading.value = true;
@@ -400,10 +443,15 @@ function handleDelete(id?: number) {
  );
 }

-// 打开通知公告详情弹窗
-function handleOpenNoticeDetailDialog(id: number) {
-  noticeDetailRef.value.openNotice(id);
-}
+const closeDetailDialog = () => {
+  detailDialog.visible = false;
+};
+
+const openDetailDialog = async (id: string) => {
+  const noticeDetail = await NoticeAPI.getDetail(id);
+  currentNotice.value = noticeDetail;
+  detailDialog.visible = true;
+};

 onMounted(() => {
  handleQuery();