161 lines
4.4 KiB
Vue
161 lines
4.4 KiB
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>
|