fad_oa/ruoyi-ui/src/views/hrm/flow/cc.vue

<template>
  <div class="app-container flow-cc-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">抄送我的</span>
          <el-button style="margin-left: 10px" size="mini" @click="handleRefresh">刷新</el-button>
          <el-checkbox v-model="ccFlag" label="已读" size="mini" @change="getList">只看已通过的</el-checkbox>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="未读" name="unread">
          <template #label>
            <span>
              未读
              <el-badge :value="badgeUnread" class="badge" v-if="badgeUnread > 0" />
            </span>
          </template>
          <!-- 内容跟随 tabs 切换统一渲染，逻辑写下面 -->
        </el-tab-pane>
        <el-tab-pane label="已读" name="read" />
      </el-tabs>

      <el-table v-loading="loading" :data="ccList" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column label="业务" prop="bizTypeName" width="150">
          <template slot-scope="scope">
            <el-tag :type="getTypeTagType(scope.row.bizType)">{{ getTypeText(scope.row.bizType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="内容" prop="bizTitle" min-width="300" show-overflow-tooltip />
        <el-table-column label="节点" prop="nodeName" width="180" />
        <el-table-column label="抄送人" prop="createBy">
        </el-table-column>
        <el-table-column label="抄送时间" prop="createTime" width="180">
          <template #default="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-link v-if="activeTab === 'unread'" type="primary" @click.stop="handleRead(scope.row)">
              标记已读
            </el-link>
            <el-link type="primary" @click.stop="goDetail(scope.row)">
              详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import applyTypeMinix from '@/views/hrm/minix/applyTypeMinix.js';
import { listCc, readCc, unreadCc } from '@/api/hrm/cc';

export default {
  name: 'HrmFlowCc',
  data () {
    return {
      loading: false,
      activeTab: 'unread',
      ccList: [],
      total: 0,
      ccFlag: true,
      badgeUnread: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        readFlag: 0
      }
    }
  },
  mixins: [applyTypeMinix],
  created () {
    this.getList()
  },
  computed: {
    currentUserId () {
      return this.$store.getters.id;
    }
  },
  methods: {
    tableRowClassName ({ row }) {
      return row.readFlag === 0 ? 'row-unread' : ''
    },
    handleTabClick () {
      this.queryParams.pageNum = 1
      this.queryParams.readFlag = this.activeTab === 'read' ? 1 : 0
      this.getList()
    },
    getList () {
      this.loading = true
      this.queryParams.ccFlag = this.ccFlag ? 1 : 0
      listCc({ ...this.queryParams, ccUserId: this.currentUserId })
        .then((res) => {
          this.ccList = res.rows || []
          this.total = res.total || 0
          if (this.activeTab === 'unread') {
            this.badgeUnread = res.total || 0
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleRead (row) {
      readCc(row.ccId).then(() => {
        this.$modal.msgSuccess('已标记已读')
        this.getList()
      })
    },
    // 标记未读
handleUnread(row) {
  unreadCc(row.ccId).then(() => {
    this.$modal.msgSuccess('已标记为未读')
    // 刷新当前列表（这条记录会移到未读列表）
    this.getList()
  })
},
    handleRefresh () {
      this.getList()
    }
  }
}
</script>

<style scoped>
.flow-cc-container {
  padding: 20px 20px 0 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.badge {
  margin-left: 6px;
}

/* 未读行高亮（柔和背景，不用渐变） */
.row-unread td {
  background-color: #fdf6ec !important;
  /* Element UI warning-light */
  font-weight: 600;
}
</style>