gaoluyang
2 天以前 df1406d0f571972d033dffd6a93fb4b94febeb56
src/views/production/index.vue
@@ -4,9 +4,9 @@
    <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>
@@ -27,18 +27,19 @@
        </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) }}
@@ -48,47 +49,47 @@
        </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},
];
// 使用表格数据组合式函数
@@ -104,7 +105,7 @@
  handlePageChange,
  handleSelectionChange,
  deleteSelected
} = useTableData(getProductionMasterList, { pageSize: 10 });
} = useTableData(getProductionMasterList, {pageSize: 10});
// 使用对话框组合式函数
const {
@@ -116,13 +117,13 @@
} = 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};
  }
};
@@ -158,6 +159,7 @@
    width: 20%;
  }
}
.search-form {
  display: flex;
  justify-content: space-between;
@@ -172,15 +174,16 @@
    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;
    }