mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 14:10:27 +08:00
添加 cl-date-picker 组件
This commit is contained in:
parent
f8956f38b8
commit
1944e41206
@ -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(
|
||||||
|
Loading…
Reference in New Issue
Block a user