zhangwencui
2026-04-29 7d9414ea1746d4ac7175ae27062620e03eb83f38
src/views/productionManagement/productionCosting/index.vue
@@ -1,22 +1,30 @@
<template>
   <div class="app-container">
      <div class="table_list">
         <el-row :gutter="16" class="content-row">
      <el-row :gutter="16"
              class="content-row">
            <!-- 左侧台账 + 顶部筛选 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" class="left-col">
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="8"
                :xl="8"
                class="left-col">
               <div class="left-panel">
                  <div class="left-header">
                     <el-form :model="searchForm" inline>
              <el-form :model="searchForm"
                       inline>
                        <el-form-item prop="dateType">
                           <el-radio-group v-model="searchForm.dateType" size="small" @change="handleDateTypeChange">
                  <el-radio-group v-model="searchForm.dateType"
                                  size="small"
                                  @change="handleDateTypeChange">
                              <el-radio-button label="day">日</el-radio-button>
                              <el-radio-button label="month">月</el-radio-button>
                           </el-radio-group>
                        </el-form-item>
                        <el-form-item label="日期:" prop="dateRange">
                           <el-date-picker
                              v-model="searchForm.dateRange"
                <el-form-item label="日期:"
                              prop="dateRange">
                  <el-date-picker v-model="searchForm.dateRange"
                              :type="searchForm.dateType === 'day' ? 'date' : 'daterange'"
                              range-separator="至"
                              start-placeholder="开始日期"
@@ -24,41 +32,40 @@
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD"
                              style="width: 200px"
                              @change="handleDateRangeChange"
                           />
                                  @change="handleDateRangeChange" />
                        </el-form-item>
                     </el-form>
                  </div>
                  <PIMTable
                     rowKey="id"
            <PIMTable rowKey="id"
                     :column="leftTableColumn"
                     :tableData="leftTableData"
                     :tableLoading="tableLoading"
                     :page="page"
                     @row-click="handleLeftRowClick"
                     @pagination="pagination"
                  ></PIMTable>
                      @pagination="pagination"></PIMTable>
               </div>
            </el-col>
            <!-- 右侧明细 -->
            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" class="right-col">
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="16"
                :xl="16"
                class="right-col">
               <div class="right-panel">
                  <el-form inline>
                     <el-form-item>
                        <el-button type="primary" @click="handleOut">导出</el-button>
                <el-button type="primary"
                           @click="handleOut">导出</el-button>
                     </el-form-item>
                  </el-form>
                  <PIMTable
                     rowKey="id"
            <PIMTable rowKey="id"
                     :column="tableColumn"
                     :tableData="tableData"
                     :page="page1"
                     :tableLoading="tableLoading1"
                     style="margin-right: 20px;"
                     @pagination="pagination1"
                  ></PIMTable>
                      @pagination="pagination1"></PIMTable>
               </div>
            </el-col>
         </el-row>
@@ -70,7 +77,10 @@
import {onMounted, ref} from "vue";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import {salesLedgerProductionAccountingListProductionDetails, salesLedgerProductionAccountingList} from "@/api/productionManagement/productionCosting.js";
  import {
    salesLedgerProductionAccountingListProductionDetails,
    salesLedgerProductionAccountingList,
  } from "@/api/productionManagement/productionCosting.js";
