zhgdyun/src/views/projectFront/laborManage/timeSheet/workHoursAbnormalityTable.vue
2025-06-25 17:08:50 +08:00

882 lines
22 KiB
Vue

<template>
<!-- 检查部位 -->
<div class="container_main">
<div class="checkPoint">
<div class="header_title">
<el-form size="medium" :model="queryParams" ref="queryForm" :inline="true">
<el-form-item label="人员类型" prop="personType">
<el-select clearable v-model="queryParams.personType" placeholder="请选择">
<el-option
v-for="item in personTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属企业" prop="enterpriseId">
<el-select
filterable
clearable
@change="onEnterpriseChange"
v-model="queryParams.enterpriseId"
placeholder="请选择"
>
<el-option
v-for="item in enterpriseList"
:key="item.id"
:label="item.enterpriseName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属班组" prop="teamId">
<el-select
filterable
clearable
v-model="queryParams.teamId"
placeholder="请选择"
>
<el-option
v-for="item in teamOptions"
:key="item.id"
:label="item.teamName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属部门" prop="departmentId">
<el-select
filterable
clearable
v-model="queryParams.departmentId"
placeholder="请选择"
>
<el-option
v-for="item in departmentOptions"
:key="item.id"
:label="item.departmentName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名" prop="workerName">
<el-input v-model="queryParams.workerName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="月份" prop="month">
<el-date-picker
v-model="queryParams.month"
type="month"
value-format="yyyy-MM"
placeholder="月份"
>
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="日期范围" prop="effectiveTime">
<el-date-picker
:picker-options="pickerOptions"
v-model="queryParams.effectiveTime"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:clearable="false"
>
</el-date-picker>
</el-form-item> -->
<el-form-item label="工时范围" prop="effectiveTime">
<div class="hourval">
<el-input-number
:controls="false"
v-model="queryParams.hourVal_begin"
controls-position="right"
:min="0"
:max="queryParams.hourVal_end ? queryParams.hourVal_end : 100"
></el-input-number>
<p>-</p>
<el-input-number
:controls="false"
v-model="queryParams.hourVal_end"
controls-position="right"
:min="queryParams.hourVal_begin ? queryParams.hourVal_begin : 0"
:max="100"
></el-input-number>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="handleQuery">查询</el-button>
<el-button type="warning" plain @click="handleRefresh">刷新</el-button>
<el-button @click="handleCommandExport(1)" type="primary" plain
>导出</el-button
>
</el-form-item>
</el-form>
</div>
<div class="table-header">
{{ $store.state.currentProDetail.projectName }}项目异常工时统计表
</div>
<el-table
ref="multipleTable"
:data="tableData"
row-key="id"
:height="450"
class="new-tables"
border
>
<!-- <el-table-column type="selection" align="center" width="55"></el-table-column> -->
<el-table-column
show-overflow-tooltip
align="center"
prop="workerName"
label="姓名"
>
<template slot-scope="scope">
{{ scope.row.workerName ? scope.row.workerName : "--" }}
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="enterpriseName"
label="单位"
>
<template slot-scope="scope">
{{ scope.row.enterpriseName ? scope.row.enterpriseName : "--" }}
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="personType"
label="人员类别"
>
<template v-slot="{ row }">
{{
row.personType == 1 ? "施工人员" : row.personType == 2 ? "管理人员" : "--"
}}
</template>
</el-table-column>
<el-table-column prop="date" show-overflow-tooltip label="日期" align="center">
<template slot-scope="scope">
{{ scope.row.date ? scope.row.date : "--" }}
</template>
</el-table-column>
<el-table-column
prop="inTimeList"
show-overflow-tooltip
label="进场记录"
align="center"
>
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.inTimeList" :key="index">
{{ item ? item : "--" }}
</div>
<span v-if="scope.row.inTimeList.length == 0">--</span>
</template>
</el-table-column>
<el-table-column
prop="outTimeList"
show-overflow-tooltip
label="出场记录"
align="center"
>
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.outTimeList" :key="index">
{{ item ? item : "--" }}
</div>
<span v-if="scope.row.outTimeList.length == 0">--</span>
</template>
</el-table-column>
<el-table-column
prop="totalHour"
show-overflow-tooltip
label="合计"
align="center"
>
<template slot-scope="scope">
{{ scope.row.totalHour }}
</template>
</el-table-column>
</el-table>
<pagination
:total="Number(total)"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getQualityRegionList"
:pageSizes="[...$store.state.PAGESIZRS, 100, 200, 500, 1000]"
layout="total,sizes, prev, pager, next, jumper"
/>
</div>
</div>
</template>
<script>
import { getExceptionHourStatisticsListApi } from "@/assets/js/api/attendanceManage";
import {
getEnterpriseInfoList,
selectHierarchyEnterpriseListApi,
} from "@/assets/js/api/laborPerson";
import { teamList, departmentList } from "@/assets/js/api/laborManagement/payoff";
import dayjs from "dayjs";
export default {
name: "workHoursStatisticsTable",
data() {
return {
projectSn: "",
tableData: [],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
personType: "",
enterpriseId: "",
teamId: "",
departmentId: "",
workerName: "",
month: "",
effectiveTime: [],
hourVal_begin: "",
hourVal_end: "",
},
total: 0,
personTypeList: [
{
label: "施工人员",
value: 1,
},
{
label: "管理人员",
value: 2,
},
],
enterpriseList: [],
teamOptions: [],
departmentOptions: [],
showTime: 31,
systemInfo: {
platformName: "",
},
};
},
created() {
if (localStorage.getItem("systemInfo")) {
this.systemInfo = JSON.parse(localStorage.getItem("systemInfo"));
}
this.projectSn = this.$store.state.projectSn;
this.queryParams.month = dayjs().format("YYYY-MM");
this.getQualityRegionList();
this.getEnterpriseListFn();
// this.getTeamList();
// this.getDepartmentList();
},
methods: {
// 获取企业列表
getEnterpriseListFn() {
let that = this;
let reqeustData = {
projectSn: this.$store.state.projectSn,
};
getEnterpriseInfoList(reqeustData).then((res) => {
that.enterpriseList = res.result;
});
},
onEnterpriseChange() {
this.queryParams.teamId = "";
this.queryParams.departmentId = "";
this.teamOptions = [];
this.departmentOptions = [];
if(this.queryParams.enterpriseId) {
this.getTeamList();
this.getDepartmentList();
}
},
/** 查询班组列表 */
getTeamList() {
const params = {
enterpriseId: this.queryParams.enterpriseId,
projectSn: this.$store.state.projectSn,
};
teamList(params).then((res) => {
console.log("查询班组列表: ", res);
this.teamOptions = res.result.list;
});
},
/** 查询部门列表 */
getDepartmentList() {
const params = {
enterpriseId: this.queryParams.enterpriseId,
projectSn: this.$store.state.projectSn,
};
departmentList(params).then((res) => {
console.log("查询部门列表: ", res);
this.departmentOptions = res.result.list;
});
},
handleCommandExport(command) {
const objFn = {
1: "xmgl/workerDailyAttendanceStatisticsV2/exportExceptionHourStatisticsXls",
};
if (command == 1) {
const requestData = {
projectSn: this.projectSn,
month: this.queryParams.month,
personType: this.queryParams.personType,
enterpriseId: this.queryParams.enterpriseId,
teamId: this.queryParams.teamId,
departmentId: this.queryParams.departmentId,
workerName: this.queryParams.workerName,
hourVal_begin: this.queryParams.hourVal_begin,
hourVal_end: this.queryParams.hourVal_end,
};
this.exportDownload(requestData, objFn[command], "异常工时统计表.xlsx");
}
},
exportDownload(requestData, url, name) {
fetch(this.$http.defaults.baseURL + url, {
method: "post",
headers: {
Authorization: this.$store.state.userInfo.token,
"Content-Type": "application/json", // 设置请求头的内容类型为JSON
},
body: JSON.stringify(requestData),
})
.then((response) => {
// 处理响应
if (!response.ok) {
throw new Error("导出失败");
}
return response.blob();
})
.then((blob) => {
console.log("导出成功");
// 创建一个下载链接
const url = window.URL.createObjectURL(blob);
// 创建一个<a>元素
const link = document.createElement("a");
link.href = url;
link.download = name; // 指定下载文件的文件名
// 模拟点击下载链接
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放URL对象
window.URL.revokeObjectURL(url);
// 处理导出的文件
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
})
.catch((error) => {
// 处理错误
console.error(error);
});
},
handleQuery() {
this.queryParams.pageNo = 1;
this.getQualityRegionList();
},
handleRefresh() {
this.queryParams.pageNo = 1;
this.queryParams.personType = "";
this.queryParams.enterpriseId = "";
this.queryParams.teamId = "";
this.queryParams.departmentId = "";
this.queryParams.workerName = "";
this.queryParams.hourVal_begin = "";
this.queryParams.hourVal_end = "";
this.queryParams.month = dayjs().format("YYYY-MM");
this.queryParams.effectiveTime = [
dayjs().startOf("month").format("YYYY-MM-DD"),
dayjs().endOf("month").format("YYYY-MM-DD"),
];
this.getQualityRegionList();
},
// 获取列表信息
getQualityRegionList() {
let data = {
projectSn: this.projectSn,
month: this.queryParams.month,
pageNo: this.queryParams.pageNo,
pageSize: this.queryParams.pageSize,
personType: this.queryParams.personType,
enterpriseId: this.queryParams.enterpriseId,
teamId: this.queryParams.teamId,
departmentId: this.queryParams.departmentId,
workerName: this.queryParams.workerName,
hourVal_begin: this.queryParams.hourVal_begin,
hourVal_end: this.queryParams.hourVal_end,
};
// getQualityRegionListApi
getExceptionHourStatisticsListApi(data).then((res) => {
console.log(res);
if (res.code == 200) {
this.tableData = res.result.records.map((item) => {
return {
...item,
outTimeList: item.outTimeList instanceof Array ? item.outTimeList : [],
inTimeList: item.inTimeList instanceof Array ? item.inTimeList : [],
};
});
this.total = res.result.total;
}
});
},
},
};
</script>
<style lang="less" scoped>
.hourval {
display: flex;
align-items: center;
justify-content: space-between;
> p {
margin: 0 8px;
}
.el-input-number {
width: 85px;
}
}
.table-header {
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
font-size: 32px;
color: #333333;
}
.new-tables {
width: calc(100% - 32px);
margin: 20px 16px 0;
font-size: 15px;
border-color: #e9e9e9;
/deep/ .el-table__cell {
border-color: #e9e9e9 !important;
}
}
:deep(.el-dialog__body) {
padding: 10px 20px 20px;
.dialog_content {
padding-left: 0;
padding-right: 0pc;
}
.form_box {
margin: 0 65px;
color: #272d45;
font-size: 14px;
> div {
margin-top: 6px;
}
}
}
.riskpoint-dialog {
display: flex;
justify-content: space-between;
height: 420px;
.unselected_point {
width: 280px;
.treeBox {
margin-top: 12px;
height: calc(100% - 12px - 24px - 16px);
// background-color: rgba(216, 216, 216, 0.2);
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 12px 6px;
position: relative;
:deep(.el-checkbox.is-disabled) {
display: none;
}
.treeStyle();
}
}
.selected_point {
width: 280px;
.selected_point_scroll {
margin-top: 12px;
height: calc(100% - 2px - 24px);
max-height: initial;
padding: 12px 6px;
border: 1px solid #e4e7ed;
border-radius: 4px;
.risk_point {
width: 100%;
margin-top: 6px;
> div {
justify-content: space-between;
display: flex;
align-items: center;
}
}
}
}
}
.source-danger {
.pagination-container {
padding: 16px 0 0 0;
}
}
.tables {
min-height: initial;
}
.check_box {
display: flex;
font-size: 14px;
> .el-button {
padding: 0;
margin-left: 10px;
}
> .el-button:first-child {
color: #eb4047;
}
}
.flex {
display: flex;
}
.flex2 {
display: flex;
align-items: center;
}
.container_main {
height: calc(100% - 49px);
}
.checkPoint {
box-sizing: border-box;
position: relative;
height: 100%;
.header_title {
padding: 20px 20px 0 20px;
:deep(.el-cascader__search-input) {
min-width: 10px;
}
}
:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
color: #5181f6;
background-color: transparent;
border-color: #d7dbe9;
box-shadow: none;
}
.pagination-container {
padding: 0;
width: 100%;
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
}
.el-form-item {
margin-bottom: 20px;
margin-right: 30px;
}
.el-form-item:last-child {
margin-right: 0;
}
.el-button + .el-button {
margin-left: 20px;
}
.el-radio {
margin-right: 20px;
}
.el-select,
.el-input {
width: 192px;
height: 34px;
}
.el-date-editor {
width: 247px;
height: 34px;
}
.radio-group {
/deep/ .el-form-item__content {
display: flex;
}
/deep/ .el-radio-group {
height: 34px;
}
/deep/ .el-radio-button__inner {
height: 34px;
color: #b2b8c2;
}
}
.edit {
width: 100%;
justify-content: center;
cursor: pointer;
img {
margin-right: 5px;
}
}
}
.treeStyle() {
/deep/.el-tree {
font-size: 15px;
width: 100%;
background-color: transparent;
.el-tree-node {
white-space: normal;
&:focus > .el-tree-node__content {
background-color: transparent;
}
&.is-current > .el-tree-node__content {
background-color: rgba(81, 129, 246, 0.14);
color: #5181f6;
}
}
.el-tree-node__content {
// height: 32px;
padding: 7px 0;
height: auto;
line-height: 16px;
position: relative;
// margin-bottom: 7px;
&:hover {
background-color: rgba(81, 129, 246, 0.14);
color: #5181f6;
}
.videoName {
font-size: 14px;
}
.projectName {
font-size: 14px;
width: calc(100% - 55px);
display: inline-block;
}
.companyName2 {
font-size: 16px;
font-weight: bold;
display: inline-block;
width: 192px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.el-tree-node__expand-icon {
font-size: 16px;
padding: 0 6px;
&.is-leaf {
color: transparent !important;
}
}
.treeTitle {
background-color: #f7f7f7;
margin-bottom: 10px;
}
}
}
.risk_detail_main_title {
font-size: 16px;
font-weight: bold;
color: #4d4d4d;
margin-bottom: 20px;
}
.risk_detail_main {
.detail_flex {
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
}
.detail_table2 {
width: calc(100% - 320px) !important;
:deep(.el-input-number) {
width: 320px !important;
.el-input__inner {
width: 320px !important;
}
}
}
.detail_table3 {
width: calc(100% - 320px - 120px) !important;
.el-select,
.el-input,
.box1 {
width: 440px !important;
}
}
.detail_table {
width: 100%;
> div:first-child {
display: flex;
align-items: center;
padding: 10px 17px;
background-color: #fafafa;
margin-bottom: 10px;
justify-content: space-between;
> .box1 {
width: 320px;
}
> .box1:last-child {
text-align: center;
}
> .box2 {
margin: 0 6px;
}
}
> div:last-child {
display: flex;
justify-content: space-between;
padding: 10px 17px;
border: 1px dashed #e4e7ed;
.el-select,
.el-input {
width: 320px;
height: 34px;
:deep(.el-input__inner) {
height: 34px;
line-height: 34px;
}
}
}
}
.detail_table1 {
display: flex;
padding: 10px 17px;
border: 1px dashed #e4e7ed;
.el-radio-group {
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
.el-radio:nth-child(n + 3) {
margin-top: 10px;
}
.el-radio {
width: 604px;
:deep(.el-input-number) {
width: 320px !important;
height: 34px !important;
.el-input__inner {
width: 320px !important;
height: 34px !important;
}
}
:deep(.el-radio__label) {
span {
width: 70px;
display: inline-block;
}
> span:last-child {
margin: 0 20px;
color: #aaabb6;
}
}
}
}
}
}
.detail_table4 {
margin: 16px 0;
.detail_table4_title {
margin-bottom: 16px;
}
table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
font-size: 14px;
}
th,
td {
height: 30px;
border: 1px solid #ccc;
text-align: center;
min-width: 80px;
}
thead {
background-color: #f2f2f2;
}
}
.risk_detail_top {
width: 76%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
.el-input,
.el-select,
.el-date-editor,
.el-input-number,
.el-textarea,
.risk_detail_top_box {
width: 320px;
height: 34px;
}
}
.detailBox {
.grid-content {
overflow: hidden;
margin-bottom: 10px;
.label {
float: left;
width: 80px;
text-align: right;
color: #a2a4af;
}
.value {
float: left;
width: calc(80% - 80px);
margin-left: 10px;
// text-overflow: ellipsis;
// overflow: hidden;
// white-space: nowrap;
}
}
}
.btn-box {
height: 50px;
margin-top: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.inputStyle {
::v-deep .el-input__inner {
height: 200px;
}
}
.radiusD {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 10px;
margin-top: 3px;
margin: 2px 0px;
}
.headerLeft {
height: 35px;
background: #ededed;
font-size: 16px;
font-weight: 800;
color: #616266;
line-height: 30px;
padding: 0 10px;
margin-bottom: 20px;
}
.riskcolor {
color: white;
padding: 4px 6px;
width: 64px;
}
.riskcolor_table {
padding: 1px 6px;
display: inline-block;
}
.riskcolor1 {
background-color: #eb4047;
}
.riskcolor2 {
background-color: #ffbf00;
}
.riskcolor3 {
background-color: #ffff00;
}
.riskcolor4 {
background-color: #006fbf;
}
</style>