<template> <div class="app-range-date"> <span class="editor-span">{{$t('components.appRangDate.from')}}</span> <template v-for="(item, index) in refFormItem"> <span v-if="index > 0" class="editor-space" :key="index">{{$t('components.appRangDate.daystart')}}</span> <date-picker :key="index + '-onlydate'" v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_NOTIME') && index == 0" type="date" :transfer="true" :format="valFormat" :placeholder="$t('components.appRangDate.placeholder')" :value="activeData[item]" :disabled="disabled" @on-change="startOnValueChange" ></date-picker> <date-picker :key="index + '-onlydate'" v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_MINUTE') && index == 0" type="datetime" :transfer="true" :format="valFormat" :placeholder="$t('components.appRangDate.placeholder')" :value="activeData[item]" :disabled="disabled" @on-change="startOnValueChange" ></date-picker> <date-picker :key="index + '-onlydate'" v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_NOTIME') && index == 1" type="date" :transfer="true" :format="valFormat" :placeholder="$t('components.appRangDate.placeholder')" :value="activeData[item]" :disabled="disabled" @on-change="endOnValueChange" ></date-picker> <date-picker :key="index + '-onlydate'" v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_MINUTE') && index == 1" type="datetime" :transfer="true" :format="valFormat" :placeholder="$t('components.appRangDate.placeholder')" :value="activeData[item]" :disabled="disabled" @on-change="endOnValueChange" ></date-picker> <span v-if="index > 0" :key="index + '-only'" class="editor-space">{{$t('components.appRangDate.dayend')}}</span> </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 AppRangDate extends Vue { /** * 编辑项名称 * * @type {string} * @memberof AppRangDate */ @Prop() public name!: string; /** * 是否禁用 * * @type {boolean} * @memberof AppRangDate */ @Prop() public disabled!: boolean; /** * 表单数据对象 * * @type {*} * @memberof AppRangDate */ @Prop() public activeData: any; /** * 值格式 * * @type {string} * @memberof AppRangDate */ @Prop() public format!: string; /** * 编辑器类型 * * @type {string} * @memberof AppRangDate */ @Prop() public editorType!: string; /** * 关系表单项集合 * * @type {string[]} * @memberof AppRangDate */ @Prop() public refFormItem!: string[]; /** * 值变化时间 * * @private * @type {Subject<any>} * @memberof AppRangDate */ private inputDataChang: Subject<any> = new Subject(); /** * 处理值格式 * * @readonly * @memberof AppRangDate */ get valFormat() { return this.format.replace("YYYY", "yyyy").replace("DD", "dd"); } /** * 获取值 * * @param {string} name * @returns * @memberof AppRangDate */ public getValue(name: string) { return this.activeData[name]; } /** * 设置值 * * @param {string} name * @param {*} val * @memberof AppRangDate */ public setValue(name: string, val: any) { this.inputDataChang.next({ name: name, value: val }); } /** * vue 声明周期 debounceTime * * @memberof AppRangDate */ 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 AppRangDate */ public startOnValueChange(value: any, name: string) { this.$emit("formitemvaluechange", { name: this.refFormItem[0], value: value }); } /** * 结束时间值改变 * @param {string} name * @param {*} value * @memberof AppRangDate */ public endOnValueChange(value: any, name: string) { this.$emit("formitemvaluechange", { name: this.refFormItem[1], value: value }); } } </script> <style lang='less'> @import "./app-range-date.less"; </style>