From d00e0da6c175e09e67f332a297de302c7629a7a2 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Tue, 7 Jul 2026 14:51:51 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E7=89=A9=E6=96=99=E6=A1=A3?=
 =?UTF-8?q?=E6=A1=88-=E8=AF=A6=E6=83=85-=E8=B0=83=E6=95=B4=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/erp/product/product/ProductForm.vue | 325 +++++++-----------
 src/views/erp/product/product/index.vue       | 113 +++---
 2 files changed, 183 insertions(+), 255 deletions(-)

diff --git a/src/views/erp/product/product/ProductForm.vue b/src/views/erp/product/product/ProductForm.vue
index 6b134beb..aadde152 100644
--- a/src/views/erp/product/product/ProductForm.vue
+++ b/src/views/erp/product/product/ProductForm.vue
@@ -13,19 +13,14 @@
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogBarCodeLabel')" prop="barCode">
               <el-row :gutter="10" style="width: 100%">
                 <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="20">
-                  <el-input
-                    v-model="formData.barCode"
+                  <el-input v-model="formData.barCode"
                     :placeholder="t('FactoryModeling.ProductInformation.dialogBarCodePlaceholder')"
-                    :disabled="Boolean(formData.isCode) || formType === 'update'"
-                  />
+                    :disabled="Boolean(formData.isCode) || formType === 'update'" />
                 </el-col>
                 <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
                   <div>
-                    <el-switch
-                      v-model="formData.isCode"
-                      :disabled="formType === 'update'"
-                      @change="handleCodeAutoChange"
-                    />
+                    <el-switch v-model="formData.isCode" :disabled="formType === 'update'"
+                      @change="handleCodeAutoChange" />
                   </div>
                 </el-col>
               </el-row>
@@ -34,11 +29,8 @@
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogCategoryTypeLabel')" prop="categoryType">
               <el-radio-group v-model="formData.categoryType" @change="handleCategoryTypeChange">
-                <el-radio
-                  v-for="dict in getIntDictOptions(DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE)"
-                  :key="dict.value"
-                  :label="dict.value"
-                >
+                <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE)" :key="dict.value"
+                  :label="dict.value">
                   {{ dict.label }}
                 </el-radio>
               </el-radio-group>
@@ -46,31 +38,22 @@
           </el-col>
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogNameLabel')" prop="name">
-              <el-input v-model="formData.name" :placeholder="t('FactoryModeling.ProductInformation.dialogNamePlaceholder')" />
+              <el-input v-model="formData.name"
+                :placeholder="t('FactoryModeling.ProductInformation.dialogNamePlaceholder')" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogCategoryLabel')" prop="categoryId">
-              <el-tree-select
-                v-model="formData.categoryId"
-                :data="categoryList"
-                :props="defaultProps"
-                check-strictly
-                default-expand-all
-                :placeholder="t('FactoryModeling.ProductInformation.dialogCategoryPlaceholder')"
-                class="w-1/1"
-              />
+              <el-tree-select v-model="formData.categoryId" :data="categoryList" :props="defaultProps" check-strictly
+                default-expand-all :placeholder="t('FactoryModeling.ProductInformation.dialogCategoryPlaceholder')"
+                class="w-1/1" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogUnitLabel')" prop="unitId">
-              <el-select v-model="formData.unitId" clearable :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1">
-                <el-option
-                  v-for="unit in unitList"
-                  :key="unit.id"
-                  :label="unit.name"
-                  :value="unit.id"
-                />
+              <el-select v-model="formData.unitId" clearable
+                :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1">
+                <el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
                 <template #footer>
                   <div v-if="!isAddingUnit" class="px-10px py-6px">
                     <el-button text bg size="small" @click.stop="onAddUnit('unit')">
@@ -78,12 +61,7 @@
                     </el-button>
                   </div>
                   <div v-else class="px-10px py-6px">
-                    <el-input
-                      v-model="unitInputName"
-                      size="small"
-                      placeholder="请输入单位名称"
-                      class="mb-6px"
-                    />
+                    <el-input v-model="unitInputName" size="small" placeholder="请输入单位名称" class="mb-6px" />
                     <div class="flex gap-6px">
                       <el-button type="primary" size="small" @click.stop="onConfirmAddUnit('unit')">确定</el-button>
                       <el-button size="small" @click.stop="clearAddUnit()">取消</el-button>
@@ -93,15 +71,13 @@
               </el-select>
             </el-form-item>
           </el-col>
