refactor: ♻️ 通知公告、字典重构问题修复和优化

2024-10-08 01:02:48 +08:00
parent 42f7782d56
commit ff53ed6060
18 changed files with 341 additions and 269 deletions
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -155,7 +155,7 @@
                <el-icon class="ml-1"><Notification /></el-icon>
              </div>
              <el-link type="primary">
-                <span class="text-xs">查看更多</span>
+                <span class="text-xs" @click="viewMoreNotice">查看更多</span>
                <el-icon class="text-xs"><ArrowRight /></el-icon>
              </el-link>
            </div>
@@ -167,16 +167,14 @@
              :key="index"
              class="flex-y-center py-3"
            >
-              <el-tag :type="getNoticeLevelTag(item.level)" size="small">
-                {{ getNoticeLabel(item.type) }}
-              </el-tag>
+              <DictLabel code="notice_type" v-model="item.type" size="small" />
              <el-text
                truncated
                class="!mx-2 flex-1 !text-xs !text-[var(--el-text-color-secondary)]"
              >
                {{ item.title }}
              </el-text>
-              <el-link>
+              <el-link @click="viewNoticeDetail(item.id)">
                <el-icon class="text-sm"><View /></el-icon>
              </el-link>
            </div>
@@ -184,20 +182,27 @@
        </el-card>
      </el-col>
    </el-row>
+
+    <NoticeDetail ref="noticeDetailRef" />
  </div>
 </template>

 <script setup lang="ts">
-import WebSocketManager from "@/utils/socket";
-
 defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
 });

+import WebSocketManager from "@/utils/websocket";
+import router from "@/router";
+
 import { useUserStore } from "@/store/modules/user";
 import { NoticeTypeEnum, getNoticeLabel } from "@/enums/NoticeTypeEnum";
 import StatsAPI, { VisitStatsVO } from "@/api/log";
