添加一个根据上班打卡时间区间进行查询 点击查询按钮可进行姓名和时间区间的联合查询 <el-select v-model="filterUser" ><el-option v-for="(item, index) in uniqueUser" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" ></el-date-picker> <el-button type="primary" @click="selectUser">查询</el-button>methods: { //获取人员打卡信息 async getAttendanceData() { const { data: res } = await request.get("/User/UserClockIn", { params: { user_name: this.filterUser }, }); if (res.status !== 200) return this.$msg.error(res.msg); this.attendanceData = res.data; this.user_option = this.attendanceData.map((item) => { return { value: item.user_name, label: item.user_name, }; }); }, //根据姓名筛选 selectUser() { if (this.filterUser.length > 0) { this.filteredList = this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { this.filteredList = this.attendanceData; } }, }, computed: { //监视:当没有从下拉框选择成员信息时 显示全部信息 filteredList: { get() { if (this.filterUser.length > 0) { return this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { return this.attendanceData; } }, set(value) {}, },
时间: 2024-04-03 19:36:14 浏览: 17
这段代码是一个 Vue.js 的组件,其中包含了一个下拉框、一个日期选择器和一个按钮。当用户选择一个人员和时间区间后,点击查询按钮,会触发 selectUser 方法,该方法会根据选择的人员和时间区间来筛选出符合条件的数据,并将其存在 filteredList 中。如果没有从下拉框选择成员信息,则会显示全部信息。另外,该组件还有一个 getAttendanceData 方法,用于获取人员打卡信息,并将其中的人员名字存储在 user_option 中,供下拉框使用。
相关问题
修改下面代码添加一个根据上班打卡时间区间进行查询 点击查询按钮可进行姓名和时间区间的联合查询 <el-select v-model="filterUser" ><el-option v-for="(item, index) in uniqueUser" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" ></el-date-picker> <el-button type="primary" @click="selectUser">查询</el-button>methods: { //获取人员打卡信息 async getAttendanceData() { const { data: res } = await request.get("/User/UserClockIn", { params: { user_name: this.filterUser }, }); if (res.status !== 200) return this.$msg.error(res.msg); this.attendanceData = res.data; this.user_option = this.attendanceData.map((item) => { return { value: item.user_name, label: item.user_name, }; }); }, //根据姓名筛选 selectUser() { if (this.filterUser.length > 0) { this.filteredList = this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { this.filteredList = this.attendanceData; } }, }, computed: { //监视:当没有从下拉框选择成员信息时 显示全部信息 filteredList: { get() { if (this.filterUser.length > 0) { return this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { return this.attendanceData; } }, set(value) {}, },
你可以将以下代码添加到 methods 中:
```
selectUser() {
if (this.filterUser.length > 0 && this.value2 !== null) {
this.filteredList = this.attendanceData.filter((item) => {
return this.filterUser.indexOf(item.user_name) !== -1 &&
moment(item.clock_in_time).isBetween(this.value2[0], this.value2[1])
});
} else if (this.filterUser.length > 0) {
this.filteredList = this.attendanceData.filter(
(item) => this.filterUser.indexOf(item.user_name) !== -1
);
} else if (this.value2 !== null) {
this.filteredList = this.attendanceData.filter((item) => {
return moment(item.clock_in_time).isBetween(this.value2[0], this.value2[1])
});
} else {
this.filteredList = this.attendanceData;
}
},
```
这里使用了 moment.js 库来处理时间,需要先在代码中引入 moment.js 库。在这段代码中,我们首先判断用户是否同时选择了人员和时间区间,如果是,则筛选出符合条件的数据;如果只选择了人员或时间区间中的一个,则只使用该条件进行筛选;如果两个条件都没有选择,则显示全部信息。
要求有上班打卡和下班打卡两个按钮,点击打卡后自动显示打卡时间
这个需求可以通过以下步骤实现:
1. 首先在页面上添加两个按钮,一个是上班打卡,一个是下班打卡。
2. 在按钮的点击事件中,使用 JavaScript 获取当前时间,并将其显示在页面上。
3. 可以使用 localStorage 或者 cookie 等方式将打卡时间保存下来,以便后续统计。
以下是一个简单的实现示例:
HTML 代码:
```html
<button id="clock-in-btn">上班打卡</button>
<button id="clock-out-btn">下班打卡</button>
<p id="clock-in-time"></p>
<p id="clock-out-time"></p>
```
JavaScript 代码:
```javascript
// 获取打卡按钮和打卡时间显示区域
const clockInBtn = document.getElementById('clock-in-btn');
const clockOutBtn = document.getElementById('clock-out-btn');
const clockInTime = document.getElementById('clock-in-time');
const clockOutTime = document.getElementById('clock-out-time');
// 绑定打卡按钮的点击事件
clockInBtn.addEventListener('click', () => {
// 获取当前时间
const now = new Date();
const timeStr = now.toLocaleString();
// 显示打卡时间
clockInTime.innerHTML = `上班打卡时间:${timeStr}`;
// 保存打卡时间
localStorage.setItem('clockInTime', timeStr);
});
clockOutBtn.addEventListener('click', () => {
// 获取当前时间
const now = new Date();
const timeStr = now.toLocaleString();
// 显示打卡时间
clockOutTime.innerHTML = `下班打卡时间:${timeStr}`;
// 保存打卡时间
localStorage.setItem('clockOutTime', timeStr);
});
```
这样,用户点击上班或下班打卡按钮后,页面上就会显示对应的打卡时间。同时,打卡时间也会被保存在 localStorage 中,以便后续统计。