feat(部件电子档案): 编写组件，修改选择框代码

添加一个选择框组件，用于获取数据字典中的值并封装达到选择框，添加工具类用户判断缓存是否过期，编写了组件中请求数据的方法，接口已经成功对接，以实现先取缓存再发请求的选择框组件功能

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

@@ -0,0 +1,53 @@
+<template v-if="state.selectDto.length">
+  <el-select v-model="localSelect" @change="onChange">
+    <el-option v-for="item in state.selectDto" :key="item.id" :label="item.name" :value="item.value" />
+  </el-select>
+</template>
+
+<script setup lang="ts" name="my-select-request">
+  import {PropType} from "vue/dist/vue";
+  import {onMounted, reactive, ref} from "vue";
+  import  type {selectDto} from "/@/components/my-select-request/mySelectRequestDto";
+  import {localStorageSet} from "/@/utils/localStorageSet";
+  import {MySelectRequest} from "/@/components/my-select-request/mySelectRequest";
+  /**
+   * 接受父组件中传过来的数据字典id,
+   * 根据id去查询
+   * */
+  const props = defineProps({
+    modelValue: Object as PropType<any | undefined | null>,
+    code: String,
+    select: String
+  })
+
+  const localSelect = ref(props.select)
+
+  const emits = defineEmits(['search'])
+
+  const state = reactive({
+    /**选择选择值*/
+    selectDto: <selectDto>[],
+  })
+
+  const onChange = () =>{
+    emits('search',state.select)
+  }
+
+  /**
+   * 获取缓存，缓存不存在就发送请求
+   * */
+  onMounted(async () => {
+    state.selectDto = localStorageSet.getItemWithExpiration(props.code as string)
+    if (!state.selectDto){
+      const res = await new MySelectRequest().getCodeDict([props.code])
+      /**存一天的缓存*/
+      localStorageSet.setItemWithExpiration(props.code as string, res?.data,1)
+      state.selectDto = localStorageSet.getItemWithExpiration(props.code as string)
+    }
+
+  })
+</script>
+
+<style scoped lang="scss">
+
+</style>

admin.ui.plus-master/src/components/my-select-request/mySelectRequest.ts

@@ -0,0 +1,21 @@
+/**
+ * 选择框获取值请求
+ * */
+import {ContentType, HttpClient} from "/@/api/admin/http-client";
+import {AxiosResponse} from "axios";
+
+export class MySelectRequest<SecurityDataType = unknown> extends HttpClient<SecurityDataType>{
+
+  /**
+   * 根据编码获取字典
+   */
+  getCodeDict = (data:any) =>
+    this.request<AxiosResponse,any>({
+      path:'/api/admin/dict/get-list',
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+    })
+}

admin.ui.plus-master/src/components/my-select-request/mySelectRequestDto.ts

@@ -0,0 +1,7 @@
+/**下拉框对象*/
+export interface selectDto {
+  id?: number,
+  name?: string,
+  code?: string,
+  value?: string
+}

admin.ui.plus-master/src/utils/localStorageSet.ts

@@ -0,0 +1,32 @@
+/**
+ * 添加localStorage 并设置缓存过期时间
+ * @param key 唯一标识
+ * @param value 值
+ * @param expirationMinutes 过期时间(天)
+ */
+export const localStorageSet = {
+  // 存储数据和过期时间
+   setItemWithExpiration(key:string, value:any, expirationDays:number) {
+    const expirationMS = expirationDays * 24 * 60 * 1000; // 转换为毫秒
+    const expirationTime = new Date().getTime() + expirationMS;
+    localStorage.setItem(key, JSON.stringify({ value, expirationTime }));
+  },
+
+  // 读取数据并检查是否过期
+  getItemWithExpiration(key:string) {
+    const item = localStorage.getItem(key);
+    if (!item) {
+      return null; // 数据不存在
+    }
+    const parsedItem = JSON.parse(item);
+    const now = new Date().getTime();
+
+    if (now > parsedItem.expirationTime) {
+      localStorage.removeItem(key); // 数据已过期，删除它
+      return null;
+    }
+    return parsedItem.value?.[key] ?? []; // 返回有效数据
+  }
+}
+
+

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

@@ -24,11 +24,7 @@
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
                 <el-form-item label="部件类型">
-                  <el-select v-model="bomModel.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 :select="props.select" :code="props.code" @search="search"/>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
@@ -141,11 +137,24 @@ import eventBus from '/@/utils/mitt'
 import {PageInputFileGetPageDto} from "/@/api/admin/productionManagement/ComopnentDto";
 import {ComponentGetPageOutPut} from "/@/api/admin/productionManagement/CommunalDto";
 import router from "/@/router";
+import {defineAsyncComponent} from "vue/dist/vue";
 //import { isImage } from '/@/utils/test'
 //import commonFunction from '/@/utils/commonFunction'
 
 //const { proxy } = getCurrentInstance() as any
-
+const MySelectRequest = defineAsyncComponent(() => import('/@/components/my-select-request/index.vue'))
+/**
+ * 向子组件传值，
+ * code 字段编码
+ * select 默认值
+ */
+const props = reactive({
+  code:'componentType',
+  select:'1'
+})
+const search = (val) => {
+  console.log(val)
+}
 
 
 const fileUploadRef = ref()