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

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

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

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss

@@ -232,7 +232,7 @@
                 span {
                     text-align: center;
                     font-size: 16px;
-                color: #2196F3;
+                    color: #2196f3;
                     height: 40px;
                     line-height: 40px;
                 }
@@ -246,14 +246,14 @@
                     margin: 10px;
                     width: 280px;
                     height: 32px;
-                    background-color: #E8E9E9;
+                    background-color: #e8e9e9;
                     border-radius: 20px;
                     display: flex;
                     .searchChoose {
                         width: 30%;
                         height: 70%;
                         margin-top: 2%;
-                        border-right: 1px solid #9EAAB4;
+                        border-right: 1px solid #9eaab4;
                         //text-align: center;
                         select {
                             background-color: transparent;
@@ -276,14 +276,13 @@
                             height: 100%;
                             border: none;
                             outline: none;
-                            background-color: #E8E9E9;
+                            background-color: #e8e9e9;
                             //line-height: 32px;
                             //border-radius: 3px;
                         }
                         .queryField {
                             height: 32px;
                             //margin: 0 10px;
-                            
                         }
                         .ordiv {
                             position: relative;
@@ -324,7 +323,6 @@
                                     background: rgba(225, 225, 225, 0.8);
                                 }
                             }
-                      
                         }
                         .zdy {
                             width: 100%;
@@ -791,18 +789,16 @@
                             width: 100%;
                             display: flex;
                             flex-direction: column;
-                            
-                            
                         }
                         .onetext {
                             height: 40px;
                             width: 100%;
-                            border-bottom: 1px solid #F2F4F5;
+                            border-bottom: 1px solid #f2f4f5;
                             span {
                                 height: 40px;
                                 width: 40%;
                                 font-size: 16px;
-                                background-color: #F2F4F5;
+                                background-color: #f2f4f5;
                             }
                             input {
                                 height: 40px;
@@ -810,7 +806,7 @@
                                 font-size: 16px;
                                 border: none;
                                 outline: none;
-                                border-bottom: 1px solid #F2F4F5;
+                                border-bottom: 1px solid #f2f4f5;
                             }
                             img {
                                 height: 20px;
@@ -849,7 +845,8 @@
                             justify-content: space-between;
                             flex-wrap: wrap;
                             //flex-direction: column;
-                            .adjtop,.adjbottom{
+                            .adjtop,
+                            .adjbottom {
                                 width: 100%;
                                 height: 50%;
                                 display: flex;
@@ -862,21 +859,19 @@
                                         font-size: 16px;
                                         border: none;
                                         outline: none;
-                                        
                                     }
                                 }
                             }
                             .fourTexttwo {
                                 height: 40px;
                                 width: 50%;
-                                border-bottom: 1px solid #F2F4F5;
+                                border-bottom: 1px solid #f2f4f5;
                                 input {
                                     height: 40px;
                                     //width: 60%;
                                     font-size: 16px;
                                     border: none;
                                     outline: none;
-                                
                                 }
                             }
                         }
@@ -916,7 +911,7 @@
                                     width: 100%;
                                     height: 40px;
                                     display: flex;
-                                    border-bottom: 1px solid #FFFFFF;
+                                    border-bottom: 1px solid #ffffff;
                                     .duohangHalf {
                                         height: 40px;
                                         width: 50%;
@@ -999,7 +994,7 @@
                 width: 100%;
                 height: 36px;
                 line-height: 36px;
-                background-color: #2196F3;
+                background-color: #2196f3;
                 text-align: center;
                 color: white;
             }
@@ -1017,7 +1012,7 @@
         .oldData {
             width: 100px;
             height: 36px;
-            background-color: #FFFFFF;
+            background-color: #ffffff;
             border-radius: 0px 60px 60px 0px;
             position: fixed;
             right: 25.3%;
@@ -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);
+}

src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

@@ -19,6 +19,7 @@ import { PageEvent } from '@angular/material/paginator';
 import { TreeService } from '../../http-interceptors/tree.service'
 import Viewer from 'viewerjs';
 import { async } from 'rxjs/internal/scheduler/async';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 declare var $: any
 @Component({
   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=[]
   buildDataName

src/app/ui/role/role.component.ts

@@ -4,7 +4,6 @@ import {FormControl} from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { CacheTokenService } from '../../http-interceptors/cache-token.service'
 import format from 'date-fns/format';
-import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
 import {FlatTreeControl} from '@angular/cdk/tree';
 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);
-  };
 }