ezhizao_dms_vue/src/views/business/report/index.vue

<template>
    <div class="page-container row-container">
        <!-- 左侧区域 -->
        <section class="list-part-container" style="flex: 3">
            <!-- 搜索区 -->
            <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true"
                style="margin-right: 0px">
                <el-form-item class="section-title" label="报工日报" />
                <el-form-item label="生产计划单号：">
                    <el-input placeholder="请输入批次号" v-model.trim="queryParams.lotCode" @keydown.enter.prevent clearable
                        style="width: 130px" />
                </el-form-item>
                <el-form-item label="产品描述：">
                    <el-input placeholder="请输入产品描述" v-model.trim="queryParams.productDescription" @keydown.enter.prevent
                        clearable style="width: 130px" />
                </el-form-item>
                <el-form-item label="员工姓名：">
                    <el-input placeholder="请输入姓名" v-model.trim="queryParams.nickName" @keydown.enter.prevent clearable
                        style="width: 96px" />
                </el-form-item>
                <el-form-item label="箱号：">
                    <el-input placeholder="请输入箱号" v-model.trim="queryParams.originalCarrier" @keydown.enter.prevent
                        clearable style="width: 96px" />
                </el-form-item>
                <el-form-item class="section-title" label="请选择当前工段：">
                    <el-select-v2 v-model="queryParams.deptId" :options="deptList" placeholder="请选择工段" style="width: 120px"
                        @change="handleDeptChange" />
                </el-form-item>
                <el-form-item label="时间：">
                    <el-date-picker v-model="queryParams.startTime" type="date" value-format="YYYY-MM-DD" :editable="false"
                        :clearable="false" placeholder="请选择" style="width: 136px" @change="handleDateChange" />
                    <span>~</span>
                    <el-date-picker v-model="queryParams.endTime" type="date" value-format="YYYY-MM-DD" :editable="false"
                        :clearable="false" placeholder="请选择" style="width: 136px" @change="handleDateChange" />
                </el-form-item>
                <el-form-item style="margin-left: 0">
                    <el-button type="info" icon="Search" @click="handleQuery">搜索
                    </el-button>
                    <el-button type="success"  icon="Download" @click="handleExport">导出</el-button>
                </el-form-item>
            </el-form>
            <div class="el-table-container">
                <div class="el-table-inner-container">
                    <el-table ref="dayworkTable" :data="dayworkItemList" v-loading="dayworkLoading" highlight-current-row
                        height="100%">
                        <el-table-column label="批次号" prop="lotCode" width="160" align="center" />
                        <el-table-column label="产品描述" prop="productDescription" align="center" />
                        <el-table-column label="图纸版本" prop="technologyVersion" width="60" align="center" />
                        <el-table-column label="工序名称" prop="processAlias" width="160" align="center" />
                        <el-table-column label="投产量" prop="prodNum" width="60" align="center" />
                        <el-table-column label="合格数" prop="qualifiedNum" width="60" align="center" />
                        <el-table-column label="废品数" prop="rejectNum" width="60" align="center" />
                        <el-table-column label="开始时间" prop="startTime" width="160" align="center" />
                        <el-table-column label="结束时间" prop="endTime" width="160" align="center" />
                        <el-table-column label="总工时" prop="workingHours" width="160" align="center" />
                        <el-table-column label="生产状态" prop="status" width="100" align="center">
                            <template #default="scope">
                                <dict-tag :options="daywork_status" :value="scope.row.status" />
                            </template>
                        </el-table-column>
                        <el-table-column label="箱号" prop="originalCarrier" align="center">
                            <template v-slot:header>
                                箱号
                                <el-popover placement="top-start" effect="dark" trigger="hover"
                                    content="显示批次最新箱号，会根据实际情况变动">
                                    <template #reference>
                                        <el-icon>
                                            <QuestionFilled />
                                        </el-icon>
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作者" prop="nickName" width="160" align="center" />
                    </el-table>
                </div>
            </div>
            <!-- 分页 -->
            <pagination v-show="itemTotal > 0" :total="itemTotal" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getDayworkItems" />
        </section>
        <!-- 右侧区域 -->


    </div>
</template>
  
<script setup>
import {
    listReportItem,
    delDayworkItem
} from "@/api/business/daywork.js";
import { listDeptProcess } from "@/api/business/deptProcess";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
import router from "@/router";

