fix(部件类型，选择框组件): 修复组件重置问题，部件类型更改选择框代码

修复了选择框组件在父组件重置表单时没有重置的问题，给部件类型添加选择框组件。

admin.ui.plus-master/src/components/my-select-request/index.vue

@@ -5,8 +5,7 @@
 </template>
 
 <script setup lang="ts" name="my-select-request">
-  import {PropType} from "vue/dist/vue";
-  import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
   import  type {selectDto} from "/@/components/my-select-request/mySelectRequestDto";
   import {localStorageSet} from "/@/utils/localStorageSet";
   import {MySelectRequest} from "/@/components/my-select-request/mySelectRequest";
@@ -15,15 +14,22 @@
    * 根据id去查询
    * */
   const props = defineProps({
-    modelValue: Object as PropType<any | undefined | null>,
-    code: String,
-    select: String,
-    textPla: String
+    textPla:String,
+    select:String,
+    code:String
   })
 
   const localSelect = ref(props.select)
   const localTextPla = ref(props.textPla)
 
+  /**
+   * ref为局部变量，需要监听组件的值来改变子组件的值，
+   * 实现重置表单的问题
+   * */
+  watch(()=>props.select,(newVal)=>{
+    localSelect.value = newVal
+  })
+
   const emits = defineEmits(['search'])
 
   const state = reactive({
@@ -33,12 +39,12 @@
 
   const onChange = () =>{
     emits('search',localSelect)
+    console.log(localSelect)
   }
-
   /**
    * 获取缓存，缓存不存在就发送请求
    * */
-  onMounted(async () => {
+  const init = async () => {
     state.selectDto = localStorageSet.getItemWithExpiration(props.code as string)
     if (!state.selectDto){
       const res = await new MySelectRequest().getCodeDict([props.code])
@@ -46,7 +52,11 @@
       localStorageSet.setItemWithExpiration(props.code as string, res?.data,1)
       state.selectDto = localStorageSet.getItemWithExpiration(props.code as string)
     }
+  }
+
 
+  onMounted( () => {
+    init()
   })
 </script>
 

admin.ui.plus-master/src/views/admin/product/type.vue

@@ -19,11 +19,7 @@
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="部件类型">
-                  <el-select v-model="state.filterModel.bomType" placeholder="请选择部件类型" clearable class="w100">
-                    <el-option label="计税主板" value="1"></el-option>
-                    <el-option label="油气回收" value="2"></el-option>
-                    <el-option label="计量主板" value="3"></el-option>
-                  </el-select>
+                  <MySelectRequest :textPla="props.textPla" :select="props.select" :code="props.code" @search="search"/>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
@@ -134,7 +130,7 @@
 </template>
 
 <script lang="ts" setup name="admin/product/bom">
-import {ref, reactive, onMounted, onBeforeMount, computed, defineAsyncComponent} from 'vue'
+import {ref, reactive, onMounted, onBeforeMount, computed, defineAsyncComponent, watch} from 'vue'
 import { ComponentTypeApi } from '/@/api/admin/productionManagement/ComponentType'
 import dayjs from 'dayjs'
 import eventBus from '/@/utils/mitt'
@@ -148,6 +144,22 @@ import {ComponentGetPageDto} from "/@/api/admin/productionManagement/ComponentTy
 
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('./components/form-edit.vue'))
+const MySelectRequest = defineAsyncComponent(() => import('/@/components/my-select-request/index.vue'))
+/**
+ * 向子组件传值，
+ * code 字段编码
+ * select 默认值
+ */
+const props = reactive({
+  code:'componentType',
+  select:'',
+  textPla:'请选择部件类型'
+})
+const search = (val) => {
+  state.filterModel.bomType = val.value
+  props.select = val.value
+}
+
 
 const editDialogRef = ref()
 
@@ -229,6 +241,7 @@ const resetSearchForm = () => {
   state.filterModel.bomName = ''
   state.filterModel.bomProNo = ''
   state.filterModel.bomMateNo = ''
+  props.select = ''
 }
 
 /**添加*/