yuang-framework-ui-common 1.0.114 → 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/package.json

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