const { proxy } = getCurrentInstance();
const tableColumn = ref([
@@ -84,16 +94,16 @@
      prop: "schedulingUserName",
    minWidth: 100,
   },
   {
      label: "合同号",
      prop: "salesContractNo",
    minWidth: 100,
   },
   {
      label: "客户名称",
      prop: "customerName",
    minWidth: 100,
   },
    // {
    //   label: "合同号",
    //   prop: "salesContractNo",
    //   minWidth: 100,
    // },
    // {
    //   label: "客户名称",
    //   prop: "customerName",
    //   minWidth: 100,
    // },
   {
      label: "产品大类",
      prop: "productName",
@@ -140,23 +150,21 @@
   },
   {
      label: "产量",
      prop: "outputNum",
      prop: "finishedNum",
    minWidth: 100,
  },
   {
      label: "工资",
      prop: "wages",
    minWidth: 100,
   },
   {
      label: "合格率",
      prop: "outputRate",
    minWidth: 100,
    formatData: (val) => {
      if (val == null || val === '') return '-'
      return parseFloat(val).toFixed(2)
      formatData: val => {
        if (val == null || val === "") return "-";
        return parseFloat(val).toFixed(2);
    },
   },
]);
@@ -191,19 +199,19 @@
});
const { searchForm } = toRefs(data);
const pagination = (obj) => {
  const pagination = obj => {
   page.current = obj.page;
   page.size = obj.limit;
   getList();
};
const pagination1 = (obj) => {
  const pagination1 = obj => {
  page1.current = obj.page;
  page1.size = obj.limit;
   getList1();
};
const handleDateRangeChange = (value) => {
  const handleDateRangeChange = value => {
   if (value) {
    if (searchForm.value.dateType === "day") {
      searchForm.value.entryDate = value;
@@ -211,46 +219,46 @@
      searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
      searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
    }
   } else {
      searchForm.value.entryDate = undefined;
      searchForm.value.entryDateStart = undefined;
      searchForm.value.entryDateEnd = undefined;
   }
  reloadData()
    reloadData();
};
const getList = () => {
   tableLoading.value = true;
   const params = { ...searchForm.value, ...page };
  salesLedgerProductionAccountingList(params).then((res) => {
    salesLedgerProductionAccountingList(params)
      .then(res => {
      const records = res.data.records || [];
    leftTableData.value = records;
      page.total = res.data.total || 0;
   }).finally(() => {
    tableLoading.value = false;
  })
      .finally(() => {
        tableLoading.value = false;
      });
};
const getList1 = () => {
  tableLoading1.value = true;
  const params = { ...page1, ...searchForm.value };
  salesLedgerProductionAccountingListProductionDetails(params).then((res) => {
    tableData.value = res.data.records || [];;
    salesLedgerProductionAccountingListProductionDetails(params)
      .then(res => {
        tableData.value = res.data.records || [];
    page1.total = res.data.total || 0;
  }).finally(() => {
    tableLoading1.value = false;
  })
      .finally(() => {
        tableLoading1.value = false;
      });
};
// 构建左侧汇总台账(按生产人汇总产量、工资等)
const buildLeftTableData = (records) => {
  const buildLeftTableData = records => {
   const map = {};
   records.forEach((item) => {
    records.forEach(item => {
      const key = item.schedulingUserName || "未知";
      if (!map[key]) {
         map[key] = {
@@ -271,29 +279,34 @@
};
// 左侧日/月切换
const handleDateTypeChange = (value) => {
  const handleDateTypeChange = value => {
   // 这里只作为筛选条件的一部分,直接重新查询列表
  if (value === "day") {
    searchForm.value.entryDate = dayjs().format("YYYY-MM-DD");
    searchForm.value.dateRange = searchForm.value.entryDate
      searchForm.value.dateRange = searchForm.value.entryDate;
  } else {
    searchForm.value.entryDateStart = dayjs().startOf("month").format("YYYY-MM-DD");
      searchForm.value.entryDateStart = dayjs()
        .startOf("month")
        .format("YYYY-MM-DD");
    searchForm.value.entryDateEnd = dayjs().endOf("month").format("YYYY-MM-DD");
    searchForm.value.dateRange = [searchForm.value.entryDateStart, searchForm.value.entryDateEnd]
      searchForm.value.dateRange = [
        searchForm.value.entryDateStart,
        searchForm.value.entryDateEnd,
      ];
  }
  reloadData()
    reloadData();
};
const reloadData = () => {
  page.current = 1;
  page1.current = 1;
  getList();
  tableData.value = []
}
    tableData.value = [];
  };
// 点击左侧行,刷右侧明细(按生产人过滤)
const handleLeftRowClick = (row) => {
  const handleLeftRowClick = row => {
   searchForm.value.schedulingUserName = row.schedulingUserName || "";
   handleQuery();
};
@@ -305,7 +318,6 @@
  getList1();
};
// 导出
const handleOut = () => {
   ElMessageBox.confirm("选中的内容将被导出,是否确认导出?", "导出", {
@@ -314,7 +326,11 @@
      type: "warning",
   })
      .then(() => {
         proxy.download("/salesLedger/productionAccounting/export", {}, "生产核算.xlsx");
        proxy.download(
          "/salesLedger/productionAccounting/export",
          {},
          "生产核算.xlsx"
        );
      })
      .catch(() => {
         proxy.$modal.msg("已取消");