change(mes): 优化物料信息对话框布局，三列布局减少表单的纵向长度

- 将对话框宽度从500px增加到1200px，以便容纳三列内容
- 将标签宽度从120px调整为100px，以在三列布局中节省空间
- 将表单项使用el-row和el-col进行包装，创建三列布局
- 每个el-col的span设置为8（总宽度24的三分之一）
- 添加了:gutter="20"以在列之间提供适当间距

src/views/mes/baseMaterialInfo/index.vue

@@ -252,7 +252,7 @@
         <el-table-column label="ERP信息" align="center" prop="erpId" v-if="columns[0].visible"/>
         <el-table-column label="物料编码" align="center" prop="materialCode" v-if="columns[1].visible"/>
         <el-table-column label="旧物料编码" align="center" prop="oldMaterialCode" v-if="columns[2].visible"/>
-        <el-table-column label="物料名称" align="center" prop="materialName" v-if="columns[3].visible"/>
+        <el-table-column label="物料名称" align="center" prop="materialName" v-if="columns[3].visible" width="220px"/>
 <!--        <el-table-column label="物料类型ID" align="center" prop="materialTypeId" v-if="columns[4].visible"/>-->
         <el-table-column label="物料类型" align="center" prop="matrialTypeName" v-if="columns[4].visible"/>
         <el-table-column label="物料大类" align="center" prop="materialCategoryName" v-if="columns[5].visible"/>
@@ -399,25 +399,29 @@
 </el-row>
 
     <!-- 添加或修改物料信息对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body>
-      <el-form ref="baseMaterialInfoFormRef" :model="form" :rules="rules" label-width="120px">
+      <el-form ref="baseMaterialInfoFormRef" :model="form" :rules="rules" label-width="100px">
-<!--        <el-form-item label="主键标识" prop="materialId">
+        <el-row :gutter="20">
-          <el-input v-model="form.materialId" placeholder="请输入主键标识" />
+          <el-col :span="8">
-        </el-form-item>-->
-<!--        <el-form-item label="ERP信息" prop="erpId">
-          <el-input v-model="form.erpId" placeholder="请输入ERP信息" />
-        </el-form-item>-->
             <el-form-item label="物料编码" prop="materialCode">
               <el-input v-model="form.materialCode" placeholder="请输入物料编码" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="旧物料编码" prop="oldMaterialCode">
               <el-input v-model="form.oldMaterialCode" placeholder="请输入旧物料编码" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="物料名称" prop="materialName">
               <el-input v-model="form.materialName" placeholder="请输入物料名称" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="物料类型" prop="materialTypeId">
-<!--          <el-input v-model="form.materialTypeId" placeholder="请输入物料类型ID" />-->
               <el-select v-model="form.materialTypeId" placeholder="请选择物料类型" @change="materialCategoryIdBymaterialTypeId">
                 <el-option
                     v-for="item in materialTypeList"
@@ -427,21 +431,13 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-
+          </el-col>
-<!--        <el-form-item label="物料大类" prop="materialCategoryId">
+          <el-col :span="8">
-          <el-select v-model="form.materialCategoryId" placeholder="请选择物料大类">
-            <el-option
-                v-for="item in materialCategoryOptions"
-                :key="item.materialCategoryId"
-                :label="item.materialCategoryName"
-                :value="item.materialCategoryId"
-            ></el-option>
-          </el-select>
-        </el-form-item>-->
-
             <el-form-item label="物料小类" prop="materialSubclass">
               <el-input v-model="form.materialSubclass" placeholder="请输入物料小类" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="批次标识" prop="batchFlag">
               <el-radio-group v-model="form.batchFlag">
                 <el-radio
@@ -451,11 +447,17 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="小批次数量" prop="batchAmount">
               <el-input v-model="form.batchAmount" placeholder="请输入小批次数量" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="计量单位" prop="materialUnitId">
-<!--          <el-input v-model="form.materialUnitId" placeholder="请输入计量单位" />-->
               <el-tree-select
                 v-model="form.materialUnitId"
                 :data="MeasureUnitList"
@@ -466,21 +468,34 @@
                 @node-click="handleNodeClick"
               />
             </el-form-item>
-<!--        <el-form-item label="计量单位名称" prop="materialUnit">
+          </el-col>
-          <el-input v-model="form.materialUnit" placeholder="请输入计量单位名称" disable/>
+          <el-col :span="8">
-        </el-form-item>-->
             <el-form-item label="物料组" prop="materialMatkl">
               <el-input v-model="form.materialMatkl" placeholder="请输入物料组" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="物料规格" prop="materialSpec">
               <el-input v-model="form.materialSpec" placeholder="请输入物料规格" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="净重" prop="netWeight">
               <el-input v-model="form.netWeight" placeholder="请输入净重" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="毛重" prop="grossWeight">
               <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="绑定标识" prop="alwaysFlag">
               <el-radio-group v-model="form.alwaysFlag">
                 <el-radio
