sohelp-eleplus 1.1.21 → 1.1.24

package/sohelp-dict/index.vue

@@ -1,30 +1,25 @@
 <!-- 字典组件 -->
 <template>
   <template v-if="type === 'text'">
-    <el-text
-      v-bind="$attrs"
-      :style="getStyle(item)"
-      style="
-        border-radius: 3px;
-        margin-right: 3px;
-        padding-left: 6px;
-        padding-right: 6px;
-        padding-top: 3px;
-        padding-bottom: 3px;
-        display: flex;
-        align-items: center;
-      "
-      v-for="(item, index) in valueData"
-      :key="item.value"
-    >
-      <el-icon :size="18" style="margin: 2px 5px 0 0">
-        <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-        <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-        <span :class="icon" v-else></span>
-      </el-icon>
+    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 5px">
+      <el-text
+        v-bind="$attrs"
+        :style="getStyle(item)"
+        style="padding: 0 6px; border-radius: 3px"
+        v-for="item in valueData"
+        :key="item.value"
+      >
+        <div class="sohelp-dict-item">
+          <el-icon v-if="item.icon">
+            <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
+            <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
+            <span :class="icon" v-else></span>
+          </el-icon>
 
-      {{ item.label }}
-    </el-text>
+          {{ item.label }}</div
+        >
+      </el-text></div
+    >
   </template>
   <template v-else-if="type === 'tag'">
     <div class="tags" style="display: flex; gap: 5px; flex-wrap: wrap">
@@ -36,45 +31,53 @@
         :key="item.value"
         :disable-transitions="true"
       >
-        <el-icon :size="18" style="margin: 2px 5px 0 0">
-          <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-          <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-          <span :class="icon" v-else></span>
-        </el-icon>
-        {{ item.label }}
+        <div class="sohelp-dict-item">
+          <el-icon v-if="item.icon">
+            <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
+            <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
+            <span :class="icon" v-else></span>
+          </el-icon>
+          {{ item.label }}</div
+        >
       </el-tag>
     </div>
   </template>
+
   <el-radio-group
     v-bind="$attrs"
     v-else-if="type === 'radio'"
     :disabled="disabled"
-    :model-value="modelValue"
+    v-model="modelValue"
     @change="change"
   >
     <el-radio v-for="item in data.value" :key="item.value" :label="item.value">
-      <el-icon :size="18" style="margin: 2px 5px 0 0">
-        <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-        <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-        <span :class="icon" v-else></span>
-      </el-icon>
-      {{ item.label }}
+      <div class="sohelp-dict-item">
+        <el-icon v-if="item.icon">
+          <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
+          <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
+          <span :class="icon" v-else></span>
+        </el-icon>
+        {{ item.label }}</div
+      >
     </el-radio>
   </el-radio-group>
+
   <el-checkbox-group
     v-bind="$attrs"
     v-else-if="type === 'checkbox'"
     :disabled="disabled"
-    :model-value="modelValue"
+    v-model="modelValue"
     @change="change"
   >
     <el-checkbox v-for="item in data.value" :key="item.value" :label="item.value">
-      <el-icon :size="18" style="margin: 2px 5px 0 0">
-        <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
-        <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
-        <span :class="icon" v-else></span>
-      </el-icon>
-      {{ item.label }}
+      <div class="sohelp-dict-item">
+        <el-icon v-if="item.icon">
+          <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
+          <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
+          <span :class="icon" v-else></span>
+        </el-icon>
+        {{ item.label }}</div
+      >
     </el-checkbox>
   </el-checkbox-group>
 
@@ -84,7 +87,6 @@
     clearable
     v-else
     v-model="modelValue"
-    :model-value="modelValue"
     :disabled="disabled"
     :placeholder="placeholder"
     :multiple="type === 'multipleSelect'"
@@ -92,27 +94,40 @@
     style="min-width: 120px"
     @change="change"
     ref="dictSelectRef"
+    :style="getStyle(data?.value?.find((item) => item.value === modelValue))"
   >
