cnhis-design-vue 3.1.1 → 3.1.4-beta.1

package/{packages/big-table/src/hooks/useFormat.ts → es/packages/big-table/src/hooks/useFormat2.mjs}

@@ -1,612 +1,480 @@
-import vexutils from '@/utils/vexutils.js';
-interface Idata {
-  tableList: any[];
-  fieldList: any[];
-  btnList: any[];
-  oldtableData: any[];
-  showButtonTop: number;
-  isNestTabel?: boolean;
-  mainTableTheUniqueKey?: string;
-  mainTableRow?: {
-    [key: string]: any;
-  };
-  nestTableId?: string;
-}
-
-export const useFormat = (state: any) => {
-  // 行数据解析逻辑
-  const formatData = (
-    data: Idata = {
-      tableList: [],
-      fieldList: [],
-      btnList: [],
-      oldtableData: [],
-      showButtonTop: 0,
-      isNestTabel: false,
-      mainTableTheUniqueKey: "",
-      mainTableRow: {},
-      nestTableId: "",
-    }
-  ) => {
-    const {
-      tableList,
-      fieldList,
-      btnList,
-      oldtableData,
-      showButtonTop,
-      isNestTabel,
-      mainTableTheUniqueKey,
-      mainTableRow,
-      nestTableId,
-    } = data;
-    const { nobutton = false } = state.options?.config || {}; //  调用表格，设置表格是否要按钮操作。
-    return tableList.map((item, index) => {
-      if (isNestTabel) {
-        // 嵌套列表中, 点击子表需要获取主表theUniqueKey, 所以格式化子表数据时, 保存主表 theUniqueKey
-        Object.assign(item, {
-          __mainTableTheUniqueKey__: mainTableTheUniqueKey,
-          __isNestTabel__: isNestTabel,
-          __mainTableRow__: mainTableRow,
-          __nestTableId__: nestTableId
-        })
-      }
-       // 因为存在树形表格，这里一定要用theUniqueKey，后面才能找到对应节点
-      Object.assign(item, {
-        my_index: item.theUniqueKey,
-        isClick: false,
-        isChecked: false
-      })
-      item._triggerMethodField = state.triggerMethodField;
-      const originalValue: any = {}; // 记录修改前的值
-      Object.keys(item).forEach(key => {
-        originalValue[key] = item[key];
-        if (vexutils.isPlainObject(item[key])) {
-          item[key] = JSON.stringify(item[key]);
-        }
-        const matchFieldList = fieldList.find(field => field.columnName === key);
-        if (!matchFieldList) return;
-        // attrType colorAndIcon 在 formatData 方法外处理的。
-        const { attrType, colorAndIcon, settingObj } = matchFieldList || {};
-        if (!attrType) {
-          matchFieldList.attrType = settingObj?.attr || undefined;
-        }
-        if (!colorAndIcon) {
-          matchFieldList.colorAndIcon = settingObj?.colorAndIcon || undefined;
-        }
-
-        // 将字段为百分数类型的值 先转化
-        if (item[key] && matchFieldList?.settingObj?.attr === "PERCENTAGE") {
-          if (vexutils.isNumber(+item[key])) {
-            // item[key] = ((+item[key] > 1 ? 1 : +item[key]) * 1000000) / 10000 + "%";
-            item[key] = accMul(+item[key], 100) + "%";
-          }
-        }
-        if (vexutils.isString(item[key])) {
-          if (matchFieldList && matchFieldList.attrType) {
-            if (
-              item[key] &&
-              (item[key].includes("http://") || item[key].includes("https://")) &&
-              matchFieldList.attrType != "PICTURE"
-            ) {
-              if (vexutils.isJSON(item[key])) {
-                item[key] = JSON.parse(item[key]);
-              }
-            }
-            // MULTISELECT PICTURE FILE
-            if (matchFieldList.attrType == "FILE") {
-              item[key] = handleJson(item[key], "str", "");
-            } else if (matchFieldList.attrType == "MULTISELECT") {
-              if (vexutils.isJSON(item[key])) {
-                item[key] = JSON.parse(item[key]);
-              }
-              item[key] = handleMULTISELECT(item[key], "objStr");
-            } else if (matchFieldList.attrType == "LABEL") {
-              if (vexutils.isJSON(item[key])) {
-                item[key] = JSON.parse(item[key]);
-                if (!item[key].labels) {
-                  item[key] = handleJson(item[key], "type", "labelStr");
-                }
-              }
-              if (item[key]) {
-                const labels = item[key].labels || item[key].split(",");
-                let curHtml = [];
-                if (labels?.length > 0) {
-                  curHtml = handleLabel(labels);
-                }
-                item[key] = state.source === "guageChoice" ? curHtml.join("、") : curHtml.join("");
-              }
-            } else if (matchFieldList.attrType == "CASCADE") {
-              if (vexutils.isJSON(item[key])) {
-                item[key] = JSON.parse(item[key]);
-              }
-              item[key] = handleJson(item[key], "type", "objStr");
-            } else if (matchFieldList.attrType == "EVALUATE") {
-              const str = item[key];
-              if (vexutils.isJSON(str)) {
-                const obj = JSON.parse(str);
-                item[key] = obj.star ? `${obj.star}星` : "";
-              } else {
-                item[key] = str;
-              }
-            } else if (matchFieldList.attrType == "MAP") {
-              const str = item[key];
-              if (vexutils.isJSON(str)) {
-                const obj = JSON.parse(str);
-                item[key] = obj.address || "";
-              } else {
-                item[key] = str;
-              }
-            } else if (
-              matchFieldList.attrType == "PICTURE" &&
-              vexutils.isJSON(item[key])
-            ) {
-              let pics = JSON.parse(item[key]);
-              pics = pics.map((ii: any) => ii.url);
-              item[key] = pics.join(",");
-            }
-          } else if (item[key].includes("http://") || item[key].includes("https://")) {
-            try {
-              item[key] = JSON.parse(item[key]);
-              item[key] = handleJson(item[key], "str", "");
-            } catch (e) {
-              e;
-            }
-          }
-          // 样式处理
-          if (
-            item[key] &&
-            vexutils.isString(item[key]) &&
-            item[key].startsWith("###{")
-          ) {
-            const temp = JSON.parse(item[key].replace("###", ""));
-            // 格式化时间
-            if ("tooltip" in temp) {
-              item[key] = temp;
-              // item[key] = temp.value;
-            } else {
-              if (state.source === "guageChoice") {
-                item[key] = temp.change_text;
-              } else {
-                if (temp.background != "#ffffff") {
-                  item[key] = `<span class="field-span" style="color:${
-                    temp.background
-                  }"><span class="${temp.icon}"></span>${temp.change_text || ""}</span>`;
-                } else {
-                  item[key] = temp.change_text;
-                }
-              }
-            }
-          }
-        }
-        const SPANTAG_REGEXP = /<\/?span.*?>/g;
-        if (
-          item[key] &&
-          matchFieldList &&
-          matchFieldList.colorAndIcon &&
-          !SPANTAG_REGEXP.test(item[key])
-        ) {
-          const { colorAndIcon = [] } = matchFieldList;
-          if (colorAndIcon && colorAndIcon.length) {
-            const findC = colorAndIcon.find((c: any) =>
-              vexutils.parseCondition(
-                c.condition,
-                {
-                  form: {},
-                  table: { ...oldtableData[index] },
-                  sys: {},
-                },
-                fieldList
-              )
-            );
-            if (findC) {
-              if (state.source !== "guageChoice") {
-                item[key] = `<span style="color:${findC.color}"><span class="${
-                  findC.icon
-                }"></span>${item[key] || ""}</span>`;
-              }
-            }
-          }
-        }
-      });
-      if (item.operatorColumn) {
-        item["btnList"] = [];
-        item["allBtnList"] = [];
-        item["tileBtnList"] = [];
-        item["foldBtnList"] = [];
-        // this.$set(item, 'btnList', []);
-        // this.$set(item, 'allBtnList', []);
-        // this.$set(item, 'tileBtnList', []);
-        // this.$set(item, 'foldBtnList', []);
-        const btnLinks: any[] = [];
-        if (!nobutton) {
-          btnList.forEach(btn => {
-            const rowOperatorId = item.operatorColumn.find((v: any) => v.includes(btn.sid));
-            if (rowOperatorId) {
-              /** 获取按钮的操作对象 */
-              if (btn.isShow == "1") {
-                if (btn.type == "LINK") {
-                  btnLinks.push(btn.name);
-                  // 如果是 switch 类型的 需要取原始值(###开头的值会被解析,switch的有一套自己的解析逻辑)
-                  const settingObj = Array.isArray(btn.settingObj)
-                    ? btn.settingObj[0]
-                    : btn.settingObj;
-                  const name = btn.name;
-                  if (settingObj && settingObj.linkShowType == "switch") {
-                    item[name] = originalValue[name] || item[name];
-                  }
-                }
-                item.btnList.push(btn);
-                item.allBtnList.push(btn);
-                if (!isPrintBtn(btn)) {
-                  // 不是打印按钮才显示在列表的操作按钮
-                  if (btn.toggle == "fold") {
-                    // if (showButtonTop == 1) {
-                    //   if (
-                    //     ["EDIT", "DELETE"].includes(btn.type) &&
-                    //     btn.showStyle == "only_icon"
-                    //   ) {
-                    //     item.foldBtnList.push(btn);
-                    //     item.showOperatorBtn = true;
-                    //   }
-                    // } else {
-                    //   item.foldBtnList.push(btn);
-                    // }
-                    item.foldBtnList.push(btn);
-                  } else {
-                    // if (showButtonTop == 1) {
-                    //   if (
-                    //     ["EDIT", "DELETE"].includes(btn.type) &&
-                    //     btn.showStyle == "only_icon"
-                    //   ) {
-                    //     item.tileBtnList.push(btn);
-                    //     item.showOperatorBtn = true;
-                    //   }
-                    // } else {
-                    //   item.tileBtnList.push(btn);
-                    // }
-                    item.tileBtnList.push(btn);
-                  }
-                }
-              }
-            } else if (btn.type == "ADD" || btn.type == "BATCH") {
-              btn.isShow == "1" ? item.allBtnList.push(btn) : null;
-            }
-          });
-        }
-        item["btnLinks"] = btnLinks;
-        // this.$set(item, 'btnLinks', btnLinks);
-      }
-      fieldList.forEach(field => {
-        if (
-          field.fieldType == "DATE" ||
-          field.fieldType == "DATETIME" ||
-          field.fieldType == "TIME"
-        ) {
-          if (field.settingObj && field.settingObj.attr == "BIRTHDAY" && field.settingObj.format) {
-            const year = 31536000000;
-            const nowDate = +new Date();
-            let curAge, curStr, mmdd;
-            const hasAge = field.settingObj.format.includes("age");
-            if (vexutils.isNumber(+item[field.columnName])) {
-              curStr = new Date(+item[field.columnName]).toLocaleDateString().replace(/\//g, "-");
-            } else {
-              curStr = item[field.columnName];
-            }
-            if (!curStr) return;
-            // let curDate = +new Date(curStr.replace((/-/g, '/')));
-            const curDate = +new Date(curStr.replace("/"));
-            if (hasAge) {
-              mmdd = curStr.split("-");
-              mmdd.shift();
-              curAge = (nowDate - curDate) / year;
-              if (curAge < 0 || isNaN(curAge)) {
-                curAge = 0;
-              }
-              item[field.columnName] =
-                field.settingObj.format == "age"
-                  ? curAge + "岁"
-                  : mmdd.join("-") + `（${curAge}岁）`;
-            } else {
-              item[field.columnName] = vexutils.toDateString(
-                curStr,
-                field.settingObj.format
-              );
-            }
-          } else if (vexutils.isNumber(+item[field.columnName])) {
-            item[field.columnName] = vexutils.formatTime(
-              field.fieldType,
-              item[field.columnName]
-            );
-          } else if (vexutils.isJSON(field.guageSetting)) {
-            const guageSetting = JSON.parse(field.guageSetting);
-            if (guageSetting.startToStop === "1") {
-              try {
-                const arr = JSON.parse(item[field.columnName]);
-                item[field.columnName] = arr.join("~");
-              } catch {
-                item[field.columnName] = "";
-              }
-            }
-          }
-        }
-        if (field.settingObj && field.settingObj.attr == "WEBSITE") {
-          if (item[field.columnName]) {
-            let showKey = field.columnName;
-            let showName = "";
-            if (field.settingObj.websiteAttr) {
-              if (field.settingObj.websiteAttr.startsWith("table.")) {
-                showKey = field.settingObj.websiteAttr.split(".")[1];
-              } else {
-                showName = field.settingObj.websiteAttr;
-              }
-            }
-            showName = showName ? showName : item[showKey] || item[field.columnName];
-            if (state.source === "guageChoice") {
-              item[field.columnName] = showName;
-            } else {
-              item[field.columnName] = `<span ><a href="${item[field.columnName]}" title="${
-                item[field.columnName]
-              }" target="_blank">${showName}</a></span>`;
-            }
-          }
-        } else if (field.fieldSetting) {
-          item.fieldSetting = field.fieldSetting;
-        }
-
-        // 处理量表数据
-        if (field.guageType) {
-          const { guageType, columnName, guageSetting, settingObj = {} } = field;
-          let guageSettingObj = null;
-          if (vexutils.isJSON(guageSetting)) {
-            guageSettingObj = JSON.parse(guageSetting);
-          }
-          if (guageType == "CHECKBOX_BLOCK" || guageType == "EVALUATE_CHECKBOX_BLOCK") {
-            if (vexutils.isJSON(item[columnName])) {
-              item[columnName] = JSON.parse(item[columnName]).join(",");
-            }
-          } else if (guageType == "SELECT") {
-            if (guageSettingObj.isMultiple) {
-              if (vexutils.isJSON(item[columnName])) {
-                item[columnName] = item[columnName] ? JSON.parse(item[columnName]).join(",") : "";
-              }
-            }
-          } else if (guageType == "SEARCH_CASCADE") {
-            if (item[columnName]) {
-              if (vexutils.isJSON(item[columnName])) {
-                item[columnName] = JSON.parse(item[columnName]).join(",");
-              } else {
-                if (Array.isArray(item[columnName])) {
-                  item[columnName] = item[columnName].join(",");
-                }
-              }
-            }
-          } else if (guageType == "DATE" || guageType == "TIME") {
-            if (guageSettingObj.startToStop == 1) {
-              item[columnName] = item[columnName] ? JSON.parse(item[columnName]).join(",") : "";
-            }
-          } else if (guageType == "LOCATION") {
-            if (vexutils.isJSON(item[columnName])) {
-              const valObj = JSON.parse(item[columnName]);
-              item[columnName] = valObj.address || valObj.name || "";
-            }
-          } else if (guageType == "LABEL" && settingObj.attr !== "LABEL") {
-            if (vexutils.isJSON(item[columnName])) {
-              item[columnName] = JSON.parse(item[columnName]);
-              if (!item[columnName].labels) {
-                item[columnName] = handleJson(item[columnName], "type", "labelStr");
-              }
-            }
-            if (item[columnName]) {
-              let { labels } = item[columnName];
-              let curHtml = [];
-              if (labels && vexutils.isJSON(labels)) {
-                labels = JSON.parse(labels);
-              }
-              if (Array.isArray(labels) && labels?.length > 0) {
-                curHtml = handleLabel(labels);
-              }
-              item[columnName] =
-                state.source === "guageChoice" ? curHtml.join("、") : curHtml.join("");
-            }
-          } else if (guageType == "ADDRESS") {
-            if (vexutils.isJSON(item[columnName])) {
-              const valObj: any = JSON.parse(item[columnName]);
-              const p = valObj.province?.label || "";
-              const c = valObj.city?.label || "";
-              const a = valObj.area?.label || "";
-              const d = valObj.address || "";
-              if (!!p && !c && !a && !d) {
-                item[columnName] = `${p}`;
-              } else if (!!p && !!c && !a && !d) {
-                item[columnName] = `${p}/${c}`;
-              } else if (!!p && !!c && !!a && !d) {
-                item[columnName] = `${p}/${c}/${a}`;
-              } else if (!!p && !!c && !!a && !!d) {
-                item[columnName] = `${p}/${c}/${a}/${d}`;
-              }
-            }
-          }
-        }
-
-        // 过滤"{}" "[]" 字符串
-
-        if (item[field.columnName] == "[]" || item[field.columnName] == "{}") {
-          item[field.columnName] = "";
-        }
-      });
-
-      if (item.children) {
-        item.childrenList = item.children;
-        item.hasChildren = true;
-        delete item.children;
-        formatData({
-          tableList: item.childrenList,
-          fieldList,
-          btnList,
-          oldtableData,
-          showButtonTop,
-        });
-      }
-      return item;
-    });
-  };
-  const isPrintBtn = (btn: any) => {
-    if (!btn.settingList) return false;
-    const copySettingObj = JSON.parse(btn.settingList);
-    let settingObj: any = {};
-    if (Array.isArray(copySettingObj)) {
-      settingObj = copySettingObj[0];
-    } else {
-      settingObj = copySettingObj;
-    }
-    return settingObj.trigger_type === "PRINT";
-  };
-  /**
-   * 量表下拉框为数据源时 需要解析数据
-   * @param {*} labels
-   */
-  const handleLabel = (labels: any) => {
-    return labels.map((v: any) => {
-      if (state.source === "guageChoice") {
-        return v.labelName || v;
-      } else {
-        let color = "#5585f5";
-        if (v?.color?.includes("-")) {
-          color = "#5585f5";
-        } else {
-          color = v.color || "#5585f5";
-        }
-        return `<span class="table-label" style="background: ${color}; border-color: ${color}; color: #fff;">${
-          v.labelName || v
-        }</span>`;
-      }
-    });
-  };
-  const handleJson = (target: any, func: any, type: any) => {
-    if (target && target.length > 0) {
-      if (func == "str") {
-        target = toStr(target);
-      } else if (func == "type") {
-        target = dataTypeFormat(target, type);
-      }
-    } else if (target.value && target.value.length > 0) {
-      if (func == "str") {
-        target = toStr(JSON.parse(target.value));
-      } else if (func == "type") {
-        target = dataTypeFormat(JSON.parse(target.value), type);
-      }
-    } else {
-      if (target[type]) {
-        return target[type];
-      }
-      // 没有解析的属性 “type” 返回空，避免列表展示出 json 字符串
-      return "";
-    }
-    return target;
-  };
-  // 单独处理搜索多选
-  const handleMULTISELECT = (target: any, type: any) => {
-    if (Array.isArray(target)) {
-      return "";
-    } else {
-      target = dataTypeFormat(target, type);
-      return target;
-    }
-  };
-  // 处理表格中附件
-  const toStr = (list: any) => {
-    const text: any = [];
-    if (!Array.isArray(list) || list.length === 0) return "";
-    list.forEach(obj => {
-      let res = `<span ><a href="${obj.url}" target="_blank">${obj.name}</a></span>`;
-      if (state.source === "guageChoice") {
-        res = obj.name;
-      }
-      text.push(res);
-    });
-    if (state.source === "guageChoice") {
-      return text.join("、");
-    }
-    return text.join(",");
-  };
-  // MULTISELECT 搜索多选
-  const dataTypeFormat = (list: any, type: any) => {
-    let text = "";
-
-    if (Array.isArray(list)) return text || list;
-    if (vexutils.isPlainObject(list)) {
-      text = list[type];
-    } else {
-      return text;
-    }
-    return text;
-  };
-  /**
-   * 百分比精度计算
-   */
-  const accMul = (value: number | string, percent: number | string) => {
-    let m = 0;
-    const s1 = value.toString();
-    const s2 = percent.toString();
-    try {
-      const len = s1.split(".")[1]?.length || 0;
-      m += len;
-    } catch (e) {
-      console.log(e);
-    }
-    try {
-      const len = s2.split(".")[1]?.length || 0;
-      m += len;
-    } catch (e) {
-      console.log(e);
-    }
-
-    return (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);
-  };
-  /**
-   * @description: 将HTML格式转换为纯文本
-   */
-  const htmlToText = (HTML: any) => {
-    const input = HTML;
-    return input
-      .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, "")
-      .replace(/<[^>]+?>/g, "")
-      .replace(/\s+/g, " ")
-      .replace(/ /g, " ")
-      .replace(/>/g, " ");
-  };
-
-  /**
-   * 获取按钮自定义颜色
-   * @param {string} v
-   */
-  const getBtnStyle = (v: any) => {
-    // custom_bg， white_bg， none_bg
-    if (v.showStyle == "white_bg") {
-      return {
-        "border-color": v.color,
-        color: v.color,
-      };
-    } else if (v.showStyle == "none_bg") {
-      return {
-        color: v.color,
-      };
-    } else if (v.showStyle == "only_icon") {
-      return {
-        "background-color": v.color,
-        "border-color": v.color,
-        // color: v.color
-      };
-    }
-    return {
-      "background-color": v.color,
-      "border-color": v.color,
-    };
-  };
-
-  return {
-    formatData,
-    htmlToText,
-    getBtnStyle,
-  };
-};
+import vexutils from 'cnhis-design-vue/es/src/utils/vexutils';
+
+const useFormat = (state) => {
+  const formatData = (data = {
+    tableList: [],
+    fieldList: [],
+    btnList: [],
+    oldtableData: [],
+    showButtonTop: 0,
+    isNestTabel: false,
+    mainTableTheUniqueKey: "",
+    mainTableRow: {},
+    nestTableId: ""
+  }) => {
+    const {
+      tableList,
+      fieldList,
+      btnList,
+      oldtableData,
+      showButtonTop,
+      isNestTabel,
+      mainTableTheUniqueKey,
+      mainTableRow,
+      nestTableId
+    } = data;
+    const { nobutton = false } = state.options?.config || {};
+    return tableList.map((item, index) => {
+      if (isNestTabel) {
+        Object.assign(item, {
+          __mainTableTheUniqueKey__: mainTableTheUniqueKey,
+          __isNestTabel__: isNestTabel,
+          __mainTableRow__: mainTableRow,
+          __nestTableId__: nestTableId
+        });
+      }
+      Object.assign(item, {
+        my_index: item.theUniqueKey,
+        isClick: false,
+        isChecked: false
+      });
+      item._triggerMethodField = state.triggerMethodField;
+      const originalValue = {};
+      Object.keys(item).forEach((key) => {
+        originalValue[key] = item[key];
+        if (vexutils.isPlainObject(item[key])) {
+          item[key] = JSON.stringify(item[key]);
+        }
+        const matchFieldList = fieldList.find((field) => field.columnName === key);
+        if (!matchFieldList)
+          return;
+        const { attrType, colorAndIcon, settingObj } = matchFieldList || {};
+        if (!attrType) {
+          matchFieldList.attrType = settingObj?.attr || void 0;
+        }
+        if (!colorAndIcon) {
+          matchFieldList.colorAndIcon = settingObj?.colorAndIcon || void 0;
+        }
+        if (item[key] && matchFieldList?.settingObj?.attr === "PERCENTAGE") {
+          if (vexutils.isNumber(+item[key])) {
+            item[key] = accMul(+item[key], 100) + "%";
+          }
+        }
+        if (vexutils.isString(item[key])) {
+          if (matchFieldList && matchFieldList.attrType) {
+            if (item[key] && (item[key].includes("http://") || item[key].includes("https://")) && matchFieldList.attrType != "PICTURE") {
+              if (vexutils.isJSON(item[key])) {
+                item[key] = JSON.parse(item[key]);
+              }
+            }
+            if (matchFieldList.attrType == "FILE") {
+              item[key] = handleJson(item[key], "str", "");
+            } else if (matchFieldList.attrType == "MULTISELECT") {
+              if (vexutils.isJSON(item[key])) {
+                item[key] = JSON.parse(item[key]);
+              }
+              item[key] = handleMULTISELECT(item[key], "objStr");
+            } else if (matchFieldList.attrType == "LABEL") {
+              if (vexutils.isJSON(item[key])) {
+                item[key] = JSON.parse(item[key]);
+                if (!item[key].labels) {
+                  item[key] = handleJson(item[key], "type", "labelStr");
+                }
+              }
+              if (item[key]) {
+                const labels = item[key].labels || item[key].split(",");
+                let curHtml = [];
+                if (labels?.length > 0) {
+                  curHtml = handleLabel(labels);
+                }
+                item[key] = state.source === "guageChoice" ? curHtml.join("\u3001") : curHtml.join("");
+              }
+            } else if (matchFieldList.attrType == "CASCADE") {
+              if (vexutils.isJSON(item[key])) {
+                item[key] = JSON.parse(item[key]);
+              }
+              item[key] = handleJson(item[key], "type", "objStr");
+            } else if (matchFieldList.attrType == "EVALUATE") {
+              const str = item[key];
+              if (vexutils.isJSON(str)) {
+                const obj = JSON.parse(str);
+                item[key] = obj.star ? `${obj.star}\u661F` : "";
+              } else {
+                item[key] = str;
+              }
+            } else if (matchFieldList.attrType == "MAP") {
+              const str = item[key];
+              if (vexutils.isJSON(str)) {
+                const obj = JSON.parse(str);
+                item[key] = obj.address || "";
+              } else {
+                item[key] = str;
+              }
+            } else if (matchFieldList.attrType == "PICTURE" && vexutils.isJSON(item[key])) {
+              let pics = JSON.parse(item[key]);
+              pics = pics.map((ii) => ii.url);
+              item[key] = pics.join(",");
+            }
+          } else if (item[key].includes("http://") || item[key].includes("https://")) {
+            try {
+              item[key] = JSON.parse(item[key]);
+              item[key] = handleJson(item[key], "str", "");
+            } catch (e) {
+            }
+          }
+          if (item[key] && vexutils.isString(item[key]) && item[key].startsWith("###{")) {
+            const temp = JSON.parse(item[key].replace("###", ""));
+            if ("tooltip" in temp) {
+              item[key] = temp;
+            } else {
+              if (state.source === "guageChoice") {
+                item[key] = temp.change_text;
+              } else {
+                if (temp.background != "#ffffff") {
+                  item[key] = `<span class="field-span" style="color:${temp.background}"><span class="${temp.icon}"></span>${temp.change_text || ""}</span>`;
+                } else {
+                  item[key] = temp.change_text;
+                }
+              }
+            }
+          }
+        }
+        const SPANTAG_REGEXP = /<\/?span.*?>/g;
+        if (item[key] && matchFieldList && matchFieldList.colorAndIcon && !SPANTAG_REGEXP.test(item[key])) {
+          const { colorAndIcon: colorAndIcon2 = [] } = matchFieldList;
+          if (colorAndIcon2 && colorAndIcon2.length) {
+            const findC = colorAndIcon2.find((c) => vexutils.parseCondition(c.condition, {
+              form: {},
+              table: { ...oldtableData[index] },
+              sys: {}
+            }, fieldList));
+            if (findC) {
+              if (state.source !== "guageChoice") {
+                item[key] = `<span style="color:${findC.color}"><span class="${findC.icon}"></span>${item[key] || ""}</span>`;
+              }
+            }
+          }
+        }
+      });
+      if (item.operatorColumn) {
+        item["btnList"] = [];
+        item["allBtnList"] = [];
+        item["tileBtnList"] = [];
+        item["foldBtnList"] = [];
+        const btnLinks = [];
+        if (!nobutton) {
+          btnList.forEach((btn) => {
+            const rowOperatorId = item.operatorColumn.find((v) => v.includes(btn.sid));
+            if (rowOperatorId) {
+              if (btn.isShow == "1") {
+                if (btn.type == "LINK") {
+                  btnLinks.push(btn.name);
+                  const settingObj = Array.isArray(btn.settingObj) ? btn.settingObj[0] : btn.settingObj;
+                  const name = btn.name;
+                  if (settingObj && settingObj.linkShowType == "switch") {
+                    item[name] = originalValue[name] || item[name];
+                  }
+                }
+                item.btnList.push(btn);
+                item.allBtnList.push(btn);
+                if (!isPrintBtn(btn)) {
+                  if (btn.toggle == "fold") {
+                    item.foldBtnList.push(btn);
+                  } else {
+                    item.tileBtnList.push(btn);
+                  }
+                }
+              }
+            } else if (btn.type == "ADD" || btn.type == "BATCH") {
+              btn.isShow == "1" ? item.allBtnList.push(btn) : null;
+            }
+          });
+        }
+        item["btnLinks"] = btnLinks;
+      }
+      fieldList.forEach((field) => {
+        if (field.fieldType == "DATE" || field.fieldType == "DATETIME" || field.fieldType == "TIME") {
+          if (field.settingObj && field.settingObj.attr == "BIRTHDAY" && field.settingObj.format) {
+            const year = 31536e6;
+            const nowDate = +new Date();
+            let curAge, curStr, mmdd;
+            const hasAge = field.settingObj.format.includes("age");
+            if (vexutils.isNumber(+item[field.columnName])) {
+              curStr = new Date(+item[field.columnName]).toLocaleDateString().replace(/\//g, "-");
+            } else {
+              curStr = item[field.columnName];
+            }
+            if (!curStr)
+              return;
+            const curDate = +new Date(curStr.replace("/"));
+            if (hasAge) {
+              mmdd = curStr.split("-");
+              mmdd.shift();
+              curAge = (nowDate - curDate) / year;
+              if (curAge < 0 || isNaN(curAge)) {
+                curAge = 0;
+              }
+              item[field.columnName] = field.settingObj.format == "age" ? curAge + "\u5C81" : mmdd.join("-") + `\uFF08${curAge}\u5C81\uFF09`;
+            } else {
+              item[field.columnName] = vexutils.toDateString(curStr, field.settingObj.format);
+            }
+          } else if (vexutils.isNumber(+item[field.columnName])) {
+            item[field.columnName] = vexutils.formatTime(field.fieldType, item[field.columnName]);
+          } else if (vexutils.isJSON(field.guageSetting)) {
+            const guageSetting = JSON.parse(field.guageSetting);
+            if (guageSetting.startToStop === "1") {
+              try {
+                const arr = JSON.parse(item[field.columnName]);
+                item[field.columnName] = arr.join("~");
+              } catch {
+                item[field.columnName] = "";
+              }
+            }
+          }
+        }
+        if (field.settingObj && field.settingObj.attr == "WEBSITE") {
+          if (item[field.columnName]) {
+            let showKey = field.columnName;
+            let showName = "";
+            if (field.settingObj.websiteAttr) {
+              if (field.settingObj.websiteAttr.startsWith("table.")) {
+                showKey = field.settingObj.websiteAttr.split(".")[1];
+              } else {
+                showName = field.settingObj.websiteAttr;
+              }
+            }
+            showName = showName ? showName : item[showKey] || item[field.columnName];
+            if (state.source === "guageChoice") {
+              item[field.columnName] = showName;
+            } else {
+              item[field.columnName] = `<span ><a href="${item[field.columnName]}" title="${item[field.columnName]}" target="_blank">${showName}</a></span>`;
+            }
+          }
+        } else if (field.fieldSetting) {
+          item.fieldSetting = field.fieldSetting;
+        }
+        if (field.guageType) {
+          const { guageType, columnName, guageSetting, settingObj = {} } = field;
+          let guageSettingObj = null;
+          if (vexutils.isJSON(guageSetting)) {
+            guageSettingObj = JSON.parse(guageSetting);
+          }
+          if (guageType == "CHECKBOX_BLOCK" || guageType == "EVALUATE_CHECKBOX_BLOCK") {
+            if (vexutils.isJSON(item[columnName])) {
+              item[columnName] = JSON.parse(item[columnName]).join(",");
+            }
+          } else if (guageType == "SELECT") {
+            if (guageSettingObj.isMultiple) {
+              if (vexutils.isJSON(item[columnName])) {
+                item[columnName] = item[columnName] ? JSON.parse(item[columnName]).join(",") : "";
+              }
+            }
+          } else if (guageType == "SEARCH_CASCADE") {
+            if (item[columnName]) {
+              if (vexutils.isJSON(item[columnName])) {
+                item[columnName] = JSON.parse(item[columnName]).join(",");
+              } else {
+                if (Array.isArray(item[columnName])) {
+                  item[columnName] = item[columnName].join(",");
+                }
+              }
+            }
+          } else if (guageType == "DATE" || guageType == "TIME") {
+            if (guageSettingObj.startToStop == 1) {
+              item[columnName] = item[columnName] ? JSON.parse(item[columnName]).join(",") : "";
+            }
+          } else if (guageType == "LOCATION") {
+            if (vexutils.isJSON(item[columnName])) {
+              const valObj = JSON.parse(item[columnName]);
+              item[columnName] = valObj.address || valObj.name || "";
+            }
+          } else if (guageType == "LABEL" && settingObj.attr !== "LABEL") {
+            if (vexutils.isJSON(item[columnName])) {
+              item[columnName] = JSON.parse(item[columnName]);
+              if (!item[columnName].labels) {
+                item[columnName] = handleJson(item[columnName], "type", "labelStr");
+              }
+            }
+            if (item[columnName]) {
+              let { labels } = item[columnName];
+              let curHtml = [];
+              if (labels && vexutils.isJSON(labels)) {
+                labels = JSON.parse(labels);
+              }
+              if (Array.isArray(labels) && labels?.length > 0) {
+                curHtml = handleLabel(labels);
+              }
+              item[columnName] = state.source === "guageChoice" ? curHtml.join("\u3001") : curHtml.join("");
+            }
+          } else if (guageType == "ADDRESS") {
+            if (vexutils.isJSON(item[columnName])) {
+              const valObj = JSON.parse(item[columnName]);
+              const p = valObj.province?.label || "";
+              const c = valObj.city?.label || "";
+              const a = valObj.area?.label || "";
+              const d = valObj.address || "";
+              if (!!p && !c && !a && !d) {
+                item[columnName] = `${p}`;
+              } else if (!!p && !!c && !a && !d) {
+                item[columnName] = `${p}/${c}`;
+              } else if (!!p && !!c && !!a && !d) {
+                item[columnName] = `${p}/${c}/${a}`;
+              } else if (!!p && !!c && !!a && !!d) {
+                item[columnName] = `${p}/${c}/${a}/${d}`;
+              }
+            }
+          }
+        }
+        if (item[field.columnName] == "[]" || item[field.columnName] == "{}") {
+          item[field.columnName] = "";
+        }
+      });
+      if (item.children) {
+        item.childrenList = item.children;
+        item.hasChildren = true;
+        delete item.children;
+        formatData({
+          tableList: item.childrenList,
+          fieldList,
+          btnList,
+          oldtableData,
+          showButtonTop
+        });
+      }
+      return item;
+    });
+  };
+  const isPrintBtn = (btn) => {
+    if (!btn.settingList)
+      return false;
+    const copySettingObj = JSON.parse(btn.settingList);
+    let settingObj = {};
+    if (Array.isArray(copySettingObj)) {
+      settingObj = copySettingObj[0];
+    } else {
+      settingObj = copySettingObj;
+    }
+    return settingObj.trigger_type === "PRINT";
+  };
+  const handleLabel = (labels) => {
+    return labels.map((v) => {
+      if (state.source === "guageChoice") {
+        return v.labelName || v;
+      } else {
+        let color = "#5585f5";
+        if (v?.color?.includes("-")) {
+          color = "#5585f5";
+        } else {
+          color = v.color || "#5585f5";
+        }
+        return `<span class="table-label" style="background: ${color}; border-color: ${color}; color: #fff;">${v.labelName || v}</span>`;
+      }
+    });
+  };
+  const handleJson = (target, func, type) => {
+    if (target && target.length > 0) {
+      if (func == "str") {
+        target = toStr(target);
+      } else if (func == "type") {
+        target = dataTypeFormat(target, type);
+      }
+    } else if (target.value && target.value.length > 0) {
+      if (func == "str") {
+        target = toStr(JSON.parse(target.value));
+      } else if (func == "type") {
+        target = dataTypeFormat(JSON.parse(target.value), type);
+      }
+    } else {
+      if (target[type]) {
+        return target[type];
+      }
+      return "";
+    }
+    return target;
+  };
+  const handleMULTISELECT = (target, type) => {
+    if (Array.isArray(target)) {
+      return "";
+    } else {
+      target = dataTypeFormat(target, type);
+      return target;
+    }
+  };
+  const toStr = (list) => {
+    const text = [];
+    if (!Array.isArray(list) || list.length === 0)
+      return "";
+    list.forEach((obj) => {
+      let res = `<span ><a href="${obj.url}" target="_blank">${obj.name}</a></span>`;
+      if (state.source === "guageChoice") {
+        res = obj.name;
+      }
+      text.push(res);
+    });
+    if (state.source === "guageChoice") {
+      return text.join("\u3001");
+    }
+    return text.join(",");
+  };
+  const dataTypeFormat = (list, type) => {
+    let text = "";
+    if (Array.isArray(list))
+      return text || list;
+    if (vexutils.isPlainObject(list)) {
+      text = list[type];
+    } else {
+      return text;
+    }
+    return text;
+  };
+  const accMul = (value, percent) => {
+    let m = 0;
+    const s1 = value.toString();
+    const s2 = percent.toString();
+    try {
+      const len = s1.split(".")[1]?.length || 0;
+      m += len;
+    } catch (e) {
+      console.log(e);
+    }
+    try {
+      const len = s2.split(".")[1]?.length || 0;
+      m += len;
+    } catch (e) {
+      console.log(e);
+    }
+    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
+  };
+  const htmlToText = (HTML) => {
+    const input = HTML;
+    return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, "").replace(/<[^>]+?>/g, "").replace(/\s+/g, " ").replace(/ /g, " ").replace(/>/g, " ");
+  };
+  const getBtnStyle = (v) => {
+    if (v.showStyle == "white_bg") {
+      return {
+        "border-color": v.color,
+        color: v.color
+      };
+    } else if (v.showStyle == "none_bg") {
+      return {
+        color: v.color
+      };
+    } else if (v.showStyle == "only_icon") {
+      return {
+        "background-color": v.color,
+        "border-color": v.color
+      };
+    }
+    return {
+      "background-color": v.color,
+      "border-color": v.color
+    };
+  };
+  return {
+    formatData,
+    htmlToText,
+    getBtnStyle
+  };
+};
+
+export { useFormat };