app-after-time.vue 3.6 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<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';
15
import  moment  from 'moment';
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108

@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){
109 110 111
            let dateString:any = 'YYYY年MM月DD日' || 'YYYY年MM月DD日 HH时mm分ss秒' || 'YYYY-MM-DD HH:mm:ss' || 'YYYY-MM-DD' || 'YYYY/MM/DD HH:mm:ss' || 'YYYY/MM/DD';
            let oldTime = moment(this.value,dateString).valueOf();
            let nowTime = moment().valueOf();
112 113 114 115 116 117 118 119 120 121 122 123
            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)+'';
124
                this.diffTime = 'mouth';
125 126 127 128 129 130 131 132 133 134 135 136 137 138
            }else{
                this.curvalue = Math.floor(diffTime/31104000000)+'';
                this.diffTime = 'years';
            }
        }
    }
}
</script>

<style>
    .app-after-time{
        margin-left: 6px;
    }
</style>