瀏覽代碼

添加 cl-date-picker 组件

icssoa 1 年之前
父節點
當前提交
1944e41206
共有 1 個文件被更改,包括 31 次插入13 次删除
  1. 31 13
      src/modules/base/components/date/picker.vue

+ 31 - 13
src/modules/base/components/date/picker.vue

@@ -9,7 +9,7 @@
 			@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="week">本周</el-radio-button>
 			<el-radio-button label="month">本月</el-radio-button>
@@ -21,23 +21,41 @@
 <script lang="ts" setup name="cl-date-picker">
 import { useCrud } from "@cool-vue/crud";
 import dayjs from "dayjs";
-import { computed, ref, watch } from "vue";
+import { PropType, computed, ref, watch } from "vue";
 
 const props = defineProps({
 	modelValue: Array,
+	// 日期类型
 	type: {
-		type: String,
+		type: String as PropType<
+			| "year"
+			| "month"
+			| "date"
+			| "dates"
+			| "datetime"
+			| "week"
+			| "datetimerange"
+			| "daterange"
+			| "monthrange"
+		>,
 		default: "datetimerange"
 	},
+	// 日期格式
 	valueFormat: {
-		type: String,
+		type: null,
 		default: "YYYY-MM-DD HH:mm:ss"
 	},
-	prop: {
-		type: String
-	},
+	// 搜索请求的字段
+	prop: String,
+	// 宽度
 	width: String,
-	quickBtn: Boolean
+	// 是否显示快速按钮
+	quickBtn: Boolean,
+	// 默认按钮类型
+	defaultQuickType: {
+		type: String as PropType<"day" | "week" | "month" | "year" | "">,
+		default: "day"
+	}
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
@@ -56,12 +74,12 @@ const defaultTime = ref(
 const date = ref();
 
 // 按钮类型
-const btnType = ref("month");
+const quickType = ref(props.defaultQuickType);
 
 // 日期改变
 function onChange(value: any[]) {
 	// 重置按钮类型
-	btnType.value = "";
+	quickType.value = "";
 
 	// 参数
 	let params = {};
@@ -95,13 +113,13 @@ function onChange(value: any[]) {
 }
 
 // 按钮类型改变
-function onBtnTypeChange() {
+function onQuickTypeChange() {
 	date.value = isRange.value ? [] : undefined;
 
 	let start = dayjs();
 	let end = dayjs();
 
-	switch (btnType.value) {
+	switch (quickType.value) {
 		case "day":
 			break;
 		case "week":
@@ -129,7 +147,7 @@ function onBtnTypeChange() {
 }
 
 function init() {
-	onBtnTypeChange();
+	onQuickTypeChange();
 }
 
 watch(