-               <el-col v-if="formData.categoryType === 2 || formData.categoryType === 3" :span="12">
-            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchaseUnitLabel')" prop="purchaseUnitId">
-              <el-select v-model="formData.purchaseUnitId" clearable :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1" @change="handlePurchaseUnitChange">
-                <el-option
-                  v-for="unit in unitList"
-                  :key="unit.id"
-                  :label="unit.name"
-                  :value="unit.id"
-                />
+          <el-col v-if="formData.categoryType === 2 || formData.categoryType === 3" :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchaseUnitLabel')"
+              prop="purchaseUnitId">
+              <el-select v-model="formData.purchaseUnitId" clearable
+                :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1"
+                @change="handlePurchaseUnitChange">
+                <el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
                 <template #footer>
                   <div v-if="!isAddingPurchaseUnit" class="px-10px py-6px">
                     <el-button text bg size="small" @click.stop="onAddUnit('purchaseUnit')">
@@ -109,14 +85,10 @@
                     </el-button>
                   </div>
                   <div v-else class="px-10px py-6px">
-                    <el-input
-                      v-model="unitInputName"
-                      size="small"
-                      placeholder="请输入单位名称"
-                      class="mb-6px"
-                    />
+                    <el-input v-model="unitInputName" size="small" placeholder="请输入单位名称" class="mb-6px" />
                     <div class="flex gap-6px">
-                      <el-button type="primary" size="small" @click.stop="onConfirmAddUnit('purchaseUnit')">确定</el-button>
+                      <el-button type="primary" size="small"
+                        @click.stop="onConfirmAddUnit('purchaseUnit')">确定</el-button>
                       <el-button size="small" @click.stop="clearAddUnit()">取消</el-button>
                     </div>
                   </div>
@@ -124,74 +96,58 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col v-if="formData.categoryType === 2 || formData.categoryType === 3" :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchaseUnitConvertLabel')"
+              prop="purchaseUnitConvertQuantity">
+              <el-input-number v-model="formData.purchaseUnitConvertQuantity" :min="0" :step="0.01" class="!w-1/1" />
+              <div class="form-item-tip">{{ purchaseUnitConvertTipText }}</div>
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStandardLabel')" prop="standard">
-              <el-input v-model="formData.standard" :placeholder="t('FactoryModeling.ProductInformation.dialogStandardPlaceholder')" />
+              <el-input v-model="formData.standard"
+                :placeholder="t('FactoryModeling.ProductInformation.dialogStandardPlaceholder')" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogExpiryDayLabel')" prop="expiryDay">
-              <el-input-number
-                v-model="formData.expiryDay"
-                :placeholder="t('FactoryModeling.ProductInformation.dialogExpiryDayPlaceholder')"
-                :min="0"
-                :precision="0"
-                class="!w-1/1"
-              />
+              <el-input-number v-model="formData.expiryDay"
+                :placeholder="t('FactoryModeling.ProductInformation.dialogExpiryDayPlaceholder')" :min="0"
+                :precision="0" class="!w-1/1" />
             </el-form-item>
           </el-col>
           <el-col v-if="isProductCategory" :span="12">
             <el-form-item label="关联设备" prop="devices">
-              <el-input
-                :model-value="deviceDisplayText"
-                placeholder="点击选择设备"
-                readonly
-                @click="openDeviceSelectDialog"
-              />
+              <el-input :model-value="deviceDisplayText" placeholder="点击选择设备" readonly
+                @click="openDeviceSelectDialog" />
             </el-form-item>
           </el-col>
           <el-col v-if="isProductCategory" :span="12">
             <el-form-item label="关联模具" prop="molds">
-              <el-input
-                :model-value="moldDisplayText"
-                placeholder="点击选择模具"
-                readonly
-                @click="openMoldSelectDialog"
-              />
+              <el-input :model-value="moldDisplayText" placeholder="点击选择模具" readonly @click="openMoldSelectDialog" />
             </el-form-item>
           </el-col>
           <el-col v-if="formData.categoryType === 1" :span="12">
-            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPackagingSchemeLabel')" prop="packagingSchemes">
-              <el-input
-                :model-value="displayPackagingSchemeText"
-                readonly
-                clearable
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPackagingSchemeLabel')"
+              prop="packagingSchemes">
+              <el-input :model-value="displayPackagingSchemeText" readonly clearable
                 :placeholder="t('FactoryModeling.ProductInformation.dialogPackagingSchemePlaceholder')"