+    <template #tag>
+      <div style="display: flex; gap: 5px; flex-wrap: wrap">
+        <el-tag v-for="item in valueData" :key="item" :style="getStyle(item)">
+          <div class="sohelp-dict-item">
+            <el-icon v-if="item.icon">
+              <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
+              <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
+              <span :class="icon" v-else></span>
+            </el-icon>
+
+            {{ item.label }}</div
+          >
+        </el-tag>
+      </div>
+    </template>
+
     <template #prefix v-if="icon">
-      <el-icon :size="18" style="margin-right: 5px">
+      <el-icon :size="16" style="margin-right: 5px">
         <component :is="ElementPlusIcons[icon]" v-if="ElementPlusIcons[icon]" />
         <component :is="EleAdminPlusIcons[icon]" v-else-if="EleAdminPlusIcons[icon]" />
         <span :class="icon" v-else></span>
       </el-icon>
     </template>
-    <el-option
-      v-for="item in data.value"
-      :key="item.id"
-      :value="item.value"
-      :label="item.label"
-      :style="`color:${item.fontColor}`"
-    >
-      <el-icon :size="18" v-if="item.icon" style="margin-right: 5px">
-        <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
-        <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
-        <span :class="item.icon" v-else></span>
-      </el-icon>
-      {{ item.label }}
+    <el-option v-for="item in data.value" :key="item.id" :value="item.value" :label="item.label">
+      <el-tag class="sohelp-dict-item" size="small" :style="getStyle(item)" :color="item.backgroundColor">
+        <el-icon v-if="item.icon">
+          <component :is="ElementPlusIcons[item.icon]" v-if="ElementPlusIcons[item.icon]" />
+          <component :is="EleAdminPlusIcons[item.icon]" v-else-if="EleAdminPlusIcons[item.icon]" />
+          <span :class="item.icon" v-else></span>
+        </el-icon>
+        <span>{{ item.label }}</span>
+      </el-tag>
     </el-option>
   </el-select>
 </template>
@@ -123,7 +138,10 @@
   import * as ElementPlusIcons from '@element-plus/icons-vue';
   import * as EleAdminPlusIcons from '../sohelp-icon-select/icons';
 
