547 lines
20 KiB
Vue
547 lines
20 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<el-dialog
|
||
style="margin-top: 5vh"
|
||
:title="title"
|
||
:visible.sync="open"
|
||
width="80%"
|
||
append-to-body
|
||
:close-on-click-modal="false"
|
||
@close="closeDialog"
|
||
>
|
||
<div class="content">
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryFormRef"
|
||
size="medium"
|
||
:inline="true"
|
||
label-width="80px"
|
||
style="margin-bottom: 20px"
|
||
>
|
||
<el-form-item label="选择月份" v-if="status == 12">
|
||
<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="userName"
|
||
>
|
||
<el-input
|
||
v-model="queryParams.userName"
|
||
placeholder="请输入姓名"
|
||
clearable
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="状态" prop="attStatusToday" v-if="status == 1">
|
||
<el-select
|
||
v-model="queryParams.attStatusToday"
|
||
placeholder="状态"
|
||
clearable
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
v-for="dict in dict.type.att_status"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="部门" prop="orgId" v-if="status == 12">
|
||
<treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer"
|
||
placeholder="选择部门" style="width: 240px"/>
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="attStatus" v-if="status == 12">
|
||
<el-select
|
||
v-model="queryParams.attStatus"
|
||
placeholder="状态"
|
||
clearable
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
v-for="dict in dict.type.att_status"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- <el-form-item
|
||
label="设备编号"
|
||
prop="devCode"
|
||
v-if="status <= 8"
|
||
>
|
||
<el-input
|
||
v-model="queryParams.devCode"
|
||
placeholder="请输入设备编号"
|
||
clearable
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="工程名称"
|
||
prop="proName"
|
||
v-if="status > 8"
|
||
>
|
||
<el-input
|
||
v-model="queryParams.proName"
|
||
placeholder="请输入工程名称"
|
||
clearable
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="工程类型"
|
||
prop="proType"
|
||
v-if="status === 9"
|
||
>
|
||
<el-select
|
||
v-model="queryParams.proType"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in proTypeRange"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="日期" prop="date" v-if="status > 11">
|
||
<el-date-picker
|
||
v-model="queryParams.date"
|
||
style="width: 240px"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
/>
|
||
</el-form-item> -->
|
||
<el-button
|
||
style="margin-top: 3px"
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
size="mini"
|
||
@click="getTableList(currentFunc)"
|
||
>搜索
|
||
</el-button
|
||
>
|
||
</el-form>
|
||
|
||
<el-table
|
||
:data="tableList"
|
||
border
|
||
ref="tableRef"
|
||
width="100%" height="500px"
|
||
v-loading="loading"
|
||
|
||
>
|
||
<el-table-column type="index" label="序号" align="center" width="80">
|
||
<!-- 使用 `index` 方法自定义索引，传入当前行数据和行索引 -->
|
||
<template slot-scope="scope">
|
||
{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-for="(item, v) in columnList"
|
||
:key="v"
|
||
:label="item.t_label"
|
||
:prop="item.t_props"
|
||
:width="item.t_width"
|
||
align="center"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-if="item.t_slot === 'attStatus'">
|
||
<dict-tag :options="dict.type.att_status" :value="scope.row[item.t_props]"/>
|
||
</template>
|
||
|
||
<template v-else-if="item.t_slot === 'attCurrentDay'">
|
||
<span>{{ formatWeekday(scope.row[item.t_props]) }}</span>
|
||
</template>
|
||
|
||
<template v-else-if="item.t_slot === 'examineStatus'">
|
||
<span v-if="scope.row[item.t_props]==0">{{ '待审核' }}</span>
|
||
<span v-if="scope.row[item.t_props]==1">{{ '通过' }}</span>
|
||
<span v-if="scope.row[item.t_props]==2">{{ '不通过' }}</span>
|
||
<span v-if="scope.row[item.t_props]==3">{{ '已撤回' }}</span>
|
||
<span v-else>{{ }}</span>
|
||
</template>
|
||
|
||
<template v-else>
|
||
{{ scope.row[item.t_props] || '-' }}
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getTableList(currentFunc, currentParam)"
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {listDept} from "@/api/system/dept";
|
||
import Treeselect from "@riophae/vue-treeselect";
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
import {getDetailsList} from "@/api/report/attReport";
|
||
import {getAttDayReportDetailsListData,getAttDayList} from "@/api/report/dayReport";
|
||
import {getDetailExceptionAll} from "@/api/dashboard";
|
||
|
||
export default {
|
||
name: 'commonDialog',
|
||
dicts: ['att_status'],
|
||
components: {
|
||
Treeselect
|
||
},
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
loading: false,
|
||
status: undefined,
|
||
queryParams: {
|
||
month: undefined,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
title: "",
|
||
open: false,
|
||
deptOptions: [],
|
||
tableList: [],
|
||
columnList: [],
|
||
additionalList: [],
|
||
currentFunc: undefined,
|
||
currentParam: undefined,
|
||
|
||
proTypeRange: [
|
||
{label: '变电工程', value: '1'},
|
||
{label: '线路工程', value: '2'},
|
||
{label: '电缆工程', value: '3'},
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
this.getDeptList();
|
||
},
|
||
methods: {
|
||
getMonth() {
|
||
// 默认当月
|
||
var nowDate = new Date();
|
||
var date = {
|
||
year: nowDate.getFullYear(),
|
||
month: nowDate.getMonth() + 1,
|
||
day: nowDate.getDate()
|
||
};
|
||
const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
|
||
this.$set(this.queryParams, "month", dayDate.toString());
|
||
},
|
||
getMonthDate() {
|
||
const str = this.queryParams.month + '-01';
|
||
// 获取当前日期
|
||
var currentDate = new Date(str);
|
||
// 获取当前月份的第一天
|
||
var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
|
||
let firstDay = this.formatDate(firstDayOfMonth)
|
||
// 获取当前月份的最后一天
|
||
var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
|
||
let lastDay = this.formatDate(lastDayOfMonth)
|
||
return [firstDay, lastDay]
|
||
},
|
||
formatDate(dateString) {
|
||
const date = new Date(dateString); // 创建日期对象
|
||
const year = date.getFullYear(); // 获取年份
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
|
||
const day = String(date.getDate()).padStart(2, '0'); // 获取日期
|
||
return `${year}-${month}-${day}`; // 组合成所需格式
|
||
},
|
||
formatWeekday(dateString) {
|
||
const date = new Date(dateString); // 创建日期对象
|
||
const year = date.getFullYear(); // 获取年份
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
|
||
const day = String(date.getDate()).padStart(2, '0'); // 获取日期
|
||
const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
|
||
const weekday = weekdays[date.getDay()]; // 获取星期几
|
||
|
||
return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
|
||
},
|
||
//部门选择
|
||
getDeptList() {
|
||
listDept().then(response => {
|
||
this.deptOptions = this.handleTree(response.data, "id");
|
||
});
|
||
},
|
||
/** 转换部门数据结构 */
|
||
normalizer(node) {
|
||
if (node.children && !node.children.length) {
|
||
delete node.children;
|
||
}
|
||
return {
|
||
id: node.id,
|
||
label: node.orgName,
|
||
children: node.children
|
||
};
|
||
},
|
||
//当日考勤统计
|
||
async getAttDayReportDetailsListData(data) {
|
||
let res = await getAttDayReportDetailsListData(data).then(response => {
|
||
return response
|
||
});
|
||
return res
|
||
},
|
||
//未处理已处理数据
|
||
async getDetailExceptionAll(data) {
|
||
var nowDate = new Date();
|
||
var date = {
|
||
year: nowDate.getFullYear(),
|
||
month: nowDate.getMonth() + 1,
|
||
day: nowDate.getDate()
|
||
};
|
||
const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
|
||
data.month = dayDate.toString()
|
||
data.name = data.userName;
|
||
data.attCurrentMonth = data.month;
|
||
let res = await getDetailExceptionAll(data).then(response => {
|
||
return response
|
||
});
|
||
return res
|
||
},
|
||
//当月异常数据
|
||
async getDetailsList(data) {
|
||
console.log("当月异常数据",data)
|
||
let dateRange = this.getMonthDate()
|
||
console.log(dateRange)
|
||
if (dateRange && dateRange.length > 0) {
|
||
data.startDate = dateRange[0]
|
||
data.endDate = dateRange[1]
|
||
} else {
|
||
data.startDate = undefined
|
||
data.endDate = undefined
|
||
}
|
||
let res = await getDetailsList(data).then(response => {
|
||
return response
|
||
});
|
||
return res
|
||
},
|
||
|
||
//今日出勤状态
|
||
async getAttDayList(data) {
|
||
console.log("今日出勤状态",data)
|
||
let res = await getAttDayList(data).then(response => {
|
||
return response
|
||
});
|
||
return res
|
||
},
|
||
|
||
setOpen(v) {
|
||
console.log(v)
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
}
|
||
this.open = v.open
|
||
this.status = v.param.order
|
||
switch (v.param.order) {
|
||
case 1:
|
||
this.title = "打卡记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayList
|
||
this.getTableList(this.getAttDayList, v.param)
|
||
// this.currentFunc = this.getAttDayReportDetailsListData
|
||
// this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 2:
|
||
this.title = "迟到记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayReportDetailsListData
|
||
this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 3:
|
||
this.title = "旷工记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayReportDetailsListData
|
||
this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 4:
|
||
this.title = "早退记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayReportDetailsListData
|
||
this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 6:
|
||
this.title = "请假记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayReportDetailsListData
|
||
this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 8:
|
||
this.title = "出入异常记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayReportDetailsListData
|
||
this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 9:
|
||
this.title = "打卡地异常记录"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.currentFunc = this.getAttDayReportDetailsListData
|
||
this.getTableList(this.getAttDayReportDetailsListData, v.param)
|
||
break;
|
||
case 10:
|
||
this.title = "已处理异常数据"
|
||
this.columnList = [
|
||
{t_props: 'name', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'leaveType', t_label: '请假类型'},
|
||
{t_props: 'leaveStartDate', t_label: '请假开始时间'},
|
||
{t_props: 'leaveEndDate', t_label: '请假结束时间'},
|
||
{t_props: 'leaveDuration', t_label: '请假时长(天)'},
|
||
{t_props: 'examineStatus', t_label: '审批状态', t_slot: 'examineStatus'},
|
||
]
|
||
this.currentFunc = this.getDetailExceptionAll
|
||
this.getTableList(this.getDetailExceptionAll, v.param)
|
||
break;
|
||
case 11:
|
||
this.title = "未处理异常数据"
|
||
this.columnList = [
|
||
{t_props: 'name', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'leaveType', t_label: '请假类型'},
|
||
{t_props: 'leaveStartDate', t_label: '请假开始时间'},
|
||
{t_props: 'leaveEndDate', t_label: '请假结束时间'},
|
||
{t_props: 'leaveDuration', t_label: '请假时长(天)'},
|
||
{t_props: 'examineStatus', t_label: '审批状态', t_slot: 'examineStatus'},
|
||
]
|
||
this.currentFunc = this.getDetailExceptionAll
|
||
this.getTableList(this.getDetailExceptionAll, v.param)
|
||
break;
|
||
case 12:
|
||
this.title = "当月异常统计"
|
||
this.columnList = [
|
||
{t_props: 'userName', t_label: '姓名'},
|
||
{t_props: 'orgName', t_label: '所属部门'},
|
||
{t_props: 'attCurrentDay', t_label: '考勤日期', t_slot: 'attCurrentDay'},
|
||
{t_props: 'toWorkAttCurrentTime', t_label: '上班打卡时间'},
|
||
{t_props: 'toWorkAttStatus', t_label: '上班状态', t_slot: 'attStatus'},
|
||
{t_props: 'toWorkAttAddress', t_label: '打卡地址'},
|
||
{t_props: 'offWorkAttCurrentTime', t_label: '下班打卡时间'},
|
||
{t_props: 'offWorkAttStatus', t_label: '下班状态', t_slot: 'attStatus'},
|
||
{t_props: 'offWorkAttAddress', t_label: '打卡地址'},
|
||
]
|
||
this.getMonth();
|
||
this.currentFunc = this.getDetailsList
|
||
this.getTableList(this.getDetailsList, v.param)
|
||
break;
|
||
|
||
}
|
||
},
|
||
async getTableList(func, param) {
|
||
if (param) {
|
||
Object.assign(this.queryParams, param)
|
||
}
|
||
let res = await func(this.queryParams)
|
||
console.log(res)
|
||
if (res.data) {
|
||
this.tableList = res.data.rows
|
||
this.total = res.data.total
|
||
} else {
|
||
this.total = res.total
|
||
this.tableList = res.rows
|
||
}
|
||
},
|
||
closeDialog() {
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
</style>
|