优化生产管理接口及表格字段

张诺

3 天以前 c7afec3ad75b22bc8b96d8129956913c2b473d9b

 src/views/production/index.vue

@@ -1,260 +1,141 @@
<template>
  <div class="production-container">
        <el-form :inline="true" :model="searchForm" class="search-form" style="width: 100%">
          <el-form-item label="搜索">
            <el-input v-model="searchForm.searchAll" placeholder="请输入关键词" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
        <el-input
          v-model="queryParams.searchAll"
          placeholder="请输入关键词"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 主要内容区域 -->
    <el-card>
      <el-button type="success" :icon="Plus" @click="handleAddBatch">新增加工</el-button>
      <el-button type="danger" :icon="Delete">删除</el-button>
      <el-button type="info" :icon="Download">导出</el-button>
      <ETable :loading="loading" :table-data="tableData" :columns="columns" @selection-change="handleSelectionChange"
        @edit="handleEdit" @view-detail="handleViewDetail" :show-selection="true" :border="true" :maxHeight="480" />
      <Pagination v-model:currentPage="pagination.currentPage" v-model:pageSize="pagination.pageSize"
        :total="pagination.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      <!-- 操作按钮 -->
      <div class="toolbar">
        <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>
      </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 }">
          <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>
          </div>
        </template>
      </ETable>      <!-- 分页组件 -->
      <Pagination
        :layout="'total, prev, pager, next, jumper'"
        :total="total"
        v-model:page="queryParams.current"
        :limit="queryParams.size"
        @pagination="handlePageChange"
      />
    </el-card>
    <ProductionDialog v-model:visible="dialogVisible"  ref="childRef" :type="dialogType"
      @success="handleDialogSuccess" />

    <!-- 生产对话框 -->
    <!-- handleProductionAndProcessing -->
    <ProductionDialog
      v-model:visible="dialogVisible"
      ref="dialogRef"
      :type="dialogType"
      @update:productionAndProcessing="handleProductionAndProcessing"
      @success="handleDialogSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Delete, Download, List } 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";
const childRef = ref(null);
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: "category", label: "煤种", minWidth: 150 },
  { prop: "unit", label: "单位", minWidth: 120 },
  { prop: "productionVolume", label: "生产数量", minWidth: 150 },
  { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' },
  { prop: "productionQuantity", label: "生产数量", minWidth: 120 },
  { prop: "laborCost", label: "人工成本", minWidth: 150 },
  { prop: "materialCost", label: "原料成本", minWidth: 120 },
  { prop: "equipmentCost", label: "设备费用", minWidth: 143 },
  { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 },
  { prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143 },
  { prop: "totalCost", label: "总成本", minWidth: 150 },
  { prop: "totalPrice", label: "总售价", minWidth: 150 },
  { prop: "profit", label: "利润", minWidth: 100 },
  { prop: "reviewer", label: "复记人", minWidth: 120 },
  { prop: "date", label: "日期", minWidth: 150 },
];

// 搜索表单数据
const searchForm = reactive({
  searchAll:""
});
// 使用表格数据组合式函数
const {
  tableData,
  loading,
  total,
  selectedRows,
  queryParams,
  getList,
  handleSearch,
  handleReset,
  handlePageChange,
  handleSelectionChange,
  deleteSelected
} = useTableData(getProductionMasterList, { pageSize: 10 });

// 表格数据
const tableData = ref([]);
const loading = ref(false);
// 使用对话框组合式函数
const {
  dialogVisible,
  dialogType,
  dialogRef,
  openDialog,
  handleDialogSuccess: onDialogSuccess
} = useDialog();

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
// 使用煤种数据组合式函数
const { getCoalNameById, getCoalData } = useCoalData();

// 选中的行数据
const selectedRows = ref([]);

// 弹窗相关
const dialogVisible = ref(false);
const dialogType = ref("add");
const currentRow = ref(null);