@@ -490,9 +505,8 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
-<!--        <el-form-item label="所属工厂" prop="factoryId">
+          </el-col>
-          <el-input v-model="form.factoryId" placeholder="请输入所属工厂" />
+          <el-col :span="8">
-        </el-form-item>-->
             <el-form-item label="所属工厂" prop="factoryId">
               <el-select v-model="form.factoryId" placeholder="请选择所属工厂">
                 <el-option
@@ -503,15 +517,26 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="创建组织" prop="createOrgId">
               <el-input v-model="form.createOrgId" placeholder="请输入创建组织" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="使用组织" prop="useOrgId">
               <el-input v-model="form.useOrgId" placeholder="请输入使用组织" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="所属产线" prop="prodLineId">
               <el-input v-model="form.prodLineId" placeholder="请输入所属产线" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="激活标识" prop="activeFlag">
               <el-radio-group v-model="form.activeFlag">
                 <el-radio
@@ -521,6 +546,11 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="删除标识" prop="deletedFlag">
               <el-radio-group v-model="form.deletedFlag">
                 <el-radio
@@ -530,9 +560,13 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="采购计价单位" prop="purchasePriceUnitId">
               <el-input v-model="form.purchasePriceUnitId" placeholder="请输入采购计价单位" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="审核日期" prop="approveDate">
               <el-date-picker clearable
                 v-model="form.approveDate"
@@ -541,23 +575,29 @@
                 placeholder="请选择审核日期">
               </el-date-picker>
             </el-form-item>
-<!--        <el-form-item label="erp最后更新日期" prop="erpModifyDate">
+          </el-col>
-          <el-date-picker clearable
+        </el-row>
-            v-model="form.erpModifyDate"
+
-            type="datetime"
+        <el-row :gutter="20">
-            value-format="YYYY-MM-DD HH:mm:ss"
+          <el-col :span="8">
-            placeholder="请选择erp最后更新日期">
-          </el-date-picker>
-        </el-form-item>-->
             <el-form-item label="最大库存数量" prop="maxStockAmount">
               <el-input v-model="form.maxStockAmount" placeholder="请输入最大库存数量" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="最小库存数量" prop="minStockAmount">
               <el-input v-model="form.minStockAmount" placeholder="请输入最小库存数量" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="安全库存数量" prop="safeStockAmount">
               <el-input v-model="form.safeStockAmount" placeholder="请输入安全库存数量" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="申请标识" prop="applyFlag">
               <el-radio-group v-model="form.applyFlag">
                 <el-radio
@@ -567,6 +607,8 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="物料分类" prop="materialClassfication">
               <el-select v-model="form.materialClassfication" placeholder="请选择物料分类">
                 <el-option
@@ -577,6 +619,8 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="自动出库标识" prop="autoOutstockFlag">
               <el-radio-group v-model="form.autoOutstockFlag">
                 <el-radio
@@ -586,6 +630,11 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="辅料标识" prop="accessoriesFlag">
               <el-radio-group v-model="form.accessoriesFlag">
                 <el-radio
@@ -595,6 +644,8 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="低值易耗品标识" prop="lowValueConsumableFlag">
               <el-radio-group v-model="form.lowValueConsumableFlag">
                 <el-radio
@@ -604,8 +655,9 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="品牌" prop="brand">
-<!--          <el-input v-model="form.brand" placeholder="请输入品牌" />-->
               <el-select v-model="form.brand" placeholder="请选择品牌">
                 <el-option v-for="item in brandList"
                            :key="item.masterDataDetailId"
@@ -613,8 +665,12 @@
                            :value="item.masterDataDetailId"></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="层级" prop="plyrating">
-<!--          <el-input v-model="form.plyrating" placeholder="请输入层级" />-->
               <el-select v-model="form.plyrating" placeholder="请选择层级">
                 <el-option v-for="item in plyratingList"
                            :key="item.masterDataDetailId"
@@ -622,8 +678,9 @@
                            :value="item.masterDataDetailId"></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="花纹" prop="pattern">
-<!--          <el-input v-model="form.pattern" placeholder="请输入花纹" />-->
               <el-select v-model="form.pattern" placeholder="请选择花纹">
                 <el-option v-for="item in patternList"
                            :key="item.masterDataDetailId"
@@ -631,18 +688,25 @@
                            :value="item.masterDataDetailId"></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="速度级别" prop="speedLevel">
