| | |
| | | <template> |
| | | <div> |
| | | <div class="flex justify-between mb-[15px]"> |
| | | <div style="position: relative"> |
| | | <div class="flex justify-between mb-[15px]" style="align-items: center;margin-bottom: 5px"> |
| | | <div class="block mb-3 font-semibold fonts">消息中心</div> |
| | | <div class="flex text-[12px]"> |
| | | <div |
| | |
| | | color: '#454B5E', |
| | | fontSize: '12px' |
| | | }" |
| | | height="280" |
| | | min-height="280" |
| | | max-height="280" |
| | | v-loading="tableLoading" |
| | | > |
| | | <el-table-column |
| | | v-for="column in currentTableHeaders" |
| | |
| | | :label="column.label" |
| | | :min-width="column.minWidth" |
| | | :prop="column.prop" |
| | | :show-overflow-tooltip="column.showOverflowTooltip" |
| | | > |
| | | <template v-if="column.slot === 'sort'" #default="scope"> |
| | | <div |
| | | :class=" |
| | | getSortClass( |
| | | (queryParams.pageNum - 1) * |
| | | (queryParams.currentPage - 1) * |
| | | queryParams.pageSize + |
| | | scope.$index + |
| | | 1 |
| | |
| | | class="sort" |
| | | > |
| | | <span>{{ |
| | | (queryParams.pageNum - 1) * queryParams.pageSize + |
| | | (queryParams.currentPage - 1) * queryParams.pageSize + |
| | | scope.$index + |
| | | 1 |
| | | }}</span> |
| | |
| | | > |
| | | <template #default="scope"> |
| | | <el-button |
| | | plain |
| | | size="small" |
| | | type="primary" |
| | | type="text" |
| | | @click="handleDetail(scope.row)" |
| | | > |
| | | 查看</el-button |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | <div style="position: absolute; bottom: 0px;width: 100%;"> |
| | | <div style="width: 100%;display: flex;flex-direction: row-reverse;align-items: center"> |
| | | <pagination |
| | | style="width: 100%" |
| | | v-show="total >= 0" |
| | | :page-sizes="[4]" |
| | | :limit="queryParams.pageSize" |
| | | :page="queryParams.pageNum" |
| | | :page="queryParams.currentPage" |
| | | :total="total" |
| | | @pagination="getList" |
| | | /> |
| | | @pagination="getMessageCountFun" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script> |
| | |
| | | name: "Index", |
| | | data() { |
| | | return { |
| | | tableLoading: false, |
| | | total: 0, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | currentPage: 1, |
| | | pageSize: 4 |
| | | }, |
| | | tableData: [], |
| | | tabs: [ |
| | | // { id: 'process', label: '通知公告', num: '2' }, |
| | | { id: 'review', label: '审核消息', num: '6' } |
| | | { id: 'review', label: '审核消息', num: '' } |
| | | // { id: 'supervision', label: '督办消息', num: '9' }, |
| | | // { id: 'progress', label: '进度消息', num: '7' } |
| | | ], |
| | | currentTabId: 0, |
| | | //配置表格表头数据 |
| | | currentTableHeaders: [ |
| | | { label: '排序', prop: 'index', minWidth: 50, align: 'center', slot: 'sort' }, |
| | | { label: '发布单位', prop: 'commitDept', minWidth: 150, align: 'left' }, |
| | | { label: '内容', prop: 'content', minWidth: 300, align: 'left' }, |
| | | { label: '时间', prop: 'createTime', minWidth: 143, align: 'left' } |
| | | { label: '#', prop: 'index', minWidth: 50, align: 'center', slot: 'sort' }, |
| | | { label: '消息内容', prop: 'content', minWidth: 300, align: 'left', showOverflowTooltip: true }, |
| | | { label: '时间', prop: 'gmtCreate', minWidth: 143, align: 'left' } |
| | | ] |
| | | } |
| | | }, |
| | |
| | | }, |
| | | created() { |
| | | this.currentTabId = this.tabs[0].id; // 默认选中的tab的id |
| | | this.getList(); |
| | | this.getMessageCountFun(); |
| | | |
| | | this.getMessageCountFun({page: 1}); |
| | | }, |
| | | methods: { |
| | | |
| | | |
| | | async getList() { |
| | | const resp = await getMessage(this.queryParams); |
| | | if (resp.code === 200) { |
| | | this.total = resp.total; |
| | | this.tableData = resp.rows; |
| | | } |
| | | async getMessageCountFun(data) { |
| | | this.queryParams.currentPage = data.page |
| | | this.tableLoading = true |
| | | await getMessageCount(this.queryParams).then(res => { |
| | | this.tableData = res.data |
| | | this.total = res.total |
| | | this.tableLoading = false |
| | | }); |
| | | }, |
| | | |
| | | async getMessageCountFun() { |
| | | const resp = await getMessageCount(); |
| | | if (resp.code === 200) { |
| | | this.tabs = tabs.map((tab) => { |
| | | if (tab.label === '审核消息') { |
| | | tab.num = resp.data.auditCount; |
| | | } |
| | | return tab; |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | |
| | | switchTab(tabId) { |
| | | currentTabId = tabId; |
| | | this.currentTabId = tabId; |
| | | }, |
| | | |
| | | getSortClass(index) { |
| | |
| | | this.getReadFun(row.id); |
| | | if (row.auditType === '2') { |
| | | this.$router.push({ |
| | | path: '/projectManage/nodeDetails', |
| | | path: '/process', |
| | | query: { taskId: row.taskId, id: row.businessKey, auditType: row.auditType, disabled: 'true' } |
| | | }); |
| | | } else { |
| | | this.$router.push({ |
| | | path: '/projectManage/nodeDetails', |
| | | path: '/process', |
| | | query: { taskId: row.taskId, id: row.businessKey, disabled: 'true' } |
| | | }); |
| | | } |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .tab { |
| | | padding: 8px; |
| | | padding: 6px; |
| | | border: 1px solid #dbdeea; |
| | | cursor: pointer; |
| | | width: 72px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | |
| | | .active { |
| | |
| | | text-align: end; |
| | | } |
| | | ::v-deep .el-pagination .btn-prev .el-icon, |
| | | ::v-deep .el-pagination .btn-next .el-icon |
| | | ::v-deep .el-pagination .btn-next .el-icon |
| | | { |
| | | display: inline; |
| | | } |