sohelp-eleplus 1.1.18 → 1.1.20

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

@@ -25,6 +25,7 @@
     <!-- advanced -->
     <div class="advanced-box" ref="advancedBoxRef">
       <filter-condition-item
+        @search="filter"
         v-for="(item, index) in getFilterList"
         :key="item.name"
         v-model="filterValue.filter[index]"
@@ -37,8 +38,8 @@
         v-if="filterList.length > 0 && config.filter?.config.filterPosition !== 'MODAL'"
         ref="searchButtonRef"
       >
-        <el-button size="small" plain @click="reset">{{ t('grid.toolbar.reset') }}</el-button>
-        <el-button type="primary" size="small" @click="filter">{{ t('grid.toolbar.filter') }}</el-button>
+        <el-button size="small" plain @click="reset" :icon="Refresh">{{ t('grid.toolbar.reset') }}</el-button>
+        <el-button type="primary" size="small" @click="filter" :icon="Search">{{ t('grid.toolbar.filter') }}</el-button>
         <el-link
           plain
           @click="toggleFilter"
@@ -58,11 +59,11 @@
 </template>
 
 <script setup>
-  import { computed, nextTick, onMounted, reactive, ref, onBeforeUnmount } from 'vue';
+  import { computed, nextTick, onMounted, reactive, ref, onBeforeUnmount, watch } from 'vue';
   import FilterConditionItem from '../../sohelp-grid/components/filter-condition-item.vue';
   import { useMobile } from '@/utils/use-mobile';
   import { useI18n } from 'vue-i18n';
-  import { Plus, Minus } from '@element-plus/icons-vue';
+  import { Plus, Minus, Search, Refresh } from '@element-plus/icons-vue';
 
   const { mobile } = useMobile();
   const { t } = useI18n();