-  const modelValue = defineModel('modelValue', { type: [String, Number, Array], default: '' });
+  const modelValue = defineModel('modelValue', {
+    type: [String, Number, Array],
+    default: ''
+  });
   const emit = defineEmits('change');
   const props = defineProps({
     /** 字典类型 */
@@ -134,7 +152,10 @@
     /** 组件类型 */
     type: String,
     /** 是否禁用 */
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     /** 提示文本 */
     placeholder: String,
     /** select的下拉是否插入到body下 */
@@ -164,6 +185,7 @@
     nextTick(() => {
       if (!modelValue.value && (props.type === 'select' || props.type === undefined) && data.value[0]) {
         modelValue.value = data.value[0].value;
+      } else {
       }
       if (props.autoFocus) {
         dictSelectRef.value?.focus();
@@ -207,19 +229,14 @@
         : val
             .split(',')
             .map((v) => v.trim())
-            .filter(Boolean);
-
-    return (data.value || [])
-      .map((d) => (values.includes(d.value) ? d : null))
-      .filter(Boolean)
-      .concat(
-        values.filter((v) => !(data.value || []).some((d) => d.value === v)).map((v) => ({ value: v, label: v }))
-      );
+            .filter((v) => v !== '');
+
+    const dictData = data.value || [];
+    const dictValueSet = new Set(dictData.map((d) => d.value));
+    const matchedItems = dictData.filter((d) => values.includes(d.value));
+    const customItems = values.filter((v) => !dictValueSet.has(v)).map((v) => ({ value: v, label: v }));
+    return [...matchedItems, ...customItems].filter((item) => item.id);
   });
-  /** 更新选中数据 */
-  // const updateValue = (value) => {
-  //   emit('update:modelValue', value);
-  // };
 </script>
 
 <script>
@@ -228,3 +245,32 @@
     inheritAttrs: false
   };
 </script>
+<style scoped lang="scss">
+  .el-select {
+    border-radius: 8px;
+    :deep(.el-select__selection) {
+      .el-select__placeholder {
+        color: inherit;
+      }
+    }
+    :deep(.el-select__prefix) {
+      color: inherit;
+    }
+  }
+  .sohelp-dict-item {
+    display: flex;
+    flex: 0 0 auto !important;
+    align-items: center;
+    :deep(.el-tag__content) {
+      display: flex;
+      align-items: center;
+    }
+    :deep(.el-icon) {
+      font-size: 14px;
+      margin-right: 2px;
+    }
+  }
+  .el-select__popper .el-select-dropdown__list .el-select-dropdown__item {
+    // font-size: inherit;
+  }
+</style>

package/sohelp-drawer/README.md

@@ -0,0 +1,42 @@
+# 抽屉组件 (Drawer)
+
+对 `ele-drawer` 的简单封装，提供便捷的显示/隐藏控制。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| modelValue | Boolean | false | 控制抽屉显示隐藏 (v-model)。 |
+| ... | - | - | 支持 `ele-drawer` 的其他属性。 |
+
+## 方法 (Exposed Methods)
+
+| 方法名 | 说明 |
+| :--- | :--- |
+| show | 显示抽屉。 |
+| close | 关闭抽屉。 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| default | 抽屉主体内容。 |
+| footer | 抽屉底部区域。 |
+
+## 使用示例
+
+```vue
+<template>
+  <sohelp-drawer v-model="visible" title="详情">
+    <div>内容区域</div>
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+    </template>
+  </sohelp-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const visible = ref(false);
+</script>
+```

package/sohelp-drawer/index.vue

@@ -29,7 +29,10 @@
 
   defineExpose({
     show,
-    close
+    close,
+    getValue: () => {
+      return modelValue.value;
+    }
   });
 </script>
 <script>

package/sohelp-drop-card/README.md

@@ -0,0 +1,41 @@
+# 下拉卡片 (Drop Card)
+
+点击按钮后展示下拉卡片的组件，基于 Tooltip 实现，适合用于复杂内容的下拉展示。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| title | String | - | 按钮显示的标题。 |
+| icon | Object/String | - | 按钮图标。 |
+| placement | String | 'bottom-end' | 弹出位置。 |
+| trigger | String | 'click' | 触发方式。 |
+| effect | String | 'light' | Tooltip 主题。 |
+
+## 方法 (Exposed Methods)
+
+| 方法名 | 说明 |
+| :--- | :--- |
+| close | 关闭下拉卡片。 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| default | 卡片主体内容。 |
+| footer | 卡片底部操作区。 |
+
+## 使用示例
+
+```vue
+<template>
+  <sohelp-drop-card title="更多筛选" icon="Filter">
+    <el-form>
+      <el-form-item label="名称"><el-input /></el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" size="small">查询</el-button>
+    </template>
+  </sohelp-drop-card>
+</template>
+```

package/sohelp-dyn-select/README.md

@@ -0,0 +1,36 @@
+# 动态下拉选择 (Dynamic Select)
+
+支持从 URL、Promise 或函数动态加载数据源的下拉选择组件。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| modelValue | String/Number/Array | - | 绑定的值 (v-model)。 |
+| datasource | Array/Function/Promise | - | 数据源 (Required)。 |
+| url | String | - | 数据加载 URL (若 datasource 为空时使用)。 |
+| labelField | String | - | 显示字段名。 |
+| valueField | String | - | 值字段名。 |
+| readonly | Boolean | false | 是否只读 (只读模式下显示文本)。 |
+
+## 使用示例
+
+```vue
+<template>
+  <!-- 从 URL 加载 -->
+  <sohelp-dyn-select
+    v-model="userId"
+    url="/api/users"
+    labelField="username"
+    valueField="id"
+  />
+
+  <!-- 从静态数组加载 -->
+  <sohelp-dyn-select
+    v-model="type"
+    :datasource="[{ label: 'A', value: 1 }, { label: 'B', value: 2 }]"
+    labelField="label"
+    valueField="value"
+  />
+</template>
+```

package/sohelp-dyn-select/index.vue

@@ -13,7 +13,6 @@
       :labelField="labelField"
       :valueField="valueField"
     />
-
   </div>
 </template>
 <script>
@@ -82,7 +81,8 @@
         () => props.modelValue,
         (val) => {
           value.value = val;
-        },{
+        },
+        {
           immediate: true,
           deep: true
         }

package/sohelp-dyn-tree/README.md

@@ -0,0 +1,31 @@
+# 动态树 (Dynamic Tree)
+
+从后端 URL 加载扁平数据并自动转换为树形结构展示的组件。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| url | String | - | 数据接口 URL (Required)。 |
+| valueField | String | 'id' | ID 字段名。 |
+| labelField | String | 'org_name' | 显示字段名。 |
+| parentField | String | 'parent_id' | 父级 ID 字段名。 |
+| ... | - | - | 支持 `sohelp-tree` (el-tree) 的其他属性。 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| :--- | :--- | :--- |
+| node-click | 节点点击事件。 | `data, node, el` |
+
+## 使用示例
+
+```vue
+<template>
+  <sohelp-dyn-tree
+    url="/engine/web/org/list"
+    labelField="org_name"
+    @node-click="handleNodeClick"
+  />
+</template>
+```

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

@@ -0,0 +1,28 @@
+# 动态树选择 (Dynamic Tree Select)
+
+基于 `ele-tree-select`，支持从后端 URL 加载数据并自动转树形结构的选择组件。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| modelValue | String/Number/Array | - | 绑定的值 (v-model)。 |
+| url | String | '/engine/web/org/list' | 数据接口 URL。 |
+| valueField | String | 'id' | ID 字段名。 |
+| labelField | String | 'org_name' | 显示字段名。 |
+| parentField | String | 'parent_id' | 父级 ID 字段名。 |
+| height | String | '255' | 下拉框高度。 |
+| checkStrictly | Boolean | false | 是否严格的遵循父子不互相关联。 |
+| ... | - | - | 支持 `ele-tree-select` 的其他属性。 |
+
+## 使用示例
+
+```vue
+<template>
+  <sohelp-dyn-tree-select
+    v-model="orgId"
+    url="/api/orgs"
+    placeholder="选择部门"
+  />
+</template>
+```

package/sohelp-entity-form/README.md

@@ -0,0 +1,45 @@
+# 实体表单 (Entity Form)
+
+基于元数据配置 (`refid`) 自动渲染的表单组件，支持复杂的表单逻辑、公式计算和布局控制。
+
+## 功能特性
+
+- **元数据驱动**：通过 `refid` 自动加载表单配置。
+- **公式计算**：支持字段间的自动计算公式。
+- **响应式布局**：支持 `grid` 布局配置。
+- **自定义插槽**：支持插槽覆盖特定字段的渲染。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| modelValue | Object | - | 表单数据对象 (v-model)。 |
+| refid | String | - | 实体引用 ID (Required)。 |
+| formConfig | Object | - | 表单配置对象 (Required)。 |
+| readonly | Boolean | false | 是否只读。 |
+| autoLoad | Boolean | true | 是否自动加载数据。 |
+| labelWidth | String | 'auto' | 标签宽度。 |
+| gridNum | Number | 1 | 列数。 |
+
+## 方法 (Exposed Methods)
+
+可通过 `ref` 获取实例调用：
+- `getRef(name)`: 获取内部字段组件实例。
+
+## 使用示例
+
+```vue
+<template>
+  <sohelp-entity-form
+    v-model="formData"
+    refid="user_entity"
+    :formConfig="config"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const formData = ref({});
+const config = { ... }; // 通常由后端获取
+</script>
+```

package/sohelp-entity-form/index.vue

@@ -15,6 +15,7 @@
       :rowProps="{
         gutter: 20
       }"
+      :saveParams="saveParams"
       @updateValue="setFieldValue"
     >
       <!-- 自定义插槽 -->
@@ -36,13 +37,10 @@
   import { useMobile } from '@/utils/use-mobile';
   import { useI18n } from 'vue-i18n';
   import { EleMessage } from '@/components/ele-admin-plus/components';
-  import { SohelpInput, SohelpNumberInput } from '../components';
 
-  const { query } = useRoute();
   const formValue = ref({});
   const formData = ref({});
   const defaultFormValue = ref({});
-  const form = ref({});
   const loading = ref(false);
   const { mobile } = useMobile();
   const emit = defineEmits(['update:modelValue', 'update:data']);
@@ -74,9 +72,12 @@
     gridNum: {
       type: Number,
       default: 1
+    },
+    saveParams: {
+      type: Object,
+      default: () => ({})
     }
   });