-<!--          <el-input v-model="form.speedLevel" placeholder="请输入速度级别" />-->
               <el-select v-model="form.speedLevel" placeholder="请选择速度级别">
                 <el-option v-for="item in speedLevelList" :key="item.masterDataDetailId" :label="item.dataDetailName" :value="item.masterDataDetailId"></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="负荷载重" prop="load">
-<!--          <el-input v-model="form.load" placeholder="请输入负荷载重" />-->
               <el-select v-model="form.load" placeholder="请选择负荷载重">
                 <el-option v-for="item in loadList" :key="item.masterDataDetailId" :label="item.dataDetailName" :value="item.masterDataDetailId"></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="轮胎标记" prop="tireMarkings">
               <el-select v-model="form.tireMarkings" placeholder="请选择轮胎标记">
                 <el-option
@@ -653,8 +717,9 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="最小停放时间" prop="minParkingTime">
-          <!--          <el-input v-model="form.minParkingTime" placeholder="请输入最小停放时间" />-->
               <el-input-number
                 v-model="form.minParkingDays"
                 placeholder="请输入天数"
@@ -676,8 +741,12 @@
               />
               <span>&nbsp;分钟&nbsp;</span>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="最大停放时间" prop="maxParkingTime">
-          <!--          <el-input v-model="form.maxParkingTime" placeholder="请输入最大停放时间" />-->
               <el-input-number
                 v-model="form.maxParkingDays"
                 placeholder="请输入天数"
@@ -699,15 +768,26 @@
               />
               <span>&nbsp;分钟&nbsp;</span>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="标准重量" prop="standardWeight">
               <el-input v-model="form.standardWeight" placeholder="请输入标准重量" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="标准重量上限" prop="weightUpperLimit">
               <el-input v-model="form.weightUpperLimit" placeholder="请输入标准重量上限" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="标准重量下限" prop="weightLowerLimit">
               <el-input v-model="form.weightLowerLimit" placeholder="请输入标准重量下限" />
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="内胎标记" prop="innerTubeFlag">
               <el-radio-group v-model="form.innerTubeFlag">
                 <el-radio
@@ -717,6 +797,8 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="销售类型" prop="saleType">
               <el-select v-model="form.saleType" placeholder="请选择销售类型">
                 <el-option
@@ -727,9 +809,16 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="8">
             <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" placeholder="请输入备注" />
             </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -753,9 +842,9 @@ import {getBaseMaterialCategoryList} from "@/api/mes/baseMaterialCategory";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { apply_flag, inner_tube_flag,
-  mes_material_categories, always_flag, mes_accessories_flag,
+   always_flag, mes_accessories_flag,
   auto_outstock_flag, mes_batch_flag, active_flag, sale_type, deleted_flag, tire_markings,
-  material_classfication, mes_low_value_consumable_flag } = toRefs<any>(proxy?.useDict('apply_flag', 'inner_tube_flag', 'mes_material_categories', 'always_flag', 'mes_accessories_flag', 'auto_outstock_flag', 'mes_batch_flag', 'active_flag', 'sale_type', 'deleted_flag', 'tire_markings', 'material_classfication', 'mes_low_value_consumable_flag'));
+  material_classfication, mes_low_value_consumable_flag } = toRefs<any>(proxy?.useDict('apply_flag', 'inner_tube_flag',   'always_flag', 'mes_accessories_flag', 'auto_outstock_flag', 'mes_batch_flag', 'active_flag', 'sale_type', 'deleted_flag', 'tire_markings', 'material_classfication', 'mes_low_value_consumable_flag'));
 
 const baseMaterialInfoList = ref<BaseMaterialInfoVO[]>([]);
 const buttonLoading = ref(false);
@@ -1133,7 +1222,7 @@ const getInfoOptions = async () => {
   InfoOptions.value = proxy?.handleTree(res.data, "matrialTypeId", "parentId");
 }
 
-//点击左侧物料类型树节点,(选中左侧物料类型，点击“新增”，新增页面物料类型绑定)
+//点击左侧物料类型树节点,(选中左侧物料类型，点击"新增"，新增页面物料类型绑定)
 const handleTreeNodeClick = async (data: any) => {
   queryParams.value.materialTypeId = data.matrialTypeId;
   initFormData.materialTypeId = data.matrialTypeId;
@@ -1266,6 +1355,7 @@ const getBaseMaterialCategorySelect = async () => {
   materialCategoryOptions.value = res.data;
 }
 
+//根据物料类型id获取物料大类，选择物料类型时自动绑定该物料类型的物料大类;
 const materialCategoryIdBymaterialTypeId = (materialTypeId: string | number) => {
   const selectmaterialTypeId = materialTypeList.value.find(item => item.matrialTypeId === materialTypeId);
   if (selectmaterialTypeId){