feat(wms): 添加SAP物料关联功能

src/api/wms/wmsBaseProduct/types.ts

@@ -74,7 +74,18 @@ export interface WmsBaseProductVO {
    */
   updateTime: string;
   externalBrand: string;
-
+  /**
+   * SAP物料ID
+   */
+  materialId: string | number;
+  /**
+   * SAP物料名称（关联显示）
+   */
+  materialName: string;
+  /**
+   * SAP物料型号（关联显示）
+   */
+  materialModel: string;
 }
 
 export interface WmsBaseProductForm extends BaseEntity {
@@ -124,10 +135,21 @@ export interface WmsBaseProductForm extends BaseEntity {
    */
   activeFlag?: string;
 
+  /**
+   * SAP物料ID
+   */
+  materialId?: string | number;
+  /**
+   * SAP物料名称（用于显示）
+   */
+  materialName?: string;
+  /**
+   * SAP物料型号（用于显示）
+   */
+  materialModel?: string;
 }
 
 export interface WmsBaseProductQuery extends PageQuery {
-
   /**
    * 物料编码
    */
@@ -139,6 +161,11 @@ export interface WmsBaseProductQuery extends PageQuery {
   productName?: string;
   externalBrand?: string;
 
+  /**
+   * SAP物料型号（关联查询）
+   */
+  materialModel?: string;
+
   /**
    * 激活标识（1是 0否）
    */
@@ -149,6 +176,3 @@ export interface WmsBaseProductQuery extends PageQuery {
    */
   params?: any;
 }
-
-
-

src/views/wms/wmsBaseProduct/index.vue

@@ -13,6 +13,9 @@
             <el-form-item label="品牌" prop="externalBrand">
               <el-input v-model="queryParams.externalBrand" placeholder="请输入品牌" clearable @keyup.enter="handleQuery" />
             </el-form-item>
+            <el-form-item label="SAP物料型号" prop="materialModel">
+              <el-input v-model="queryParams.materialModel" placeholder="请输入SAP物料型号" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
 
             <el-form-item label="激活标识" prop="activeFlag">
               <el-select v-model="queryParams.activeFlag" placeholder="请选择激活标识" clearable>
@@ -59,6 +62,8 @@
         <el-table-column label="物料名称" align="center" prop="productName" v-if="columns[3].visible" />
         <el-table-column label="品牌" align="center" prop="externalBrand" v-if="columns[3].visible" />
         <el-table-column label="物料描述" align="center" prop="productSpe" v-if="columns[4].visible" />
+        <el-table-column label="SAP物料名称" align="center" prop="materialName" width="260" v-if="columns[5].visible" />
+        <el-table-column label="SAP物料型号" align="center" prop="materialModel" width="140" v-if="columns[5].visible" />
         <el-table-column label="单位" align="center" prop="unitName" v-if="columns[5].visible" />
         <!--<el-table-column label="参考成本" align="center" prop="purchasePrice" v-if="columns[6].visible" />-->
         <!--<el-table-column label="统一报价(参考)" align="center" prop="foreignPrice" v-if="columns[7].visible" />-->
@@ -98,6 +103,18 @@
     <!-- 添加或修改海威物料信息对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="wmsBaseProductFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="关联SAP物料" prop="materialId">
+          <el-input v-model="form.materialName" placeholder="请点击右侧图标选择SAP物料" readonly>
+            <template #suffix>
+              <el-icon style="cursor: pointer" @click="openMaterialSelect">
+                <Search />
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="SAP物料型号">
+          <el-input v-model="form.materialModel" placeholder="选择SAP物料后自动填充" disabled />
+        </el-form-item>
         <el-form-item label="所属部门" prop="createDept">
           <!--<el-input v-model="form.createDept" placeholder="请输入所属部门" />-->
           <el-select v-model="form.createDept" placeholder="请选择部门">
@@ -145,6 +162,8 @@
         </div>
       </template>
     </el-dialog>
+    <!-- SAP物料选择组件 -->
+    <MaterialSelect ref="materialSelectRef" :multiple="false" @confirm-call-back="materialSelectCallback"></MaterialSelect>
   </div>
 </template>
 
@@ -153,6 +172,7 @@ import { addWmsBaseProduct, delWmsBaseProduct, getWmsBaseProduct, listWmsBasePro
 import { WmsBaseProductForm, WmsBaseProductQuery, WmsBaseProductVO } from '@/api/wms/wmsBaseProduct/types';
 import { getBaseUnitInfoList } from '@/api/oa/base/unitInfo';
 import { allListDept } from '@/api/system/dept';
+import MaterialSelect from '@/components/MaterialSelect/index.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@@ -181,7 +201,8 @@ const columns = ref<FieldOption[]>([
   { key: 2, label: `物料编码`, visible: true },
   { key: 3, label: `物料名称`, visible: true },
   { key: 4, label: `物料描述`, visible: true },
-  { key: 5, label: `单位`, visible: true },
+  { key: 5, label: `SAP物料型号`, visible: true },
+  { key: 6, label: `单位`, visible: true },
   { key: 6, label: `参考成本`, visible: false },
   { key: 7, label: `统一报价(参考)`, visible: false },
   { key: 8, label: `备货期`, visible: true },
@@ -202,7 +223,10 @@ const initFormData: WmsBaseProductForm = {
   purchasePrice: undefined,
   foreignPrice: undefined,
   stockingPeriod: undefined,
-  activeFlag: undefined
+  activeFlag: undefined,
+  materialId: undefined,
+  materialName: undefined,
+  materialModel: undefined
 };
 const data = reactive<PageData<WmsBaseProductForm, WmsBaseProductQuery>>({
   form: { ...initFormData },
@@ -211,6 +235,7 @@ const data = reactive<PageData<WmsBaseProductForm, WmsBaseProductQuery>>({
     pageSize: 10,
     productCode: undefined,
     productName: undefined,
+    materialModel: undefined,
     activeFlag: undefined,
     params: {}
   },
@@ -243,6 +268,25 @@ const getDeptInfoListSelect = async () => {
   const res = await allListDept(params);
   deptInfoList.value = res.data;
 };
+
+// SAP物料选择相关
+const materialSelectRef = ref<InstanceType<typeof MaterialSelect>>();
+
+/** 打开SAP物料选择 */
+const openMaterialSelect = () => {
+  materialSelectRef.value?.open();
+};
+
+/** SAP物料选择回调 */
+const materialSelectCallback = (data: any) => {
+  if (data && data.length > 0) {
+    const material = data[0];
+    (form.value as any).materialId = material.materialId;
+    (form.value as any).materialName = material.materialName;
+    (form.value as any).materialModel = material.materialModel;
+  }
+};
+
 /** 取消按钮 */
 const cancel = () => {
   reset();