beizeValveMesVue/src/views/groupManagement/achievement/index.vue

<template>
    <!-- 员工报工清单 -->
    <div>
        <!-- 搜索表单 -->
        <el-form :model="searchForm" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="时间范围">
                        <el-date-picker v-model="searchForm.jobDatetime" :clearable="false" type="datetimerange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"
                            :default-value="[proxy.$dayjs().startOf('day').add(8, 'hour'), proxy.$dayjs().endOf('day').subtract(16, 'hour')]" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工名称">
                        <el-input v-model="searchForm.worker" placeholder="请输入员工名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="班次选择">
                        <el-radio-group v-model="searchForm.shift" @change="handleShiftChange">
                            <el-radio-button value="白班">切换白班</el-radio-button>
                            <el-radio-button value="晚班">切换晚班</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="success" icon="download" @click="handleExport">{{ $t('btn.export')
                        }}</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 加载状态和错误信息 -->
        <div v-if="loading">正在加载...</div>
        <div v-if="error">{{ error }}</div>

        <!-- VxeTable 表格 -->
        <vxe-table :data="tableData">
            <vxe-column field="id" title="员工id"></vxe-column>
            <vxe-column field="worker" title="员工姓名"></vxe-column>
            <vxe-column field="materialUse" title="物料领用"></vxe-column>
            <vxe-column field="mechanicalProcessing" title="机械加工"></vxe-column>
            <vxe-column field="middleCheck" title="中间检查"></vxe-column>
            <vxe-column field="handgrind" title="手工研磨"></vxe-column>
            <vxe-column field="machinegrind" title="机研磨"></vxe-column>
            <vxe-column field="finegrind" title="精研磨"></vxe-column>
            <vxe-column field="warehouseInspection" title="入库检查"></vxe-column>
            <vxe-column field="shipment" title="出货"></vxe-column>
        </vxe-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { listGroupReportList, exportGroupReportAchievement } from '@/api/groupManagement/achievement.js'
const { proxy } = getCurrentInstance()
// 假设这是从你的文件中读取的数据
const tableData = ref([])

// 工序号选项
const processOptions = ['物料领用', '机械加工', '中间检查', '手工研磨', '机研磨', '精研磨', '入库检查', '出货']
// 日期选择器快捷选项
const shortcuts = [
    {
        text: '今天白班',
        value: () => {
            return [proxy.$dayjs().startOf('day').hour(8).minute(0).second(0), proxy.$dayjs().startOf('day').hour(20).minute(0).second(0)]
        },
    },
    {
        text: '今天晚班',
        value: () => {
            return [proxy.$dayjs().startOf('day').hour(20).minute(0).second(0), proxy.$dayjs().add(1, 'day').startOf('day').hour(8).minute(0).second(0)]
        },
    },
    {
        text: '昨天白班',
        value: () => {
            return [proxy.$dayjs().subtract(1, 'day').startOf('day').hour(8).minute(0).second(0), proxy.$dayjs().subtract(1, 'day').startOf('day').hour(20).minute(0).second(0)]
        },
    },
    {
        text: '昨天晚班',
        value: () => {
            return [proxy.$dayjs().subtract(1, 'day').startOf('day').hour(20).minute(0).second(0), proxy.$dayjs().startOf('day').hour(8).minute(0).second(0)]
        },
    },
    {
        text: '本周',
        value: () => {
            const startOfWeek = proxy.$dayjs().startOf('week');
            const endOfWeek = proxy.$dayjs().endOf('week');
            return [startOfWeek, endOfWeek];
        },
    },
    {
        text: '上周',
        value: () => {
            const startOfLastWeek = proxy.$dayjs().subtract(1, 'week').startOf('week');
            const endOfLastWeek = proxy.$dayjs().subtract(1, 'week').endOf('week');
            return [startOfLastWeek, endOfLastWeek];
        },
    },
    {
        text: '本月',
        value: () => {
            const startOfLastMonth = proxy.$dayjs().startOf('month');
            const endOfLastMonth = proxy.$dayjs().endOf('month');
            return [startOfLastMonth, endOfLastMonth];
        },
    },
    {
        text: '上月',
        value: () => {
            const startOfLastMonth = proxy.$dayjs().subtract(1, 'month').startOf('month');
            const endOfLastMonth = proxy.$dayjs().subtract(1, 'month').endOf('month');
            return [startOfLastMonth, endOfLastMonth];
        },
    },
];
// 搜索条件
const searchForm = ref({
    worker: '',
    jobDatetime: [proxy.$dayjs().startOf('day').hour(8).minute(0).second(0), proxy.$dayjs().startOf('day').hour(20).minute(0).second(0)],
    process: '', // 默认值为空表示全部
    shift: '白班'
})

// 加载状态和错误信息
const loading = ref(false)
const error = ref(null)

// 处理班次选择变化
function handleShiftChange(newVal) {
    const currentDateStart = proxy.$dayjs(searchForm.value.jobDatetime[0]).startOf('day')
    const currentDateEnd = proxy.$dayjs(searchForm.value.jobDatetime[1]).startOf('day')

    if (newVal === '白班') {
        searchForm.value.jobDatetime = [
            currentDateStart.hour(8),
            currentDateStart.hour(20)
        ]
    } else if (newVal === '晚班') {
        searchForm.value.jobDatetime = [
            currentDateStart.hour(20),
            currentDateStart.hour(32)
        ]
    }
}

// 处理搜索逻辑
async function handleSearch() {
    try {
        loading.value = true
        error.value = null
        const res = await listGroupReportList(searchForm.value)
        if (res.code === 200) {
            tableData.value = res.data
        } else {
            error.value = '获取数据失败，请稍后再试'
        }
    } catch (err) {
        error.value = '请求出错，请稍后再试' + err
    } finally {
        loading.value = false
    }
}

// 重置表单
function resetForm() {
    searchForm.value = {
        worker: '',
        jobDatetime: [proxy.$dayjs().startOf('day').hour(8).minute(0).second(0), proxy.$dayjs().startOf('day').hour(20).minute(0).second(0)],
        process: '', // 默认值为空表示全部
        shift: '白班'
    }
}
// 导出
function handleExport() {
    const params = { ...searchForm.value }
    proxy.$confirm('您确定要导出当前搜索条件下的信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const param = `?worker=${params.worker}&jobDatetime=${params.jobDatetime[0]}&jobDatetime=${params.jobDatetime[1]}`
        exportGroupReportAchievement(param).then(response => {
            proxy.$alert("导出成功！")
        })
    }).catch(() => {
        // 用户取消导出
    })
}
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>