Merge branch 'dev'

src/app-register.ts

@@ -101,6 +101,9 @@ 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';
+import AppAfterTime from './components/app-after-time/app-after-time.vue';
+import AppInputIp from './components/app-input-ip/app-input-ip.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -217,5 +220,8 @@ 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);
+        v.component('app-after-time', AppAfterTime);
+        v.component('app-input-ip', AppInputIp);
     },
 };
\ No newline at end of file

src/components/app-after-time/app-after-time.vue

+<template>
+    <div class="app-after-time">
+        <span v-if="diffTime =='minutes'">{{curvalue}}{{$t('components.appAfterTime.minutesAgo')}}</span>
+        <span v-if="diffTime =='hours'">{{curvalue}}{{$t('components.appAfterTime.hoursAgo')}}</span>
+        <span v-if="diffTime =='days'">{{curvalue}}{{$t('components.appAfterTime.dayAgo')}}</span>
+        <span v-if="diffTime =='mouth'">{{curvalue}}{{$t('components.appAfterTime.monthsAgo')}}</span>
+        <span v-if="diffTime =='years'">{{curvalue}}{{$t('components.appAfterTime.yearsAgo')}}</span>
+        <span v-if="!diffTime">&nbsp;</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop,  Emit, Watch, Model } from 'vue-property-decorator';
+import { Subject, Subscription } from 'rxjs';
+
+@Component({})
+export default class AppAfterTime extends Vue  {
+    /**
+     * 属性项名称
+     *
+     * @type {string}
+     * @memberof AppAfterTime
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 应用上下文
+     * 
+     * @type {any}
+     * @memberof AppAfterTime
+     */
+    @Prop() context: any;
+
+    /**
+     * 视图参数
+     * 
+     * @type {any}
+     * @memberof AppAfterTime
+     */
+    @Prop() viewparam: any;
+
+    /**
+     * 表单状态对象
+     *
+     * @type {Subject<any>}
+     * @memberof AppAfterTime
+     */
+    @Prop() public formState?:Subject<any>;
+
+    /**
+     * 表单绑定数据
+     * 
+     * @type {any}
+     * @memberof AppAfterTime
+     */
+    @Model('change') public value:any;
+
+    /**
+     * 当前值
+     * 
+     * @type {any}
+     * @memberof AppAfterTime
+     */
+    public curvalue: string = '';
+
+    /**
+     * 毫秒差
+     * 
+     * @type {any}
+     * @memberof AppAfterTime
+     */
+    public diffTime:any='';
+
+    /**
+     * 值变化
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof AppAfterTime
+     */
+    @Watch('value')
+    public onValueChange(newVal: any, oldVal: any) {
+        this.transTime();
+    }
+
+    /**
+     * Vue声明周期(处理组件的输入属性)
+     *
+     * @memberof AppAfterTime
+     */
+    public created(){
+        if(this.formState){
+             this.formState.subscribe(({type,data})=>{ 
+                if(Object.is('load',type)){
+                    this.transTime();
+                }
+            })
+        }
+        this.transTime();
+    }
+    /**
+     * 处理时间
+     * 
+     * @memberof AppAfterTime
+     */
+    public transTime(){
+        if(this.value){
+            let oldTime = new Date(this.value).getTime();
+            let nowTime = new Date().getTime();
+            let diffTime = nowTime - oldTime;
+            if(diffTime < 3600000){
+                this.curvalue = Math.ceil(diffTime/60000)+'';
+                this.diffTime = 'minutes';
+            }else if(diffTime < 86400000){
+                this.curvalue = Math.ceil(diffTime/3600000)+'';
+                this.diffTime = 'hours';
+            }else if(diffTime < 2592000000){
+                this.curvalue = Math.floor(diffTime/86400000)+'';
+                this.diffTime = 'days';
+            }else if(diffTime < 31104000000){
+                this.curvalue = Math.floor(diffTime/2592000000)+'';
+                this.diffTime = 'mounth';
+            }else{
+                this.curvalue = Math.floor(diffTime/31104000000)+'';
+                this.diffTime = 'years';
+            }
+        }
+    }
+}
+</script>
+
+<style>
+    .app-after-time{
+        margin-left: 6px;
+    }
+</style>
\ No newline at end of file

src/components/app-input-ip/app-input-ip.less

+input{
+    border-radius: 4px;
+    border:1px solid #888;
+    padding: 2px 10px;
+    width: 20%;
+}

src/components/app-input-ip/app-input-ip.vue

