| | |
| | | <!-- 左侧台账 + 顶部筛选 --> |
| | | <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> |
| | | |
| | | <el-form :model="searchForm" inline> |
| | | <el-form-item prop="dateType"> |
| | | <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" |
| | | :type="searchForm.dateType === 'day' ? 'date' : 'daterange'" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 300px" |
| | | @change="handleDateRangeChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :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" |
| | | :tableLoading="tableLoading" |
| | | :page="page1" |
| | | :tableLoading="tableLoading1" |
| | | 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, |
| | | 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"); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | |
| | | const page1 = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | |
| | | const data = reactive({ |
| | | searchForm: { |
| | | schedulingUserName: "", |
| | | salesContractNo: "", |
| | | 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"), |
| | | dateType: "day", |
| | | dateRange: dayjs().format("YYYY-MM-DD"), |
| | | entryDate: dayjs().format("YYYY-MM-DD"), |
| | | entryDateStart: undefined, |
| | | entryDateEnd: undefined, |
| | | }, |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const pagination = (obj) => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | const changeDaterange = (value) => { |
| | | |
| | | const pagination1 = (obj) => { |
| | | page1.current = obj.page; |
| | | page1.size = obj.limit; |
| | | getList1(); |
| | | }; |
| | | |
| | | const handleDateRangeChange = (value) => { |
| | | if (value) { |
| | | searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD"); |
| | | searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD"); |
| | | if (searchForm.value.dateType === "day") { |
| | | searchForm.value.entryDate = value; |
| | | } else { |
| | | 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; |
| | | } |
| | | handleQuery(); |
| | | reloadData() |
| | | }; |
| | | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | const params = { ...searchForm.value, ...page }; |
| | | params.dateType = dateType.value; |
| | | params.entryDate = undefined |
| | | productionAccountingListPage(params).then((res) => { |
| | | tableLoading.value = false; |
| | | |
| | | salesLedgerProductionAccountingList(params).then((res) => { |
| | | const records = res.data.records || []; |
| | | tableData.value = records; |
| | | leftTableData.value = records; |
| | | page.total = res.data.total || 0; |
| | | buildLeftTableData(records); |
| | | }); |
| | | }).finally(() => { |
| | | tableLoading.value = false; |
| | | }) |
| | | |
| | | |
| | | |
| | | }; |
| | | |
| | | const getList1 = () => { |
| | | tableLoading1.value = true; |
| | | const params = { ...page1, ...searchForm.value }; |
| | | salesLedgerProductionAccountingListProductionDetails(params).then((res) => { |
| | | tableData.value = res.data.records || [];; |
| | | page1.total = res.data.total || 0; |
| | | }).finally(() => { |
| | | tableLoading1.value = false; |
| | | }) |
| | | }; |
| | | |
| | | // 构建左侧汇总台账(按生产人汇总产量、工资等) |
| | |
| | | }; |
| | | |
| | | // 左侧日/月切换 |
| | | const handleDateTypeChange = () => { |
| | | const handleDateTypeChange = (value) => { |
| | | // 这里只作为筛选条件的一部分,直接重新查询列表 |
| | | handleQuery(); |
| | | 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() |
| | | }; |
| | | |
| | | const reloadData = () => { |
| | | page.current = 1; |
| | | page1.current = 1; |
| | | getList(); |
| | | tableData.value = [] |
| | | } |
| | | |
| | | // 点击左侧行,刷右侧明细(按生产人过滤) |
| | | const handleLeftRowClick = (row) => { |
| | | 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; |