shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]在线创建预案标题排序

tangshan
邵佳豪 4 years ago
parent
aeacfbea3d
commit
bf93b989e5
4 changed files with 125 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  2. 217
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
  3. 5
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
  4. 12
      src/app/ui/role/role.component.ts

4
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
Unescape View File

@ -1,7 +1,7 @@
<div class="bigbox"> <div class="bigbox">
<div class="titlebox" *ngIf="pattern == 'edit'"> <div class="titlebox" *ngIf="pattern == 'edit'">
<div class="titleitembox"> <div class="titleitembox" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
<div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)" <div cdkDrag class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)"
[ngClass]="{'selectedItem': selectedItem == item.groupName}" [title]="item.groupName"> [ngClass]="{'selectedItem': selectedItem == item.groupName}" [title]="item.groupName">
{{key + 1}}.{{item.groupName}} {{key + 1}}.{{item.groupName}}
</div> </div>

217
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
Unescape View File

@ -63,7 +63,7 @@
} }
} }
} }
.contentbox { .contentbox {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -214,7 +214,7 @@
} }
} }
} }
.leftnew{ .leftnew {
position: fixed; position: fixed;
width: 14%; width: 14%;
height: 90%; height: 90%;
@ -224,40 +224,40 @@
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.newHead{ .newHead {
width: 100%; width: 100%;
height: 40px; height: 40px;
text-align: center; text-align: center;
background-color: #e1f1ff; background-color: #e1f1ff;
span{ span {
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
color: #2196F3; color: #2196f3;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
} }
.newBody{ .newBody {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.search{ .search {
margin: 10px; margin: 10px;
width: 280px; width: 280px;
height: 32px; height: 32px;
background-color: #E8E9E9; background-color: #e8e9e9;
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;
.searchChoose{ .searchChoose {
width: 30%; width: 30%;
height: 70%; height: 70%;
margin-top: 2%; margin-top: 2%;
border-right: 1px solid #9EAAB4; border-right: 1px solid #9eaab4;
//text-align: center; //text-align: center;
select{ select {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
outline: none; outline: none;
margin-left: 5px; margin-left: 5px;
//height: 22px; //height: 22px;
@ -267,7 +267,7 @@
bottom: 3px; bottom: 3px;
} }
} }
.searchText{ .searchText {
width: 65%; width: 65%;
height: 100%; height: 100%;
input { input {
@ -276,19 +276,18 @@
height: 100%; height: 100%;
border: none; border: none;
outline: none; outline: none;
background-color: #E8E9E9; background-color: #e8e9e9;
//line-height: 32px; //line-height: 32px;
//border-radius: 3px; //border-radius: 3px;
} }
.queryField { .queryField {
height: 32px; height: 32px;
//margin: 0 10px; //margin: 0 10px;
}
} .ordiv {
.ordiv{
position: relative; position: relative;
.organizationbox{ .organizationbox {
width:280px; width: 280px;
height: 600px; height: 600px;
background: white; background: white;
position: absolute; position: absolute;
@ -297,19 +296,19 @@
z-index: 999; z-index: 999;
border: 1px solid grey; border: 1px solid grey;
overflow-y: auto; overflow-y: auto;
li{ li {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
mat-tree-node{ mat-tree-node {
cursor: pointer; cursor: pointer;
white-space:pre; white-space: pre;
} }
mat-tree-node:hover{ mat-tree-node:hover {
background: rgba(225, 225, 225, 0.8); background: rgba(225, 225, 225, 0.8);
} }
.closediv{ .closediv {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
right: 0; right: 0;
@ -320,29 +319,28 @@
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
} }
.closediv:hover{ .closediv:hover {
background:rgba(225, 225, 225, 0.8); background: rgba(225, 225, 225, 0.8);
} }
} }
} }
.zdy{ .zdy {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.searImg{ .searImg {
width: 15%; width: 15%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
img{ img {
position: relative; position: relative;
top: 20%; top: 20%;
left: 10%; left: 10%;
} }
} }
} }
.newBodycenter{ .newBodycenter {
height: 86%; height: 86%;
width: 100%; width: 100%;
display: flex; display: flex;
@ -350,33 +348,33 @@
align-content: flex-start; align-content: flex-start;
overflow-y: auto; overflow-y: auto;
//flex-direction: column; //flex-direction: column;
.centerfen{ .centerfen {
//width: 50%; //width: 50%;
margin: 15px 0 12px 24px; margin: 15px 0 12px 24px;
//height: 150px; //height: 150px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.tu{ .tu {
height: 100px; height: 100px;
width: 110px; width: 110px;
cursor: pointer; cursor: pointer;
img{ img {
width: 110px; width: 110px;
height: 100px; height: 100px;
} }
} }
.org{ .org {
width: 110px; width: 110px;
} }
.lry{ .lry {
width: 110px; width: 110px;
} }
span{ span {
display: inline-block; display: inline-block;
} }
} }
} }
.fenye{ .fenye {
width: 100%; width: 100%;
} }
} }
@ -398,7 +396,7 @@
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
} }
input{ input {
width: 140px; width: 140px;
} }
p { p {
@ -786,43 +784,41 @@
} }
} }
} }
.building{ .building {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.onetext{ .onetext {
height: 40px; height: 40px;
width: 100%; width: 100%;
border-bottom: 1px solid #F2F4F5; border-bottom: 1px solid #f2f4f5;
span{ span {
height: 40px; height: 40px;
width: 40%; width: 40%;
font-size: 16px; font-size: 16px;
background-color: #F2F4F5; background-color: #f2f4f5;
} }
input{ input {
height: 40px; height: 40px;
//width: 60%; //width: 60%;
font-size: 16px; font-size: 16px;
border: none; border: none;
outline: none; outline: none;
border-bottom: 1px solid #F2F4F5; border-bottom: 1px solid #f2f4f5;
} }
img{ img {
height: 20px; height: 20px;
width: 20px; width: 20px;
position: relative; position: relative;
top: 10px; top: 10px;
} }
} }
.file{ .file {
width: 100%; width: 100%;
height: 100%; height: 100%;
.fileHead{ .fileHead {
height: 40px; height: 40px;
width: 100%; width: 100%;
background-color: #ffd91d; background-color: #ffd91d;
@ -835,62 +831,61 @@
color: #b99a00; color: #b99a00;
} }
} }
.fileBody{ .fileBody {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
.fouradj{ .fouradj {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
//flex-direction: column; //flex-direction: column;
.adjtop,.adjbottom{ .adjtop,
.adjbottom {
width: 100%; width: 100%;
height: 50%; height: 50%;
display: flex; display: flex;
.adjbody{ .adjbody {
height: 100%; height: 100%;
width: 50%; width: 50%;
input{ input {
height: 40px; height: 40px;
//width: 60%; //width: 60%;
font-size: 16px; font-size: 16px;
border: none; border: none;
outline: none; outline: none;
} }
} }
} }
.fourTexttwo{ .fourTexttwo {
height: 40px; height: 40px;
width: 50%; width: 50%;
border-bottom: 1px solid #F2F4F5; border-bottom: 1px solid #f2f4f5;
input{ input {
height: 40px; height: 40px;
//width: 60%; //width: 60%;
font-size: 16px; font-size: 16px;
border: none; border: none;
outline: none; outline: none;
} }
} }
} }
.parts{ .parts {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.partsHead{ .partsHead {
width: 100%; width: 100%;
height: 40px; height: 40px;
background-color: #ffd91d; background-color: #ffd91d;
text-align: center; text-align: center;
input{ input {
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
border: none; border: none;
@ -907,21 +902,21 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.partsBody{ .partsBody {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.duohang{ .duohang {
width: 100%; width: 100%;
height: 40px; height: 40px;
display: flex; display: flex;
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #ffffff;
.duohangHalf{ .duohangHalf {
height: 40px; height: 40px;
width: 50%; width: 50%;
input{ input {
height: 40px; height: 40px;
//width: 60%; //width: 60%;
font-size: 16px; font-size: 16px;
@ -930,11 +925,11 @@
} }
} }
} }
.danhang{ .danhang {
width: 100%; width: 100%;
height: 40px; height: 40px;
//border-top: 1px solid #FFFFFF; //border-top: 1px solid #FFFFFF;
input{ input {
height: 40px; height: 40px;
//width: 60%; //width: 60%;
font-size: 16px; font-size: 16px;
@ -995,42 +990,42 @@
margin: 10px 0; margin: 10px 0;
} }
} }
.titleItem{ .titleItem {
width: 100%; width: 100%;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
background-color: #2196F3; background-color: #2196f3;
text-align: center; text-align: center;
color: white; color: white;
} }
} }
.toolDiv{ .toolDiv {
position: fixed; position: fixed;
right: 20%; right: 20%;
bottom: 20px; bottom: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
button{ button {
margin: 5px 0; margin: 5px 0;
} }
} }
.oldData{ .oldData {
width: 100px; width: 100px;
height: 36px; height: 36px;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 0px 60px 60px 0px; border-radius: 0px 60px 60px 0px;
position: fixed; position: fixed;
right: 25.3%; right: 25.3%;
top: 120px; top: 120px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
span{ span {
color: #2196f3; color: #2196f3;
font-size: 16px; font-size: 16px;
line-height: 36px; line-height: 36px;
margin-left: 5px; margin-left: 5px;
} }
img{ img {
width: 18px; width: 18px;
height: 15px; height: 15px;
position: relative; position: relative;
@ -1039,31 +1034,31 @@
} }
} }
} }
.noPadding{ .noPadding {
padding-top: 10px; padding-top: 10px;
} }
.quitPreview{ .quitPreview {
position: fixed; position: fixed;
top: 10px; top: 10px;
right: 15px; right: 15px;
} }
} }
.yinrubox{ .yinrubox {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.yinruboxHead{ .yinruboxHead {
width: 100%; width: 100%;
height:7%; height: 7%;
border-bottom:1px solid #8b8c8c; border-bottom: 1px solid #8b8c8c;
span{ span {
font-size: 18px; font-size: 18px;
color: #2196f3; color: #2196f3;
line-height: 40px; line-height: 40px;
} }
button{ button {
float: right; float: right;
} }
} }
@ -1209,3 +1204,27 @@
} }
} }
.cdk-drag-preview {
height: 36px;
line-height: 36px;
background: white;
color: #8b8c8c;
margin: 0 3px;
text-align: center;
box-sizing: border-box;
padding: 0 10px;
font-size: 14px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
box-sizing: border-box;
border-radius: 40px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

5
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
Unescape View File

@ -19,6 +19,7 @@ import { PageEvent } from '@angular/material/paginator';
import { TreeService } from '../../http-interceptors/tree.service' import { TreeService } from '../../http-interceptors/tree.service'
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import { async } from 'rxjs/internal/scheduler/async'; import { async } from 'rxjs/internal/scheduler/async';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
declare var $: any declare var $: any
@Component({ @Component({
selector: 'app-create-plan-online-five', selector: 'app-create-plan-online-five',
@ -363,6 +364,10 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
} }
} }
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.planTemplateData, event.previousIndex, event.currentIndex);
}
//获取建筑信息 //获取建筑信息
buildingsData=[] buildingsData=[]
buildDataName buildDataName

12
src/app/ui/role/role.component.ts
Unescape View File

@ -4,7 +4,6 @@ import {FormControl} from '@angular/forms';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { CacheTokenService } from '../../http-interceptors/cache-token.service' import { CacheTokenService } from '../../http-interceptors/cache-token.service'
import format from 'date-fns/format'; import format from 'date-fns/format';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree'; import {FlatTreeControl} from '@angular/cdk/tree';
import { TreeService } from '../../http-interceptors/tree.service' import { TreeService } from '../../http-interceptors/tree.service'
@ -169,17 +168,6 @@ export class RoleComponent implements OnInit {
) )
} }
drop(event: CdkDragDrop<string[]>) {//拖拽函数
moveItemInArray(this.dataSource, event.previousIndex, event.currentIndex);
this.dataSource.forEach((item, index) => {
item.order = index;
})
const a = [...this.dataSource];
this.dataSource = [];
setTimeout(() => {
this.dataSource = a;
}, 10);
};
} }

Write Preview
Loading…
Cancel
Save