123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <template>
- <div class="basic-time-range" :style="{width}">
- <el-time-select class="cip-form-picker"
- :model-value="startTransValue"
- @update:modelValue="emitStart"
- :disabled="disabled"
- :placeholder="startPlaceholder"
- :start="start"
- :end="end"
- :step="step"
- :maxTime="maxTime"
- v-bind="attrs"></el-time-select>
- <span class="basic-time-range__link">至</span>
- <el-time-select class="cip-form-picker"
- :model-value="endTransValue"
- @update:modelValue="emitEnd"
- :disabled="disabled"
- :placeholder="endPlaceholder"
- :start="start"
- :end="end"
- :step="step"
- :minTime="minTime"
- v-bind="attrs"></el-time-select>
- </div>
- </template>
- <script>
- import { ElTimeSelect } from 'element-plus'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { formInputProps } from '../../form-input-props'
- import { computed } from 'vue'
- // import dayjs from 'dayjs'
- export default {
- components: { ElTimeSelect },
- props: formInputProps,
- emits: ['update:modelValue', 'update:otherValue'],
- setup (props, context) {
- const formInput = useFormInput(props, context)
- const attrs = computed(() => {
- return props.config?.attrs ?? {}
- })
- const startPlaceholder = computed(() => {
- return props.config?.startPlaceholder ?? '请输入'
- })
- const endPlaceholder = computed(() => {
- return props.config?.endPlaceholder ?? '请输入'
- })
- const width = computed(() => {
- return props.config?.width ?? ''
- })
- const start = computed(() => {
- return props.config?.start ?? '08:00'
- })
- const end = computed(() => {
- return props.config?.end ?? '20:00'
- })
- const step = computed(() => {
- return props.config?.step ?? '00:30'
- })
- const startDefaultValue = computed(() => {
- return props.config.startDefaultValue
- })
- const startTransValue = computed(() => {
- return props.modelValue ?? startDefaultValue.value
- })
- const endTransValue = computed(() => {
- return props.otherValue ?? props.config.endDefaultValue
- })
- const minTime = computed(() => {
- return startTransValue?.value ?? start.value
- })
- const maxTime = computed(() => {
- return endTransValue?.value ?? end.value
- })
- const emitStart = (val) => {
- context.emit('update:modelValue', val)
- }
- const emitEnd = (val) => {
- context.emit('update:otherValue', val)
- }
- return {
- ...formInput,
- startTransValue,
- endTransValue,
- emitStart,
- emitEnd,
- attrs,
- start,
- end,
- step,
- startPlaceholder,
- endPlaceholder,
- width,
- minTime,
- maxTime
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .basic-time-range{
- display: flex;
- flex-grow: 1;
- align-content: center;
- &__link{
- margin: 0 8px;
- }
- .cip-form-picker{
- flex: 1;
- width: 100%;
- }
- }
- </style>
|