| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="content-layout"> |
| | | <el-row :gutter="16" class="content-row"> |
| | | <!-- 左侧台账 + 顶部筛选 --> |
| | | <div class="left-panel"> |
| | | <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-item prop="dateType"> |
| | |
| | | end-placeholder="结束日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" |
| | | style="width: 200px" |
| | | @change="handleDateRangeChange" |
| | | /> |
| | | </el-form-item> |
| | |
| | | :tableData="leftTableData" |
| | | :tableLoading="tableLoading" |
| | | :page="page" |
| | | :height="200" |
| | | @row-click="handleLeftRowClick" |
| | | @pagination="pagination" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <!-- 右侧明细(原有内容) --> |
| | | <div class="right-panel"> |
| | | <div class="header-filters"> |
| | | <el-button @click="handleOut" class="ml10">导出</el-button> |
| | | </div> |
| | | <!-- 右侧明细 --> |
| | | <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-form-item> |
| | | </el-form> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page1" |
| | | :tableLoading="tableLoading" |
| | | :tableLoading="tableLoading1" |
| | | style="margin-right: 20px;" |
| | | @pagination="pagination1" |
| | | ></PIMTable> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "生产日期", |
| | | prop: "scheduleDate", |
| | | prop: "schedulingDate", |
| | | minWidth: 100, |
| | | }, |
| | | { |
| | |
| | | label: "合格率", |
| | | prop: "outputRate", |
| | | minWidth: 100, |
| | | |
| | | formatData: (val) => { |
| | | if (val == null || val === '') return '-' |
| | | return parseFloat(val).toFixed(2) |
| | | }, |
| | | }, |
| | | ]); |
| | | |
| | |
| | | schedulingUserName: "", |
| | | salesContractNo: "", |
| | | dateType: "day", |
| | | dateRange: undefined, |
| | | entryDate: [ |
| | | dayjs().format("YYYY-MM-DD"), |
| | | dayjs().add(1, "day").format("YYYY-MM-DD"), |
| | | ], // 录入日期 |
| | | entryDateStart: dayjs().format("YYYY-MM-DD"), |
| | | entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"), |
| | | dateRange: dayjs().format("YYYY-MM-DD"), |
| | | entryDate: dayjs().format("YYYY-MM-DD"), |
| | | entryDateStart: undefined, |
| | | entryDateEnd: undefined, |
| | | }, |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | |
| | | const params = { ...searchForm.value, ...page }; |
| | | |
| | | salesLedgerProductionAccountingList(params).then((res) => { |
| | | tableLoading.value = false; |
| | | const records = res.data.records || []; |
| | | leftTableData.value = records; |
| | | page.total = res.data.total || 0; |
| | | }); |
| | | }).finally(() => { |
| | | tableLoading.value = false; |
| | | }) |
| | | |
| | | |
| | | |
| | | }; |
| | | |
| | |
| | | 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; |
| | | }); |
| | | }).finally(() => { |
| | | tableLoading1.value = false; |
| | | }) |
| | | }; |
| | | |
| | | // 构建左侧汇总台账(按生产人汇总产量、工资等) |
| | |
| | | }; |
| | | |
| | | // 左侧日/月切换 |
| | | const handleDateTypeChange = () => { |
| | | const handleDateTypeChange = (value) => { |
| | | // 这里只作为筛选条件的一部分,直接重新查询列表 |
| | | searchForm.value.dateRange = undefined; |
| | | searchForm.value.entryDate = undefined; |
| | | searchForm.value.entryDateStart = undefined; |
| | | searchForm.value.entryDateEnd = undefined; |
| | | if (value === "day") { |
| | | searchForm.value.entryDate = dayjs().format("YYYY-MM-DD"); |
| | | searchForm.value.dateRange = searchForm.value.entryDate |
| | | } else { |
| | | 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] |
| | | } |
| | | |
| | | reloadData() |
| | | }; |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .content-layout { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 16px; |
| | | .content-row { |
| | | width: 100%; |
| | | } |
| | | |
| | | .left-panel { |
| | | flex: 0 0 50%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | .content-row .left-col, |
| | | .content-row .right-col { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .left-panel, |
| | | .right-panel { |
| | | flex: 0 0 50%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .left-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .left-title { |