-
   /**
    * 存储表单初始值用于对比变更
    *
@@ -220,6 +221,10 @@
           editParams.readonly = item?.readonly || false;
           editParams.placeholder = item?.placeholder || placeholderMap[item?.editor] || '';
 
+          if (props.readonly) {
+            editParams.placeholder = '';
+          }
+
           return {
             key: item?.name || 'tempKey' + index,
             type: item?.editor ? item.editor : matchingType(item?.type || ''),
@@ -253,7 +258,10 @@
     }
     isConfigInitialized.value = true;
     defaultFormValue.value = init;
-    return Promise.resolve(init);
+
+    return new Promise((resolve) => {
+      resolve(init);
+    });
   };
   /**
    * 获取表单数据
@@ -436,6 +444,7 @@
    */
   const save = async (params = {}, callback) => {
     await isConfigDone();
+
     loading.value = true;
     const refid = props.refid;
     const key = refid && refid.indexOf('!') !== -1 ? refid.split('!')[1] : 'default';

package/sohelp-entity-grid/README.md

@@ -0,0 +1,18 @@
+# 实体表格 (Entity Grid)
+
+基于元数据配置 (`refid`) 自动渲染的表格组件，封装了 `sohelp-grid-view`。
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| refid | String | - | 实体引用 ID (Required)。 |
+| modelValue | Object | - | 绑定的值。 |
+
+## 使用示例
+
+```vue
+<template>
+  <sohelp-entity-grid refid="user_list_view" />
+</template>
+```

package/sohelp-file-upload/README.md

@@ -0,0 +1,35 @@
+# SohelpFileUpload 文件上传组件
+
+基于 `vxe-upload` 封装的文件上传组件，支持拖拽、粘贴上传、多文件上传、文件大小限制、文件类型限制以及下载功能。
+
+## 基础用法
+
+```html
+<sohelp-file-upload v-model="fileIds" :limit="5" :fileSize="10" />
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|Data | Array | [] | 文件对象数组，包含 name, url, id 等信息 |
+| modelValue | Array/String | [] | 绑定的文件 ID 集合 |
+| limit | Number | - | 最大允许上传个数 |
+| fileSize | Number | - | 单个文件大小限制 (MB) |
+| fileType | Array | - | 允许上传的文件类型后缀，如 ['jpg', 'png'] |
+| drag | Boolean | false | 是否启用拖拽上传 |
+| isShowTip | Boolean | true | 是否显示提示信息 |
+| readonly | Boolean | false | 是否只读模式 |
+
+## 事件 (Events)
+
+| 事件名 | 说明 | 回调参数 |
+| update:modelValue | 更新绑定的 ID 集合 | (ids: Array) |
+| update:data | 更新文件对象数组 | (files: Array) |
+
+## 功能特性
+
+- **上传**: 调用后端接口 `/engine/web/file/upload` 上传文件。
+- **下载**: 点击文件名可下载文件，调用 `/engine/web/file/download/{id}`。
+- **删除**: 支持删除已上传文件。
+- **进度**: 显示上传进度。
+- **校验**: 校验文件数量、大小和类型。