1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
| <template>
| <a-time-range-picker v-model:value="rangeValue" @change="handleChange" :placeholder="placeholder" :valueFormat="format" :format="format"/>
| </template>
|
| <script>
| import { defineComponent, ref, watch } from 'vue';
| import { propTypes } from '/@/utils/propTypes';
| import { Form } from 'ant-design-vue';
|
| const placeholder = ['开始时间', '结束时间']
| /**
| * 用于时间-time组件的范围查询
| */
| export default defineComponent({
| name: "JRangeTime",
| props:{
| value: propTypes.string.def(''),
| format: propTypes.string.def('HH:mm:ss'),
| 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});
|
|
| 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,
| handleChange
| }
| }
| });
| </script>
|
|
