Element与Antd对于时间范围查找

最新推荐文章于 2024-06-12 11:13:48 发布

依稀i123

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量54

点赞数

分类专栏： vue3 文章标签：前端 javascript java

本文链接：https://blog.csdn.net/qq_59833893/article/details/134185439

版权

vue3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、Element

HTML：

<template>
	<a-card :bordered="false">
		<el-form :model="searchFormState" ref="searchFormRef" name="advanced_search">
			<el-row :gutter="24">
				<el-col :span="6">
					<el-form-item label="创建时间" name="createTime">
						<el-date-picker
							v-model="searchFormState.createTime"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期" />
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="loadData()">查询</el-button>
					<el-button style="margin: 0 8px" @click="reset('searchFormRef')">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
	</a-card>
</template>

JS：

export default {
	name: 'Function',
	data() {
		return {
			searchFormState: {},
            tableData: [],
            totalCount: '',
		}
	},
	mounted() {
		this.loadData()
	},
	methods: {
		loadData() {
			this.searchFormState.current = this.currentPage
			this.searchFormState.size = this.pageSize
			// createTime范围查询条件重载
			if (this.searchFormState.createTime) {
				this.searchFormState.startTime = this.searchFormState.createTime[0]
				this.searchFormState.endTime = this.searchFormState.createTime[1]
			}
			backUserApi.page(this.searchFormState).then((data) => {
				this.tableData = data.records
				this.totalCount = data.total
			})
		},

		// 重置
		reset(formName) {
            // this.$refs[formName].resetFields() 主要用于重置表单字段的值，以将它们还原为其初始状态，但对于 <el-date-picker> 的时间范围选择器，它是一个特殊的组件，使用 this.$refs[formName].resetFields() 可能不会恢复日期时间范围的值，需要手动将其值重置为空数组
			this.$refs[formName].resetFields()
			this.searchFormState.createTime = [];
			this.loadData()
		},
	}
}

Java：

// 实体类
import com.fasterxml.jackson.annotation.JsonFormat;
import io.swagger.annotations.ApiModelProperty;
import lombok.Getter;
import lombok.Setter;
import java.util.Date;

@Setter
@Getter
public class BackUserPageParam {

    @ApiModelProperty("开始时间")
    @JsonFormat(pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", timezone = "UTC")
    private Date startTime;

    @ApiModelProperty("结束时间")
    @JsonFormat(pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", timezone = "UTC")
    private Date endTime;
}

// 查询
wrapper.between("CREATE_TIME", startTime(), endTime());

二、Antd

HTML：

<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="创建时间" name="selectTime">
						<a-range-picker 
                            v-model:value="searchFormState.selectTime" 
                            value-format="YYYY-MM-DD HH:mm:ss" 
                            show-time />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
				</a-col>
			</a-row>
		</a-form>
        <s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
		>
		</s-table>
	</a-card>
</template>

JS：

<script setup name="favorite">
	import xxxApi from '@/api/xx/xxxApi'

	let searchFormState = reactive({})
	const searchFormRef = ref()
	const formRef = ref()
	
	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		// selectTime范围查询条件重载
		if (searchFormParam.selectTime) {
			searchFormParam.startDate = searchFormParam.selectTime[0]
			searchFormParam.endDate = searchFormParam.selectTime[1]
			delete searchFormParam.selectTime
		}
		return xxxApi.page(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
</script>

Java：

// 实体类
import io.swagger.annotations.ApiModelProperty;
import lombok.Getter;
import lombok.Setter;
import org.springframework.format.annotation.DateTimeFormat;
import java.util.Date;

@Getter
@Setter
public class PageParam {

    /** 范围起始时间 */
    @ApiModelProperty(value = "范围起始时间")
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date startDate;

    /** 范围终止时间 */
    @ApiModelProperty(value = "范围终止时间")
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date endDate;

}

// 查找条件
wrapper.between("CREATE_TIME", startDate(), endDate());