[新增]创建考试页面搭建

src/app/app.module.ts

@@ -18,7 +18,9 @@ import {CacheTokenService} from './http-interceptors/cache-token.service'
 import { TreeService } from'./http-interceptors/tree.service'
 import { IsLoginService } from './is-login.service';
 import { ComponentServiceService } from './component-service.service';
-
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
 @NgModule({
   declarations: [
     AppComponent

src/app/pipes/size.pipe.ts

@@ -42,4 +42,17 @@ export class NamePipe3 implements PipeTransform {
             return  name.replace(/\//g,'>').substring(9,name.length)
         }
     }
+}
+
+@Pipe({name: 'testState'})
+export class testState implements PipeTransform {
+    transform(name: string): string {
+        if(name == "1"){
+            return  "未开考"
+        }else if(name == "2"){
+            return  "开考中"
+        }else{
+            return  "已结束"
+        }
+    }
 }

src/app/ui/create-exam/create-exam.component.html

@@ -1 +1,54 @@
-<p>创建考试</p>
+<div class="box">
+    <div class="createBtn">
+        <button mat-raised-button color="primary" (click)="createTest()">新增考题</button>
+    </div>
+    <div class="tablebox">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef>试卷名称</th>
+                <td mat-cell *matCellDef="let element">{{element.name}}</td>
+            </ng-container>
+          
+            <!-- Name Column -->
+            <ng-container matColumnDef="organization">
+                <th mat-header-cell *matHeaderCellDef>考核中队</th>
+                <td mat-cell *matCellDef="let element">{{element.organization}}</td>
+            </ng-container>
+          
+            <!-- Weight Column -->
+            <ng-container matColumnDef="startTime">
+                <th mat-header-cell *matHeaderCellDef>开考时间</th>
+                <td mat-cell *matCellDef="let element">{{element.startTime}}</td>
+            </ng-container>
+          
+            <!-- Symbol Column -->
+            <ng-container matColumnDef="overTime">
+                <th mat-header-cell *matHeaderCellDef>结束时间</th>
+                <td mat-cell *matCellDef="let element">{{element.overTime}}</td>
+            </ng-container>
+          
+            <!-- Symbol Column -->
+            <ng-container matColumnDef="testState">
+                <th mat-header-cell *matHeaderCellDef>考试状态</th>
+                <td mat-cell *matCellDef="let element">
+                    <i  [ngClass]="{'green': element.testState == '2','red':element.testState == '3'}">
+                        {{element.testState | testState}}
+                    </i>
+                </td>
+            </ng-container>
+
+              <!-- Symbol Column -->
+            <ng-container matColumnDef="operation">
+                <th mat-header-cell *matHeaderCellDef>操作</th>
+                <td mat-cell *matCellDef="let element">
+                    <span>编辑</span>    
+                    <span>详情</span>    
+                    <span [ngClass]="{'grey': element.testState == '2' || element.testState == '3'}">删除</span>   
+                </td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <mat-paginator [pageSize]="10"></mat-paginator>
+    </div>
+</div>

src/app/ui/create-exam/create-exam.component.scss

@@ -0,0 +1,52 @@
+.box{
+    width:100%;
+    height: 100%;
+    margin: 0 auto;
+    .createBtn{
+        height: 60px;
+        line-height: 60px;
+        margin-bottom: 6px;
+        margin-left: 20px;
+    }
+    .tablebox{
+        table{
+            width: 100%;
+        }
+        
+    }
+}
+.mat-header-cell{
+    text-align: center;
+}
+.mat-cell{
+    text-align: center;
+    span{
+        color: #0000BF;
+        margin: 0 3px;
+        cursor: pointer;
+    }
+    span:hover{
+        text-decoration:underline
+    }
+    .grey{
+        color: grey;
+        pointer-events: none;
+    }
+    .green{
+        color: #70b603;
+    }
+    .red{
+        color: #d9001b;
+    }
+}
+
+.dialog{
+    .title{
+        h1{
+            font-size: 25px;
+            font-weight: 900;
+            text-align: center;
+        }
+       
+    }
+}

src/app/ui/create-exam/create-exam.component.ts

@@ -1,5 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,Inject } from '@angular/core';
-
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import {FormControl} from '@angular/forms';
+const ELEMENT_DATA: any[] = [
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'1'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'1'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'2'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'3'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'3'},
+  {name: "富华酒店", organization: '浦东支队', startTime: "2020-09-19 10:00", overTime: '2020-09-19 12:00',testState:'3'},
+];
 @Component({
   selector: 'app-create-exam',
   templateUrl: './create-exam.component.html',
@@ -7,9 +21,56 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CreateExamComponent implements OnInit {
 
-  constructor() { }
+  constructor(public dialog: MatDialog,public snackBar: MatSnackBar) { }
-
+  displayedColumns: string[] = ['name', 'organization', 'startTime', 'overTime', 'testState', 'operation'];
+  dataSource = ELEMENT_DATA;
   ngOnInit(): void {
   }
+  //新增考题弹出框
+  createTest(){
+    const dialogRef = this.dialog.open(CreateDialog, {
+      data: {}
+    });
+    dialogRef.afterClosed().subscribe(
+      data=>{
+        if(data){
+    
+        }  
+      }
+    );
+  }
+}
+
+import getISOWeek from 'date-fns/getISOWeek';
+//创建组织
+@Component({
+  selector: 'CreateDialog',
+  templateUrl: './createDialog.html',
+  styleUrls: ['./create-exam.component.scss']
+})
+export class CreateDialog {
+  myControl = new FormControl();
+  constructor(
+    public dialogRef: MatDialogRef<CreateDialog>,
+    @Inject(MAT_DIALOG_DATA) public data,
+    public snackBar: MatSnackBar) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(value){
+  }
+  date = null;
 
+  onChange(result: Date[]): void {
+    console.log('onChange: ', result);
+  }
+  getWeek(result: Date[]): void {
+    console.log('week: ', result.map(getISOWeek));
+  }
 }
+
+
+
+

src/app/ui/create-exam/createDialog.html

@@ -0,0 +1,34 @@
+<div class="dialog">
+    <div class="title">
+        <h1>试卷新增</h1>
+    </div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+  
+        <div>
+            <span>试卷名称</span>
+            <input id="name" name="name" type='text'
+            required
+            ngModel #name="ngModel">
+        </div>
+         
+      
+        <div>
+            <span>考核中队</span>
+            <input id="name" name="name" type='text'
+            required
+            ngModel #name="ngModel">
+        </div>
+        <div>
+            <span>考试时间</span>
+            <!-- <nz-range-picker  id="date" name="date" [nzShowTime]="true" [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker> -->
+        </div>
+    
+        
+        <div class="btn">
+          <button type="submit" class="savebtn" mat-raised-button color="primary"  [disabled]='form.invalid'>确定</button>
+          <button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button>
+        </div>
+        
+    </form>
+</div>
+

src/app/ui/ui.module.ts

@@ -47,7 +47,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { PersonaldataComponent } from '../pages/personaldata/personaldata.component';
 import { ChangepasswordComponent } from './changepassword/changepassword.component';
-import { SizePipe , NamePipe,NamePipe2, NamePipe3} from '../pipes/size.pipe';
+import { SizePipe , NamePipe,NamePipe2, NamePipe3, testState} from '../pipes/size.pipe';
 import {ConfirmpswDirective} from './changepassword/equal-validator.directive';
 import { FileUploadModule } from 'ng2-file-upload'
 import { AllFileComponent, ViewDetails, FolderDialog } from './all-file/all-file.component';
@@ -62,13 +62,14 @@ import { TeacherManagementComponent, editTeacher, seeTeacher } from './teacherMa
 import { AddTeacher } from './teacherManagement/addenterpriseuser.component';
 import { LearningRecordDetailsComponent } from './learning-record-details/learning-record-details.component';
 import {EhartsStatisticsComponent} from './eharts-statistics/eharts-statistics.component';
-import { CreateExamComponent } from './create-exam/create-exam.component';
+import { CreateExamComponent, CreateDialog } from './create-exam/create-exam.component';
 import { LookOverTestComponent } from './look-over-test/look-over-test.component';
 import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component';
 import { JoinExamComponent } from './join-exam/join-exam.component';
 import { TestRecordsComponent } from './test-records/test-records.component'
+
 @NgModule({
-  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,NamePipe3,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent, UploadFilesComponent,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,TeacherManagementComponent,editTeacher,AddTeacher,seeTeacher, LearningRecordDetailsComponent, EhartsStatisticsComponent, CreateExamComponent, LookOverTestComponent, StatisticAnalysisComponent, JoinExamComponent, TestRecordsComponent],
+  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,NamePipe3,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent, UploadFilesComponent,AddEnterpriserUser,EnterpriseuserComponent,editenterpriseuser,seeenterpriseuser,TeacherManagementComponent,editTeacher,AddTeacher,seeTeacher, LearningRecordDetailsComponent, EhartsStatisticsComponent, CreateExamComponent, LookOverTestComponent, StatisticAnalysisComponent, JoinExamComponent, TestRecordsComponent,testState,CreateDialog],
 
   imports: [
     CommonModule,