YZProjectCloud/yanzhu-ui-vue3/src/views/manage/attendanceUbiData/statistics.vue

<template>
    <div class="app-container attendance-ubi-data-statistics">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px">
            <el-form-item label="项目" prop="projectId">
                <el-select :disabled="data.currentProId != ''" style="width:150px;" v-model="queryParams.projectId"
                    placeholder="请选择项目" clearable @change="() => { handleQuery(); projectChange(); }">
                    <el-option v-for="prj in data.projects" :key="prj.id" :label="prj.projectName" :value="prj.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属单位" prop="subDeptId">
                <el-select v-model="queryParams.subDeptId" style="width:150px;" placeholder="请选择所属单位" clearable
                    @change="() => { handleQuery(); }">
                    <el-option v-for="(it, idx) in data.subdepts" :key="it.id" :label="it.subDeptName" :value="it.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="显示方式" prop="showType">
                <el-select v-model="queryParams.showType" style="width:150px;" placeholder="请选择显示方式">
                    <el-option label="按考勤时间显示" value="0" />
                    <el-option label="按是否考勤显示" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="月份" prop="inTime">
                <el-date-picker v-model="queryParams.inTime" type="month" placeholder="选择月份" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="data.loading" :data="data.attendanceUbiDataList" class="data-list" :key="data.elkey">
            <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="subDeptGroupName" />
            <el-table-column label="工种类型" align="center" prop="craftType">
                <template #default="scope">
                    <dict-tag :options="pro_craft_type" :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>
          
   
            <template v-for="(it,idx) in data.tdDays" :key="idx+'-'+it" >
            <el-table-column :label="it"  align="center" :prop="it">
                <template v-slot:default="scope">
                  <attItem :row="scope.row" :it="it" :mode="queryParams.showType"/>
                </template>
            </el-table-column>
        </template>
        </el-table>

        <pagination v-show="data.total > 0" :total="data.total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script setup>
import { findMyProjectList } from "@/api/publics";
import { listProProjectInfoSubdepts } from "@/api/manage/proProjectInfoSubdepts";
import {statisticsAttendanceUbiData} from '@/api/manage/attendanceUbiData.js'
import useUserStore from '@/store/modules/user'
import attItem from './item.vue'
const { proxy } = getCurrentInstance();

const {  pro_craft_type,  pro_craft_post } = proxy.useDict( 'pro_craft_type',  'pro_craft_post');

const userStore = useUserStore()
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        inTime: '',
        projectId: '',
        subDeptId: '',
        showType: '0'

    },
    rules: {
    },
    projects: [],
    subdepts: [],
    currentProId: '',
    attendanceUbiDataList: [],
    loading: false,
    total: 0,
    tdDays:[],
    elkey:0,
});
const { queryParams, form, rules } = toRefs(data);

/*项目改变事件 */
function projectChange() {
    listProProjectInfoSubdepts({ projectId: queryParams.value.projectId, pageNum: 1, pageSize: 100 }).then(d => {
        data.subdepts = d.rows || [];
    });
}
/** 查询项目列表 */
function getProjectList() {
    findMyProjectList({ pageNum: 1, pageSize: 100 }).then(response => {
        data.projects = response.rows;
        if (userStore.currentProId) {
            queryParams.value.projectId = userStore.currentProId
            data.currentProId = userStore.currentProId;
            projectChange();
        }
    });
}

function getList() {
    let queryData={
        pageNum:queryParams.value.pageNum,
        pageSize:queryParams.value.pageSize,
        projectId:queryParams.value.projectId,
        subDeptId:queryParams.value.subDeptId
    }
    let dt1=proxy.$dt(queryParams.value.inTime);
    let dt2=dt1.month(dt1.month()+1);   
    queryData.inTime=dt1.format("YYYY-MM-01");
    queryData.outTime=dt2.format("YYYY-MM-01");    
    dt1=proxy.$dt(dt1.format("YYYY-MM-01"));
    data.tdDays=[];
    for(let i=1;i<=dt1.daysInMonth();i++){       
       if(i<10){
        data.tdDays.push(""+i);
       }else{
        data.tdDays.push(""+i);
       }
    }
    data.loading=true;
    statisticsAttendanceUbiData(queryData).then(d=>{
        data.loading=false;
        data.total=d.total||0;
        let tmps=d.rows||[];
        let obj={};
        
        tmps.forEach(it=>{
            let userId=it.userId;
            if(!obj[userId]){
                obj[userId]={
                    ...it
                }
            }
            let day="";
            if(it.inTime){                
                day=""+proxy.$dt(it.inTime).format("D");
            }
            if(it.outTime && !day){
                day=""+proxy.$dt(it.outTime).format("D");
            }
            obj[userId][day]={
                in:it.inTime,
                out:it.outTime
            };
        });
        let retDatas=[];
        for(let k in obj){
            retDatas.push(obj[k]);
        }
        data.attendanceUbiDataList=retDatas; 
        data.elkey++;
    });
}

/*查询数据*/
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}
/*重置*/
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}
queryParams.value.inTime = proxy.$dt(new Date()).format("YYYY-MM-DD");
getProjectList();
handleQuery();
</script>

<style lang="scss"></style>