feat(全部页面): 更换了缓存的获取方式，完成获取密钥列表

使用vuex存储数据字典的缓存，完成了密钥列表的开发

admin.ui.plus-master/src/App.vue

@@ -19,6 +19,7 @@ import other from '/@/utils/other'
 import { Local, Session } from '/@/utils/storage'
 import mittBus from '/@/utils/mitt'
 import setIntroduction from '/@/utils/setIconfont'
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'))
@@ -32,6 +33,7 @@ const setingsRef = ref()
 const route = useRoute()
 const stores = useTagsViewRoutes()
 const storesThemeConfig = useThemeConfig()
+const globalCacheStore = useGlobalCacheStore()
 const { themeConfig } = storeToRefs(storesThemeConfig)
 
 // 设置锁屏时组件显示隐藏
@@ -77,6 +79,11 @@ onMounted(() => {
     mittBus.on('openSetingsDrawer', () => {
       setingsRef.value.openDrawer()
     })
+
+    //获取字典状态缓存
+    globalCacheStore.requestGlobalStore()
+    console.log(globalCacheStore.getGlobalStore());
+
     // 获取缓存中的布局配置
     if (Local.get('themeConfig')) {
       storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') })

admin.ui.plus-master/src/api/admin/productionManagement/README.md

@@ -28,4 +28,12 @@
 
 #### ComponentDetailsDto.ts
 
-	生产管理 - 部件详情 数据对象的DTO
+	生产管理 - 部件详情 数据对象的DTO
+
+#### groupLogoKeyApi.ts
+
+	生产管理 - 团标密钥发送后端请求数据
+
+#### groupLogoKeyDto.ts
+
+	生产管理 - 团标密钥 数据对象的DTO

admin.ui.plus-master/src/api/admin/productionManagement/groupLogoKeyApi.ts

@@ -0,0 +1,15 @@
+import {ContentType, HttpClient} from "/@/api/admin/http-client";
+import {groupLogoKeyRequestBody} from "/@/api/admin/productionManagement/groupLogoKeyDto";
+import {AxiosResponse} from "axios";
+
+export class GroupLogoKeyApi<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
+  getPage = (data:groupLogoKeyRequestBody) =>
+    this.request<AxiosResponse, any>({
+      path: `/api/app/compoent/get-key-list`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+    })
+}

admin.ui.plus-master/src/api/admin/productionManagement/groupLogoKeyDto.ts

@@ -0,0 +1,25 @@
+/**
+ * 生产管理 - 团标密钥
+ *  数据对象的Dto
+ * */
+
+export interface groupLogoKeyPageInput {
+  currentPage: number,
+  pageSize: number,
+}
+
+export interface groupLogoKeyFilterModel {
+  keyGuid?: string | null ,
+  state?: number | null
+  lastUpdate?:string | null,
+  applicationTime?: string | null,
+  recordTime?: string | null ,
+  remark?: string | null,
+  deviceType?: string | null
+}
+
+export interface groupLogoKeyRequestBody {
+  currentPage: number,
+  pageSize: number,
+  filter:  groupLogoKeyFilterModel
+}

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

@@ -1,64 +0,0 @@
-<template v-if="state.selectDto.length">
-  <el-select v-model="localSelect" :placeholder="localTextPla" @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 {onMounted, reactive, ref, watch} from "vue";
-import {sessionStorageSet} from "/@/utils/sessionStorageSet";
-import {DictApi} from "/@/api/admin/Dict";
-import {DictGetListDto} from "/@/api/admin/data-contracts";
-  /**
-   * 接受父组件中传过来的数据字典id,
-   * 根据id去查询
-   * */
-  const props = defineProps({
-    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({
-    /**选择选择值*/
-    selectDto: <DictGetListDto>[],
-  })
-
-  const onChange = () =>{
-    emits('search',localSelect)
-  }
-  /**
-   * 获取缓存，缓存不存在就发送请求
-   * */
-  const init = async () => {
-    state.selectDto = sessionStorageSet.getItemWithExpiration(props.code as string)
-    if (!state.selectDto){
-      const res = await new DictApi().getList([props.code] as string[])
-      /**存一天的缓存*/
-      sessionStorageSet.setItemWithExpiration(props.code as string, res?.data,1)
-      state.selectDto = sessionStorageSet.getItemWithExpiration(props.code as string)
-    }
-  }
-
-
-  onMounted( () => {
-    init()
-  })
-</script>
-
-<style scoped lang="scss">
-
-</style>

admin.ui.plus-master/src/stores/globalCacheStore.ts

@@ -0,0 +1,40 @@
+/**
+ * 用户存储全局一些 状态 和 类型的数据词典
+ */
+import {defineStore} from "pinia";
+import {DictApi} from "/@/api/admin/Dict";
+
+const arr =
+  ['componentStatus',
+    'componentType',
+    'componentStatusType',
+    'componentTypeListStatus',
+    'productionLogListStatus',
+    'groupLogoKeyKeyType',
+    'groupKeyGroupStatus']
+
+export const useGlobalCacheStore = defineStore('globalCacheStore', {
+  state: () => ({
+    globalStore:new Map
+  }),
+  actions: {
+    /**获取所有字典缓存*/
+    async requestGlobalStore  ()  {
+      const { data } = await new DictApi().getList(arr)
+      Object.keys(data as object).forEach(key => {
+        const newMap = data?.[key]?.reduce((map, obj) => {
+          // @ts-ignore
+          obj.color = obj.code.split("_")[1] ?? ''
+          map.set(obj.value,{...obj})
+          return map
+        },new Map)
+        this.globalStore.set(key,newMap)
+      })
+    },
+
+    getGlobalStore(){
+      return this.globalStore
+    },
+
+  }
+})

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

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

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

@@ -149,7 +149,7 @@ const sdkData = reactive({
   /**分页标识 */
   pageInput:{
     CurrentPage: 1,
-    PageSize: 20,
+    PageSize: 10,
   } as pageInput,
   /**分页总数 */
   total: 0,
@@ -204,6 +204,7 @@ const resetQuery = () => {
   sdkData.Filter.BeginTime =  ''
   sdkData.Filter.EndTime = ''
   sdkData.time = ''
+  sdkData.pageInput.CurrentPage = 1
 }
 
 /**重置 */

admin.ui.plus-master/src/views/admin/product/components/form-edit.vue

@@ -11,7 +11,7 @@
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="部件类型" prop="type">
               <el-select  v-model="formData.editData.type" placeholder="请选择部件类型" >
-                <el-option v-for="(value, key) in mapType" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
+                <el-option v-for="(value, key) in componentType" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
               </el-select>
             </el-form-item>
           </el-col>
@@ -28,7 +28,7 @@
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="状态" prop="status">
               <el-select  v-model="formData.editData.status" placeholder="请选择部件状态" >
-                <el-option v-for="(value, key) in mapState" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
+                <el-option v-for="(value, key) in componentTypeListStatus" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
               </el-select>
             </el-form-item>
           </el-col>
@@ -60,15 +60,16 @@ import {FormRules} from "element-plus";
 import {componentTypeDto, typeTable} from "/@/api/admin/productionManagement/ComponentTypeDto";
 import {ComponentTypeApi} from "/@/api/admin/productionManagement/ComponentType";
 import eventBus from "/@/utils/mitt";
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
 const MyUploadImg = defineAsyncComponent(() => import('/src/components/my-upload-img/index.vue'))
 
-const formProps = defineProps({
-  mapType:Map,
-  mapState:Map
-})
+/**获取全局缓存*/
+const globalCacheStore = useGlobalCacheStore()
+/**部件类型缓存*/
+const componentType = ref(globalCacheStore.getGlobalStore().get('componentType'))
+/**获取部件类型列表状态*/
+const componentTypeListStatus = ref(globalCacheStore.getGlobalStore()?.get('componentTypeListStatus'))
 
-const mapType = ref(formProps.mapType)
-const mapState = ref(formProps.mapState)
 
 enum Form {
   ADD,
@@ -112,17 +113,22 @@ const rules = reactive<FormRules>({
   ],
 })
 
-
+/**
+ * 表单对象
+ */
 const formRef = ref()
 
 const onUpload = (val) => {
   formData.editData.img = val
 }
 
+/**
+ * 根据参数 打开表单
+ * @param val
+ */
 const openDialog = (val) => {
-
   if(val){
-    formData.editData = JSON.parse(JSON.stringify(({...val,type:Number(val.type.value), status:Number(val.status.value)})))
+    formData.editData = JSON.parse(JSON.stringify(({...val})))
     formData.titleText = '更新部件'
     formData.buttonText = '更新'
     //更新操作
@@ -139,6 +145,9 @@ const openDialog = (val) => {
   formData.isShowDialog = true
 }
 
+/**
+ * 取消
+ */
 const onCancel = () => {
   formData.editData = {} as typeTable
   formData.isShowDialog = false
@@ -149,6 +158,9 @@ watch(() => formData.isShowDialog,(newVal) => {
   if(newVal) formRef.value?.resetFields()
 })
 
+/**
+ * 提交前表单验证
+ */
 const onSubmit =  () => {
   formRef.value.validate(async (valid: boolean) =>{
     if(!valid) return

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

@@ -70,8 +70,8 @@
                   <template #reference>
                     <span class="m-2 ">
                       状态:
-                      <span class="bold-font" :style="{color:goods.basicInformation.status?.color}">
-                        {{goods.basicInformation.status?.name ?? ''}}
+                      <span class="bold-font" :style="{color:getComponentStatusType(goods.basicInformation.status).color}">
+                        {{getComponentStatusType(goods.basicInformation.status).name}}
                       </span>
                     </span>
                   </template>
@@ -88,8 +88,8 @@
                   <template #reference>
                     <span class="m-2">
                       密钥状态:
-                      <span class="bold-font" :style="{color:goods.basicInformation.key_name?.color}">
-                        {{goods.basicInformation.key_name?.name ?? ''}}
+                      <span class="bold-font" :style="{color:getComponentStatus(goods.basicInformation.key_name).color}">
+                        {{getComponentStatus(goods.basicInformation.key_name).name }}
                       </span>
                     </span>
                   </template>
@@ -106,8 +106,8 @@
                   <template #reference>
                     <span class="m-2 ">
                       团标状态:
-                      <span class="bold-font" :style="{color:goods.basicInformation.stand_name?.color}">
-                        {{goods.basicInformation.stand_name?.name ?? ''}}
+                      <span class="bold-font" :style="{color:getComponentStatus(goods.basicInformation.stand_name).color}">
+                        {{getComponentStatus(goods.basicInformation.stand_name).name }}
                       </span>
                     </span>
                   </template>
@@ -195,7 +195,7 @@
             <el-table-column prop="eventName" label="操作员"  />
             <el-table-column prop="step" label="工序"  >
               <template #default="{ row }">
-                {{row.step}}
+                {{getProductionLogListStatus(row.step).name}}
               </template>
             </el-table-column>
             <el-table-column prop="state" label="状态"  >
@@ -205,7 +205,8 @@
             </el-table-column>
             <el-table-column prop="img" label="生产图片"  >
               <template #default="{ row }">
-                <el-link :underline="false" @click="showBigPic(row.img)">查看大图</el-link>
+                <el-link v-if="row.img" :underline="false" @click="showBigPic(row.img)">查看大图</el-link>
+                <span v-else>无</span>
               </template>
             </el-table-column>
             <el-table-column prop="remarks" label="备注"  />
@@ -278,9 +279,8 @@ import type {
 import {adminProductGoodsInfoDto, filterData} from "/@/api/admin/productionManagement/ComponentDetailsDto";
 import type {columnsProps, pageInput} from "/@/api/admin/shareDto/shareDto";
 import { Picture as IconPicture } from '@element-plus/icons-vue'
-import {sessionStorageSet} from "/@/utils/sessionStorageSet";
-import {DictApi} from "/@/api/admin/Dict";
 import {ProductionLogRequestBody} from "/@/api/admin/productionManagement/ComopnentDto";
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
 //组件的页面对象
 const goods = reactive({
   /**部件id */
@@ -338,11 +338,57 @@ const goods = reactive({
 //图片url前缀
 const baseUrl = import.meta.env.VITE_API_URL
 
+/**获取全局缓存*/
+const globalCacheStore = useGlobalCacheStore()
+
+/**部件详情数据字典缓存*/
+
+/**部件详情 - 基本信息状态 */
+const componentStatusType = ref(globalCacheStore.getGlobalStore().get('componentStatusType'))
+/**部件详情 - 基本信息 - 中化密钥、团标密钥 */
+const componentStatus = ref(globalCacheStore.getGlobalStore().get('componentStatus'))
+/**部件详情 - 生产日志 -工序*/
+const productionLogListStatus = ref(globalCacheStore.getGlobalStore().get('productionLogListStatus'))
+
+/**部件详情 - 基本信息状态 */
+const getComponentStatusType = (val) => {
+  val = String(val)
+  if(componentStatusType.value?.has(val)){
+    return componentStatusType.value.get(val)
+  }else {
+    return val
+  }
+}
+
+/**部件详情 - 基本信息 - 中化密钥、团标密钥 */
+const getComponentStatus = (val) => {
+  val = String(val)
+  if(componentStatus.value.has(val)){
+    return componentStatus.value.get(val)
+  }else {
+    return val
+  }
+}
+
+/**部件详情 - 生产日志 -工序*/
+const getProductionLogListStatus = (val) => {
+  val = String(val)
+  if(productionLogListStatus.value.has(val)){
+    return productionLogListStatus.value.get(val)
+  }else {
+    return val
+  }
+}
+
+
+
 //查看大图
 const showBigPic = (val) => {
-  // eslint-disable-next-line no-console
-  console.log(val)
-  goods.imageUrl = baseUrl + '/' + val
+  if(val){
+    goods.imageUrl = baseUrl + '/' + val
+  }else {
+    goods.imageUrl = ''
+  }
   goods.showBig = true
 }
 
@@ -379,23 +425,14 @@ const initBasicInformation =  async () => {
   const { data } = await new ComponentDetails().getBasicInfo({GUID:goods.id} ).catch(() => {
     goods.loadingBasic = false
   })
-  goods.basicInformation = ({
-    ...data,
-    status: componentStatusType.value?.get(data.status) ?? '',
-    key_name:basicInformationStatus.value?.get(data.key_name) ?? '',
-    stand_name:basicInformationStatus.value?.get(data.stand_name) ?? ''
-  })
+  goods.basicInformation = data
   goods.loadingBasic = false
 }
 
 const initProductionLog = async () => {
   goods.loadingProduct = true
   const { data } = await new ComponentDetails().getProductionLog({...goods.productionLog.pageInput,filter:({id:goods.id})} as ProductionLogRequestBody)
-  goods.productionLog.tableData = data?.list?.reduce((arr, item) => {
-    item.step = productionLogStatus.value?.get(item.step).name
-    arr.push(item)
-    return arr
-  },[]) ?? []
+  goods.productionLog.tableData = data?.list
   goods.productionLog.total = data?.total ?? 0
   goods.loadingProduct = false
 }
@@ -407,96 +444,9 @@ const initAlarmLog = async () => {
   // console.log(goods.alarmLog)
 }
 
-//设置获取部件中化密钥，团标状态
-const basicInformationStatusCode = reactive({
-  code:'componentStatus'
-})
-//部件中化密钥，团标状态对象
-const basicInformationStatus = ref()
-
-//设置获取部件状态的编码
-const componentStatusTypeCode = reactive({
-  code:'componentStatusType'
-})
-//部件状态对象
-const componentStatusType = ref()
-
-//设置获取部件状态的编码
-const productionLogStatusCode = reactive({
-  code:'productionLogListStatus'
-})
-//部件状态对象
-const productionLogStatus = ref()
-
-/**
- * 初始化，获取缓存 中化密钥 图标密钥
- */
-const initBasicInformationCache = async () => {
-  let sessionStatus;
-  sessionStatus = sessionStorageSet.getItemWithExpiration(basicInformationStatusCode.code as string)
-  if (!sessionStatus){
-    const res = await new DictApi().getList([basicInformationStatusCode.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(basicInformationStatusCode.code as string, res?.data,1)
-    sessionStatus = sessionStorageSet.getItemWithExpiration(basicInformationStatusCode.code as string as string)
-  }
-
-  /**将状态转化为map的形式*/
-  basicInformationStatus.value = sessionStatus.reduce((map, obj) => {
-    obj.color = obj.code.split("_")[1]
-    map.set(Number(obj.value), {...obj});
-    return map;
-  },new Map());
-}
-
-/**
- * 初始化，获取缓存部件状态
- */
-const initComponentStatusType = async () => {
-  let sessionStatus;
-  sessionStatus = sessionStorageSet.getItemWithExpiration(componentStatusTypeCode.code as string)
-  if (!sessionStatus){
-    const res = await new DictApi().getList([componentStatusTypeCode.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(componentStatusTypeCode.code as string, res?.data,1)
-    sessionStatus = sessionStorageSet.getItemWithExpiration(componentStatusTypeCode.code as string as string)
-  }
-
-  /**将状态转化为map的形式*/
-  componentStatusType.value = sessionStatus.reduce((map, obj) => {
-    obj.color = obj.code.split("_")[1]
-    map.set(Number(obj.value), {...obj});
-    return map;
-  },new Map());
-}
-
-/**
- * 初始化，获取生产日志工序缓存
- */
-const initProductionLogCache = async () => {
-  let sessionStatus;
-  sessionStatus = sessionStorageSet.getItemWithExpiration(productionLogStatusCode.code as string)
-  if (!sessionStatus){
-    const res = await new DictApi().getList([productionLogStatusCode.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(productionLogStatusCode.code as string, res?.data,1)
-    sessionStatus = sessionStorageSet.getItemWithExpiration(productionLogStatusCode.code as string as string)
-  }
-
-  /**将状态转化为map的形式*/
-  productionLogStatus.value = sessionStatus.reduce((map, obj) => {
-    map.set(Number(obj.value), {...obj});
-    return map;
-  },new Map());
-}
-
 
 onMounted(() => {
   goods.id = router.currentRoute.value.params.guid
-  // console.log(goods.productionLog.pageInput.PageSize)
-  initBasicInformationCache()
-  initComponentStatusType()
-  initProductionLogCache()
   /**初始化 */
   initBasicInformation()
   initProductionLog()

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

@@ -3,19 +3,169 @@
     <el-row>
       <el-col :xs="24">
         <el-card class="mt8" shadow="hover" >
-          123
+          <el-form :model="groupLogoKeyOnQuery.filter" :inline="true" @submit.stop.prevent>
+            <el-form-item prop="name" style="width:100%">
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="GUID">
+                  <el-input v-model="groupLogoKeyOnQuery.filter.keyGuid" placeholder="请输入GUID" clearable></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="团标状态">
+                  <el-select  v-model="groupLogoKeyOnQuery.filter.state" placeholder="请选择部件类型" >
+                    <el-option v-for="(value, key) in groupKeyGroupStatus" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item label="密钥类型">
+                  <el-select  v-model="groupLogoKeyOnQuery.filter.deviceType" placeholder="请选择部件类型" >
+                    <el-option v-for="(value, key) in groupLogoKeyKeyType" :key="key" :label="value[1].name"  :value="value[1].value" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                <el-form-item>
+                  <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+                  <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
+                </el-form-item>
+              </el-col>
+            </el-form-item>
+          </el-form>
         </el-card>
       </el-col>
       <el-col :xs="24">
         <el-card class="mt8" shadow="hover" >
-          321
+          <el-table v-loading="state.loading" :data="state.list" row-key="id" style="width: 100%">
+            <el-table-column prop="guid" label="GUID"  />
+            <el-table-column prop="state" label="状态"  >
+              <template #default="{ row }">
+                {{ row.state}}
+              </template>
+            </el-table-column>
+            <el-table-column prop="deviceType" label="密钥类型"  />
+            <el-table-column prop="remark" label="备注"  />
+            <el-table-column prop="lastUpdate" label="最近同步时间" />
+            <el-table-column prop="applicationTime" label="申请时间" />
+            <el-table-column prop="recordTime" label="备案时间" />
+          </el-table>
+          <div class="my-flex my-flex-end" style="margin-top: 20px">
+            <el-pagination
+              v-model:currentPage="state.pageInput.currentPage"
+              v-model:page-size="state.pageInput.pageSize"
+              :total="state.total"
+              :default-page-size="5"
+              :page-sizes="[5, 10, 20, 50, 100]"
+              small
+              background
+              @size-change="onSizeChange"
+              @current-change="onCurrentChange"
+              layout="total, sizes, prev, pager, next, jumper"
+            />
+          </div>
         </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">/**团标密钥数据对象*/
+
+import {onMounted, reactive} from "vue";
+import {
+  groupLogoKeyFilterModel,
+  groupLogoKeyPageInput, groupLogoKeyRequestBody,
+} from "/@/api/admin/productionManagement/groupLogoKeyDto";
+import {ref} from "vue-demi";
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
+import {GroupLogoKeyApi} from "/@/api/admin/productionManagement/groupLogoKeyApi";
+
+/**
+ * 团标密钥查询时需要的参数
+ * */
+const groupLogoKeyOnQuery = reactive({
+  filter:{
+    keyGuid:'',
+    deviceType:'',
+    lastUpdate:'',
+    applicationTime: '',
+    recordTime: '' ,
+  } as groupLogoKeyFilterModel,
+  pageInput:{
+    currentPage: 1,
+    pageSize: 5,
+  } as groupLogoKeyPageInput
+})
+
+/**
+ * 团标密钥数据对象
+ */
+const state = reactive({
+  loading: false,
+  list:  [] as Array<groupLogoKeyFilterModel>,
+  pageInput:{
+    currentPage: 1,
+    pageSize: 10,
+  } as groupLogoKeyPageInput,
+  total: 0
+})
+
+/**获取全局缓存*/
+const globalCacheStore = useGlobalCacheStore()
+
+/**生产管理 - 团标密钥 - 团标状态*/
+const groupKeyGroupStatus = ref(globalCacheStore.getGlobalStore().get('groupKeyGroupStatus'))
+
+/**生产管理 - 团标密钥 - 密钥类型*/
+const groupLogoKeyKeyType = ref(globalCacheStore.getGlobalStore().get('groupLogoKeyKeyType'))
+
+/**
+ * 页条变化
+ * @param val
+ */
+const onSizeChange = (val: number) => {
+  state.pageInput.pageSize = val
+  onQuery()
+}
+
+/**
+ * 页数 变化
+ * @param val
+ */
+const onCurrentChange = (val: number) => {
+  state.pageInput.currentPage = val
+  onQuery()
+}
+
+console.log(groupKeyGroupStatus.value);
+console.log(groupLogoKeyKeyType.value);
+
+const onQuery = async () => {
+  console.log(groupLogoKeyOnQuery)
+  const { data } = await new GroupLogoKeyApi().getPage(groupLogoKeyOnQuery as groupLogoKeyRequestBody)
+  state.list = data?.list
+  state.total = data?.total
+  console.log(data)
+}
+
+
+onMounted(() => {
+  onQuery()
+})
+
+const onReset = () => {
+  groupLogoKeyOnQuery.filter = {
+    keyGuid:'',
+    deviceType:'',
+    lastUpdate:'',
+    applicationTime: '',
+    recordTime: '' ,
+  }
+  groupLogoKeyOnQuery.pageInput.currentPage = 1
+  onQuery()
+}
+
+
 
 </script>
 

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

@@ -24,7 +24,9 @@
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
                 <el-form-item label="部件类型">
-                  <MySelectRequest :textPla="props.textPla" :select="props.select" :code="props.code" @search="search"/>
+                  <el-select  v-model="bomModel.filterModel.bomType" placeholder="请选择部件类型" >
+                    <el-option v-for="(value, key) in componentType" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
+                  </el-select>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
@@ -52,22 +54,22 @@
             <el-table-column prop="software_v" label="软件版本"  />
             <el-table-column prop="status"  label="状态" width="120" >
               <template #default="{ row }">
-                <div :style="{color:row.status.color} " class="bold-font">
-                  {{row.status.name}}
+                <div :style="{color:getComponentStatusType(row.status).color} " class="bold-font">
+                  {{getComponentStatusType(row.status).name}}
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="key_name" label="中化密钥"  >
               <template #default="{ row }">
-                <div :style="{color:row.key_name.color}" class="bold-font">
-                  {{row.key_name.name}}
+                <div :style="{color:getComponentStatus(row.key_name).color}" class="bold-font">
+                  {{getComponentStatus(row.key_name).name}}
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="stand_name" label="团标状态" >
               <template #default="{ row }">
-                <div :style="{color:row.stand_name.color}" class="bold-font">
-                  {{row.stand_name.name}}
+                <div :style="{color:getComponentStatus(row.key_name).color}" class="bold-font">
+                  {{getComponentStatus(row.stand_name).name}}
                 </div>
               </template>
             </el-table-column>
@@ -151,50 +153,24 @@
   </div>
 </template>
 <script lang="ts" setup name="admin/Component">
-import {ref, reactive, onMounted, defineAsyncComponent} from 'vue'  //computed, getCurrentInstance
-import { ComponentApi } from '/@/api/admin/productionManagement/Component'
+import {onMounted, reactive, ref} from 'vue' //computed, getCurrentInstance
+import {ComponentApi} from '/@/api/admin/productionManagement/Component'
 // import dayjs from 'dayjs'
 // import eventBus from '/@/utils/mitt'
-import {PageInputFileGetPageDto} from "/src/api/admin/productionManagement/ComopnentDto";
-import {ComponentGetPageOutPut} from "/src/api/admin/productionManagement/CommunalDto";
-import router from "/src/router";
-import {sessionStorageSet} from "/src/utils/sessionStorageSet";
-import {DictApi} from "/src/api/admin/Dict";
-//import { isImage } from '/@/utils/test'
-//import commonFunction from '/@/utils/commonFunction'
+import {PageInputFileGetPageDto} from "/@/api/admin/productionManagement/ComopnentDto";
+import {ComponentGetPageOutPut} from "/@/api/admin/productionManagement/CommunalDto";
+import router from "/@/router";
 
-//const { proxy } = getCurrentInstance() as any
-const MySelectRequest = defineAsyncComponent(() => import('/src/components/my-select-request/index.vue'))
-/**
- * 向子组件传值，
- * code 字段编码
- * select 默认值
- */
-const props = reactive({
-  code:'componentType',
-  select:'',
-  textPla:'请选择部件类型'
-})
-
-//设置获取部件中化密钥，团标状态
-const componentStatusCode = reactive({
-  code:'componentStatus'
-})
-//部件中化密钥，团标状态对象
-const componentStatus = ref()
-
-//设置获取部件状态的编码
-const componentStatusTypeCode = reactive({
-  code:'componentStatusType'
-})
-//部件状态对象
-const componentStatusType = ref()
-
-const search = (val) => {
-  bomModel.filterModel.bomType = val.value
-  props.select = val.value
-}
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
 
+/**获取全局缓存*/
+const globalCacheStore = useGlobalCacheStore()
+/**部件类型缓存*/
+const componentType = ref(globalCacheStore.getGlobalStore().get('componentType'))
+/**部件电子档案 - 列表状态 */
+const componentStatusType = ref(globalCacheStore.getGlobalStore().get('componentStatusType'))
+/**部件电子档案 - 列表中化密钥、团标密钥 */
+const componentStatus = ref(globalCacheStore.getGlobalStore().get('componentStatus'))
 
 const fileUploadRef = ref()
 
@@ -212,12 +188,31 @@ const bomModel = reactive({
   total: 0,
   pageInput: {
     currentPage: 1,
-    pageSize: 20,
+    pageSize: 10,
   } as PageInputFileGetPageDto,
   bomListData: [] as Array<ComponentGetPageOutPut>,
   bomLogsTitle: '',
 })
 
+/**部件电子档案 - 列表状态 */
+const getComponentStatusType = (val) => {
+  val = String(val)
+  if(componentStatusType.value?.has(val)){
+    return componentStatusType.value.get(val)
+  }else {
+    return val
+  }
+}
+
+/**部件电子档案 - 列表中化密钥、团标密钥 */
+const getComponentStatus = (val) => {
+  val = String(val)
+  if(componentStatus.value.has(val)){
+    return componentStatus.value.get(val)
+  }else {
+    return val
+  }
+}
 
 //const { copyText } = commonFunction()
 
@@ -229,53 +224,7 @@ const bomModel = reactive({
 // return imgList
 //})
 
-/**
- * 初始化，获取缓存部件状态 中化密钥、团标密钥
- */
-const initComponentStatus = async () => {
-  let sessionStatus;
-  sessionStatus = sessionStorageSet.getItemWithExpiration(componentStatusCode.code as string)
-  if (!sessionStatus){
-    const res = await new DictApi().getList([componentStatusCode.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(componentStatusCode.code as string, res?.data,1)
-    sessionStatus = sessionStorageSet.getItemWithExpiration(componentStatusCode.code as string as string)
-  }
-
-  /**将状态转化为map的形式*/
-  componentStatus.value = sessionStatus.reduce((map, obj) => {
-    obj.color = obj.code.split("_")[1]
-    map.set(Number(obj.value), {...obj});
-    return map;
-  },new Map());
-}
-
-/**
- * 初始化，获取部件状态缓存
- */
-const initComponentStatusType = async () => {
-  let sessionStatus;
-  sessionStatus = sessionStorageSet.getItemWithExpiration(componentStatusTypeCode.code as string)
-  if (!sessionStatus){
-    const res = await new DictApi().getList([componentStatusTypeCode.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(componentStatusTypeCode.code as string, res?.data,1)
-    sessionStatus = sessionStorageSet.getItemWithExpiration(componentStatusTypeCode.code as string as string)
-  }
-
-  /**将状态转化为map的形式*/
-  componentStatusType.value = sessionStatus.reduce((map, obj) => {
-    obj.color = obj.code.split("_")[1]
-    map.set(Number(obj.value), {...obj});
-    return map;
-  },new Map());
-}
-
 onMounted(async () => {
-  /**获取缓存 中化密钥、团标密钥*/
-  await initComponentStatus()
-  /**获取缓存 部件状态*/
-  await initComponentStatusType()
   await onQuery()
 })
 
@@ -294,13 +243,13 @@ const onQuery = async () => {
   const res = await new ComponentApi().getPage({ ...bomModel.pageInput, filter: bomModel.filterModel }).catch(() => {
     bomModel.loading = false
   })
-  const arr = res?.data?.list
-  bomModel.bomListData = arr.map(item => ({
-    ...item,
-    key_name:componentStatus.value?.get(item.key_name) ?? '',
-    stand_name:componentStatus.value?.get(item.stand_name) ?? '',
-    status:componentStatusType.value?.get(item.status) ?? ''
-  }))
+  bomModel.bomListData = res?.data?.list
+  //   .map(item => ({
+  //   ...item,
+  //   key_name:componentStatus.value?.get(item.key_name) ?? '',
+  //   stand_name:componentStatus.value?.get(item.stand_name) ?? '',
+  //   status:componentStatusType.value?.get(item.status) ?? ''
+  // }))
   bomModel.total = res?.data?.total ?? 0
   bomModel.loading = false
 }
@@ -311,19 +260,30 @@ const onReset = () => {
   onQuery()
 }
 
+/**
+ * 重置表单
+ */
 const resetSearchForm = () => {
   bomModel.filterModel.bomType = ''
   bomModel.filterModel.bomName = ''
   bomModel.filterModel.bomProNo = ''
   bomModel.filterModel.bomMateNo = ''
-  props.select = ''
+  bomModel.pageInput.currentPage = 1
 }
 
+/**
+ * 页条变化
+ * @param val
+ */
 const onSizeChange = (val: number) => {
   bomModel.pageInput.pageSize = val
   onQuery()
 }
 
+/**
+ * 页数变化
+ * @param val
+ */
 const onCurrentChange = (val: number) => {
   bomModel.pageInput.currentPage = val
   onQuery()

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

@@ -19,8 +19,10 @@
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item label="部件类型">
-                  <MySelectRequest :textPla="propsType.textPla" :select="propsType.select" :code="propsType.code" @search="search"/>
-                </el-form-item>
+                  <el-select  v-model="state.filterModel.bomType" placeholder="请选择部件类型" >
+                    <el-option v-for="(value, key) in componentType" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
+                  </el-select>
+                  </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                 <el-form-item>
@@ -46,15 +48,15 @@
             <el-table-column prop="guid" label="序号"  />
             <el-table-column prop="type" label="部件类型"  >
               <template #default="{ row }">
-                {{row.type.name}}
+                {{ getComponentType(row.type)}}
               </template>
             </el-table-column>
             <el-table-column prop="bomName" label="部件名称"  />
             <el-table-column prop="bomNo" label="物料号"  />
             <el-table-column prop="status" label="状态"  >
               <template #default="{ row }" >
-                <div :style="{color: row.status.color}" class="bold-font">
-                  {{row.status.name}}
+                <div :style="{color:getComponentState(row.status).color}"  class="bold-font">
+                  {{getComponentState(row.status).name}}
                 </div>
               </template>
             </el-table-column>
@@ -149,71 +151,42 @@
         class="fullscreen-image"
         alt="放大的图片"/>
     </el-dialog>
-    <EditDialog v-if="mapIsExist" :mapType="mapType" :mapState="mapState" ref="editDialogRef" />
+    <EditDialog ref="editDialogRef" />
   </div>
 </template>
 
 <script lang="ts" setup name="admin/product/bom">
-import {ref, reactive, onMounted, onBeforeMount, defineAsyncComponent} from 'vue'
-import { ComponentTypeApi } from '/@/api/admin/productionManagement/ComponentType'
-// import dayjs from 'dayjs'
+import {defineAsyncComponent, onBeforeMount, onMounted, reactive, ref} from 'vue'
+import {ComponentTypeApi} from '/@/api/admin/productionManagement/ComponentType'
 import eventBus from '/@/utils/mitt'
-// import { isImage } from '/@/utils/test'
 import {FileGetPageOutput} from "/@/api/admin/data-contracts";
 import {PageInputFileGetPageDto} from "/@/api/admin/productionManagement/ComopnentDto";
 import {ComponentGetPageDto} from "/@/api/admin/productionManagement/ComponentTypeDto";
-import { Picture as IconPicture } from '@element-plus/icons-vue'
-import {sessionStorageSet} from "/@/utils/sessionStorageSet";
-import {DictApi} from "/@/api/admin/Dict";
-//import commonFunction from '/@/utils/commonFunction'
+import {Picture as IconPicture} from '@element-plus/icons-vue'
+import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
+
 
-// const { proxy } = getCurrentInstance() as any
 
 /**引入组件*/
 const EditDialog = defineAsyncComponent(() => import('../components/form-edit.vue'))
-const MySelectRequest = defineAsyncComponent(() => import('/src/components/my-select-request/index.vue'))
-/**
- * 向子组件传值，
- * code 字段编码
- * select 默认值
- */
-const propsType = reactive({
-  code:'componentType',
-  select:'',
-  textPla:'请选择部件类型'
-})
+
+/**获取全局缓存*/
+const globalCacheStore = useGlobalCacheStore()
+/**部件类型缓存*/
+const componentType = ref(globalCacheStore.getGlobalStore().get('componentType'))
+/**获取部件类型列表状态*/
+const componentTypeListStatus = ref(globalCacheStore.getGlobalStore()?.get('componentTypeListStatus'))
 
 /**
- *
- * @param val
+ * 根据当前环境获取后端的 域名 + 端口
  */
-const propsState = reactive({
-  code:'componentTypeListStatus',
-  select:'',
-  textPla:'请选择状态'
-})
-
-const search = (val) => {
-  state.filterModel.bomType = val.value
-  propsType.select = val.value
-}
-
 const baseUrl = import.meta.env.VITE_API_URL
 
-const getImg = (url) => {
-  return baseUrl +'/' +url
-}
-
+/**
+ * 绑定EditDialog
+ */
 const editDialogRef = ref()
 
-const mapIsExist = ref(false)
-
-/**部件类型map*/
-const mapType = ref(new Map)
-
-/**部件状态*/
-const mapState = ref(new Map)
-
 // const fileUploadRef = ref()
 
 //部件的页面对象
@@ -259,79 +232,40 @@ const showBigPic = (val) => {
   state.showBig = true
 }
 
-// /**返回部件类型*/
-// const getComponentType = (type) =>{
-//   if(mapType.value?.has(type)){
-//     return mapType.value.get(type)
-//   }else {
-//     return type
-//   }
-// }
-//
-// const getComponentState = (state) => {
-//   if(mapState.value.has(state)){
-//     return mapState.value.get(state).name
-//   }else {
-//     return state
-//   }
-// }
-
-//获取部件类型map
-const initLocalType = async () => {
-  let localType = sessionStorageSet.getItemWithExpiration(propsType.code)
-
-  if(!localType){
-    const res = await new DictApi().getList([propsType.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(propsType.code as string, res?.data,1)
-    localType = sessionStorageSet.getItemWithExpiration(propsType.code as string)
+/**返回部件类型*/
+const getComponentType = (type) =>{
+  type = String(type)
+  if(componentType.value?.has(type)){
+    return componentType.value.get(type).name
+  }else {
+    return type
   }
-
-  mapType.value  = localType?.reduce((map, obj) => {
-    map.set(Number(obj.value), obj);
-    return map;
-  },new Map());
 }
 
-//获取部件状态map
-const initLocalState = async () => {
-  let sessionState = sessionStorageSet.getItemWithExpiration(propsState.code)
-
-  if(!sessionState){
-    const res = await new DictApi().getList([propsState.code] as string[])
-    /**存一天的缓存*/
-    sessionStorageSet.setItemWithExpiration(propsState.code as string, res?.data,1)
-    sessionState = sessionStorageSet.getItemWithExpiration(propsState.code as string)
+/**
+ * 返回部件类型 - 列表状态
+ * @param state
+ */
+const getComponentState = (state) => {
+  state = String(state)
+  if(componentTypeListStatus.value.has(state)){
+    return componentTypeListStatus.value.get(state)
+  }else {
+    return state
   }
-  mapState.value =sessionState?.reduce((map, obj) => {
-    obj.color = obj.code.split("_")[1]
-    map.set(Number(obj.value), {...obj});
-    return map;
-  },new Map());
 }
 
-onMounted(async () => {
-  await initLocalType()
-  await initLocalState()
-  await onQuery()
-  mapIsExist.value = true
-  eventBus.off('refreshView')
-  eventBus.on('refreshView', async () => {
-    await onQuery()
-  })
-})
-
-onBeforeMount(() => {
-  eventBus.off('refreshView')
-})
-
-// const formatterTime = (cellValue: any) => {
-//   return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
-// }
-
-// const getInitialIndex = (imgUrl: string) => {
-//   return previewImglist.value.indexOf(imgUrl)
-// }
+/**
+ * 拼接后端的 域名 + 端口
+ * @param url
+ */
+const getImg = (url) => {
+  if(url){
+    return baseUrl +'/' +url
+  }else {
+    return ''
+  }
+}
 
 /**查询*/
 const onQuery = async () => {
@@ -339,12 +273,7 @@ const onQuery = async () => {
   const {data} = await new ComponentTypeApi().getPage({ ...state.pageInput, filter: state.filterModel }).catch(() => {
     state.loading = false
   })
-  const arr = data?.list ?? []
-  state.bomListData = arr.map(item => ({
-    ...item,
-    type: mapType.value.get(item.type),
-    status: mapState.value.get(item.status),
-  }))
+  state.bomListData = data?.list ?? []
   state.total = data?.total ?? 0
   state.loading = false
 }
@@ -361,29 +290,70 @@ const resetSearchForm = () => {
   state.filterModel.bomName = ''
   state.filterModel.bomProNo = ''
   state.filterModel.bomMateNo = ''
-  propsType.select = ''
+  state.pageInput.currentPage = 1
 }
 
-/**添加*/
+/**
+ * 添加操作时直接打开弹窗表单
+ * */
 const onAdd = () => {
   editDialogRef.value.openDialog()
 }
 
-/**编辑弹窗 */
+/**
+ * 编辑操作时将当前数据对象传递给编辑表单
+ * */
 const editTableData = (row) => {
   editDialogRef.value.openDialog(row)
 }
 
+/**
+ * 页条变化
+ * @param val
+ */
 const onSizeChange = (val: number) => {
   state.pageInput.pageSize = val
   onQuery()
 }
 
+/**
+ * 页数 变化
+ * @param val
+ */
 const onCurrentChange = (val: number) => {
   state.pageInput.currentPage = val
   onQuery()
 }
 
+
+/**
+ * 挂载时
+ */
+onMounted(async () => {
+  // await initLocalType()
+  // await initLocalState()
+  await onQuery()
+  eventBus.off('refreshView')
+  eventBus.on('refreshView', async () => {
+    await onQuery()
+  })
+})
+
+/**
+ * 挂载前，
+ */
+onBeforeMount(() => {
+  eventBus.off('refreshView')
+})
+
+// const formatterTime = (cellValue: any) => {
+//   return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+// }
+
+// const getInitialIndex = (imgUrl: string) => {
+//   return previewImglist.value.indexOf(imgUrl)
+// }
+
 // const onUpload = () => {
 //   fileUploadRef.value.open()
 // }