cnhis-design-vue 3.1.11 → 3.1.12-beta.0

package/es/packages/big-table/src/hooks/useSeparateRow2.js

@@ -0,0 +1,157 @@
+import { useMemoize } from '@vueuse/core';
+import { isNumber, isString } from 'lodash-es';
+import { ref, computed, provide, watch, nextTick } from 'vue';
+import { InjectionSeparateHandle } from '../../../../packages/big-table/src/constants';
+
+class SeparateHandle {
+  constructor() {
+    this.callbacks = /* @__PURE__ */ new Set();
+  }
+  add(cb) {
+    this.callbacks.add(cb);
+  }
+  remove(cb) {
+    this.callbacks.delete(cb);
+  }
+  clear() {
+    this.callbacks.clear();
+  }
+  trigger() {
+    console.log("trigger");
+    this.callbacks.forEach((cb) => cb());
+  }
+}
+const getStringWidth = /* @__PURE__ */ useMemoize(function(str) {
+  if (!str)
+    return 0;
+  return [...str].reduce((width, char) => {
+    if (/[a-z]/.test(char)) {
+      return width + 8;
+    }
+    if (/[A-Z]/.test(char)) {
+      return width + 12;
+    }
+    if (/\d/.test(char)) {
+      return width + 9;
+    }
+    if (/\./.test(char)) {
+      return width + 4;
+    }
+    if (/[\u4e00-\u9fa5]/.test(char)) {
+      return width + 16;
+    }
+    if (/-/.test(char)) {
+      return width + 4;
+    }
+    if (/（|）/.test(char)) {
+      return width + 14;
+    }
+    if (/\(|\)/.test(char)) {
+      return width + 5;
+    }
+    if (/-/.test(char)) {
+      return width + 10;
+    }
+    if (/%/.test(char)) {
+      return width + 14;
+    }
+    if (/‰/.test(char)) {
+      return width + 16;
+    }
+    return width + 6;
+  }, 0);
+});
+const separateDataMap = ref(/* @__PURE__ */ new WeakMap());
+function useSeparateMap() {
+  function getRowData(row) {
+    return separateDataMap.value.get(row);
+  }
+  return { separateDataMap, getRowData };
+}
+function useSeparateRow(getColumnConfig, $VXETable) {
+  const needSeparateColumn = computed(() => {
+    return getColumnConfig().filter((column) => column.formType === "separate");
+  });
+  async function separate(data, rawData) {
+    if (!needSeparateColumn.value.length) {
+      return data;
+    }
+    return data.reduce(async (res, row, dataIndex) => {
+      let parsedRowData = [];
+      for (const column of needSeparateColumn.value) {
+        parsedRowData.push({
+          columnName: column.columnName,
+          data: contentSeparate(row[column.columnName], await getColumnRenderWidth(column))
+        });
+      }
+      (await res).push(...Array.from({ length: getColumnInfoMaxLength(parsedRowData) }).map((_, index) => {
+        if (index === 0) {
+          separateDataMap.value.set(row, {
+            row,
+            rawRow: rawData[dataIndex],
+            index,
+            separateData: getSeparateRowData(parsedRowData, index)
+          });
+          return row;
+        }
+        const data2 = { $__SEPARATE: true };
+        separateDataMap.value.set(data2, {
+          row: data2,
+          rawRow: rawData[dataIndex],
+          index,
+          separateData: getSeparateRowData(parsedRowData, index)
+        });
+        return data2;
+      }));
+      return res;
+    }, Promise.resolve([]));
+    function getSeparateRowData(parsedRowData, index) {
+      return parsedRowData.reduce((res, info) => {
+        res[info.columnName] = info.data[index];
+        return res;
+      }, {});
+    }
+    function getColumnInfoMaxLength(parsedRowData) {
+      return Math.max(...parsedRowData.map((r) => r.data.length));
+    }
+    async function getColumnRenderWidth(column) {
+      const prev = getRenderWidth();
+      if (!prev) {
+        await nextTick();
+      }
+      return getRenderWidth() || getColumnWidth();
+      function getRenderWidth() {
+        var _a, _b;
+        return (_b = (_a = $VXETable.value) == null ? void 0 : _a.getColumnByField(column.columnName)) == null ? void 0 : _b.renderWidth;
+      }
+      function getColumnWidth() {
+        return isNumber(column.width) ? column.width : 64;
+      }
+    }
+  }
+  function contentSeparate(value, width) {
+    if (!isString(value) || !isNumber(width))
+      return [value];
+    width -= 20;
+    return [...value].reduce((res, char) => {
+      const latestString = res[res.length - 1];
+      if (getStringWidth(latestString + char) > width) {
+        res.push(char);
+      } else {
+        res[res.length - 1] = latestString + char;
+      }
+      return res;
+    }, [""]);
+  }
+  const onColumnResize = ({ column }) => {
+    if (needSeparateColumn.value.some((separateColumn) => separateColumn.columnName === column.field)) {
+      separateHandle.trigger();
+    }
+  };
+  const separateHandle = new SeparateHandle();
+  provide(InjectionSeparateHandle, separateHandle);
+  watch(needSeparateColumn, separateHandle.trigger.bind(separateHandle));
+  return { onColumnResize, needSeparateColumn, separate, separateHandle };
+}
+
+export { SeparateHandle, useSeparateMap, useSeparateRow };

