sohelp-eleplus 1.1.26 → 1.1.28

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

@@ -1,36 +1,44 @@
-# SohelpGridViewSelect 表格视图选择器
+# SohelpGridViewSelect 网格弹窗选择器
 
-基于 `SohelpGridView` 的弹窗选择器组件。通过 `refid` 引用配置，点击按钮弹出表格视图进行数据选择，支持单选和多选。
+基于 el-input 和 ele-modal 弹窗封装的网格数据选择组件。点击输入框右侧按钮弹出模态窗口，内嵌 SohelpGridView 网格列表进行数据选择，支持单选和多选模式，已选项以 Tag 标签形式展示在输入框前缀中。
 
 ## 基础用法
 
-```html
-<sohelp-grid-view-select 
-  v-model="selectedId" 
-  refid="user_view_ref" 
-/>
+```vue
+<template>
+  <sohelp-grid-view-select
+    v-model="selectedValue"
+    v-model:data="selectedData"
+    refid="demo_grid"
+    labelField="name"
+    valueField="id"
+    :multiple="false"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const selectedValue = ref('');
+const selectedData = ref(null);
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| modelValue | String/Array | [] | 绑定的值（ID 或 ID 数组） |
-| refid | String | - | 必填，视图引用 ID，用于加载表格配置 |
-| multiple | Boolean | false | 是否多选 |
-| data | Object/Array | - | 已选中的数据对象（用于回显） |
-| labelField | String | 'label' | 显示文本字段名 |
-| valueField | String | 'id' | 值字段名 |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue | String / Array | `[]` | 否 | 绑定值，单选时为字符串，多选时为数组 |
+| 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`，支持筛选、分页等功能。
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | (value) | 绑定值更新时触发 |
+| update:data | (data) | 已选数据更新时触发 |
+| confirm | (rows) | 用户确认选择时触发，参数为选中的行数据 |
+| show | - | 弹窗打开时触发 |

package/sohelp-grid-view-select/index.vue

@@ -94,7 +94,7 @@ const _data = computed(() => {
  */
 const handleClose = (tag) => {
   if(props.multiple) {
-    props.data.splice(props.data.indexOf(tag), 1);
+    emit("update:data", props.data.filter(item => item !== tag));
   }else{
     emit("update:modelValue", null);
     emit("update:data", null);
@@ -115,6 +115,7 @@ const cancel = () => {
  */
 const confirm = () => {
   const rows = tableRef.value.getSelection();
+  if (rows.length === 0) return;
   if (props.multiple) {
     let _data = [];
     for (let i = 0; i < rows.length; i++) {

package/sohelp-group-view/README.md

@@ -1,7 +1,17 @@
-# SohelpGroupView 分组视图组件
+# SohelpGroupView 分组视图
 
-*当前版本仅为占位组件，功能待完善。*
+当前版本仅为占位组件，预留用于展示按状态或其他字段分组的视图。
 
-## 描述
+## 基础用法
 
-预留用于展示按状态或其他字段分组的视图组件。
+```vue
+<template>
+  <sohelp-group-view />
+</template>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| - | - | - | - | 暂无属性 |

package/sohelp-group-view/index.vue

@@ -1,11 +1,12 @@
-<script setup>
-
-</script>
-
 <template>
-<div>按状态分组视图</div>
+  <div class="sohelp-group-view">
+    <!-- TODO: 待实现 - 按状态分组视图 -->
+    <el-empty description="按状态分组视图 - 待实现" />
+  </div>
 </template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup>
+  // TODO: 待实现
+</script>
+<script>
+  export default { name: 'SohelpGroupView' };
+</script>

package/sohelp-icon-select/README.md

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

package/sohelp-image-upload/README.md

@@ -1,35 +1,35 @@
-# SohelpImageUpload 图片上传组件
+# SohelpImageUpload 图片上传
 
