app-range-editor.vue

<template>
    <div class="app-range-editor">
        <template v-for="(item, index) in refFormItem">
            <span v-if="index > 0" class="editor-space"  :key="index">~</span>
            <date-picker 
             :key="index"
              v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_NOTIME')" 
              type="date" 
              :transfer="true"
              :format="valFormat"
              placeholder="请选择时间..." 
              :value="activeData[item]"
              :disabled="disabled" 
              @on-change="onValueChange">
            </date-picker>
            <time-picker
              :key="index"
              v-else-if="editorType.startsWith('DATEPICKEREX')"
              :transfer="true"
              :format="valFormat"
              placeholder="请选择时间..." 
              :value="activeData[item]"
              :disabled="disabled"
              @on-change="onValueChange">
            </time-picker>
            <i-input
              :key="index"
              v-else
              type="number" 
              :value="getValue(item)" 
              :disabled="disabled"
              placeholder="请输入" 
              @on-change="setValue">
            </i-input>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({})
export default class AppPicker extends Vue {

    /**
     * 编辑项名称
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public name!: string;

    /**
     * 是否禁用
     *
     * @type {boolean}
     * @memberof AppPicker
     */
    @Prop() public disabled!: boolean;

    /**
     * 表单数据对象
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Prop() public activeData: any;

    /**
     * 值格式
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public format!: string;

    /**
     * 编辑器类型
     *
     * @type {string}
     * @memberof AppPicker
     */
    @Prop() public editorType!: string;

    /**
     * 关系表单项集合
     *
     * @type {string[]}
     * @memberof AppPicker
     */
    @Prop() public refFormItem!: string[];

    /**
     * 值变化时间
     *
     * @private
     * @type {Subject<any>}
     * @memberof InputBox
     */
    private inputDataChang: Subject<any> = new Subject()

    /**
     * 处理值格式
     *
     * @readonly
     * @memberof AppPicker
     */
    get valFormat() {
        return this.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
    }

    /**
     * 获取值
     *
     * @param {string} name
     * @returns
     * @memberof AppPicker
     */
    public getValue(name: string) {
        return this.activeData[name];
    }

    /**
     * 设置值
     *
     * @param {string} name
     * @param {*} val
     * @memberof AppPicker
     */
    public setValue(name: string, val: any) {
        this.inputDataChang.next({ name: name, value: val });
    }

    /**
     * vue  声明周期 debounceTime
     *
     * @memberof InputBox
     */
    public created() {
        this.inputDataChang
            .pipe(
                debounceTime(500),
                distinctUntilChanged()
            ).subscribe((data: any) => {
                this.$emit('formitemvaluechange', { name: data.name, value: data.value });
            });
    }

    /**
     * 值改变
     *
     * @param {string} name
     * @param {*} value
     * @memberof AppPicker
     */
    public onValueChange(name: string, value: any) {
        this.$emit('formitemvaluechange', { name: name, value: value });
    }

}
</script>

<style lang='less'>
@import './app-range-editor.less';
</style>