自定义时间选择、多选下拉组件

src/components/scDatePicker/index.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Descripttion: 日期选择组件
+ * @Author: 龙运模
+ * @Date: 2024年07月11日
+ * @LastEditors: 龙运模
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="scDatePicker">
+		<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size" :popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable></el-date-picker>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		activation_date: {
+			type: Object,
+			default: () => ({ operator: "between", value: [] })
+		},
+		size:{ type: String, default: "small" },
+		startPlaceholder:{type:String, default:""},
+		endPlaceholder:{type:String, default:""}
+	},
+	watch:{
+		activation_date:{
+			handler(val){
+				if(!val || val.value.length == 0){
+					this.localDatePicker = [];
+				}
+			},
+			deep:true
+		}
+	},
+	data(){
+		return{
+			localDatePicker:[],
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		dateChange(e){
+			this.localDatePicker = e;
+			this.emitActivationDate();
+		},
+		emitActivationDate() {
+			this.$emit('update:activation_date', {
+				operator: this.activation_date.operator,
+				value: this.localDatePicker && this.localDatePicker.length > 0? this.localDatePicker.map(date => this.$TOOL.getTime(date)):[]
+			});
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.scDatePicker{
+		width: 100%;
+	}
+</style>

src/components/scDialog/index.vue

@@ -9,28 +9,28 @@
 
 <template>
 	<div class="sc-dialog" ref="scDialog">
-	<el-dialog ref="dialog" v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false">
-		<template #header>
-			<slot name="header">
-				<span class="el-dialog__title">{{ title }}</span>
-			</slot>
-			<div class="sc-dialog__headerbtn">
-				<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
-					<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
-					<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
-				</button>
-				<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
-					<el-icon class="el-dialog__close"><el-icon-close /></el-icon>
-				</button>
+		<el-dialog ref="dialog" v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false">
+			<template #header>
+				<slot name="header">
+					<span class="el-dialog__title">{{ title }}</span>
+				</slot>
+				<div class="sc-dialog__headerbtn">
+					<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
+						<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
+						<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
+					</button>
+					<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
+						<el-icon class="el-dialog__close"><el-icon-close /></el-icon>
+					</button>
+				</div>
+			</template>
+			<div v-loading="loading">
+				<slot></slot>
 			</div>
-		</template>
-		<div v-loading="loading">
-			<slot></slot>
-		</div>
-		<template #footer>
-			<slot name="footer"></slot>
-		</template>
-	</el-dialog>
+			<template #footer>
+				<slot name="footer"></slot>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 

src/components/scMultipleSelect/index.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Descripttion: 多选框组件
+ * @Author: 龙运模
+ * @Date: 2024年07月11日
+ * @LastEditors: 龙运模
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="scSelect">
+		<el-select v-bind="$attrs" v-model="localData" class="input" :size="size" @visible-change="getDataList" @change="selectChange" :placeholder="placeholder" clearable>
+			<slot></slot>
+		</el-select>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		select_params: {
+			type: Object,
+			default: () => ({ operator: "in", value: [] })
+		},
+		size:{ type: String, default: "small" },
+		placeholder:{type:String, default:"请选择"},
+	},
+	watch:{
+		select_params:{
+			handler(val){
+				if(!val || val.value.length == 0){
+					this.localData = [];
+				}
+			},
+			deep:true
+		}
+	},
+	data(){
+		return{
+			localData:[],
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		getDataList(val){
+			this.$emit('fetchData',val);
+		},
+		selectChange(e){
+			this.localData = e;
+			this.emitActivationSelect();
+		},
+		emitActivationSelect() {
+			this.$emit('update:select_params', {
+				operator: this.select_params.operator,
+				value: this.localData? this.localData:[]
+			});
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.scSelect{
+	width: 100%;
+	height: 100%;
+	 :deep(.el-input){
+		 height: 28px;
+	 }
+}
+</style>