sohelp-eleplus 1.1.21 → 1.1.24

package/sohelp-grid-view/README.md

@@ -0,0 +1,34 @@
+# SohelpGridView 综合表格视图组件
+
+这是一个组合组件，集成了 `SohelpFilterScheme`（筛选区）和 `SohelpGrid`（表格区），实现了典型的“左侧/顶部筛选 + 右侧/底部表格”的布局模式，并内置了数据加载逻辑。
+
+## 基础用法
+
+```html
+<sohelp-grid-view 
+  viewCode="user_list_view" 
+  entityName="SysUser"
+/>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| config | Object | - | 视图配置对象（如果未提供 viewCode，可直接传入配置） |
+| viewCode | String | - | 视图编码，用于从后端加载视图配置 |
+| entityName | String | - | 实体名称，用于默认的数据请求 |
+
+## 公开方法 (Expose)
+
+- `reload(params)`: 刷新表格数据。
+- `getSelectRecords()`: 获取表格选中行。
+
+## 核心逻辑
+
+1. **配置加载**: 组件挂载时，根据 `viewCode` 调用 `/engine/web/view/read` 获取视图配置（包括筛选配置和表格列配置）。
+2. **数据加载**: 
+   - 监听筛选组件的 `filter` 事件。
+   - 监听表格组件的 `page-change` 和 `sort-change` 事件。
+   - 自动组装分页、排序、筛选参数，调用 `/engine/web/entity/findAll` (或其他配置的接口) 加载数据。
+3. **布局**: 支持筛选区和表格区的伸缩布局（SplitPane）。
+4. **状态保存**: 支持保存用户对列宽、筛选条件的个性化设置。

package/sohelp-grid-view/filter/README.md

@@ -0,0 +1,45 @@
+# Grid Filter Component
+
+This component provides advanced filtering capabilities for grid views, supporting custom configuration, various display positions (top, modal, side), and integration with filter schemes.
+
+## Features
+
+- **Advanced Filtering**: Support for complex filter conditions.
+- **Configurable Layout**: Can be positioned at the top, side, or in a modal.
+- **Scheme Management**: Save and switch between different filter schemes.
+- **Customizable**: Configure which fields to display and how to filter them.
+
+## Props
+
+| Name | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| modelValue | Object | - | The current filter value. |
+| propertiesMap | Object | `{}` | Map of property definitions for the filter fields. |
+| config | Object | - | The filter configuration object (v-model). |
+| filterValue | Object | - | The filter values (v-model). |
+
+## Events
+
+| Name | Description | Parameters |
+| :--- | :--- | :--- |
+| change | Triggered when filter values change. | - |
+| filter | Triggered when a filter action is executed. | `filterValue` |
+| update:modelValue | Updates the model value. | `value` |
+| close | Triggered when the filter panel is closed. | - |
+| reset | Triggered when the filter is reset. | - |
+| save | Triggered when filter configuration is saved. | `true` |
+| changeFilterScheme | Triggered when the filter scheme is changed. | `schemeValue`, `filterValue` |
+
+## Usage
+
+```vue
+<template>
+  <SohelpGridFilter
+    v-model:config="gridConfig"
+    v-model:filterValue="filterValues"
+    :propertiesMap="properties"
+    @filter="handleFilter"
+    @reset="handleReset"
+  />
+</template>
+```

package/sohelp-grid-view/filter/config/README.md

@@ -0,0 +1,37 @@
+# Grid Filter Config Component
+
+A configuration modal for the grid filter system, allowing users to customize the grid's appearance and behavior, including visible columns, sorting, search keywords, and filter schemes.
+
+## Features
+
+- **Column Management**: Show/hide and reorder grid columns.
+- **Advanced Filter Setup**: Configure fields available for advanced filtering.
+- **Sort Configuration**: Set up default and available sort fields.
+- **Keyword Search**: Configure fields included in keyword search.
+- **Scheme Management**: Manage saved filter schemes.
+- **General Config**: Basic settings for the grid filter.
+
+## Props
+
+| Name | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| modelValue | Boolean | - | Controls the visibility of the configuration modal (v-model). |
+| config | Object | - | The configuration object to be modified. |
+
+## Events
+
+| Name | Description | Parameters |
+| :--- | :--- | :--- |
+| update:modelValue | Updates the visibility state. | `visible` |
+| done | Triggered when configuration is completed. | - |
+
+## Usage
+
+```vue
+<template>
+  <SohelpGridFilterConfig
+    v-model="configVisible"
+    :config="gridConfig"
+  />
+</template>
+```

package/sohelp-grid-view/filter/filter-form.vue

@@ -23,7 +23,7 @@
       </el-radio-group>
     </div>
     <!-- advanced -->
-    <div class="advanced-box" ref="advancedBoxRef">
+    <div class="advanced-box" ref="advancedBoxRef" :style="{ '--max-columns': config?.filter?.config?.maxColumns }">
       <filter-condition-item
         @search="filter"
         v-for="(item, index) in getFilterList"
@@ -31,6 +31,7 @@
         v-model="filterValue.filter[index]"
         :properties="propertiesMap?.[item.name]"
         :ref="(el) => setItemRef(el, item.name)"
+        class="sohelp-filter-condition"
       ></filter-condition-item>
     </div>
     <template #footer>
@@ -139,15 +140,16 @@
       if (_sum > threshold) {
         return {
           _index: index,
-          index: index, // 从0开始的索引
-          key: key, // 对应的键名
-          accumulatedSum: sum, // 当前累计总和
-          value: value // 当前元素值
+          index: index,
+          key: key,
+          accumulatedSum: sum,
+          value: value
         };
       }
       sum += value;
       index++;
     }
+
     return {
       index: map.size
     };
@@ -157,7 +159,11 @@
    * 获取当前显示的元素
    */
   const getFilterList = computed(() => {
-    return filterList.value?.slice(0, maxRowsConfig.current.index);
+    const { filterPosition } = config.value.filter?.config;
+    if (filterPosition?.toUpperCase() === 'TOP') {
+      return filterList.value?.slice(0, maxRowsConfig.current.index + 1);
+    }
+    return filterList.value;
   });
 
   const load = () => {
@@ -429,18 +435,15 @@
     overflow-y: auto;
 
     .advanced-box {
-      display: flex;
-      // gap: 20px;
-      flex-direction: row;
-      flex-wrap: wrap;
+      width: calc(100% - 10px);
+      display: grid;
+      grid-template-columns: repeat(var(--max-columns), 1fr);
 
       .is-expand {
         display: none !important;
       }
 
       .sohelp-filter-condition {
-        width: calc(50% - 10px);
-
         .filter-condition {
           width: 100% !important;
         }

package/sohelp-grid-view/index.vue

@@ -30,7 +30,10 @@
     'operationButtonClick',
     'changeFilterScheme',
     'editClosed',
-    'currentColumnChange'
+    'currentColumnChange',
+    'checkboxChange',
+    'pageChange',
+    'radioChange'
   ]);
 
   // grid实例
@@ -75,6 +78,18 @@
     })
   });
 
+  const checkboxChange = (row, checked, type) => {
+    emit('checkboxChange', row, checked, type);
+  };
+
+  const radioChange = (config) => {
+    emit('radioChange', config);
+  };
+
+  const pageChange = (config) => {
+    emit('pageChange', config);
+  };
+
   /**
    * 分割器配置
    */
@@ -200,6 +215,41 @@
     return sohelpGridRef.value?.selections;
   };
 
+  /**
+   * 设置复选框行键
+
+   * @param row 行数据
+
+   * @param checked 是否选中
+   */
+  const setCheckboxRowKey = (row, checked) => {
+    sohelpGridRef.value?.setCheckboxRowKey(row, checked);
+  };
+
+  const setRadioRowKey = (row, checked) => {
+    sohelpGridRef.value?.setRadioRowKey(row, checked);
+  };
+
+  /**
+   * 获取选中的记录
+   */
+  const getCheckboxRecords = () => {
+    return sohelpGridRef.value?.getCheckboxRecords();
+  };
+  /**
+   * 获取保留的记录
+   */
+  const getCheckboxReserveRecords = (isFull = false) => {
+    return sohelpGridRef.value?.getCheckboxReserveRecords(isFull);
+  };
+
+  /**
+   * 获取数据
+   */
+  const getData = () => {
+    return sohelpGridRef.value?.getData();
+  };
+
   watch(
     _filterValue,
     (val) => {
@@ -217,7 +267,12 @@
     reload,
     load,
     refresh,
-    validate
+    validate,
+    setCheckboxRowKey,
+    getCheckboxRecords,
+    getCheckboxReserveRecords,
+    getData,
+    setRadioRowKey
   });
 </script>
 <script>
@@ -258,6 +313,11 @@
           @operationButtonClick="operationButtonClick"
           @editClosed="editClosed"
           @currentColumnChange="currentColumnChange"
+          @checkboxChange="checkboxChange"
+          @checkboxAll="checkboxChange"
+          @radioChange="radioChange"
+          @pageChange="pageChange"
+          v-bind="$attrs"
         >
           <template v-for="(_, name) in $slots" #[name]="slotProps">
             <slot :name="name" v-bind="slotProps" />

package/sohelp-grid-view-select/README.md

@@ -0,0 +1,36 @@
+# SohelpGridViewSelect 表格视图选择器
+
+基于 `SohelpGridView` 的弹窗选择器组件。通过 `refid` 引用配置，点击按钮弹出表格视图进行数据选择，支持单选和多选。
+
+## 基础用法
+
+```html
+<sohelp-grid-view-select 
+  v-model="selectedId" 
+  refid="user_view_ref" 
+/>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | String/Array | [] | 绑定的值（ID 或 ID 数组） |
+| refid | String | - | 必填，视图引用 ID，用于加载表格配置 |
+| multiple | Boolean | false | 是否多选 |
+| data | Object/Array | - | 已选中的数据对象（用于回显） |
+| labelField | String | 'label' | 显示文本字段名 |
+| valueField | String | 'id' | 值字段名 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| update:modelValue | 更新绑定值 | (value) |
+| update:data | 更新选中数据对象 | (data) |
+| confirm | 确认选择时触发 | (rows) |
+| show | 弹窗打开时触发 | - |
+
+## 功能特性
+
+- **引用配置**: 通过 `refid` 复用已有的表格视图配置。
+- **标签展示**: 选中的数据以标签形式展示在输入框区域，支持移除。
+- **弹窗选择**: 集成完整的 `SohelpGridView`，支持筛选、分页等功能。