+import NoticeAPI, { NoticePageVO } from "@/api/notice";
+
+const noticeDetailRef = ref();
+
 const userStore = useUserStore();
 const date: Date = new Date();
 const greetings = computed(() => {
@@ -247,13 +252,13 @@ interface VisitStats {
  icon: string;
  tagType: "primary" | "success" | "warning";
  growthRate: number;
-  /** 粒度 */
+  // 粒度
  granularity: string;
-  /** 今日数量输出文档  */
+  // 今日数量
  todayCount: number;
  totalCount: number;
 }
-/** 加载访问统计数据 */
+// 加载访问统计数据
 const loadVisitStatsData = async () => {
  const list: VisitStatsVO[] = await StatsAPI.getVisitStats();

@@ -314,88 +319,30 @@ const getVisitStatsIcon = (type: string) => {
  }
 };

-const notices = ref([
-  {
-    level: 2,
-    type: NoticeTypeEnum.SYSTEM_UPGRADE,
-    title: "v2.12.0 新增系统日志，访问趋势统计功能。",
-  },
-  {
-    level: 0,
-    type: NoticeTypeEnum.COMPANY_NEWS,
-    title: "公司将在 7 月 1 日举办年中总结大会，请各部门做好准备。",
-  },
-  {
-    level: 3,
-    type: NoticeTypeEnum.HOLIDAY_NOTICE,
-    title: "端午节假期从 6 月 12 日至 6 月 14 日放假，共 3 天。",
-  },
+const notices = ref<NoticePageVO[]>([]);

-  {
-    level: 2,
-    type: NoticeTypeEnum.SECURITY_ALERT,
-    title: "最近发现一些钓鱼邮件，请大家提高警惕，不要点击陌生链接。",
-  },
-  {
-    level: 2,
-    type: NoticeTypeEnum.SYSTEM_MAINTENANCE,
-    title: "系统将于本周六凌晨 2 点进行维护，预计维护时间为 2 小时。",
-  },
-  {
-    level: 0,
-    type: NoticeTypeEnum.OTHER,
-    title: "公司新规章制度发布，请大家及时查阅。",
-  },
-  {
-    level: 3,
-    type: NoticeTypeEnum.HOLIDAY_NOTICE,
-    title: "中秋节假期从 9 月 22 日至 9 月 24 日放假，共 3 天。",
-  },
-  {
-    level: 1,
-    type: NoticeTypeEnum.COMPANY_NEWS,
-    title: "公司将在 10 月 15 日举办新产品发布会，敬请期待。",
-  },
-  {
-    level: 2,
-    type: NoticeTypeEnum.SECURITY_ALERT,
-    title:
-      "请注意，近期有恶意软件通过即时通讯工具传播，请勿下载不明来源的文件。",
-  },
-  {
-    level: 2,
-    type: NoticeTypeEnum.SYSTEM_MAINTENANCE,
-    title: "系统将于下周日凌晨 3 点进行升级，预计维护时间为 1 小时。",
-  },
-  {
-    level: 3,
-    type: NoticeTypeEnum.OTHER,
-    title: "公司年度体检通知已发布，请各位员工按时参加。",
-  },
-]);
+// 查看更多
+function viewMoreNotice() {
+  router.push({ path: "/myNotice" });
+}

-const getNoticeLevelTag = (type: number) => {
-  switch (type) {
-    case 0:
-      return "danger";
-    case 1:
-      return "warning";
-    case 2:
-      return "primary";
-    default:
-      return "success";
-  }
-};
-
-function connectWebSocket() {
-  WebSocketManager.getOrCreateClient("/topic/onlineUserCount", (message) => {
-    onlineUserCount.value = JSON.parse(message);
-  });
+// 阅读通知公告
+function viewNoticeDetail(id: string) {
+  noticeDetailRef.value.openNotice(id);
 }

 onMounted(() => {
  loadVisitStatsData();
-  connectWebSocket();
+
+  // 获取我的通知公告
+  NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 10 }).then((data) => {
+    notices.value = data.list;
+  });
+
+  WebSocketManager.subscribeToTopic("/topic/onlineUserCount", (data) => {
+    console.log("收到在线用户数量：", data);
+    onlineUserCount.value = JSON.parse(data);
+  });
 });
 </script>

--- a/src/views/demo/curd/config/content2.ts
+++ b/src/views/demo/curd/config/content2.ts
@@ -16,7 +16,7 @@ const contentConfig: IContentConfig = {
          id: 1,
          username: "tom",
          avatar:
-            "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+            "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
          percent: 99,
          price: 10,
          url: "https://www.baidu.com",
@@ -31,7 +31,7 @@ const contentConfig: IContentConfig = {
          id: 2,
          username: "jerry",
          avatar:
-            "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+            "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
          percent: 88,
          price: 999,
          url: "https://www.google.com",
--- a/src/views/demo/websocket.vue
+++ b/src/views/demo/websocket.vue
@@ -143,7 +143,7 @@ function connectWebSocket() {
    connectHeaders: {
      Authorization: getToken(),
    },
-    debug: (str) => {
+    debug: (str: any) => {
      console.log(str);
    },
    onConnect: () => {
@@ -155,14 +155,14 @@ function connectWebSocket() {
        type: "tip",
      });

-      stompClient.subscribe("/topic/notice", (res) => {
+      stompClient.subscribe("/topic/notice", (res: any) => {
        messages.value.push({
          sender: "Server",
          content: res.body,
        });
      });

-      stompClient.subscribe("/user/queue/greeting", (res) => {
+      stompClient.subscribe("/user/queue/greeting", (res: any) => {
        const messageData = JSON.parse(res.body) as MessageType;
        messages.value.push({
          sender: messageData.sender,
@@ -170,7 +170,7 @@ function connectWebSocket() {
        });
      });
    },
-    onStompError: (frame) => {
+    onStompError: (frame: any) => {
      console.error("Broker reported error: " + frame.headers["message"]);
      console.error("Additional details: " + frame.body);
    },
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -174,8 +174,8 @@ import DictDataAPI, {

 const route = useRoute();

-const dictCode = route.query.dictCode as string;
-const dictName = route.query.dictName as string;
+const dictCode = ref(route.query.dictCode as string);
+const dictName = ref(route.query.dictName as string);

 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
@@ -201,15 +201,15 @@ const formData = reactive<DictDataForm>({});

 // 监听路由参数变化，更新字典数据
 watch(
-  () => route.query.dictCode,
-  (newDictCode) => {
-    if (newDictCode !== queryParams.dictCode) {
-      queryParams.dictCode = newDictCode as string;
-      handleQuery();
-    }
+  () => [route.query.dictCode, route.query.dictName],
+  ([newDictCode, newDictName]) => {
+    queryParams.dictCode = newDictCode as string;
+    dictCode.value = newDictCode as string;
+    dictName.value = newDictName as string;
+
+    handleQuery();
  }
 );
-
 const computedRules = computed(() => {
  const rules: Partial<Record<string, any>> = {
    value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
@@ -291,6 +291,8 @@ function handleCloseDialog() {
  dataFormRef.value.clearValidate();

  formData.id = undefined;
+  formData.sort = 1;
+  formData.status = 1;
 }
 /**
 * 删除字典
--- a/src/views/system/notice/components/NoticeDetail.vue
+++ b/src/views/system/notice/components/NoticeDetail.vue
@@ -43,13 +43,8 @@
      <el-descriptions-item label="发布时间：">
        {{ notice.publishTime }}
      </el-descriptions-item>
-      <el-descriptions-item label="内容：">
-        <el-input
-          v-model="notice.content"
-          type="textarea"
-          style="max-height: 400px"
-          :readonly="true"
-        />
+      <el-descriptions-item label="公告内容：">
+        <div v-html="notice.content"></div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -70,27 +70,21 @@
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="60" />
-        <el-table-column
-          align="center"
-          key="title"
-          label="通知标题"
-          prop="title"
-          min-width="150"
-        />
-        <el-table-column align="center" label="通知类型" min-width="150">
+        <el-table-column label="通知标题" prop="title" min-width="200" />
+        <el-table-column align="center" label="通知类型" width="150">
          <template #default="scope">
-            <DictLabel :dictCode="'notice_type'" :value="scope.row.type" />
+            <DictLabel :code="'notice_type'" v-model="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="发布人"
          prop="publisherName"
-          min-width="100"
+          width="150"
        />
-        <el-table-column align="center" label="通知等级" min-width="100">
+        <el-table-column align="center" label="通知等级" width="100">
          <template #default="scope">
-            <DictLabel :dictCode="'notice_level'" :value="scope.row.level" />
+            <DictLabel code="notice_level" v-model="scope.row.level" />
          </template>
        </el-table-column>
        <el-table-column
@@ -121,7 +115,7 @@
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column align="center" label="操作时间" min-width="220">
+        <el-table-column label="操作时间" width="250">
          <template #default="scope">
            <div class="flex-x-start">
              <span>创建时间：</span>
@@ -141,7 +135,7 @@
            </div>
          </template>
        </el-table-column>
-        <el-table-column align="center" fixed="right" label="操作" width="220">
+        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button
              type="primary"
@@ -230,16 +224,16 @@
        <el-form-item label="通知类型" prop="type">
          <dictionary
            type="button"
-            v-model="formData.type"
            code="notice_type"
+            v-model="formData.type"
          />
        </el-form-item>
-        <el-form-item label="优先级" prop="level">
-          <el-radio-group v-model="formData.level">
-            <el-radio value="L">低</el-radio>
-            <el-radio value="M">中</el-radio>
-            <el-radio value="H">高</el-radio>
-          </el-radio-group>
+        <el-form-item label="通知等级" prop="level">
+          <dictionary
+            type="button"
+            code="notice_level"
+            v-model="formData.level"
+          />
        </el-form-item>
        <el-form-item label="目标类型" prop="targetType">
          <el-radio-group v-model="formData.targetType">
--- a/src/views/system/notice/my-notice.vue
+++ b/src/views/system/notice/my-notice.vue
@@ -31,27 +31,21 @@
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="60" />
-        <el-table-column
-          align="center"
-          key="title"
-          label="通知标题"
-          prop="title"
-          min-width="150"
-        />
-        <el-table-column align="center" label="通知类型" min-width="150">
+        <el-table-column label="通知标题" prop="title" min-width="200" />
+        <el-table-column align="center" label="通知类型" width="150">
          <template #default="scope">
-            <DictLabel :dictCode="'notice_type'" :value="scope.row.type" />
+            <DictLabel code="notice_type" v-model="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="发布人"
          prop="publisherName"
-          min-width="100"
+          width="100"
        />
-        <el-table-column align="center" label="通知等级" min-width="100">
+        <el-table-column align="center" label="通知等级" width="100">
          <template #default="scope">
-            <DictLabel :dictCode="'notice_level'" :value="scope.row.type" />
+            <DictLabel code="notice_level" v-model="scope.row.level" />
          </template>
        </el-table-column>
        <el-table-column
@@ -59,19 +53,19 @@
          key="releaseTime"
          label="发布时间"
          prop="publishTime"
-          min-width="100"
+          width="150"
        />

        <el-table-column
          align="center"
          label="发布人"
          prop="publisherName"
-          min-width="100"
+          width="150"
        />
-        <el-table-column align="center" label="状态" min-width="100">
+        <el-table-column align="center" label="状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.isRead == 1" type="success">已读</el-tag>
-            <el-tag v-if="scope.row.isRead == 0" type="warning">未读</el-tag>
+            <el-tag v-else type="info">未读</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="80">
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -168,7 +168,7 @@
        <el-input
          v-model="permKeywords"
          clearable
-          class="w-[200px]"
+          class="w-[150px]"
          placeholder="菜单权限名称"
        >
          <template #prefix>
@@ -176,7 +176,7 @@
          </template>
        </el-input>

-        <div class="flex-center">
+        <div class="flex-center ml-5">
          <el-button type="primary" size="small" plain @click="togglePermTree">
            <i-ep-switch />
            {{ isExpanded ? "收缩" : "展开" }}