-                @click="openPackagingSchemeDialog"
-                @clear="handlePackagingSchemeClear"
-              />
+                @click="openPackagingSchemeDialog" @clear="handlePackagingSchemeClear" />
             </el-form-item>
           </el-col>
           <el-col v-if="formData.categoryType === 2 || formData.categoryType === 3" :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogSupplierLabel')" prop="suppliers">
-              <el-input
-                :model-value="displaySupplierText"
-                readonly
-                clearable
+              <el-input :model-value="displaySupplierText" readonly clearable
                 :placeholder="t('FactoryModeling.ProductInformation.dialogSupplierPlaceholder')"
-                @click="openSupplierDialog"
-                @clear="handleSupplierClear"
-              />
+                @click="openSupplierDialog" @clear="handleSupplierClear" />
             </el-form-item>
           </el-col>
           <el-col v-if="formData.categoryType === 3" :span="8">
-            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogSparePartLevelLabel')" prop="sparePartLevel">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogSparePartLevelLabel')"
+              prop="sparePartLevel">
               <el-radio-group v-model="formData.sparePartLevel">
-                <el-radio
-                  v-for="dict in getIntDictOptions(DICT_TYPE.SPARE_PARTS_LEVEL)"
-                  :key="dict.value"
-                  :label="dict.value"
-                >
+                <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.SPARE_PARTS_LEVEL)" :key="dict.value"
+                  :label="dict.value">
                   {{ dict.label }}
                 </el-radio>
               </el-radio-group>
@@ -206,29 +162,22 @@
             </el-form-item>
           </el-col>
           <el-col v-if="formData.categoryType === 3" :span="8">
-            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchaseCycleLabel')" prop="purchaseCycle">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchaseCycleLabel')"
+              prop="purchaseCycle">
               <el-input-number v-model="formData.purchaseCycle" :min="0" :precision="0" class="!w-1/1" />
             </el-form-item>
           </el-col>
           <el-col v-if="formData.categoryType === 3" :span="8">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogBrandLabel')" prop="brand">
-              <el-input v-model="formData.brand" :placeholder="t('FactoryModeling.ProductInformation.dialogBrandPlaceholder')" />
-            </el-form-item>
-          </el-col>
-          <el-col v-if="formData.categoryType === 2 || formData.categoryType === 3" :span="12">
-            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchaseUnitConvertLabel')" prop="purchaseUnitConvertQuantity">
-              <el-input-number v-model="formData.purchaseUnitConvertQuantity" :min="0" :step="0.01" class="!w-1/1" />
-              <div class="form-item-tip">{{ purchaseUnitConvertTipText }}</div>
+              <el-input v-model="formData.brand"
+                :placeholder="t('FactoryModeling.ProductInformation.dialogBrandPlaceholder')" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStatusLabel')" prop="status">
               <el-radio-group v-model="formData.status">
-                <el-radio
-                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-                  :key="dict.value"
-                  :label="dict.value"
-                >
+                <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
+                  :label="dict.value">
                   {{ dict.label }}
                 </el-radio>
               </el-radio-group>
@@ -237,21 +186,15 @@
           <el-col v-if="formType === 'update'" :span="24">
             <div class="flex items-start gap-20px">
               <el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl" class="flex-1">
-                <QrcodeActionCard
-                  :image-url="formData.qrcodeUrl"
-                  :print-id="formData.id"
-                  :print-template-type="1"
+                <QrcodeActionCard :image-url="formData.qrcodeUrl" :print-id="formData.id" :print-template-type="1"
                   :print-title="`${formData.name || '产品'}二维码打印预览`"
-                  :empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')"
-                  :refresh-url="getQrcodeRefreshUrl()"
-                  :refresh-disabled="!formData.id || !formData.barCode"
-                  refresh-confirm-text="确认刷新该产品二维码吗？"
-                  :template-json="formData.templateJson"
-                  :print-data="buildPrintData()"
-                  @refresh-success="handleQrcodeRefreshSuccess"
-                />
+                  :empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')" :refresh-url="getQrcodeRefreshUrl()"
+                  :refresh-disabled="!formData.id || !formData.barCode" refresh-confirm-text="确认刷新该产品二维码吗？"
+                  :template-json="formData.templateJson" :print-data="buildPrintData()"
+                  @refresh-success="handleQrcodeRefreshSuccess" />
               </el-form-item>
-              <el-form-item :label="t('FactoryModeling.ProductInformation.images')" prop="images" class="image-form-item flex-1">
+              <el-form-item :label="t('FactoryModeling.ProductInformation.images')" prop="images"
+                class="image-form-item flex-1">
                 <UploadImg v-model="formData.images" />
               </el-form-item>
             </div>
