sohelp-eleplus 1.1.27 → 1.1.28

package/sohelp-table/README.md

@@ -1,36 +1,44 @@
-# SohelpTable
+# SohelpTable 表格
 
-A powerful table component wrapper around `ele-pro-table` that integrates with `moduleCache` for configuration loading and supports remote data fetching.
+基于 ele-pro-table 封装的配置化表格组件。通过 `refid` 从后端加载表格列配置，自动渲染列定义、支持分页查询、选择行数据等功能，并内置序号列和多选列。
 
-## Props
+## 基础用法
 
-| Name | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `refid` | `String` | Required | The configuration ID for the grid layout. |
-| `url` | `String` | `""` | The data source URL for fetching table data. |
-| `where` | `Object` | `{}` | Additional query parameters for the data request. |
-| `...` | - | - | Supports all `ele-pro-table` props. |
+```vue
+<template>
+  <sohelp-table ref="tableRef" refid="demo_table" url="/api/data/list">
+    <template #action="{ row }">
+      <el-button size="small" @click="handleEdit(row)">编辑</el-button>
+    </template>
+  </sohelp-table>
+</template>
 
-## Slots
+<script setup>
+import { ref } from 'vue';
+const tableRef = ref(null);
+</script>
+```
 
-| Name | Description |
-| :--- | :--- |
-| `toolbar` | Custom content for the table toolbar. Scope: `{ row }`. |
-| `action` | Custom content for the action column. Scope: `{ row }`. |
-| `...` | - | Passes through all slots supported by `ele-pro-table`. |
+## 属性 (Props)
 
-## Methods
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| refid | String | `''` | 是 | 网格列表配置ID，用于从后端加载列配置 |
+| url | String | `''` | 否 | 数据源请求URL |
+| where | Object | `{}` | 否 | 额外的查询条件参数 |
 
-| Name | Description |
-| :--- | :--- |
-| `reload(param)` | Reloads the table data. |
-| `getData()` | Returns the current table data. |
-| `getTableRef()` | Returns the underlying table reference. |
+## 插槽 (Slots)
 
-## Usage
+| 插槽名 | 说明 |
+| --- | --- |
+| toolbar | 工具栏区域自定义内容，作用域参数: `{ row }` |
+| action | 操作列自定义内容，作用域参数: `{ row }` |
+| default | 默认插槽，透传到 ele-pro-table |
 
-```vue
-<template>
-  <sohelp-table refid="user_grid_config" url="/api/users" />
-</template>
-```
+## 公开方法 (Expose)
+
+- `reload(param)` - 重新加载表格数据
+- `getData()` - 获取当前表格数据
+- `getTableRef()` - 获取内部 ele-pro-table 实例引用
+- `datasource` - 数据源函数
+- `sohelpConfig` - 表格配置对象

package/sohelp-table/index.vue

@@ -12,7 +12,7 @@
     highlight-current-row
   >
     <slot>
-      <template v-for="(slotProps, slotName) in $scopedSlots" :key="slotName">
+      <template v-for="(slotProps, slotName) in $slots" :key="slotName">
         <slot :name="slotName" v-bind="slotProps" />
       </template>
     </slot>
@@ -25,125 +25,126 @@
     </template>
   </ele-pro-table>
 </template>
-<script>
+<script setup>
   import { reactive, ref } from 'vue';
   import { moduleCache } from '../cache/ModuleCache';
   import { EleMessage } from '@/components/ele-admin-plus/components';
 
