sohelp-eleplus 1.1.27 → 1.1.28

package/sohelp-grid/js/useSohelpGridConfig.js

@@ -1,642 +1,641 @@
-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 { EleMessage } from '@/components/ele-admin-plus/components';
-
-/**
- * 深拷贝
- * @param obj
- * @returns {any}
- */
-function deepClone(obj) {
-  return JSON.parse(JSON.stringify(obj));
-}
-
-// 动态生成cellStyle函数
-function createDynamicStyle(styleConfigs = [], isCell = true) {
-  // 预编译条件表达式为函数
-  const compiledConfigs = styleConfigs.map((config) => ({
-    ...config,
-    conditionFn: new Function('$row', `return ${config.condition}`)
-  }));
-  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}`);
-        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' : ''
-          };
-        }
-      }
-    } catch (e) {
-      console.error('条件解析错误:', e);
-    }
-    return null;
-  };
-}
-
-const createDynamicCellStyle = (styleConfigs = []) => createDynamicStyle(styleConfigs, true);
-const createDynamicRowStyle = (styleConfigs = []) => createDynamicStyle(styleConfigs, false);
-
-/**
- * 商邦网格列配置列转化成VxeGrid列配置
- * @param property
- * @param sortList
- * @param f
- * @param formulaMap
- * @returns
- **/
-const switchVxeProperty = (property, sortList, f, formulaMap) => {
-  let editor = {
-    field: property.name,
-    title: property.label,
-    i18n: property.i18n,
-    query: property.query,
-    width: property.width || 120,
-    type: property.editor || property.type,
-    align: property.align || 'left',
-    titleSuffix: property.tooltip ? { content: property.tooltip, placement: 'top' } : '',
-
-    showOverflow: true,
-    editRender: {
-      enabled: property.edit,
-      edit: property.edit,
-      ...property.editorParam
-    },
-    fixed: !property.lock ? false : property.lockAlign,
-    slots: {
-      default: 'default_' + property.name,
-      header: 'header_' + property.name
-    },
-    contentRender: {
-      name: property.render,
-      props: property.renderParam || {},
-      event: 'event'
-    }
-  };
-
-  /**
-   * 自定义格式化渲然
-   */
-
-  if (property.render && property.render === 'customFormatter') {
-    delete editor.slots.default;
-    editor.type = 'html';
-    editor.formatter = function ({ row, column, cellValue }) {
-      if (property.renderParam) {
-        try {
-          const func = new Function('$row', '$column', '$value', `return ( () => { ${property.renderParam} })()`);
-          return func(row, column, cellValue);
-        } catch (e) {
-          console.error('customFormatter 执行错误:', e);
-          return cellValue; // 异常时返回原始值
-        }
-      } else {
-        return cellValue;
-      }
-    };
-  }
-
-  if (property.length > 0) {
-    editor.editRender.maxlength = property.length;
-  }
-
-  // 字典
-  if (property.type === 'SohelpDict') {
-    editor.editRender['code'] = property.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.edit) {
-    editor.slots.edit = 'edit_' + property.name;
-  }
-
-  if (
-    ['SohelpImageUpload', 'SohelpFileUpload', 'SohelpRate', 'SohelpSwitch', 'SohelpProcess'].includes(property.editor)
-  ) {
-    delete editor.slots.edit; //不渲染编辑
-    editor.editRender.enabled = false;
-  }
-
-  //筛选项配置
-  if (editor.query) {
-    switchFilterConfig(editor);
-  }
-
-  //是否统计
-  const isSummary = f.find((item) => item.field === property.name);
-
-  if (isSummary) {
-    editor.slots['footer'] = 'footer_' + property.name;
-  }
-
-  // 排序
-  if (sortList?.includes(property.name)) {
-    editor['sortable'] = true;
-  }
-
-  if (property.name === 'id') {
-    editor['width'] = 150;
-  }
-
-  return editor;
-};
-
-/**
- * 筛选配置
- */
-const switchFilterConfig = (editor) => {
-  editor.filters = [{ data: '', checked: false }];
-  editor.filterRender = {};
-  editor.slots = {
-    ...editor.slots,
-    filter: 'filter_' + editor.field
-  };
-};
-
-/**
- * properties中过滤掉删除的属性
- * @param {*} _filter
- * @returns
- */
-const filterFieldsByProperties = (_data) => {
-  const data = { ..._data };
-  const properties = new Set(data.properties?.map((item) => item.name));
-
-  const filterArray = (list, key) => {
-    return Array.isArray(list) ? list.filter((item) => properties.has(key ? item?.[key] : item)) : [];
-  };
-
-  let validProperties = Object.fromEntries(
-    data.properties?.filter((item) => item.name && !item.hidden)?.map((item) => [item.name, item.label])
-  );
-
-  data.list = filterArray(data.list).filter((item) => {
-    return item in validProperties;
-  });
-
-  data.filter.keywords = filterArray(data.filter.keywords);
-
-  //过滤掉不在列表中的sort属性
-  data.filter.sort = filterArray(data.filter.sort.filter((item) => data.list.some((f) => f === item)));
-  data.properties = data.properties?.filter((item) => item.name && !item.hidden);
-
-  data.filter.field = data.filter.field.filter((item) => {
-    return item.name in validProperties;
-  });
-
-  return 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'
-};
-
-/**
- * 格式化工具栏
- */
-const getToolbarsButtons = (data) => {
-  if (data?.length) {
-    const groupedButtons = data.reduce((acc, button) => {
-      const { buttonType } = button;
-      if (!acc[buttonType]) {
-        acc[buttonType] = [];
-      }
-
-      acc[buttonType].push(button);
-      return acc;
-    }, {});
-
-    // 按钮格式化
-    const formatterButton = (arr, type) => {
-      return arr.map((item) => {
-        let params = {};
-        if (item.params && typeof item.params === 'string') {
-          try {
-            params = JSON.parse(item.params);
-          } catch (e) {
-            console.error('FormatterButton Error:', e);
-            params = {};
-          }
-        }
-        let obj = {
-          code: item.id?.replace('-', '.') || item.type,
-          name: item.title || item.name || '',
-          id: item.id?.replace('-', '.'),
-          pno: item.pno,
-          handler: item.handler,
-          buttonType: item.buttonType,
-          icon: item.iconCls || defaultIcons[item.type],
-          refid: item.refid,
-          openType: item.openType,
-          params: params,
-          align: 'left'
-        };
-        return obj;
-      });
-    };
-
-    const { common = [], more = [], batch = [] } = groupedButtons;
-    let arr = [...formatterButton(common)];
-    if (more.length > 0) {
-      arr.push({
-        code: 'more',
-        name: '更多操作',
-        dropdowns: formatterButton(more)
-      });
-    }
-    if (batch.length > 0) {
-      arr.push({
-        code: 'batchMore',
-        name: '批量操作',
-        dropdowns: formatterButton(batch, 'batch'),
-        disabled: true
-      });
-    }
-    return arr;
-  }
-  return [];
-};
-
-/**
- * 网格列表配置
- * @returns
- */
-export function useSohelpGridConfig() {
-  /**
-   * 商邦网格列表配置参数
-   * @type {UnwrapNestedRefs<{}>}
-   */
-  const SohelpConfig = reactive({});
-  /**
-   *
-   * @type {UnwrapNestedRefs<{}>}
-   */
-  const propertiesMap = reactive({});
-  /**
-   * 网格列表统计
-   */
-  const footerData = reactive([]);
-  /**
-   *
-   * @type {UnwrapNestedRefs<{}>}
-   */
-  const formulaMap = reactive({});
-  /**
-   * 配置是否加载完成
-   */
-  const isConfigInitialized = ref(false);
-  const { t } = useI18n();
-  /**
-   * placeholder占位符映射
-   */
-  const placeholderMap = {
-    SohelpSelect: '请选择ss',
-    SohelpTreeSelect: '请选择',
-    SohelpDict: '请选择',
-    SohelpUserSelect: '请选择用户',
-    SohelpDeptSelect: '请选择部门',
-    SohelpRoleSelect: '请选择角色',
-    SohelpDatePicker: '请选择日期',
-    SohelpTimePicker: '请选择时间',
-    SohelpDateTimePicker: '请选择日期时间',
-    SohelpInput: '请输入',
-    SohelpNumberInput: '请输入'
-  };
-
-  /**
-   * 初始化商邦网格列表配置
-   */
-  const initial = async (isGridConfig, refid) => {
-    if (!refid) throw new Error('配置列表请配置地址!');
-    let _refid = refid;
-    if (_refid.indexOf('!') === -1) _refid = refid + '!default';
-
-    isConfigInitialized.value = false;
-    const permission = usePermission();
-    const { mobile } = useMobile();
-
-    var batchButtonsIndex = -1;
-    const DefaultGridOptions = reactive(deepClone(_DefaultGridOptions));
-    /**获取列表配置*/
-    const config = await moduleCache.getGrid(_refid);
-
-    if (!config) {
-      throw new Error(_refid + ' : 没有发现网格列表配置!');
-    }
-
-    try {
-      Object.assign(SohelpConfig, filterFieldsByProperties(config));
-      Object.assign(
-        propertiesMap,
-        (SohelpConfig?.properties || []).reduce((acc, cur) => {
-          let param = {};
-          if (cur?.editorParam && typeof cur.editorParam === 'string') {
-            try {
-              param = JSON.parse(cur.editorParam);
-            } catch (e) {
-              console.error('解析editorParam失败:', e);
-            }
-          }
-          param.placeholder = param?.placeholder || placeholderMap[cur?.editor] || '';
-          acc[cur.name] = { ...cur, editorParam: param };
-          return acc;
-        }, {})
-      );
-
-      // 计算公式
-      if (config.formula && config.formula.length > 0) {
-        Object.assign(
-          formulaMap,
-          config.formula.reduce((a, c) => (a[c.formulaField] || (a[c.formulaField] = c), a), {})
-        );
-      }
-
-      // 按钮权限过滤
-      const permissionButtons = config.toolbars.filter((f) => {
-        if (!f.authority) {
-          return true;
-        }
-        return permission.hasPermission(f.authority);
-      });
-      const buttons = getToolbarsButtons(permissionButtons);
-      if (buttons && buttons.length > 0) {
-        DefaultGridOptions.toolbarConfig.buttons = buttons;
-        // 更多下拉菜单索引
-        batchButtonsIndex = buttons.reduce((acc, curr, 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;
-          if (i18nKey) {
-            const i18n = t(i18nKey);
-            item.name = i18n ? i18n : item.name;
-          }
-        });
-      }
-
-      //初始化属性列表配置
-      let columns = [];
-
-      //是否支持选择
-      if (config?.selectionType === 'checkbox') {
-        columns.push({
-          field: '_checkbox',
-          title: '',
-          fixed: mobile.value ? false : 'left',
-          type: 'checkbox',
-          align: 'center',
-          width: 40
-        });
-      }
-
-      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
-        });
-      }
-
-      //是否支持拖动
-      if (config?.rowDrag) {
-        columns.unshift({
-          title: '',
-          fixed: mobile.value ? false : 'left',
-          width: 40,
-          align: 'center',
-          dragSort: true,
-          field: '_drag'
-        });
-      }
-
-      //列拖动
-      if (config?.columnDrag) {
-        DefaultGridOptions.columnConfig.drag = true;
-      }
-
-      const requireData = {};
-      //商邦列转换成Vxe列
-      if (SohelpConfig.properties?.length > 0) {
-        SohelpConfig.properties.forEach((column, index) => {
-          let item = propertiesMap[column.name];
-          const row = switchVxeProperty(item, SohelpConfig.filter?.sort, footerData, formulaMap);
-
-          // 列表是否显示
-          row.visible = SohelpConfig.list.includes(item.name);
-          row.fixed = mobile.value ? false : row.fixed;
-          // 添加操作栏插槽
-          if (item.name === '_operation') {
-            row.visible = true;
-            row.slots = {
-              default: '_operation'
-            };
-          }
-
-          columns.push(row);
-
-          // 校验规则，非空字段必填
-          if (item.edit && item.notNull) {
-            requireData[item.name] = [
-              {
-                required: true,
-                message: row.title + '不能为空'
-              }
-            ];
-          }
-        });
-
-        //没有工具栏则不显示操作拦
-        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;
-            return config.list.indexOf(a.field) - config.list.indexOf(b.field);
-          })
-          .sort((a, b) => {
-            return b.visible - a.visible;
-          });
-
-        //_operation列安排最后一列
-        DefaultGridOptions.columns = [
-          ...sortColumns.filter((col) => col.field !== '_operation'),
-          ...sortColumns.filter((col) => col.field === '_operation')
-        ];
-        DefaultGridOptions.editRules = { ...requireData };
-      }
-
-      //是否开启表尾
-      Object.assign(
-        footerData,
-        (config.properties || [])
-          .filter((item) => item.summaryType)
-          ?.map((item) => {
-            return {
-              [item.name]: 0,
-              summaryRender: item.summaryRender ? JSON.parse(item.summaryRender) : null,
-              field: item.name,
-              type: item.summaryType
-            };
-          })
-      );
-      DefaultGridOptions.showFooter = footerData?.length > 0;
-
-      // 拦截编辑
-      DefaultGridOptions.editConfig.beforeEditMethod = ({ row, column }) => {
-        if (column.type === 'SohelpTextarea') {
-          return false;
-        }
-        return true;
-      };
-
-      // 设置分页数据
-      DefaultGridOptions.pagerConfig.enabled = config.paging;
-      DefaultGridOptions.pagerConfig.pageSize = config.limit || 50;
-
-      // 行列样式
-      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');
-        if (rowData.length > 0) {
-          DefaultGridOptions.rowStyle = createDynamicRowStyle(rowData);
-        } else {
-          DefaultGridOptions.stripe = true;
-        }
-        if (cellData.length > 0) {
-          DefaultGridOptions.cellStyle = createDynamicCellStyle(cellData);
-        }
-      }
-      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,
-      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;
-  };
-
-  /**
-   * 配置是否加载完成
-   */
-  const isConfigDone = async () => {
-    return new Promise((resolve) => {
-      if (isConfigInitialized.value) {
-        resolve();
-      } else {
-        let timer = setInterval(() => {
-          if (isConfigInitialized.value) {
-            clearInterval(timer);
-            resolve();
-          }
-        }, 10);
-      }
-    });
-  };
-
-  return { SohelpConfig, initial, isConfigDone, isConfigInitialized, moduleCache };
-}
+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 { EleMessage } from '@/components/ele-admin-plus/components';
+import { safeEval, safeFunctionExecSync } from '../../utils/safe-eval.js';
+
+/**
+ * 深拷贝
+ * @param obj
+ * @returns {any}
+ */
+function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+// 动态生成cellStyle函数
+function createDynamicStyle(styleConfigs = [], isCell = true) {
+  // 预编译条件表达式为函数
+  const compiledConfigs = styleConfigs.map((config) => ({
+    ...config,
+    conditionFn: ($row) => safeEval(config.condition, { $row })
+  }));
+  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) {
+        if (config.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' : ''
+          };
+        }
+      }
+    } catch (e) {
+      console.error('条件解析错误:', e);
+    }
+    return null;
+  };
+}
+
+const createDynamicCellStyle = (styleConfigs = []) => createDynamicStyle(styleConfigs, true);
+const createDynamicRowStyle = (styleConfigs = []) => createDynamicStyle(styleConfigs, false);
+
+/**
+ * 商邦网格列配置列转化成VxeGrid列配置
+ * @param property
+ * @param sortList
+ * @param f
+ * @param formulaMap
+ * @returns
+ **/
+const switchVxeProperty = (property, sortList, f, formulaMap) => {
+  let editor = {
+    field: property.name,
+    title: property.label,
+    i18n: property.i18n,
+    query: property.query,
+    width: property.width || 120,
+    type: property.editor || property.type,
+    align: property.align || 'left',
+    titleSuffix: property.tooltip ? { content: property.tooltip, placement: 'top' } : '',
+
+    showOverflow: true,
+    editRender: {
+      enabled: property.edit,
+      edit: property.edit,
+      ...property.editorParam
+    },
+    fixed: !property.lock ? false : property.lockAlign,
+    slots: {
+      default: 'default_' + property.name,
+      header: 'header_' + property.name
+    },
+    contentRender: {
+      name: property.render,
+      props: property.renderParam || {},
+      event: 'event'
+    }
+  };
+
+  /**
+   * 自定义格式化渲然
+   */
+
+  if (property.render && property.render === 'customFormatter') {
+    delete editor.slots.default;
+    editor.type = 'html';
+    editor.formatter = function ({ row, column, cellValue }) {
+      if (property.renderParam) {
+        try {
+          return safeFunctionExecSync(property.renderParam, ['$row', '$column', '$value'], [row, column, cellValue]);
+        } catch (e) {
+          console.error('customFormatter 执行错误:', e);
+          return cellValue; // 异常时返回原始值
+        }
+      } else {
+        return cellValue;
+      }
+    };
+  }
+
+  if (property.length > 0) {
+    editor.editRender.maxlength = property.length;
+  }
+
+  // 字典
+  if (property.type === 'SohelpDict') {
+    editor.editRender['code'] = property.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.edit) {
+    editor.slots.edit = 'edit_' + property.name;
+  }
+
+  if (
+    ['SohelpImageUpload', 'SohelpFileUpload', 'SohelpRate', 'SohelpSwitch', 'SohelpProcess'].includes(property.editor)
+  ) {
+    delete editor.slots.edit; //不渲染编辑
+    editor.editRender.enabled = false;
+  }
+
+  //筛选项配置
+  if (editor.query) {
+    switchFilterConfig(editor);
+  }
+
+  //是否统计
+  const isSummary = f.find((item) => item.field === property.name);
+
+  if (isSummary) {
+    editor.slots['footer'] = 'footer_' + property.name;
+  }
+
+  // 排序
+  if (sortList?.includes(property.name)) {
+    editor['sortable'] = true;
+  }
+
+  if (property.name === 'id') {
+    editor['width'] = 150;
+  }
+
+  return editor;
+};
+
+/**
+ * 筛选配置
+ */
+const switchFilterConfig = (editor) => {
+  editor.filters = [{ data: '', checked: false }];
+  editor.filterRender = {};
+  editor.slots = {
+    ...editor.slots,
+    filter: 'filter_' + editor.field
+  };
+};
+
+/**
+ * properties中过滤掉删除的属性
+ * @param {*} _filter
+ * @returns
+ */
+const filterFieldsByProperties = (_data) => {
+  const data = { ..._data };
+  const properties = new Set(data.properties?.map((item) => item.name));
+
+  const filterArray = (list, key) => {
+    return Array.isArray(list) ? list.filter((item) => properties.has(key ? item?.[key] : item)) : [];
+  };
+
+  let validProperties = Object.fromEntries(
+    data.properties?.filter((item) => item.name && !item.hidden)?.map((item) => [item.name, item.label])
+  );
+
+  data.list = filterArray(data.list).filter((item) => {
+    return item in validProperties;
+  });
+
+  data.filter.keywords = filterArray(data.filter.keywords);
+
+  //过滤掉不在列表中的sort属性
+  data.filter.sort = filterArray(data.filter.sort.filter((item) => data.list.some((f) => f === item)));
+  data.properties = data.properties?.filter((item) => item.name && !item.hidden);
+
+  data.filter.field = data.filter.field.filter((item) => {
+    return item.name in validProperties;
+  });
+
+  return 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'
+};
+
+/**
+ * 格式化工具栏
+ */
+const getToolbarsButtons = (data) => {
+  if (data?.length) {
+    const groupedButtons = data.reduce((acc, button) => {
+      const { buttonType } = button;
+      if (!acc[buttonType]) {
+        acc[buttonType] = [];
+      }
+
+      acc[buttonType].push(button);
+      return acc;
+    }, {});
+
+    // 按钮格式化
+    const formatterButton = (arr, type) => {
+      return arr.map((item) => {
+        let params = {};
+        if (item.params && typeof item.params === 'string') {
+          try {
+            params = JSON.parse(item.params);
+          } catch (e) {
+            console.error('FormatterButton Error:', e);
+            params = {};
+          }
+        }
+        let obj = {
+          code: item.id?.replace('-', '.') || item.type,
+          name: item.title || item.name || '',
+          id: item.id?.replace('-', '.'),
+          pno: item.pno,
+          handler: item.handler,
+          buttonType: item.buttonType,
+          icon: item.iconCls || defaultIcons[item.type],
+          refid: item.refid,
+          openType: item.openType,
+          params: params,
+          align: 'left'
+        };
+        return obj;
+      });
+    };
+
+    const { common = [], more = [], batch = [] } = groupedButtons;
+    let arr = [...formatterButton(common)];
+    if (more.length > 0) {
+      arr.push({
+        code: 'more',
+        name: '更多操作',
+        dropdowns: formatterButton(more)
+      });
+    }
+    if (batch.length > 0) {
+      arr.push({
+        code: 'batchMore',
+        name: '批量操作',
+        dropdowns: formatterButton(batch, 'batch'),
+        disabled: true
+      });
+    }
+    return arr;
+  }
+  return [];
+};
+
+/**
+ * 网格列表配置
+ * @returns
+ */
+export function useSohelpGridConfig() {
+  /**
+   * 商邦网格列表配置参数
+   * @type {UnwrapNestedRefs<{}>}
+   */
+  const SohelpConfig = reactive({});
+  /**
+   *
+   * @type {UnwrapNestedRefs<{}>}
+   */
+  const propertiesMap = reactive({});
+  /**
+   * 网格列表统计
+   */
+  const footerData = reactive([]);
+  /**
+   *
+   * @type {UnwrapNestedRefs<{}>}
+   */
+  const formulaMap = reactive({});
+  /**
+   * 配置是否加载完成
+   */
+  const isConfigInitialized = ref(false);
+  const { t } = useI18n();
+  /**
+   * placeholder占位符映射
+   */
+  const placeholderMap = {
+    SohelpSelect: '请选择ss',
+    SohelpTreeSelect: '请选择',
+    SohelpDict: '请选择',
+    SohelpUserSelect: '请选择用户',
+    SohelpDeptSelect: '请选择部门',
+    SohelpRoleSelect: '请选择角色',
+    SohelpDatePicker: '请选择日期',
+    SohelpTimePicker: '请选择时间',
+    SohelpDateTimePicker: '请选择日期时间',
+    SohelpInput: '请输入',
+    SohelpNumberInput: '请输入'
+  };
+
+  /**
+   * 初始化商邦网格列表配置
+   */
+  const initial = async (isGridConfig, refid) => {
+    if (!refid) throw new Error('配置列表请配置地址!');
+    let _refid = refid;
+    if (_refid.indexOf('!') === -1) _refid = refid + '!default';
+
+    isConfigInitialized.value = false;
+    const permission = usePermission();
+    const { mobile } = useMobile();
+
+    var batchButtonsIndex = -1;
+    const DefaultGridOptions = reactive(deepClone(_DefaultGridOptions));
+    /**获取列表配置*/
+    const config = await moduleCache.getGrid(_refid);
+
+    if (!config) {
+      throw new Error(_refid + ' : 没有发现网格列表配置!');
+    }
+
+    try {
+      Object.assign(SohelpConfig, filterFieldsByProperties(config));
+      Object.assign(
+        propertiesMap,
+        (SohelpConfig?.properties || []).reduce((acc, cur) => {
+          let param = {};
+          if (cur?.editorParam && typeof cur.editorParam === 'string') {
+            try {
+              param = JSON.parse(cur.editorParam);
+            } catch (e) {
+              console.error('解析editorParam失败:', e);
+            }
+          }
+          param.placeholder = param?.placeholder || placeholderMap[cur?.editor] || '';
+          acc[cur.name] = { ...cur, editorParam: param };
+          return acc;
+        }, {})
+      );
+
+      // 计算公式
+      if (config.formula && config.formula.length > 0) {
+        Object.assign(
+          formulaMap,
+          config.formula.reduce((a, c) => (a[c.formulaField] || (a[c.formulaField] = c), a), {})
+        );
+      }
+
+      // 按钮权限过滤
+      const permissionButtons = config.toolbars.filter((f) => {
+        if (!f.authority) {
+          return true;
+        }
+        return permission.hasPermission(f.authority);
+      });
+      const buttons = getToolbarsButtons(permissionButtons);
+      if (buttons && buttons.length > 0) {
+        DefaultGridOptions.toolbarConfig.buttons = buttons;
+        // 更多下拉菜单索引
+        batchButtonsIndex = buttons.reduce((acc, curr, 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;
+          if (i18nKey) {
+            const i18n = t(i18nKey);
+            item.name = i18n ? i18n : item.name;
+          }
+        });
+      }
+
+      //初始化属性列表配置
+      let columns = [];
+
+      //是否支持选择
+      if (config?.selectionType === 'checkbox') {
+        columns.push({
+          field: '_checkbox',
+          title: '',
+          fixed: mobile.value ? false : 'left',
+          type: 'checkbox',
+          align: 'center',
+          width: 40
+        });
+      }
+
+      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
+        });
+      }
+
+      //是否支持拖动
+      if (config?.rowDrag) {
+        columns.unshift({
+          title: '',
+          fixed: mobile.value ? false : 'left',
+          width: 40,
+          align: 'center',
+          dragSort: true,
+          field: '_drag'
+        });
+      }
+
+      //列拖动
+      if (config?.columnDrag) {
+        DefaultGridOptions.columnConfig.drag = true;
+      }
+
+      const requireData = {};
+      //商邦列转换成Vxe列
+      if (SohelpConfig.properties?.length > 0) {
+        SohelpConfig.properties.forEach((column, index) => {
+          let item = propertiesMap[column.name];
+          const row = switchVxeProperty(item, SohelpConfig.filter?.sort, footerData, formulaMap);
+
+          // 列表是否显示
+          row.visible = SohelpConfig.list.includes(item.name);
+          row.fixed = mobile.value ? false : row.fixed;
+          // 添加操作栏插槽
+          if (item.name === '_operation') {
+            row.visible = true;
+            row.slots = {
+              default: '_operation'
+            };
+          }
+
+          columns.push(row);
+
+          // 校验规则，非空字段必填
+          if (item.edit && item.notNull) {
+            requireData[item.name] = [
+              {
+                required: true,
+                message: row.title + '不能为空'
+              }
+            ];
+          }
+        });
+
+        //没有工具栏则不显示操作拦
+        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;
+            return config.list.indexOf(a.field) - config.list.indexOf(b.field);
+          })
+          .sort((a, b) => {
+            return b.visible - a.visible;
+          });
+
+        //_operation列安排最后一列
+        DefaultGridOptions.columns = [
+          ...sortColumns.filter((col) => col.field !== '_operation'),
+          ...sortColumns.filter((col) => col.field === '_operation')
+        ];
+        DefaultGridOptions.editRules = { ...requireData };
+      }
+
+      //是否开启表尾
+      Object.assign(
+        footerData,
+        (config.properties || [])
+          .filter((item) => item.summaryType)
+          ?.map((item) => {
+            return {
+              [item.name]: 0,
+              summaryRender: item.summaryRender ? JSON.parse(item.summaryRender) : null,
+              field: item.name,
+              type: item.summaryType
+            };
+          })
+      );
+      DefaultGridOptions.showFooter = footerData?.length > 0;
+
+      // 拦截编辑
+      DefaultGridOptions.editConfig.beforeEditMethod = ({ row, column }) => {
+        if (column.type === 'SohelpTextarea') {
+          return false;
+        }
+        return true;
+      };
+
+      // 设置分页数据
+      DefaultGridOptions.pagerConfig.enabled = config.paging;
+      DefaultGridOptions.pagerConfig.pageSize = config.limit || 50;
+
+      // 行列样式
+      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');
+        if (rowData.length > 0) {
+          DefaultGridOptions.rowStyle = createDynamicRowStyle(rowData);
+        } else {
+          DefaultGridOptions.stripe = true;
+        }
+        if (cellData.length > 0) {
+          DefaultGridOptions.cellStyle = createDynamicCellStyle(cellData);
+        }
+      }
+      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,
+      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;
+  };
+
+  /**
+   * 配置是否加载完成
+   */
+  const isConfigDone = async () => {
+    return new Promise((resolve) => {
+      if (isConfigInitialized.value) {
+        resolve();
+      } else {
+        let timer = setInterval(() => {
+          if (isConfigInitialized.value) {
+            clearInterval(timer);
+            resolve();
+          }
+        }, 10);
+      }
+    });
+  };
+
+  return { SohelpConfig, initial, isConfigDone, isConfigInitialized, moduleCache };
+}