chenjingyu
4 years ago
13 changed files with 1145 additions and 72 deletions
@ -0,0 +1,11 @@
|
||||
<div class="box"> |
||||
<div style="font-size: 18px;"> |
||||
请选择预案 |
||||
</div> |
||||
<div class="btnbox"> |
||||
<div (click)="selectType(1)">已存在的预案</div> |
||||
<div (click)="selectType(2)">自定义预案</div> |
||||
</div> |
||||
<span style="position: absolute; |
||||
right: 0;top: 0;cursor: pointer;" (click)="close()"><mat-icon>clear</mat-icon></span> |
||||
</div> |
||||
@ -0,0 +1,29 @@
|
||||
.box{ |
||||
position: relative; |
||||
div{ |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
} |
||||
.btnbox{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 22px; |
||||
div{ |
||||
margin: 0 10px; |
||||
width: 120px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
cursor: pointer; |
||||
opacity: 1; |
||||
border-radius: 8px; |
||||
color: #fff; |
||||
} |
||||
div:nth-child(1){ |
||||
background: #07CDCF; |
||||
} |
||||
div:nth-child(2){ |
||||
background: #FF8678; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,77 @@
|
||||
<div class="box"> |
||||
<div *ngIf="planType"> |
||||
<div class="title"> |
||||
添加预案 |
||||
</div> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
<!-- Checkbox Column --> |
||||
<ng-container matColumnDef="select"> |
||||
<th mat-header-cell *matHeaderCellDef> |
||||
<!-- <mat-checkbox (change)="$event ? masterToggle() : null" |
||||
[checked]="selection.hasValue() && isAllSelected()" |
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"> |
||||
</mat-checkbox> --> |
||||
选择 |
||||
</th> |
||||
<td mat-cell *matCellDef="let row"> |
||||
<mat-checkbox color="primary" (click)="$event.stopPropagation()" |
||||
(change)="$event ? selection.toggle(row) : null" |
||||
[checked]="selection.isSelected(row)"> |
||||
</mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<!-- name Column --> |
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef> 预案名称 </th> |
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td> |
||||
</ng-container> |
||||
|
||||
<!-- people Column --> |
||||
<ng-container matColumnDef="people"> |
||||
<th mat-header-cell *matHeaderCellDef> 添加人 </th> |
||||
<td mat-cell *matCellDef="let element"> {{element.people}} </td> |
||||
</ng-container> |
||||
|
||||
<!-- time Column --> |
||||
<ng-container matColumnDef="time"> |
||||
<th mat-header-cell *matHeaderCellDef> 添加时间 </th> |
||||
<td mat-cell *matCellDef="let element"> {{element.time}} </td> |
||||
</ng-container> |
||||
|
||||
<!-- level Column --> |
||||
<ng-container matColumnDef="level"> |
||||
<th mat-header-cell *matHeaderCellDef> 编制级别 </th> |
||||
<td mat-cell *matCellDef="let element"> {{element.level}} </td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" |
||||
(click)="selection.toggle(row)"> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<div *ngIf="!planType"> |
||||
<div class="title"> |
||||
创建自定义预案 |
||||
</div> |
||||
<div class="customPlanName"> |
||||
<p style="font-size: 14px;margin: 5px 0;"> |
||||
预案名称 |
||||
</p> |
||||
<div class="input"> |
||||
<input type="text" placeholder="请输入自定义名称"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="btnbox"> |
||||
<div class="btn"> |
||||
确定 |
||||
</div> |
||||
<div class="btn" (click)="close()"> |
||||
取消 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,49 @@
|
||||
.box{ |
||||
|
||||
box-sizing: border-box; |
||||
padding: 15px; |
||||
.title{ |
||||
width: 100%; |
||||
text-align: center; |
||||
height: 43px; |
||||
line-height: 43px; |
||||
font-size: 16px; |
||||
} |
||||
.tablebox{ |
||||
width: 600px; |
||||
table{ |
||||
width: 100%; |
||||
} |
||||
} |
||||
.customPlanName{ |
||||
input{ |
||||
width: 260px; |
||||
border: 0; |
||||
background-color: #F2F5F6; |
||||
box-sizing: border-box; |
||||
padding: 4px; |
||||
} |
||||
} |
||||
.btnbox{ |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 15px; |
||||
.btn{ |
||||
width: 100px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
text-align: center; |
||||
opacity: 1; |
||||
border-radius: 8px; |
||||
margin: 0 10px; |
||||
cursor: pointer; |
||||
} |
||||
.btn:nth-child(1){ |
||||
background: #07CDCF; |
||||
color: #fff; |
||||
} |
||||
.btn:nth-child(2){ |
||||
background:#F2F5F6; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,477 @@
|
||||
.ant-tree-checkbox, |
||||
.ant-tree-checkbox-wrapper { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
font-feature-settings: 'tnum'; |
||||
font-size: 14px |
||||
} |
||||
|
||||
@keyframes antCheckboxEffect { |
||||
0% { |
||||
transform: scale(1); |
||||
opacity: .5 |
||||
} |
||||
|
||||
100% { |
||||
transform: scale(1.6); |
||||
opacity: 0 |
||||
} |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode { |
||||
position: relative |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode::before { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 4px; |
||||
left: 0; |
||||
transition: background-color .3s; |
||||
content: ''; |
||||
pointer-events: none |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode:hover::before { |
||||
background: #f5f5f5 |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode>* { |
||||
z-index: 1 |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-switcher { |
||||
transition: color .3s |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper { |
||||
border-radius: 0; |
||||
user-select: none |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper:hover { |
||||
background: 0 0 |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode .ant-tree-node-content-wrapper.ant-tree-node-selected { |
||||
color: #fff; |
||||
background: 0 0 |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode-selected::before, |
||||
.ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before { |
||||
background: #07CDCF |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher { |
||||
color: #fff |
||||
} |
||||
|
||||
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-node-content-wrapper { |
||||
color: #fff; |
||||
background: 0 0 |
||||
} |
||||
|
||||
.ant-tree-checkbox { |
||||
box-sizing: border-box; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-variant: tabular-nums; |
||||
position: relative; |
||||
top: -.09em; |
||||
display: inline-block; |
||||
line-height: 1; |
||||
white-space: nowrap; |
||||
vertical-align: middle; |
||||
outline: 0; |
||||
cursor: pointer |
||||
} |
||||
|
||||
.ant-tree-checkbox-input:focus+.ant-tree-checkbox-inner, |
||||
.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner, |
||||
.ant-tree-checkbox:hover .ant-tree-checkbox-inner { |
||||
border-color: #07CDCF |
||||
} |
||||
|
||||
.ant-tree-checkbox-checked::after { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
border: 1px solid #07CDCF; |
||||
border-radius: 2px; |
||||
visibility: hidden; |
||||
animation: antCheckboxEffect .36s ease-in-out; |
||||
animation-fill-mode: backwards; |
||||
content: '' |
||||
} |
||||
|
||||
.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox::after, |
||||
.ant-tree-checkbox:hover::after { |
||||
visibility: visible |
||||
} |
||||
|
||||
.ant-tree-checkbox-inner { |
||||
position: relative; |
||||
top: 0; |
||||
left: 0; |
||||
display: block; |
||||
width: 16px; |
||||
height: 16px; |
||||
direction: ltr; |
||||
background-color: #fff; |
||||
border: 1px solid #d9d9d9; |
||||
border-radius: 2px; |
||||
border-collapse: separate; |
||||
transition: all .3s |
||||
} |
||||
|
||||
.ant-tree-checkbox-inner::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 20%; |
||||
display: table; |
||||
width: 5.71px; |
||||
height: 9.14px; |
||||
border: 2px solid #fff; |
||||
border-top: 0; |
||||
border-left: 0; |
||||
transform: rotate(45deg) scale(0) translate(-50%, -50%); |
||||
opacity: 0; |
||||
transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s; |
||||
content: ' ' |
||||
} |
||||
|
||||
.ant-tree-checkbox-input { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
z-index: 1; |
||||
width: 100%; |
||||
height: 100%; |
||||
cursor: pointer; |
||||
opacity: 0 |
||||
} |
||||
|
||||
.ant-tree-checkbox-disabled, |
||||
.ant-tree-checkbox-disabled .ant-tree-checkbox-input, |
||||
.ant-tree-checkbox-disabled+span { |
||||
cursor: not-allowed |
||||
} |
||||
|
||||
.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after { |
||||
position: absolute; |
||||
display: table; |
||||
border: 2px solid #fff; |
||||
border-top: 0; |
||||
border-left: 0; |
||||
transform: rotate(45deg) scale(1) translate(-50%, -50%); |
||||
opacity: 1; |
||||
transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s; |
||||
content: ' ' |
||||
} |
||||
|
||||
.ant-tree-checkbox-checked .ant-tree-checkbox-inner { |
||||
background-color: #07CDCF; |
||||
border-color: #07CDCF |
||||
} |
||||
|
||||
.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after { |
||||
border-color: rgba(0, 0, 0, .25); |
||||
animation-name: none |
||||
} |
||||
|
||||
/* .ant-tree-checkbox-disabled .ant-tree-checkbox-inner { |
||||
background-color: #f5f5f5; |
||||
border-color: #d9d9d9 !important |
||||
} */ |
||||
|
||||
.ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after { |
||||
border-color: #f5f5f5; |
||||
border-collapse: separate; |
||||
animation-name: none |
||||
} |
||||
|
||||
.ant-tree-checkbox-disabled+span { |
||||
color: rgba(0, 0, 0, .25) |
||||
} |
||||
|
||||
.ant-tree-checkbox-disabled:hover::after, |
||||
.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-disabled::after { |
||||
visibility: hidden |
||||
} |
||||
|
||||
.ant-tree-checkbox-wrapper { |
||||
box-sizing: border-box; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-variant: tabular-nums; |
||||
display: inline-block; |
||||
line-height: unset; |
||||
cursor: pointer |
||||
} |
||||
|
||||
.ant-tree-checkbox-wrapper.ant-tree-checkbox-wrapper-disabled { |
||||
cursor: not-allowed |
||||
} |
||||
|
||||
.ant-tree-checkbox-wrapper+.ant-tree-checkbox-wrapper { |
||||
margin-left: 8px |
||||
} |
||||
|
||||
.ant-tree-checkbox+span { |
||||
padding-right: 8px; |
||||
padding-left: 8px |
||||
} |
||||
|
||||
.ant-tree, |
||||
.ant-tree-checkbox-group { |
||||
box-sizing: border-box; |
||||
padding: 0; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-variant: tabular-nums; |
||||
line-height: 1.5715; |
||||
list-style: none; |
||||
font-feature-settings: 'tnum' |
||||
} |
||||
|
||||
.ant-tree-checkbox-group { |
||||
margin: 0; |
||||
font-size: 14px; |
||||
display: inline-block |
||||
} |
||||
|
||||
.ant-tree-checkbox-group-item { |
||||
display: inline-block; |
||||
margin-right: 8px |
||||
} |
||||
|
||||
.ant-tree-checkbox-group-item:last-child { |
||||
margin-right: 0 |
||||
} |
||||
|
||||
.ant-tree-checkbox-group-item+.ant-tree-checkbox-group-item { |
||||
margin-left: 0 |
||||
} |
||||
|
||||
.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner { |
||||
background-color: #fff; |
||||
border-color: #d9d9d9 |
||||
} |
||||
|
||||
.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after { |
||||
top: 50%; |
||||
left: 50%; |
||||
width: 8px; |
||||
height: 8px; |
||||
background-color: #07CDCF; |
||||
border: 0; |
||||
transform: translate(-50%, -50%) scale(1); |
||||
opacity: 1; |
||||
content: ' ' |
||||
} |
||||
|
||||
.ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after { |
||||
background-color: rgba(0, 0, 0, .25); |
||||
border-color: rgba(0, 0, 0, .25) |
||||
} |
||||
|
||||
.ant-tree { |
||||
margin: 0; |
||||
font-size: 14px; |
||||
background: #fff; |
||||
border-radius: 2px; |
||||
transition: background-color .3s |
||||
} |
||||
|
||||
.ant-tree-focused:not(:hover):not(.ant-tree-active-focused) { |
||||
background: #e6f7ff |
||||
} |
||||
|
||||
.ant-tree-list-holder-inner { |
||||
align-items: flex-start |
||||
} |
||||
|
||||
.ant-tree.ant-tree-block-node .ant-tree-list-holder-inner { |
||||
align-items: stretch |
||||
} |
||||
|
||||
.ant-tree.ant-tree-block-node .ant-tree-list-holder-inner .ant-tree-node-content-wrapper { |
||||
flex: auto |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
padding: 0; |
||||
outline: 0 |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper { |
||||
color: rgba(0, 0, 0, .25); |
||||
cursor: not-allowed |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper:hover { |
||||
background: 0 0 |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode-active .ant-tree-node-content-wrapper { |
||||
background: #f5f5f5 |
||||
} |
||||
|
||||
.ant-tree-indent { |
||||
align-self: stretch; |
||||
white-space: nowrap; |
||||
user-select: none |
||||
} |
||||
|
||||
.ant-tree-indent-unit { |
||||
display: inline-block; |
||||
width: 24px |
||||
} |
||||
|
||||
.ant-tree .ant-tree-switcher { |
||||
flex: none; |
||||
width: 24px; |
||||
height: 35px; |
||||
margin: 0; |
||||
line-height: 22px; |
||||
font-size: 18px; |
||||
text-align: center; |
||||
cursor: pointer |
||||
} |
||||
|
||||
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon, |
||||
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon { |
||||
font-size: 10px; |
||||
display: inline-block; |
||||
font-weight: 700 |
||||
} |
||||
|
||||
.ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon svg, |
||||
.ant-tree .ant-tree-switcher .ant-tree-switcher-icon svg { |
||||
transition: transform .3s |
||||
} |
||||
|
||||
.ant-tree .ant-tree-switcher-noop { |
||||
cursor: default |
||||
} |
||||
|
||||
.ant-tree .ant-tree-switcher_close .ant-tree-switcher-icon svg { |
||||
transform: rotate(-90deg) |
||||
} |
||||
|
||||
.ant-tree .ant-tree-checkbox { |
||||
top: initial; |
||||
margin: 4px 8px 0 0 |
||||
} |
||||
|
||||
.ant-tree .ant-tree-node-content-wrapper { |
||||
min-height: 24px; |
||||
margin: 0; |
||||
padding: 0; |
||||
color: inherit; |
||||
line-height: 24px; |
||||
background: 0 0; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
transition: all .3s |
||||
} |
||||
|
||||
.ant-tree .ant-tree-node-content-wrapper:hover { |
||||
background-color: #f5f5f5 |
||||
} |
||||
|
||||
/* .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected { |
||||
background-color: #bae7ff |
||||
} */ |
||||
|
||||
.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle { |
||||
display: inline-block; |
||||
width: 24px; |
||||
height: 24px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
vertical-align: top |
||||
} |
||||
|
||||
.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle:empty, |
||||
.ant-tree .ant-tree-treenode-loading .ant-tree-iconEle, |
||||
.ant-tree-show-line .ant-tree-indent-unit-end::before, |
||||
.ant-tree-show-line .ant-tree-treenode-motion:not(.ant-motion-collapse-leave):not(.ant-motion-collapse-appear-active) .ant-tree-indent-unit::before { |
||||
display: none |
||||
} |
||||
|
||||
.ant-tree-node-content-wrapper[draggable=true] { |
||||
overflow: hidden; |
||||
width: 100%; |
||||
line-height: 35px; |
||||
/* border-top: 2px transparent solid; |
||||
border-bottom: 2px transparent solid; */ |
||||
user-select: none |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode.drag-over>[draggable] { |
||||
color: #fff; |
||||
background-color: #07CDCF; |
||||
opacity: .8 |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode.drag-over-gap-top>[draggable] { |
||||
border-top-color: #07CDCF |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode.drag-over-gap-bottom>[draggable] { |
||||
border-bottom-color: #07CDCF |
||||
} |
||||
|
||||
.ant-tree-show-line .ant-tree-indent-unit { |
||||
position: relative; |
||||
height: 100% |
||||
} |
||||
|
||||
.ant-tree-show-line .ant-tree-indent-unit::before { |
||||
position: absolute; |
||||
top: calc(100% - 4px); |
||||
right: -12px; |
||||
bottom: -28px; |
||||
border-right: 1px solid #d9d9d9; |
||||
content: '' |
||||
} |
||||
|
||||
.ant-tree-show-line .ant-tree-switcher { |
||||
z-index: 1; |
||||
background: #fff |
||||
} |
||||
|
||||
.ant-tree .ant-tree-treenode-rtl, |
||||
.ant-tree-rtl { |
||||
direction: rtl |
||||
} |
||||
|
||||
.ant-tree-rtl.ant-tree .ant-tree-switcher_close .ant-tree-switcher-icon svg { |
||||
transform: rotate(90deg) |
||||
} |
||||
|
||||
.ant-tree-rtl.ant-tree-show-line .ant-tree-indent-unit::before { |
||||
right: auto; |
||||
left: -12px; |
||||
border-right: none; |
||||
border-left: 1px solid #d9d9d9 |
||||
} |
||||
|
||||
.font-highlight { |
||||
color: #ff4d4f |
||||
} |
||||
|
||||
.ant-tree-child-tree { |
||||
overflow: hidden |
||||
} |
||||
|
||||
nz-tree { |
||||
display: block |
||||
} |
||||
Loading…
Reference in new issue