-  export default {
-    name: 'SohelpTable',
-    props: {
-      /**网格列表配置ID*/
-      refid: {
-        type: String,
-        default: '',
-        required: true
-      },
-      /**数据源URL**/
-      url: {
-        type: String,
-        default: ''
-      },
-      /**数据源URL**/
-      where: {
-        type: Object,
-        default: {}
-      }
+  const props = defineProps({
+    /**网格列表配置ID*/
+    refid: {
+      type: String,
+      default: '',
+      required: true
+    },
+    /**数据源URL**/
+    url: {
+      type: String,
+      default: ''
     },
-    setup(props, { emit }) {
-      /**列表实例*/
-      const sohelpTableRef = ref(null);
-      /**存储表格配置*/
-      const sohelpConfig = reactive({});
-      /**在放选中数据列表**/
-      const selections = ref([]);
-      /**默认加载数据**/
-      const loadOnCreated = ref(false);
+    /**数据源URL**/
+    where: {
+      type: Object,
+      default: {}
+    }
+  });
 
-      /**自定义列配置 **/
-      const columns = reactive([
-        {
-          type: 'selection',
-          columnKey: 'selection',
-          width: 50,
-          align: 'center',
-          fixed: 'left'
-        },
-        {
-          type: 'index',
-          columnKey: 'index',
-          width: 50,
-          align: 'center',
-          fixed: 'left'
-        }
-      ]);
+  /**列表实例*/
+  const sohelpTableRef = ref(null);
+  /**存储表格配置*/
+  const sohelpConfig = reactive({});
+  /**在放选中数据列表**/
+  const selections = ref([]);
+  /**默认加载数据**/
+  const loadOnCreated = ref(false);
 
-      /** 表格数据源 */
-      const datasource = async ({ page, limit, where, orders }) => {
-        if (!loadOnCreated.value) {
-          return { total: 0, results: [] };
-        }
-        const res = await SohelpHttp.get(props.url || sohelpConfig.requestValue, {
-          page,
-          limit,
-          ...where,
-          ...props.where,
-          orders
-        }).catch((e) => {
-          EleMessage.error(e.message);
-        });
-        return res.data;
-      };
+  /**自定义列配置 **/
+  const columns = reactive([
+    {
+      type: 'selection',
+      columnKey: 'selection',
+      width: 50,
+      align: 'center',
+      fixed: 'left'
+    },
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center',
+      fixed: 'left'
+    }
+  ]);
+
+  /** 表格数据源 */
+  const datasource = async ({ page, limit, where, orders }) => {
+    if (!loadOnCreated.value) {
+      return { total: 0, results: [] };
+    }
+    const res = await SohelpHttp.get(props.url || sohelpConfig.requestValue, {
+      page,
+      limit,
+      ...where,
+      ...props.where,
+      orders
+    }).catch((e) => {
+      EleMessage.error(e.message);
+    });
+    if (!res) return;
+    return res.data;
+  };
 
-      /**根据配置列转成ProTable格式的列*/
-      const switchProperty = (property) => {
-        return {
-          prop: property.name,
-          columnKey: property.name,
-          label: property.label,
-          width: property.width || 100
-        };
-      };
+  /**根据配置列转成ProTable格式的列*/
+  const switchProperty = (property) => {
+    return {
+      prop: property.name,
+      columnKey: property.name,
+      label: property.label,
+      width: property.width || 100
+    };
+  };
 
-      /***初始化网格列表配置**/
-      const initProTableConfiguration = (cfg) => {
-        loadOnCreated.value = true;
-        reload();
-      };
-      /**获取列表配置*/
-      moduleCache.getGrid(props.refid).then((data) => {
-        Object.assign(sohelpConfig, { ...data });
-        //初始化属性列表配置
-        data.properties.map((property) => {
-          columns.push(switchProperty(property));
-        });
-        /**添加操作列**/
-        columns.push({
-          field: 'action',
-          label: '操作',
-          width: 200,
-          align: 'center',
-          slot: 'action'
-        });
-        //初始化表格配置
-        initProTableConfiguration();
-      });
+  /***初始化网格列表配置**/
+  const initProTableConfiguration = (cfg) => {
+    loadOnCreated.value = true;
+    reload();
+  };
+  /**获取列表配置*/
+  moduleCache.getGrid(props.refid).then((data) => {
+    Object.assign(sohelpConfig, { ...data });
+    //初始化属性列表配置
+    data.properties.map((property) => {
+      columns.push(switchProperty(property));
+    });
+    /**添加操作列**/
+    columns.push({
+      field: 'action',
+      label: '操作',
+      width: 200,
+      align: 'center',
+      slot: 'action'
+    });
+    //初始化表格配置
+    initProTableConfiguration();
+  });
 
-      const reload = (param) => {
-        sohelpTableRef.value?.reload?.(param);
-      };
-      const getData = () => {
-        return sohelpTableRef.value?.getData?.();
-      };
-      const getTableRef = () => {
-        return sohelpTableRef.value?.getTableRef?.();
-      };
+  const reload = (param) => {
+    sohelpTableRef.value?.reload?.(param);
+  };
+  const getData = () => {
+    return sohelpTableRef.value?.getData?.();
+  };
+  const getTableRef = () => {
+    return sohelpTableRef.value?.getTableRef?.();
+  };
 
-      // defineExpose({
-      //   reload, getData,getTableRef,datasource
-      // })
-      return { columns, reload, getData, getTableRef, datasource, selections, sohelpTableRef, sohelpConfig };
-    }
+  defineExpose({
+    reload, getData, getTableRef, datasource, sohelpConfig
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpTable'
   };
 </script>
 <style scoped></style>

package/sohelp-table-select/README.md

@@ -0,0 +1,55 @@
+# SohelpTableSelect 表格弹窗选择器
+
+基于 el-input、sohelp-modal 和 SohelpGridView 封装的弹窗表格选择组件。点击搜索图标弹出模态窗口，内嵌网格列表进行数据选择，支持单选和多选模式，多选时右侧显示已选列表面板。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-table-select
+    v-model="selectedValue"
+    v-model:data="selectedData"
+    refid="demo_grid"
+    labelField="name"
+    valueField="id"
+    :multiple="true"
+    title="选择用户"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const selectedValue = ref([]);
+const selectedData = ref([]);
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| multiple | Boolean | `false` | 否 | 是否允许多选 |
+| placeholder | String | `'请选择'` | 否 | 输入框占位文本 |
+| title | String | `'请选择'` | 否 | 弹窗标题 |
+| valueField | String | `'id'` | 否 | 值字段名 |
+| labelField | String | `'label'` | 否 | 显示文本对应的字段名 |
+| refid | String | `''` | 否 | 网格列表配置ID |
+
+## 双向绑定 (v-model)
+
+| 属性名 | 类型 | 说明 |
+| --- | --- | --- |
+| modelValue | String / Array | 绑定值，单选时为字符串，多选时为数组 |
+| data | Object / Array | 已选中的数据对象或数组 |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| change | (selectedList) | 确认选择后触发，参数为选中项列表 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| --- | --- |
+| trigger | 自定义触发器区域，作用域参数: `{ selected }` |

package/sohelp-tenant-select/README.md

@@ -1,22 +1,8 @@
-# SohelpTenantSelect
+# SohelpTenantSelect 租户选择器
 
-A component for selecting tenants using a grid view (`sohelp-vxe-grid-select`). Fetches tenant data from the server.
+基于 `sohelp-vxe-grid-select` 封装的租户选择组件，以表格弹窗形式展示租户列表，支持分页和多选确认。
 
-## Props
-
-| Name | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `url` | `String` | `'/engine/web/tenant/page'` | The API URL to fetch tenant data. |
-| `title` | `String` | `'选择租户'` | The title of the selection dialog. |
-| `...` | - | - | Supports all `sohelp-vxe-grid-select` props. |
-
-## Events
-
-| Name | Parameters | Description |
-| :--- | :--- | :--- |
-| `confirm` | `(rows: Array)` | Triggered when the user confirms the selection. Returns the selected rows. |
-
-## Usage
+## 基础用法
 
 ```vue
 <template>
@@ -25,7 +11,22 @@ A component for selecting tenants using a grid view (`sohelp-vxe-grid-select`).
 
 <script setup>
 const handleConfirm = (rows) => {
-  console.log('Selected tenants:', rows);
+  console.log('选中的租户:', rows);
 };
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| url | String | `'/engine/web/tenant/page'` | 否 | 租户数据分页接口地址 |
+| title | String | `'选择租户'` | 否 | 选择弹窗标题 |
+
+> 同时支持所有 `sohelp-vxe-grid-select` 原生属性，通过 `v-bind="$attrs"` 透传。
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| :--- | :--- | :--- |
+| confirm | `(rows: Array)` | 用户确认选择后触发，返回选中的行数据数组 |

package/sohelp-tenant-select/index.vue

@@ -1,126 +1,122 @@
 <template>
   <sohelp-vxe-grid-select label-field="tenant_name" :title="title" ref="vxeGridSelectRef" v-bind="$attrs" :gridOptions="gridOptions" @show="show" @confirm="confirm"></sohelp-vxe-grid-select>
 </template>
-<script>
+<script setup>
 import SohelpVxeGridSelect from "../sohelp-vxe-grid-select/index.vue";
 import { nextTick, reactive, ref } from "vue";
 import { EleMessage } from "@/components/ele-admin-plus/components";
 
-export default {
-  name: "SohelpTenantSelect",
-  components: {SohelpVxeGridSelect},
-  props:{
-    url:{
-      type:String,
-      default:'/engine/web/tenant/page'
-    },
-    title:{
-      type:String,
-      default:'选择租户'
-    }
-
+const props = defineProps({
+  url:{
+    type:String,
+    default:'/engine/web/tenant/page'
   },
-  setup(props,{emit}){
-    const vxeGridSelectRef= ref();
-    const show = (options) => {
-      SohelpHttp.get(props.url,{}).then(res=>{
-        if(res.meta.success){
-          nextTick(()=>{
-            gridOptions.pagerConfig.total = res.data.total;
-            vxeGridSelectRef.value.$grid.loadData(res.data.results);
-          })
+  title:{
+    type:String,
+    default:'选择租户'
+  }
+});
+
+const emit = defineEmits(['confirm']);
 
-        }else{
-          EleMessage.error(res.meta.message);
-        }
+const vxeGridSelectRef= ref();
+const show = (options) => {
+  SohelpHttp.get(props.url,{}).then(res=>{
+    if(res.meta.success){
+      nextTick(()=>{
+        gridOptions.pagerConfig.total = res.data.total;
+        vxeGridSelectRef.value.$grid.loadData(res.data.results);
       })
-    }
 
-    const confirm = (rows) => {
-      emit('confirm',rows);
+    }else{
+      EleMessage.error(res.meta.message);
     }
+  })
+}
 
-    /** 表格配置 */
-    const gridOptions = reactive({
-      customConfig: {
-        placement: 'top-right' // 自定义列工具栏位置
-      },
-      rowConfig: {
-        useKey: true,
-        sHover: true,
-        isCurrent: true
-      },
-      keyboardConfig: {
-        isEdit: true,
-        isArrow: true,
-        isEnter: true,
-        isTab: true,
-        isDel: true,
-        isBack: true
-      },
-      mouseConfig: {
-        selected: false
-      },
-      checkboxConfig: {
-        highlight: true,
-        range: true
-      },
-      pagerConfig: {
-        enabled: true,
-        total: 0,
-        currentPage: 1,
-        pageSize: 50,
-        align: 'center'
-      },
-      border: true,
-      stripe: true,
-      loading: false,
-      minHeight: 200,
-      maxHeight: '100%',
-      size: 'mini',
-      columnConfig: {
-        resizable: true
-      },
-      columns: [
-        { field: 'checkbox', fixed: 'left', type: 'checkbox', align: 'center', width: 40 },
-        {
-          type: 'seq',
-          title: '#',
-          fixe: 'left',
-          align: 'center',
-          width: 40
-        },
-        {
-          title: 'id',
-          width: 200,
-          field: 'id',
-          visible: false
-        },
-        {
-          title: '租户',
-          width: 200,
-          field: 'tenant_name',
-          showOverflow: 'tooltip'
-        }, {
-          title: '备注',
-          minWidth: 200,
-          field: 'comments',
-          showOverflow: 'tooltip'
-        }, {
-          title: '创建日期',
-          width: 160,
-          field: 'create_time'
-        }
-      ],
-      data: []
-    });
-
-
-
-   return {vxeGridSelectRef,gridOptions,show,confirm}
-
-  }
+const confirm = (rows) => {
+  emit('confirm',rows);
 }
+
+/** 表格配置 */
+const gridOptions = reactive({
+  customConfig: {
+    placement: 'top-right' // 自定义列工具栏位置
+  },
+  rowConfig: {
+    useKey: true,
+    sHover: true,
+    isCurrent: true
+  },
+  keyboardConfig: {
+    isEdit: true,
+    isArrow: true,
+    isEnter: true,
+    isTab: true,
+    isDel: true,
+    isBack: true
+  },
+  mouseConfig: {
+    selected: false
+  },
+  checkboxConfig: {
+    highlight: true,
+    range: true
+  },
+  pagerConfig: {
+    enabled: true,
+    total: 0,
+    currentPage: 1,
+    pageSize: 50,
+    align: 'center'
+  },
+  border: true,
+  stripe: true,
+  loading: false,
+  minHeight: 200,
+  maxHeight: '100%',
+  size: 'mini',
+  columnConfig: {
+    resizable: true
+  },
+  columns: [
+    { field: 'checkbox', fixed: 'left', type: 'checkbox', align: 'center', width: 40 },
+    {
+      type: 'seq',
+      title: '#',
+      fixed: 'left',
+      align: 'center',
+      width: 40
+    },
+    {
+      title: 'id',
+      width: 200,
+      field: 'id',
+      visible: false
+    },
+    {
+      title: '租户',
+      width: 200,
+      field: 'tenant_name',
+      showOverflow: 'tooltip'
+    }, {
+      title: '备注',
+      minWidth: 200,
+      field: 'comments',
+      showOverflow: 'tooltip'
+    }, {
+      title: '创建日期',
+      width: 160,
+      field: 'create_time'
+    }
+  ],
+  data: []
+});
+</script>
+<script>
+export default {
+  name: "SohelpTenantSelect"
+};
 </script>
 
 <style scoped>

package/sohelp-text/README.md

@@ -1,17 +1,23 @@
-# SohelpText
+# SohelpText 文本展示
 
-A simple text display component that wraps `ele-text` and enables word limit display.
+基于 `ele-text` 封装的文本展示组件，默认开启字数统计显示。
 
-## Props
-
-| Name | Type | Default | Description |
-| :--- | :--- | :--- | :--- |
-| `...` | - | - | Supports all `ele-text` props. |
-
-## Usage
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-text>Some text content</sohelp-text>
+  <sohelp-text>这是一段文本内容</sohelp-text>
 </template>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| - | - | - | - | 支持通过 `v-bind="$attrs"` 透传所有 `ele-text` 原生属性 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| default | 文本内容 |