文档管理 树形菜单 新增修改优化 生产加工模块的 数据tags 显示 生产人的匹配

zhang_12370

6 天以前 807df6dedd5078e0dd9f6515a8e1ea93e19a6f52

 src/views/production/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-container">
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
@@ -39,12 +39,20 @@
          :border="true"
          style="width: 100%;height: calc(100vh - 26em)"
      >
        <template #coal="{ row }">
        <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>      <!-- 分页组件 -->
@@ -70,7 +78,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";
@@ -81,10 +89,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},
@@ -119,6 +131,20 @@
// 使用煤种数据组合式函数
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);
@@ -134,10 +160,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>

@@ -179,8 +221,9 @@
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;

  .el-tag {
  .coal-tag {
    margin-right: 4px;
    margin-bottom: 4px;

@@ -188,5 +231,10 @@
      margin-right: 0;
    }
  }

  .no-data {
    color: #999;
    font-style: italic;
  }
}
</style>