378 lines
13 KiB
Vue
378 lines
13 KiB
Vue
<template>
|
|
<MyDialog v-if="show" v-model="show" width="60vw" height="65vh" class="attendance-info-dlg">
|
|
<template slot="title">
|
|
{{ title }}
|
|
</template>
|
|
<div class="head-title-tab" style="padding: 10px 0px;">
|
|
<div v-for="it in types" :key="it.value" :class="nav == it.value ? 'head-nav active' : 'head-nav'"
|
|
@click="doNav(it)">{{ it.label }}({{ getTypeCount(it) }})</div>
|
|
</div>
|
|
<el-table v-loading="loading" :data="dataList" v-if="type == 0" class="data-list">
|
|
<el-table-column label="头像" align="center">
|
|
<template #default="scope">
|
|
<el-image :src="scope.row.user.userPicture" :preview-teleported="true"
|
|
class="att-img" :preview-src-list="[scope.row.user.userPicture]"></el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="姓名" align="center" prop="user.userName" />
|
|
<el-table-column label="籍贯" align="center" prop="info.nativePlace" />
|
|
<el-table-column label="性别" align="center" prop="user.sex" />
|
|
<el-table-column label="状态" align="center" prop="enterState">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.enterState == 0" style="color: green;">在场</span>
|
|
<span v-else style="color: red">离场</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="进场日期" align="center" prop="createTime" :width="$dpi() == '1K' ? '120px' : $dpi() == '2K'?'200px':'300px'">
|
|
<template #default="scope">{{ scope.row.createTime | toDate }}</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="所属单位" align="center" prop="subDeptName" />
|
|
<el-table-column label="班组" align="center" prop="subDeptGroupName" :width="$dpi() == '1K' ? '120px' : $dpi() == '2K'?'200px':'300px'"/>
|
|
<el-table-column label="工种类型" align="center" prop="craftType">
|
|
<template #default="scope">
|
|
<dict-tag :options="types" :value="scope.row.craftType" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="工种岗位" align="center" prop="craftPost">
|
|
<template #default="scope">
|
|
<dict-tag :options="pro_craft_post" :value="scope.row.craftPost" />
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="出生日期" align="center" prop="info.birthDayStr" v-if="false" />
|
|
|
|
</el-table>
|
|
<el-table v-loading="loading" :data="dataList" v-if="type == 1" class="data-list">
|
|
<el-table-column label="进场照片" align="center" prop="inPhoto">
|
|
<template #default="scope">
|
|
<el-image v-if="scope.row.inPhoto" :src="scope.row.inPhoto" class="att-img"
|
|
:preview-teleported="true" :preview-src-list="[scope.row.inPhoto]"></el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="姓名" align="center" prop="userName" />
|
|
<el-table-column label="项目" align="center" prop="projectName" />
|
|
<el-table-column label="单位" align="center" prop="subDeptName" />
|
|
<el-table-column label="进场时间" align="center" prop="inTime" width="180">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.inTime">{{ scope.row.inTime | toTime }}</span>
|
|
<span v-else class="el-icon-close" style="color: red;font-weight: bold;"></span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="离场照片" align="center" prop="outPhoto">
|
|
<template #default="scope">
|
|
<el-image v-if="scope.row.outPhoto" :src="scope.row.outPhoto" class="att-img"
|
|
:preview-teleported="true" :preview-src-list="[scope.row.outPhoto]"></el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="离场时间" align="center" prop="outTime">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.outTime">{{ scope.row.outTime | toTime }}</span>
|
|
<span v-else class="el-icon-close" style="color: red;font-weight: bold;"></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="班组" align="center" prop="subDeptGroupName" :width="$dpi() == '1K' ? '120px' : $dpi() == '2K'?'200px':'400px'"/>
|
|
<el-table-column label="工种类型" align="center" prop="craftType">
|
|
<template #default="scope">
|
|
<dict-tag :options="types" :value="scope.row.craftType" class="dict-tag" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="工种岗位" align="center" prop="craftPost">
|
|
<template #default="scope">
|
|
<dict-tag :options="pro_craft_post" :value="scope.row.craftPost" class="dict-tag" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination layout="total,prev, pager, next" :hide-on-single-page="true"
|
|
@current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
|
|
class="bg-pagination"></el-pagination>
|
|
</MyDialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
//在岗人员
|
|
data() {
|
|
return {
|
|
show: false,
|
|
title: '在岗人员',
|
|
prjInfo: {},
|
|
types: [],
|
|
pro_craft_post: [],
|
|
nav: 1,
|
|
attendanceData: [],
|
|
type: 0,
|
|
size: 10,
|
|
index: 1,
|
|
total: 0,
|
|
dataList: [],
|
|
loading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
handleCurrentChange(n) {
|
|
this.index = n;
|
|
this.loadData();
|
|
},
|
|
showDialog(opt) {
|
|
this.prjInfo = opt.prjInfo || {};
|
|
this.type = opt.type || 0;
|
|
this.title = this.type == 0 ? "在岗人员" : "今日出勤";
|
|
this.attendanceData = opt.attendanceData || [];
|
|
this.show = true;
|
|
this.$api.dict("pro_craft_type").then(dicts => {
|
|
this.types = dicts || [];
|
|
});
|
|
this.$api.dict("pro_craft_post").then(dicts => {
|
|
this.pro_craft_post = dicts || [];
|
|
});
|
|
this.index = 1;
|
|
this.loadData();
|
|
},
|
|
loadData() {
|
|
let ajax = this.$api.detail.subdeptsUsersList;
|
|
let postData = {
|
|
pageSize: this.size,
|
|
pageNum: this.index,
|
|
craftType: this.nav,
|
|
comId: this.prjInfo.comId,
|
|
projectId: this.prjInfo.id
|
|
};
|
|
if (this.type == 1) {
|
|
ajax = this.$api.detail.attendanceUbiDataList;
|
|
postData = {
|
|
pageSize: this.size,
|
|
pageNum: this.index,
|
|
comId: this.prjInfo.comId,
|
|
projectId: this.prjInfo.id,
|
|
craftType: this.nav,
|
|
inTime: '2024-10-14'
|
|
};
|
|
}
|
|
this.loading = true;
|
|
ajax(postData).then(d => {
|
|
this.loading = false;
|
|
if (this.type == 0) {
|
|
this.dataList = (d.rows || []).map(d => {
|
|
d.info = this.$tryToJson(d.user?.userInfos || "{}")
|
|
d.user = d.user || {};
|
|
if (d.info.birthDay) {
|
|
let birthDay = this.$dt(d.info.birthDay).format("YYYY-MM-DD");
|
|
d.info.birthDayStr = birthDay;
|
|
d.info.age = this.$dt(new Date()).diff(d.info.birthDay, 'year');
|
|
}
|
|
return d;
|
|
});
|
|
} else {
|
|
this.dataList = d.rows || [];
|
|
}
|
|
this.total = d.total || 0;
|
|
});
|
|
},
|
|
doNav(n) {
|
|
this.nav = n.value;
|
|
this.index = 1;
|
|
this.loadData();
|
|
},
|
|
getTypeCount(it) {
|
|
let tmps = this.attendanceData.filter(d => d.id == it.value)
|
|
return tmps.length > 0 ? tmps[0].value : 0;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.attendance-info-dlg {
|
|
.data-list {
|
|
margin-top:10px;
|
|
th {
|
|
.cell {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
td {
|
|
.cell {
|
|
font-size: 14px;
|
|
.el-tag{
|
|
font-size:12px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-table__empty-text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-table__row {
|
|
&:nth-child(odd) {
|
|
background-size: 100% 55px;
|
|
}
|
|
|
|
td {
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
.el-image.att-img {
|
|
img {
|
|
height: 40px;
|
|
}
|
|
|
|
.el-image__error {
|
|
height: 50px;
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.el-icon-close {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.el-pagination {
|
|
* {
|
|
font-size: 14px !important;
|
|
height: 28px !important;
|
|
line-height: 28px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1921px) and (max-width: 2560px) {
|
|
.attendance-info-dlg {
|
|
.data-list {
|
|
th {
|
|
.cell {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
td {
|
|
.cell {
|
|
font-size: 20px;
|
|
.el-tag{
|
|
font-size:20px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-table__empty-text {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.el-table__row {
|
|
&:nth-child(odd) {
|
|
background-size: 100% 70px;
|
|
}
|
|
|
|
td {
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
.el-image.att-img {
|
|
img {
|
|
height: 60px;
|
|
}
|
|
|
|
.el-image__error {
|
|
height: 60px;
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.el-icon-close {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.el-pagination {
|
|
* {
|
|
font-size: 20px !important;
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2561px) {
|
|
.attendance-info-dlg {
|
|
.data-list {
|
|
th {
|
|
height: 50px;
|
|
.cell {
|
|
font-size: 30px;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
|
|
td {
|
|
height: 50px;
|
|
.cell {
|
|
font-size: 30px;
|
|
line-height: 48px;
|
|
.el-tag{
|
|
font-size:30px;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-table__empty-text {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.el-table__row {
|
|
&:nth-child(odd) {
|
|
background-size: 100% 90px;
|
|
}
|
|
|
|
td {
|
|
height: 100px;
|
|
}
|
|
}
|
|
|
|
.el-image.att-img {
|
|
img {
|
|
height: 80px;
|
|
}
|
|
|
|
.el-image__error {
|
|
height: 80px;
|
|
position: relative;
|
|
top: 16px;
|
|
}
|
|
}
|
|
|
|
.el-icon-close {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
.el-pagination {
|
|
* {
|
|
font-size: 30px !important;
|
|
height: 48px !important;
|
|
line-height: 48px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |