@angular-jz/jz/jz/component/jz-page-message/jz-page-message.component.html

jim jz

<style>
    .deadline {
        padding: 0;
    }

        .deadline::after {
            content: '.';
            display: block;
            line-height: 1.5;
            text-align: center;
            border-bottom: 1px solid #d0d0d0;
            color: #d0d0d0;
        }

    .deadline-text {
        color: #b4b4b4;
    }
</style>
<jz-breadcrumb [root]="'首页'" [module]="'我的工作台'" [page]="'我的消息'"></jz-breadcrumb>
<div class="wrapper wrapper-content">
    <div class="ibox-content m-b-sm border-bottom">
        <div class="row">
            <div class="col-sm-9">
                <table>
                    <tr>
                        <td class="p-w-xs" style="width:200px;">
                            <jz-select [placeholder]="'请选择消息状态'" [items]="dics['消息状态']" [textField]="'dicName'" [idField]="'dicCode'" [(ngModel)]="criteria.messageStart"></jz-select>
                        </td>
                        <td class="p-w-xs" style="width:250px;">
                            <div class="input-group">
                                <input type="text" class="form-control" [(ngModel)]="criteria.keyword" (keyup.enter)="searchItems()" placeholder="请输入标题或内容">
                                <div class="input-group-btn">
                                    <button class="btn btn-primary" (click)="searchItems()">搜索</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-content">
                    <table class="table table-stripped table-hover">
                        <thead>
                            <tr>
                                <!--<th style="width:80px;"></th>-->
                                <th style="width: 20%">消息标题</th>
                                <th>消息内容</th>
                                <th style="width: 6em;">消息类型</th>
                                <th style="width: 10em;">发送时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngIf="!items.length">
                                <td class="deadline-text" colspan="10">
                                    <p>暂无消息</p>
                                </td>
                            </tr>
                            <tr *ngFor="let item of items">
                                <!--<td><span class="label label-{{item.isRead?'default':'warning'}}">{{item.isRead?"已读":"未读"}}</span></td>-->
                                <td><span class="label label-{{item.isRead?'info':'warning'}}">{{item.isRead?"已读":"未读"}}</span>  <a (click)="goTo(item.id,item.message.pcUrl,item.isRead)">{{item.message.title}}</a></td>
                                <td>{{item.message.msContent}}</td>
                                <td>{{item.message.businessType}}</td>
                                <td>{{item.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5">
                                    <table style="width:100%;">
                                        <tr>
                                            <td align="left">
                                                <span *ngIf="totalCount>0">共: {{totalCount}} 条数据</span>
                                            </td>
                                            <td align="right">
                                                <ngb-pagination *ngIf="totalCount>0" class="pull-right" [collectionSize]="totalCount" [pageSize]="criteria.page.pageSize" [page]="criteria.page.pageNo" [maxSize]="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true" (pageChange)="pageChange($event)"></ngb-pagination>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>