1.2.8

物料bom前端完善

src/api/mes/baseMaterialInfo/index.ts

@@ -1,6 +1,7 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import { BaseMaterialInfoVO, BaseMaterialInfoForm, BaseMaterialInfoQuery } from '@/api/mes/baseMaterialInfo/types';
+import {BaseMaterialTypeQuery, BaseMaterialTypeVO} from "@/api/mes/baseMaterialType/types";
 
 /**
  * 查询物料信息列表
@@ -75,3 +76,18 @@ export function getBaseMaterialInfoList (query) {
         params: query
     });
 };
+
+
+/**
+ * 查询物料类型列表
+ * @param query
+ * @returns {*}
+ */
+
+export const getMaterialTypeList = (query?: BaseMaterialTypeQuery): AxiosPromise<BaseMaterialTypeVO[]> => {
+  return request({
+    url: '/mes/baseMaterialInfo/getMaterialTypeList',
+    method: 'get',
+    params: query
+  });
+};

src/api/mes/materialBom/index.ts

@@ -1,6 +1,8 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import { MaterialBomVO, MaterialBomForm, MaterialBomQuery } from '@/api/mes/materialBom/types';
+import {BaseMeasurementUnitInfoQuery, BaseMeasurementUnitInfoVO} from "@/api/mes/baseMeasurementUnitInfo/types";
+import {MaterialBomVersionQuery, MaterialBomVersionVO} from "@/api/mes/materialBomVersion/types";
 
 /**
  * 查询物料BOM信息列表
@@ -94,10 +96,22 @@ export const addBatchMaterialBom = (data) => {
 /**
  * 查询生产bom下拉树结构
  */
