cnhis-design-vue 0.3.3-beta → 0.3.4-beta

package/packages/big-table/src/hooks/useNestTable.ts

@@ -0,0 +1,109 @@
+import { computed, ref, reactive, watch, onMounted } from 'vue'
+import vexutils from '@/utils/vexutils';
+
+export const useNestTable = (props: any, state: any, emit: any) => {
+
+  const isAboutNestTable = computed(() => {
+    return props.showNestTable || props.isNestTable;
+  })
+
+  const isExpandTable = computed(() => {
+    let { isBatchSelect } = props.columnConfig || {};
+    return !props.isNestTable && isBatchSelect == 1;
+  })
+
+  const handleRowId = computed(() => {
+    if (state.isTree == 2 || state.isTree == 3) {
+      return 'theUniqueKey';
+    }
+    return props.primaryKey || 'theUniqueKey';
+  })
+
+  /**
+     * 子表expand事件
+     * @param {*} param0
+     * @returns
+     */
+  const toggleExpandMethod = ({ expanded, row }: any) => {
+    return true;
+  }
+  /**
+     * 子表expand懒加载
+     * @param {*} param0
+     * @returns
+     */
+   const loadExpandMethod = async ({ row, rowIndex }: any) => {
+    try {
+      // 子表有数据不再重复请求
+      if (row.expandList?.length) {
+        return Promise.resolve();
+      }
+      // 请求数据
+      let res = await props.nestTableDataRequest(rowIndex);
+      console.log(res, 'loadExpandMethod---res');
+      if (!res || !res.status) {
+        row.expandList = [];
+        row.__emptyItems__ = { noDataTip: res?.data?.resultMsg || "暂无数据" };
+        return Promise.reject([])
+      }
+      let data = res.data || {};
+      console.log(data, 'loadExpandMethod---data');
+      if (!data) {
+        row.expandList = [];
+        row.__emptyItems__ = { noDataTip: res?.data?.resultMsg || "暂无数据" };
+        return Promise.reject([])
+      }
+      // 判断结果 { list, oldtableData } or list
+      let list, oldtableData;
+      if (vexutils.isArray(data)) {
+        list = data;
+        oldtableData = data;
+      } else {
+        list = data.list;
+        oldtableData = data.oldtableData || data.list;
+      }
+
+      row.expandList = list;
+      row.oldtableData = oldtableData;
+      let key = row[handleRowId.value];
+      emit("setNestOriginTableMap", key, oldtableData);
+      return Promise.resolve();
+    } catch (err: any) {
+      console.log(err, 'loadExpandMethod---err');
+      row.expandList = [];
+      row.__emptyItems__ = { noDataTip: err?.data?.resultMsg || "请求错误" };
+      return Promise.reject([]);
+    }
+  }
+  /**
+     * 子表行单击事件
+     * @param {*} table
+     * @param {*} data
+     */
+  const nestHandleClickRow = (table: any, data: any) => {
+    let checked = table.isCheckedByCheckboxRow(data.row);
+    checked = !checked;
+    state.checkedRows = []
+    table?.setCheckboxRow([data.row], checked);
+    // 是否触发子表行单击
+    emit("setNestTableClick", checked);
+    // 子表行单击 数据
+    emit("nestSetSelectRowObj", data.row[handleRowId.value], checked);
+    let clickObj = {
+      isNestTableTrigger: true,
+      checked,
+      primaryValue: data.row[handleRowId.value]
+    };
+    // 行单击事件
+    emit("handlerClickRow", data?.row, data.$rowIndex, clickObj);
+  }
+
+  return {
+    isAboutNestTable,
+    isExpandTable,
+    handleRowId,
+    toggleExpandMethod,
+    loadExpandMethod,
+    nestHandleClickRow
+  };
+}

package/packages/big-table/src/hooks/useTableParse.ts