const { proxy } = getCurrentInstance();

/** 字典 */
const { daywork_status } = proxy.useDict("daywork_status");

/** 生产批次 */
const dayworkTable = ref(null);
const currentDaywork = ref({});
const dayworkLoading = ref(false);
const total = ref(0);
/**工段 */
const deptList = ref([]);
const loading = ref(false);
/** 报工信息 */
const dayworkItemList = ref([]);
const dayworkItemLoading = ref(false);
const itemTotal = ref(0);
const lastStatus = ref(null)
const latestProcessId = ref(null);
const latestDeptId = ref(null)
const isDispatch = ref(false);
const deptProcessList = ref([]);
/**工序 */
const processList = ref([]);

const queryParams = ref({
    dayworkId: "0",
    isAmend: 0,
    isWasteRecycling: 0,
    pageNum: 1,
    pageSize: 10,
    technologicalProcessDetailId: null,
});

/***********************  工段相关事件  ****************************/
function getList() {
    loading.value = true;
    getDeptList().then((response) => {
        deptList.value = response.data.rows;
        isDispatch.value = response.data.others.isDispatch;
        loading.value = false;
          if (deptList.value.length > 0 && !isDispatch.value) {
        queryParams.value.deptId = deptList.value[0].value;
          } else {
            deptList.value.unshift({ label: "全部", value: "0" });
          }
          getDayworkItems();
    });
}

//切换工段
function handleDeptChange() {
    getDayworkItems();
}






/***********************  报工信息相关事件  ****************************/

function handleDateChange() {
    console.log(queryParams.value.startTime);
    console.log(queryParams.value.endTime);
}


/**切换工序 */
function handleProcessChange() {
    getDayworkItems();
}

/** 报工详情列表 */
function getDayworkItems() {
    console.log(111111)
    dayworkItemLoading.value = true;
    //查询该工段在工段资源分配时绑定的工序，传一个flag，如果flag有值则后端查询不分页
    listDeptProcess({ deptId: queryParams.value.deptId, flag: 1 }).then(
        (res) => {
            deptProcessList.value = res.rows;
        }
    );
    listReportItem(queryParams.value).then((res) => {
        console.log(res)
        for (let i = 0; i < res.rows.length; i++) {
            //如果时首序，投产数是单批数
            if (res.rows[i].prodNum == 0) {
                if (currentDaywork.value.isLast == 1) {
                    res.rows[i].prodNum = currentDaywork.value.lastLotQuantity;
                } else {
                    res.rows[i].prodNum = currentDaywork.value.oneLotQuantity;
                }
            }
            //拿到最新一条报工信息的工序id，只能编辑当前序
            // if (res.rows[i] == res.rows[res.rows.length - 1]) {
            //   latestProcessId.value = res.rows[i].processId;
            // }
        }
        if (res.others != null && res.others.latestProcessId != null) {
            latestProcessId.value = res.others.latestProcessId
        }
        if (res.others != null && res.others.lastItem != null) {
            latestDeptId.value = res.others.lastItem.deptId
            lastStatus.value = res.others.lastItem.status
        }
        for (var i = 0; i < res.rows.length; i++) {
            let timeStamp = res.rows[i].workingHours;
            let seconds = Math.floor((timeStamp / 1000) % 60);
            let minutes = Math.floor((timeStamp / (1000 * 60)) % 60);
            let hours = Math.floor(timeStamp / (1000 * 60 * 60));
            let time = `${hours}小时${minutes}分钟${seconds}秒`;
            res.rows[i].workingHours = time;
            res.rows[i].deptProcessStatus = false;

        }
        dayworkItemList.value = res.rows;
        itemTotal.value = res.total;
        dayworkItemLoading.value = false;
    });
}
/** 导出按钮操作 */
function handleExport() {
    proxy.download('/ezhizao-dms-production/business/productionDaywork/download', {
        ...queryParams.value
    }, `报工日报${new Date().getTime()}.xlsx`)
}
/** 搜索按钮操作 */
function handleQuery() {
    getDayworkItems();
}

onMounted(() => {
    getList();
});
</script>
<style scoped>
.el-form--inline .el-form-item {
    margin-right: 20px;
}
</style>