-基于 `vxe-upload` 定制的图片上传组件，专注于图片处理，支持预览、粘贴上传、多图上传等。
+基于 `vxe-upload` 封装的图片上传组件（`mode="image"`），支持粘贴上传、图片预览、下载和删除，自动对接后端文件接口。
 
 ## 基础用法
 
-```html
-<sohelp-image-upload v-model="imageId" />
+```vue
+<template>
+  <sohelp-image-upload v-model="imageId" v-model:data="imageData" refid="myRefId" ref_id="recordId" ref_type="1" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const imageId = ref('');
+const imageData = ref([]);
+</script>
 ```
 
 ## 属性 (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) |
-
-## 功能特性
-
-- **图片预览**: 上传后可预览缩略图。
-- **粘贴上传**: 支持从剪贴板粘贴图片上传。
-- **下载**: 支持下载图片。
-- **删除**: 支持删除图片，需二次确认。
-- **进度显示**: 显示上传百分比。
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | String / Array | - | 否 | 图片ID，多图时为数组 |
+| data (v-model:data) | Object / Array | `[]` | 否 | 图片详细数据（含 id 和 filename） |
+| readonly | Boolean | `false` | 否 | 是否只读 |
+| datasource | Function | `() => {}` | 否 | 异步数据源 |
+| multiple | Boolean | `false` | 否 | 是否支持多图片上传 |
+| limitCount | Number | `9` | 否 | 单次上传图片数量限制 |
+| limitSize | Number | `10` | 否 | 单张图片大小限制（MB） |
+| imageTypes | Array | `['jpg','jpeg','png','webp','bmp','gif']` | 否 | 支持的图片格式 |
+| imageConfig | Object | `{ width: 30, height: 26 }` | 否 | 图片缩略图尺寸配置 |
+| moreConfig | Object | `{ maxCount: 1, layout: 'horizontal' }` | 否 | 上传组件额外配置 |
+| refid | String | - | 否 | 业务关联ID |
+| ref_id | String | - | 否 | 引用记录ID |
+| ref_type | String / Number | - | 否 | 引用类型 |

package/sohelp-image-upload/index.vue

@@ -80,7 +80,7 @@
      * 支持上传图片的类型
      */
     imageTypes: {
-      type: Object,
+      type: Array,
       default: () => {
         return ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'gif'];
       }
@@ -168,7 +168,7 @@
       if (res.meta.success) {
         ElMessage.success(res.meta.message);
         originList.value = originList.value.filter((item) => item.id !== id);
-        modelValue.value = '';
+        modelValue.value = props.multiple ? [] : '';
         return true;
       } else {
         ElMessage.error(res.meta.message);

package/sohelp-import/README.md

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

package/sohelp-input/README.md

@@ -1,21 +1,37 @@
-# SohelpInput 输入框组件
+# SohelpInput 输入框
 
-基于 `el-input` 的封装，增加了自动聚焦功能。
+基于 `el-input` 封装的文本输入框组件，支持自动聚焦、禁用/只读时自动清空占位符，并透传所有 `el-input` 属性与插槽。
 
 ## 基础用法
 
-```html
-<sohelp-input v-model="value" auto-focus />
+```vue
+<template>
+  <sohelp-input v-model="value" placeholder="请输入内容" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value = ref('');
+</script>
 ```
 
 ## 属性 (Props)
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| modelValue | String/Number | - | 绑定值 |
-| autoFocus | Boolean | false | 组件挂载后是否自动获取焦点 |
-| disabled | Boolean | false | 是否禁用 |
-| readonly | Boolean | false | 是否只读 |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | String / Number | - | 否 | 绑定值（支持 v-model） |
+| autoFocus | Boolean | `false` | 否 | 组件挂载后是否自动获取焦点 |
+| placeholder | String | `''` | 否 | 占位文本，disabled/readonly 时自动置空 |
+
+> 支持通过 `v-bind="$attrs"` 透传所有 `el-input` 原生属性（如 `disabled`、`readonly`、`maxlength`、`size` 等）。
+
+## 插槽 (Slots)
 
