sohelp-eleplus 1.1.19 → 1.1.20

package/sohelp-grid/js/DefaultGridOptions.js

@@ -1,15 +1,28 @@
 export default {
-  id: 'sohelp-grid',
+  showFooter: false,
+  round: true,
+  border: true,
+  stripe: true,
+  loading: false,
+  minHeight: 300,
+  maxHeight: '100%',
+  size: 'mini',
+  params: {},
+  columnConfig: {
+    resizable: true,
+    drag: false
+  },
   customConfig: {
     //默认不会将列设置保存到本地存储中
     storage: false,
     placement: 'top-right' // 自定义列工具栏位置
   },
   rowConfig: {
+    keyField: 'id',
     useKey: true, //sortable 排序
-    sHover: true,
+    isHover: true,
     isCurrent: true,
-    resizable: true,
+    resizable: false,
     drag: true
   },
   rowDragConfig: {
@@ -51,6 +64,13 @@ export default {
     range: true,
     reserve: true
   },
+  radioConfig: {
+    strict: false,
+    checkRowKey: 'id',
+    highlight: true,
+    reserve: true,
+    trigger: 'cell' // 关键配置：点击行触发选中
+  },
   scrollX: {
     gt: 0,
     //自动启用纵向虚拟滚动
@@ -61,15 +81,6 @@ export default {
     //自动启用纵向虚拟滚动
     enabled: true
   },
-  showFooter: false,
-  round: true,
-  border: true,
-  stripe: false,
-  loading: false,
-  minHeight: 300,
-  maxHeight: '100%',
-  size: 'mini',
-  params: {},
   pagerConfig: {
     enabled: true,
     total: 0,
@@ -79,6 +90,8 @@ export default {
   },
   customConfig: {
     immediate: false,
+    isCurrent: true,
+    resizable: true,
     storage: {
       visible: true, // 保存列显示/隐藏状态
       resizable: true, // 保存列宽调整
@@ -89,10 +102,6 @@ export default {
       header: 'setting'
     }
   },
-  columnConfig: {
-    isCurrent: true,
-    resizable: true
-  },
   sortConfig: {
     remote: true
   },

package/sohelp-grid/js/useSohelpGridConfig.js

@@ -1,9 +1,9 @@
-import { reactive, ref } from "vue";
-import _DefaultGridOptions from "../js/DefaultGridOptions";
-import { moduleCache } from "../../cache/ModuleCache";
-import { usePermission } from "@/utils/use-permission";
-import { useMobile } from "@/utils/use-mobile";
-import { useI18n } from "vue-i18n";
+import { reactive, ref } from 'vue';
+import _DefaultGridOptions from '../js/DefaultGridOptions';
+import { moduleCache } from '../../cache/ModuleCache';
+import { usePermission } from '@/utils/use-permission';
+import { useMobile } from '@/utils/use-mobile';
+import { useI18n } from 'vue-i18n';
 
 /**
  * 深拷贝
@@ -19,27 +19,27 @@ function createDynamicStyle(styleConfigs = [], isCell = true) {
   // 预编译条件表达式为函数
   const compiledConfigs = styleConfigs.map((config) => ({
     ...config,
-    conditionFn: new Function("row", `return ${config.condition}`)
+    conditionFn: new Function('row', `return ${config.condition}`)
   }));
 
-  return function({ row, column }) {
+  return function ({ row, column }) {
     const _config = isCell ? compiledConfigs.filter((c) => c.name === column.field) : compiledConfigs;
     if (!_config || !_config.length) return null;
     try {
       for (const config of _config) {
-        const conditionFn = new Function("row", `return ${config.condition}`);
+        const conditionFn = new Function('row', `return ${config.condition}`);
         if (conditionFn(row)) {
           return {
             color: config.fontColor,
             backgroundColor: config.bgColor,
-            fontWeight: config?.bold ? "bold" : "",
-            fontStyle: config.italic ? "italic" : "",
-            textDecoration: config.strikethrough ? "line-through" : config.underline ? "underline" : ""
+            fontWeight: config?.bold ? 'bold' : '',
+            fontStyle: config.italic ? 'italic' : '',
+            textDecoration: config.strikethrough ? 'line-through' : config.underline ? 'underline' : ''
           };
         }
       }
     } catch (e) {
-      console.error("条件解析错误:", e);
+      console.error('条件解析错误:', e);
     }
     return null;
   };
@@ -64,8 +64,8 @@ const switchVxeProperty = (property, sortList, f, formulaMap) => {
     query: property.query,
     width: property.width || 120,
     type: property.editor || property.type,
-    align: property.align || "left",
-    titleSuffix: property.tooltip ? { content: property.tooltip, placement: "top" } : "",
+    align: property.align || 'left',
+    titleSuffix: property.tooltip ? { content: property.tooltip, placement: 'top' } : '',
 
     showOverflow: true,
     editRender: {
@@ -75,13 +75,13 @@ const switchVxeProperty = (property, sortList, f, formulaMap) => {
     },
     fixed: !property.lock ? false : property.lockAlign,
     slots: {
-      default: "default_" + property.name,
-      header: "header_" + property.name
+      default: 'default_' + property.name,
+      header: 'header_' + property.name
     },
     contentRender: {
       name: property.render,
       props: property.renderParam || {},
-      event: "event"
+      event: 'event'
     }
   };
 
@@ -90,22 +90,22 @@ const switchVxeProperty = (property, sortList, f, formulaMap) => {
   }
 
   if (property.dict) {
-    editor.editRender["code"] = property.dict;
+    editor.editRender['code'] = property.dict;
   }
 
   // 取默认显示值
-  if (property.type === "RELATION" && editor.labelField === "") {
-    const fields = property.relationList?.split(",");
-    editor.labelField = fields.includes("id") && fields.length > 1 ? fields[1] : fields[0];
+  if (property.type === 'RELATION' && editor.labelField === '') {
+    const fields = property.relationList?.split(',');
+    editor.labelField = fields.includes('id') && fields.length > 1 ? fields[1] : fields[0];
   }
 
   // 自定义编辑插槽
   if (property.edit) {
-    editor.slots.edit = "edit_" + property.name;
+    editor.slots.edit = 'edit_' + property.name;
   }
 
   if (
-    ["SohelpImageUpload", "SohelpFileUpload", "SohelpRate", "SohelpSwitch", "SohelpProcess"].includes(property.editor)
+    ['SohelpImageUpload', 'SohelpFileUpload', 'SohelpRate', 'SohelpSwitch', 'SohelpProcess'].includes(property.editor)
   ) {
     delete editor.slots.edit; //不渲染编辑
     editor.editRender.enabled = false;
@@ -120,16 +120,16 @@ const switchVxeProperty = (property, sortList, f, formulaMap) => {
   const isSummary = f.find((item) => item.field === property.name);
 
   if (isSummary) {
-    editor.slots["footer"] = "footer_" + property.name;
+    editor.slots['footer'] = 'footer_' + property.name;
   }
 
   // 排序
   if (sortList?.includes(property.name)) {
-    editor["sortable"] = true;
+    editor['sortable'] = true;
   }
 
-  if (property.name === "id") {
-    editor["width"] = 150;
+  if (property.name === 'id') {
+    editor['width'] = 150;
   }
 
   return editor;
@@ -139,11 +139,11 @@ const switchVxeProperty = (property, sortList, f, formulaMap) => {
  * 筛选配置
  */
 const switchFilterConfig = (editor) => {
-  editor.filters = [{ data: "", checked: false }];
+  editor.filters = [{ data: '', checked: false }];
   editor.filterRender = {};
   editor.slots = {
     ...editor.slots,
-    filter: "filter_" + editor.field
+    filter: 'filter_' + editor.field
   };
 };
 
@@ -168,7 +168,7 @@ const filterFieldsByProperties = (_data) => {
   });
 
   data.filter.keywords = filterArray(data.filter.keywords);
-  data.filter.field = filterArray(data.filter.field, "name");
+  data.filter.field = filterArray(data.filter.field, 'name');
 
   //过滤掉不在列表中的sort属性
   data.filter.sort = filterArray(data.filter.sort.filter((item) => data.filter.field.some((f) => f.name === item)));
@@ -180,14 +180,14 @@ const filterFieldsByProperties = (_data) => {
  * 工具栏默认图标
  */
 const defaultIcons = {
-  "crud.edit": "vxe-icon-edit",
-  "crud.delete": "vxe-icon-delete",
-  "crud.create": "vxe-icon-add",
-  "crud.save": "vxe-icon-save",
-  "crud.view": "vxe-icon-eye-fill",
-  "workflow.submit": "vxe-icon-success-circle",
-  "workflow.view": "vxe-icon-file-txt",
-  "report.print": "vxe-icon-print"
+  'crud.edit': 'vxe-icon-edit',
+  'crud.delete': 'vxe-icon-delete',
+  'crud.create': 'vxe-icon-add',
+  'crud.save': 'vxe-icon-save',
+  'crud.view': 'vxe-icon-eye-fill',
+  'workflow.submit': 'vxe-icon-success-circle',
+  'workflow.view': 'vxe-icon-file-txt',
+  'report.print': 'vxe-icon-print'
 };
 
 /**
@@ -209,11 +209,11 @@ const getToolbarsButtons = (data) => {
     const formatterButton = (arr, type) => {
       return arr.map((item) => {
         let params = {};
-        if (item.params && typeof item.params === "string") {
+        if (item.params && typeof item.params === 'string') {
           try {
             params = JSON.parse(item.params);
           } catch (e) {
-            console.error("FormatterButton Error:", e);
+            console.error('FormatterButton Error:', e);
             params = {};
           }
         }
@@ -237,16 +237,16 @@ const getToolbarsButtons = (data) => {
     let arr = [...formatterButton(common)];
     if (more.length > 0) {
       arr.push({
-        code: "more",
-        name: "更多操作",
+        code: 'more',
+        name: '更多操作',
         dropdowns: formatterButton(more)
       });
     }
     if (batch.length > 0) {
       arr.push({
-        code: "batchMore",
-        name: "批量操作",
-        dropdowns: formatterButton(batch, "batch"),
+        code: 'batchMore',
+        name: '批量操作',
+        dropdowns: formatterButton(batch, 'batch'),
         disabled: true
       });
     }
@@ -288,9 +288,9 @@ export function useSohelpGridConfig() {
    * 初始化商邦网格列表配置
    */
   const initial = async (isGridConfig, refid) => {
-    if (!refid) throw new Error("配置列表请配置地址!");
+    if (!refid) throw new Error('配置列表请配置地址!');
     let _refid = refid;
-    if (_refid.indexOf("!") === -1) _refid = refid + "!default";
+    if (_refid.indexOf('!') === -1) _refid = refid + '!default';
 
     isConfigInitialized.value = false;
     const permission = usePermission();
@@ -302,7 +302,7 @@ export function useSohelpGridConfig() {
     const config = isGridConfig ? await moduleCache.getGrid(_refid) : await moduleCache.getEntityGrid(_refid);
 
     if (!config) {
-      throw new Error(_refid + " : 没有发现网格列表配置!");
+      throw new Error(_refid + ' : 没有发现网格列表配置!');
     }
 
     try {
@@ -311,11 +311,11 @@ export function useSohelpGridConfig() {
         propertiesMap,
         (SohelpConfig?.properties || []).reduce((acc, cur) => {
           let param = {};
-          if (cur?.editorParam && typeof cur.editorParam === "string") {
+          if (cur?.editorParam && typeof cur.editorParam === 'string') {
             try {
               param = JSON.parse(cur.editorParam);
             } catch (e) {
-              console.error("解析editorParam失败:", e);
+              console.error('解析editorParam失败:', e);
             }
           }
           acc[cur.name] = { ...cur, editorParam: param };
@@ -343,14 +343,14 @@ export function useSohelpGridConfig() {
         DefaultGridOptions.toolbarConfig.buttons = buttons;
         // 更多下拉菜单索引
         batchButtonsIndex = buttons.reduce((acc, curr, index) => {
-          if (curr.code === "batchMore") acc.push(index);
+          if (curr.code === 'batchMore') acc.push(index);
           return acc;
         }, []);
 
         //把标题转成国际化
         buttons.forEach((item) => {
-          const code = item.code.replace(".", "-");
-          const i18nKey = item.i18n === "" || code !== "custom" ? "grid.toolbar." + code : item.i18n;
+          const code = item.code.replace('.', '-');
+          const i18nKey = item.i18n === '' || code !== 'custom' ? 'grid.toolbar.' + code : item.i18n;
           if (i18nKey) {
             const i18n = t(i18nKey);
             item.name = i18n ? i18n : item.name;
@@ -359,38 +359,60 @@ export function useSohelpGridConfig() {
       }
 
       //初始化属性列表配置
-      let columns = [
-        {
-          field: "_checkbox",
-          title: "",
-          fixed: mobile.value ? false : "left",
-          type: "checkbox",
-          align: "center",
+      let columns = [];
+
+      //是否支持选择
+      if (config?.selectionType === 'checkbox') {
+        columns.push({
+          field: '_checkbox',
+          title: '',
+          fixed: mobile.value ? false : 'left',
+          type: 'checkbox',
+          align: 'center',
           width: 40
-        },
-        {
-          field: "_seq",
-          type: "seq",
-          title: "#",
-          fixed: mobile.value ? false : "left",
-          align: "center",
+        });
+      }
+
+      if (config?.selectionType === 'radio') {
+        columns.push({
+          field: '_radio',
+          title: '',
+          fixed: mobile.value ? false : 'left',
+          type: 'radio',
+          align: 'center',
           width: 40
-        }
-      ];
+        });
+      }
+
+      //是否显示行号
+      if (config?.rowNumber) {
+        columns.push({
+          field: '_seq',
+          type: 'seq',
+          title: '#',
+          fixed: mobile.value ? false : 'left',
+          align: 'center',
+          width: 40
+        });
+      }
 
-      const isRowDrag = config.rowDrag;
       //是否支持拖动
-      if (isRowDrag) {
+      if (config?.rowDrag) {
         columns.unshift({
-          title: "",
-          fixed: mobile.value ? false : "left",
+          title: '',
+          fixed: mobile.value ? false : 'left',
           width: 40,
-          align: "center",
+          align: 'center',
           dragSort: true,
-          field: "_drag"
+          field: '_drag'
         });
       }
 
+      //列拖动
+      if (config?.columnDrag) {
+        DefaultGridOptions.columnConfig.drag = true;
+      }
+
       const requireData = {};
       //商邦列转换成Vxe列
       if (SohelpConfig.properties?.length > 0) {
@@ -402,10 +424,10 @@ export function useSohelpGridConfig() {
           row.visible = SohelpConfig.list.includes(item.name);
           row.fixed = mobile.value ? false : row.fixed;
           // 添加操作栏插槽
-          if (item.name === "_operation") {
+          if (item.name === '_operation') {
             row.visible = true;
             row.slots = {
-              default: "_operation"
+              default: '_operation'
             };
           }
 
@@ -416,22 +438,22 @@ export function useSohelpGridConfig() {
             requireData[item.name] = [
               {
                 required: true,
-                message: row.title + "不能为空"
+                message: row.title + '不能为空'
               }
             ];
           }
         });
 
         //没有工具栏则不显示操作拦
-        if (config?.operationToolbars?.length == 0) {
-          columns = columns.filter((item) => item.field != "_operation");
+        if (config?.operations?.length == 0) {
+          columns = columns.filter((item) => item.field != '_operation');
         }
 
         //将columns按照fields排序
         const sortColumns = columns
           .sort((a, b) => {
-            if (a.field === "_operation") return 1;
-            if (b.field === "_operation") return -1;
+            if (a.field === '_operation') return 1;
+            if (b.field === '_operation') return -1;
             return config.list.indexOf(a.field) - config.list.indexOf(b.field);
           })
           .sort((a, b) => {
@@ -440,8 +462,8 @@ export function useSohelpGridConfig() {
 
         //_operation列安排最后一列
         DefaultGridOptions.columns = [
-          ...sortColumns.filter((col) => col.field !== "_operation"),
-          ...sortColumns.filter((col) => col.field === "_operation")
+          ...sortColumns.filter((col) => col.field !== '_operation'),
+          ...sortColumns.filter((col) => col.field === '_operation')
         ];
         DefaultGridOptions.editRules = { ...requireData };
       }
@@ -464,7 +486,7 @@ export function useSohelpGridConfig() {
 
       // 拦截编辑
       DefaultGridOptions.editConfig.beforeEditMethod = ({ row, column }) => {
-        if (column.type === "SohelpTextarea") {
+        if (column.type === 'SohelpTextarea') {
           return false;
         }
         return true;
@@ -476,8 +498,8 @@ export function useSohelpGridConfig() {
 
       // 行列样式
       if (config.colors && config.colors.length > 0) {
-        const rowData = config.colors.filter((item) => item.type !== "c");
-        const cellData = config.colors.filter((item) => item.type === "c");
+        const rowData = config.colors.filter((item) => item.type !== 'c');
+        const cellData = config.colors.filter((item) => item.type === 'c');
         if (rowData.length > 0) {
           DefaultGridOptions.rowStyle = createDynamicRowStyle(rowData);
         } else {
@@ -488,21 +510,69 @@ export function useSohelpGridConfig() {
         }
       }
       isConfigInitialized.value = true;
+
+      //序号列配置
+      DefaultGridOptions.seqConfig = {
+        seqMethod: ({ rowIndex }) => {
+          const { pageSize, currentPage } = DefaultGridOptions.pagerConfig;
+          return (currentPage - 1) * pageSize + rowIndex + 1;
+        }
+      };
+
       //转化初始化其他参数...
     } catch (error) {
       throw error; //重新抛出错误，以便调用者可以处理它
     }
 
+    const operationsButtons = getOperationToolbars();
     return {
       gridOptions: DefaultGridOptions,
       sohelpConfig: SohelpConfig,
       propertiesMap: propertiesMap,
       batchButtonsIndex: batchButtonsIndex,
       footerData: footerData,
-      formulaMap: formulaMap
+      formulaMap: formulaMap,
+      operationsButtons: operationsButtons
     };
   };
 
+  // 操作栏按钮分类
+  const getOperationToolbars = () => {
+    const buttonsMap = {};
+    const permission = usePermission();
+    SohelpConfig.operations
+      ?.filter((f) => !f.authority || permission.hasPermission(f.authority))
+      .map((button) => {
+        const type = button.buttonType || 'common';
+        const code = button.type === 'custom' ? button.id : button.type;
+        if (!buttonsMap[type]) {
+          buttonsMap[type] = [];
+        }
+        const title = button.type === 'custom' ? button.title : t('grid.toolbar.' + button.type?.replaceAll('.', '-'));
+        let params = button.params || {};
+        if (button.params && typeof button.params === 'string') {
+          try {
+            params = JSON.parse(button.params);
+          } catch (e) {
+            params = {};
+            EleMessage.error('button.params配置JSON参数格式错误');
+          }
+        }
+        buttonsMap[type].push({
+          title: title || button.title,
+          id: button.id,
+          code: code,
+          handler: button.handler,
+          icon: button.iconCls,
+          params: params,
+          refid: button.refid,
+          openType: button.openType,
+          render: button.render
+        });
+      });
+    return buttonsMap;
+  };
+
   /**
    * 配置是否加载完成
    */

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"
@@ -62,7 +63,7 @@
   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();
@@ -298,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;
       }
     }
 
@@ -396,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');
 
@@ -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);
   };
   /**