@@ -262,8 +205,10 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogRemarkLabel')" prop="remark" style="margin-top: 8px;">
-              <el-input type="textarea" v-model="formData.remark" :placeholder="t('FactoryModeling.ProductInformation.dialogRemarkPlaceholder')" />
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogRemarkLabel')" prop="remark"
+              style="margin-top: 8px;">
+              <el-input type="textarea" v-model="formData.remark"
+                :placeholder="t('FactoryModeling.ProductInformation.dialogRemarkPlaceholder')" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -277,15 +222,9 @@
       </el-button>
     </div>
   </div>
-  <TableSelectDialog
-    ref="deviceSelectDialogRef"
-    title="选择设备"
-    :columns="deviceColumns"
-    :fetch-api="fetchDeviceLedgerPage"
-    row-key="id"
-    @confirm="handleDeviceSelectConfirm"
-    :query-params="mergedQueryParams"
-  >
+  <TableSelectDialog ref="deviceSelectDialogRef" title="选择设备" :columns="deviceColumns"
+    :fetch-api="fetchDeviceLedgerPage" row-key="id" @confirm="handleDeviceSelectConfirm"
+    :query-params="mergedQueryParams">
     <template #header>
       <el-form ref="searchFormRef" :model="searchParams" :inline="true">
         <el-form-item label="设备编号" prop="deviceCode">
@@ -295,21 +234,15 @@
           <el-input v-model="searchParams.deviceName" placeholder="请输入名称" clearable />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
+          <el-button type="primary" @click="handleSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText')
+            }}</el-button>
           <el-button @click="resetSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText') }}</el-button>
         </el-form-item>
       </el-form>
     </template>
   </TableSelectDialog>
-  <TableSelectDialog
-    ref="moldSelectDialogRef"
-    title="选择模具"
-    :columns="moldColumns"
-    :fetch-api="MoldBrandApi.getMoldPage"
-    row-key="id"
-    @confirm="handleMoldSelectConfirm"
-    :query-params="mergedMoldQueryParams"
-  >
+  <TableSelectDialog ref="moldSelectDialogRef" title="选择模具" :columns="moldColumns" :fetch-api="MoldBrandApi.getMoldPage"
+    row-key="id" @confirm="handleMoldSelectConfirm" :query-params="mergedMoldQueryParams">
     <template #header>
       <el-form ref="searchMoldFormRef" :model="searchMoldParams" :inline="true">
         <el-form-item label="模具编号" prop="code">
@@ -319,88 +252,83 @@
           <el-input v-model="searchMoldParams.name" placeholder="请输入名称" clearable />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleMoldSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
