.

Author: 黄大超

src/app/common/http-params.ts

@@ -0,0 +1,16 @@
+import { URLSearchParams } from '@angular/http';
+export class HttpParams {
+    static toUrlParams(data: any): URLSearchParams {
+        let params = new URLSearchParams();
+        for (let key in data) {
+            if (data.hasOwnProperty(key) && data[key]) {
+                params.set(key, data[key]);
+            }
+        }
+        return params;
+    }
+
+    static toFormParams(data: any) {
+
+    }
+}

src/app/common/index.ts

@@ -1 +1,2 @@
 export * from './json-page.model';
+export * from './http-params';

src/app/modules/department/department.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Http, URLSearchParams } from '@angular/http';
-import * as formUrlencoded from 'form-urlencoded';
+import { Http } from '@angular/http';
+import { HttpParams } from '../../common';
 
 import 'rxjs/add/operator/toPromise';
 import { Department } from './department.model';
@@ -15,14 +15,7 @@ export class DepartmentService {
     }
 
     getDepartments(query: any): Promise<JsonPage<Department>> {
-        let params = new URLSearchParams();
-        for (let key in query) {
-            if (query.hasOwnProperty(key)) {
-                params.set(key, query[key]);
-            }
-        }
-
-        return this.http.get(this.departmentUrl, {search: params}).toPromise()
+        return this.http.get(this.departmentUrl, {search: HttpParams.toUrlParams(query)}).toPromise()
             .then(response => {
                 let json = response.json();
                 if (!json.result) {

src/app/modules/department/edit/department-edit.component.html

@@ -1,11 +1,12 @@
-<div class="p-10 clearfix">
-    <h4 class="m-0 pull-left"><i class="fa fa-sitemap text-primary m-r-10"></i>部门管理</h4>
-    <div class="pull-right">
-        <span class="btn btn-primary"><i class="fa fa-plus"></i> 添加部门</span>
-    </div>
-</div>
 
-<div class="card card-block no-border">
+
+<div class="search-block">
+    <div class="search-header">
+        <h4 class="m-0 pull-left" style="line-height: 33px;"><i class="fa fa-sitemap text-primary m-r-10"></i>部门管理</h4>
+        <div class="pull-right">
+            <span class="btn btn-primary"><i class="fa fa-plus"></i> 添加部门</span>
+        </div>
+    </div>
     <div class="row">
         <div class="col-sm-3">
             <div class="input-group">
@@ -36,7 +37,7 @@ <h4 class="m-0 pull-left"><i class="fa fa-sitemap text-primary m-r-10"></i>部
             </div>
         </div>
     </div>
-    <div class="row m-t-10">
+    <div class="row m-t-10 m-b-10">
         <div class="col-sm-12 text-xs-right">
             <button class="btn btn-warning" (click)="resetQueryParams()">重置</button>
             <button class="btn btn-primary m-l-5" (click)="getDepartments()">查询</button>
@@ -50,6 +51,7 @@ <h4 class="m-0 pull-left"><i class="fa fa-sitemap text-primary m-r-10"></i>部
             <thead>
             <tr>
                 <th>#</th>
+                <th>操作</th>
                 <th>名称</th>
                 <th>机构码</th>
                 <th>顶级机构</th>
@@ -62,6 +64,17 @@ <h4 class="m-0 pull-left"><i class="fa fa-sitemap text-primary m-r-10"></i>部
             <tbody>
             <tr *ngFor="let department of departments; let i = index" data-id="{{department.id}}">
                 <th>{{i + 1}}</th>
+                <td>
+                    <div ngbDropdown class="d-inline-block">
+                        <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>
+                            <i class="fa fa-pencil">&nbsp;</i>
+                        </button>
+                        <div class="dropdown-menu">
+                            <button class="dropdown-item">编辑</button>
+                            <button class="dropdown-item">删除</button>
+                        </div>
+                    </div>
+                </td>
                 <td>{{department.name}}</td>
                 <td>{{department.orgCode}}</td>
                 <td>{{department.rootCode}}</td>
@@ -73,7 +86,7 @@ <h4 class="m-0 pull-left"><i class="fa fa-sitemap text-primary m-r-10"></i>部
             </tbody>
         </table>
     </div>
-    <div class="container-fluid">
+    <div class="row">
         <div class="col-sm-3">
             <div class="input-group">
                 <label class="input-group-addon">每页大小</label>

src/app/modules/department/edit/department-edit.component.ts

@@ -1,5 +1,8 @@
 // bootstrap 常量定义
 @import 'variables';
+$enable-shadows:                        true;
+$enable-gradients:                      true;
+$enable-transitions:                    true;
 $font-size-root:                        14px;
 $input-border-radius:                   0;
 $input-border-radius-lg:                0;
@@ -13,7 +16,6 @@ $custom-select-border-radius:           0;
 .dropdown.open {
   .dropdown-menu {
     margin-top: 0;
-    border-color: $color-border-light;
   }
 }
 
@@ -35,6 +37,14 @@ select {
   padding: 0.4rem;
 }
 
+.table-responsive {
+  overflow: visible;
+}
+
 .pagination {
   margin: 0;
+}
+
+.dropdown-menu {
+  border-radius: 0;
 }

src/app/modules/department/list/department-list.component.html

@@ -33,6 +33,10 @@ html, body {
   background-color: $bg-lighter;
 }
 
+.bg-white {
+  background-color: #FFF;
+}
+
 .bg-black {
   color: #7793a7;
   background-color: $bg-black;
@@ -49,12 +53,28 @@ html, body {
   padding: 3px 6px;
 }
 
+.search-block {
+  padding: 0 15px;
+  background-color: #FFF;
+  border-bottom: 1px solid $color-border-light;
+  margin: 0 0 10px 0;
+
+  .search-header {
+    height: 50px;
+    border-bottom: 1px solid $color-border-light;
+    background-color: $bg-lighter;
+    margin: 0 -15px 20px -15px;
+    padding: 10px 15px;
+    @include clearfix;
+  }
+}
+
 .app-page-title {
   border-bottom: 1px solid $color-border-light;
   padding: 15px;
   margin-bottom: 15px;
   background-color: $bg-lighter;
-  @include clearfix();
+  @include clearfix;
   .btn {
     font-size: 16px;
   }