yuang-framework-ui-common 1.0.113 → 1.0.115

package/lib/hooks/framework/frameworkBaseDialogHooks.ts

@@ -0,0 +1,162 @@
+import { ref, watch, computed } from 'vue';
+
+interface InfoProps {
+  value: string;
+  label: string;
+}
+
+/**
+ * 通用弹窗选择器基类 Hooks
+ * 解决：
+ *  - v-model 两次赋值
+ *  - 输入框缓存
+ *  - 防抖刷新
+ *  - 加载状态
+ *  - 弹窗开关
+ */
+export function useBaseDialog(
+  props: any,
+  emit: any,
+  options: {
+    /** 单选获取详情接口 */
+    selectInfo: (id: string) => Promise<any>;
+    /** 批量获取列表接口 */
+    selectInfoList: (ids: string[]) => Promise<any[]>;
+    /** 配置映射字段 */
+    infoProps?: InfoProps;
+  }
+) {
+  const { selectInfo, selectInfoList, infoProps = { value: 'id', label: 'name' } } = options;
+
+  // v-model的值
+  // const modelValue = defineModel<string>();
+  // defineModel 只能在vue文件中使用
+  // ✅ 修复：不在 hook 里用 defineModel，改为外部传入
+  const modelValue = computed({
+    get() {
+      if (typeof props.modelValue == 'undefined') {
+        throw new Error('需要在props中定义modelValue');
+      }
+      return props.modelValue;
+    },
+    set(v) {
+      emit('update:modelValue', v);
+    }
+  });
+  // 输入框的值
+  const inputValue = ref<string>('');
+  // 初始化列表
+  const initList = ref<string[]>([]);
+  // 是否显示弹出框
+  const isShowDialog = ref<boolean>(false);
+  // 是否初始化成功
+  const isInitSuccess = ref<boolean>(false);
+
+  // 是否锁定的
+  let isLocked = true;
+
+  // 使用 computed 创建一个只读的、组合了 props 的本地配置，这样更简洁，且具有响应式
+  const componentParam = computed(() => ({
+    isMultiple: true,
+    isShowInput: true,
+    isDisabled: false,
+    isReadonly: false,
+    profileId: 'dev',
+    ...props.param,
+    initList: initList.value
+  }));
+
+  // ========== 初始化（防抖版） ==========
+  const init = async () => {
+    inputValue.value = '';
+    initList.value = [];
+    isInitSuccess.value = false;
+
+    if (!modelValue.value) {
+      isInitSuccess.value = true;
+      return;
+    }
+
+    try {
+      // 单选
+      if (!componentParam.value?.isMultiple) {
+        if (modelValue.value !== '0') {
+          const infoData = await selectInfo(modelValue.value);
+          inputValue.value = infoData[infoProps.label];
+
+          initList.value = [infoData];
+        }
+      }
+      // 多选
+      else {
+        const idList = modelValue.value.split('|').filter(Boolean);
+        if (idList.length) {
+          const listData = await selectInfoList(idList);
+          inputValue.value = listData.map((item) => item[infoProps.label]).join('、');
+          initList.value = listData;
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      isInitSuccess.value = true;
+    }
+  };
+
+  // 监听组件值变化（解决弹窗/重复赋值/缓存问题）
+  watch(
+    modelValue,
+    () => {
+      isLocked = true;
+      setTimeout(() => {
+        if (isLocked) {
+          init();
+          isLocked = false;
+        }
+      }, 50);
+    },
+    { immediate: true }
+  );
+
+  // ========== 弹窗 ==========
+  const showDialog = () => {
+    isShowDialog.value = true;
+  };
+  const hideDialog = () => {
+    if (!isInitSuccess.value) {
+      return;
+    }
+    isShowDialog.value = false;
+  };
+
+  // ========== 选择完成 ==========
+  const handleChange = (selections) => {
+    modelValue.value = '';
+    inputValue.value = '';
+
+    if (selections.length) {
+      if (!componentParam.value?.isMultiple) {
+        modelValue.value = selections[0][infoProps.value];
+        inputValue.value = selections[0][infoProps.label];
+      } else {
+        modelValue.value = '|' + selections.map((s) => s[infoProps.value]).join('|');
+        inputValue.value = selections.map((s) => s[infoProps.label]).join('、');
+      }
+    }
+
+    emit('change', selections);
+    hideDialog();
+  };
+
+  return {
+    modelValue,
+    inputValue,
+    initList,
+    isShowDialog,
+    isInitSuccess,
+    componentParam,
+    showDialog,
+    hideDialog,
+    handleChange
+  };
+}

package/lib/hooks/framework/frameworkEnum.ts

@@ -14,7 +14,7 @@ const CACHE_KEY = '__global_status_enum_list__';
 if (!(window as any)[CACHE_KEY]) {
   (window as any)[CACHE_KEY] = {
     data: ref<StatusEnumItem[]>([]),
-    loading: ref(false),
+    isLoading: ref(false),
     isLoaded: false, // 🔥 核心：标记是否【真正加载完成】
     promise: null as Promise<any> | null,
   };
@@ -36,7 +36,7 @@ export const useStatusEnumList = () => {
     }
 
     // 3. 真正开始请求
-    cache.loading.value = true;
+    cache.isLoading.value = true;
     cache.promise = http.get('/framework-api/union/uims-user/getStatusEnumList', {});
 
     try {
@@ -47,7 +47,7 @@ export const useStatusEnumList = () => {
       console.error('加载枚举失败', err);
       cache.data.value = [];
     } finally {
-      cache.loading.value = false;
+      cache.isLoading.value = false;
       cache.promise = null;
     }
 
@@ -59,6 +59,6 @@ export const useStatusEnumList = () => {
 
   return {
     statusEnumList: cache.data,
-    isLoadingEnum: cache.loading,
+    isLoadingEnum: cache.isLoading,
   };
 };

package/lib/hooks/sso/ssoUser.ts

@@ -1,50 +1,65 @@
-// 首先建议创建类型定义文件（如 types/api.d.ts），或直接在当前文件定义类型
-// 定义接口：枚举列表项的类型
+import { ref } from 'vue';
+import { http } from '../../../lib/config/httpConfig';
+
+// 枚举项类型
 export interface StatusEnumItem {
-    // 根据实际返回的字段补充类型，比如：
     value: string;
     name: string;
-    // 兼容对象中未显式定义的任意字段，避免 TS 报错
     [key: string]: any;
 }
 
-import { ref } from 'vue';
-import { http } from '../../../lib/config/httpConfig';
+// ==================== 全局单例缓存（核心） ====================
+const GLOBAL_ENUM_CACHE = '__sso_user_status_enum_list__';
+
+// 全局唯一初始化
+if (!(window as any)[GLOBAL_ENUM_CACHE]) {
+    (window as any)[GLOBAL_ENUM_CACHE] = {
+        data: ref<StatusEnumItem[]>([]),
+        isLoading: ref(false),
+        isLoaded: false,
+        promise: null as Promise<any> | null,
+    };
+}
+
+const cache = (window as any)[GLOBAL_ENUM_CACHE];
 
-/**
- * 提供“获取状态枚举列表”的能力
- *
- * Vue3 官方明确规定，组合式函数必须以 use 开头（参考：Vue3 组合式函数文档），目的是让开发者一眼识别：“这是一个可复用的组合式逻辑，返回响应式能力”
- */
+// ==================== Hook 本体 ====================
 export const useStatusEnumList = () => {
-    // 定义响应式数据，指定类型
-    const statusEnumList = ref<StatusEnumItem[]>([]);
-    // 定义加载状态（可选，增强体验）
-    const isLoadingEnum = ref<boolean>(false);
-
-    /**
-     * 获取状态枚举列表的核心方法
-     */
-    const getStatusEnumList = async (): Promise<void> => {
+    const getStatusEnumList = async () => {
+        // 1. 已经加载过 → 直接返回
+        if (cache.isLoaded) return cache.data.value;
+
+        // 2. 正在请求 → 等待同一个请求
+        if (cache.promise) {
+            await cache.promise;
+            return cache.data.value;
+        }
+
+        // 3. 真正发起请求
+        cache.isLoading.value = true;
+        cache.promise = http.get('/framework-api/union/sso-user/getStatusEnumList', {});
+
         try {
-            isLoadingEnum.value = true;
-            // 指定响应数据类型，TS会自动校验
-            const res = await http.get('/framework-api/union/sso-user/getStatusEnumList', {});
-            statusEnumList.value = res.data.data;
+            const res = await cache.promise;
+            cache.data.value = res.data.data || [];
+            cache.isLoaded = true; // 标记已加载
         } catch (ex) {
             console.error('获取状态枚举列表失败：', ex);
-            statusEnumList.value = [];
+            cache.data.value = [];
         } finally {
-            isLoadingEnum.value = false;
+            cache.isLoading.value = false;
+            cache.promise = null;
         }
+
+        return cache.data.value;
     };
 
-    // 初始化调用（可选，也可由外部调用）
+    // 自动加载
     getStatusEnumList();
 
-    // 返回响应式数据和方法，供组件使用
+    // 保持你原来的返回结构，不用改业务代码
     return {
-        statusEnumList,
-        isLoadingEnum
+        statusEnumList: cache.data,
+        isLoadingEnum: cache.isLoading,
     };
 };

package/lib/hooks/uims/uimsUser.ts

@@ -1,50 +1,65 @@
-// 首先建议创建类型定义文件（如 types/api.d.ts），或直接在当前文件定义类型
-// 定义接口：枚举列表项的类型
+import { ref } from 'vue';
+import { http } from '../../../lib/config/httpConfig';
+
+// 枚举项类型
 export interface StatusEnumItem {
-    // 根据实际返回的字段补充类型，比如：
     value: string;
     name: string;
-    // 兼容对象中未显式定义的任意字段，避免 TS 报错
     [key: string]: any;
 }
 
-import { ref } from 'vue';
-import { http } from '../../../lib/config/httpConfig';
+// ==================== 全局单例缓存（核心） ====================
+const GLOBAL_ENUM_CACHE = '__uims_user_status_enum_list__';
+
+// 全局唯一初始化
+if (!(window as any)[GLOBAL_ENUM_CACHE]) {
+    (window as any)[GLOBAL_ENUM_CACHE] = {
+        data: ref<StatusEnumItem[]>([]),
+        isLoading: ref(false),
+        isLoaded: false,
+        promise: null as Promise<any> | null,
+    };
+}
+
+const cache = (window as any)[GLOBAL_ENUM_CACHE];
 
-/**
- * 提供“获取状态枚举列表”的能力
- *
- * Vue3 官方明确规定，组合式函数必须以 use 开头（参考：Vue3 组合式函数文档），目的是让开发者一眼识别：“这是一个可复用的组合式逻辑，返回响应式能力”
- */
+// ==================== Hook 本体 ====================
 export const useStatusEnumList = () => {
-    // 定义响应式数据，指定类型
-    const statusEnumList = ref<StatusEnumItem[]>([]);
-    // 定义加载状态（可选，增强体验）
-    const isLoadingEnum = ref<boolean>(false);
-
-    /**
-     * 获取状态枚举列表的核心方法
-     */
-    const getStatusEnumList = async (): Promise<void> => {
+    const getStatusEnumList = async () => {
+        // 1. 已经加载过 → 直接返回
+        if (cache.isLoaded) return cache.data.value;
+
+        // 2. 正在请求 → 等待同一个请求
+        if (cache.promise) {
+            await cache.promise;
+            return cache.data.value;
+        }
+
+        // 3. 真正发起请求
+        cache.isLoading.value = true;
+        cache.promise = http.get('/framework-api/union/uims-user/getStatusEnumList', {});
+
         try {
-            isLoadingEnum.value = true;
-            // 指定响应数据类型，TS会自动校验
-            const res = await http.get('/framework-api/union/uims-user/getStatusEnumList', {});
-            statusEnumList.value = res.data.data;
+            const res = await cache.promise;
+            cache.data.value = res.data.data || [];
+            cache.isLoaded = true; // 标记已加载
         } catch (ex) {
             console.error('获取状态枚举列表失败：', ex);
-            statusEnumList.value = [];
+            cache.data.value = [];
         } finally {
-            isLoadingEnum.value = false;
+            cache.isLoading.value = false;
+            cache.promise = null;
         }
+
+        return cache.data.value;
     };
 
-    // 初始化调用（可选，也可由外部调用）
+    // 自动加载
     getStatusEnumList();
 
-    // 返回响应式数据和方法，供组件使用
+    // 保持你原来的返回结构，不用改业务代码
     return {
-        statusEnumList,
-        isLoadingEnum
+        statusEnumList: cache.data,
+        isLoadingEnum: cache.isLoading,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuang-framework-ui-common",
-  "version": "1.0.113",
+  "version": "1.0.115",
   "private": false,
   "type": "module",
   "scripts": {