| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title">生产日期:</span> |
| | | <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange" |
| | | placeholder="请选择" clearable @change="changeDaterange" /> |
| | | <span class="search_title ml10">生产人:</span> |
| | | <el-input |
| | | v-model="searchForm.schedulingUserName" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | prefix-icon="Search" |
| | | /> |
| | | <span class="search_title ml10">合同号:</span> |
| | | <el-input |
| | | v-model="searchForm.salesContractNo" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | prefix-icon="Search" |
| | | /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px" |
| | | >搜索</el-button |
| | | > |
| | | <div class="content-layout"> |
| | | <!-- 左侧台账 + 顶部筛选 --> |
| | | <div class="left-panel"> |
| | | <div class="left-header"> |
| | | <!-- <div class="left-title">生产台账</div> --> |
| | | <el-radio-group v-model="dateType" size="small" @change="handleDateTypeChange"> |
| | | <el-radio-button label="day">日</el-radio-button> |
| | | <el-radio-button label="month">月</el-radio-button> |
| | | </el-radio-group> |
| | | |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="leftTableColumn" |
| | | :tableData="leftTableData" |
| | | :tableLoading="tableLoading" |
| | | @rowClick="handleLeftRowClick" |
| | | ></PIMTable> |
| | | </div> |
| | | <div> |
| | | <el-button @click="handleOut">导出</el-button> |
| | | |
| | | <!-- 右侧明细(原有内容) --> |
| | | <div class="right-panel"> |
| | | <div class="header-filters"> |
| | | <el-button @click="handleOut" class="ml10">导出</el-button> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :tableLoading="tableLoading" |
| | | style="margin-right: 20px;" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | width: 100, |
| | | }, |
| | | ]); |
| | | |
| | | // 左侧汇总台账列(生产人、产量、工资、合格率) |
| | | const leftTableColumn = ref([ |
| | | { |
| | | label: "生产人", |
| | | prop: "schedulingUserName", |
| | | width: 120, |
| | | }, |
| | | { |
| | | label: "产量", |
| | | prop: "finishedNum", |
| | | width: 100, |
| | | }, |
| | | { |
| | | label: "工资", |
| | | prop: "wages", |
| | | width: 100, |
| | | }, |
| | | { |
| | | label: "合格率", |
| | | prop: "qualifiedRate", |
| | | width: 100, |
| | | }, |
| | | ]); |
| | | |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const leftTableData = ref([]); |
| | | // 日 / 月 切换(默认按日) |
| | | const dateType = ref("day"); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | const params = { ...searchForm.value, ...page }; |
| | | params.dateType = dateType.value; |
| | | params.entryDate = undefined |
| | | productionAccountingListPage(params).then((res) => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | page.total = res.data.total; |
| | | const records = res.data.records || []; |
| | | tableData.value = records; |
| | | page.total = res.data.total || 0; |
| | | buildLeftTableData(records); |
| | | }); |
| | | }; |
| | | |
| | | // 构建左侧汇总台账(按生产人汇总产量、工资等) |
| | | const buildLeftTableData = (records) => { |
| | | const map = {}; |
| | | records.forEach((item) => { |
| | | const key = item.schedulingUserName || "未知"; |
| | | if (!map[key]) { |
| | | map[key] = { |
| | | id: key, |
| | | schedulingUserName: key, |
| | | finishedNum: 0, |
| | | wages: 0, |
| | | qualifiedRate: item.qualifiedRate ?? null, |
| | | }; |
| | | } |
| | | map[key].finishedNum += Number(item.finishedNum || 0); |
| | | map[key].wages += Number(item.wages || 0); |
| | | if (item.qualifiedRate != null) { |
| | | map[key].qualifiedRate = item.qualifiedRate; |
| | | } |
| | | }); |
| | | leftTableData.value = Object.values(map); |
| | | }; |
| | | |
| | | // 左侧日/月切换 |
| | | const handleDateTypeChange = () => { |
| | | // 这里只作为筛选条件的一部分,直接重新查询列表 |
| | | handleQuery(); |
| | | }; |
| | | |
| | | // 点击左侧行,刷右侧明细(按生产人过滤) |
| | | const handleLeftRowClick = (row) => { |
| | | searchForm.value.schedulingUserName = row.schedulingUserName || ""; |
| | | handleQuery(); |
| | | }; |
| | | |
| | | // 导出 |
| | |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"> |
| | | .content-layout { |
| | | display: flex; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .left-panel { |
| | | flex: 0 0 50%; |
| | | max-width: 50%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | } |
| | | |
| | | .right-panel { |
| | | flex: 0 0 50%; |
| | | max-width: 49%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | } |
| | | |
| | | .left-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .left-title { |
| | | font-size: 16px; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .header-filters { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | justify-content: flex-end; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .search_title { |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .ml10 { |
| | | margin-left: 10px; |
| | | } |
| | | </style> |