<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>