<template>
|
<a-range-picker v-model:value="rangeValue" @change="handleChange" :show-time="datetime" :placeholder="placeholder" :valueFormat="valueFormat"/>
|
</template>
|
|
<script>
|
import { defineComponent, ref, watch, computed } from 'vue';
|
import { propTypes } from '/@/utils/propTypes';
|
import { Form } from 'ant-design-vue';
|
|
const placeholder = ['开始日期', '结束日期']
|
/**
|
* 用于范围查询
|
*/
|
export default defineComponent({
|
name: "JRangeDate",
|
props:{
|
value: propTypes.string.def(''),
|
datetime: propTypes.bool.def(false),
|
placeholder: propTypes.string.def(''),
|
},
|
emits:['change', 'update:value'],
|
setup(props, {emit}){
|
const rangeValue = ref([])
|
const formItemContext = Form.useInjectFormItemContext();
|
|
watch(()=>props.value, (val)=>{
|
if(val){
|
rangeValue.value = val.split(',')
|
}else{
|
rangeValue.value = []
|
}
|
}, {immediate: true});
|
|
const valueFormat = computed(()=>{
|
if(props.datetime === true){
|
return 'YYYY-MM-DD HH:mm:ss'
|
}else{
|
return 'YYYY-MM-DD'
|
}
|
});
|
|
function handleChange(arr){
|
let str = ''
|
if(arr && arr.length>0){
|
if(arr[1] && arr[0]){
|
str = arr.join(',')
|
}
|
}
|
emit('change', str);
|
emit('update:value', str);
|
formItemContext.onFieldChange();
|
}
|
return {
|
rangeValue,
|
placeholder,
|
valueFormat,
|
handleChange
|
}
|
}
|
});
|
</script>
|
|
<style scoped>
|
|
</style>
|
