| | |
| | | <el-form :inline="true" :model="queryParams" class="search-form"> |
| | | <el-form-item label="搜索"> |
| | | <el-input |
| | | v-model="queryParams.searchAll" |
| | | placeholder="请输入关键词" |
| | | clearable |
| | | v-model="queryParams.searchAll" |
| | | placeholder="请输入关键词" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | |
| | | </el-button> |
| | | </div> <!-- 数据表格 --> |
| | | <ETable |
| | | :showOverflowTooltip="false" |
| | | :loading="loading" |
| | | :table-data="tableData" |
| | | :columns="columns" |
| | | :current-page="queryParams.current" |
| | | :page-size="queryParams.size" |
| | | @selection-change="handleSelectionChange" |
| | | @edit="row => openDialog('edit', row)" |
| | | :show-selection="true" |
| | | :border="true" |
| | | :maxHeight="480" |
| | | > <template #coal="{ row }"> |
| | | :showOverflowTooltip="false" |
| | | :loading="loading" |
| | | :table-data="tableData" |
| | | :columns="columns" |
| | | :current-page="queryParams.current" |
| | | :page-size="queryParams.size" |
| | | @selection-change="handleSelectionChange" |
| | | @edit="row => openDialog('edit', row)" |
| | | :show-selection="true" |
| | | :border="true" |
| | | :maxHeight="480" |
| | | > |
| | | <template #coal="{ row }"> |
| | | <div class="coal-tags"> |
| | | <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small"> |
| | | {{ getCoalNameById(coal) }} |
| | |
| | | </template> |
| | | </ETable> <!-- 分页组件 --> |
| | | <Pagination |
| | | :layout="'total, prev, pager, next, jumper'" |
| | | :total="total" |
| | | v-model:page="queryParams.current" |
| | | :limit="queryParams.size" |
| | | @pagination="handlePageChange" |
| | | :layout="'total, prev, pager, next, jumper'" |
| | | :total="total" |
| | | v-model:page="queryParams.current" |
| | | :limit="queryParams.size" |
| | | @pagination="handlePageChange" |
| | | /> |
| | | </el-card> |
| | | |
| | | <!-- 生产对话框 --> |
| | | <!-- handleProductionAndProcessing --> |
| | | <ProductionDialog |
| | | v-model:visible="dialogVisible" |
| | | ref="dialogRef" |
| | | :type="dialogType" |
| | | @update:productionAndProcessing="handleProductionAndProcessing" |
| | | @success="handleDialogSuccess" |
| | | v-model:visible="dialogVisible" |
| | | ref="dialogRef" |
| | | :type="dialogType" |
| | | @update:productionAndProcessing="handleProductionAndProcessing" |
| | | @success="handleDialogSuccess" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { Plus, Delete } from "@element-plus/icons-vue"; |
| | | import {onMounted} from "vue"; |
| | | import {ElMessage} from "element-plus"; |
| | | import {Plus, Delete} from "@element-plus/icons-vue"; |
| | | import ProductionDialog from "./components/ProductionDialog.vue"; |
| | | import ETable from "@/components/Table/ETable.vue"; |
| | | import Pagination from "@/components/Pagination/index.vue"; |
| | | import { getProductionMasterList, delPM } from "@/api/production"; |
| | | import { parseCoalArray } from "@/utils/production"; |
| | | import { useTableData } from "./components/useTableData.js"; |
| | | import { useDialog } from "./components/useDialog.js"; |
| | | import { useCoalData } from "./components/useCoalData.js"; |
| | | import {getProductionMasterList, delPM} from "@/api/production"; |
| | | import {parseCoalArray} from "@/utils/production"; |
| | | import {useTableData} from "./components/useTableData.js"; |
| | | import {useDialog} from "./components/useDialog.js"; |
| | | import {useCoalData} from "./components/useCoalData.js"; |
| | | |
| | | // 表格列配置 |
| | | const columns = [ |
| | | { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' }, |
| | | { prop: "productionQuantity", label: "生产数量", minWidth: 120 }, |
| | | { prop: "laborCost", label: "人工成本", minWidth: 150 }, |
| | | { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 }, |
| | | { prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143 }, |
| | | { prop: "totalCost", label: "总成本", minWidth: 150 }, |
| | | {prop: "coal", label: "煤种", minWidth: 150, slot: 'coal'}, |
| | | {prop: "productionQuantity", label: "生产数量", minWidth: 120}, |
| | | {prop: "laborCost", label: "人工成本", minWidth: 150}, |
| | | {prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120}, |
| | | {prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143}, |
| | | {prop: "totalCost", label: "总成本", minWidth: 150}, |
| | | ]; |
| | | |
| | | // 使用表格数据组合式函数 |
| | |
| | | handlePageChange, |
| | | handleSelectionChange, |
| | | deleteSelected |
| | | } = useTableData(getProductionMasterList, { pageSize: 10 }); |
| | | } = useTableData(getProductionMasterList, {pageSize: 10}); |
| | | |
| | | // 使用对话框组合式函数 |
| | | const { |
| | |
| | | } = useDialog(); |
| | | |
| | | // 使用煤种数据组合式函数 |
| | | const { getCoalNameById, getCoalData } = useCoalData(); |
| | | const {getCoalNameById, getCoalData} = useCoalData(); |
| | | |
| | | // 处理生产数据更新 |
| | | const handleProductionAndProcessing = (row, rows) => { |
| | | const index = tableData.value.findIndex(item => item.id === rows.id); |
| | | if (index !== -1) { |
| | | tableData.value[index] = { ...tableData.value[index], ...row }; |
| | | tableData.value[index] = {...tableData.value[index], ...row}; |
| | | } |
| | | }; |
| | | |
| | |
| | | width: 20%; |
| | | } |
| | | } |
| | | |
| | | .search-form { |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | |
| | | .coal-tags { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 4px; |
| | | |
| | | |
| | | .el-tag { |
| | | margin-right: 4px; |
| | | margin-bottom: 4px; |
| | | |
| | | |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |