feat(生产管理): 增强BOM信息展示并调整工序配置

ZN

2026-04-01 533d1e4ae9ffeafdd9ff65ddcefd7bd005f7d78c

 src/views/productionManagement/productStructure/index.vue

@@ -1,9 +1,10 @@
<template>
  <div class="app-container">
    <div style="text-align: right; margin-bottom: 10px;">
      <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
      <el-button type="warning" plain icon="Download" @click="handleExport"
        :disabled="selectedRows.length !== 1">导出</el-button>
      <el-button type="info" plain icon="Upload" @click="handleImport"
        v-hasPermi="['product:bom:import']">导入</el-button>
      <el-button type="warning" plain icon="Download" @click="handleExport" :disabled="selectedRows.length !== 1"
        v-hasPermi="['product:bom:export']">导出</el-button>
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="danger" plain @click="handleBatchDelete" :disabled="selectedRows.length === 0">删除</el-button>
    </div>
@@ -20,6 +21,9 @@
    <el-dialog v-model="dialogVisible" :title="operationType === 'add' ? '新增BOM' : '编辑BOM'" width="600px"
      @close="closeDialog">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="BOM名称" prop="bomName">
          <el-input v-model="form.bomName" placeholder="请输入BOM名称" clearable />
        </el-form-item>
        <el-form-item label="产品名称" prop="productModelId">
          <el-button type="primary" @click="showProductSelectDialog = true">
            {{ form.productName || '选择产品' }}
@@ -33,8 +37,8 @@
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>

@@ -42,35 +46,21 @@
    <ProductSelectDialog v-model="showProductSelectDialog" @confirm="handleProductSelect" single />

    <!-- BOM导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
        :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
        :auto-upload="false" drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <ImportDialog ref="uploadRef" v-model="upload.open" :title="upload.title" :action="upload.url"
      :headers="upload.headers" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess" :show-download-template="true" @confirm="submitFileForm"
      @download-template="handleDownloadTemplate" @close="handleImportClose" />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineAsyncComponent } from "vue";
import { getToken } from "@/utils/auth";
import { listPage, add, update, batchDelete, exportBom } from "@/api/productionManagement/productBom.js";
import { listPage, add, update, batchDelete, exportBom, downloadTemplate } from "@/api/productionManagement/productBom.js";
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
import ImportDialog from "@/components/Dialog/ImportDialog.vue";

const router = useRouter()
const { proxy } = getCurrentInstance()
@@ -83,6 +73,11 @@
    dataType: 'slot',
    slot: "detail",
    minWidth: 140
  },
  {
    label: "BOM名称",
    prop: "bomName",
    minWidth: 160
  },
  {
    label: "产品名称",
@@ -164,6 +159,7 @@
const data = reactive({
  form: {
    id: undefined,
    bomName: "",
    productName: "",
    productModelName: "",
    productModelId: "",
@@ -171,6 +167,7 @@
    version: ""
  },
  rules: {
    bomName: [{ required: true, message: "请输入BOM名称", trigger: "blur" }],
    productModelId: [{ required: true, message: "请选择产品", trigger: "change" }],
    version: [{ required: true, message: "请输入版本号", trigger: "blur" }]
  }
@@ -215,6 +212,7 @@
  operationType.value = 'add';
  Object.assign(form.value, {
    id: undefined,
    bomName: "",
    productName: "",
    productModelName: "",
    productModelId: "",
@@ -229,6 +227,7 @@
  operationType.value = 'edit';
  Object.assign(form.value, {
    id: row.id,
    bomName: row.bomName || "",
    productName: row.productName || "",
    productModelName: row.productModelName || "",
    productModelId: row.productModelId || "",
@@ -336,6 +335,11 @@
  upload.open = true;
};

// 关闭导入对话框时清除文件
const handleImportClose = () => {
  proxy.$refs["uploadRef"].clearFiles();
};

//  文件上传中处理
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
@@ -345,7 +349,7 @@
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$refs["uploadRef"].clearFiles();
  if (response.code === 200) {
    proxy.$modal.msgSuccess(response.msg || "导入成功");
    getList();
@@ -397,6 +401,31 @@
  });
};

//  下载模板
const handleDownloadTemplate = async () => {
  const res = await downloadTemplate();
  // 返回的数据是否为空
  if (!res) {
    proxy.$modal.msgError("下载失败，返回数据为空");
    return;
  }

  const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const downloadElement = document.createElement('a');
  const href = window.URL.createObjectURL(blob);

  downloadElement.href = href;
  downloadElement.download = "BOM模板.xlsx";

  document.body.appendChild(downloadElement);
  downloadElement.click();

  document.body.removeChild(downloadElement);
  window.URL.revokeObjectURL(href);

  proxy.$modal.msgSuccess("下载成功");
};

// 查看详情
const showDetail = (row) => {
  router.push({