cnhis-design-vue 3.3.1-beta.9 → 3.3.1-release.5

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

@@ -1 +1,209 @@
-import{getStringWidth as e}from"../../../../shared/utils/index.js";import{isFunction as n,isNumber as a,isArray as t,cloneDeep as l,isString as o}from"lodash-es";import{ref as r,computed as u,provide as c,watch as s,nextTick as i}from"vue";import{InjectionSeparateHandle as m}from"../constants/index.js";class d{constructor(){this.callbacks=new Set}add(e){this.callbacks.add(e)}remove(e){this.callbacks.delete(e)}clear(){this.callbacks.clear()}trigger(){this.callbacks.forEach((e=>e()))}}const p=r(new WeakMap);function f(){return{separateDataMap:p,getRowData:function(e){return p.value.get(e)}}}function w(r,f,w,v){const h=u((()=>r().filter((e=>"separate"===e.formType)))),g=new Map;function x(e){return Math.max(...e.map((e=>e.data.length)),1)}function I(e,n,a){if(!v.value)return{colspan:1,columnIndex:0};const t=v.value.getColumnByField(e),l=v.value.getColumnIndex(t),o=(v.value.getColumns()||[]).findIndex((n=>n.field===e)),{colspan:r=1}=f({column:t,row:n,rowIndex:a,$rowIndex:a,_rowIndex:a,columnIndex:l,$columnIndex:l,_columnIndex:o})||{};return{colspan:r,columnIndex:l,_columnIndex:o}}async function _(e,t,l){if(!n(f)||!v.value)return{width:await s(e),colspan:1};const{colspan:o,_columnIndex:r,columnIndex:u}=I(e.columnName,t,l),c=null!=r?r:u;return{width:o<=0?0:1===o?await s(e):await v.value.getColumns().slice(c,c+o).reduce((async(e,n)=>await e+await s({columnName:n.field})),Promise.resolve(0)),colspan:o};async function s(e){let n=g.get(e.columnName);if(n)return n;return t()||await i(),n=t()||(a(e.width)?e.width:64),g.set(e.columnName,n),n;function t(){var n,a;return null==(a=null==(n=v.value)?void 0:n.getColumnByField(e.columnName))?void 0:a.renderWidth}}}function A(n,r,u){return t(n)?n.map((e=>{var n,a,t;return null!=(t=null==(a=null==(n=w(r))?void 0:n.separateFormatter)?void 0:a.call(n,l(e)))?t:e})):o(n)&&a(u)?(u-=24,[...n].reduce(((n,a)=>{const t=n[n.length-1];return e(t+a)>u?n.push(a):n[n.length-1]=t+a,n}),[""])):[n]}const N=new d;return c(m,N),s(h,N.trigger.bind(N)),{onColumnResize:({column:e})=>{h.value.some((n=>n.columnName===e.field))&&N.trigger()},needSeparateColumn:h,separate:async function(e,n){var a,t;if(!h.value.length)return e;g.clear();const l=null!=(t=null==(a=v.value)?void 0:a.getColumns())?t:[];return e.reduce((async(e,a,t)=>{const o=[];for(const e of h.value){const{width:n,colspan:l}=await _(e,a,t);o.push({columnName:e.columnName,colspan:l,data:A(a[e.columnName],e.columnName,n)})}const r=l.reduce(((e,n)=>(e[n.field]=I(n.field,a,t).colspan,e)),{});return(await e).push(...Array.from({length:x(o)}).map(((e,l)=>{const u=function(e,n){return e.reduce(((e,a)=>(e[a.columnName]=a.data[n],e)),{})}(o,l);if(0===l)return p.value.set(a,{row:a,rawRow:n[t],index:t,separateData:u,colspans:r}),a.$__SEPARATE_DATA=[u],a;const c={$__SEPARATE:!0};return p.value.set(c,{row:c,rawRow:n[t],index:t,separateData:u}),a.$__SEPARATE_DATA.push(u),c}))),e}),Promise.resolve([]))},separateHandle:N,separateDataMap:p}}export{d as SeparateHandle,f as useSeparateMap,w as useSeparateRow};
+import { getStringWidth } from '../../../../shared/utils/index.js';
+import { isFunction, 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, spanMethod, getFieldItem, $VXETable) {
+  const needSeparateColumn = computed(() => {
+    return getColumnConfig().filter((column) => column.formType === "separate");
+  });
+  const columnWidthCacheMap = /* @__PURE__ */ new Map();
+  async function separate(data, rawData) {
+    var _a, _b;
+    if (!needSeparateColumn.value.length) {
+      return data;
+    }
+    columnWidthCacheMap.clear();
+    const visibleColumn = (_b = (_a = $VXETable.value) == null ? void 0 : _a.getColumns()) != null ? _b : [];
+    return data.reduce(async (res, row, dataIndex) => {
+      const parsedRowData = [];
+      for (const column of needSeparateColumn.value) {
+        const {
+          width,
+          colspan
+        } = await getColumnRenderWidth(column, row, dataIndex);
+        parsedRowData.push({
+          columnName: column.columnName,
+          colspan,
+          data: contentSeparate(row[column.columnName], column.columnName, width)
+        });
+      }
+      const separateColspans = visibleColumn.reduce((res2, column) => {
+        res2[column.field] = getColspanInfo(column.field, row, dataIndex).colspan;
+        return res2;
+      }, {});
+      (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,
+            colspans: separateColspans
+          });
+          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);
+  }
+  function getColspanInfo(field, row, rowIndex) {
+    if (!$VXETable.value)
+      return {
+        colspan: 1,
+        columnIndex: 0
+      };
+    const columnInfo = $VXETable.value.getColumnByField(field);
+    const columnIndex = $VXETable.value.getColumnIndex(columnInfo);
+    const visibleColumn = $VXETable.value.getColumns() || [];
+    const _columnIndex = visibleColumn.findIndex((column) => column.field === field);
+    const {
+      colspan = 1
+    } = spanMethod({
+      column: columnInfo,
+      row,
+      rowIndex,
+      $rowIndex: rowIndex,
+      _rowIndex: rowIndex,
+      columnIndex,
+      $columnIndex: columnIndex,
+      _columnIndex
+    }) || {};
+    return {
+      colspan,
+      columnIndex,
+      _columnIndex
+    };
+  }
+  async function getColumnRenderWidth(column, row, rowIndex) {
+    if (!isFunction(spanMethod) || !$VXETable.value)
+      return {
+        width: await getWidth(column),
+        colspan: 1
+      };
+    const {
+      colspan,
+      _columnIndex,
+      columnIndex
+    } = getColspanInfo(column.columnName, row, rowIndex);
+    const colIndex = _columnIndex != null ? _columnIndex : columnIndex;
+    const width = colspan <= 0 ? 0 : colspan === 1 ? await getWidth(column) : await $VXETable.value.getColumns().slice(colIndex, colIndex + colspan).reduce(async (res, columnInfo) => {
+      return await res + await getWidth({
+        columnName: columnInfo.field
+      });
+    }, Promise.resolve(0));
+    return {
+      width,
+      colspan
+    };
+    async function getWidth(column2) {
+      let width2 = columnWidthCacheMap.get(column2.columnName);
+      if (width2)
+        return width2;
+      const prev = getRenderWidth();
+      if (!prev) {
+        await nextTick();
+      }
+      width2 = getRenderWidth() || getColumnWidth();
+      columnWidthCacheMap.set(column2.columnName, width2);
+      return width2;
+      function getRenderWidth() {
+        var _a, _b;
+        return (_b = (_a = $VXETable.value) == null ? void 0 : _a.getColumnByField(column2.columnName)) == null ? void 0 : _b.renderWidth;
+      }
+      function getColumnWidth() {
+        return isNumber(column2.width) ? column2.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,
+    separateDataMap
+  };
+}
+
+export { SeparateHandle, useSeparateMap, useSeparateRow };

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

@@ -1 +1,142 @@
-import"xe-utils";import"moment";import t from"../../../../shared/utils/vexutilsExpand.js";const e=e=>({parseDurationValue:(t,e)=>{var o,r;if(!t&&0!==t)return;const n=t*(e&&{day:86400,minute:60,hour:3600,second:1}[e]||1)||0;if(n<60)return`${n}秒`;const i=3600;if(n<i)return`${Math.floor(n/60)}分`;const l=86400;if(n<l){const t=Math.floor(n/60)%60;return`${Math.floor(n/i)}小时${t?t+"分":""}`}if(n<2592e3){const t=Math.floor(n/i)%24;return`${Math.floor(n/l)}天${t?t+((null==(o=window.getLanguageByCode)?void 0:o.call(window,"10010.1.350"))||"小时"):""}`}if(n<31536e3){const t=30,e=Math.floor(n/l/t),o=Math.floor((n-e*t*l)/l);return`${e}个月${o?o+((null==(r=window.getLanguageByCode)?void 0:r.call(window,"10010.1.144"))||"天"):""}`}return`${Math.floor(n/l/365)}年`},parseCombinationValue:(t,e)=>{let o=t?JSON.parse(t):[];Array.isArray(o)||(o=[o]);const{combinationField:r}=e;return r?o.reduce(((t,e)=>{const o=e[r];return void 0!==o&&(t+=`,${o}`),t}),"").slice(1):t},formatFieldText:(o,r,n,i,l,s)=>{var a,u;if(l&&r.fieldType.includes("DATE")){let t=r.columnName;s||(t=r.columnName+"_fold");return o[t]}const c=t=>t||("0"===String(t)?"0":""),d=t=>void 0!==t&&""!==t,f=(t,e)=>e.find((e=>e.columnName===t)),m=c(o[r.columnName]);if(!d(m))return"";if(null==(a=r.settingObj)?void 0:a.mergedFeildExpression){const{mergedFeildExpression:l}=r.settingObj,s=[],a=/#{(.+?)\}/g;let g=l.replace(a,((t,r)=>{const n=f(r,i);if(s.push(d(o[r])&&n),n&&e){const t=JSON.parse(JSON.stringify(o)),i=e({tableList:[t],fieldList:[n],btnList:[]})[0];return c(i[r])}return c(o[r])}));if(!s.every((t=>t)))return m;const p=((null==(u=f(r.columnName,n))?void 0:u.colorAndIcon)||[]).find((e=>t.parseCondition(e.condition,{form:{},table:{...o},sys:{}},n))),h=(null==p?void 0:p.color)||"inherit",v=/color(:|;)(.+?)(;|")/g;return g=g.replace(v,((t,e,o,r="")=>r)),g=`<span style="color: ${h};">${g}</span>`,g}return t.isString(m)&&(null==m?void 0:m.startsWith("###{"))&&(null==m?void 0:m.includes("change_text"))?t.stringToValue(m,"change_text"):m},imgs2imgArr:t=>t?t.replace(/(,)(data|http)/g,((t,e,o)=>`|${o}`)).split("|"):[]});export{e as useTableParse};
+import 'xe-utils';
+import 'moment';
+import vexutilsExpand from '../../../../shared/utils/vexutilsExpand.js';
+
+const useTableParse = (formatData) => {
+  const parseDurationValue = (v, duration) => {
+    var _a, _b;
+    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 + (((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.350")) || "\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 + (((_b = window.getLanguageByCode) == null ? void 0 : _b.call(window, "10010.1.144")) || "\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) => vexutilsExpand.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 (vexutilsExpand.isString(html) && (html == null ? void 0 : html.startsWith("###{")) && (html == null ? void 0 : html.includes("change_text"))) {
+      return vexutilsExpand.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 };