<template>
|
<div>
|
<div class="search-bar">
|
<div>
|
<label>请假类型</label>
|
<el-select v-model="searchParams.leaveType" size="small">
|
<el-option label="所有" value="" :key="99"></el-option>
|
<el-option v-for="(leaveType, i) in leaveTypeList" :label="leaveType" :value="leaveType" :key="i"></el-option>
|
</el-select>
|
</div>
|
<div>
|
<label>申请时间</label>
|
<el-date-picker
|
size="small"
|
v-model="searchParams.range"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
<div>
|
<el-button type="primary" @click="search" size="mini" icon="el-icon-search">搜索</el-button>
|
<el-button type="default" @click="reset" size="mini" icon="el-icon-refresh">重置</el-button>
|
</div>
|
</div>
|
<table-template
|
:data="tableData"
|
:total="total"
|
selection
|
@selection-change="handleSelectionChange"
|
@page-change="handlePageChange"
|
>
|
<template #toolbar>
|
<el-button type="primary" @click="dialogVisible = true" plain icon="el-icon-plus" size="mini">添加</el-button>
|
<el-button type="danger" :disabled="currentSelection.length === 0" @click="handleMultipleDelete" plain icon="el-icon-delete" size="mini">删除</el-button>
|
</template>
|
<template #columns>
|
<el-table-column
|
prop="userId"
|
label="请假人">
|
</el-table-column>
|
<el-table-column
|
prop="startTime"
|
label="起始时间">
|
</el-table-column>
|
<el-table-column
|
prop="endTime"
|
label="结束时间">
|
</el-table-column>
|
<el-table-column
|
prop="leaveType"
|
label="类型">
|
</el-table-column>
|
<el-table-column
|
prop="applyTime"
|
label="申请时间">
|
</el-table-column>
|
<el-table-column
|
prop="startTime"
|
label="实际起始时间">
|
</el-table-column>
|
<el-table-column
|
prop="endTime"
|
label="实际结束时间">
|
</el-table-column>
|
<el-table-column
|
prop="operation"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</table-template>
|
<el-dialog :visible.sync="dialogVisible" width="600px">
|
<el-form ref="form" :model="form" label-width="110px">
|
<el-form-item label="请假人">
|
<el-input v-model="form.userId" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-select v-model="form.leaveType">
|
<el-option v-for="(leaveType, i) in leaveTypeList" :label="leaveType" :value="leaveType" :key="i"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="起始时间">
|
<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间">
|
<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="原因">
|
<el-input type="textarea" v-model="form.reason"></el-input>
|
</el-form-item>
|
<el-form-item label="部门领导">
|
<el-select v-model="form.deptleader">
|
<el-option
|
v-for="(user, i) in userList"
|
:key="i"
|
:label="user.userName"
|
:value="user.userName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleAddLeave">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
// userId: admin
|
// leaveType: 事假
|
// startTime: 1899-11-27 06:30:00
|
// endTime: 2024-04-11 23:25:44
|
// reason: 123
|
// deptleader: admin
|
import TableTemplate from "@/components/TableTemplate";
|
import {getLeaveApplyList, addLeave, deleteLeave, exportLeave} from "./api/leaveApply";
|
import {listUser} from "@/api/system/user.js"
|
|
export default {
|
name: "leaveApply",
|
components: {
|
TableTemplate
|
},
|
data() {
|
return {
|
responseData: {},
|
searchParams: {
|
leaveType: "",
|
searchParams: [],
|
pageNum: 1,
|
pageSize: 10
|
},
|
leaveTypeList: [" 事假", "病假", "年假", "丧假", "年假"],
|
dialogVisible: false,
|
form: {
|
userId: this.$store.state.user.name,
|
leaveType: "事假",
|
startTime: "",
|
endTime: "",
|
reason: "",
|
deptleader: "admin"
|
},
|
currentSelection: [],
|
userList: []
|
};
|
},
|
computed: {
|
tableData() {
|
return this.responseData.rows || []
|
},
|
total() {
|
return this.responseData.total || 0
|
},
|
selectionIds() {
|
return this.currentSelection.map(item => item.id)
|
},
|
},
|
mounted() {
|
this.getLeaveApplyListAndRender(this.searchParams)
|
listUser().then(res => {
|
console.log("获取用户", res);
|
this.userList = res.rows;
|
});
|
},
|
methods: {
|
handleMultipleDelete() {
|
this.$confirm(`确定删除选中的${this.currentSelection.length}条数据吗？`, {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const ids = this.selectionIds.join(",");
|
this.deleteByIdsAndRender(ids);
|
});
|
|
},
|
handleExport() {
|
this.$confirm('确定导出所有数据吗？', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const {leaveType, range} = this.searchParams;
|
const params = {
|
leaveType,
|
"params[beginApplyTime]": (range && range[0]) || "",
|
"params[endApplyTime]": (range && range[1]) || "",
|
isAsc: "asc"
|
};
|
exportLeave(params)
|
});
|
},
|
handleSelectionChange(selection) {
|
this.currentSelection = selection;
|
},
|
getLeaveApplyListAndRender(params) {
|
const {leaveType, range, pageSize = 10, pageNum = 1} = params;
|
getLeaveApplyList({
|
pageSize,
|
pageNum,
|
isAsc: "asc",
|
leaveType,
|
"params[beginApplyTime]": (range && range[0]) || "",
|
"params[endApplyTime]": (range && range[1]) || ""
|
}).then(res => {
|
this.responseData = res;
|
});
|
},
|
handleAddLeave() {
|
addLeave(this.form).then(res => {
|
this.$message.success("添加成功!");
|
this.dialogVisible = false;
|
this.getLeaveApplyListAndRender(this.searchParams);
|
});
|
},
|
search() {
|
this.getLeaveApplyListAndRender(this.searchParams);
|
},
|
reset() {
|
this.searchParams.leaveType = "";
|
this.searchParams.range = [];
|
this.getLeaveApplyListAndRender(this.searchParams);
|
},
|
handleDelete(index, row) {
|
this.$confirm('确定删除吗？', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const {id} = row;
|
this.deleteByIdsAndRender(id)
|
});
|
},
|
deleteByIdsAndRender(ids) {
|
deleteLeave({
|
ids
|
}).then(() => {
|
this.$message.error("删除成功!")
|
this.getLeaveApplyListAndRender(this.searchParams);
|
})
|
},
|
handlePageChange({pageNum, pageSize}) {
|
this.searchParams.pageNum = pageNum;
|
this.searchParams.pageSize = pageSize;
|
this.getLeaveApplyListAndRender(this.searchParams);
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.search-bar {
|
display: flex;
|
margin-top: 8px;
|
margin-left: 8px;
|
}
|
.search-bar > *{
|
margin-right: 8px;
|
}
|
.search-bar .el-input {
|
display: inline-block;
|
width: 300px;
|
margin-right: 10px;
|
}
|
.search-bar label {
|
font-size: 14px;
|
color: #606266;
|
margin-right: 8px;
|
}
|
</style>
|