// 生产明细对话框控制
const detailDialogVisible = ref(false);
const currentDetailRow = ref(null);

// 获取表格数据
const getList = async () => {
  loading.value = true;
  try {
    const params = {
      ...searchForm,
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
    };
    // const res = await getProductionList(params)
    // 假数据
    const res = {
      data: {
        list: [
          {
            sequence: 1,
            category: "无烟煤",
            unit: "吨",
            productionVolume: 100,
            laborCost: "300",
            materialCost: "200",
            equipmentCost: "100",
            totalCost: "600",
            totalPrice: "800",
            profit: "200",
            reviewer: "张三",
            date: "2023-10-01",
          },
          {
            sequence: 12,
            category: "无烟煤",
            unit: "吨",
            productionVolume: 100,
            laborCost: "3100",
            materialCost: "2020",
            equipmentCost: "1300",
            totalCost: "6030",
            totalPrice: "8300",
            profit: "2300",
            reviewer: "张三",
            date: "2025-10-02",
          },
        ],
        total: 2,
      },
    };

    tableData.value = res.data.list;
    pagination.total = res.data.total;
  } catch (error) {
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
// 处理生产数据更新
const handleProductionAndProcessing = (row, rows) => {
  const index = tableData.value.findIndex(item => item.id === rows.id);
  if (index !== -1) {
    tableData.value[index] = { ...tableData.value[index], ...row };
  }
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 搜索方法
const handleSearch = () => {
  pagination.currentPage = 1;
  getList();
};

// 重置搜索
const handleReset = () => {
  searchForm.keyword = "";
  searchForm.addUser = "";
  handleSearch();
};

// 新增加工
const handleAddBatch = () => {
  dialogType.value = "add";
  dialogVisible.value = true;
  childRef.value.Initialization();
};

// 编辑
const handleEdit = (row) => {
  currentRow.value = row;
  dialogType.value = "edit";
  dialogVisible.value = true;
};

// 打开生产明细对话框
const handleViewDetail = (row) => {
  currentDetailRow.value = row;
  detailDialogVisible.value = true;
};

// 处理弹窗提交
const handleDialogSuccess = async (formData) => {
  try {
    if (dialogType.value === "add") {
      await addProduction(formData);
      ElMessage.success("新增成功");
    } else {
      await updateProduction({
        ...formData,
        id: currentRow.value.id,
      });
      ElMessage.success("更新成功");
    }
// 对话框成功回调
const handleDialogSuccess = () => {
  onDialogSuccess(() => {
    getList();
  } catch (error) {
    ElMessage.error(dialogType.value === "add" ? "新增失败" : "更新失败");
  }
    ElMessage.success("操作成功");
  });
};

// 处理生产明细弹窗提交
const handleDetailDialogSuccess = async (formData) => {
  try {
    ElMessage.success("保存成功");
    getList();
  } catch (error) {
    ElMessage.error("保存失败");
  }
};

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该记录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        await deleteProduction(row.id);
        ElMessage.success("删除成功");
        getList();
      } catch (error) {
        console.error("删除失败:", error);
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 导出
const handleExport = async (row) => {
  try {
    const res = await exportProduction({ id: row.id });
    const blob = new Blob([res], { type: "application/vnd.ms-excel" });
    const fileName = `生产加工记录_${new Date().getTime()}.xlsx`;
    if ("download" in document.createElement("a")) {
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  } catch (error) {
    ElMessage.error("导出失败");
  }
};

// 处理每页显示数量变化
const handleSizeChange = (val) => {
  pagination.pageSize = val;
  getList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val;
  getList();
};

// 组件挂载时加载数据
onMounted(() => {
onMounted(async () => {
  await getCoalData(); // 预加载煤种数据
  getList();
});
</script>
@@ -277,7 +158,7 @@
    width: 20%;
  }
}
.search-form{
.search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -291,4 +172,18 @@
    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;
    }
  }
}
</style>