-## 事件 (Events)
+| 插槽名 | 说明 |
+| :--- | :--- |
+| prefix | 输入框头部内容 |
+| suffix | 输入框尾部内容 |
+| prepend | 输入框前置内容 |
+| append | 输入框后置内容 |
 
-支持 `el-input` 的所有事件。
+> 动态透传所有 `el-input` 支持的插槽。

package/sohelp-input/index.vue

@@ -4,7 +4,8 @@
     v-model="modelValue"
     clearable
     ref="inputRef"
-    :disabled="$attrs?.disabled || $attrs?.readonly"
+    :disabled="attrs?.disabled || attrs?.readonly"
+    :placeholder="computedPlaceholder"
   >
     <template v-for="(_, slot) in $slots" #[slot]="slotProps">
       <slot :name="slot" v-bind="slotProps" />
@@ -12,7 +13,7 @@
   </el-input>
 </template>
 <script setup>
-  import { nextTick, onMounted, ref } from 'vue';
+  import { nextTick, onMounted, ref, computed, useAttrs } from 'vue';
 
   const emit = defineEmits(['update:modelValue']);
   const modelValue = defineModel('modelValue');
@@ -20,10 +21,22 @@
     autoFocus: {
       type: Boolean,
       default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
     }
   });
 
   const inputRef = ref(null);
+  const attrs = useAttrs();
+  
+  // 计算属性：如果 disabled 或 readonly 为 true，则 placeholder 为空
+  const computedPlaceholder = computed(() => {
+    const isDisabled = attrs?.disabled || attrs?.readonly;
+    return isDisabled ? '' : props.placeholder;
+  });
+
   onMounted(() => {
     nextTick(() => {
       if (props.autoFocus) {

package/sohelp-input-tag/README.md

@@ -0,0 +1,53 @@
+# SohelpInputTag 标签输入框
+
+基于 `el-input` + `el-tag` 封装的标签输入组件，支持按键触发添加标签、Backspace 删除末尾标签、标签数量限制、失焦自动保存等功能。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-input-tag v-model="tags" placeholder="输入后按回车添加" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const tags = ref(['标签1', '标签2']);
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| modelValue | Array | `[]` | 否 | 绑定值（标签字符串数组，支持 v-model） |
+| size | String | `''` | 否 | 尺寸，可选 `'large'` / `'default'`，默认跟随全局配置 |
+| trigger | String | `'Enter'` | 否 | 触发添加标签的按键名称 |
+| clearable | Boolean | `true` | 否 | 是否显示一键清空按钮 |
+| closeable | Boolean | `true` | 否 | 标签是否可单独关闭删除 |
+| disabled | Boolean | `false` | 否 | 是否禁用 |
+| readonly | Boolean | `false` | 否 | 是否只读 |
+| saveOnBlur | Boolean | `false` | 否 | 失焦时是否自动将当前输入内容添加为标签 |
+| max | Number | `undefined` | 否 | 最多可添加的标签数量 |
+| autofocus | Boolean | `false` | 否 | 组件挂载后是否自动获取焦点 |
+| id | String | `''` | 否 | 输入框 id |
+| placeholder | String | `''` | 否 | 占位文本，有标签时自动隐藏 |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| update:modelValue | `(value: Array)` | 绑定值变化时触发 |
+| change | `(value: Array)` | 绑定值变化时触发 |
+| input | `(value: String)` | 输入框内容变化时触发 |
+| add-tag | `(tag: String)` | 标签被添加时触发 |
+| remove-tag | `(tag: String)` | 标签被移除时触发 |
+| focus | `(event: FocusEvent)` | 输入框获取焦点时触发 |
+| blur | `(event: FocusEvent)` | 输入框失去焦点时触发 |
+| clear | - | 点击清空按钮时触发 |
+
+## 公开方法 (Expose)
+
+| 方法名 | 说明 |
+| :--- | :--- |
+| `focus()` | 使输入框获取焦点 |
+| `blur()` | 使输入框失去焦点 |