sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-grid/js/useSohelpGridConfig.js

@@ -0,0 +1,525 @@
+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";
+
+/**
+ * 深拷贝
+ * @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.length > 0) {
+    editor.editRender.maxlength = property.length;
+  }
+
+  if (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.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).filter(Boolean) || []);
+  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);
+  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)));
+  data.properties = data.properties.filter((item) => item.name && !item.hidden);
+  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.type,
+          name: item.title || item,
+          id: item.id,
+          pno: item.pno,
+          handler: item.handler,
+          buttonType: item.buttonType,
+          icon: item.iconCls || defaultIcons[item.type],
+          refid: item.refid,
+          openType: item.openType,
+          params: params
+        };
+        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();
+  /**
+   * 初始化商邦网格列表配置
+   */
+  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 = isGridConfig ? await moduleCache.getGrid(_refid) : await moduleCache.getEntityGrid(_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);
+            }
+          }
+          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 = [
+        {
+          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",
+          width: 40
+        }
+      ];
+
+      const isRowDrag = config.rowDrag;
+      //是否支持拖动
+      if (isRowDrag) {
+        columns.unshift({
+          title: "",
+          fixed: mobile.value ? false : "left",
+          width: 40,
+          align: "center",
+          dragSort: true,
+          field: "_drag"
+        });
+      }
+
+      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?.operationToolbars?.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;
+      //转化初始化其他参数...
+    } catch (error) {
+      throw error; //重新抛出错误，以便调用者可以处理它
+    }
+
+    return {
+      gridOptions: DefaultGridOptions,
+      sohelpConfig: SohelpConfig,
+      propertiesMap: propertiesMap,
+      batchButtonsIndex: batchButtonsIndex,
+      footerData: footerData,
+      formulaMap: formulaMap
+    };
+  };
+
+  /**
+   * 配置是否加载完成
+   */
+  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 };
+}