+<template>
+    <div class="app-inpu-ip">
+        <input  
+            type="text" 
+            v-model="firstIp"
+            maxlength="3" />.
+        <input          
+            type="text" 
+            v-model="secIp"
+            maxlength="3" />.
+        <input 
+            type="text"
+            maxlength="3" 
+            v-model="thirdIp" />.
+        <input 
+            type="text" 
+            maxlength="3"
+            v-model="forIp" />
+    </div>     
+</template>
+
+<script lang='ts'>
+import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
+import { Subject,Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+})
+export default class AppInputIp extends Vue {  
+
+    /**
+     * 应用上下文
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    @Prop() context: any;
+
+    /**
+     * 视图参数
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    @Prop() viewparam: any;
+
+    /**
+     * 表单状态对象
+     *
+     * @type {Subject<any>}
+     * @memberof AppInputIp
+     */
+    @Prop() public formState!: Subject<any>;
+
+    /**表单数据绑定
+     * 
+     * @type {string}
+     * @memberof AppInputIp
+     */
+    @Model('change') public ipdata!: string;
+
+    /**
+     * 获取当前值
+     *
+     * @type {string}
+     * @memberof AppInputIp
+     */
+    public CurValue: any[] = [];
+
+    /**
+     * 第一段ip
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    public firstIp: any = '';
+
+    /**
+     * 第二段ip
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    public secIp: any = '';
+
+    /**
+     * 第三段ip
+     * 
+     * @type {any}
+     */
+    public thirdIp: any = '';
+
+    /**
+     * 第四段ip
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    public forIp: any = '';
+   
+    /**
+     * Vue声明周期(处理组件的输入属性)
+     *
+     * @memberof AppInputIp
+     */
+    public created(){
+        if(this.formState){
+             this.formState.subscribe(({type,data})=>{  
+                if(Object.is('load',type)){
+                    this.loadData();
+                }
+            })
+        }
+        this.loadData();
+    } 
+
+    /**
+     * 加载数据
+     *
+     * @memberof AppInputIp
+     */
+    public loadData(){
+        if(this.ipdata){
+            let iparr:Array<any> = this.ipdata.split('.');
+            this.CurValue = iparr;
+            this.firstIp = this.CurValue[0];
+            this.secIp = this.CurValue[1];
+            this.thirdIp = this.CurValue[2];
+            this.forIp = this.CurValue[3];
+        }
+    }
+
+    /**
+     * 监听每段ip变化
+     * 
+     * @memberof AppInputIp
+     */
+    @Watch('firstIp')
+    public FirstIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'firstIp',0);
+    }
+
+    @Watch('secIp')
+    public SecIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'secIp',1);
+    }
+
+    @Watch('thirdIp')
+    public ThirdIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'thirdIp',2);
+    }
+
+    @Watch('forIp')
+    public ForIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'forIp',3);
+    }
+
+    /**
+     * 验证格式
+     * 
+     * @memberof AppInputIp
+     */
+    public checkIpVal(newVal:any,oldVal:any,flag:any,index:number){
+        if(newVal === '') return
+        let val = newVal;
+        let reg = /^(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))))$/g;
+        if(reg.test(val)){
+            this.CurValue[index] = val; 
+        }else{
+            if(flag){
+                let that:any = this;
+                that[flag] = oldVal;
+                this.CurValue[index] = oldVal;
+            }
+        }
+        if(this.firstIp && this.secIp && this.thirdIp && this.forIp){
+            this.$emit('change',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp);
+        }
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-input-ip.less';
+</style>

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('components.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/components/codelist/codelist.vue

@@ -4,12 +4,12 @@
         <template v-if="!ifEmpty">
           <template v-for="(item, index) in items">
               <div class="codelist-item" :key="index">
-                    <span v-if="index != 0">{{ textSeparator }}</span>
                     <i v-if="item.iconcls" :class="item.iconcls"></i>
                     <img v-if="item.icon" :src="getIcon(item.icon)" />
                     <span :class="item.class" :style="{ color: item.color }">
                         {{ isUseLangres ? $t(item.text) : item.text }}
                     </span>
+                    <span v-if="index != items.length-1">{{ textSeparator }}</span>
                </div>
           </template>
         </template>
@@ -338,6 +338,7 @@ export default class CodeList extends Vue {
 
 <style lang='less'>
   .codelist {
+    display: flex;
     white-space: nowrap;
     text-overflow: ellipsis;
     word-break: break-all;
@@ -346,6 +347,7 @@ export default class CodeList extends Vue {
         display: flex;
         align-items: center;
         max-height: 32px;
+        padding: 0px 3px;
         > img{
             max-height: 32px;
             width: auto;

src/components/menu-icon/menu-icon.less

+.menu-icon {
+    padding-right: 6px;
+}
\ No newline at end of file

src/components/menu-icon/menu-icon.tsx

@@ -29,10 +29,10 @@ export class MenuIcon extends Vue {
     public render(): any {
         if (this.item) {
             if (this.item.iconcls) {
-                return <i class={this.item.iconcls} />
+                return <i class={[this.item.iconcls, 'menu-icon']} />
             }
             if (this.item.icon) {
-                return <img src={this.item.icon} />
+                return <img class="menu-icon" src={this.item.icon} />
             }
         }
         return <span />

src/locale/lanres/components/components_en_US.ts

@@ -379,5 +379,15 @@ export default {
     appMapPosition: {
       submit: 'Submit',
       title: 'Please select address'
-    }
+    },
+    appSortBar: {
+      title: 'Sort'
+    },
+    appAfterTime:{
+      minutesAgo: 'minutes ago',
+      hoursAgo: 'hours ago',
+      dayAgo: 'days ago',
+      monthsAgo: 'months ago',
+      yearsAgo: 'years ago'
+  }
 };
\ No newline at end of file

src/locale/lanres/components/components_zh_CN.ts

@@ -380,5 +380,15 @@ export default {
     appMapPosition: {
       submit: '确认',
       title: '请选择地址'
-    }
+    },
+    appSortBar: {
+      title: '排序'
+    },
+    appAfterTime:{
+      minutesAgo: '分钟前',
+      hoursAgo: '小时前',
+      dayAgo: '天前',
+      monthsAgo: '月前',
+      yearsAgo: '年前'
+  }
 };
\ No newline at end of file