关于ElementPlus的日期范围的参数格式化问题处理

前言

我们在日常跟后端对接的过程中多多少少都会使用到日期范围选择器的组件，该组大家都知道选好日期后会返回一个数组。这格式通常不是我们想要的，后端一般会叫我们把这两个时间分成两个字段，例如：startTime与endTime亦或者是一个字段以逗号隔开的格式，这就避免不了我们还的要处理一手，所以针对以上问题封装了一个hook来解决这种繁琐的转换，话不多说，直接上代码：

源码

import { computed, isRef, unref, isReactive } from 'vue'

/**
 * getter
 * @param {*} props
 * @param {*} keys
 * @returns
 */
function getValue(props, keys) {
  if (keys.length === 1) {
    return props[keys[0]] ? props[keys[0]].split(',') : props[keys[0]]
  } else if (keys.length === 2) {
    if (props[keys[0]] && props[keys[1]]) {
      return [props[keys[0]], props[keys[1]]]
    } else {
      return undefined
    }
  }
}
/**
 * setter
 * @param {*} props
 * @param {*} keys
 * @param {*} val
 */
function setValue(props, keys, val) {
  if (keys.length === 1) {
    props[keys[0]] = val ? val.join(',') : undefined
  } else if (keys.length === 2) {
    props[keys[0]] = val ? val[0] : undefined
    props[keys[1]] = val ? val[1] : undefined
  }
}
/**
 * 用于处理日期范围选择器的数据格式化
 * @param {*} props
 * @param {*} keys
 * @returns
 */
export function useRangeDateFormat(props, ...keys) {
  let obj = null
  if (isRef(props)) {
    obj = unref(props)
  } else if (isReactive(props)) {
    obj = props
  } else {
    throw new Error('props is not ref or reactive')
  }
  if (!keys.length) {
    throw new Error('key is required')
  }
  return computed({
    get() {
      return getValue(obj, keys)
    },
    set(val) {
      setValue(obj, keys, val)
    }
  })

}

使用reactive测试

<template>
  <div class="dataser-container">
    <el-form :model="model" label-position="left" label-width="85px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="选择日期">
            <el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="[new Date('2024-01-01 00:00:00'), new Date('2024-01-01 23:59:59')]" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="违禁品名称">
            <el-select></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <yg-button text="查询" style="margin-right: 10px;" />
            <yg-button text="生成统计图表" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRangeDateFormat } from '@/hook/useRangeDateFormat';
const model = reactive({})
const date = useRangeDateFormat(model, 'startTime', 'endTime')
</script>

使用reactive测试结果

使用ref测试结果

测试单个字段结果

reactive 也一样，就不再贴图了，大家可以粘贴源码测试下，如有不对的地方请指出，共勉～