123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <template>
- <div :class="['cip-date-scope',{'is-focus': isFocus, 'is-separate': isSeparate}]" :style="{width}">
- <basic-date-picker
- class="cip-date-range"
- v-model="proxyValue"
- :config="config"
- :disabled="disabled"
- @focus="onValueFocus"
- @blur="onValueBlur"
- />
- <span class="cip-date-scope__link"> — </span>
- <!-- 此处验证由上级处理-->
- <basic-date-picker
- class="cip-date-range"
- v-model="proxyOtherValue[0].value"
- :config="otherConfig"
- :disabled="disabled"
- @focus="onOtherValueFocus"
- @blur="onOtherValueBlur"
- />
- </div>
- </template>
- <script>
- import BasicDatePicker from '../../basic/date-picker'
- import { computed } from 'vue'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { dateInfoToTimes, getNotEmptyValue } from './util'
- import { getUsingConfig, isInputEmpty } from '@cip/utils/util'
- import { useFocusInput } from './use-focus-input'
- import { useCipConfig } from '@cip/components/hooks/use-cip-config'
- export default {
- components: { BasicDatePicker },
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const {
- proxyValue,
- proxyOtherValue,
- securityConfig,
- ...formInput
- } = useFormInput(props, context, {
- maxOtherKey: 1
- })
- const cipConfig = useCipConfig()
- const isSeparate = computed(() => getUsingConfig(securityConfig.value.separate, cipConfig.range?.separate, false))
- const config = computed(() => {
- const config = { ...props.config }
- config.max = Math.min(...dateInfoToTimes(getNotEmptyValue(proxyOtherValue[0].value, props.config.max)))
- config.noIcon = !isSeparate.value // true
- return config
- })
- const otherConfig = computed(() => {
- const config = { ...props.config }
- config.min = Math.max(...dateInfoToTimes(getNotEmptyValue(proxyValue.value, securityConfig.value.otherMin ?? securityConfig.value.min)))
- if (!isInputEmpty(securityConfig.value.otherMax)) config.max = securityConfig.value.otherMax
- config.placeholder = securityConfig.value.otherPlaceholder
- // viewType为date或默认的时候,启用otherDate标记,返回值修改时分秒为23:59:59
- if (['date', undefined].includes(config.viewType)) config.isOtherDate = true
- return config
- })
- const [isValueFocus, onValueFocus, onValueBlur] = useFocusInput()
- const [isOtherValueFocus, onOtherValueFocus, onOtherValueBlur] = useFocusInput()
- const isFocus = computed(() => {
- return isValueFocus.value || isOtherValueFocus.value
- })
- return {
- ...formInput,
- onValueFocus,
- onValueBlur,
- onOtherValueFocus,
- onOtherValueBlur,
- isFocus,
- isSeparate,
- config,
- otherConfig,
- proxyValue,
- proxyOtherValue
- }
- }
- }
- </script>
- <style lang="less">
- .cip-date-scope{
- display: flex;
- width: 100%;
- align-items: center;
- &.is-separate{
- .cip-date-scope__link{
- // is-success 将导致字体变色
- color: var(~'--@{elNamespace}-input-text-color');
- font-size: 16px;
- zoom: 0.625;
- margin: 0 4px;
- }
- }
- }
- // 教研错误时的颜色变化
- .@{elNamespace}-form-item.is-error .cip-date-scope:not(.is-separate){
- box-shadow: 0 0 0 1px var(~'--@{elNamespace}-color-danger') inset;
- }
- .cip-date-scope:not(.is-separate){
- padding: 1px 1px;
- box-shadow: 0 0 0 1px var(~'--@{elNamespace}-input-border-color',var(~'--@{elNamespace}-border-color')) inset;
- border-radius: var(~'--@{elNamespace}-input-border-radius',var(~'--@{elNamespace}-border-radius-base'));
- &:hover{
- box-shadow: 0 0 0 1px var(~'--@{elNamespace}-border-color-hover',var(~'--@{elNamespace}-border-color')) inset;
- }
- &.is-focus{
- box-shadow: 0 0 0 1px @primary inset;
- }
- .cip-date-range.cip-form-picker{
- line-height: var(~'--@{elNamespace}-component-size');
- flex-grow: 2;
- flex-basis: 0;
- display: flex;
- .@{elNamespace}-input__wrapper{
- box-shadow: none;
- padding-top: 0;
- padding-bottom: 0;
- .@{elNamespace}-input__inner{
- text-align: center;
- }
- }
- }
- .cip-date-scope__link{
- // is-success 将导致字体变色
- color: var(~'--@{elNamespace}-input-text-color');
- font-size: 16px;
- zoom: 0.625;
- margin: 0 4px;
- }
- .@{elNamespace}-date-editor.@{elNamespace}-input{
- width: 100%;
- flex-shrink: 1;
- }
- .@{elNamespace}-input__suffix{
- right: 0;
- }
- }
- </style>
|