@@ -0,0 +1,169 @@
+import vexutils from '@/utils/vexutils';
+
+export const useTableParse = (formatData: Function) => {
+  // DURATION - 解析时长类型
+  const parseDurationValue = (v: any, duration: any) => {
+    // < 1 分钟 显示 X秒;< 60 分钟 显示 X分钟;< 24 * 60 分钟 显示 X 小时 X 分钟;< 30 * 24 * 60 分钟 显示X天X小时;< 365 * 24 * 60 显示 X个月X天
+    if (!v && v !== 0) return;
+    const unitList: any = {
+      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}秒`;
+    }
+    const hu = mu * 60;
+    if (value < hu) {
+      return `${Math.floor(value / 60)}分`;
+    }
+    const du = hu * 24;
+    if (value < du) {
+      const v2 = Math.floor(value / 60) % 60;
+      return `${Math.floor(value / hu)}小时${v2 ? v2 + "分" : ""}`;
+    }
+    const MU = du * 30;
+    if (value < MU) {
+      const v2 = Math.floor(value / hu) % 24;
+      return `${Math.floor(value / du)}天${v2 ? v2 + "小时" : ""}`;
+    }
+    const yu = du * 365;
+    if (value < yu) {
+      const unit = 30;
+      const v1 = Math.floor(value / du / unit);
+      const v2 = Math.floor((value - v1 * unit * du) / du);
+      return `${v1}个月${v2 ? v2 + "天" : ""}`;
+    }
+    return `${Math.floor(value / du / 365)}年`;
+  };
+
+  // COMBINATION - 解析组合组件value
+  const parseCombinationValue = (value: any, setting: any) => {
+    let data = value ? JSON.parse(value) : [];
+    if (!Array.isArray(data)) {
+      data = [data];
+    }
+    const { combinationField: key } = setting;
+    if (!key) return value; // <- 如果没有解析字段则直接返回原值
+    return data
+      .reduce((str: string, item: any) => {
+        const v = item[key];
+        typeof v !== "undefined" && (str += `,${v}`);
+        return str;
+      }, "")
+      .slice(1);
+  };
+
+  // 格式化renderItem
+  const formatFieldText = (
+    row: any,
+    field: any,
+    fieldList: any,
+    fieldListOriginal: any,
+    isTimeAxisRenderNew?: any,
+    isTimeAxisExpand?: any
+  ) => {
+    // 轨迹组件需要重新处理 时间显示
+    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: string | null) => (text ? text : String(text) === "0" ? "0" : "");
+    const haveValue = (val: string | null) => {
+      return val !== undefined && val !== "";
+    };
+    const findField = (columnName: string, fieldList: any) => {
+      return fieldList.find((item: any) => item.columnName === columnName);
+    };
+    const html = formatText(row[field.columnName]);
+
+    // 主字段没有值，则不展示
+    if (!haveValue(html)) {
+      return "";
+    }
+
+    const { mergedFeildExpression } = field.settingObj;
+    if (mergedFeildExpression) {
+      const passList: any = [];
+
+      // 合并字段
+      const regexp = /#{(.+?)\}/g;
+      let formatHtml = mergedFeildExpression.replace(regexp, (match: any, p1: any) => {
+        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: [],
+            oldtableData: [row],
+          })[0];
+          return formatText(tableData[p1]);
+        }
+        return formatText(row[p1]);
+      });
+
+      const pass = passList.every((b: any) => b);
+      /* 如果任意次字段值为空 || 无字段权限
+        => 只展示主字段的值 */
+      if (!pass) {
+        return html;
+      }
+
+      // 赋值原字段样式
+      const originColumnNameColorList = findField(field.columnName, fieldList)?.colorAndIcon || [];
+      const findC = originColumnNameColorList.find((c: any) =>
+        vexutils.parseCondition(
+          c.condition,
+          {
+            form: {},
+            table: {
+              ...row,
+            },
+            sys: {},
+          },
+          fieldList
+        )
+      );
+
+      const originColumnNameColor = findC?.color || "inherit";
+      const regexp2 = /color(:|;)(.+?)(;|")/g;
+      formatHtml = formatHtml.replace(regexp2, (match: any, p1: any, p2: any, p3 = "") => {
+        return p3;
+      });
+
+      formatHtml = `<span style="color: ${originColumnNameColor};">${formatHtml}</span>`;
+      return formatHtml;
+    }
+
+    return html;
+  };
+
+  // imgs => imgArr
+  const imgs2imgArr = (imgs: any) => {
+    if (!imgs) return [];
+
+    return imgs
+      .replace(/(,)(data|http)/g, (match: any, p1: any, p2: any) => {
+        return `|${p2}`;
+      })
+      .split("|");
+  };
+
+  return {
+    parseDurationValue,
+    parseCombinationValue,
+    formatFieldText,
+    imgs2imgArr,
+  };
+};