|
|
@@ -0,0 +1,247 @@
|
|
|
+<template>
|
|
|
+ <v-dialog
|
|
|
+ :title="title"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="1300px"
|
|
|
+ v-model="visible">
|
|
|
+ <el-form :inline="true" class="query-form m-b-10" v-if="searchVisible" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>
|
|
|
+ <!-- 搜索框-->
|
|
|
+ <el-form-item label="工作时间" prop="meetingDates">
|
|
|
+ <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-button type="primary" @click="refreshList()" icon="search">查询</el-button>
|
|
|
+ <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="gridData" @cell-click="handleCellClick" height="500px" :show-summary="true"
|
|
|
+ :summary-method="summaryMethod">
|
|
|
+ <el-table-column
|
|
|
+ width = "130px"
|
|
|
+ v-for="(column, index) in columns"
|
|
|
+ :key="index"
|
|
|
+ :label="column.name"
|
|
|
+ :prop="column.id"
|
|
|
+
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="close()" icon="circle-close">关闭</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </v-dialog>
|
|
|
+ <PunchCardListDia ref="punchCardListDia"></PunchCardListDia>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import ddService from "@/api/test/dd/dd.js"
|
|
|
+ import PunchCardListDia from "./PunchCardListDia";
|
|
|
+ export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ userId:"",
|
|
|
+ userName:"",
|
|
|
+ userTitle:"",
|
|
|
+ title: '',
|
|
|
+ method: '',
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ gridData:[],
|
|
|
+ searchVisible: true,
|
|
|
+ searchForm:{
|
|
|
+ workDates:[]
|
|
|
+ },
|
|
|
+ columns: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ PunchCardListDia
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init (id,name,title) {
|
|
|
+ this.title = name+'的考勤列表'
|
|
|
+ this.visible = true
|
|
|
+ this.userId = id
|
|
|
+ this.userName = name
|
|
|
+ this.userTitle = title
|
|
|
+ this.loading = false
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.loading = true
|
|
|
+ ddService.getattcolumns().then((data) => {
|
|
|
+ console.log('data',data.result)
|
|
|
+ this.columns = data.result.columns.slice(0, 18);
|
|
|
+ let leaveTypes = this.columns
|
|
|
+ .map(item => item.id) // 提取 columns 中每个 item 的 name 属性
|
|
|
+ .join(',');
|
|
|
+ this.columns.unshift({ id: '1', name: '日期' });
|
|
|
+ this.columns = this.columns.map(item => {
|
|
|
+ if (item.name.includes('时长')) {
|
|
|
+ item.name = item.name + '(分钟)';
|
|
|
+ } else if (item.name.includes('次数')) {
|
|
|
+ item.name = item.name + '(次)';
|
|
|
+ } else if (item.name.includes('天数')) {
|
|
|
+ item.name = item.name + '(天)';
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ userId:id,
|
|
|
+ leaveTypes:leaveTypes,
|
|
|
+ dateFrom:"",
|
|
|
+ dateTo:""
|
|
|
+ }
|
|
|
+ ddService.getleavetimebynames(params).then((da) =>{
|
|
|
+ console.log('da',da)
|
|
|
+ const numColumns = da.result.columnVals.length;
|
|
|
+ const numRows = da.result.columnVals[0].columnVals.length;
|
|
|
+
|
|
|
+ // 假设每一行的数据来自于 columnVals 中的多个列
|
|
|
+ // 遍历每一列的值
|
|
|
+ for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
|
|
|
+ let obj = {}; // 每一行的数据对象
|
|
|
+ // 假设第一列是日期，获取日期字段
|
|
|
+ let dateValue = da.result.columnVals[0].columnVals[rowIndex]?.date || ''; // 获取日期值
|
|
|
+ let dateOnly = dateValue.split(' ')[0]; // 按空格分割，获取日期部分
|
|
|
+ obj[this.columns[0].id] = dateOnly; // 将日期添加到对象中，作为每一行的第一列
|
|
|
+ // 遍历当前行的列数据，并填充到 obj 中
|
|
|
+ for (let colIndex = 0; colIndex < numColumns; colIndex++) {
|
|
|
+ // 获取每列的数据
|
|
|
+ let columnData = da.result.columnVals[colIndex].columnVals[rowIndex];
|
|
|
+
|
|
|
+ // 提取 value 字段
|
|
|
+ let columnValue = columnData?.value || ''; // 使用可选链，确保字段存在
|
|
|
+ // 将当前列的数据填充到 obj 中，列名来自 this.columns
|
|
|
+ obj[this.columns[colIndex+1].id] = columnValue; // 使用 this.columns 中的 id 作为 key
|
|
|
+ }
|
|
|
+ // 将当前行的 obj 数据加入 gridData
|
|
|
+ this.gridData.push(obj);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ refreshList(){
|
|
|
+ this.loading = true
|
|
|
+
|
|
|
+ ddService.getattcolumns().then((data) => {
|
|
|
+ console.log('data',data.result)
|
|
|
+ this.columns = data.result.columns.slice(0, 18);
|
|
|
+ let leaveTypes = this.columns
|
|
|
+ .map(item => item.id) // 提取 columns 中每个 item 的 name 属性
|
|
|
+ .join(',');
|
|
|
+ this.columns.unshift({ id: '1', name: '日期' });
|
|
|
+ this.columns = this.columns.map(item => {
|
|
|
+ if (item.name.includes('时长')) {
|
|
|
+ item.name = item.name + '(分钟)';
|
|
|
+ } else if (item.name.includes('次数')) {
|
|
|
+ item.name = item.name + '(次)';
|
|
|
+ } else if (item.name.includes('天数')) {
|
|
|
+ item.name = item.name + '(天)';
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ let params = {
|
|
|
+ userId:this.userId,
|
|
|
+ leaveTypes:leaveTypes,
|
|
|
+ dateFrom:this.searchForm.workDates[0],
|
|
|
+ dateTo:this.searchForm.workDates[1]
|
|
|
+ }
|
|
|
+ ddService.getleavetimebynames(params).then((da) =>{
|
|
|
+ console.log('da',da)
|
|
|
+ const numColumns = da.result.columnVals.length;
|
|
|
+ const numRows = da.result.columnVals[0].columnVals.length;
|
|
|
+ this.gridData = []
|
|
|
+ // 假设每一行的数据来自于 columnVals 中的多个列
|
|
|
+ // 遍历每一列的值
|
|
|
+ for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
|
|
|
+ let obj = {}; // 每一行的数据对象
|
|
|
+ // 假设第一列是日期，获取日期字段
|
|
|
+ let dateValue = da.result.columnVals[0].columnVals[rowIndex]?.date || ''; // 获取日期值
|
|
|
+ let dateOnly = dateValue.split(' ')[0]; // 按空格分割，获取日期部分
|
|
|
+ obj[this.columns[0].id] = dateOnly; // 将日期添加到对象中，作为每一行的第一列
|
|
|
+ // 遍历当前行的列数据，并填充到 obj 中
|
|
|
+ for (let colIndex = 0; colIndex < numColumns; colIndex++) {
|
|
|
+ // 获取每列的数据
|
|
|
+ let columnData = da.result.columnVals[colIndex].columnVals[rowIndex];
|
|
|
+
|
|
|
+ // 提取 value 字段
|
|
|
+ let columnValue = columnData?.value || ''; // 使用可选链，确保字段存在
|
|
|
+ // 将当前列的数据填充到 obj 中，列名来自 this.columns
|
|
|
+ obj[this.columns[colIndex+1].id] = columnValue; // 使用 this.columns 中的 id 作为 key
|
|
|
+ }
|
|
|
+ // 将当前行的 obj 数据加入 gridData
|
|
|
+ this.gridData.push(obj);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ resetSearch () {
|
|
|
+ this.$refs.searchForm.resetFields()
|
|
|
+ this.searchForm.workDates = [] // 重置时清空供应商筛选
|
|
|
+ this.refreshList()
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.visible = false
|
|
|
+ this.searchForm.workDates = []
|
|
|
+ },
|
|
|
+ handleCellClick(row, column, cell, event) {
|
|
|
+ console.log('column',column)
|
|
|
+ console.log('this.columns[0]', row[this.columns[0].id])
|
|
|
+ let workDate = this.moment(row[this.columns[0].id]).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ // 判断是否是第一列
|
|
|
+ this.$refs.punchCardListDia.init(this.userId, this.userName, this.userTitle,workDate)
|
|
|
+
|
|
|
+ // if (column.property === this.columns[0].id) {
|
|
|
+ // console.log('点击了第一列:', row);
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ summaryMethod({ columns, data }) {
|
|
|
+ const sums = [];
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ sums[index] = '汇总'; // 第一列可以是文字或“Total”
|
|
|
+ } else {
|
|
|
+ // 对数字列进行求和
|
|
|
+ const values = data.map(item => Number(item[column.property]));
|
|
|
+ sums[index] = values.reduce((prev, curr) => prev + curr, 0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return sums;
|
|
|
+ },
|
|
|
+ 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];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
sangwenwei