|
@@ -4,20 +4,13 @@
|
|
@keyup.enter="refreshList()" @submit.prevent>
|
|
@keyup.enter="refreshList()" @submit.prevent>
|
|
<!-- 搜索框-->
|
|
<!-- 搜索框-->
|
|
<el-form-item prop="deptId" label="所属部门:">
|
|
<el-form-item prop="deptId" label="所属部门:">
|
|
- <el-tree-select @change="handleChange" v-model="searchForm.deptId" lazy :load="load" node-key="deptId"
|
|
|
|
- :props="props" :data="deptList" check-strictly :render-after-expand="false" check-on-click-node
|
|
|
|
- style="width: 240px" />
|
|
|
|
|
|
+ <el-tree-select style="width: 100%;" v-model="searchForm.deptId" node-key="deptId" :props="props"
|
|
|
|
+ default-expand-all :data="deptList" check-strictly show-checkbox check-on-click-node />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="工作时间" prop="workDates">
|
|
|
|
+ <el-date-picker style="width:50%;" v-model="searchForm.workDates" type="datetimerange"
|
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期" @change="handleDateChange" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="工作时间" prop="workDates">
|
|
|
|
- <el-date-picker
|
|
|
|
- style="width:50%;"
|
|
|
|
- v-model="searchForm.workDates"
|
|
|
|
- type="datetimerange"
|
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
- placeholder="请选择日期"
|
|
|
|
- @change="handleDateChange"
|
|
|
|
- />
|
|
|
|
- </el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
|
|
<el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
|
|
<el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
|
|
<el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
|
|
@@ -47,63 +40,67 @@
|
|
</vxe-column>
|
|
</vxe-column>
|
|
<vxe-column field="requiredAttDays" title="应出勤天数(天)">
|
|
<vxe-column field="requiredAttDays" title="应出勤天数(天)">
|
|
</vxe-column>
|
|
</vxe-column>
|
|
- <vxe-column field="attDays" title="出勤天数(天)">
|
|
|
|
- </vxe-column>
|
|
|
|
- <vxe-column field="restDays" title="休息天数(天)">
|
|
|
|
- </vxe-column>
|
|
|
|
- <vxe-column field="lateTimes" title="迟到次数(次)">
|
|
|
|
- </vxe-column>
|
|
|
|
|
|
+ <vxe-column field="attDays" title="出勤天数(天)">
|
|
|
|
+ </vxe-column>
|
|
|
|
+ <vxe-column field="restDays" title="休息天数(天)">
|
|
|
|
+ </vxe-column>
|
|
|
|
+ <vxe-column field="lateTimes" title="迟到次数(次)">
|
|
|
|
+ </vxe-column>
|
|
<vxe-column fixed="right" align="center" width="320" title="操作">
|
|
<vxe-column fixed="right" align="center" width="320" title="操作">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
-<!-- <el-button type="success" text @click="handleAdd(scope.row)">打卡</el-button>-->
|
|
|
|
|
|
+ <!-- <el-button type="success" text @click="handleAdd(scope.row)">打卡</el-button> -->
|
|
|
|
+ <el-button type="success" text @click="edit(scope.row.userid)">修改基本信息</el-button>
|
|
<el-button type="success" text @click="attendance(scope.row)">考勤统计</el-button>
|
|
<el-button type="success" text @click="attendance(scope.row)">考勤统计</el-button>
|
|
</template>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</vxe-table>
|
|
<vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
|
|
<vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
|
|
:total="tablePage.total" :page-sizes="[
|
|
:total="tablePage.total" :page-sizes="[
|
|
- 10,
|
|
|
|
- 20,
|
|
|
|
- 100,
|
|
|
|
- 1000,
|
|
|
|
- { label: '全量数据', value: 1000000 },
|
|
|
|
- ]" :layouts="[
|
|
|
|
- 'PrevPage',
|
|
|
|
- 'JumpNumber',
|
|
|
|
- 'NextPage',
|
|
|
|
- 'FullJump',
|
|
|
|
- 'Sizes',
|
|
|
|
- 'Total',
|
|
|
|
- ]" @page-change="currentChangeHandle">
|
|
|
|
|
|
+ 10,
|
|
|
|
+ 20,
|
|
|
|
+ 100,
|
|
|
|
+ 1000,
|
|
|
|
+ { label: '全量数据', value: 1000000 },
|
|
|
|
+ ]" :layouts="[
|
|
|
|
+ 'PrevPage',
|
|
|
|
+ 'JumpNumber',
|
|
|
|
+ 'NextPage',
|
|
|
|
+ 'FullJump',
|
|
|
|
+ 'Sizes',
|
|
|
|
+ 'Total',
|
|
|
|
+ ]" @page-change="currentChangeHandle">
|
|
</vxe-pager>
|
|
</vxe-pager>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<PunchCardListDia ref="punchCardListDia"></PunchCardListDia>
|
|
<PunchCardListDia ref="punchCardListDia"></PunchCardListDia>
|
|
<AttendanceListDia ref="attendanceListDia"></AttendanceListDia>
|
|
<AttendanceListDia ref="attendanceListDia"></AttendanceListDia>
|
|
|
|
+ <UserAddForm ref="userAddForm"></UserAddForm>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import ddService from "@/api/test/dd/dd.js"
|
|
import ddService from "@/api/test/dd/dd.js"
|
|
import PunchCardListDia from "./PunchCardListDia";
|
|
import PunchCardListDia from "./PunchCardListDia";
|
|
|
|
+import UserAddForm from "./UserAddForm";
|
|
import AttendanceListDia from "./AttendanceListDia";
|
|
import AttendanceListDia from "./AttendanceListDia";
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
PunchCardListDia,
|
|
PunchCardListDia,
|
|
- AttendanceListDia
|
|
|
|
|
|
+ AttendanceListDia,
|
|
|
|
+ UserAddForm
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
props: {
|
|
props: {
|
|
- isLeaf: 'isLeaf',
|
|
|
|
label: 'name',
|
|
label: 'name',
|
|
|
|
+ chindren: 'children'
|
|
},
|
|
},
|
|
url: "",
|
|
url: "",
|
|
showViewer: false,
|
|
showViewer: false,
|
|
searchVisible: true,
|
|
searchVisible: true,
|
|
searchForm: {
|
|
searchForm: {
|
|
deptId: null,
|
|
deptId: null,
|
|
- workDates:[]
|
|
|
|
|
|
+ workDates: []
|
|
},
|
|
},
|
|
dataList: [],
|
|
dataList: [],
|
|
deptList: [],
|
|
deptList: [],
|
|
@@ -133,40 +130,53 @@ export default {
|
|
$table.connect($toolbar);
|
|
$table.connect($toolbar);
|
|
});
|
|
});
|
|
this.loading = true
|
|
this.loading = true
|
|
- ddService.deptList().then(res => {
|
|
|
|
- res.result.unshift({
|
|
|
|
|
|
+ ddService.deptList(1).then(res => {
|
|
|
|
+ res.unshift({
|
|
deptId: 1,
|
|
deptId: 1,
|
|
- name: "根部门",
|
|
|
|
- isLeaf: true
|
|
|
|
|
|
+ name: '顶级部门节点',
|
|
|
|
+ parentId: 0
|
|
})
|
|
})
|
|
- this.deptList = res.result
|
|
|
|
- this.searchForm.deptId = 1
|
|
|
|
- this.refreshList();
|
|
|
|
|
|
+ this.deptList = this.buildTree(res)
|
|
})
|
|
})
|
|
|
|
+ this.searchForm.deptId = 1
|
|
|
|
+ this.refreshList();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ buildTree(data) {
|
|
|
|
+ const map = new Map();
|
|
|
|
+ const tree = [];
|
|
|
|
+ // 先把所有项存到 Map 里,并初始化 children
|
|
|
|
+ data.forEach(item => {
|
|
|
|
+ map.set(item.deptId, { ...item, children: [] });
|
|
|
|
+ });
|
|
|
|
+ // 组装树结构
|
|
|
|
+ data.forEach(item => {
|
|
|
|
+ if (item.parentId) {
|
|
|
|
+ // 找到父级并添加到 children
|
|
|
|
+ const parent = map.get(item.parentId);
|
|
|
|
+ if (parent) {
|
|
|
|
+ parent.children.push(map.get(item.deptId));
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ // parentId 为空的就是根节点
|
|
|
|
+ tree.push(map.get(item.deptId));
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ return tree;
|
|
|
|
+ },
|
|
handleChange(value) {
|
|
handleChange(value) {
|
|
console.log(value);
|
|
console.log(value);
|
|
this.searchForm.deptId = value
|
|
this.searchForm.deptId = value
|
|
this.refreshList()
|
|
this.refreshList()
|
|
},
|
|
},
|
|
- load(node, resolve) {
|
|
|
|
- console.log(node);
|
|
|
|
- ddService.deptList({
|
|
|
|
- deptId: node.data.deptId
|
|
|
|
- }).then(res => {
|
|
|
|
- resolve(res.result)
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
handleAdd(row) {
|
|
handleAdd(row) {
|
|
- console.log('row', row)
|
|
|
|
this.$refs.punchCardListDia.init(row.userid, row.name, row.title)
|
|
this.$refs.punchCardListDia.init(row.userid, row.name, row.title)
|
|
},
|
|
},
|
|
- //考勤统计
|
|
|
|
- attendance(row){
|
|
|
|
- this.$refs.attendanceListDia.init(row.userid, row.name, row.title);
|
|
|
|
- },
|
|
|
|
|
|
+ //考勤统计
|
|
|
|
+ attendance(row) {
|
|
|
|
+ this.$refs.attendanceListDia.init(row.userid, row.name, row.title);
|
|
|
|
+ },
|
|
handleClick(tab, event) {
|
|
handleClick(tab, event) {
|
|
console.log(tab.props.name);
|
|
console.log(tab.props.name);
|
|
this.getUserList(tab.props.name)
|
|
this.getUserList(tab.props.name)
|
|
@@ -185,12 +195,11 @@ export default {
|
|
this.loading = true;
|
|
this.loading = true;
|
|
ddService
|
|
ddService
|
|
.list({
|
|
.list({
|
|
- deptId: this.searchForm.deptId,
|
|
|
|
- dateFrom:this.searchForm.workDates[0],
|
|
|
|
- dateTo:this.searchForm.workDates[1]
|
|
|
|
|
|
+ deptId: this.searchForm.deptId ?? 1,
|
|
|
|
+ dateFrom: this.searchForm.workDates[0],
|
|
|
|
+ dateTo: this.searchForm.workDates[1]
|
|
})
|
|
})
|
|
.then((data) => {
|
|
.then((data) => {
|
|
- console.log('data',data)
|
|
|
|
this.userDataList = data;
|
|
this.userDataList = data;
|
|
// this.tablePage.total = data.total;
|
|
// this.tablePage.total = data.total;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
@@ -216,12 +225,13 @@ export default {
|
|
},
|
|
},
|
|
// 新增
|
|
// 新增
|
|
add() {
|
|
add() {
|
|
- this.$refs.workCollectAccessoryRef.init("add")
|
|
|
|
|
|
+ this.$refs.userAddForm.deptList = this.deptList
|
|
|
|
+ this.$refs.userAddForm.init("add")
|
|
},
|
|
},
|
|
// 编辑
|
|
// 编辑
|
|
edit(id) {
|
|
edit(id) {
|
|
- console.log(id);
|
|
|
|
- this.$refs.workCollectAccessoryRef.init("edit", id)
|
|
|
|
|
|
+ this.$refs.userAddForm.deptList = this.deptList
|
|
|
|
+ this.$refs.userAddForm.init("edit", id)
|
|
},
|
|
},
|
|
// 查看
|
|
// 查看
|
|
view(id) {
|
|
view(id) {
|
|
@@ -262,21 +272,21 @@ export default {
|
|
this.searchForm.workDates = []
|
|
this.searchForm.workDates = []
|
|
this.refreshList();
|
|
this.refreshList();
|
|
},
|
|
},
|
|
- handleDateChange(val) {
|
|
|
|
- if (val && val[0] && val[1]) {
|
|
|
|
- const startDate = new Date(val[0]);
|
|
|
|
- const endDate = new Date(val[1]);
|
|
|
|
- const diffDays = (endDate - startDate) / (1000 * 3600 * 24); // 计算日期差距
|
|
|
|
|
|
+ handleDateChange(val) {
|
|
|
|
+ if (val && val[0] && val[1]) {
|
|
|
|
+ const startDate = new Date(val[0]);
|
|
|
|
+ const endDate = new Date(val[1]);
|
|
|
|
+ const diffDays = (endDate - startDate) / (1000 * 3600 * 24); // 计算日期差距
|
|
|
|
|
|
- if (diffDays > 31) {
|
|
|
|
- this.$message.warning('选择的时间范围不能超过31天');
|
|
|
|
- // 限制选中的日期范围为31天内
|
|
|
|
- const newEndDate = new Date(startDate);
|
|
|
|
- newEndDate.setDate(startDate.getDate() + 31);
|
|
|
|
- this.searchForm.workDates = [startDate, newEndDate];
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ if (diffDays > 31) {
|
|
|
|
+ this.$message.warning('选择的时间范围不能超过31天');
|
|
|
|
+ // 限制选中的日期范围为31天内
|
|
|
|
+ const newEndDate = new Date(startDate);
|
|
|
|
+ newEndDate.setDate(startDate.getDate() + 31);
|
|
|
|
+ this.searchForm.workDates = [startDate, newEndDate];
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|