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-20 09:33:02
-->
<div class="content">
    <div class="header">
        <div class="queryBox">
            <div class="queryField ordiv">
                <label style="margin-right: 10px;font-size: 18px;">消防救援站:</label>
                <!-- <input list="cars" placeholder="请输入用户账号" [(ngModel)]="accound" />
                <datalist id="cars" (onchange)="getoption()">
	            <option *ngFor="let item of helpName" [value]="item.id" id={{item.id}} >{{item.name}}</option>
                </datalist> -->
                <input (click)="stopclose($event)" readonly   autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()" placeholder="请填写">
                <mat-checkbox color="primary" style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
                            <div class="organizationbox" *ngIf="isorganizationbox">
                                <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
                                <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                                    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
                                        <button type="button" mat-icon-button disabled ></button>
                                        <li>{{node.name}}</li>
                                    </mat-tree-node>
                                    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
                                        <button 
                                            type="button" 
                                            mat-icon-button 
                                            matTreeNodeToggle
                                            [attr.aria-label]="'toggle ' + node.name">
                                        <mat-icon class="mat-icon-rtl-mirror">
                                            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                        </mat-icon>
                                        </button>
                                        <li>{{node.name}}</li>
                                    </mat-tree-node>
                                </mat-tree>  
                            </div>
                <!-- <mat-form-field appearance="fill">
                    <mat-label>请选择</mat-label>
                    <mat-select [(ngModel)]="accound">
                      <mat-option *ngFor="let food of helpName" [value]="food.id">
                        {{food.name}}
                      </mat-option>
                    </mat-select>
                  </mat-form-field> -->
                  
            </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: 620px;">
                <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 tabledataSource">
                    <td>{{item.title}}</td>
                    <td>广西总队</td>
                    <td>{{item.startTime|date:'yyyy-MM-dd HH:mm'}}</td>
                    <td>{{item.endTime|date:'yyyy-MM-dd HH:mm'}}</td>
                    <!-- <td [ngClass]="{'green': item.testState == '开考中','red':item.testState == '已结束'}">{{item.testState}}</td> -->
                    <td [ngClass]="{'green': item.status == '1','red':item.status == '2'}">{{item.status=="2"?"已结束":item.status=="0"?"未开考":"开考中"}}</td>
                    <td>
                        <span style="color: #07CDCF;margin-right: 10px;cursor: pointer;" (click)="editPaper(item)">编辑</span>    
                        <span style="color: #07CDCF;cursor: pointer;" (click)="lookPaper(item)">详情</span>
                        <span *ngIf="item.status=='0'" style="color: #FF8678;margin-left: 10px;cursor: pointer;" (click)="deleteExam(item.id)">删除</span>
                    </td>
                </tr>
            </tbody>
            
        </table>
        <mat-paginator [length]="length"
                [pageSize]="pageSize"
                [pageSizeOptions]="pageSizeOptions"
                (page)="chagePage($event)">
            </mat-paginator>
    </div>
    
</div>