cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.8

package/es/components/big-table/src/hooks/useSeparateRow.js

@@ -0,0 +1,132 @@
+import { getStringWidth } from '../../../../shared/utils/index.js';
+import { isNumber, isArray, cloneDeep, isString } from 'lodash-es';
+import { ref, computed, provide, watch, nextTick } from 'vue';
+import { InjectionSeparateHandle } from '../constants/index.js';
+
+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() {
+    this.callbacks.forEach((cb) => cb());
+  }
+}
+const separateDataMap = ref(
+  /* @__PURE__ */ new WeakMap()
+);
+function useSeparateMap() {
+  function getRowData(row) {
+    return separateDataMap.value.get(row);
+  }
+  return { separateDataMap, getRowData };
+}
+function useSeparateRow(getColumnConfig, getFieldItem, $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) => {
+      const parsedRowData = [];
+      for (const column of needSeparateColumn.value) {
+        parsedRowData.push({
+          columnName: column.columnName,
+          data: contentSeparate(row[column.columnName], column.columnName, await getColumnRenderWidth(column))
+        });
+      }
+      (await res).push(
+        ...Array.from({ length: getColumnInfoMaxLength(parsedRowData) }).map((_, index) => {
+          const separateData = getSeparateRowData(parsedRowData, index);
+          if (index === 0) {
+            separateDataMap.value.set(row, {
+              row,
+              rawRow: rawData[dataIndex],
+              index: dataIndex,
+              separateData
+            });
+            row.$__SEPARATE_DATA = [separateData];
+            return row;
+          }
+          const data2 = { $__SEPARATE: true };
+          separateDataMap.value.set(data2, {
+            row: data2,
+            rawRow: rawData[dataIndex],
+            index: dataIndex,
+            separateData
+          });
+          row.$__SEPARATE_DATA.push(separateData);
+          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), 1);
+    }
+    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, columnName, width) {
+    if (isArray(value)) {
+      return value.map((row) => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = getFieldItem(columnName)) == null ? void 0 : _a.separateFormatter) == null ? void 0 : _b.call(_a, cloneDeep(row))) != null ? _c : row;
+      });
+    }
+    if (!isString(value) || !isNumber(width))
+      return [value];
+    width -= 24;
+    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/components/big-table/src/hooks/useTableParse.d.ts

@@ -0,0 +1,6 @@
+export declare const useTableParse: (formatData: Function) => {
+    parseDurationValue: (v: any, duration: any) => string | undefined;
+    parseCombinationValue: (value: any, setting: any) => any;
+    formatFieldText: (row: any, field: any, fieldList: any, fieldListOriginal: any, isTimeAxisRenderNew?: any, isTimeAxisExpand?: any) => any;
+    imgs2imgArr: (imgs: any) => any;
+};

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

@@ -0,0 +1,142 @@
+import XEUtils from 'xe-utils';
+import 'moment';
+
+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) => XEUtils.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 (XEUtils.isString(html) && (html == null ? void 0 : html.startsWith("###{")) && (html == null ? void 0 : html.includes("change_text"))) {
+      return XEUtils.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/components/big-table/src/utils.d.ts

@@ -0,0 +1,59 @@
+/** 评价组件 */
+export declare const getEvaluate: (row: any, item: any) => any;
+export declare const getMapVal: (row: any, item: any) => any;
+/** 年龄 json 解析 */
+export declare const getageShowType: (row: any, item: any) => any;
+export declare const reScrollFilterWrap: () => void;
+export declare const showFilter: (field: any, columnName: any, event: any, props: any, state: any) => false | undefined;
+export declare const handleGroupColums: (columns: any, props: any) => any[];
+export declare const handlerInitSearchItem: (arr: any) => void;
+export declare const generateEditRender: (fieldItem: any) => {
+    name: string;
+    enabled: boolean;
+} | undefined;
+export declare const getFooterGroup: (columns: any, data: any, props: any) => any;
+export declare const checkMethod: ({ row }: {
+    row: any;
+}) => boolean;
+export declare const visibleMethod: ({ row }: any) => boolean;
+/**
+ * 单选行数据 树形结构转列表
+ */
+export declare const treeToList: (treeData: any[]) => any[];
+/**
+ * 单选行数据 树结构 扁平化处理
+ */
+export declare const flattenRow: (row: any, newRow: any, newTheUniqueKeyArr: any, handleRowId: any) => void;
+/**
+ * 树结构 选中交集
+ */
+export declare const intersectRow: (checkedRow: any, newTheUniqueKeyArr: any, handleRowId: any) => any;
+export declare const removeCheckedDisabledRows: (state: any) => void;
+export declare const setFilterStatus: (state: any, props: any) => false | undefined;
+export declare const getRowStyle: ({ row }: any) => string | null;
+export declare const handleTableHeight: (state: any, props: any) => any;
+export declare const handleName: (item: any, key?: string) => any;
+export declare const handleImgArr: (imgs: any, type: any, imgs2imgArr: (imgs: any) => any[]) => any[];
+export declare const handleImgSrc: (curSrc: any, imageArr: any, type: any) => any;
+export declare const modalDetailImage: (imageArr: any, type: any, defaultHeight: any) => any;
+/** 选人组件数据解析 */
+export declare const getCandidateComponents: (row: any, item: any) => any;
+export declare const handleQrCodeContent: (row: any, field: any) => {
+    btnName: any;
+    trigger_id: any;
+    params: {
+        content: any;
+    };
+};
+export declare const getInlineEditBtn: (row: any, btnListKey: any) => any;
+export declare const isCopy: (item: any, row: any) => any;
+export declare const handleTableImageSize: (imageArr: any, type: any, defaultHeight: any) => void;
+export declare const setDefaultFormData: (property: any, fieldItem: any, originalRow?: any) => {
+    [x: number]: any;
+};
+export declare const hideFilterWrap: (state: any, props: any) => void;
+export declare const mergeConObjFn: (state: any, props: any) => any[];
+export declare const isLink: (props: any, item: any, row: any) => any;
+export declare const setTableConfig: (config: any, state: any) => void;
+export declare const setTreeGroupTitle: (formatList: any, key: any, GROUP_TITLE_KEY: any) => void;
+export declare const setVisibleCheckAllWrap: (state: any, props: any, currentCheckedKeys: any) => false | undefined;