spring
3 天以前 38d43b697f86d5ee8345e4d6397d3c1da32bbd5b
src/views/productionManagement/productionCosting/index.vue
@@ -1,45 +1,40 @@
<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>
@@ -119,8 +114,36 @@
      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,
@@ -165,12 +188,50 @@
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();
};
// 导出
@@ -193,4 +254,53 @@
});
</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>