@@ -159,16 +160,10 @@
   });
 
   const load = () => {
-    maxRowsConfig.width = advancedBoxRef.value?.offsetWidth || 160;
-    maxRowsConfig.current = findAccumulateIndex(maxRowsConfig.itemWidth, maxRowsConfig.width * maxRowsConfig.maxRows);
-  };
-
-  onMounted(() => {
-    loading.value = true;
-    nextTick(() => {
-      loading.value = false;
-      // 高级筛选高度
-      maxRowsConfig.height = advancedBoxRef.value.offsetHeight + 'px';
+    const { filterPosition } = config.value.filter?.config;
+    if (filterPosition?.toUpperCase() === 'TOP') {
+      maxRowsConfig.current.index = filterList.value.length;
+      maxRowsConfig.height = advancedBoxRef.value?.offsetHeight + 'px';
       const advancedRow = advancedBoxRef.value.querySelector('.sohelp-filter-condition');
       if (advancedRow) {
         maxRowsConfig.rowHeight = advancedRow.offsetHeight;
@@ -176,8 +171,22 @@
       nextTick(() => {
         maxRowsConfig.searchButtonWidth = searchButtonRef.value?.offsetWidth + 35;
         maxRowsConfig.itemWidth = getAllHeights();
-        load();
+
+        maxRowsConfig.width = advancedBoxRef.value?.offsetWidth || 160;
+        maxRowsConfig.current = findAccumulateIndex(
+          maxRowsConfig.itemWidth,
+          maxRowsConfig.width * maxRowsConfig.maxRows
+        );
       });
+    }
+  };
+
+  onMounted(() => {
+    loading.value = true;
+    nextTick(() => {
+      loading.value = false;
+      // 高级筛选高度
+      load();
     });
   });
 
@@ -229,6 +238,17 @@
   onBeforeUnmount(() => {
     removeEventListener('resize', () => {});
   });
+
+  watch(
+    () => config.value.filter.config.filterPosition,
+    (val) => {
+      if (val.toUpperCase() === 'TOP') {
+        nextTick(() => {
+          load();
+        });
+      }
+    }
+  );
 </script>
 <script>
   export default {
@@ -279,11 +299,12 @@
     .scheme-box {
       padding-top: 10px;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       gap: 10px;
 
       .scheme-list {
         display: flex;
+        gap: 5px;
       }
     }
 
@@ -377,6 +398,10 @@
       bottom: 0px;
       position: absolute;
     }
+
+    .scheme-box {
+      flex-direction: column;
+    }
   }
 
   .sohelp-filter.right .sohelp-filter-condition {

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

@@ -4,6 +4,7 @@
   import { computed, ref } from 'vue';
   import FilterConfig from './config/index.vue';
   import { useI18n } from 'vue-i18n';
+  import { Search, Refresh } from '@element-plus/icons-vue';
 
   const emit = defineEmits('change', 'filter', 'update:modelValue', 'close', 'reset', 'save', 'changeFilterScheme');
 
@@ -73,7 +74,7 @@
     }"
     :class="['sohelp-filter-card', config.filter.config.filterPosition]"
     :header="t('grid.toolbar.adv_filter')"
-    :headerStyle="{ padding: '0 10px 10px 0' }"
+    :headerStyle="{ padding: '0 0 5px 0', fontWeight: 'normal', fontSize: '14px' }"
     :bodyStyle="{ padding: '0', height: 'calc(100% - 40px)', background: '#fff' }"
   >
     <template #extra>
@@ -143,8 +144,10 @@
     ></filter-form>
     <template #footer>
       <div class="footer-right" v-if="config.filter.config.filterPosition !== 'TOP'">
-        <el-button size="small" plain @click="reset">{{ t('grid.toolbar.reset') }}</el-button>
-        <el-button type="primary" size="small" @click="filter(false)">{{ t('grid.toolbar.filter') }}</el-button>
+        <el-button size="small" plain @click="reset" :icon="Refresh">{{ t('grid.toolbar.reset') }}</el-button>
+        <el-button type="primary" size="small" @click="filter(false)" :icon="Search">{{
+          t('grid.toolbar.filter')
+        }}</el-button>
       </div>
     </template>
   </ele-modal>

package/sohelp-grid-view/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from "vue";
   import { useMobile } from '@/utils/use-mobile';
   import SohelpFilter from './filter/index.vue';
   import SohelpGrid from '../sohelp-grid/index.vue';
@@ -128,19 +128,28 @@
 
   /**
    * 查询数据
-   * @param param 区分是高级筛选，还是列筛选
+   * @param params 区分是高级筛选，还是列筛选
    */
-  const reload = (param = {}, callback) => {
-    sohelpGridRef.value.reload(param, callback);
+  const reload = (params = {}, callback) => {
+    sohelpGridRef.value.reload(params, callback);
   };
-  const load = (param = {}, callback) => {
-    sohelpGridRef.value.load(param, callback);
+  /**
+   * 加载数据
+   * @param params
+   * @param callback
+   */
+  const load =  (params = {}, callback) => {
+       sohelpGridRef.value.load(params, callback);
   };
+  /**
+   * 刷新数据
+   */
   const refresh = () => {
     sohelpGridRef.value.refresh();
   };
 
   const changeFilterScheme = (schemeValue, filterValue) => {
+    sohelpGridRef.value.reload({});
     emit('changeFilterScheme', schemeValue, filterValue);
   };
   /**

package/sohelp-icon-select/index.vue

@@ -4,9 +4,9 @@
     placeholder="请选择图标"
     filterable
     class="sohelp-icon-select"
-    width="100%"
-    style="min-width: 60px"
     clearable
+    fit-input-width
+    style="min-width: 60px; width: 100%"
   >
     <template #prefix>
       <el-icon :size="14" color="#666" style="margin-right: 5px">

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 type="primary" plain :loading="downloadingTemplate" @click="downloadTemplate">下载导入模板</el-button>
+          <el-button plain @click="openConfig">配置导入列表</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>