添加 cl-date-picker 组件

This commit is contained in:
icssoa 2023-11-26 23:07:48 +08:00
parent f8956f38b8
commit 1944e41206

View File

@ -9,7 +9,7 @@
@change="onChange" @change="onChange"
/> />
<el-radio-group v-model="btnType" @change="onBtnTypeChange" v-if="quickBtn && isRange"> <el-radio-group v-model="quickType" @change="onQuickTypeChange" v-if="quickBtn && isRange">
<el-radio-button label="day">今日</el-radio-button> <el-radio-button label="day">今日</el-radio-button>
<el-radio-button label="week">本周</el-radio-button> <el-radio-button label="week">本周</el-radio-button>
<el-radio-button label="month">本月</el-radio-button> <el-radio-button label="month">本月</el-radio-button>
@ -21,23 +21,41 @@
<script lang="ts" setup name="cl-date-picker"> <script lang="ts" setup name="cl-date-picker">
import { useCrud } from "@cool-vue/crud"; import { useCrud } from "@cool-vue/crud";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { computed, ref, watch } from "vue"; import { PropType, computed, ref, watch } from "vue";
const props = defineProps({ const props = defineProps({
modelValue: Array, modelValue: Array,
//
type: { type: {
type: String, type: String as PropType<
| "year"
| "month"
| "date"
| "dates"
| "datetime"
| "week"
| "datetimerange"
| "daterange"
| "monthrange"
>,
default: "datetimerange" default: "datetimerange"
}, },
//
valueFormat: { valueFormat: {
type: String, type: null,
default: "YYYY-MM-DD HH:mm:ss" default: "YYYY-MM-DD HH:mm:ss"
}, },
prop: { //
type: String prop: String,
}, //
width: String, width: String,
quickBtn: Boolean //
quickBtn: Boolean,
//
defaultQuickType: {
type: String as PropType<"day" | "week" | "month" | "year" | "">,
default: "day"
}
}); });
const emit = defineEmits(["update:modelValue", "change"]); const emit = defineEmits(["update:modelValue", "change"]);
@ -56,12 +74,12 @@ const defaultTime = ref(
const date = ref(); const date = ref();
// //
const btnType = ref("month"); const quickType = ref(props.defaultQuickType);
// //
function onChange(value: any[]) { function onChange(value: any[]) {
// //
btnType.value = ""; quickType.value = "";
// //
let params = {}; let params = {};
@ -95,13 +113,13 @@ function onChange(value: any[]) {
} }
// //
function onBtnTypeChange() { function onQuickTypeChange() {
date.value = isRange.value ? [] : undefined; date.value = isRange.value ? [] : undefined;
let start = dayjs(); let start = dayjs();
let end = dayjs(); let end = dayjs();
switch (btnType.value) { switch (quickType.value) {
case "day": case "day":
break; break;
case "week": case "week":
@ -129,7 +147,7 @@ function onBtnTypeChange() {
} }
function init() { function init() {
onBtnTypeChange(); onQuickTypeChange();
} }
watch( watch(