@hbisty/qj-common 5.0.4 → 5.0.5

package/src/components/SiteMsg/index.vue

@@ -0,0 +1,707 @@
+<template>
+  <div class="site-msg">
+    <el-drawer
+      :visible.sync="drawerVisible"
+      direction="rtl"
+      size="820px"
+      :with-header="false"
+      :before-close="handleClose"
+      custom-class="site-msg-drawer"
+      append-to-body
+    >
+      <div class="site-msg-container">
+        <!-- 顶部主消息类型Tab -->
+        <div class="msg-header">
+          <div class="msg-tabs">
+            <div
+              v-for="tab in messageTypes"
+              :key="tab.key"
+              class="msg-tab"
+              :class="{ active: activeType === tab.key }"
+              @click="switchType(tab.key)"
+            >
+              <span class="tab-name">{{ tab.name }}</span>
+              <el-badge
+                v-if="getTypeUnreadCount(tab.key) > 0"
+                :value="getTypeUnreadCount(tab.key)"
+                class="tab-badge"
+              />
+            </div>
+          </div>
+          <div class="msg-close" @click="closeDrawer">
+            <i class="el-icon-close"></i>
+          </div>
+        </div>
+
+        <div class="msg-body">
+          <!-- 左侧消息子类 -->
+          <div class="msg-sidebar">
+            <div
+              v-for="sub in currentSubCategories"
+              :key="sub.key"
+              class="sidebar-item"
+              :class="{ active: activeSub === sub.key }"
+              @click="switchSub(sub.key)"
+            >
+              <span class="sidebar-name">{{ sub.name }}</span>
+              <el-badge
+                v-if="getSubUnreadCount(sub.key) > 0"
+                :value="getSubUnreadCount(sub.key)"
+                class="sidebar-badge"
+              />
+            </div>
+          </div>
+
+          <!-- 右侧消息区 -->
+          <div class="msg-content">
+            <!-- 筛选Tab + 全部已读 -->
+            <div class="content-toolbar">
+              <div class="filter-tabs">
+                <div
+                  v-for="f in filterTabs"
+                  :key="f.key"
+                  class="filter-tab"
+                  :class="{ active: filterActive === f.key }"
+                  @click="switchFilter(f.key)"
+                >
+                  <span class="filter-name">{{ f.name }}</span>
+                  <span class="filter-count" v-if="f.key === 'unread'">({{ getSubUnreadCount(activeSub) }})</span>
+                </div>
+              </div>
+              <el-checkbox
+                v-if="getCurrentFilteredMessages().length > 0"
+                v-model="markAllChecked"
+                @change="markAllRead"
+                class="mark-all"
+              >
+                全部已读
+              </el-checkbox>
+            </div>
+
+            <!-- 搜索框 -->
+            <div class="search-bar">
+              <el-input
+                v-model="searchKeyword"
+                placeholder="搜索消息名称或内容"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+                @keyup.enter="handleSearch"
+                @clear="handleSearch"
+              />
+              <el-button
+                type="primary"
+                size="small"
+                icon="el-icon-search"
+                @click="handleSearch"
+              >搜索</el-button>
+            </div>
+
+            <!-- 消息列表 -->
+            <div class="message-list" v-loading="loading">
+              <div
+                v-for="msg in filteredMessages"
+                :key="msg.id"
+                class="message-card"
+                :class="{ unread: !msg.isRead }"
+              >
+                <div class="msg-card-header">
+                  <span class="msg-title">{{ msg.title }}</span>
+                  <span class="msg-time">{{ msg.time }}</span>
+                  <el-tooltip
+                    :content="msg.isRead ? '已读' : '标记为已读'"
+                    placement="top"
+                    :open-delay="300"
+                  >
+                    <img
+                      v-if="!msg.isRead"
+                      src="./img/unread-icon.png"
+                      alt="未读"
+                      class="msg-read-icon"
+                      @click="!msg.isRead && markAsRead(msg.id)"
+                    />
+                    <img
+                      v-else
+                      src="./img/readed-icon.png"
+                      alt="已读"
+                      class="msg-read-icon"
+                    />
+                  </el-tooltip>
+                </div>
+                <div class="msg-content-text" v-html="renderContent(msg)"></div>
+              </div>
+
+              <el-empty
+                v-if="!loading && filteredMessages.length === 0"
+                description="暂无消息"
+              />
+            </div>
+
+            <!-- 分页 -->
+            <div class="msg-pagination">
+              <el-pagination
+                v-if="total > 0"
+                small
+                background
+                layout="prev, pager, next, jumper"
+                :current-page="currentPage"
+                :page-size="pageSize"
+                :total="total"
+                @current-change="handleCurrentChange"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { 
+  queryMailMnsblistPageTree, 
+  queryMnsblistPage, 
+  updateStateExtRead, 
+  updateAllRead 
+} from '#/api/siteMsg';
+
+export default {
+  name: 'SiteMsg',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      drawerVisible: this.visible,
+      loading: false,
+      treeLoading: false,
+      treeLoaded: false,
+      activeType: '',
+      activeSub: '',
+      filterActive: 'all',
+      searchKeyword: '',
+      appliedKeyword: '',
+      markAllChecked: false,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      totalUnread: 0,
+      messageTypes: [],
+      subCategoryMap: {},
+      filterTabs: [
+        { key: 'unread', name: '仅展示未读' },
+        { key: 'read', name: '仅展示已读' },
+        { key: 'all', name: '全部消息' }
+      ],
+      messages: []
+    }
+  },
+  computed: {
+    currentSubCategories() {
+      return this.subCategoryMap[this.activeType] || []
+    },
+    filteredMessages() {
+      return this.messages
+    }
+  },
+  watch: {
+    visible(val) {
+      this.drawerVisible = val
+      if (val && !this.treeLoaded) {
+        this.fetchTree()
+      }
+    },
+    drawerVisible(val) {
+      this.$emit('update:visible', val)
+    }
+  },
+  mounted() {
+    this.fetchTree()
+  },
+  methods: {
+    // 1.查询顶部tab消息类型和左侧tab状态类型
+    async fetchTree() {
+      this.treeLoading = true
+      try {
+        const res = await queryMailMnsblistPageTree({ mnslistBustype: 'smail', stateExt: '0' })
+        const list = (res && res.mnsTabTreeNodeList) || []
+        this.messageTypes = list.map(n => ({
+          key: n.code,
+          name: n.message,
+          badge: n.badge || 0,
+          children: (n.children || []).map(c => ({
+            key: c.code,
+            name: c.message,
+            badge: c.badge || 0
+          }))
+        }))
+        this.subCategoryMap = {}
+        this.messageTypes.forEach(t => {
+          this.subCategoryMap[t.key] = t.children
+        })
+        this.totalUnread = (res && res.badge) || 0
+        this.treeLoaded = true
+        // 设置默认选中项
+        if (this.messageTypes.length > 0) {
+          if (!this.messageTypes.find(t => t.key === this.activeType)) {
+            this.activeType = this.messageTypes[0].key
+          }
+          const subs = this.subCategoryMap[this.activeType] || []
+          if (subs.length > 0 && !subs.find(s => s.key === this.activeSub)) {
+            this.activeSub = subs[0].key
+          } else if (subs.length === 0) {
+            this.activeSub = ''
+          }
+        }
+        this.emitUnreadCount()
+        this.fetchMessageList()
+      } catch (e) {
+        console.error('queryMailMnsblistPageTree error:', e)
+      } finally {
+        this.treeLoading = false
+      }
+    },
+    // 2.根据1,2级选中的类型查询消息列表
+    async fetchMessageList() {
+      if (!this.activeType) {
+        this.messages = []
+        return
+      }
+      this.loading = true
+      this.markAllChecked = false
+      try {
+        const params = {
+          page: this.currentPage,
+          rows: this.pageSize,
+          mnslistBustype: 'smail',
+          mnslistBustnameExt: this.activeType, // 一级菜单code
+          // fuzzy: false
+        }
+        if (this.activeSub) {
+          params.mnslistBustypeExt = this.activeSub // 二级菜单code
+        }
+        if (this.appliedKeyword) {
+          params.mnslistContentLike = this.appliedKeyword // 模糊搜索关键词
+        }
+        // stateExt: 0未读 1已读 查全部不传
+        if (this.filterActive === 'unread') {
+          params.stateExt = '0'
+        } else if (this.filterActive === 'read') {
+          params.stateExt = '1'
+        }
+        const res = await queryMnsblistPage(params)
+        const rows = (res && res.rows) || []
+        this.messages = rows.map(r => this.mapMessage(r))
+        this.total = (res && res.total) || this.messages.length
+      } catch (e) {
+        console.error('queryMnsblistPage error:', e)
+        this.messages = []
+        this.total = 0
+      } finally {
+        this.loading = false
+      }
+    },
+    // 行数据映射为组件所需结构
+    mapMessage(row) {
+      return {
+        id: row.mnsblistId || row.id || '',
+        typeId: this.activeType,
+        subId: this.activeSub,
+        title: row.mnschannelName || row.mnslistName || '',
+        time: this.pickTime(row),
+        content: row.mnslistContent || '',
+        isRead: String(row.stateExt) === '1',
+        raw: row
+      }
+    },
+    // 兼容取消息时间字段
+    pickTime(row) {
+      const fields = ['gmtModified', 'gmtCreate', 'sendTime', 'createTime', 'mnsblistDate', 'mnsblistTime']
+      for (const f of fields) {
+        if (row[f]) return row[f]
+      }
+      return ''
+    },
+    emitUnreadCount() {
+      this.$emit('unread-count-change', this.totalUnread)
+    },
+    switchType(key) {
+      this.activeType = key
+      const subs = this.subCategoryMap[key] || []
+      this.activeSub = subs.length > 0 ? subs[0].key : ''
+      this.filterActive = 'all'
+      this.appliedKeyword = ''
+      this.searchKeyword = ''
+      this.markAllChecked = false
+      this.currentPage = 1
+      this.fetchMessageList()
+    },
+    switchSub(key) {
+      this.activeSub = key
+      this.filterActive = 'all'
+      this.appliedKeyword = ''
+      this.searchKeyword = ''
+      this.markAllChecked = false
+      this.currentPage = 1
+      this.fetchMessageList()
+    },
+    switchFilter(key) {
+      this.filterActive = key
+      this.currentPage = 1
+      this.fetchMessageList()
+    },
+    getTypeUnreadCount(typeKey) {
+      const node = this.messageTypes.find(t => t.key === typeKey)
+      return node ? node.badge : 0
+    },
+    getSubUnreadCount(subKey) {
+      const sub = this.currentSubCategories.find(c => c.key === subKey)
+      return sub ? sub.badge : 0
+    },
+    getCurrentFilteredMessages() {
+      return this.filteredMessages
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.fetchMessageList()
+    },
+    handleSearch() {
+      this.appliedKeyword = this.searchKeyword.trim()
+      this.currentPage = 1
+      this.fetchMessageList()
+    },
+    // 3.单个已读
+    async markAsRead(id) {
+      const msg = this.messages.find(m => m.id === id)
+      if (!msg || msg.isRead) return
+      try {
+        await updateStateExtRead({ mnsblistId: id })
+        msg.isRead = true
+        const subNode = this.currentSubCategories.find(c => c.key === this.activeSub)
+        const typeNode = this.messageTypes.find(t => t.key === this.activeType)
+        if (subNode && subNode.badge > 0) subNode.badge--
+        if (typeNode && typeNode.badge > 0) typeNode.badge--
+        if (this.totalUnread > 0) this.totalUnread--
+        this.emitUnreadCount()
+      } catch (e) {
+        console.error('updateStateExtRead error:', e)
+        this.$message.error('标记已读失败')
+      }
+    },
+    // 全部已读（当前二级菜单下的消息）
+    async markAllRead(val) {
+      if (!val) return
+      const unread = this.filteredMessages.filter(m => !m.isRead)
+      if (unread.length === 0) {
+        this.markAllChecked = false
+        return
+      }
+      const params = {
+        mnslistBustypeExt: this.activeSub, // 二级菜单code
+      }
+      const subNode = this.currentSubCategories.find(c => c.key === this.activeSub)
+      const typeNode = this.messageTypes.find(t => t.key === this.activeType)
+      const subUnread = subNode ? subNode.badge : 0
+      try {
+        const res = await updateAllRead(params)
+        if (res.success) {
+          // 接口标记的是当前二级菜单下全部消息（含分页外），按二级菜单未读数同步徽标
+          if (subNode) subNode.badge = 0
+          if (typeNode) typeNode.badge = Math.max(0, typeNode.badge - subUnread)
+          this.totalUnread = Math.max(0, this.totalUnread - subUnread)
+          this.emitUnreadCount()
+          this.fetchMessageList()
+          this.$message.success('已全部标记为已读')
+        } else {
+          this.$message.error(res.msg || '全部已读失败')
+        }
+      } catch (e) {
+        console.error('updateAllRead error:', e)
+        this.$message.error('全部已读失败')
+      } finally {
+        this.markAllChecked = false
+      }
+    },
+    renderContent(msg) {
+      return msg.content
+    },
+    jumpToProduct(code) {
+      this.$emit('jump-to-product', code)
+      this.$message.info(`跳转至商品中心 - 商品管理 - 待审核商品列表，商品编号：${code}`)
+    },
+    closeDrawer() {
+      this.drawerVisible = false
+    },
+    handleClose(done) {
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.site-msg-drawer {
+  .el-drawer__body {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .site-msg-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: #f5f7fa;
+  }
+
+  .msg-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+    padding: 0 16px;
+    border-bottom: 1px solid #e4e7ed;
+    height: 50px;
+    flex-shrink: 0;
+
+    .msg-tabs {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .msg-tab {
+      display: flex;
+      align-items: center;
+      padding: 0 14px;
+      height: 50px;
+      cursor: pointer;
+      font-size: 14px;
+      color: #606266;
+      position: relative;
+      white-space: nowrap;
+      transition: color 0.2s;
+
+      &:hover {
+        color: #409eff;
+      }
+
+      &.active {
+        color: #409eff;
+        font-weight: 600;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 14px;
+          right: 14px;
+          height: 2px;
+          background: #409eff;
+        }
+      }
+
+      .tab-name {
+        line-height: 50px;
+      }
+
+      .tab-badge {
+        margin-left: 4px;
+      }
+    }
+
+    .msg-close {
+      cursor: pointer;
+      font-size: 18px;
+      color: #909399;
+      padding: 4px;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+
+  .msg-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .msg-sidebar {
+    width: 160px;
+    background: #fff;
+    border-right: 1px solid #e4e7ed;
+    padding: 12px 0;
+    flex-shrink: 0;
+    overflow-y: auto;
+
+    .sidebar-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 16px;
+      cursor: pointer;
+      font-size: 13px;
+      color: #606266;
+      transition: all 0.2s;
+
+      &:hover {
+        background: #ecf5ff;
+        color: #409eff;
+      }
+
+      &.active {
+        background: #ecf5ff;
+        color: #409eff;
+        font-weight: 600;
+        border-right: 3px solid #409eff;
+      }
+
+      .sidebar-name {
+        flex: 1;
+      }
+    }
+  }
+
+  .msg-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0 16px;
+  }
+
+  .content-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #ebeef5;
+    flex-shrink: 0;
+
+    .filter-tabs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .filter-tab {
+      display: flex;
+      align-items: center;
+      padding: 6px 12px;
+      border-radius: 16px;
+      cursor: pointer;
+      font-size: 13px;
+      color: #606266;
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      transition: all 0.2s;
+
+      &:hover {
+        color: #409eff;
+        border-color: #409eff;
+      }
+
+      &.active {
+        background: #409eff;
+        color: #fff;
+        border-color: #409eff;
+        font-weight: 600;
+      }
+
+      .filter-count {
+        margin-left: 2px;
+      }
+    }
+
+    .mark-all {
+      font-size: 13px;
+    }
+  }
+
+  .search-bar {
+    display: flex;
+    gap: 8px;
+    padding: 12px 0;
+    flex-shrink: 0;
+
+    .el-input {
+      flex: 1;
+    }
+  }
+
+  .message-list {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 16px;
+
+    .message-card {
+      background: #fff;
+      border-radius: 6px;
+      padding: 14px 16px;
+      margin-bottom: 10px;
+      border: 1px solid #ebeef5;
+      transition: box-shadow 0.2s;
+
+      &:hover {
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+      }
+
+      &.unread {
+        border-left: 3px solid #409eff;
+        background: #fafcff;
+      }
+
+      .msg-card-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .msg-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: #303133;
+        }
+
+        .msg-time {
+          font-size: 12px;
+          color: #909399;
+          margin-left: 12px;
+        }
+
+        .msg-read-icon {
+          margin-left: auto;
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+        }
+      }
+
+      .msg-content-text {
+        font-size: 13px;
+        color: #606266;
+        line-height: 1.6;
+
+        .highlight-link {
+          color: #409eff;
+          cursor: pointer;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+  .msg-pagination {
+    flex-shrink: 0;
+    padding: 8px 0;
+    text-align: center;
+  }
+}
+</style>