package/es/packages/big-table/src/hooks/useTableParse.js

@@ -1,135 +1 @@
-import vexutils from '../../../../src/utils/vexutils';
-
-const useTableParse = (formatData) => {
-  const parseDurationValue = (v, duration) => {
-    if (!v && v !== 0)
-      return;
-    const unitList = {
-      day: 86400,
-      minute: 60,
-      hour: 3600,
-      second: 1
-    };
-    const unit = duration && unitList[duration] || 1;
-    const value = v * unit || 0;
-    const mu = 60;
-    if (value < mu) {
-      return `${value}\u79D2`;
-    }
-    const hu = mu * 60;
-    if (value < hu) {
-      return `${Math.floor(value / 60)}\u5206`;
-    }
-    const du = hu * 24;
-    if (value < du) {
-      const v2 = Math.floor(value / 60) % 60;
-      return `${Math.floor(value / hu)}\u5C0F\u65F6${v2 ? v2 + "\u5206" : ""}`;
-    }
-    const MU = du * 30;
-    if (value < MU) {
-      const v2 = Math.floor(value / hu) % 24;
-      return `${Math.floor(value / du)}\u5929${v2 ? v2 + "\u5C0F\u65F6" : ""}`;
-    }
-    const yu = du * 365;
-    if (value < yu) {
-      const unit2 = 30;
-      const v1 = Math.floor(value / du / unit2);
-      const v2 = Math.floor((value - v1 * unit2 * du) / du);
-      return `${v1}\u4E2A\u6708${v2 ? v2 + "\u5929" : ""}`;
-    }
-    return `${Math.floor(value / du / 365)}\u5E74`;
-  };
-  const parseCombinationValue = (value, setting) => {
-    let data = value ? JSON.parse(value) : [];
-    if (!Array.isArray(data)) {
-      data = [data];
-    }
-    const { combinationField: key } = setting;
-    if (!key)
-      return value;
-    return data.reduce((str, item) => {
-      const v = item[key];
-      typeof v !== "undefined" && (str += `,${v}`);
-      return str;
-    }, "").slice(1);
-  };
-  const formatFieldText = (row, field, fieldList, fieldListOriginal, isTimeAxisRenderNew, isTimeAxisExpand) => {
-    var _a, _b;
-    if (isTimeAxisRenderNew && field.fieldType.includes("DATE")) {
-      let key = field.columnName;
-      if (!isTimeAxisExpand) {
-        key = field.columnName + "_fold";
-      }
-      const text = row[key];
-      return text;
-    }
-    const formatText = (text) => text ? text : String(text) === "0" ? "0" : "";
-    const haveValue = (val) => {
-      return val !== void 0 && val !== "";
-    };
-    const findField = (columnName, fieldList2) => {
-      return fieldList2.find((item) => item.columnName === columnName);
-    };
-    const html = formatText(row[field.columnName]);
-    if (!haveValue(html)) {
-      return "";
-    }
-    if ((_a = field.settingObj) == null ? void 0 : _a.mergedFeildExpression) {
-      const { mergedFeildExpression } = field.settingObj;
-      const passList = [];
-      const regexp = /#{(.+?)\}/g;
-      let formatHtml = mergedFeildExpression.replace(regexp, (match, p1) => {
-        const findFieldItem = findField(p1, fieldListOriginal);
-        passList.push(haveValue(row[p1]) && findFieldItem);
-        if (findFieldItem && formatData) {
-          const cloneRow = JSON.parse(JSON.stringify(row));
-          const tableData = formatData({
-            tableList: [cloneRow],
-            fieldList: [findFieldItem],
-            btnList: []
-          })[0];
-          return formatText(tableData[p1]);
-        }
-        return formatText(row[p1]);
-      });
-      const pass = passList.every((b) => b);
-      if (!pass) {
-        return html;
-      }
-      const originColumnNameColorList = ((_b = findField(field.columnName, fieldList)) == null ? void 0 : _b.colorAndIcon) || [];
-      const findC = originColumnNameColorList.find((c) => vexutils.parseCondition(c.condition, {
-        form: {},
-        table: {
-          ...row
-        },
-        sys: {}
-      }, fieldList));
-      const originColumnNameColor = (findC == null ? void 0 : findC.color) || "inherit";
-      const regexp2 = /color(:|;)(.+?)(;|")/g;
-      formatHtml = formatHtml.replace(regexp2, (match, p1, p2, p3 = "") => {
-        return p3;
-      });
-      formatHtml = `<span style="color: ${originColumnNameColor};">${formatHtml}</span>`;
-      return formatHtml;
-    }
-    if (vexutils.isString(html) && (html == null ? void 0 : html.startsWith("###{")) && (html == null ? void 0 : html.includes("change_text"))) {
-      return vexutils.stringToValue(html, "change_text");
-    }
-    return html;
-  };
-  const imgs2imgArr = (imgs) => {
-    if (!imgs)
-      return [];
-    return imgs.replace(/(,)(data|http)/g, (match, p1, p2) => {
-      return `|${p2}`;
-    }).split("|");
-  };
-  return {
-    parseDurationValue,
-    parseCombinationValue,
-    formatFieldText,
-    imgs2imgArr
-  };
-};
-
-export { useTableParse };
+export { useTableParse } from './useTableParse2.js';

package/es/packages/big-table/src/hooks/useTableParse2.js

@@ -0,0 +1,135 @@
+import vexutils from '../../../../src/utils/vexutils';
+
+const useTableParse = (formatData) => {
+  const parseDurationValue = (v, duration) => {
+    if (!v && v !== 0)
+      return;
+    const unitList = {
+      day: 86400,
+      minute: 60,
+      hour: 3600,
+      second: 1
+    };
+    const unit = duration && unitList[duration] || 1;
+    const value = v * unit || 0;
+    const mu = 60;
+    if (value < mu) {
+      return `${value}\u79D2`;
+    }
+    const hu = mu * 60;
+    if (value < hu) {
+      return `${Math.floor(value / 60)}\u5206`;
+    }
+    const du = hu * 24;
+    if (value < du) {
+      const v2 = Math.floor(value / 60) % 60;
+      return `${Math.floor(value / hu)}\u5C0F\u65F6${v2 ? v2 + "\u5206" : ""}`;
+    }
+    const MU = du * 30;
+    if (value < MU) {
+      const v2 = Math.floor(value / hu) % 24;
+      return `${Math.floor(value / du)}\u5929${v2 ? v2 + "\u5C0F\u65F6" : ""}`;
+    }
+    const yu = du * 365;
+    if (value < yu) {
+      const unit2 = 30;
+      const v1 = Math.floor(value / du / unit2);
+      const v2 = Math.floor((value - v1 * unit2 * du) / du);
+      return `${v1}\u4E2A\u6708${v2 ? v2 + "\u5929" : ""}`;
+    }
+    return `${Math.floor(value / du / 365)}\u5E74`;
+  };
+  const parseCombinationValue = (value, setting) => {
+    let data = value ? JSON.parse(value) : [];
+    if (!Array.isArray(data)) {
+      data = [data];
+    }
+    const { combinationField: key } = setting;
+    if (!key)
+      return value;
+    return data.reduce((str, item) => {
+      const v = item[key];
+      typeof v !== "undefined" && (str += `,${v}`);
+      return str;
+    }, "").slice(1);
+  };
+  const formatFieldText = (row, field, fieldList, fieldListOriginal, isTimeAxisRenderNew, isTimeAxisExpand) => {
+    var _a, _b;
+    if (isTimeAxisRenderNew && field.fieldType.includes("DATE")) {
+      let key = field.columnName;
+      if (!isTimeAxisExpand) {
+        key = field.columnName + "_fold";
+      }
+      const text = row[key];
+      return text;
+    }
+    const formatText = (text) => text ? text : String(text) === "0" ? "0" : "";
+    const haveValue = (val) => {
+      return val !== void 0 && val !== "";
+    };
+    const findField = (columnName, fieldList2) => {
+      return fieldList2.find((item) => item.columnName === columnName);
+    };
+    const html = formatText(row[field.columnName]);
+    if (!haveValue(html)) {
+      return "";
+    }
+    if ((_a = field.settingObj) == null ? void 0 : _a.mergedFeildExpression) {
+      const { mergedFeildExpression } = field.settingObj;
+      const passList = [];
+      const regexp = /#{(.+?)\}/g;
+      let formatHtml = mergedFeildExpression.replace(regexp, (match, p1) => {
+        const findFieldItem = findField(p1, fieldListOriginal);
+        passList.push(haveValue(row[p1]) && findFieldItem);
+        if (findFieldItem && formatData) {
+          const cloneRow = JSON.parse(JSON.stringify(row));
+          const tableData = formatData({
+            tableList: [cloneRow],
+            fieldList: [findFieldItem],
+            btnList: []
+          })[0];
+          return formatText(tableData[p1]);
+        }
+        return formatText(row[p1]);
+      });
+      const pass = passList.every((b) => b);
+      if (!pass) {
+        return html;
+      }
+      const originColumnNameColorList = ((_b = findField(field.columnName, fieldList)) == null ? void 0 : _b.colorAndIcon) || [];
+      const findC = originColumnNameColorList.find((c) => vexutils.parseCondition(c.condition, {
+        form: {},
+        table: {
+          ...row
+        },
+        sys: {}
+      }, fieldList));
+      const originColumnNameColor = (findC == null ? void 0 : findC.color) || "inherit";
+      const regexp2 = /color(:|;)(.+?)(;|")/g;
+      formatHtml = formatHtml.replace(regexp2, (match, p1, p2, p3 = "") => {
+        return p3;
+      });
+      formatHtml = `<span style="color: ${originColumnNameColor};">${formatHtml}</span>`;
+      return formatHtml;
+    }
+    if (vexutils.isString(html) && (html == null ? void 0 : html.startsWith("###{")) && (html == null ? void 0 : html.includes("change_text"))) {
+      return vexutils.stringToValue(html, "change_text");
+    }
+    return html;
+  };
+  const imgs2imgArr = (imgs) => {
+    if (!imgs)
+      return [];
+    return imgs.replace(/(,)(data|http)/g, (match, p1, p2) => {
+      return `|${p2}`;
+    }).split("|");
+  };
+  return {
+    parseDurationValue,
+    parseCombinationValue,
+    formatFieldText,
+    imgs2imgArr
+  };
+};
+
+export { useTableParse };

package/es/packages/big-table/src/utils.d.ts

@@ -15,6 +15,7 @@ export declare const getFooterGroup: (columns: any, data: any, props: any) => an
 export declare const checkMethod: ({ row }: {
     row: any;
 }) => boolean;
+export declare const visibleMethod: ({ row }: any) => boolean;
 /**
  * 单选行数据 树结构 扁平化处理
  */