| | |
| | | :column="leftTableColumn" |
| | | :tableData="leftTableData" |
| | | :tableLoading="tableLoading" |
| | | @rowClick="handleLeftRowClick" |
| | | ></PIMTable> |
| | | :page="page" |
| | | :height="200" |
| | | @row-click="handleLeftRowClick" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | |
| | | <!-- 右侧明细(原有内容) --> |
| | |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :page="page1" |
| | | :tableLoading="tableLoading" |
| | | style="margin-right: 20px;" |
| | | @pagination="pagination" |
| | | @pagination="pagination1" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script setup> |
| | | import {onMounted, ref} from "vue"; |
| | | import { |
| | | listCustomer, |
| | | } from "@/api/basicData/customerFile.js"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import dayjs from "dayjs"; |
| | | import {productionAccountingListPage} from "@/api/productionManagement/productionCosting.js"; |
| | | import {salesLedgerProductionAccountingListProductionDetails, salesLedgerProductionAccountingList} from "@/api/productionManagement/productionCosting.js"; |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "生产日期", |
| | | prop: "schedulingDate", |
| | | width: 120, |
| | | prop: "scheduleDate", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "生产人", |
| | | prop: "schedulingUserName", |
| | | width: 90, |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "合同号", |
| | | prop: "salesContractNo", |
| | | width: 220, |
| | | minWidth: 100, |
| | | }, |
| | | // { |
| | | // label: "客户合同号", |
| | | // prop: "customerContractNo", |
| | | // width: 250, |
| | | // }, |
| | | { |
| | | label: "客户名称", |
| | | prop: "customerName", |
| | | width: 250, |
| | | minWidth: 100, |
| | | }, |
| | | // { |
| | | // label: "项目名称", |
| | | // prop: "projectName", |
| | | // width:300 |
| | | // }, |
| | | { |
| | | label: "产品大类", |
| | | prop: "productCategory", |
| | | width: 160, |
| | | prop: "productName", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "规格型号", |
| | | prop: "specificationModel", |
| | | width: 160, |
| | | prop: "productModelName", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "单位", |
| | | prop: "unit", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "工序", |
| | | prop: "process", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "生产数量", |
| | | prop: "finishedNum", |
| | | width: 100, |
| | | prop: "quantity", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "工时定额", |
| | | prop: "workHours", |
| | | width: 100, |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "工资", |
| | | prop: "wages", |
| | | width: 100, |
| | | minWidth: 100, |
| | | }, |
| | | ]); |
| | | |
| | |
| | | { |
| | | label: "生产人", |
| | | prop: "schedulingUserName", |
| | | width: 120, |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | | label: "产量", |
| | | prop: "finishedNum", |
| | | width: 100, |
| | | }, |
| | | prop: "outputNum", |
| | | minWidth: 100, |
| | | |
| | | }, |
| | | { |
| | | label: "工资", |
| | | prop: "wages", |
| | | width: 100, |
| | | minWidth: 100, |
| | | |
| | | }, |
| | | { |
| | | label: "合格率", |
| | | prop: "qualifiedRate", |
| | | width: 100, |
| | | prop: "outputRate", |
| | | minWidth: 100, |
| | | |
| | | }, |
| | | ]); |
| | | |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const tableLoading1 = ref(false); |
| | | const leftTableData = ref([]); |
| | | // 日 / 月 切换(默认按日) |
| | | const dateType = ref("day"); |
| | |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | |
| | | const page1 = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | |
| | | const data = reactive({ |
| | |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const pagination = (obj) => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | |
| | | const pagination1 = (obj) => { |
| | | page1.current = obj.page; |
| | | page1.size = obj.limit; |
| | | getList1(); |
| | | }; |
| | | |
| | | const changeDaterange = (value) => { |
| | | if (value) { |
| | | searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD"); |
| | |
| | | const params = { ...searchForm.value, ...page }; |
| | | params.dateType = dateType.value; |
| | | params.entryDate = undefined |
| | | productionAccountingListPage(params).then((res) => { |
| | | |
| | | salesLedgerProductionAccountingList(params).then((res) => { |
| | | tableLoading.value = false; |
| | | const records = res.data.records || []; |
| | | tableData.value = records; |
| | | leftTableData.value = records; |
| | | page.total = res.data.total || 0; |
| | | buildLeftTableData(records); |
| | | }); |
| | | |
| | | }; |
| | | |
| | | const getList1 = () => { |
| | | tableLoading1.value = true; |
| | | const params = { ...page1, ...searchForm.value }; |
| | | salesLedgerProductionAccountingListProductionDetails(params).then((res) => { |
| | | tableLoading1.value = false; |
| | | tableData.value = res.data.records || [];; |
| | | page1.total = res.data.total || 0; |
| | | }); |
| | | }; |
| | | |
| | | // 构建左侧汇总台账(按生产人汇总产量、工资等) |
| | |
| | | // 左侧日/月切换 |
| | | const handleDateTypeChange = () => { |
| | | // 这里只作为筛选条件的一部分,直接重新查询列表 |
| | | handleQuery(); |
| | | page.current = 1; |
| | | getList(); |
| | | handleQuery() |
| | | }; |
| | | |
| | | // 点击左侧行,刷右侧明细(按生产人过滤) |
| | |
| | | searchForm.value.schedulingUserName = row.schedulingUserName || ""; |
| | | handleQuery(); |
| | | }; |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | page1.current = 1; |
| | | getList1(); |
| | | }; |
| | | |
| | | |
| | | // 导出 |
| | | const handleOut = () => { |
| | |
| | | <style scoped lang="scss"> |
| | | .content-layout { |
| | | display: flex; |
| | | flex-direction: column; |
| | | 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; |