123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <template>
- <div class="cip-date-scope" :style="{width}">
- <basic-date-picker class="cip-date-range"
- :modelValue="modelValue"
- :config="config"
- @update:modelValue="val => emitDateInput(val)"
- ></basic-date-picker>
- <span class="cip-date-scope__link">至</span>
- <!-- 此处验证由上级处理-->
- <basic-date-picker :modelValue="otherValue"
- class="cip-date-range"
- :config="otherConfig"
- @update:modelValue="val => emitDateInput(val, 'otherValue')"
- ></basic-date-picker>
- </div>
- </template>
- <script>
- import BasicDatePicker from '../../basic/date-picker'
- import { computed } from 'vue'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { formInputProps } from '../../form-input-props'
- import dayjs from 'dayjs'
- import { isInputEmpty } from '@cip/utils/util'
- export default {
- components: { BasicDatePicker },
- props: formInputProps,
- emits: ['update:modelValue', 'update:otherValue'],
- setup (props, context) {
- const { emitModelValue, emitOtherValue, ...formInput } = useFormInput(props, context)
- const getNotEmptyValue = (a, b) => {
- if (!isInputEmpty(a) && !isInputEmpty(b)) return [a, b]
- if (!isInputEmpty(a)) return [a]
- if (!isInputEmpty(b)) return [b]
- return []
- }
- // 用于比较大小
- const dateInfoToTimes = (dateInfoList) => {
- return dateInfoList.map(v => {
- if (typeof v === 'number') return v
- if (v instanceof Date) return v.getTime()
- return dayjs(v).valueOf()
- })
- }
- const config = computed(() => {
- const config = { ...props.config }
- // config.min = config.min 默认
- config.max = Math.min(...dateInfoToTimes(getNotEmptyValue(props.otherValue, props.config.max)))
- return config
- })
- const otherConfig = computed(() => {
- const config = { ...props.config }
- config.min = Math.max(...dateInfoToTimes(getNotEmptyValue(props.modelValue, props.config.otherMin ?? props.config.min)))
- if (!isInputEmpty(props.config.otherMax)) config.max = props.config.otherMax
- config.placeholder = props.config.otherPlaceholder
- return config
- })
- const formatter = computed(() => {
- return props.config?.formatter ?? (type.value === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
- })
- // range使用date和datetime两种类型
- const type = computed(() => {
- const viewType = props.config?.viewType ?? 'date'
- return ['date', 'datetime'].includes(viewType) ? viewType : 'date'
- })
- /**
- * element plus的date-picker组件不再提供value-format属性
- * 提交val时候引入dayjs的format方法手动转换
- *
- * 时间戳时会报modelValue不能接收number
- */
- const emitDateInput = (val, withOther) => {
- let value = ''
- if (!val) {
- value = ''
- } else if (props.config?.isTimestamp) {
- value = new Date(val).getTime()
- } else {
- value = dayjs(val).format(formatter.value)
- }
- if (withOther) {
- emitOtherValue(value)
- } else {
- emitModelValue(value)
- }
- }
- return {
- ...formInput,
- emitDateInput,
- config,
- otherConfig
- }
- }
- }
- </script>
- <style lang="less">
- .cip-date-scope{
- display: flex;
- flex-grow: 1;
- width: 100%;
- align-content: center;
- .cip-date-range{
- flex-grow: 1;
- flex-basis: 0;
- display: flex;
- }
- &__link{
- // is-success 将导致字体变色
- color: #999;
- margin: 0 8px;
- }
- .el-date-editor.el-input{
- width: 100%;
- flex-shrink: 1;
- }
- // clear图标在range时比较占用空间
- .el-input--suffix .el-input__inner{
- padding-right: 22px;
- }
- .el-input__suffix{
- right: 0;
- }
- }
- </style>
|