package/sohelp-group-view/README.md

@@ -0,0 +1,7 @@
+# SohelpGroupView 分组视图组件
+
+*当前版本仅为占位组件，功能待完善。*
+
+## 描述
+
+预留用于展示按状态或其他字段分组的视图组件。

package/sohelp-icon-select/README.md

@@ -0,0 +1,21 @@
+# SohelpIconSelect 图标选择器
+
+支持多种图标库（Element Plus, EleAdminPlus, VxeUI）的图标选择组件，提供可视化预览。
+
+## 基础用法
+
+```html
+<sohelp-icon-select v-model="iconName" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | String | - | 选中的图标名称 |
+
+## 功能特性
+
+- **多图库支持**: 内置 Element Plus、EleAdminPlus 和 VxeUI 图标库。
+- **可视化预览**: 下拉列表中直接展示图标样式。
+- **搜索**: 支持通过图标名称过滤。
+- **前缀展示**: 输入框前缀显示当前选中的图标。

package/sohelp-image-upload/README.md

@@ -0,0 +1,35 @@
+# SohelpImageUpload 图片上传组件
+
+基于 `vxe-upload` 定制的图片上传组件，专注于图片处理，支持预览、粘贴上传、多图上传等。
+
+## 基础用法
+
+```html
+<sohelp-image-upload v-model="imageId" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | String/Array | - | 绑定的图片 ID |
+| data | Object/Array | [] | 图片对象数据 |
+| readonly | Boolean | false | 是否只读 |
+| multiple | Boolean | false | 是否多选 |
+| limitCount | Number | 9 | 最大上传数量 |
+| limitSize | Number | 10 | 单张图片大小限制 (MB) |
+| imageTypes | Array | ['jpg', 'png'...] | 允许的图片类型 |
+| imageConfig | Object | {width: 30, height: 26} | 图片显示配置 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| update:modelValue | 更新绑定 ID | (value) |
+| update:data | 更新图片对象数据 | (data) |
+
+## 功能特性
+
+- **图片预览**: 上传后可预览缩略图。
+- **粘贴上传**: 支持从剪贴板粘贴图片上传。
+- **下载**: 支持下载图片。
+- **删除**: 支持删除图片，需二次确认。
+- **进度显示**: 显示上传百分比。

