Browse Source

[完善]考官创建考试页面完善

master
邵佳豪 3 years ago
parent
commit
085695a314
  1. 25
      src/app/examiner/create-test-score/create-test-score.component.spec.ts
  2. 74
      src/app/examiner/examiner-index/examiner-index.component.html
  3. 238
      src/app/examiner/examiner-index/examiner-index.component.scss
  4. 79
      src/app/examiner/examiner-index/examiner-index.component.ts
  5. 26
      src/app/http-interceptors/tree.service.ts

25
src/app/examiner/create-test-score/create-test-score.component.spec.ts

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateTestScoreComponent } from './create-test-score.component';
describe('CreateTestScoreComponent', () => {
let component: CreateTestScoreComponent;
let fixture: ComponentFixture<CreateTestScoreComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CreateTestScoreComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CreateTestScoreComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

74
src/app/examiner/examiner-index/examiner-index.component.html

@ -10,66 +10,37 @@
<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> -->
<label style="margin-right: 10px;font-size: 15px;">消防救援站:</label>
<nz-tree-select [nzDropdownClassName]="'maxHeightTreeSelect'" style="width: 250px" [(ngModel)]="js"
[nzNodes]="nodes" nzPlaceHolder="请选择" [nzExpandedIcon]="multiExpandedIconTpl" [nzExpandedKeys]="expandedKeys">
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<ng-container *ngIf="node.isExpanded; else elseTemplate">
<mat-icon>expand_more</mat-icon>
</ng-container>
<ng-template #elseTemplate>
<mat-icon>chevron_right</mat-icon>
</ng-template>
</ng-template>
</ng-template>
<mat-checkbox color="primary" style="margin-left: 26px;" [(ngModel)]="jscheck" name="jscheck">包含下级
</mat-checkbox>
</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 class="queryField">
<button style="background-color: #07CDCF;" (click)="newExamination()"><img style="vertical-align: bottom;" 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>
@ -87,7 +58,8 @@
<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" ? "未开考" : item.status == "-1" ? '未发布' : "开考中"}}</td>
{{item.status == "2" ? "已结束" : item.status == "0" ? "未开考" : item.status == "-1" ? '未发布' :
"开考中"}}</td>
<td>
<span style="color: #07CDCF;margin-right: 10px;cursor: pointer;"
(click)="editPaper(item)">编辑</span>

238
src/app/examiner/examiner-index/examiner-index.component.scss

@ -1,142 +1,122 @@
table {
width: 100%;
width: 100%;
text-align: center;
.cdk-header-cell {
text-align: center;
.cdk-header-cell {
text-align: center;
}
}
.content {
width: 100%;
height: 100%;
overflow: hidden;
background: #F2F5F6;
overflow-y: auto;
}
.header {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.content {
width: 100%;
height: 100%;
overflow: hidden;
background: #F2F5F6;
overflow-y: auto;
}
.header {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
align-items: center;
.queryBox {
box-sizing: border-box;
.queryBox {
box-sizing: border-box;
padding: 5px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items:center;
justify-content:left;
.queryField {
margin: 0 25px;
font-size: 14px;
input,select {
font-size: 15px;
width: 320px;
height: 44px;
line-height: 34px;
border-radius: 5px;
padding-left: 5px;
outline: none;
border: 1px solid rgb(226, 211, 211);
}
button {
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
outline:0 none !important;
}
}
.headerright{
float: right;
padding: 5px 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: left;
.queryField {
margin: 0 25px;
font-size: 13px;
input,
select {
font-size: 13px;
width: 320px;
height: 44px;
line-height: 34px;
border-radius: 5px;
padding-left: 5px;
outline: none;
border: 1px solid rgb(226, 211, 211);
}
} //queryBox
.ordiv{
position: relative;
.organizationbox{
button{
color: #000000;
position: relative;
bottom: 9px;
}
width:450px;
height: 200px;
background: white;
position: absolute;
top: 47px;
left: 105px;
z-index: 999;
border: 1px solid grey;
overflow-y: auto;
li{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
mat-tree-node{
cursor: pointer;
white-space:pre;
}
mat-tree-node:hover{
background: rgba(225, 225, 225, 0.8);
}
.closediv{
z-index: 100;
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
cursor: pointer;
line-height: 30px;
text-align: center;
}
.closediv:hover{
background:rgba(225, 225, 225, 0.8);
}
button {
border: none;
color: white;
padding: 8px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
outline: 0 none !important;
}
}
.headerright {
float: right;
}
}
}
.centertable{
width: 95%;
margin-right: 40px;
margin-left: 40px;
background-color: #FFFFFF;
table{
td,th{
height: 48px;
font-size: 16px;
}
td{
border-bottom: 1px solid #F2F5F6;
}
thead{
background-color:#F5FDFE;
}
.green{
color: #07CDCF;
}
.centertable {
width: 95%;
margin-right: 40px;
margin-left: 40px;
background-color: #FFFFFF;
table {
td,
th {
height: 48px;
font-size: 13px;
}
.red{
color: #FF8678;
td {
border-bottom: 1px solid #F2F5F6;
}
thead {
background-color: #F5FDFE;
}
}
.operationSpan{
margin: 0 10px;
.spanbtn {
font-weight: 550;
cursor: pointer;
.green {
color: #07CDCF;
}
.red {
color: #FF8678;
}
.green{ color: #04ced1; }
.red{ color: #FF8678 }
.gray{ color: gray; }
}
}
.operationSpan {
margin: 0 10px;
.spanbtn {
font-weight: 550;
cursor: pointer;
}
.green {
color: #04ced1;
}
.red {
color: #FF8678
}
.gray {
color: gray;
}
}

79
src/app/examiner/examiner-index/examiner-index.component.ts

@ -64,27 +64,14 @@ export class ExaminerIndexComponent implements OnInit {
allorganizations: any
allunittype: any //获取所有的单位类型
jscheck: any //辖区中队包含下级
private _transformer = (node, level: number) => { //初始化tree
return {
expandable: !!node.children && node.children.length > 0,
name: node.name,
level: level,
id: node.id,
parentId: node.parentId,
children: node.children
};
}
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
hasChild = (_: number, node: any) => node.expandable;
//获得所有组织机构
getOrganizations() {
this.http.get('/api/Organizations').subscribe(
(data: any) => {
this.allorganizations = data
console.log(this.allorganizations)
console.log('组织机构列表', this.allorganizations)
this.treedata = this.tree.toTree(data);
this.getpresentOrganization();
}
@ -92,9 +79,9 @@ export class ExaminerIndexComponent implements OnInit {
}
organizationName: any //当前单位组织机构名称
treedata: any //组织机构树型数据
newArr: any = []
newallorganizations: any //用于存储在原始数据基础上的每个机构增加children字段
newallorganizations2: any
nodes: any = []
expandedKeys: any = []//默认展开tree节点
//得到当前单位所在组织机构的tree型数据
getpresentOrganization() {
this.newallorganizations = this.allorganizations
@ -110,13 +97,13 @@ export class ExaminerIndexComponent implements OnInit {
if (this.organizationName) {
this.newallorganizations.forEach(item => {
if (item.name == this.organizationName) {
this.dataSource.data = [item]
this.newallorganizations2 = [item]
this.expandedKeys = [item.key]
this.nodes = [item]
}
});
} else {
this.newallorganizations2 = this.treedata
this.dataSource.data = this.treedata
this.expandedKeys = this.nodes[0].key
this.nodes = this.tree.toTree(this.treedata);
}
}
@ -183,7 +170,7 @@ export class ExaminerIndexComponent implements OnInit {
let paramsdata: any = {
PageNumber: this.PageNumber || '1',
PageSize: this.pageSizeOptions[0],
OrganizationId: this.jsId || '',
OrganizationId: this.js || '',
HasChildren: this.jscheck || '',
Sort: null,
SortType: null,
@ -191,7 +178,6 @@ export class ExaminerIndexComponent implements OnInit {
this.http.get("/api/Papers", { params: paramsdata }).subscribe((data: any) => {
this.tabledataSource = data.items
this.length = data.totalCount
//console.log(this.tabledataSource)
})
}
//获取消防救援对信息
@ -224,32 +210,27 @@ export class ExaminerIndexComponent implements OnInit {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
console.log(this.js)
let paramsdata: any = {
PageNumber: this.PageNumber || '1',
PageSize: this.pageSizeOptions[0],
OrganizationId: this.jsId || '',
OrganizationId: this.js || '',
HasChildren: this.jscheck || '',
Sort: null,
SortType: null,
}
if (this.jsId == undefined) {
this.snackBar.open('请输入消防救援队名称', '确定', config);
if (!this.js) {
this.snackBar.open('请选择消防救援队', '确定', config);
}
else {
this.http.get(`/api/Papers`, { params: paramsdata }).subscribe((data: any) => {
console.log(data)
})
this.PageNumber = 1
this.pageEvent.pageIndex = 0
this.getAlltabledate()
}
//console.log(this.accound)
console.log(this.jscheck, this.jsId)
this.PageNumber = 1
this.pageEvent.pageIndex = 0
this.getAlltabledate()
}
//重置按钮
Reset() {
//this.accound=undefined
this.jsId = ''
this.js = ''
this.jscheck = ''
this.getAlltabledate()
@ -280,33 +261,9 @@ export class ExaminerIndexComponent implements OnInit {
}
});
}
//辖区中队div是否显示
isorganizationbox: boolean = false
js: any //辖区中队输入框
jsId: any //辖区中队选择的id
stopclose(e) {
e.stopPropagation();
}
//点击辖区中队树,将选择的辖区中队添加到变量
add(node) {
this.isorganizationbox = false
this.js = node.name
this.jsId = node.id
}
//关闭辖区中队隐藏框
closeorganizationbox() {
this.isorganizationbox = false
}
//打开辖区中队隐藏框
openorganizationbox() {
this.isorganizationbox = true
}
js: any //辖区中队输入框
//关闭出现的组织机构div
closediv() {
this.isorganizationbox = false
}
}

26
src/app/http-interceptors/tree.service.ts

@ -2,21 +2,21 @@ import { Injectable } from '@angular/core';
@Injectable()
export class TreeService {
toTree(olddata){
toTree(olddata) {
let newdata = []
function getparentNode(parentId){
return olddata.find((item)=>{
return item.id == parentId
function getparentNode(parentId) {
return olddata.find((item) => {
return item.id == parentId
})
}
}
olddata.forEach(item => {
item.key = item.id
item.title = item.name
var parentNode = getparentNode(item.parentId);
if(parentNode){
if(!parentNode.children){
var parentNode = getparentNode(item.parentId);
if (parentNode) {
if (!parentNode.children) {
parentNode.children = []
}
@ -24,13 +24,13 @@ export class TreeService {
item.isTop = true;
} else {
item.isTop = false;
parentNode.children[parentNode.children.length -1].isBottom = false;
parentNode.children[parentNode.children.length - 1].isBottom = false;
}
item.isBottom = true;
parentNode.children.push(item)
}else{
if(!item.parentId){//如果parentId为null
} else {
if (!item.parentId) {//如果parentId为null
newdata.push(item)
}
}

Loading…
Cancel
Save