sohelp-eleplus 1.1.19 → 1.1.21

package/sohelp-import/index.vue

@@ -0,0 +1,470 @@
+<template>
+  <ele-modal form :model-value="modelValue" title="数据导入" :width="860" @update:modelValue="updateModelValue">
+    <div class="import-wrap" v-loading="loading">
+      <div class="import-header">
+        <div class="tips">
+          <ele-text>支持文件格式：xls、xlsx；大小 ≤ 50MB；最多 10,000 行</ele-text>
+        </div>
+        <div class="actions">
+          <el-button plain :loading="downloadingTemplate" @click="downloadTemplate">下载导入模板</el-button>
+          <el-button plain @click="openConfig" v-if="false">配置导入列表</el-button>
+          <el-link :underline="false" @click="viewHistory">查看导入历史</el-link>
+        </div>
+      </div>
+      <div class="upload-area" @drop.prevent="onDrop" @dragover.prevent>
+        <el-upload
+          drag
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onFileChange"
+          :on-remove="onRemove"
+          :limit="1"
+          accept=".xls,.xlsx"
+          class="uploader"
+        >
+          <i class="el-icon"><UploadFilled /></i>
+          <div class="el-upload__text">拖拽文件到此处或点击上传</div>
+          <div class="el-upload__tip">仅限 .xls/.xlsx，大小不超过 50MB</div>
+        </el-upload>
+        <div class="status" v-if="fileName">
+          <ele-text>已选择：{{ fileName }}（{{ formatSize(fileSize) }}）</ele-text>
+          <el-progress :percentage="progress" :status="progressStatus" />
+          <ele-text v-if="rowCount">总共发现 {{ rowCount }} 条数据</ele-text>
+        </div>
+      </div>
+      <div class="result-actions" v-if="rowCount">
+        <el-button type="primary" plain @click="togglePreview">{{ previewVisible ? '隐藏预览数据' : '查看预览数据' }}</el-button>
+        <el-button plain @click="downloadProcessed">下载导入文件</el-button>
+      </div>
+      <ele-card v-if="previewVisible" style="margin-top: 12px" header="预览前 50 条">
+        <vxe-grid :columns="previewColumns" :data="previewData" size="mini" border />
+      </ele-card>
+    </div>
+    <template #footer>
+      <el-button @click="onClose">取消</el-button>
+      <el-button type="primary" :disabled="!canImport" @click="commitImport">确认导入</el-button>
+    </template>
+  </ele-modal>
+  <ele-modal :model-value="configVisible" title="配置导入列表" :width="640" @update:modelValue="updateConfigVisible">
+    <div class="config-wrap">
+      <ele-card header="可导入字段白名单">
+        <el-checkbox-group v-model="whitelist">
+          <el-checkbox v-for="f in fields" :key="f.name" :label="f.name">{{ f.label || f.name }}</el-checkbox>
+        </el-checkbox-group>
+      </ele-card>
+      <ele-card header="字段映射关系" style="margin-top: 12px">
+        <div class="mapping">
+          <div class="row" v-for="f in whitelist" :key="f">
+            <span class="label">{{ getFieldLabel(f) }}</span>
+            <el-input v-model="mapping[f]" placeholder="Excel列名" style="width: 240px" />
+          </div>
+        </div>
+      </ele-card>
+    </div>
+    <template #footer>
+      <el-button @click="updateConfigVisible(false)">取消</el-button>
+      <el-button type="primary" @click="saveConfig">保存</el-button>
+    </template>
+  </ele-modal>
+  <ele-modal
+    :model-value="historyVisible"
+    title="导入历史"
+    :width="800"
+    @update:modelValue="(v) => (historyVisible = v)"
+  >
+    <div class="history-wrap">
+      <vxe-grid :columns="historyColumns" :data="historyList" size="mini" border>
+        <template #op="{ row }">
+          <el-space :size="6">
+            <el-button size="small" plain @click="downloadHistoryFile(row)">下载文件</el-button>
+            <el-button size="small" plain @click="restoreHistoryFile(row)">恢复导入</el-button>
+            <el-button size="small" plain type="danger" @click="deleteHistoryFile(row)">删除文件</el-button>
+          </el-space>
+        </template>
+      </vxe-grid>
+    </div>
+    <template #footer>
+      <el-button @click="historyVisible = false">关闭</el-button>
+    </template>
+  </ele-modal>
+</template>
+<script setup>
+  import { ref, computed } from 'vue';
+  import { ElMessage } from 'element-plus/es';
+  import { EleMessage } from '@/components/ele-admin-plus/components';
+  import { UploadFilled } from '@element-plus/icons-vue';
+  import SohelpHttp from '../http/SohelpHttp.js';
+
+  const MAX_ROWS = 10000;
+
+  const props = defineProps({
+    modelValue: Boolean,
+    refid: {
+      type: String,
+      required: true
+    },
+    fields: {
+      type: Array,
+      default: () => []
+    }
+  });
+  const emit = defineEmits(['update:modelValue', 'close']);
+
+  const loading = ref(false);
+  const fileName = ref('');
+  const fileSize = ref(0);
+  const progress = ref(0);
+  const progressStatus = ref('success');
+  const rowCount = ref(0);
+  const fileId = ref('');
+  const previewVisible = ref(false);
+  const previewData = ref([]);
+  const previewColumns = ref([]);
+
+  const configVisible = ref(false);
+  const whitelist = ref([]);
+  const mapping = ref({});
+  const historyVisible = ref(false);
+  const historyList = ref([]);
+  const downloadingTemplate = ref(false);
+  const historyColumns = ref([
+    { field: 'file', title: '文件名', align: 'center', minWidth: 160 },
+    { field: 'size', title: '大小', align: 'center', minWidth: 100 },
+    { field: 'rows', title: '记录数', align: 'center', minWidth: 90 },
+    { field: 'upload_user', title: '导入人员', align: 'center', minWidth: 120 },
+    { field: 'update_time', title: '导入时间', align: 'center', minWidth: 180 },
+    { field: 'op', title: '操作', align: 'center', minWidth: 220, slots: { default: 'op' } }
+  ]);
+
+  const canImport = computed(() => !!fileId.value && rowCount.value > 0 && rowCount.value <= MAX_ROWS);
+
+  const updateModelValue = (val) => {
+    emit('update:modelValue', val);
+    if (!val) {
+      onRemove();
+    }
+  };
+
+  const onClose = () => {
+    emit('update:modelValue', false);
+    emit('close');
+    onRemove();
+  };
+
+  const formatSize = (n) => {
+    if (n < 1024) return n + 'B';
+    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + 'KB';
+    return (n / 1024 / 1024).toFixed(1) + 'MB';
+  };
+
+  const openConfig = () => {
+    if (!whitelist.value.length) {
+      whitelist.value = props.fields.map((f) => f.name);
+    }
+    if (Object.keys(mapping.value).length === 0) {
+      props.fields.forEach((f) => (mapping.value[f.name] = f.label || f.name));
+    }
+    configVisible.value = true;
+  };
+  const updateConfigVisible = (v) => (configVisible.value = v);
+  const saveConfig = () => {
+    configVisible.value = false;
+  };
+  const getFieldLabel = (name) => props.fields.find((f) => f.name === name)?.label || name;
+
+  /**
+   * 下载导入模板
+   * - 绑定click事件监听器到 button 元素
+   * - 在事件处理函数中动态获取当前列表的refid值
+   * - 构造完整下载URL：/engine/web/import/downloadTemplate?refid=${动态获取的refid}
+   * - 使用SohelpHttp.download方法发起请求，参数格式为：{refid: '动态refid值'}
+   * - 错误处理：捕获refid无效、网络错误、服务器错误，并实现重试
+   * - 用户体验：显示loading，下载进度
+   */
+  const downloadTemplate = async () => {
+    // 验证 refid 参数
+    if (!props.refid) {
+      EleMessage.error('请选择有效的模板');
+      return;
+    }
+
+    downloadingTemplate.value = true;
+    const maxRetries = 3;
+    let retryCount = 0;
+    let lastError = null;
+
+    // 错误重试机制（最多3次）
+    while (retryCount <= maxRetries) {
+      try {
+        await SohelpHttp.download(
+          '/engine/web/import/downloadTemplate',
+          { refid: props.refid },
+          '导入模板.xlsx',
+          (loaded, total) => {
+            // 大文件下载时显示进度条
+            // 这里可以对接UI的进度条，目前简单处理，如果需要更复杂的UI交互可以扩展
+            if (total > 0) {
+              const percent = Math.floor((loaded / total) * 100);
+              // console.log(`下载进度: ${percent}%`);
+            }
+          },
+          { timeout: 30000 } // 实现请求超时机制，默认设置为30秒
+        );
+        EleMessage.success('模板下载成功');
+        downloadingTemplate.value = false;
+        return;
+      } catch (error) {
+        lastError = error;
+        retryCount++;
+        if (retryCount <= maxRetries) {
+          // 简单的指数退避或固定等待
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+      }
+    }
+
+    downloadingTemplate.value = false;
+    // 错误处理机制
+    const errorMsg = String(lastError);
+    if (errorMsg.includes('timeout') || errorMsg.includes('Network Error')) {
+      EleMessage.error('网络连接异常，请稍后重试');
+    } else {
+      EleMessage.error(errorMsg || '下载失败');
+    }
+  };
+
+  const onDrop = async (e) => {
+    const file = e.dataTransfer.files?.[0];
+    if (file) await handleFile(file);
+  };
+  const onFileChange = async (file) => {
+    const f = file?.raw || file;
+    if (f) await handleFile(f);
+  };
+  const onRemove = () => {
+    fileName.value = '';
+    fileSize.value = 0;
+    progress.value = 0;
+    rowCount.value = 0;
+    previewVisible.value = false;
+    fileId.value = '';
+    previewData.value = [];
+    previewColumns.value = [];
+    progressStatus.value = 'success';
+    loading.value = false;
+  };
+
+  const handleFile = async (file) => {
+    const ext = file.name.toLowerCase().split('.').pop();
+    if (!['xls', 'xlsx'].includes(ext)) {
+      ElMessage.error('仅支持 .xls 或 .xlsx 文件');
+      return;
+    }
+    if (file.size > 50 * 1024 * 1024) {
+      ElMessage.error('文件大小超过 50MB 限制');
+      return;
+    }
+    fileName.value = file.name;
+    fileSize.value = file.size;
+    progress.value = 10;
+    const form = new FormData();
+    form.append('refid', props.refid);
+    form.append('file', file);
+    try {
+      const res = await SohelpHttp.post('/engine/web/import/upload', form);
+      if (!res.meta.success) {
+        progressStatus.value = 'exception';
+        ElMessage.error(res.meta.message || '上传失败');
+        return;
+      }
+      fileId.value = res.data?.fileId || '';
+      rowCount.value = res.data?.rows || 0;
+      if (rowCount.value > MAX_ROWS) {
+        progressStatus.value = 'exception';
+        ElMessage.error('超过最大行数限制（10,000）');
+        return;
+      }
+      progress.value = 60;
+      await loadPreview();
+      progress.value = 100;
+      progressStatus.value = 'success';
+      // 默认不显示预览数据
+      previewVisible.value = false;
+    } catch (e) {
+      progressStatus.value = 'exception';
+      ElMessage.error(String(e));
+    }
+  };
+
+  const togglePreview = () => {
+    previewVisible.value = !previewVisible.value;
+  };
+  const downloadProcessed = () => {
+    if (!fileId.value) {
+      ElMessage.error('请先上传导入文件');
+      return;
+    }
+    SohelpHttp.download(
+      '/engine/web/import/download',
+      { fileId: fileId.value },
+      fileName.value || '导入数据.xlsx'
+    ).catch((e) => ElMessage.error(String(e)));
+  };
+  const viewHistory = async () => {
+    try {
+      const res = await SohelpHttp.get('/engine/web/import/history', { refid: props.refid });
+      if (res.meta.success) {
+        const list = res.data?.results || [];
+        historyList.value = list;
+        historyVisible.value = true;
+      } else {
+        ElMessage.error(res.meta.message || '获取历史失败');
+      }
+    } catch (e) {
+      ElMessage.error(String(e));
+    }
+  };
+  const commitImport = async () => {
+    if (!canImport.value) {
+      ElMessage.error('请上传有效的导入文件');
+      return;
+    }
+    const loadingTip = EleMessage.loading('导入中..');
+    try {
+      loading.value = true;
+      const res = await SohelpHttp.post('/engine/web/import/confirm', { fileId: fileId.value, refid: props.refid });
+      if (res.meta.success) {
+        ElMessage.success(res.meta.message || '导入完成');
+        emit('update:modelValue', false);
+      } else {
+        ElMessage.error(res.meta.message || '导入失败');
+      }
+    } catch (e) {
+      ElMessage.error(String(e));
+    } finally {
+      loadingTip.close();
+      loading.value = false;
+    }
+  };
+
+  const loadPreview = async () => {
+    try {
+      const res = await SohelpHttp.get('/engine/web/import/preview', { refid: props.refid, fileId: fileId.value });
+      if (res.meta.success) {
+        const rows = Array.isArray(res.data.results) ? res.data.results : [];
+        previewData.value = rows.slice(0, 50);
+        const keys = rows.length
+          ? Object.keys(rows[0])
+          : whitelist.value.length
+            ? whitelist.value
+            : props.fields.map((f) => f.name);
+        previewColumns.value = keys.map((k) => ({
+          field: k,
+          title: getFieldLabel(k),
+          align: 'center',
+          minWidth: 120
+        }));
+        // previewVisible.value = true; // 加载数据后不自动显示
+      } else {
+        ElMessage.error(res.meta.message || '预览失败');
+      }
+    } catch (e) {
+      ElMessage.error(String(e));
+    }
+  };
+
+  const downloadHistoryFile = (row) => {
+    SohelpHttp.download('/engine/web/import/download', { fileId: row.file_uuid }, row.file).catch((e) =>
+      ElMessage.error(String(e))
+    );
+  };
+  const restoreHistoryFile = async (row) => {
+    try {
+      const res = await SohelpHttp.post('/engine/web/import/restore', { fileId: row.file_uuid, refid: props.refid });
+      if (res.meta.success) {
+        ElMessage.success(res.meta.message || '恢复成功');
+      } else {
+        ElMessage.error(res.meta.message || '恢复失败');
+      }
+    } catch (e) {
+      ElMessage.error(String(e));
+    }
+  };
+  const deleteHistoryFile = async (row) => {
+    try {
+      const res = await SohelpHttp.post('/engine/web/import/delete', { fileId: row.file_uuid, refid: props.refid });
+      if (res.meta.success) {
+        ElMessage.success(res.meta.message || '删除成功');
+        await viewHistory();
+      } else {
+        ElMessage.error(res.meta.message || '删除失败');
+      }
+    } catch (e) {
+      ElMessage.error(String(e));
+    }
+  };
+</script>
+<style scoped lang="scss">
+  .import-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .import-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .actions {
+    display: flex;
+    gap: 10px;
+  }
+  .actions :deep(.el-button:hover) {
+    opacity: 0.9;
+  }
+  .upload-area {
+    min-width: 300px;
+    min-height: 200px;
+    border: 1px dashed #bbb;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 6px;
+  }
+  .uploader {
+    width: 100%;
+  }
+  .status {
+    width: 100%;
+    margin-top: 10px;
+  }
+  .result-actions {
+    display: flex;
+    gap: 10px;
+  }
+  .config-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .mapping {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .mapping .row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .mapping .label {
+    width: 160px;
+  }
+  .history-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+</style>

package/sohelp-modal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ele-modal v-bind="$attrs" v-model="modelValue">
+  <ele-modal v-bind="$attrs" v-model="modelValue" :close-on-click-modal="closeOnClickModal">
     <template #header>
       <div class="modal-header">
         <slot name="header">
@@ -17,8 +17,8 @@
 
     <template #footer>
       <slot name="footer" v-if="showFooter">
-        <el-button type="primary" @click="confirm">确认</el-button>
         <el-button @click="cancel">关闭</el-button>
+        <el-button type="primary" @click="confirm">确认</el-button>
       </slot>
     </template>
   </ele-modal>
@@ -30,10 +30,15 @@
     showFooter: {
       type: Boolean,
       default: true
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
     }
   });
 
   const confirm = () => {
+    close();
     emit('confirm');
   };
   const cancel = () => {

package/sohelp-page/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <ele-page :flex-table="true" :hide-footer="true" v-bind="$attrs" v-on="$attrs">
+    <slot></slot>
+  </ele-page>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/sohelp-pro-form/components/pro-form-item.vue

@@ -326,6 +326,7 @@
       v-bind="item.props || {}"
       @="item.props || {}"
       v-model="model[item.prop]"
+      :disabled="readonly"
     >
     </SohelpRichText>
 

package/sohelp-rich-text/index.vue

@@ -5,15 +5,7 @@
 </template>
 
 <script setup>
-  import {
-    watch,
-    onMounted,
-    onBeforeUnmount,
-    onActivated,
-    onDeactivated,
-    nextTick,
-    useAttrs
-  } from 'vue';
+  import { watch, onMounted, onBeforeUnmount, onActivated, onDeactivated, nextTick, useAttrs } from 'vue';
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
   import 'tinymce/icons/default';
@@ -46,13 +38,7 @@
   import 'tinymce/plugins/emoticons/js/emojis';
   import { storeToRefs } from 'pinia';
   import { useThemeStore } from '@/store/modules/theme';
-  import {
-    DEFAULT_CONFIG,
-    DARK_CONFIG,
-    uuid,
-    bindHandlers,
-    openAlert
-  } from './util';
+  import { DEFAULT_CONFIG, DARK_CONFIG, uuid, bindHandlers, openAlert } from './util';
 
   const props = defineProps({
     /** 编辑器唯一id */
@@ -106,11 +92,7 @@
 
   /** 修改内容 */
   const setContent = (value) => {
-    if (
-      editorIns &&
-      typeof value === 'string' &&
-      value !== editorIns.getContent()
-    ) {
+    if (editorIns && typeof value === 'string' && value !== editorIns.getContent()) {
       editorIns.setContent(value);
     }
   };

package/sohelp-vxe-grid/DefaultGridOptions.js

@@ -3,55 +3,73 @@
  */
 export default {
   loading: false,
+  showFooter: false,
+  round: true,
+  border: true,
+  stripe: true,
+  maxHeight: '100%',
+  size: 'mini',
+  minHeight: 200,
+  params: {},
+  columnConfig: {
+    resizable: true
+  },
   customConfig: {
-    //默认不会将列设置保存到本地存储中
-    storage: false,
-    placement: "top-right" // 自定义列工具栏位置
+    immediate: false,
+    isCurrent: false,
+    resizable: true,
+    storage: {
+      visible: true, // 保存列显示/隐藏状态
+      resizable: true, // 保存列宽调整
+      sort: true, // 保存列排序
+      fixed: true
+    },
+    slots: {
+      header: 'setting'
+    }
   },
-  params: {},
   rowConfig: {
-    useKey: true,
-    //sortable 排序
-    // sHover: true,
-    // isCurrent: true,
-    drag: true,
-    keyField: "id"
+    useKey: true, //sortable 排序
+    isHover: true,
+    isCurrent: true,
+    resizable: false,
+    drag: true
   },
   rowDragConfig: {
-    trigger: "cell",
     showGuidesStatus: true
   },
+  editConfig: {
+    trigger: 'click',
+    mode: 'cell',
+    autoClear: false,
+    autoFocus: true,
+    showInsertStatus: true,
+    showUpdateStatus: true
+  },
   keyboardConfig: {
     isEdit: true,
     isArrow: true,
     isEnter: true,
     isTab: true,
     isDel: true,
-    isBack: true
+    isBack: true,
+    editMode: 'insert'
   },
   mouseConfig: {
     selected: true
   },
   checkboxConfig: {
-    checkRowKey: "id",
     highlight: true,
     range: true,
-    trigger: "row", // 关键配置：点击行触发选中
-    reserve: true // 跨页保留选中状态
+    reserve: true
   },
   radioConfig: {
     strict: false,
     checkRowKey: "id",
     highlight: true,
     reserve: true,
-    trigger: "row" // 关键配置：点击行触发选中
+    trigger: "cell" // 关键配置：点击行触发选中
   },
-  border: true,
-  stripe: true,
-  loading: false,
-  minHeight: 200,
-  maxHeight: "100%",
-  size: "mini",
   pagerConfig: {
     enabled: true,
     total: 0,
@@ -59,10 +77,7 @@ export default {
     pageSize: 50,
     align: "right"
   },
-  columnConfig: {
-    resizable: true,
-    isCurrent: false
-  },
+
   formConfig: {
     data: {},
     items: []
@@ -86,5 +101,15 @@ export default {
       options: []
     }
   },
+  scrollX: {
+    gt: 0,
+    //自动启用纵向虚拟滚动
+    enabled: true
+  },
+  scrollY: {
+    gt: 0,
+    //自动启用纵向虚拟滚动
+    enabled: true
+  },
   columns: []
 };