增加排序工具栏组件及其国际化内容

src/app-register.ts

@@ -101,6 +101,7 @@ import AppImageRomate from './components/app-image-romate/app-image-romate.vue'
 import { MenuIcon } from './components/menu-icon/menu-icon'
 import AppVuePivottable from './components/app-vue-pivottable/app-vue-pivottable.vue';
 import AppMapPosition from './components/app-map-position/app-map-position.vue';
+import AppSortBar from './components/app-sort-bar/app-sort-bar.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -217,5 +218,6 @@ export const AppComponents = {
         v.component('menu-icon', MenuIcon);
         v.component('app-vue-pivottable', AppVuePivottable);
         v.component('app-map-position', AppMapPosition);
+        v.component('app-sort-bar', AppSortBar);
     },
 };
\ No newline at end of file

src/components/app-sort-bar/app-sort-bar.less

+.app-sort-bar{
+    padding: 6px 8px;
+    .ivu-row-flex.page-sort-bar{
+      width: 100%;
+      height: 30px;
+      position: relative;
+      .ivu-col{
+          border-radius: 2px;
+        user-select: none;
+        text-align: center;
+        margin: 0px 16px;
+        display: flex;
+        align-items: flex-end;
+        padding-bottom: 4px;
+        background-color: #FFF;
+        border: 1px solid #CCC;
+        margin-left: -1px;
+        .sort-field-text{
+          margin-left: 7px;
+        }
+        .caret-wrapper{
+          width: 15px;
+          display: inline-block;
+          position: relative;
+          top: 4px;
+          padding-bottom: 2px;
+          .ivu-icon{
+            display: block;
+            line-height: 0.5;
+            color: #c5c8ce;
+          }
+        }
+      }
+      // 悬浮样式
+      .ivu-col:hover{
+          border:1px solid #82bff7;
+          position:relative;
+          z-index:2;
+          .sort-field-text{
+            color: #82bff7;
+          }
+      }
+      // 选中样式
+      .sort-ascending, .sort-descending{
+          border:1px solid #82bff7;
+          position:relative;
+          z-index:2;
+        .sort-field-text{
+            color:#82bff7;
+            font-weight: 800;
+        }
+      }
+      .sort-ascending .caret-wrapper .ivu-icon.ivu-icon-md-arrow-dropup,
+      .sort-descending .caret-wrapper .ivu-icon.ivu-icon-md-arrow-dropdown{
+          color: #82bff7;
+      }
+        
+      .issort {
+        position: absolute;
+        cursor: pointer;
+        top: 4px;
+        right: 10px;
+      }
+    }
+  }
+  .open-bar {
+    background-color: #EEF2F5;
+  }
\ No newline at end of file

src/components/app-sort-bar/app-sort-bar.vue

+<template>
+<div :class="['app-sort-bar', isSort ? 'open-bar' : '']">
+    <row v-if="sortModel && sortModel.length>0" class="page-sort-bar" :gutter="10" type="flex" justify="start" style="margin:0px;">
+            <template v-for="(item, index) in sortModel">
+            <i-col v-show="isSort" :key="index" :class="getSortClass(item)">
+                <div @click="sortItemClick(item)">
+                <span class="sort-field-text"  >{{$t('entities.'+ entityName +'.fields.' + item)}}</span>
+                <span class="caret-wrapper">
+                    <Icon type="md-arrow-dropup" />
+                    <Icon type="md-arrow-dropdown" />
+                </span>
+                </div>
+            </i-col>
+            </template>
+        <div class="issort" @click="handleSort">
+            <Icon v-if="isSort" type="ios-funnel-outline" />
+            <Icon v-else type="ios-funnel" />
+            {{ $t('component.appSortBar.title') }}
+        </div>
+    </row>
+</div>
+</template>
+
+<script lang='ts'>
+import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
+
+@Component({})
+export default class AppSortBar extends Vue {
+    
+    @Prop() public sortModel!: any[];
+
+    @Prop() public sortField!: any;
+
+    @Prop() public sortDir!: any;
+
+    @Prop() public entityName!: string;
+
+    public isSort: boolean = false;
+
+    public getSortClass(name: any) {
+        if(this.sortField !== name || this.sortDir === ''){
+            return '';
+        }else if(this.sortDir === 'asc'){
+            return 'sort-ascending'
+        }else if(this.sortDir === 'desc'){
+            return 'sort-descending'
+        }
+    }
+
+    public sortItemClick(name: string) {
+        console.log(name);
+        this.$emit('clickSort', name);
+    }
+
+    public handleSort() {
+        this.isSort = !this.isSort;
+    }
+}
+</script>
+
+<style lang="less">
+@import './app-sort-bar.less';
+</style>
\ No newline at end of file

src/locale/lanres/components/components_en_US.ts

@@ -379,5 +379,8 @@ export default {
     appMapPosition: {
       submit: 'Submit',
       title: 'Please select address'
+    },
+    appSortBar: {
+      title: 'Sort'
     }
 };
\ No newline at end of file

src/locale/lanres/components/components_zh_CN.ts

@@ -380,5 +380,8 @@ export default {
     appMapPosition: {
       submit: '确认',
       title: '请选择地址'
+    },
+    appSortBar: {
+      title: '排序'
     }
 };
\ No newline at end of file