cip-components/cip-form-input/extension/time-range/index.vue

<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>