109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<template>
|
|
<QuesBaseItem :info="info">
|
|
<template v-slot:option>
|
|
<div class="date">
|
|
<a-date-picker
|
|
v-if="dateShown && modeDate === 'year'"
|
|
v-model:value="year"
|
|
:mode="modeDate"
|
|
:format="formatDate"
|
|
:placeholder="'请选择日期'"
|
|
class="custom-date-picker"
|
|
style="width: 280px; margin-right: 12px"
|
|
@panelChange="dateChange"
|
|
/>
|
|
|
|
<a-month-picker
|
|
v-if="dateShown && modeDate === 'month'"
|
|
:mode="modeDate"
|
|
:format="formatDate"
|
|
:placeholder="'请选择日期'"
|
|
class="custom-date-picker"
|
|
style="width: 280px; margin-right: 12px"
|
|
/>
|
|
|
|
<a-date-picker
|
|
v-if="dateShown && modeDate === 'date'"
|
|
:mode="modeDate"
|
|
:format="formatDate"
|
|
:placeholder="'请选择日期'"
|
|
class="custom-date-picker"
|
|
style="width: 280px; margin-right: 12px"
|
|
/>
|
|
|
|
<a-time-picker
|
|
v-if="timeShown"
|
|
:mode="modeTime"
|
|
:format="formatTime"
|
|
:placeholder="'请选择时间'"
|
|
class="custom-date-picker"
|
|
style="width: 230px"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<logical :info="info" />
|
|
</template>
|
|
</QuesBaseItem>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, computed, ref } from 'vue';
|
|
import Logical from '../../components/Logical.vue';
|
|
import QuesBaseItem from '../../fragement/QuesBaseItem.vue';
|
|
export default defineComponent({
|
|
name: 'DateTime',
|
|
components: { QuesBaseItem, Logical },
|
|
props: {
|
|
info: { type: Object, default: () => ({}) },
|
|
sn: { type: String, default: '' },
|
|
questionType: { type: [String, Number], default: 7 }
|
|
},
|
|
emits: ['update'],
|
|
setup(props, context) {
|
|
const quiz = computed(() => JSON.parse(JSON.stringify(props.info)));
|
|
|
|
const placeholder = computed(() => quiz.value.config?.placeholder);
|
|
const dateShown = computed(() => !!quiz.value.config?.date);
|
|
const timeShown = computed(() => !!quiz.value.config?.time);
|
|
|
|
const formatDate = computed(() => {
|
|
const dates = [undefined, 'YYYY-MM-DD', 'YYYY-MM', 'YYYY'];
|
|
return quiz.value.config.date ? dates[quiz.value.config.date] : dates[1];
|
|
});
|
|
const modeDate = computed(() => {
|
|
const dates = [undefined, 'date', 'month', 'year'];
|
|
return quiz.value.config.date ? dates[quiz.value.config.date] : dates[1];
|
|
});
|
|
const formatTime = computed(() => {
|
|
const times = [undefined, 'HH:mm:ss', 'HH:mm', 'HH'];
|
|
return quiz.value.config.time ? times[quiz.value.config.time] : times[1];
|
|
});
|
|
const modeTime = computed(() => {
|
|
const times = [undefined, 'second', 'minute', 'hour'];
|
|
return quiz.value.config.time ? times[quiz.value.config.time] : times[1];
|
|
});
|
|
|
|
const year = ref();
|
|
const dateChange = (date) => {
|
|
year.value = date;
|
|
};
|
|
|
|
return {
|
|
quiz,
|
|
placeholder,
|
|
dateShown,
|
|
timeShown,
|
|
formatDate,
|
|
modeDate,
|
|
formatTime,
|
|
modeTime,
|
|
year,
|
|
dateChange
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|