sohelp-eleplus 1.1.26 → 1.1.28

package/sohelp-module/README.md

@@ -1,24 +1,35 @@
-# SohelpModule 模块弹窗管理器
+# SohelpModule 动态模块容器
 
-用于统一管理和渲染动态弹窗（Modal）和抽屉（Drawer）的组件，通常用于低代码场景或需要动态打开表单的场景。
+动态渲染多个模态弹窗和抽屉的容器组件，内部集成 `sohelp-modal`、`sohelp-drawer` 和 `sohelp-vform`，通过 `useModalManager` 统一管理弹窗/抽屉的打开与关闭。
 
 ## 基础用法
 
-通常在应用的根组件或布局组件中引入一次即可。
+```vue
+<template>
+  <sohelp-module ref="moduleRef" />
+</template>
 
-```html
-<sohelp-module ref="moduleRef" />
+<script setup>
+import { ref } from 'vue';
+const moduleRef = ref(null);
+
+// 打开一个模态弹窗
+moduleRef.value?.openModal('form1', { title: '新增', width: '600px', params: { id: 1 } });
+
+// 打开一个抽屉
+moduleRef.value?.openDrawer('detail1', { title: '详情', size: '40%', params: { id: 1 } });
+</script>
 ```
 
-## 功能特性
+## 属性 (Props)
 
-- **动态渲染**: 根据状态动态渲染多个 `sohelp-modal` 或 `sohelp-drawer`。
-- **集成表单**: 内部默认集成 `sohelp-vform-eleplus`，用于加载动态表单。
-- **状态管理**: 使用 `useModalManager` Hook 管理弹窗的打开和关闭状态。
+该组件无自定义 Props。
 
 ## 公开方法 (Expose)
 
-- `openModal(id, params)`: 打开指定 ID 的模态框。
-- `closeModal(id)`: 关闭指定 ID 的模态框。
-- `openDrawer(id, params)`: 打开指定 ID 的抽屉。
-- `closeDrawer(id)`: 关闭指定 ID 的抽屉。
+| 方法名 | 参数 | 说明 |
+| --- | --- | --- |
+| openModal(id, options) | `id`: 唯一标识, `options`: 弹窗配置 | 打开一个模态弹窗并加载 vform |
+| closeModal(id) | `id`: 唯一标识 | 关闭指定模态弹窗 |
+| openDrawer(id, options) | `id`: 唯一标识, `options`: 抽屉配置 | 打开一个抽屉并加载 vform |
+| closeDrawer(id) | `id`: 唯一标识 | 关闭指定抽屉 |

package/sohelp-number-input/README.md

@@ -1,18 +1,25 @@
 # SohelpNumberInput 数字输入框
 
-基于 `el-input-number` 的封装，增加了自动聚焦功能。
+基于 `el-input-number` 封装的数字输入框组件，默认控制按钮靠右显示，支持自动聚焦。
 
 ## 基础用法
 
-```html
-<sohelp-number-input v-model="num" :auto-focus="true" />
+```vue
+<template>
+  <sohelp-number-input v-model="num" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const num = ref(0);
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| autoFocus | Boolean | false | 是否自动获取焦点 |
-
-## 其他
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | Number | - | 否 | 绑定值（支持 v-model） |
+| autoFocus | Boolean | `false` | 否 | 组件挂载后是否自动获取焦点 |
 
-继承 `el-input-number` 的所有属性和事件，默认 `controls-position="right"`。
+> 支持通过 `v-bind="$attrs"` 透传所有 `el-input-number` 原生属性（如 `min`、`max`、`step`、`precision`、`disabled`、`readonly` 等）。默认 `controls-position="right"`。

package/sohelp-number-input/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-input-number
+    v-model="modelValue"
     v-bind="$attrs"
     controls-position="right"
     ref="inputRef"
@@ -9,6 +10,8 @@
 <script setup>
   import { nextTick, onMounted, ref } from 'vue';
 
+  const modelValue = defineModel('modelValue', { type: Number });
+
   const props = defineProps({
     autoFocus: {
       type: Boolean,

package/sohelp-number-range/README.md

@@ -1,24 +1,34 @@
 # SohelpNumberRange 数字范围输入
 
-用于输入一个数值范围（最小值 - 最大值），会自动处理最小值不能大于最大值的逻辑。
+基于两个 `el-input` 组合的数字范围输入组件，用于输入最小值和最大值，内置数值边界校验与自动纠正逻辑。
 
 ## 基础用法
 
-```html
-<sohelp-number-range v-model="range" :min="0" :max="100" />
+```vue
+<template>
+  <sohelp-number-range v-model="range" :min="0" :max="100" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const range = ref([10, 50]);
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| modelValue | Array | [] | 范围数组 [min, max] |
-| min | Number | -Infinity | 允许的最小值 |
-| max | Number | Infinity | 允许的最大值 |
-| separator | String | '-' | 分隔符 |
-| clearable | Boolean | true | 是否可清空 |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String / Number / Array | - | 否 | 绑定值，数组格式 `[min, max]` |
+| min | Number | `-Infinity` | 否 | 允许输入的最小值 |
+| max | Number | `Infinity` | 否 | 允许输入的最大值 |
+| separator | String | `'-'` | 否 | 两个输入框之间的分隔符文本 |
+| clearable | Boolean | `true` | 否 | 是否可清空 |
+| controlsPosition | String | `'right'` | 否 | 控制按钮位置 |
 
 ## 事件 (Events)
 
-| 事件名 | 说明 | 回调参数 |
-| update:modelValue | 值变化时触发 | (value: Array) |
-| change | 值变化时触发 | (value: Array) |
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `(value: Array)` | 值变化时触发 |
+| change | `(value: Array)` | 值变化时触发 |

package/sohelp-number-range/index.vue

@@ -1,5 +1,5 @@
-<template name="sohelp-number-range">
-  <view class="sohelp-number-range">
+<template>
+  <div class="sohelp-number-range">
     <el-input
       v-model="value[0]"
       v-bind="$attrs"
@@ -19,7 +19,7 @@
       @change="change"
       :controlsPosition="controlsPosition"
     ></el-input>
-  </view>
+  </div>
 </template>
 <script setup>
   import { ref, watch } from 'vue';
@@ -124,12 +124,4 @@
   :deep(input[type='number']) {
     -moz-appearance: textfield;
   }
-
-  :deep(input::-webkit-outer-spin-button),
-  :deep(input::-webkit-inner-spin-button) {
-    -webkit-appearance: none;
-  }
-  :deep(input[type='number']) {
-    -moz-appearance: textfield;
-  }
 </style>

package/sohelp-org-modal-select/README.md

@@ -0,0 +1,47 @@
+# SohelpOrgModalSelect 组织选择器
+
+基于 `sohelp-modal` 和 `el-tree` 封装的组织树选择组件，点击输入框弹出组织树进行单选/多选，选中后以 Tag 形式回显。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-org-modal-select
+    v-model="selectedOrgs"
+    v-model:data="selectedOrgData"
+    multiple
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const selectedOrgs = ref([]);
+const selectedOrgData = ref([]);
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | String / Array | `''` | 否 | 选中组织的 ID 值 |
+| data (v-model:data) | Array / Object | `[]` | 否 | 选中组织的完整数据 |
+| url | String | `'/engine/web/org/list'` | 否 | 组织数据的请求地址 |
+| datasource | Array / Function / Object | - | 否 | 自定义数据源，优先于 url |
+| valueField | String | `'id'` | 否 | 值字段名 |
+| labelField | String | `'org_name'` | 否 | 显示字段名 |
+| multiple | Boolean | `true` | 否 | 是否多选 |
+| checkStrictly | Boolean | `true` | 否 | 父子节点是否不关联（严格模式） |
+| title | String | `'选择组织'` | 否 | 弹窗标题 |
+| width | String | `'500px'` | 否 | 弹窗宽度 |
+| placeholder | String | `'请选择组织'` | 否 | 占位文本 |
+| disabled | Boolean | `false` | 否 | 是否禁用 |
+| readonly | Boolean | `false` | 否 | 是否只读 |
+| clearable | Boolean | `true` | 否 | 是否可清空 |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | `(value)` | 选中值变化时触发 |
+| confirm | `(value, data)` | 确认选择后触发，返回选中值和完整数据 |

package/sohelp-org-modal-select/index.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="sohelp-org-modal-select">
+    <!-- 输入框触发区 -->
+    <div
+      class="select-trigger"
+      :class="[
+        globalConfig.size ? 'el-input--' + globalConfig.size : '',
+        { 'is-disabled': disabled, 'is-readonly': readonly }
+      ]"
+      @click.stop="onOpen"
+    >
+      <div class="tag-input">
+        <span class="placeholder-text" v-if="!displayTags.length">{{ placeholder }}</span>
+        <template v-else>
+          <el-tag
+            v-for="item in displayTags"
+            :key="item.id"
+            class="selection-tag"
+            :type="disabled || readonly ? 'info' : 'primary'"
+            :closable="clearable && !disabled && !readonly"
+            @close.stop="removeTag(item)"
+          >
+            {{ item.org_name }}
+          </el-tag>
+        </template>
+      </div>
+      <div class="append-icon">
+        <el-icon
+          size="15"
+          class="clear-icon"
+          v-if="clearable && !disabled && !readonly && displayTags.length > 0"
+          @click.stop="clearAll"
+        >
+          <CircleCloseFilled />
+        </el-icon>
+        <el-icon size="15"><Search /></el-icon>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <sohelp-modal
+      v-model="modalVisible"
+      :title="title"
+      :width="width"
+      @confirm="onConfirm"
+    >
+      <div class="org-tree-container">
+        <div class="tree-search">
+          <el-input
+            v-model="filterText"
+            placeholder="输入关键字搜索"
+            clearable
+            prefix-icon="Search"
+          />
+        </div>
+        <el-scrollbar class="tree-scrollbar">
+          <el-tree
+            ref="treeRef"
+            :data="treeData"
+            :props="{ label: 'label', children: 'children' }"
+            node-key="id"
+            :show-checkbox="multiple"
+            :check-strictly="checkStrictly"
+            :default-expanded-keys="defaultExpandedKeys"
+            :filter-node-method="filterNode"
+            highlight-current
+            @node-click="onNodeClick"
+            @check="onCheck"
+          />
+        </el-scrollbar>
+      </div>
+
+      <!-- 多选时显示已选列表 -->
+      <template v-if="multiple" #footer>
+        <div class="modal-footer">
+          <div class="selected-info">
+            <el-tag type="info" size="small">已选 {{ tempSelected.length }} 个</el-tag>
+            <el-button v-if="tempSelected.length > 0" type="danger" link size="small" @click="clearTempSelected">清空</el-button>
+          </div>
+          <div>
+            <el-button @click="modalVisible = false">取消</el-button>
+            <el-button type="primary" @click="onConfirm">确认</el-button>
+          </div>
+        </div>
+      </template>
+    </sohelp-modal>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SohelpOrgModalSelect'
+  };
+</script>
+
+<script setup>
+  import { ref, computed, watch, onMounted, nextTick } from 'vue';
+  import { Search, CircleCloseFilled } from '@element-plus/icons-vue';
+  import { useGlobalConfig, ElMessage } from 'element-plus';
+  import { toTree } from '../utils/core.js';
+  import SohelpModal from '../sohelp-modal/index.vue';
+
+  const props = defineProps({
+    url: {
+      type: String,
+      default: '/engine/web/org/list'
+    },
+    datasource: {
+      type: [Array, Function, Object]
+    },
+    valueField: {
+      type: String,
+      default: 'id'
+    },
+    labelField: {
+      type: String,
+      default: 'org_name'
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '选择组织'
+    },
+    width: {
+      type: String,
+      default: '500px'
+    },
+    placeholder: {
+      type: String,
+      default: '请选择组织'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  });
+
+  const emits = defineEmits(['confirm', 'update:modelValue']);
+
+  const modelValue = defineModel('modelValue', {
+    type: [String, Array],
+    default: ''
+  });
+
+  const data = defineModel('data', {
+    type: [Array, Object],
+    default: () => []
+  });
+
+  const globalConfig = useGlobalConfig();
+  const treeRef = ref(null);
+  const modalVisible = ref(false);
+  const filterText = ref('');
+  const treeData = ref([]);
+  const flatData = ref([]);
+  const defaultExpandedKeys = ref([]);
+
+  // 临时选中（弹窗内操作，确认后才同步）
+  const tempSelected = ref([]);
+
+  // 显示 tag
+  const displayTags = computed(() => {
+    const values = Array.isArray(modelValue.value)
+      ? modelValue.value
+      : modelValue.value ? [modelValue.value] : [];
+    return values.map((v) => flatData.value.find((d) => d[props.valueField] === v)).filter(Boolean);
+  });
+
+  // 搜索过滤
+  watch(filterText, (val) => {
+    treeRef.value?.filter(val);
+  });
+
+  const filterNode = (value, data) => {
+    if (!value) return true;
+    return data.label?.includes(value);
+  };
+
+  // 加载数据
+  onMounted(async () => {
+    let rawData = [];
+    if (Array.isArray(props.datasource)) {
+      rawData = props.datasource;
+    } else if (typeof props.datasource === 'function') {
+      rawData = await props.datasource();
+    } else if (props.url) {
+      try {
+        const res = await SohelpHttp.get(props.url, {});
+        rawData = res?.data || [];
+      } catch (e) {
+        ElMessage.error(e?.meta?.message || '加载组织数据失败');
+      }
+    }
+
+    flatData.value = rawData;
+
+    treeData.value = toTree({
+      data: rawData.map((m) => ({
+        ...m,
+        label: m[props.labelField],
+        parent_id: m.parent_id
+      })),
+      idField: 'id',
+      parentIdField: 'parent_id'
+    });
+
+    // 默认展开前两级
+    if (treeData.value.length > 0) {
+      defaultExpandedKeys.value = treeData.value.map((n) => n.id);
+    }
+  });
+
+  // 打开弹窗
+  const onOpen = () => {
+    if (props.disabled || props.readonly) return;
+    modalVisible.value = true;
+
+    nextTick(() => {
+      // 回显选中状态
+      const values = Array.isArray(modelValue.value)
+        ? modelValue.value
+        : modelValue.value ? [modelValue.value] : [];
+      tempSelected.value = [...values];
+
+      if (props.multiple) {
+        treeRef.value?.setCheckedKeys(values);
+      } else if (values.length > 0) {
+        treeRef.value?.setCurrentKey(values[0]);
+      }
+    });
+  };
+
+  // 单选 - 点击节点
+  const onNodeClick = (nodeData) => {
+    if (props.multiple) return;
+    tempSelected.value = [nodeData[props.valueField]];
+    // 单选直接确认
+    onConfirm();
+  };
+
+  // 多选 - checkbox 变化
+  const onCheck = (nodeData, { checkedKeys }) => {
+    tempSelected.value = [...checkedKeys];
+  };
+
+  // 确认选择
+  const onConfirm = () => {
+    const selectedValues = [...tempSelected.value];
+    const selectedData = selectedValues
+      .map((v) => flatData.value.find((d) => d[props.valueField] === v))
+      .filter(Boolean);
+
+    if (props.multiple) {
+      modelValue.value = selectedValues;
+      data.value = selectedData;
+    } else {
+      modelValue.value = selectedValues[0] || '';
+      data.value = selectedData[0] || {};
+    }
+
+    emits('confirm', modelValue.value, data.value);
+    modalVisible.value = false;
+  };
+
+  // 删除单个 tag
+  const removeTag = (item) => {
+    const v = item[props.valueField];
+    if (Array.isArray(modelValue.value)) {
+      modelValue.value = modelValue.value.filter((i) => i !== v);
+      data.value = Array.isArray(data.value)
+        ? data.value.filter((d) => d[props.valueField] !== v)
+        : [];
+    } else {
+      modelValue.value = '';
+      data.value = {};
+    }
+  };
+
+  // 清空所有
+  const clearAll = () => {
+    modelValue.value = props.multiple ? [] : '';
+    data.value = props.multiple ? [] : {};
+  };
+
+  // 清空弹窗内临时选中
+  const clearTempSelected = () => {
+    tempSelected.value = [];
+    treeRef.value?.setCheckedKeys([]);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-org-modal-select {
+    width: 100%;
+  }
+
+  .select-trigger {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    min-height: 30px;
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: border-color 0.2s;
+
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      background-color: var(--el-disabled-bg-color);
+      border-color: var(--el-disabled-border-color);
+    }
+
+    .tag-input {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: wrap;
+      padding: 2px 6px;
+      min-height: 18px;
+
+      .placeholder-text {
+        color: var(--el-text-color-placeholder);
+        line-height: 18px;
+      }
+
+      .selection-tag {
+        flex-shrink: 0;
+        margin: 0;
+        max-width: 150px;
+        border: 0;
+
+        :deep(.el-tag__content) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .append-icon {
+      display: flex;
+      align-items: center;
+      padding: 0 5px;
+      color: var(--el-text-color-placeholder);
+
+      .clear-icon {
+        margin-right: 2px;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.2s;
+        color: #c0c4cc;
+
+        &:hover {
+          color: #909399;
+        }
+      }
+    }
+
+    &:hover .append-icon .clear-icon {
+      opacity: 1;
+    }
+  }
+
+  .org-tree-container {
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+
+    .tree-search {
+      margin-bottom: 10px;
+    }
+
+    .tree-scrollbar {
+      flex: 1;
+    }
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .selected-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+</style>

package/sohelp-org-select/README.md

@@ -1,20 +1,33 @@
-# SohelpOrgSelect 组织机构选择器（下拉框）
+# SohelpOrgSelect 组织机构选择器
 
-基于 `sohelp-dyn-select` 封装，预设了组织机构列表的接口地址。
+基于 `sohelp-dyn-select` 封装的组织机构选择组件，预设了组织列表接口地址和字段映射，开箱即用。
 
 ## 基础用法
 
-```html
-<sohelp-org-select v-model="orgId" />
+```vue
+<template>
+  <sohelp-org-select v-model="orgId" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const orgId = ref('');
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| url | String | '/engine/web/org/list' | 数据接口地址 |
-| labelField | String | 'org_name' | 显示文本字段 |
-| valueField | String | 'id' | 值字段 |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String / Number / Array | `''` | 否 | 绑定值（v-model） |
+| datasource | Array / Function / Promise | `undefined` | 否 | 自定义数据源，优先级高于 url |
+| url | String | `'/engine/web/org/list'` | 否 | 组织机构列表接口地址 |
+| labelField | String | `'org_name'` | 否 | 显示文本字段名 |
+| valueField | String | `'id'` | 否 | 值字段名 |
+
+> 同时支持所有 `sohelp-dyn-select` 和 `el-select` 原生属性，通过 `v-bind="$attrs"` 透传。
 
-## 其他
+## 公开方法 (Expose)
 
-支持 `sohelp-dyn-select` 的所有属性。
+组件通过 `defineExpose({})` 暴露，当前无额外公开方法。