-export const materialBomTreeSelect = (): AxiosPromise<MaterialBomVO[]> => {
+export const materialBomTreeSelect = (query?: MaterialBomQuery): AxiosPromise<MaterialBomVO[]> => {
   return request({
     url: '/mes/materialBom/materialBomTree',
-    method: 'get'
+    method: 'get',
+    params:query
+  });
+};
+
+/**
+ * 查询父级生产bom
+ */
+export const getParentMaterialBom = (query?: MaterialBomQuery): AxiosPromise<MaterialBomVO[]> => {
+  return request({
+    url: '/mes/materialBom/getParentMaterialBom',
+    method: 'get',
+    params:query
   });
 };
 
@@ -107,7 +121,6 @@ export const materialBomTreeSelect = (): AxiosPromise<MaterialBomVO[]> => {
  * @param query
  * @returns {*}
  */
-
 export const listMaterialBomJoinStructure = (query?: MaterialBomQuery): AxiosPromise<MaterialBomVO[]> => {
   return request({
     url: '/mes/materialBom/joinStructureList',
@@ -115,3 +128,33 @@ export const listMaterialBomJoinStructure = (query?: MaterialBomQuery): AxiosPro
     params: query
   });
 };
+
+
+/**
+ * 查询单位信息列表
+ * @param query
+ * @returns {*}
+ */
+
+export const getUnitInfoList = (query?: BaseMeasurementUnitInfoQuery): AxiosPromise<BaseMeasurementUnitInfoVO[]> => {
+  return request({
+    url: '/mes/materialBom/getUnitInfoList',
+    method: 'get',
+    params: query
+  });
+};
+
+
+/**
+ * 查询bom版本信息列表
+ * @param query
+ * @returns {*}
+ */
+
+export const getMaterialBomVersionList = (query?: MaterialBomVersionQuery): AxiosPromise<MaterialBomVersionVO[]> => {
+  return request({
+    url: '/mes/materialBom/getMaterialBomVersionList',
+    method: 'get',
+    params: query
+  });
+};

src/api/mes/materialBom/types.ts

@@ -14,6 +14,21 @@ export interface MaterialBomVO {
    */
   materialId: string | number;
 
+  /**
+   * 单位ID
+   */
+  unitId: string | number;
+
+  /**
+   * 父级单位ID
+   */
+  parentUnitId: string | number;
+
+  /**
+   * 父级标准数量
+   */
+  parentStandardAmount: number;
+
   /**
    * 物料名称
    */
@@ -133,6 +148,11 @@ export interface MaterialBomVO {
    * 主键标识(tree转换）
    */
   id: string | number;
+
+  /**
+   * 树节点唯一键
+   */
+  treeKey: string;
 }
 
 export interface MaterialBomForm extends BaseEntity {
@@ -151,6 +171,18 @@ export interface MaterialBomForm extends BaseEntity {
    */
   materialId?: string | number;
 
+  /**
+   * 单位ID
+   */
+  unitId?: string | number;
+
+
+  /**
+   * 父级单位ID
+   */
+  parentUnitId?: string | number;
+
+
   /**
    * 物料名称
    */
@@ -161,6 +193,11 @@ export interface MaterialBomForm extends BaseEntity {
    */
   materialTypeId?: string | number;
 
+  /**
+   * 父级物料类型ID
+   */
+  parentMaterialTypeId?: string | number;
+
   /**
    * bom说明
    */
@@ -176,6 +213,11 @@ export interface MaterialBomForm extends BaseEntity {
    */
   ancestors?: string;
 
+  /**
+   * 父级标准数量
+   */
+  parentStandardAmount?: number;
+
   /**
    * 标准数量
    */
@@ -323,9 +365,9 @@ export interface MaterialBomQuery {
   materialTypeName?: string;
 
   /**
-   * 结构树的parentId
+   * 父级物料类型ID
    */
-  bomStructureParentId?: string | number;
+  parentMaterialTypeId?: string | number;
 
 }
 

src/api/mes/materialBomVersion/index.ts

@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { MaterialBomVersionVO, MaterialBomVersionForm, MaterialBomVersionQuery } from '@/api/mes/materialBomVersion/types';
+
+/**
+ * 查询物料bom版本列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listMaterialBomVersion = (query?: MaterialBomVersionQuery): AxiosPromise<MaterialBomVersionVO[]> => {
+  return request({
+    url: '/mes/materialBomVersion/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询物料bom版本详细
+ * @param materialBomVersion
+ */
+export const getMaterialBomVersion = (materialBomVersion: string | number): AxiosPromise<MaterialBomVersionVO> => {
+  return request({
+    url: '/mes/materialBomVersion/' + materialBomVersion,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增物料bom版本
+ * @param data
+ */
+export const addMaterialBomVersion = (data: MaterialBomVersionForm) => {
+  return request({
+    url: '/mes/materialBomVersion',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改物料bom版本
+ * @param data
+ */
+export const updateMaterialBomVersion = (data: MaterialBomVersionForm) => {
+  return request({
+    url: '/mes/materialBomVersion',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除物料bom版本
+ * @param materialBomVersion
+ */
+export const delMaterialBomVersion = (materialBomVersion: string | number | Array<string | number>) => {
+  return request({
+    url: '/mes/materialBomVersion/' + materialBomVersion,
+    method: 'delete'
+  });
+};
+
+
+/**
+ * 下拉框查询物料bom版本列表
+ * @param query
+ * @returns {*}
+ */
+export function getProdMaterialBomVersionList (query) {
+    return request({
+        url: '/mes/materialBomVersion/getProdMaterialBomVersionList',
+        method: 'get',
+        params: query
+    });
+};

src/api/mes/materialBomVersion/types.ts

@@ -0,0 +1,46 @@
+export interface MaterialBomVersionVO {
+  /**
+   * 主键标识,BOM版本，手动输入
+   */
+  materialBomVersion: string;
+
+  /**
+   * 激活标识（1是 0否）
+   */
+  activeFlag: string;
+
+}
+
+export interface MaterialBomVersionForm extends BaseEntity {
+  /**
+   * 主键标识,BOM版本，手动输入
+   */
+  materialBomVersion?: string;
+
+  /**
+   * 激活标识（1是 0否）
+   */
+  activeFlag?: string;
+
+}
+
+export interface MaterialBomVersionQuery extends PageQuery {
+
+  /**
+   * 主键标识,BOM版本，手动输入
+   */
+  materialBomVersion?: string;
+
+  /**
+   * 激活标识（1是 0否）
+   */
+  activeFlag?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/views/mes/baseMaterialInfo/addMaterial.vue

@@ -6,11 +6,20 @@
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
 
             <el-form-item label="物料编码" prop="materialCode">
-              <el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable @keyup.enter="handleQuery" style="width:180px"/>
             </el-form-item>
-            <el-form-item label="物料大类" prop="materialCategories">
+            <el-form-item label="物料名称" prop="materialName">
-              <el-select v-model="queryParams.materialCategories" placeholder="请选择物料大类" clearable >
+              <el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable @keyup.enter="handleQuery" style="width:180px"/>
-                <el-option v-for="dict in mes_material_categories" :key="dict.value" :label="dict.label" :value="dict.value"/>
+            </el-form-item>
+            <el-form-item label="物料类型" prop="materialTypeId">
+              <el-select v-model="queryParams.materialTypeId" placeholder="请选择物料类型" style="width:180px" :disabled="materialTypeId && materialTypeId!==''">
+                <el-option
+                  v-for="item in materialTypeOptions"
+                  :key="item.matrialTypeId"
+                  :label="item.matrialTypeName"
+                  :value="item.matrialTypeId"
+                  :disabled="item.activeFlag == '0' "
+                ></el-option>
               </el-select>
             </el-form-item>
             <el-form-item>
@@ -44,7 +53,7 @@
             <dict-tag :options="mes_material_categories" :value="scope.row.materialCategories"/>
           </template>
         </el-table-column>
-        <el-table-column label="物料小类" align="center" prop="materialSubclass" v-if="columns[6].visible"/>
+        <el-table-column label="物料类型" align="center" prop="matrialTypeName" v-if="columns[6].visible"/>
         <el-table-column label="批次标识" align="center" prop="batchFlag" v-if="columns[7].visible">
           <template #default="scope">
             <dict-tag :options="mes_batch_flag" :value="scope.row.batchFlag"/>
@@ -162,9 +171,10 @@
 </template>
 
 <script setup name="BaseMaterialInfo" lang="ts">
-import { listBaseMaterialInfo, getBaseMaterialInfo, delBaseMaterialInfo, addBaseMaterialInfo, updateBaseMaterialInfo } from '@/api/mes/baseMaterialInfo';
+import { listBaseMaterialInfo, getBaseMaterialInfo, delBaseMaterialInfo, addBaseMaterialInfo, updateBaseMaterialInfo,getMaterialTypeList } from '@/api/mes/baseMaterialInfo';
 import { BaseMaterialInfoVO, BaseMaterialInfoQuery, BaseMaterialInfoForm } from '@/api/mes/baseMaterialInfo/types';
 import { getFactoryList } from "@/api/mes/baseFactoryInfo";
+import {BaseMaterialTypeVO} from "@/api/mes/baseMaterialType/types";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { apply_flag, inner_tube_flag,
@@ -192,17 +202,19 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
+const materialTypeOptions = ref<BaseMaterialTypeVO[]>([]);
+
 // 列显隐信息
 const columns = ref<FieldOption[]>([
 /*        { key: 0, label: `主键标识`, visible: true },
         { key: 1, label: `租户编号`, visible: true },*/
         { key: 0, label: `ERP信息`, visible: false },
         { key: 1, label: `物料编码`, visible: true },
-        { key: 2, label: `旧物料编码`, visible: true },
+        { key: 2, label: `旧物料编码`, visible: false },
         { key: 3, label: `物料名称`, visible: true },
         { key: 4, label: `物料类型ID`, visible: false },
         { key: 5, label: `物料大类`, visible: true },
-        { key: 6, label: `物料小类`, visible: true },
+        { key: 6, label: `物料类型`, visible: true },
         { key: 7, label: `批次标识`, visible: false },
         { key: 8, label: `小批次数量`, visible: false },
         { key: 9, label: `计量单位ID`, visible: false },
@@ -387,8 +399,7 @@ const getFactorySelect = async () => {
 /** 查询物料信息列表 */
 const getList = async () => {
   loading.value = true;
-  queryParams.value.params = {};
+
-  queryParams.value.materialTypeId = materialTypeId.value;
   proxy?.addDateRange(queryParams.value, dateRangeApproveDate.value, 'ApproveDate');
   const res = await listBaseMaterialInfo(queryParams.value);
   baseMaterialInfoList.value = res.rows;
@@ -484,7 +495,27 @@ const handleRowClick = (row) =>{
 };
 defineExpose({tableRef})
 onMounted(() => {
+  alert(materialTypeId.value)
+  if(materialTypeId.value){
+    queryParams.value.materialTypeId = materialTypeId.value;
+  }
   getFactorySelect();
   getList();
+  initMaterialTypeData();
+
 });
+
+
+/** 初始化物料类型数据 */
+const initMaterialTypeData = async () => {
+  // 判断物料类型结构树的数据是否存在，存在不获取，不存在则获取
+  // alert(JSON.stringify(materialTypeOptions))
+  // alert(materialTypeOptions.value)
+  if (materialTypeOptions.value === undefined || materialTypeOptions.value.length <= 0) {
+    const {data} = await getMaterialTypeList();
+    // alert(JSON.stringify(data))
+    materialTypeOptions.value = data;
+  }
+};
+
 </script>

src/views/mes/baseStructureBom/index.vue

@@ -280,6 +280,7 @@ const getTreeSelect = async () => {
     children: res.data
   };
   structureBomOptions.value.push(initialTree);
+  console.log(structureBomOptions);
   if (queryParams.value.parentId === null || queryParams.value.parentId === undefined) {
     const topStructureBom = structureBomOptions.value.find(item => item.parentId === -1);
     if (topStructureBom != null){

src/views/mes/materialBom/index.vue

@@ -8,7 +8,7 @@
           <el-tree
             ref="materialBomTreeRef"
             class="mt-2"
-            node-key="id"
+            node-key="treeKey"
             :data="materialBomOptions"
             :props="{ label: 'label', children: 'children' }"
             :expand-on-click-node="false"
@@ -22,59 +22,65 @@
 
       <el-col :lg="18" :xs="24" v-loading="loading">
         <div>
-          <el-divider content-position="left">物料</el-divider>
+          <el-divider content-position="left">父级物料</el-divider>
-          <el-form ref="parentMaterialBomFormRef" label-width="120px">
+          <el-form ref="parentMaterialBomFormRef" label-width="120px" :model="parentForm">
             <el-row>
-              <el-form-item label="BOM版本" v-if="parentMaterialBomVersion">
+              <el-form-item label='父物料ID' prop='parentId'>
-                {{ parentMaterialBomVersion }}
+                <el-input v-model='parentForm.parentId' placeholder='' style="width:360px"/>
               </el-form-item>
-              <el-form-item label="父物料类型名称" v-if="parentMaterialTypeName">
+              <el-form-item label='父物料类型ID' prop='parentMaterialTypeId'>
-                {{ parentMaterialTypeName }}
+                <el-input v-model='parentForm.parentMaterialTypeId' placeholder='' style="width:360px"/>
               </el-form-item>
-              <el-form-item label="父物料名称">
+
-                {{ parentMaterialName }}
+              <el-form-item label='父物料名称' prop='parentMaterialName'>
+                <el-input v-model='parentForm.parentMaterialName' placeholder='请点击检索物料'
+                          @click='handleMaterialSelect(parentForm,SELECT_MATERIAL_MODEL.PARENT_SELECT)'
+                          style="width:360px" @change="getList" suffix-icon="Search"/>
               </el-form-item>
+              <el-form-item label="父物料类型名称" prop='parentMaterialTypeName'>
+                <el-input v-model='parentForm.parentMaterialTypeName' placeholder='' style="width:360px" dsiabeld/>
+              </el-form-item>
+
+
+              <el-form-item label="BOM版本" prop='materialBomVersion' :model="parentForm">
+                <el-select v-model="parentForm.materialBomVersion"
+                           placeholder="请选择" style="width:360px">
+                  <el-option
+                    v-for="item in materialBomVersionOptions"
+                    :key="item.materialBomVersion"
+                    :label="item.materialBomVersion"
+                    :value="item.materialBomVersion"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label='父物料数量' prop='parentStandardAmount'>
+                <el-input-number v-model='parentForm.parentStandardAmount' :precision="2" :step="0.1"
+                                 placeholder='请输入父物料数量'
+                                 style="width:360px"/>
+              </el-form-item>
+
+              <el-form-item label='单位' prop='parentUnitId'>
+                <el-select v-model="parentForm.parentUnitId" placeholder="请选择" style="width:360px">
+                  <el-option
+                    v-for="item in unitInfoOptions"
+                    :key="item.unitId"
+                    :label="item.unitName"
+                    :value="item.unitId"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+
+
             </el-row>
           </el-form>
         </div>
 
 
         <el-divider content-position="left">子级物料</el-divider>
-        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                    :leave-active-class="proxy?.animate.searchAnimate.leave">
-          <div v-show="showSearch" class="mb-[10px]">
-            <el-card shadow="hover">
-              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-                <el-form-item label="子物料类型编号" prop="materialTypeCode" label-width="120px">
-                  <el-input v-model="queryParams.materialTypeCode" placeholder="请输入物料类型编号" clearable
-                            @keyup.enter="handleQuery"/>
-                </el-form-item>
-                <el-form-item label="子物料类型名称" prop="materialTypeName" label-width="120px">
-                  <el-input v-model="queryParams.materialTypeName" placeholder="请输入物料类型名称" clearable
-                            @keyup.enter="handleQuery"/>
-                </el-form-item>
-                <el-form-item label="子物料名称" prop="materialName" label-width="120px">
-                  <el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable
-                            @keyup.enter="handleQuery"/>
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-                </el-form-item>
-              </el-form>
-            </el-card>
-          </div>
-        </transition>
-
         <el-card shadow="hover">
           <template #header>
             <el-row :gutter="10">
-              <el-col :span="1.5">
-                <el-button v-has-permi="['mes:materialBom:add']" type="success" plain icon="CircleCheck"
-                           @click="submitBatchSaveMaterialBoms()" :loading="btnLoading">保存
-                </el-button>
-              </el-col>
-
               <el-col :span="1.5">
                 <el-button v-has-permi="['mes:materialBom:add']" type="primary" plain icon="Plus"
                            @click="handleAdd()" :loading="btnLoading">新增
@@ -93,38 +99,56 @@
             <el-table-column type="selection" width="50" align="center"/>
             <el-table-column type="index" width="50" align="center" label="序号"/>
             <el-table-column v-if="columns[0].visible" key="materialBomId" label="生产BOM_ID" align="center"
-                             prop="materialBomId" width="110px"/>
+                             prop="materialBomId"/>
             <el-table-column v-if="columns[1].visible" key="materialTypeCode" label="子物料类型编号" align="center"
-                             prop="materialTypeCode" :show-overflow-tooltip="true" width="130px"/>
+                             prop="materialTypeCode" :show-overflow-tooltip="true"/>
             <el-table-column v-if="columns[2].visible" key="materialTypeName" label="子物料类型名称" align="center"
-                             prop="materialTypeName" :show-overflow-tooltip="true" width="130px"/>
+                             prop="materialTypeName" :show-overflow-tooltip="true" w/>
-            <el-table-column v-if="columns[3].visible" key="materialBomVersion" label="BOM版本" align="center"
-                             prop="materialBomVersion" :show-overflow-tooltip="true" width="90px">
-              <template #default='scope'>
-                <el-input v-model='scope.row.materialBomVersion'/>
-              </template>
-            </el-table-column>
-
             <el-table-column v-if="columns[4].visible" key="materialId" label="子物料ID" align="center"
-                             prop="materialId" :show-overflow-tooltip="true" />
+                             prop="materialId" :show-overflow-tooltip="true"/>
             <el-table-column v-if="columns[5].visible" key="materialName" label="子物料名称" align="center"
-                             prop="materialName" :show-overflow-tooltip="true" width="300px">
+                             prop="materialName" :show-overflow-tooltip="true">
               <template #default='scope'>
                 <el-input v-model='scope.row.materialName' placeholder='请点击检索物料'
-                          @click='handleMaterialSelect(scope.row)' readonly/>
+                          @click='handleMaterialSelect(scope.row,SELECT_MATERIAL_MODEL.CHILD_SELECT)' readonly/>
               </template>
             </el-table-column>
             <el-table-column v-if="columns[6].visible" key="standardAmount" label="子物料数量" align="center"
-                             prop="standardAmount" :show-overflow-tooltip="true" width="100px">
+                             prop="standardAmount" :show-overflow-tooltip="true" width="200px">
               <template #default='scope'>
-                <el-input v-model='scope.row.standardAmount'/>
+                <el-input-number v-model='scope.row.standardAmount' :precision="2" :step="0.1"
+                                 placeholder='请输入数量'
+                                 style="width:180px"/>
               </template>
             </el-table-column>
 
-            <el-table-column v-if="columns[7].visible" key="unitName" label="子物料单位" align="center"
+            <el-table-column v-if="columns[7].visible" key="unitId" label="子物料单位" align="center"
-                             prop="unitName" :show-overflow-tooltip="true" width="100px"/>
+                             prop="unitId" :show-overflow-tooltip="true">
+
+              <template #default='scope'>
+                <el-select v-model="scope.row.unitId" placeholder="请选择">
+                  <el-option
+                    v-for="item in unitInfoOptions"
+                    :key="item.unitId"
+                    :label="item.unitName"
+                    :value="item.unitId"
+                  ></el-option>
+                </el-select>
+              </template>
+
+            </el-table-column>
+
           </el-table>
 
+
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button v-has-permi="['mes:materialBom:add']" type="success" plain icon="CircleCheck"
+                         @click="submitBatchSaveMaterialBoms()" :loading="btnLoading">保存
+              </el-button>
+            </div>
+          </template>
+
           <!--          <pagination-->
           <!--            v-show="total > 0"-->
           <!--            v-model:page="queryParams.pageNum"-->
@@ -152,16 +176,17 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label='BOM版本' prop='materialBomVersion' v-if="parentMaterialId===0">
+        <!--        <el-form-item label='BOM版本' prop='materialBomVersion'>-->
-          <el-input v-model='form.materialBomVersion' placeholder='请输入BOM版本' style="width:360px"/>
+        <!--          <el-input v-model='form.materialBomVersion' placeholder='请输入BOM版本' style="width:360px"/>-->
-        </el-form-item>
+        <!--        </el-form-item>-->
 
         <el-form-item label='子物料ID' prop='materialId' v-if="false">
           <el-input v-model='form.materialId' placeholder='' style="width:360px"/>
         </el-form-item>
 
         <el-form-item label='子物料名称' prop='materialName'>
-          <el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialSelect(form)'
+          <el-input v-model='form.materialName' placeholder='请点击检索物料'
+                    @click='handleMaterialSelect(form,SELECT_MATERIAL_MODEL.DIALOG_CHILD_SELECT)'
                     style="width:360px"/>
         </el-form-item>
 
@@ -170,6 +195,17 @@
                            style="width:360px"/>
         </el-form-item>
 
+        <el-form-item label='子物料单位' prop='unitId'>
+          <el-select v-model="form.unitId" placeholder="请选择单位">
+            <el-option
+              v-for="item in unitInfoOptions"
+              :key="item.unitId"
+              :label="item.unitName"
+              :value="item.unitId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -197,7 +233,8 @@
 import {
   materialBomTreeSelect,
   listMaterialBomJoinStructure,
-  addBatchMaterialBom, updateMaterialBom, addMaterialBom, delMaterialBom
+  addBatchMaterialBom, updateMaterialBom, addMaterialBom, delMaterialBom,
+  getUnitInfoList, getMaterialBomVersionList, getParentMaterialBom
 } from "@/api/mes/materialBom";
 
 import {MaterialBomVO, MaterialBomForm, MaterialBomQuery} from '@/api/mes/materialBom/types';
@@ -206,8 +243,11 @@ import MaterialSelect from '@/views/mes/baseMaterialInfo/addMaterial.vue';
 
 import {to} from 'await-to-js';
 import {nextTick} from "vue";
+import {MaterialBomVersionVO} from "@/api/mes/materialBomVersion/types";
+import {BaseMeasurementUnitInfoVO} from "@/api/mes/baseMeasurementUnitInfo/types";
+import {BaseStructureBomTreeVO} from "@/api/mes/baseStructureBom/types";
 
-const materialTypeId = ref(0);
+const materialTypeId = ref(0);//此值是传给选择物料信息弹框使用
 
 const router = useRouter();
 const {proxy} = getCurrentInstance() as ComponentInternalInstance;
@@ -231,11 +271,17 @@ const childTableTitle = ref('');
 const materialName = ref('');
 const materialBomOptions = ref<MaterialBomVO[]>([]);
 const materialTypeOptions = ref<BaseMaterialTypeVO[]>([]);
-const parentMaterialId = ref(1);
+const materialBomVersionOptions = ref<MaterialBomVersionVO[]>([]);
-const parentParentMaterialId = ref();
+const unitInfoOptions = ref<BaseMeasurementUnitInfoVO[]>([]);
-const parentMaterialTypeName = ref('');
+
-const parentMaterialName = ref('');
+const focusKeyNode = ref<MaterialBomVO>;
-const parentMaterialBomVersion = ref('');
+
+const globalSelectMode = ref('');
+const SELECT_MATERIAL_MODEL = ref({
+  PARENT_SELECT: '1',//父级物料选择
+  CHILD_SELECT: '2',//子级物料选择
+  DIALOG_CHILD_SELECT: '3'//弹窗子级选择
+})
 
 // 列显隐信息
 const columns = ref<FieldOption[]>([
@@ -250,6 +296,7 @@ const columns = ref<FieldOption[]>([
 ]);
 
 const materialBomTreeRef = ref<ElTreeInstance>();
+const parentMaterialBomFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 const materialBomFormRef = ref<ElFormInstance>();
 const formDialogRef = ref<ElDialogInstance>();
@@ -259,9 +306,37 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
+const initParentFormData: MaterialBomForm = {
+  materialBomId: undefined,
+  parentId: undefined,
+  parentStandardAmount: undefined,
+  unitId: undefined,
+  parentUnitId: undefined,
+  materialId: undefined,
+  materialName: undefined,
+  materialTypeId: undefined,
+  parentMaterialTypeId: undefined,
+  materialBomDesc: undefined,
+  materialBomVersion: undefined,
+  ancestors: undefined,
+  standardAmount: undefined,
+  topFlag: undefined,
+  checkType: '1',
+  projectId: undefined,
+  assembleTime: undefined,
+  materialClassfication: undefined,
+  attachId: undefined,
+  activeFlag: '1',
+  remark: undefined,
+  materialTypeName: undefined,
+};
+
 const initFormData: MaterialBomForm = {
   materialBomId: undefined,
   parentId: undefined,
+  parentStandardAmount: undefined,
+  unitId: undefined,
+  parentUnitId: undefined,
   materialId: undefined,
   materialName: undefined,
   materialTypeId: undefined,
@@ -282,6 +357,7 @@ const initFormData: MaterialBomForm = {
 
 const data = reactive<PageData<MaterialBomForm, MaterialBomQuery>>({
   form: {...initFormData},
+  parentForm: {...initParentFormData},
   queryParams: {
     materialBomId: undefined,
     parentId: undefined,
@@ -289,7 +365,7 @@ const data = reactive<PageData<MaterialBomForm, MaterialBomQuery>>({
     materialTypeName: undefined,
     materialName: undefined,
     materialBomVersion: undefined,
-    bomStructureParentId: undefined,
+    parentMaterialTypeId: undefined,
     params: {}
   },
   rules: {
@@ -308,8 +384,18 @@ const data = reactive<PageData<MaterialBomForm, MaterialBomQuery>>({
   }
 });
 
-const {queryParams, form, rules} = toRefs(data);
 
+const parentQueryParams = ref({
+  materialBomId: undefined,
+  parentId: undefined,
+  materialTypeCode: undefined,
+  materialTypeName: undefined,
+  materialName: undefined,
+  materialBomVersion: undefined,
+  params: {}
+})
+
+const {queryParams, form, rules, parentForm} = toRefs(data);
 
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
@@ -329,62 +415,83 @@ watchEffect(
 /** 查询物料类型bom结构树下拉树结构 */
 const getTreeSelect = async () => {
   treeLoading.value = true;
-  loading.value = true;
   const res = await materialBomTreeSelect();
-  // alert(JSON.stringify(res))
+  materialBomOptions.value = [];
-  materialBomOptions.value = res.data;
+  const virtualTopNodeId = -1;
+  const initialTree: BaseStructureBomTreeVO = {
+    treeKey: virtualTopNodeId,
+    id: virtualTopNodeId,//materialBomId
+    parentId: -1,
+    materialId: 0,
+    label: "生产BOM",
+    children: res.data
+  };
+  materialBomOptions.value.push(initialTree);
+  console.log(materialBomOptions);
 
-  //此处的parentid是materialtypeid
+  // materialBomOptions.value = res.data;
-  columns.value[3].visible = false;
-  if (queryParams.value.parentId === null || queryParams.value.parentId === undefined) {
-    const topMaterialBom = materialBomOptions.value.find(item => item.id === 0);
-    queryParams.value.bomStructureParentId = 1;//赋值结构bom的parentId
-    queryParams.value.parentId = 0;
-    parentMaterialId.value = 0;
-    parentParentMaterialId.value = undefined;
-    parentMaterialName.value = topMaterialBom.materialName;
-    // parentParentMaterialTypeName.value = "顶级";
-  }
 
-  if (queryParams.value.parentId === 0) {
+  if (!focusKeyNode.value) {//如果之前没有focus
-    columns.value[3].visible = true;
+    focusKeyNode.value = {treeKey: virtualTopNodeId};
+  } else {
+    alert(23)
+    alert(focusKeyNode.value.treeKey)
+    console.log(JSON.stringify(materialBomOptions.value))
   }
 
   nextTick(function () {
-    materialBomTreeRef.value?.setCurrentKey(queryParams.value.parentId, true);
+    materialBomTreeRef.value?.setCurrentKey(focusKeyNode.value.treeKey, true);
-    handleQuery();
   })
 
+  handleNodeClick(focusKeyNode.value);
+  treeLoading.value = false;
   // const dd = {"id":"1","parentId":-1,"label":"dd"};
   // materialTypeOptions.value[0].children.push(dd);
 };
 
 /** 查询生产bom列表 */
 const getList = async () => {
+  //如果是有节点的则加载数据，如果是顶级节点生产BOM则不加载数据
   loading.value = true;
   const res = await listMaterialBomJoinStructure(queryParams.value);
   materialBomList.value = res.data;
   loading.value = false;
-  treeLoading.value = false;
-  // total.value = res.total;
 };
 
+const resetParentQueryParams = () => {
+  parentQueryParams.value.parentId = undefined;//是当前节点的materialId
+  parentQueryParams.value.materialBomVersion = undefined;
+}
+
+const resetQueryParams = () => {
+  queryParams.value.parentId = undefined;//materialid
+  queryParams.value.parentMaterialTypeId = undefined;
+}
+
 /** 节点单击事件 */
 const handleNodeClick = (data: MaterialBomVO) => {
-  queryParams.value.bomStructureParentId = data.materialTypeId;
+  materialBomList.value = [];
-  queryParams.value.parentId = data.id;
+  resetParentForm();
-  parentMaterialId.value = data.id;
+  resetQueryParams();
-  parentParentMaterialId.value = data.parentId;
+  resetParentQueryParams();
-  parentMaterialName.value = data.materialName;
+  focusKeyNode.value = data;
-  parentMaterialTypeName.value = data.materialTypeName;
+  if (data.materialId && data.materialId != 0) {
-  parentMaterialBomVersion.value = data.materialBomVersion;
+    parentQueryParams.value.parentId = data.materialId;//是当前节点的materialId
-  columns.value[3].visible = false;
+    parentQueryParams.value.materialBomVersion = data.materialBomVersion;
-  if (data.id === 0) {
+    getParentMaterialBomInfo();
-    columns.value[3].visible = true;
+    queryParams.value.parentId = data.materialId;
+    queryParams.value.parentMaterialTypeId = data.materialTypeId;
+    queryParams.value.materialBomVersion = data.materialBomVersion
+    handleQuery();
+  } else {
+    if (materialBomVersionOptions.value.length > 0) {
+      parentForm.value.materialBomVersion = materialBomVersionOptions.value[0].materialBomVersion;
+      queryParams.value.materialBomVersion = materialBomVersionOptions.value[0].materialBomVersion;
+    }
   }
-  handleQuery();
 };
 
+
 const clickDisplay = () => {
   if (queryParams.value.parentId === 0) {
     parentFormDisplay.value = false;
@@ -465,13 +572,18 @@ const cancel = () => {
 /** 新增按钮操作 */
 const handleAdd = async () => {
   reset();
+  materialTypeOptions.value = [];
+  if (!parentForm.value.parentId) {
+    proxy?.$modal.msgWarning('请先选择父级物料');
+    return;
+  }
   materialTypeOptions.value = Array.from(
     new Map(materialBomList.value.map(item => [item['materialTypeId'], item]))
   ).map(([_, item]) => item);
 
   dialog.visible = true;
   dialog.title = '新增';
-  form.value.parentId = queryParams.value.parentId;
+  form.value.parentId = parentForm.value.parentId;
 };
 
 
@@ -480,15 +592,30 @@ const submitForm = () => {
   materialBomFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       submitLoading.value = true;
-      try {
+      const selectedMaterialType = materialTypeOptions.value
-        form.value.materialBomId ? await updateMaterialBom(form.value) : await addMaterialBom(form.value);
+        .find(materialType => materialType.materialTypeId === form.value.materialTypeId);
-        proxy?.$modal.msgSuccess('操作成功');
+      const childMaterialBom = {
-        await getTreeSelect();
+        materialTypeId: form.value.materialTypeId,
-        dialog.visible = false;
+        materialTypeCode: selectedMaterialType.materialTypeCode,
-        submitLoading.value = false;
+        materialTypeName: selectedMaterialType.materialTypeName,
-      } catch {
+        materialId: form.value.materialId,
-        submitLoading.value = false;
+        materialName: form.value.materialName,
-      }
+        standardAmount: form.value.standardAmount,
+        unitId: form.value.unitId
+      };
+
+      materialBomList.value.push(childMaterialBom);
+      submitLoading.value = false;
+      dialog.visible = false;
+      // try {
+      //   form.value.materialBomId ? await updateMaterialBom(form.value) : await addMaterialBom(form.value);
+      //   proxy?.$modal.msgSuccess('操作成功');
+      //   await getTreeSelect();
+      //   dialog.visible = false;
+      //   submitLoading.value = false;
+      // } catch {
+      //   submitLoading.value = false;
+      // }
 
       // const child = {"id":"1","parentId":-1,"label":"dd"};
       // alert(materialTypeOptions.value[0])
@@ -515,9 +642,19 @@ const resetForm = () => {
   form.value.materialBomId = undefined;
   form.value.activeFlag = '1';
 };
+/**
+ * 重置父级表单
+ */
+const resetParentForm = () => {
+  parentMaterialBomFormRef.value?.resetFields();
+  parentMaterialBomFormRef.value?.clearValidate();
+
+};
+
 onMounted(() => {
   getTreeSelect(); // 初始化物料类型结构bom数据
-  // initMaterialTypeData();
+  initUnitInfoData();
+  initMaterialBomVersionData();
 });
 
 const handleSelection = () => {
@@ -526,18 +663,44 @@ const handleSelection = () => {
   // this.multiple = !selection.length
 };
 
-const handleMaterialSelect = (row) => {
+const handleMaterialSelect = (row, selectMode) => {
   editedRow.value = row;
-  materialTypeId.value = row.materialTypeId;
+  globalSelectMode.value = selectMode;
-
+  if (selectMode === SELECT_MATERIAL_MODEL.value.DIALOG_CHILD_SELECT) {//弹窗新增子级时需要先选择子物料类型
+    if (!row.materialTypeId) {
+      proxy?.$modal.msgWarning('请先选择父级物料');
+      return;
+    }
+    materialTypeId.value = row.materialTypeId;//弹窗子级选择物料需要传值materialTypeId
+  } else if (selectMode === SELECT_MATERIAL_MODEL.value.CHILD_SELECT) {//子级选择物料需要传值materialTypeId
+    materialTypeId.value = row.materialTypeId;
+  } else {
+    materialTypeId.value = undefined
+  }
   materialOpen.value = true;
 };
 
 /** 提交物料信息按钮 */
 const submitMaterialForm = () => {
   let selectedRow = materialSelectRef.value.tableRef.store.states.currentRow.value;
-  editedRow.value.materialId = selectedRow.materialId;
+
-  editedRow.value.materialName = selectedRow.materialName;
+
+  //此处只有是父级物料时赋值
+  if (globalSelectMode.value === SELECT_MATERIAL_MODEL.value.PARENT_SELECT) {
+    editedRow.value.parentId = selectedRow.materialId;
+    editedRow.value.parentMaterialName = selectedRow.materialName;
+    editedRow.value.parentMaterialTypeId = selectedRow.materialTypeId;
+    editedRow.value.parentMaterialTypeName = selectedRow.matrialTypeName;
+
+    queryParams.value.parentId = selectedRow.materialId;
+    queryParams.value.parentMaterialTypeId = selectedRow.materialTypeId;
+
+    // alert(JSON.stringify(queryParams.value))
+    getList();
+  } else {
+    editedRow.value.materialId = selectedRow.materialId;
+    editedRow.value.materialName = selectedRow.materialName;
+  }
   materialOpen.value = false;
 };
 
@@ -549,17 +712,23 @@ const submitBatchSaveMaterialBoms = async () => {
     for (let i = 0; i < materialBomList.value.length; i++) {
       let item = materialBomList.value[i];
       if (item.materialId) {
-        if (!item.materialBomVersion && parentMaterialId.value === 0) {
+
-          proxy?.$modal.msgWarning('序号为[' + parseInt(i) + 1 + ']，请填写BOM版本');
-          btnLoading.value = false;
-          return;
-        }
         if (!item.standardAmount) {
-          proxy?.$modal.msgWarning('序号为[' + parseInt(i) + 1 + ']，请填写子物料数量');
+          proxy?.$modal.msgWarning('序号为[' + i + 1 + ']，请填写子物料数量');
           btnLoading.value = false;
           return;
         }
-        item.parentId = parentMaterialId.value;
+        if (!item.unitId) {
+          proxy?.$modal.msgWarning('序号为[' + i + 1 + ']，请选择单位');
+          btnLoading.value = false;
+          return;
+        }
+
+        item.parentId = parentForm.value.parentId;
+        item.parentUnitId = parentForm.value.parentUnitId;
+        item.materialBomVersion = parentForm.value.materialBomVersion;
+        item.parentStandardAmount = parentForm.value.parentStandardAmount;
+        item.parentMaterialTypeId = parentForm.value.parentMaterialTypeId;
         saveMaterialBomList.value.push(item);
       }
     }
@@ -570,14 +739,57 @@ const submitBatchSaveMaterialBoms = async () => {
     }
     await addBatchMaterialBom(saveMaterialBomList.value);
     proxy?.$modal.msgSuccess('操作成功');
+
+    focusKeyNode.value.treeKey = parentForm.value.parentId + "-" + parentForm.value.materialBomVersion;
+    focusKeyNode.value.materialBomVersion = parentForm.value.materialBomVersion;
+    focusKeyNode.value.parentUnitId = parentForm.value.parentUnitId;
+    focusKeyNode.value.parentStandardAmount = parentForm.value.parentStandardAmount;
+
+
     await getTreeSelect();
+    resetParentQueryParams();
+    resetQueryParams();
+    resetParentForm();
     btnLoading.value = false;
   } catch (e) {
-    alert(e)
+    proxy?.$modal.msgWarning(e);
     btnLoading.value = false;
   }
 }
 
+
+/** 初始化单位数据 */
+const initUnitInfoData = async () => {
+  if (unitInfoOptions.value === undefined || unitInfoOptions.value.length <= 0) {
+    const {data} = await getUnitInfoList();
+    // alert(JSON.stringify(data))
+    unitInfoOptions.value = data;
+  }
+};
+
+/** 初始化物料bom版本数据 */
+const initMaterialBomVersionData = async () => {
+  // alert(JSON.stringify(getMaterialBomVersionList))
+  if (materialBomVersionOptions.value === undefined || materialBomVersionOptions.value.length <= 0) {
+    const {data} = await getMaterialBomVersionList();
+    materialBomVersionOptions.value = data;
+
+    if (materialBomVersionOptions.value.length > 0) {
+      parentForm.value.materialBomVersion = materialBomVersionOptions.value[0].materialBomVersion;
+      queryParams.value.materialBomVersion = materialBomVersionOptions.value[0].materialBomVersion;
+    }
+
+  }
+};
+
+
+/** 查询父级生产bom */
+const getParentMaterialBomInfo = async () => {
+  const res = await getParentMaterialBom(parentQueryParams.value);
+  parentForm.value = res.data;
+
+};
+
 </script>
 
 <style lang="scss" scoped></style>

src/views/mes/materialBom/index_old.vue

@@ -0,0 +1,583 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 生产bom树 -->
+      <el-col :lg="6" :xs="24" style="" v-loading="treeLoading">
+        <el-card shadow="hover">
+          <el-input v-model="materialName" placeholder="请输入物料名称" prefix-icon="Search" clearable/>
+          <el-tree
+            ref="materialBomTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="materialBomOptions"
+            :props="{ label: 'label', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
+        </el-card>
+      </el-col>
+
+      <el-col :lg="18" :xs="24" v-loading="loading">
+        <div>
+          <el-divider content-position="left">物料</el-divider>
+          <el-form ref="parentMaterialBomFormRef" label-width="120px">
+            <el-row>
+              <el-form-item label="BOM版本" v-if="parentMaterialBomVersion">
+                {{ parentMaterialBomVersion }}
+              </el-form-item>
+              <el-form-item label="父物料类型名称" v-if="parentMaterialTypeName">
+                {{ parentMaterialTypeName }}
+              </el-form-item>
+              <el-form-item label="父物料名称">
+                {{ parentMaterialName }}
+              </el-form-item>
+            </el-row>
+          </el-form>
+        </div>
+
+
+        <el-divider content-position="left">子级物料</el-divider>
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                    :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                <el-form-item label="子物料类型编号" prop="materialTypeCode" label-width="120px">
+                  <el-input v-model="queryParams.materialTypeCode" placeholder="请输入物料类型编号" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="子物料类型名称" prop="materialTypeName" label-width="120px">
+                  <el-input v-model="queryParams.materialTypeName" placeholder="请输入物料类型名称" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item label="子物料名称" prop="materialName" label-width="120px">
+                  <el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable
+                            @keyup.enter="handleQuery"/>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </div>
+        </transition>
+
+        <el-card shadow="hover">
+          <template #header>
+            <el-row :gutter="10">
+              <el-col :span="1.5">
+                <el-button v-has-permi="['mes:materialBom:add']" type="success" plain icon="CircleCheck"
+                           @click="submitBatchSaveMaterialBoms()" :loading="btnLoading">保存
+                </el-button>
+              </el-col>
+
+              <el-col :span="1.5">
+                <el-button v-has-permi="['mes:materialBom:add']" type="primary" plain icon="Plus"
+                           @click="handleAdd()" :loading="btnLoading">新增
+                </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button v-has-permi="['mes:materialBom:remove']" type="danger" plain :disabled="multiple"
+                           icon="Delete" @click="handleDelete()" :loading="btnLoading">
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+          </template>
+
+          <el-table :data="materialBomList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50" align="center"/>
+            <el-table-column type="index" width="50" align="center" label="序号"/>
+            <el-table-column v-if="columns[0].visible" key="materialBomId" label="生产BOM_ID" align="center"
+                             prop="materialBomId" width="110px"/>
+            <el-table-column v-if="columns[1].visible" key="materialTypeCode" label="子物料类型编号" align="center"
+                             prop="materialTypeCode" :show-overflow-tooltip="true" width="130px"/>
+            <el-table-column v-if="columns[2].visible" key="materialTypeName" label="子物料类型名称" align="center"
+                             prop="materialTypeName" :show-overflow-tooltip="true" width="130px"/>
+            <el-table-column v-if="columns[3].visible" key="materialBomVersion" label="BOM版本" align="center"
+                             prop="materialBomVersion" :show-overflow-tooltip="true" width="90px">
+              <template #default='scope'>
+                <el-input v-model='scope.row.materialBomVersion'/>
+              </template>
+            </el-table-column>
+
+            <el-table-column v-if="columns[4].visible" key="materialId" label="子物料ID" align="center"
+                             prop="materialId" :show-overflow-tooltip="true" />
+            <el-table-column v-if="columns[5].visible" key="materialName" label="子物料名称" align="center"
+                             prop="materialName" :show-overflow-tooltip="true" width="300px">
+              <template #default='scope'>
+                <el-input v-model='scope.row.materialName' placeholder='请点击检索物料'
+                          @click='handleMaterialSelect(scope.row)' readonly/>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="columns[6].visible" key="standardAmount" label="子物料数量" align="center"
+                             prop="standardAmount" :show-overflow-tooltip="true" width="100px">
+              <template #default='scope'>
+                <el-input v-model='scope.row.standardAmount'/>
+              </template>
+            </el-table-column>
+
+            <el-table-column v-if="columns[7].visible" key="unitName" label="子物料单位" align="center"
+                             prop="unitName" :show-overflow-tooltip="true" width="100px"/>
+          </el-table>
+
+          <!--          <pagination-->
+          <!--            v-show="total > 0"-->
+          <!--            v-model:page="queryParams.pageNum"-->
+          <!--            v-model:limit="queryParams.pageSize"-->
+          <!--            :total="total"-->
+          <!--            @pagination="getList"-->
+          <!--          />-->
+        </el-card>
+
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改生产bom配置对话框 -->
+    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body
+               @close="closeDialog">
+      <el-form ref="materialBomFormRef" :model="form" :rules="rules" label-width="98px">
+        <el-form-item label="子物料类型" prop='materialTypeId'>
+          <el-select v-model="form.materialTypeId" placeholder="请选择" style="width:360px">
+            <el-option
+              v-for="item in materialTypeOptions"
+              :key="item.materialTypeId"
+              :label="item.materialTypeName"
+              :value="item.materialTypeId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label='BOM版本' prop='materialBomVersion' v-if="parentMaterialId===0">
+          <el-input v-model='form.materialBomVersion' placeholder='请输入BOM版本' style="width:360px"/>
+        </el-form-item>
+
+        <el-form-item label='子物料ID' prop='materialId' v-if="false">
+          <el-input v-model='form.materialId' placeholder='' style="width:360px"/>
+        </el-form-item>
+
+        <el-form-item label='子物料名称' prop='materialName'>
+          <el-input v-model='form.materialName' placeholder='请点击检索物料' @click='handleMaterialSelect(form)'
+                    style="width:360px"/>
+        </el-form-item>
+
+        <el-form-item label='子物料数量' prop='standardAmount'>
+          <el-input-number v-model='form.standardAmount' :precision="2" :step="0.1" placeholder='请输入子物料数量'
+                           style="width:360px"/>
+        </el-form-item>
+
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
+          <el-button @click="cancel()">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 添加物料信息对话框 -->
+    <el-dialog title="选择物料信息" v-model='materialOpen' append-to-body>
+      <MaterialSelect @selection="handleSelection" ref="materialSelectRef"
+                      :materialTypeId="materialTypeId"
+                      v-if="materialOpen"></MaterialSelect>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitMaterialForm">确 定</el-button>
+        <el-button @click="materialOpen = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup name="ProdMaterialBom" lang="ts">
+import {
+  materialBomTreeSelect,
+  listMaterialBomJoinStructure,
+  addBatchMaterialBom, updateMaterialBom, addMaterialBom, delMaterialBom
+} from "@/api/mes/materialBom";
+
+import {MaterialBomVO, MaterialBomForm, MaterialBomQuery} from '@/api/mes/materialBom/types';
+import {BaseMaterialTypeVO} from '@/api/mes/baseMaterialType/types';
+import MaterialSelect from '@/views/mes/baseMaterialInfo/addMaterial.vue';
+
+import {to} from 'await-to-js';
+import {nextTick} from "vue";
+
+const materialTypeId = ref(0);
+
+const router = useRouter();
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const materialBomList = ref<MaterialBomVO[]>();
+const saveMaterialBomList = ref<MaterialBomVO[]>([]);
+const treeLoading = ref(false);
+const loading = ref(false);
+const materialSelectRef = ref();
+const materialOpen = ref(false);
+const editedRow = ref();
+const submitLoading = ref(false);
+const btnLoading = ref(false);
+const showSearch = ref(true);
+const selectedMaterialBoms = ref<MaterialBomVO[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const parentFormDisplay = ref(false);
+const childTableTitle = ref('');
+const materialName = ref('');
+const materialBomOptions = ref<MaterialBomVO[]>([]);
+const materialTypeOptions = ref<BaseMaterialTypeVO[]>([]);
+const parentMaterialId = ref(1);
+const parentParentMaterialId = ref();
+const parentMaterialTypeName = ref('');
+const parentMaterialName = ref('');
+const parentMaterialBomVersion = ref('');
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  {key: 0, label: `生产BOM_ID`, visible: false, children: []},
+  {key: 1, label: `子物料类型编号`, visible: true, children: []},
+  {key: 2, label: `子物料类型名称`, visible: true, children: []},
+  {key: 3, label: `BOM版本`, visible: false, children: []},
+  {key: 4, label: `子物料ID`, visible: false, children: []},
+  {key: 5, label: `子物料名称`, visible: true, children: []},
+  {key: 6, label: `子物料数量`, visible: true, children: []},
+  {key: 7, label: `子物料单位`, visible: true, children: []}
+]);
+
+const materialBomTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const materialBomFormRef = ref<ElFormInstance>();
+const formDialogRef = ref<ElDialogInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: MaterialBomForm = {
+  materialBomId: undefined,
+  parentId: undefined,
+  materialId: undefined,
+  materialName: undefined,
+  materialTypeId: undefined,
+  materialBomDesc: undefined,
+  materialBomVersion: undefined,
+  ancestors: undefined,
+  standardAmount: undefined,
+  topFlag: undefined,
+  checkType: '1',
+  projectId: undefined,
+  assembleTime: undefined,
+  materialClassfication: undefined,
+  attachId: undefined,
+  activeFlag: '1',
+  remark: undefined,
+  materialTypeName: undefined,
+};
+
+const data = reactive<PageData<MaterialBomForm, MaterialBomQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    materialBomId: undefined,
+    parentId: undefined,
+    materialTypeCode: undefined,
+    materialTypeName: undefined,
+    materialName: undefined,
+    materialBomVersion: undefined,
+    bomStructureParentId: undefined,
+    params: {}
+  },
+  rules: {
+    materialTypeId: [
+      {required: true, message: "物料类型不能为空", trigger: "blur"}
+    ],
+    materialBomVersion: [
+      {required: true, message: "BOM版本不能为空", trigger: "blur"}
+    ],
+    materialName: [
+      {required: true, message: "物料名称不能为空", trigger: "blur"}
+    ],
+    standardAmount: [
+      {required: true, message: "子物料数量不能为空", trigger: "blur"}
+    ]
+  }
+});
+
+const {queryParams, form, rules} = toRefs(data);
+
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label?.toLowerCase().includes(value.toLowerCase());
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    materialBomTreeRef.value?.filter(materialName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询物料类型bom结构树下拉树结构 */
+const getTreeSelect = async () => {
+  treeLoading.value = true;
+  loading.value = true;
+  const res = await materialBomTreeSelect();
+  // alert(JSON.stringify(res))
+  materialBomOptions.value = res.data;
+
+  //此处的parentid是materialtypeid
+  columns.value[3].visible = false;
+  if (queryParams.value.parentId === null || queryParams.value.parentId === undefined) {
+    const topMaterialBom = materialBomOptions.value.find(item => item.id === 0);
+    queryParams.value.bomStructureParentId = 1;//赋值结构bom的parentId
+    queryParams.value.parentId = 0;
+    parentMaterialId.value = 0;
+    parentParentMaterialId.value = undefined;
+    parentMaterialName.value = topMaterialBom.materialName;
+    // parentParentMaterialTypeName.value = "顶级";
+  }
+
+  if (queryParams.value.parentId === 0) {
+    columns.value[3].visible = true;
+  }
+
+  nextTick(function () {
+    materialBomTreeRef.value?.setCurrentKey(queryParams.value.parentId, true);
+    handleQuery();
+  })
+
+  // const dd = {"id":"1","parentId":-1,"label":"dd"};
+  // materialTypeOptions.value[0].children.push(dd);
+};
+
+/** 查询生产bom列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listMaterialBomJoinStructure(queryParams.value);
+  materialBomList.value = res.data;
+  loading.value = false;
+  treeLoading.value = false;
+  // total.value = res.total;
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: MaterialBomVO) => {
+  queryParams.value.bomStructureParentId = data.materialTypeId;
+  queryParams.value.parentId = data.id;
+  parentMaterialId.value = data.id;
+  parentParentMaterialId.value = data.parentId;
+  parentMaterialName.value = data.materialName;
+  parentMaterialTypeName.value = data.materialTypeName;
+  parentMaterialBomVersion.value = data.materialBomVersion;
+  columns.value[3].visible = false;
+  if (data.id === 0) {
+    columns.value[3].visible = true;
+  }
+  handleQuery();
+};
+
+const clickDisplay = () => {
+  if (queryParams.value.parentId === 0) {
+    parentFormDisplay.value = false;
+    childTableTitle.value = "顶级物料";
+  } else {
+    parentFormDisplay.value = true;
+    childTableTitle.value = "子级物料";
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  // queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  // dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  // queryParams.value.pageNum = 1;
+  // queryParams.value.parentId = undefined;
+  // structureBomTreeRef.value?.setCurrentKey(undefined);
+  handleQuery();
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: MaterialBomVO) => {
+  btnLoading.value = true;
+  const materialBomIds = [];
+  selectedMaterialBoms.value.forEach(item => {
+    if (item.materialBomId && item.materialBomId !== '') {
+      materialBomIds.push(item.materialBomId);
+    } else {
+      deleteReset(item);
+    }
+  });
+  if (materialBomIds.length > 0) {
+    try {
+      const [err] = await to(proxy?.$modal.confirm('是否确认删除生产BOM编号为"' + materialBomIds + '"的数据项？') as any);
+      if (!err) {
+        await delMaterialBom(materialBomIds)
+        await getTreeSelect();
+        proxy?.$modal.msgSuccess('删除成功');
+      }
+    } catch {
+      btnLoading.value = false;
+    }
+  }
+  btnLoading.value = false;
+};
+
+const deleteReset = (item) => {
+  item.materialId = undefined;
+  item.materialName = undefined;
+  item.materialBomVersion = undefined;
+  item.standardAmount = undefined;
+};
+
+/** 选择条数  */
+const handleSelectionChange = (selection: MaterialBomVO[]) => {
+  selectedMaterialBoms.value = selection.map((item) => item);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+
+/** 重置操作表单 */
+const reset = () => {
+  form.value = {...initFormData};
+  materialBomFormRef.value?.resetFields();
+};
+/** 取消按钮 */
+const cancel = () => {
+  dialog.visible = false;
+  reset();
+};
+
+/** 新增按钮操作 */
+const handleAdd = async () => {
+  reset();
+  materialTypeOptions.value = Array.from(
+    new Map(materialBomList.value.map(item => [item['materialTypeId'], item]))
+  ).map(([_, item]) => item);
+
+  dialog.visible = true;
+  dialog.title = '新增';
+  form.value.parentId = queryParams.value.parentId;
+};
+
+
+/** 提交按钮 */
+const submitForm = () => {
+  materialBomFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      submitLoading.value = true;
+      try {
+        form.value.materialBomId ? await updateMaterialBom(form.value) : await addMaterialBom(form.value);
+        proxy?.$modal.msgSuccess('操作成功');
+        await getTreeSelect();
+        dialog.visible = false;
+        submitLoading.value = false;
+      } catch {
+        submitLoading.value = false;
+      }
+
+      // const child = {"id":"1","parentId":-1,"label":"dd"};
+      // alert(materialTypeOptions.value[0])
+      // materialTypeOptions.value[0].children.push(dd);
+    }
+  });
+};
+
+/**
+ * 关闭用户弹窗
+ */
+const closeDialog = () => {
+  dialog.visible = false;
+  resetForm();
+};
+
+/**
+ * 重置表单
+ */
+const resetForm = () => {
+  materialBomFormRef.value?.resetFields();
+  materialBomFormRef.value?.clearValidate();
+
+  form.value.materialBomId = undefined;
+  form.value.activeFlag = '1';
+};
+onMounted(() => {
+  getTreeSelect(); // 初始化物料类型结构bom数据
+  // initMaterialTypeData();
+});
+
+const handleSelection = () => {
+  // this.ids = selection.map(item => item.materialBomId)
+  // this.single = selection.length !== 1
+  // this.multiple = !selection.length
+};
+
+const handleMaterialSelect = (row) => {
+  editedRow.value = row;
+  materialTypeId.value = row.materialTypeId;
+
+  materialOpen.value = true;
+};
+
+/** 提交物料信息按钮 */
+const submitMaterialForm = () => {
+  let selectedRow = materialSelectRef.value.tableRef.store.states.currentRow.value;
+  editedRow.value.materialId = selectedRow.materialId;
+  editedRow.value.materialName = selectedRow.materialName;
+  materialOpen.value = false;
+};
+
+
+const submitBatchSaveMaterialBoms = async () => {
+  try {
+    btnLoading.value = true;
+    saveMaterialBomList.value = [];
+    for (let i = 0; i < materialBomList.value.length; i++) {
+      let item = materialBomList.value[i];
+      if (item.materialId) {
+        if (!item.materialBomVersion && parentMaterialId.value === 0) {
+          proxy?.$modal.msgWarning('序号为[' + parseInt(i) + 1 + ']，请填写BOM版本');
+          btnLoading.value = false;
+          return;
+        }
+        if (!item.standardAmount) {
+          proxy?.$modal.msgWarning('序号为[' + parseInt(i) + 1 + ']，请填写子物料数量');
+          btnLoading.value = false;
+          return;
+        }
+        item.parentId = parentMaterialId.value;
+        saveMaterialBomList.value.push(item);
+      }
+    }
+    if (saveMaterialBomList.value.length <= 0) {
+      proxy?.$modal.msgWarning('无可保存子级物料');
+      btnLoading.value = false;
+      return;
+    }
+    await addBatchMaterialBom(saveMaterialBomList.value);
+    proxy?.$modal.msgSuccess('操作成功');
+    await getTreeSelect();
+    btnLoading.value = false;
+  } catch (e) {
+    proxy?.$modal.msgWarning(e);
+    btnLoading.value = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped></style>

src/views/mes/materialBomVersion/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="主键标识,BOM版本，手动输入" prop="materialBomVersion">
+              <el-input v-model="queryParams.materialBomVersion" placeholder="请输入主键标识,BOM版本，手动输入" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="激活标识" prop="activeFlag">
+              <el-input v-model="queryParams.activeFlag" placeholder="请输入激活标识" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['mes:materialBomVersion:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['mes:materialBomVersion:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['mes:materialBomVersion:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mes:materialBomVersion:export']">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :data="materialBomVersionList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="主键标识,BOM版本，手动输入" align="center" prop="materialBomVersion" v-if="columns[0].visible"/>
+        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[2].visible"/>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mes:materialBomVersion:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mes:materialBomVersion:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改物料bom版本对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="materialBomVersionFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="主键标识,BOM版本，手动输入" prop="materialBomVersion">
+          <el-input v-model="form.materialBomVersion" placeholder="请输入主键标识,BOM版本，手动输入" />
+        </el-form-item>
+        <el-form-item label="激活标识" prop="activeFlag">
+          <el-input v-model="form.activeFlag" placeholder="请输入激活标识" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="MaterialBomVersion" lang="ts">
+import { listMaterialBomVersion, getMaterialBomVersion, delMaterialBomVersion, addMaterialBomVersion, updateMaterialBomVersion } from '@/api/mes/materialBomVersion';
+import { MaterialBomVersionVO, MaterialBomVersionQuery, MaterialBomVersionForm } from '@/api/mes/materialBomVersion/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const materialBomVersionList = ref<MaterialBomVersionVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const materialBomVersionFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+        { key: 0, label: `主键标识,BOM版本，手动输入`, visible: true },
+        { key: 1, label: `租户ID`, visible: true },
+        { key: 2, label: `激活标识`, visible: true },
+        { key: 3, label: `创建部门`, visible: true },
+        { key: 4, label: `创建人`, visible: true },
+        { key: 5, label: `创建时间`, visible: true },
+]);
+
+const initFormData: MaterialBomVersionForm = {
+  materialBomVersion: undefined,
+  activeFlag: undefined,
+}
+const data = reactive<PageData<MaterialBomVersionForm, MaterialBomVersionQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    materialBomVersion: undefined,
+    activeFlag: undefined,
+    params: {
+    }
+  },
+  rules: {
+    materialBomVersion: [
+      { required: true, message: "主键标识,BOM版本，手动输入不能为空", trigger: "blur" }
+    ],
+    activeFlag: [
+      { required: true, message: "激活标识不能为空", trigger: "blur" }
+    ],
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询物料bom版本列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listMaterialBomVersion(queryParams.value);
+  materialBomVersionList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {...initFormData};
+  materialBomVersionFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: MaterialBomVersionVO[]) => {
+  ids.value = selection.map(item => item.materialBomVersion);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "添加物料bom版本";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: MaterialBomVersionVO) => {
+  reset();
+  const _materialBomVersion = row?.materialBomVersion || ids.value[0]
+  const res = await getMaterialBomVersion(_materialBomVersion);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改物料bom版本";
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  materialBomVersionFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.materialBomVersion) {
+        await updateMaterialBomVersion(form.value).finally(() =>  buttonLoading.value = false);
+      } else {
+        await addMaterialBomVersion(form.value).finally(() =>  buttonLoading.value = false);
+      }
+      proxy?.$modal.msgSuccess("操作成功");
+      dialog.visible = false;
+      await getList();
+    }
+  });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: MaterialBomVersionVO) => {
+  const _materialBomVersions = row?.materialBomVersion || ids.value;
+  await proxy?.$modal.confirm('是否确认删除物料bom版本编号为"' + _materialBomVersions + '"的数据项？').finally(() => loading.value = false);
+  await delMaterialBomVersion(_materialBomVersions);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download('mes/materialBomVersion/export', {
+    ...queryParams.value
+  }, `materialBomVersion_${new Date().getTime()}.xlsx`)
+}
+
+onMounted(() => {
+  getList();
+});
+</script>