examSystem-Anxin/src/app/examiner/examiner-index/examiner-index.component.html

<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-12-11 09:06:03
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-12-14 15:59:51
-->
<div class="content">
    <div class="header">
        <div class="queryBox">
            <div class="queryField">
                <label style="margin-right: 10px;font-size: 18px;">消防救援站:</label>
                <input list="cars" placeholder="请输入用户账号" [(ngModel)]="accound" />
                <datalist id="cars">
	            <option value="admin">
	            <option value="surper">
	            <option value="ceshi">
                </datalist>
            </div>
            <div class="queryField">
                <button   style="background-color: #07CDCF;" (click)="findClick()">查询</button>
                <button   style="margin-left: 10px; background-color: #FF8678;" (click)="Reset()">重置</button>
            </div>
            <div class="queryField" style="margin-left: 720px;">
                <button style="background-color: #07CDCF;" (click)="newExamination()"><img style="position: relative;top: 3px;" src="../../../assets/images/add.png"> 新增考题</button>
            </div>
        </div>
    </div>
    <div class="centertable">
        <!-- <table mat-table [dataSource]="dataSource" >
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>试卷名称</th>
                <td mat-cell *matCellDef="let element">{{element.name}}</td>
            </ng-container>
          
           
        </table> -->
        <table >
            <thead>
                <th style="width: 15%;">试卷名称</th>
                <th style="width: 15%;">考核中队</th>
                <th style="width: 15%;">开始时间</th>
                <th style="width: 15%;">结束时间</th>
                <th style="width: 15%;">考试状态</th>
                <th style="width: 20%;">操作</th>
            </thead>
            <tbody>
                <tr *ngFor="let item of dataSource">
                    <td>{{item.name}}</td>
                    <td>{{item.organization}}</td>
                    <td>{{item.startTime}}</td>
                    <td>{{item.overTime}}</td>
                    <td [ngClass]="{'green': item.testState == '开考中','red':item.testState == '已结束'}">{{item.testState}}</td>
                    <td>
                        <span style="color: #07CDCF;margin-right: 10px;">编辑</span>    
                        <span style="color: #07CDCF;">详情</span>
                        <span *ngIf="item.testState=='未开考'" style="color: #FF8678;margin-left: 10px;cursor: pointer;">删除</span>
                    </td>
                </tr>
            </tbody>
            
        </table>
        <mat-paginator [length]="length"
                [pageSize]="pageSize"
                [pageSizeOptions]="pageSizeOptions"
                (page)="chagePage($event)">
            </mat-paginator>
    </div>
    
</div>