+          <el-button type="primary" @click="handleMoldSearch">{{
+            t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
           <el-button @click="resetMoldSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText') }}</el-button>
         </el-form-item>
       </el-form>
     </template>
   </TableSelectDialog>
-  <Dialog :title="t('FactoryModeling.ProductInformation.dialogPackagingSchemeTitle')" v-model="packagingSchemeDialogVisible" :appendToBody="true" width="1200">
+  <Dialog :title="t('FactoryModeling.ProductInformation.dialogPackagingSchemeTitle')"
+    v-model="packagingSchemeDialogVisible" :appendToBody="true" width="1200">
     <el-form ref="searchPackagingSchemeFormRef" :model="searchPackagingSchemeParams" :inline="true" class="-mb-15px">
       <el-form-item :label="t('ErpStock.PackagingScheme.code')" prop="code">
-        <el-input v-model="searchPackagingSchemeParams.code" :placeholder="t('ErpStock.PackagingScheme.placeholderCode')" clearable />
+        <el-input v-model="searchPackagingSchemeParams.code"
+          :placeholder="t('ErpStock.PackagingScheme.placeholderCode')" clearable />
       </el-form-item>
       <el-form-item :label="t('ErpStock.PackagingScheme.name')" prop="name">
-        <el-input v-model="searchPackagingSchemeParams.name" :placeholder="t('ErpStock.PackagingScheme.placeholderName')" clearable />
+        <el-input v-model="searchPackagingSchemeParams.name"
+          :placeholder="t('ErpStock.PackagingScheme.placeholderName')" clearable />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handlePackagingSchemeSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
-        <el-button @click="resetPackagingSchemeSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText') }}</el-button>
+        <el-button type="primary" @click="handlePackagingSchemeSearch">{{
+          t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
+        <el-button @click="resetPackagingSchemeSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText')
+          }}</el-button>
         <el-button type="primary" plain @click="openPackagingSchemeAdd">{{ t('action.create') }}</el-button>
       </el-form-item>
     </el-form>
-    <el-table
-      ref="packagingSchemeTableRef"
-      v-loading="packagingSchemeDialogLoading"
-      :data="packagingSchemeDialogList"
-      :row-key="(row) => row.id"
-      :show-overflow-tooltip="true"
-      :stripe="true"
-      @selection-change="handlePackagingSchemeSelectionChange"
-    >
+    <el-table ref="packagingSchemeTableRef" v-loading="packagingSchemeDialogLoading" :data="packagingSchemeDialogList"
+      :row-key="(row) => row.id" :show-overflow-tooltip="true" :stripe="true"
+      @selection-change="handlePackagingSchemeSelectionChange">
       <el-table-column type="selection" width="55" reserve-selection />
       <el-table-column :label="t('ErpStock.PackagingScheme.code')" prop="code" minWidth="160" />
       <el-table-column :label="t('ErpStock.PackagingScheme.name')" prop="name" minWidth="160" />
       <el-table-column :label="t('ErpStock.PackagingScheme.packageQuantity')" prop="packageQuantity" minWidth="120" />
-      <el-table-column :label="t('ErpStock.PackagingScheme.palletPackageQuantity')" prop="palletPackageQuantity" minWidth="120" />
-      <el-table-column :label="t('ErpStock.PackagingScheme.palletTotalQuantity')" prop="palletTotalQuantity" minWidth="120" />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.dialogDefaultStatusLabel')" width="130" align="center">
+      <el-table-column :label="t('ErpStock.PackagingScheme.palletPackageQuantity')" prop="palletPackageQuantity"
+        minWidth="120" />
+      <el-table-column :label="t('ErpStock.PackagingScheme.palletTotalQuantity')" prop="palletTotalQuantity"
+        minWidth="120" />
+      <el-table-column :label="t('FactoryModeling.ProductInformation.dialogDefaultStatusLabel')" width="130"
+        align="center">
         <template #default="{ row }">
-          <el-radio
-            v-model="packagingSchemeDefaultId"
-            :label="row.id"
-            :disabled="!packagingSchemeSelectedRows.some((item) => item.id === row.id)"
-          >
+          <el-radio v-model="packagingSchemeDefaultId" :label="row.id"
+            :disabled="!packagingSchemeSelectedRows.some((item) => item.id === row.id)">
             &nbsp;
           </el-radio>
         </template>
       </el-table-column>
     </el-table>
     <div class="flex justify-end mt-15px">
-      <Pagination
-        v-model:page="packagingSchemeDialogPageNo"
-        v-model:limit="packagingSchemeDialogPageSize"
-        :total="packagingSchemeDialogTotal"
-        @pagination="getPackagingSchemeDialogList"
-      />
+      <Pagination v-model:page="packagingSchemeDialogPageNo" v-model:limit="packagingSchemeDialogPageSize"
+        :total="packagingSchemeDialogTotal" @pagination="getPackagingSchemeDialogList" />
     </div>
     <template #footer>
       <el-button type="primary" @click="confirmPackagingSchemeSelect">{{ t('common.ok') }}</el-button>
       <el-button @click="packagingSchemeDialogVisible = false">{{ t('common.cancel') }}</el-button>
     </template>
   </Dialog>
-  <Dialog :title="t('FactoryModeling.ProductInformation.dialogSupplierTitle')" v-model="supplierDialogVisible" :appendToBody="true" width="1000">
+  <Dialog :title="t('FactoryModeling.ProductInformation.dialogSupplierTitle')" v-model="supplierDialogVisible"
+    :appendToBody="true" width="1000">
     <el-form ref="searchSupplierFormRef" :model="searchSupplierParams" :inline="true" class="-mb-15px">
       <el-form-item :label="t('ErpPurchase.Supplier.name')" prop="name">
-        <el-input v-model="searchSupplierParams.name" :placeholder="t('ErpPurchase.Supplier.placeholderName')" clearable />
+        <el-input v-model="searchSupplierParams.name" :placeholder="t('ErpPurchase.Supplier.placeholderName')"
+          clearable />
       </el-form-item>
       <el-form-item :label="t('ErpPurchase.Supplier.mobile')" prop="mobile">
-        <el-input v-model="searchSupplierParams.mobile" :placeholder="t('ErpPurchase.Supplier.placeholderMobile')" clearable />
+        <el-input v-model="searchSupplierParams.mobile" :placeholder="t('ErpPurchase.Supplier.placeholderMobile')"
+          clearable />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleSupplierSearch">{{ t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
-        <el-button @click="resetSupplierSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText') }}</el-button>
+        <el-button type="primary" @click="handleSupplierSearch">{{
+          t('FactoryModeling.ProductInformation.searchButtonText') }}</el-button>
+        <el-button @click="resetSupplierSearch">{{ t('FactoryModeling.ProductInformation.resetButtonText')
+          }}</el-button>
       </el-form-item>
     </el-form>
-    <el-table
-      ref="supplierTableRef"
-      v-loading="supplierDialogLoading"
-      :data="supplierDialogList"
-      :row-key="(row) => row.id"
-      :show-overflow-tooltip="true"
-      :stripe="true"
-      @selection-change="handleSupplierSelectionChange"
-    >
+    <el-table ref="supplierTableRef" v-loading="supplierDialogLoading" :data="supplierDialogList"
+      :row-key="(row) => row.id" :show-overflow-tooltip="true" :stripe="true"
+      @selection-change="handleSupplierSelectionChange">
       <el-table-column type="selection" width="55" reserve-selection />
       <el-table-column :label="t('ErpPurchase.Supplier.name')" prop="name" minWidth="160" />
       <el-table-column :label="t('ErpPurchase.Supplier.contact')" prop="contact" minWidth="100" />
@@ -408,23 +336,16 @@
       <el-table-column :label="t('ErpPurchase.Supplier.telephone')" prop="telephone" minWidth="120" />
       <el-table-column label="是否默认供应商" width="130" align="center">
         <template #default="{ row }">
-          <el-radio
-            v-model="supplierDefaultId"
-            :label="row.id"
-            :disabled="!supplierSelectedRows.some((item) => item.id === row.id)"
-          >
+          <el-radio v-model="supplierDefaultId" :label="row.id"
+            :disabled="!supplierSelectedRows.some((item) => item.id === row.id)">
             &nbsp;
           </el-radio>
         </template>
       </el-table-column>
     </el-table>
     <div class="flex justify-end mt-15px">
-      <Pagination
-        v-model:page="supplierDialogPageNo"
-        v-model:limit="supplierDialogPageSize"
-        :total="supplierDialogTotal"
-        @pagination="getSupplierDialogList"
-      />
+      <Pagination v-model:page="supplierDialogPageNo" v-model:limit="supplierDialogPageSize"
+        :total="supplierDialogTotal" @pagination="getSupplierDialogList" />
     </div>
     <template #footer>
       <el-button type="primary" @click="confirmSupplierSelect">{{ t('common.ok') }}</el-button>
@@ -557,11 +478,11 @@ const normalizeRelationList = (
   fallbackPrefix: string
 ): { id: number; name: string }[] => {
   const fallbackMap = new Map<number, string>()
-  ;(fallbackRows || []).forEach((row) => {
-    const id = Number(row?.id)
-    if (!Number.isFinite(id)) return
-    fallbackMap.set(id, getRelationName(row, nameKeys, fallbackPrefix, id))
-  })
+    ; (fallbackRows || []).forEach((row) => {
+      const id = Number(row?.id)
+      if (!Number.isFinite(id)) return
+      fallbackMap.set(id, getRelationName(row, nameKeys, fallbackPrefix, id))
+    })
   const parseArray = (source: unknown): any[] => {
     if (Array.isArray(source)) return source
     if (typeof source === 'string') {
@@ -1025,8 +946,8 @@ const open = async (type: string, id?: number) => {
         '模具'
       )
       const templateJson = productData?.templateJson
-      const parsedTemplateJson = typeof templateJson === 'string' 
-        ? JSON.parse(templateJson) 
+      const parsedTemplateJson = typeof templateJson === 'string'
+        ? JSON.parse(templateJson)
         : templateJson
       formData.value = {
         ...formData.value,
diff --git a/src/views/erp/product/product/index.vue b/src/views/erp/product/product/index.vue
index 401db34f..2862213d 100644
--- a/src/views/erp/product/product/index.vue
+++ b/src/views/erp/product/product/index.vue
@@ -147,6 +147,18 @@
                     />
                     <el-empty v-else :image-size="64" :description="t('FactoryModeling.ProductInformation.qrcodeEmpty')" />
                   </div>
+                  <div class="detail-qrcode-box">
+                    <div class="detail-image-label">{{ t('FactoryModeling.ProductInformation.qrcode') }}</div>
+                    <el-image
+                      v-if="productDetail.qrcodeUrl"
+                      class="detail-qrcode"
+                      :src="productDetail.qrcodeUrl"
+                      fit="contain"
+                      :preview-src-list="[productDetail.qrcodeUrl]"
+                      preview-teleported
+                    />
+                    <el-empty v-else :image-size="48" :description="t('FactoryModeling.ProductInformation.qrcodeEmpty')" />
+                  </div>
                 </div>
 
                 <div class="detail-info">
@@ -170,6 +182,21 @@
                     <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogUnitLabel') }}：</span>
                     <span class="field-value">{{ formatValue(productDetail.unitName) }}</span>
                   </div>
+                       <!-- 物料/备件类型：供应商 -->
+                  <template v-if="productDetail.categoryType === 2 || productDetail.categoryType === 3">
+                    <div class="detail-field">
+                      <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogPurchaseUnitLabel') }}：</span>
+                      <span class="field-value">{{ formatValue(productDetail.purchaseUnitName) }}</span>
+                    </div>
+                    <div class="detail-field">
+                      <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogPurchaseUnitConvertLabel') }}：</span>
+                      <span class="field-value">{{ formatPurchaseUnitConvert(productDetail) }}</span>
+                    </div>
+                    <!-- <div class="detail-field">
+                      <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogSupplierLabel') }}：</span>
+                      <span class="field-value">{{ formatSupplierText(productDetail) }}</span>
+                    </div> -->
+                  </template>
                   <div class="detail-field">
                     <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogStandardLabel') }}：</span>
                     <span class="field-value">{{ formatValue(productDetail.standard || productDetail.deviceSpec || productDetail.model) }}</span>
@@ -193,21 +220,6 @@
                       <span class="field-value">{{ formatMoldText(productDetail) }}</span>
                     </div>
                   </template>
-                  <!-- 物料/备件类型：供应商 -->
-                  <template v-if="productDetail.categoryType === 2 || productDetail.categoryType === 3">
-                    <div class="detail-field">
-                      <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogPurchaseUnitLabel') }}：</span>
-                      <span class="field-value">{{ formatValue(productDetail.purchaseUnitName) }}</span>
-                    </div>
-                    <div class="detail-field">
-                      <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogPurchaseUnitConvertLabel') }}：</span>
-                      <span class="field-value">{{ formatPurchaseUnitConvert(productDetail) }}</span>
-                    </div>
-                    <div class="detail-field">
-                      <span class="field-label">{{ t('FactoryModeling.ProductInformation.dialogSupplierLabel') }}：</span>
-                      <span class="field-value">{{ formatSupplierText(productDetail) }}</span>
-                    </div>
-                  </template>
                   <!-- 备件类型：备件等级、是否易损件、采购周期、品牌 -->
                   <template v-if="productDetail.categoryType === 3">
                     <div class="detail-field">
@@ -257,43 +269,37 @@
                       <span>默认供应商：{{ defaultSupplierText }}</span>
                     </div>
                   </template>
-                  <div class="detail-qrcode-box" style="margin-top: 12px;">
-                    <div class="detail-image-label">{{ t('FactoryModeling.ProductInformation.qrcode') }}</div>
-                    <el-image
-                      v-if="productDetail.qrcodeUrl"
-                      class="detail-qrcode"
-                      :src="productDetail.qrcodeUrl"
-                      fit="contain"
-                      :preview-src-list="[productDetail.qrcodeUrl]"
-                      preview-teleported
-                    />
-                    <el-empty v-else :image-size="48" :description="t('FactoryModeling.ProductInformation.qrcodeEmpty')" />
-                  </div>
-                </div>
 
-                <!-- 产品类型：包装方案表格 -->
-                <div v-if="productDetail.categoryType === 1" class="detail-table-box">
-                  <div class="detail-table-title">
-                    <span>{{ t('FactoryModeling.ProductInformation.dialogPackagingSchemeLabel') }}</span>
-                    <span>共 {{ packagingSchemeCount }} 个</span>
+                  <!-- 产品类型：包装方案表格 -->
+                  <div v-if="productDetail.categoryType === 1" class="detail-table-box">
+                    <div class="detail-table-title">
+                      <span>{{ t('FactoryModeling.ProductInformation.dialogPackagingSchemeLabel') }}</span>
+                      <span>共 {{ packagingSchemeCount }} 个</span>
+                    </div>
+                    <el-table :data="productDetail.packagingSchemes || []" border size="small" :show-overflow-tooltip="true">
+                      <el-table-column :label="t('ErpStock.PackagingScheme.name')" prop="packagingSchemeName" min-width="130" />
+                      <el-table-column :label="t('ErpStock.PackagingScheme.packageQuantity')" prop="packageQuantity" min-width="100" />
+                      <el-table-column :label="t('ErpStock.PackagingScheme.palletPackageQuantity')" prop="palletPackageQuantity" min-width="100" />
+                    </el-table>
                   </div>
-                  <el-table :data="productDetail.packagingSchemes || []" border size="small" :show-overflow-tooltip="true">
-                    <el-table-column :label="t('ErpStock.PackagingScheme.name')" prop="packagingSchemeName" min-width="130" />
-                    <el-table-column :label="t('ErpStock.PackagingScheme.packageQuantity')" prop="packageQuantity" min-width="100" />
-                    <el-table-column :label="t('ErpStock.PackagingScheme.palletPackageQuantity')" prop="palletPackageQuantity" min-width="100" />
-                  </el-table>
-                </div>
-                <!-- 物料/备件类型：供应商表格 -->
-                <div v-else-if="productDetail.categoryType === 2 || productDetail.categoryType === 3" class="detail-table-box">
-                  <div class="detail-table-title">
-                    <span>{{ t('FactoryModeling.ProductInformation.dialogSupplierLabel') }}</span>
-                    <span>共 {{ supplierCount }} 个</span>
+                  <!-- 物料/备件类型：供应商表格 -->
+                  <div v-else-if="productDetail.categoryType === 2 || productDetail.categoryType === 3" class="detail-table-box">
+                    <div class="detail-table-title">
+                      <span>{{ t('FactoryModeling.ProductInformation.dialogSupplierLabel') }}</span>
+                      <span>共 {{ supplierCount }} 个</span>
+                    </div>
+                    <el-table :data="productDetail.suppliers || []" border size="small" :show-overflow-tooltip="true">
+                      <el-table-column :label="t('ErpPurchase.Supplier.name')" prop="supplierName" min-width="160">
+                        <template #default="{ row }">{{ formatValue(row.supplierName) }}</template>
+                      </el-table-column>
+                      <el-table-column :label="t('ErpPurchase.Supplier.contact')" prop="supplierContact" min-width="100">
+                        <template #default="{ row }">{{ formatValue(row.supplierContact) }}</template>
+                      </el-table-column>
+                      <el-table-column :label="t('ErpPurchase.Supplier.mobile')" prop="supplierMobile" min-width="120">
+                        <template #default="{ row }">{{ formatValue(row.supplierMobile) }}</template>
+                      </el-table-column>
+                    </el-table>
                   </div>
-                  <el-table :data="productDetail.suppliers || []" border size="small" :show-overflow-tooltip="true">
-                    <el-table-column :label="t('ErpPurchase.Supplier.name')" prop="supplierName" min-width="160" />
-                    <el-table-column :label="t('ErpPurchase.Supplier.contact')" prop="supplierContact" min-width="100" />
-                    <el-table-column :label="t('ErpPurchase.Supplier.mobile')" prop="supplierMobile" min-width="120" />
-                  </el-table>
                 </div>
               </div>
             </template>
@@ -658,7 +664,7 @@ const formatDateTime = (value: any) => {
 
 .detail-card {
   display: grid;
-  grid-template-columns: 200px 1fr 300px 1fr;
+  grid-template-columns: 220px minmax(0, 1fr) minmax(360px, 500px);
   gap: 16px;
   padding: 16px;
   border: 1px solid var(--el-border-color-lighter);
@@ -687,6 +693,7 @@ const formatDateTime = (value: any) => {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  align-items: center;
 }
 
 .detail-qrcode {
@@ -721,7 +728,7 @@ const formatDateTime = (value: any) => {
 .detail-image-item {
   display: flex;
   flex-direction: column;
-  align-items: left;
+  align-items: center;
   gap: 6px;
 }
 
@@ -762,6 +769,7 @@ const formatDateTime = (value: any) => {
 }
 
 .detail-table-box {
+  margin-top: 20px;
   min-width: 0;
 }
 
@@ -783,8 +791,7 @@ const formatDateTime = (value: any) => {
     grid-template-columns: 1fr 1fr;
   }
 
-  .detail-summary,
-  .detail-table-box {
+  .detail-summary {
     grid-column: 1 / -1;
   }
 }