增加考勤概览
This commit is contained in:
BianLzhaoMin
parent
e084dea4f4
commit
acc3e4d6df
|
|
@ -16,6 +16,15 @@ export const getProjectListAPI = (data) => {
|
|||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取考勤概览列表
|
||||
export const getAttOverviewListAPI = (data) => {
|
||||
return request({
|
||||
url: '/workerLight/getWorkerAttByMonth',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
// 获取分包班组列表
|
||||
export const getSubTeamListAPI = (data) => {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div class="section-container">
|
||||
<div class="table-container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
style="margin-top: 20px; padding-left: 20px; display: flex"
|
||||
>
|
||||
<el-form-item label="月份" prop="month">
|
||||
<el-date-picker
|
||||
type="month"
|
||||
style="width: 200px"
|
||||
value-format="yyyy-MM"
|
||||
v-model="queryParams.month"
|
||||
placeholder="请选择月份"
|
||||
@change="handleMonthChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
@click="resetQuery"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
:data="tableList"
|
||||
:header-cell-style="tableHeaderStyle"
|
||||
:cell-style="tableCellStyle"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="item.prop"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
show-overflow-tooltip
|
||||
fixed="left"
|
||||
v-for="item in columnData"
|
||||
/>
|
||||
<el-table-column label="出勤统计">
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="j"
|
||||
:label="j.toString()"
|
||||
width="50"
|
||||
v-for="j in attendanceDays"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<span
|
||||
v-if="
|
||||
row.attendanceDayList &&
|
||||
row.attendanceDayList[j - 1]
|
||||
"
|
||||
>
|
||||
{{ row.attendanceDayList[j - 1].isAtt }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="出勤天数"
|
||||
fixed="right"
|
||||
prop="attendanceNum"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAttOverviewListAPI } from '@/api/construction-person/attendance-manage/attendance-count'
|
||||
|
||||
export default {
|
||||
name: 'AttOverview',
|
||||
props: {
|
||||
proId: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const currentMonth = new Date().toISOString().slice(0, 7)
|
||||
return {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
month: currentMonth,
|
||||
proId: this.proId || '',
|
||||
},
|
||||
tableList: [],
|
||||
columnData: [
|
||||
{
|
||||
label: '项目名称',
|
||||
prop: 'proName',
|
||||
},
|
||||
{
|
||||
label: '分包队伍全称',
|
||||
prop: 'subName',
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'userName',
|
||||
},
|
||||
{
|
||||
label: '身份证号',
|
||||
prop: 'idCard',
|
||||
},
|
||||
{
|
||||
label: '职务/工种',
|
||||
prop: 'workName',
|
||||
},
|
||||
],
|
||||
attendanceDays: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
proId: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.queryParams.proId = newVal
|
||||
this.getAttOverviewList()
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCurrentMonthDays()
|
||||
this.getAttOverviewList()
|
||||
},
|
||||
methods: {
|
||||
getCurrentMonthDays() {
|
||||
if (!this.queryParams.month) {
|
||||
this.attendanceDays = 0
|
||||
return
|
||||
}
|
||||
const [year, month] = this.queryParams.month.split('-')
|
||||
this.attendanceDays = new Date(
|
||||
parseInt(year),
|
||||
parseInt(month),
|
||||
0,
|
||||
).getDate()
|
||||
},
|
||||
tableHeaderStyle() {
|
||||
return {
|
||||
backgroundColor: '#f5f7fa',
|
||||
color: '#606266',
|
||||
fontWeight: '500',
|
||||
fontSize: '14px',
|
||||
textAlign: 'center',
|
||||
}
|
||||
},
|
||||
tableCellStyle() {
|
||||
return {
|
||||
fontSize: '14px',
|
||||
color: '#606266',
|
||||
padding: '12px 0',
|
||||
}
|
||||
},
|
||||
handleQuery() {
|
||||
this.getAttOverviewList()
|
||||
},
|
||||
resetQuery() {
|
||||
const currentMonth = new Date().toISOString().slice(0, 7)
|
||||
this.queryParams.month = currentMonth
|
||||
this.queryParams.proId = this.proId || ''
|
||||
this.getCurrentMonthDays()
|
||||
this.getAttOverviewList()
|
||||
},
|
||||
handleMonthChange() {
|
||||
this.getCurrentMonthDays()
|
||||
this.getAttOverviewList()
|
||||
},
|
||||
async getAttOverviewList() {
|
||||
if (!this.queryParams.proId) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getAttOverviewListAPI(this.queryParams)
|
||||
if (res.code === 200) {
|
||||
this.tableList = (res.data || []).map((item) => {
|
||||
try {
|
||||
return {
|
||||
...item,
|
||||
attendanceDayList: item.attendanceDay
|
||||
? JSON.parse(item.attendanceDay)
|
||||
: [],
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
...item,
|
||||
attendanceDayList: [],
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取考勤概览列表失败:', error)
|
||||
this.tableList = []
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section-container {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.table-container {
|
||||
padding: 0;
|
||||
|
||||
::v-deep .el-table {
|
||||
border: none;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
.el-table__header {
|
||||
th {
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
.el-table__body {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@ export const columnsList = [
|
|||
export const dialogConfig = {
|
||||
outerVisible: false,
|
||||
outerTitle: '工程',
|
||||
outerWidth: '80%',
|
||||
outerWidth: '85%',
|
||||
minHeight: '90vh',
|
||||
maxHeight: '90vh',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- 施工人员 ---- 考勤管理 ---- 考勤统计第一级弹框 工程 -->
|
||||
<div class="app-container">
|
||||
<TableModel
|
||||
:showOperation="false"
|
||||
:showOperation="true"
|
||||
:showRightTools="false"
|
||||
ref="projectTableRef"
|
||||
:formLabel="projectFormLabel"
|
||||
|
|
@ -42,6 +42,18 @@
|
|||
<template v-for="item in slots" :slot="item" slot-scope="{ data }">
|
||||
<span :key="item">{{ data[item] ? data[item] : 0 }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 考勤概览 -->
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-view"
|
||||
@click="onHandleCheckAttOverview(data)"
|
||||
>
|
||||
考勤概览
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
|
|
@ -50,7 +62,18 @@
|
|||
>
|
||||
<template slot="outerContent">
|
||||
<!-- 分包班组 -->
|
||||
<SubTeamTable :proId="proId" ref="subTeamTableRef" />
|
||||
<SubTeamTable
|
||||
:proId="proId"
|
||||
ref="subTeamTableRef"
|
||||
v-if="projectDialogConfig.outerTitle === '分包班组'"
|
||||
/>
|
||||
|
||||
<!-- 考勤概览 -->
|
||||
<AttOverview
|
||||
:proId="proId"
|
||||
ref="attOverviewRef"
|
||||
v-if="projectDialogConfig.outerTitle === '考勤概览'"
|
||||
/>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
|
|
@ -60,6 +83,7 @@
|
|||
import TableModel from '@/components/TableModel'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import SubTeamTable from './sub-team-table'
|
||||
import AttOverview from './att-overview'
|
||||
import { getProjectListAPI } from '@/api/construction-person/attendance-manage/attendance-count'
|
||||
import {
|
||||
projectFormLabel,
|
||||
|
|
@ -80,6 +104,7 @@ export default {
|
|||
TableModel,
|
||||
DialogModel,
|
||||
SubTeamTable,
|
||||
AttOverview,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -112,6 +137,7 @@ export default {
|
|||
// 点击工程 弹出分包班组弹框
|
||||
onHandleCheckProject(data) {
|
||||
this.proId = data.proId
|
||||
this.projectDialogConfig.outerTitle = '分包班组'
|
||||
this.projectDialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
|
|
@ -144,6 +170,13 @@ export default {
|
|||
|
||||
return 'primary' || ''
|
||||
},
|
||||
|
||||
// 点击考勤概览
|
||||
onHandleCheckAttOverview(data) {
|
||||
this.proId = data.proId
|
||||
this.projectDialogConfig.outerTitle = '考勤概览'
|
||||
this.projectDialogConfig.outerVisible = true
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue