yyb
16 小时以前 d1733a6f090c0caf96c30c4b2f4f08c7d43c8d3c
src/views/productionManagement/productStructure/index.vue
@@ -1,23 +1,49 @@
<template>
  <div class="app-container">
    <div style="text-align: right; margin-bottom: 10px;">
      <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 style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
      <!-- 搜索区域 -->
      <div class="search-form">
        <el-form :inline="true"
                 :model="searchForm">
          <el-form-item label="产品类型"
                        style="margin-bottom: 0px !important;">
            <el-select v-model="searchForm.dictCode"
                       style="width: 200px;"
                       placeholder="请选择产品类型"
                       clearable>
              <el-option v-for="option in productTypeOptions"
                         :key="option.dictCode"
                         :label="option.dictLabel"
                         :value="option.dictCode" />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-bottom: 0px !important;">
            <el-button type="primary"
                       @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮区域 -->
      <div>
        <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>
    </div>
    <PIMTable rowKey="id"
              :column="tableColumn"
@@ -46,12 +72,16 @@
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-form-item label="产品名称"
                      prop="productModelId">
          <el-button type="primary"
                     @click="showProductSelectDialog = true">
            {{ form.productName || '选择产品' }}-{{ form.productModelName }}
          </el-button>
        <el-form-item label="产品类型"
                      prop="dictCode">
          <el-select v-model="form.dictCode"
                     placeholder="请选择产品类型"
                     clearable>
            <el-option v-for="option in productTypeOptions"
                       :key="option.dictCode"
                       :label="option.dictLabel"
                       :value="option.dictCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="版本号"
                      prop="version">
@@ -74,10 +104,6 @@
                   @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
    <!-- 产品选择弹窗 -->
    <ProductSelectDialog v-model="showProductSelectDialog"
                         @confirm="handleProductSelect"
                         single />
    <!-- BOM导入对话框 -->
    <ImportDialog ref="uploadRef"
                  v-model="upload.open"
@@ -88,6 +114,7 @@
                  :on-progress="handleFileUploadProgress"
                  :on-success="handleFileSuccess"
                  :show-download-template="true"
                  :show-product-type-select="true"
                  @confirm="submitFileForm"
                  @download-template="handleDownloadTemplate"
                  @close="handleImportClose" />
@@ -115,7 +142,8 @@
  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";
  import ImportDialog from "./ImportDialog.vue";
  import { getDicts } from "@/api/system/dict/data";
  const router = useRouter();
  const { proxy } = getCurrentInstance();
@@ -132,26 +160,41 @@
      minWidth: 140,
    },
    {
      label: "产品编码",
      prop: "productCode",
      label: "产品类型",
      prop: "dictLabel",
      dataType: "tag",
      formatType: params => {
        if (params == "3.5砌块") {
          return "warning";
        } else if (params == "5.0砌块") {
          return "primary";
        } else if (params == "板材") {
          return "success";
        } else {
          return "info";
        }
      },
    },
    // {
    //   label: "产品编码",
    //   prop: "productCode",
      minWidth: 160,
    },
    {
      label: "产品名称",
      prop: "productName",
    //   minWidth: 160,
    // },
    // {
    //   label: "产品名称",
    //   prop: "productName",
      minWidth: 160,
    },
    {
      label: "规格型号",
      prop: "productModelName",
      minWidth: 140,
    },
    //   minWidth: 160,
    // },
    // {
    //   label: "规格型号",
    //   prop: "productModelName",
    //   minWidth: 140,
    // },
    {
      label: "版本号",
      prop: "version",
      width: 100,
    },
    {
      label: "备注",
@@ -217,21 +260,23 @@
  const data = reactive({
    form: {
      id: undefined,
      productName: "",
      productModelName: "",
      productModelId: "",
      dictCode: "",
      remark: "",
      version: "",
    },
    rules: {
      productModelId: [
        { required: true, message: "请选择产品", trigger: "change" },
      dictCode: [
        { required: true, message: "请选择产品类型", trigger: "change" },
      ],
      version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
    },
    searchForm: {
      dictCode: "",
    },
    productTypeOptions: [],
  });
  const { form, rules } = toRefs(data);
  const { form, rules, searchForm, productTypeOptions } = toRefs(data);
  // 表格选择数据
  const handleSelectionChange = selection => {
@@ -245,12 +290,37 @@
    getList();
  };
  // 获取产品类型字典
  const getProductTypeOptions = () => {
    getDicts("product_type")
      .then(res => {
        if (res.code === 200) {
          productTypeOptions.value = res.data;
        }
      })
      .catch(err => {
        console.error("获取产品类型字典失败:", err);
      });
  };
  // 搜索
  const handleSearch = () => {
    getList();
  };
  // 重置
  const handleReset = () => {
    searchForm.value.dictCode = "";
    getList();
  };
  // 查询列表
  const getList = () => {
    tableLoading.value = true;
    listPage({
      current: page.current,
      size: page.size,
      dictCode: searchForm.value.dictCode,
    })
      .then(res => {
        const records = res?.data?.records || [];
@@ -270,9 +340,7 @@
    operationType.value = "add";
    Object.assign(form.value, {
      id: undefined,
      productName: "",
      productModelName: "",
      productModelId: "",
      dictCode: "",
      remark: "",
      version: "",
    });
@@ -284,9 +352,7 @@
    operationType.value = "edit";
    Object.assign(form.value, {
      id: row.id,
      productName: row.productName || "",
      productModelName: row.productModelName || "",
      productModelId: row.productModelId || "",
      dictCode: row.dictCode || "",
      remark: row.remark || "",
      version: row.version || "",
    });
@@ -508,6 +574,14 @@
  };
  onMounted(() => {
    getProductTypeOptions();
    getList();
  });
</script>
<style scoped lang="scss">
  .search-form {
    :deep(.search-form) {
      margin-bottom: 0px !important;
    }
  }
</style>