package/sohelp-image-upload/index.vue

@@ -105,7 +105,10 @@
           layout: 'horizontal'
         };
       }
-    }
+    },
+    refid: String,
+    ref_id: String,
+    ref_type: [String, Number]
   });
 
   const emit = defineEmits(['update:modelValue', 'update:data']);
@@ -160,7 +163,7 @@
         return false;
       }
 
-      const res = await SohelpHttp.post('/engine/web/file/delete', { id: id });
+      const res = await SohelpHttp.post('/engine/web/file/delete', { id: id, refid: props.refid });
 
       if (res.meta.success) {
         ElMessage.success(res.meta.message);
@@ -182,6 +185,9 @@
   const uploadMethod = async ({ file }) => {
     const formData = new FormData();
     formData.append('files', file);
+    formData.append('refid', props.refid);
+    formData.append('ref_id', props.ref_id);
+    formData.append('ref_type', props.ref_type);
 
     const res = await SohelpHttp.post('/engine/web/file/upload', formData);
     if (res.meta.success && res.data.length > 0) {

package/sohelp-import/README.md

@@ -0,0 +1,35 @@
+# SohelpImport 数据导入组件
+
+提供 Excel 数据导入功能的完整解决方案，包含模板下载、文件上传、数据预览、导入历史管理等功能。
+
+## 基础用法
+
+```html
+<sohelp-import 
+  v-model="showImport" 
+  refid="user_import_ref" 
+  :fields="importFields" 
+/>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | Boolean | false | 控制弹窗显示隐藏 |
+| refid | String | - | 必填，导入配置引用 ID |
+| fields | Array | [] | 可导入字段列表，用于配置映射 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| update:modelValue | 弹窗显隐状态更新 | (visible) |
+| close | 关闭弹窗时触发 | - |
+
+## 功能特性
+
+- **模板下载**: 根据 `refid` 下载对应的 Excel 导入模板。
+- **文件上传**: 支持拖拽上传，限制文件格式 (.xls, .xlsx) 和大小。
+- **数据预览**: 上传后自动解析并展示前 50 条数据供预览。
+- **导入历史**: 查看历史导入记录，支持重新下载原文件、恢复导入或删除记录。
+- **配置映射**: (可选) 支持配置 Excel 列与系统字段的映射关系。
+- **进度反馈**: 上传和解析过程有明确的进度和状态提示。

package/sohelp-input/README.md

@@ -0,0 +1,21 @@
+# SohelpInput 输入框组件
+
+基于 `el-input` 的封装，增加了自动聚焦功能。
+
+## 基础用法
+
+```html
+<sohelp-input v-model="value" auto-focus />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | String/Number | - | 绑定值 |
+| autoFocus | Boolean | false | 组件挂载后是否自动获取焦点 |
+| disabled | Boolean | false | 是否禁用 |
+| readonly | Boolean | false | 是否只读 |
+
+## 事件 (Events)
+
+支持 `el-input` 的所有事件。

package/sohelp-modal/README.md

@@ -0,0 +1,30 @@
+# SohelpModal 弹窗组件
+
+通用的弹窗组件封装，提供了标准的头部、内容区和底部按钮布局。
+
+## 基础用法
+
+```html
+<sohelp-modal v-model="visible" title="标题" @confirm="handleConfirm">
+  内容区域
+</sohelp-modal>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | Boolean | false | 控制弹窗显示隐藏 |
+| showFooter | Boolean | true | 是否显示底部按钮栏 |
+| closeOnClickModal | Boolean | false | 点击遮罩层是否关闭 |
+| title | String | - | 弹窗标题 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| confirm | 点击确认按钮时触发 | - |
+| cancel | 点击取消或关闭时触发 | - |
+
+## 公开方法 (Expose)
+
+- `show()`: 打开弹窗。
+- `close()`: 关闭弹窗。

package/sohelp-modal/index.vue

@@ -55,7 +55,8 @@
 
   defineExpose({
     show,
-    close
+    close,
+    value: modelValue.value
   });
 </script>
 <script>

package/sohelp-module/README.md

@@ -0,0 +1,24 @@
+# SohelpModule 模块弹窗管理器
+
+用于统一管理和渲染动态弹窗（Modal）和抽屉（Drawer）的组件，通常用于低代码场景或需要动态打开表单的场景。
+
+## 基础用法
+
+通常在应用的根组件或布局组件中引入一次即可。
+
+```html
+<sohelp-module ref="moduleRef" />
+```
+
+## 功能特性
+
+- **动态渲染**: 根据状态动态渲染多个 `sohelp-modal` 或 `sohelp-drawer`。
+- **集成表单**: 内部默认集成 `sohelp-vform-eleplus`，用于加载动态表单。
+- **状态管理**: 使用 `useModalManager` Hook 管理弹窗的打开和关闭状态。
+
+## 公开方法 (Expose)
+
+- `openModal(id, params)`: 打开指定 ID 的模态框。
+- `closeModal(id)`: 关闭指定 ID 的模态框。
+- `openDrawer(id, params)`: 打开指定 ID 的抽屉。
+- `closeDrawer(id)`: 关闭指定 ID 的抽屉。

package/sohelp-number-input/README.md

@@ -0,0 +1,18 @@
+# SohelpNumberInput 数字输入框
+
+基于 `el-input-number` 的封装，增加了自动聚焦功能。
+
+## 基础用法
+
+```html
+<sohelp-number-input v-model="num" :auto-focus="true" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| autoFocus | Boolean | false | 是否自动获取焦点 |
+
+## 其他
+
+继承 `el-input-number` 的所有属性和事件，默认 `controls-position="right"`。

package/sohelp-number-range/README.md

@@ -0,0 +1,24 @@
+# SohelpNumberRange 数字范围输入
+
+用于输入一个数值范围（最小值 - 最大值），会自动处理最小值不能大于最大值的逻辑。
+
+## 基础用法
+
+```html
+<sohelp-number-range v-model="range" :min="0" :max="100" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | Array | [] | 范围数组 [min, max] |
+| min | Number | -Infinity | 允许的最小值 |
+| max | Number | Infinity | 允许的最大值 |
+| separator | String | '-' | 分隔符 |
+| clearable | Boolean | true | 是否可清空 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| update:modelValue | 值变化时触发 | (value: Array) |
+| change | 值变化时触发 | (value: Array) |

package/sohelp-org-select/README.md

@@ -0,0 +1,20 @@
+# SohelpOrgSelect 组织机构选择器（下拉框）
+
+基于 `sohelp-dyn-select` 封装，预设了组织机构列表的接口地址。
+
+## 基础用法
+
+```html
+<sohelp-org-select v-model="orgId" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| url | String | '/engine/web/org/list' | 数据接口地址 |
+| labelField | String | 'org_name' | 显示文本字段 |
+| valueField | String | 'id' | 值字段 |
+
+## 其他
+
+支持 `sohelp-dyn-select` 的所有属性。

package/sohelp-org-tree/README.md

@@ -0,0 +1,18 @@
+# SohelpOrgTree 组织机构树
+
+基于 `sohelp-dyn-tree` 封装，预设了组织机构列表的接口地址，用于展示组织机构树形结构。
+
+## 基础用法
+
+```html
+<sohelp-org-tree @node-click="handleNodeClick" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| url | String | '/engine/web/org/list' | 数据接口地址 |
+
+## 其他
+
+支持 `sohelp-dyn-tree` 的所有属性和事件。

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

@@ -0,0 +1,22 @@
+# SohelpOrgTreeSelect 组织机构树选择器
+
+用于选择组织机构的树形下拉组件。自动从接口加载平铺数据并转换为树形结构展示。
+
+## 基础用法
+
+```html
+<sohelp-org-tree-select v-model="orgId" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| modelValue | String/Number/Array | - | 绑定的值 |
+| data | Object | {} | 绑定的完整数据对象 |
+| url | String | '/engine/web/org/list' | 数据接口地址 |
+| datasource | Array/Function/Promise | - | 数据源，优先级高于 url |
+| readonly | Boolean | false | 是否只读 |
+
+## 内部逻辑
+
+组件挂载时会自动请求数据，并根据 `id` 和 `parent_id` 字段将扁平数据转换为树形结构 (`treeProps.data`) 传递给内部的 `sohelp-tree-select`。

package/sohelp-org-user-tree/README.md

@@ -0,0 +1,18 @@
+# SohelpOrgUserTree 组织人员树
+
+用于展示组织机构和人员混合树形结构的组件，基于 `sohelp-dyn-tree` 封装。
+
+## 基础用法
+
+```html
+<sohelp-org-user-tree @node-click="handleNodeClick" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| url | String | '/engine/web/org/list' | 数据接口地址 |
+
+## 其他
+
+支持 `sohelp-dyn-tree` 的所有属性和事件。