zhang_12370
6 天以前 e48fff7164866d4afb3ec54b587de2c8c25e48de
src/views/production/index.vue
@@ -1,5 +1,5 @@
<template>
  <div class="production-container">
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
@@ -22,10 +22,16 @@
        <el-button type="success" :icon="Plus" @click="openDialog('add')">
          新增加工
        </el-button>
        <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length" @click="() => deleteSelected(delPM)">
        <el-button
          type="danger"
          :icon="Delete"
          :disabled="!selectedRows.length"
          @click="() => deleteSelected(delPM)"
        >
          删除
        </el-button>
      </div>      <!-- 数据表格 -->
      </div>
      <!-- 数据表格 -->
      <ETable
        :showOverflowTooltip="false"
        :loading="loading"
@@ -34,19 +40,33 @@
        :current-page="queryParams.current"
        :page-size="queryParams.size"
        @selection-change="handleSelectionChange"
        @edit="row => openDialog('edit', row)"
        @edit="(row) => openDialog('edit', row)"
        :show-selection="true"
        :border="true"
        :maxHeight="480"
      >        <template #coal="{ row }">
        @viewRow="(row) => (viewRow('viewRow', row))"
        :operations="['edit', 'viewRow']"
        :operationsWidth="200"
        :show-overflow-tooltip="false"
        style="width: 100%; height: calc(100vh - 26em)"
      >
        <template #coalId="{ row }">
          <div class="coal-tags">
            <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small">
              {{ getCoalNameById(coal) }}
            </el-tag>
            <span v-if="!row.coal">--</span>
            <template v-if="row.coalId">
              <el-tag
                v-for="coal in parseCoalArray(row.coalId)"
                :key="coal"
                size="small"
                type="primary"
                class="coal-tag"
              >
                {{ getDisplayCoalName(coal) }}
              </el-tag>
            </template>
            <span v-else class="no-data">--</span>
          </div>
        </template>
      </ETable>      <!-- 分页组件 -->
      </ETable>
      <!-- 分页组件 -->
      <Pagination
        :layout="'total, prev, pager, next, jumper'"
        :total="total"
@@ -69,7 +89,7 @@
</template>
<script setup>
import { onMounted } from "vue";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Delete } from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
@@ -80,10 +100,14 @@
import { useTableData } from "./components/useTableData.js";
import { useDialog } from "./components/useDialog.js";
import { useCoalData } from "./components/useCoalData.js";
import { getCoalInfoList } from "@/api/production";
// 煤种信息列表
const coalInfoList = ref([]);
// 表格列配置
const columns = [
  { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' },
  { prop: "coalId", label: "煤种", minWidth: 150, slot: true },
  { prop: "productionQuantity", label: "生产数量", minWidth: 120 },
  { prop: "laborCost", label: "人工成本", minWidth: 150 },
  { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 },
@@ -103,7 +127,7 @@
  handleReset,
  handlePageChange,
  handleSelectionChange,
  deleteSelected
  deleteSelected,
} = useTableData(getProductionMasterList, { pageSize: 10 });
// 使用对话框组合式函数
@@ -112,15 +136,30 @@
  dialogType,
  dialogRef,
  openDialog,
  handleDialogSuccess: onDialogSuccess
  viewRow,
  handleDialogSuccess: onDialogSuccess,
} = useDialog();
// 使用煤种数据组合式函数
const { getCoalNameById, getCoalData } = useCoalData();
// 获取煤种显示名称(带备用逻辑)
const getDisplayCoalName = (coalId) => {
  // 优先使用 useCoalData 的方法
  let name = getCoalNameById(coalId);
  // 如果没有找到,尝试从 coalInfoList 中查找
  if (name === coalId && coalInfoList.value.length > 0) {
    const found = coalInfoList.value.find((item) => item.id == coalId);
    name = found ? found.coal : coalId;
  }
  return name || coalId;
};
// 处理生产数据更新
const handleProductionAndProcessing = (row, rows) => {
  const index = tableData.value.findIndex(item => item.id === rows.id);
  const index = tableData.value.findIndex((item) => item.id === rows.id);
  if (index !== -1) {
    tableData.value[index] = { ...tableData.value[index], ...row };
  }
@@ -133,10 +172,26 @@
    ElMessage.success("操作成功");
  });
};
// 组件挂载时加载数据
onMounted(async () => {
  await getCoalData(); // 预加载煤种数据
  getList();
  try {
    // 并行加载煤种数据和表格数据
    await Promise.all([
      getCoalData(), // 预加载煤种数据
      (async () => {
        const res = await getCoalInfoList();
        if (res.code === 200) {
          coalInfoList.value = res.data;
        }
      })(),
    ]);
    // 加载表格数据
    getList();
  } catch (error) {
    ElMessage.error("数据加载失败,请刷新页面重试");
  }
});
</script>
@@ -158,9 +213,10 @@
    width: 20%;
  }
}
.search-form {
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
@@ -172,18 +228,25 @@
    margin-left: 10px;
  }
}
.coal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  .el-tag {
  align-items: center;
  .coal-tag {
    margin-right: 4px;
    margin-bottom: 4px;
    &:last-child {
      margin-right: 0;
    }
  }
  .no-data {
    color: #999;
    font-style: italic;
  }
}
</style>