@zhsz/cool-design-crud/es/components/table/helper.mjs

import { h, computed, ref, onMounted, onActivated, createVNode, nextTick } from "vue";
import "../../utils/test.mjs";
import { useCore, useTools } from "../../hooks/core.mjs";
import { isBoolean, isEmpty, isArray, isObject, debounce, addClass } from "../../utils/index.mjs";
import "@formily/core";
import { isString } from "lodash-es";
import "../../hooks/table.mjs";
import { parseTableDict, parseTableOpButtons } from "../../utils/parse.mjs";
import { renderer } from "vxe-table";
import XEClipboard from "xe-clipboard";
import { Popup, MessagePlugin } from "tdesign-vue-next";
import { Empty } from "@zhsz/cool-design";
renderer.add("tags", {
  // 默认显示模板
  renderDefault(renderOpts, params) {
    const {
      row,
      column
    } = params;
    const {
      props
    } = renderOpts;
    return parseTableDict(row[column.field], props);
  }
});
renderer.add("op", {
  // 默认显示模板
  renderDefault(renderOpts, params) {
    const {
      props
    } = renderOpts;
    return [h("div", {
      class: "cl-table__op"
    }, parseTableOpButtons({
      length: props == null ? void 0 : props.length,
      buttons: props == null ? void 0 : props.buttons
    }, {
      scope: params
    }))];
  }
});
function generateToolTip(props, content) {
  return h("div", {
    class: "cl-table__ellipsis"
  }, h(Popup, {
    overlayInnerClassName: "cl-table__tooltip",
    placement: "top-left",
    overlayInnerStyle: {
      maxWidth: "50vw",
      maxHeight: "30vh",
      overflow: "auto"
    },
    ...props
  }, {
    default: content,
    content
  }));
}
renderer.add("tooltip", {
  renderDefault(renderOpts, params) {
    const {
      props
    } = renderOpts;
    const {
      row,
      column
    } = params;
    return [generateToolTip(props, () => row[column.field])];
  },
  renderCell(renderOpts, params) {
    const {
      props
    } = renderOpts;
    const {
      row,
      column
    } = params;
    return [generateToolTip(props, () => row[column.field])];
  }
});
function useSort({
  config,
  emit,
  Table
}) {
  const {
    crud
  } = useCore();
  const defaultSort = function() {
    var _a, _b;
    let defaultSort2 = (_b = (_a = config == null ? void 0 : config.tableProps) == null ? void 0 : _a.sortConfig) == null ? void 0 : _b.defaultSort;
    const item = config.columns.find((e) => ["desc", "asc"].find((a) => {
      if (isString(e.sortable)) {
        return a === e.sortable;
      }
    }));
    if (item && item.field && item.sortable) {
      const c = {
        field: item.field,
        order: item.sortable
      };
      defaultSort2 = c;
    }
    if (defaultSort2) {
      crud.params.order = defaultSort2.order;
      crud.params.prop = (item == null ? void 0 : item.sortBy) || defaultSort2.field;
    }
    return defaultSort2;
  }();
  function onSortChange(params) {
    const {
      order,
      field
    } = params;
    let prop;
    if (config.sortRefresh) {
      prop = field;
      if (!order) {
        prop = void 0;
      }
      crud.refresh({
        prop,
        order,
        page: 1
      });
    }
    emit("sort-change", {
      prop,
      order
    });
  }
  function changeSort(prop, order) {
    Table.value.sort(prop, order);
  }
  return {
    defaultSort,
    onSortChange,
    changeSort
  };
}
function useRow({
  Table,
  config,
  emit
}) {
  const {
    crud
  } = useCore();
  async function onRadioChange(row) {
    const $table = Table.value;
    await $table.clearCheckboxRow();
    crud.selection.splice(0, crud.selection.length, row);
    emit("selection-change", crud.selection);
  }
  async function onCheckboxChange($table) {
    await $table.clearRadioRow();
    const Records = $table.getCheckboxRecords();
    crud.selection.splice(0, crud.selection.length, ...Records);
    emit("selection-change", crud.selection);
  }
  async function onRowContextMenu({
    row,
    column,
    $event,
    menu,
    $table
  }) {
    const columns = $table.getColumns();
    let checked = false;
    const isCheck = columns.some((item) => item.type === "checkbox");
    const isRadio = columns.some((item) => item.type === "radio");
    if (isCheck) {
      checked = $table.getCheckboxRecords().some((item) => item[crud.dict.primaryId] === row[crud.dict.primaryId]);
    } else if (isRadio) {
      checked = crud.selection.some((item) => item[crud.dict.primaryId] === row[crud.dict.primaryId]);
    }
    if ($table) {
      switch (menu.code) {
        case "hideCurrColumn":
          await $table.hideColumn(column);
          break;
        case "showAllColumn":
          await $table.resetColumn();
          break;
        case "exportAll":
          await $table.exportData();
          break;
        case "expand":
          await $table.setTreeExpand(row, true);
          break;
        case "contract":
          await $table.setTreeExpand(row, false);
          break;
        case "refresh":
          crud == null ? void 0 : crud.refresh();
          break;
        case "check":
          if (!checked) {
            if (isCheck) {
              await $table.setCheckboxRow(row, true);
              await onCheckboxChange($table);
            }
            if (isRadio) {
              await $table.setRadioRow(row);
              await onRadioChange(row);
            }
          } else {
            if (isCheck) {
              await $table.setCheckboxRow(row, false);
              await onCheckboxChange($table);
            }
            if (isRadio) {
              await $table.removeRadioRow();
              crud.selection = [];
              emit("selection-change", crud.selection);
            }
          }
          break;
        case "edit":
        case "update":
          crud.rowEdit(row);
          break;
        case "delete":
          crud.rowDelete(row);
          break;
        case "info":
          crud.rowInfo(row);
          break;
        case "copy":
          if (row && column) {
            if (XEClipboard.copy(row[column.field])) {
              await MessagePlugin.success("已复制到剪贴板！");
            }
          }
          break;
        case "print":
          $table.print();
          break;
        case "clearSort":
          await $table.clearSort();
          crud.params.order = null;
          crud.params.prop = null;
          crud == null ? void 0 : crud.refresh();
          emit("sort-change", {
            prop: null,
            order: null
          });
          break;
        case "sortAsc":
          await $table.sort(column.field, "asc");
          crud.params.order = "asc";
          crud.params.prop = column.field;
          crud == null ? void 0 : crud.refresh();
          emit("sort-change", {
            prop: column.field,
            order: "asc"
          });
          break;
        case "sortDesc":
          await $table.sort(column.field, "desc");
          crud.params.order = "desc";
          crud.params.prop = column.field;
          crud == null ? void 0 : crud.refresh();
          emit("sort-change", {
            prop: column.field,
            order: "desc"
          });
          break;
      }
    }
    if (config.onRowContextmenu) {
      const table = $table;
      config.onRowContextmenu({
        $table: table,
        crud,
        row,
        column,
        $event,
        menu
      });
    }
  }
  function getMenuConfig() {
    const cm = isEmpty(config.contextMenu) && !isArray(config.contextMenu) ? crud.table.contextMenu : config.contextMenu;
    const cm2 = isEmpty(config.headerMenu) && !isArray(config.headerMenu) ? crud.table.headerMenu : config.headerMenu;
    let buttons = ["refresh", "check", "copy", "edit", "delete", "sort"];
    let headerButtons = ["hideCurrColumn", "showAllColumn", "exportAll"];
    let enable = false;
    if (cm) {
      if (isArray(cm)) {
        buttons = cm || [];
        enable = Boolean(buttons.length > 0);
      } else {
        enable = true;
      }
    }
    if (cm2) {
      if (isArray(cm2)) {
        headerButtons = cm2 || [];
        enable = Boolean(headerButtons.length > 0);
      } else {
        enable = true;
      }
    }
    if (enable) {
      return {
        header: {
          options: [headerButtons.map((code) => {
            if (["hideCurrColumn", "showAllColumn", "exportAll"].includes(code)) {
              const o = {
                code,
                disabled: false
              };
              switch (code) {
                case "hideCurrColumn":
                  o.name = "隐藏列";
                  break;
                case "showAllColumn":
                  o.name = "取消所有隐藏列";
                  break;
                case "exportAll":
                  o.name = "导出所有.csv";
                  break;
              }
              return o;
            } else if (isObject(code)) {
              return code;
            } else {
              return {};
            }
          })]
        },
        body: {
          options: [buttons.map((code) => {
            if (["refresh", "check", "copy", "edit", "update", "delete", "info", "copy", "print", "sort", "expand", "contract"].includes(code)) {
              const o = {
                code,
                disabled: false
              };
              switch (code) {
                case "expand":
                  o.name = "展开节点";
                  break;
                case "contract":
                  o.name = "收缩节点";
                  break;
                case "refresh":
                  o.name = "刷新";
                  o.prefixIcon = "vxe-icon-refresh";
                  break;
                case "check":
                  o.name = "选择";
                  o.prefixIcon = "vxe-icon-square-checked";
                  break;
                case "edit":
                case "update":
                  o.name = "编辑";
                  o.prefixIcon = "vxe-icon-edit";
                  break;
                case "delete":
                  o.name = "删除";
                  o.prefixIcon = "vxe-icon-delete";
                  break;
                case "info":
                  o.name = "详情";
                  o.prefixIcon = "i-ant-design:eye-outlined";
                  break;
                case "copy":
                  o.name = "复制";
                  o.prefixIcon = "vxe-icon-copy";
                  break;
                case "print":
                  o.name = "打印";
                  o.prefixIcon = "vxe-icon-print";
                  break;
                case "sort":
                  o.name = "排序";
                  o.prefixIcon = "vxe-icon-sort";
                  o.children = [{
                    code: "clearSort",
                    name: "清除排序",
                    prefixIcon: "i-ant-design:clear-outlined"
                  }, {
                    code: "sortAsc",
                    name: "升序",
                    prefixIcon: "vxe-icon-sort-alpha-asc"
                  }, {
                    code: "sortDesc",
                    name: "降序",
                    prefixIcon: "vxe-icon-sort-alpha-desc"
                  }];
                  break;
              }
              return o;
            } else if (isObject(code)) {
              return code;
            } else {
              return {};
            }
          })]
        },
        visibleMethod(params) {
          const $table = Table.value;
          const {
            row,
            type,
            options,
            column,
            columns
          } = params;
          if ($table) {
            if (type === "body") {
              options.forEach((list) => {
                list.forEach((item) => {
                  if (item.code === "expand" || item.code === "contract") {
                    if (row && row.hasChild) {
                      const isExpand = $table.isTreeExpandByRow(row);
                      item.disabled = item.code === "expand" ? isExpand : !isExpand;
                      item.visible = true;
                    } else {
                      item.visible = false;
                      item.disabled = true;
                    }
                  }
                  if (item.code === "copy") {
                    if (((column == null ? void 0 : column.field) && (row == null ? void 0 : row[column.field])) === void 0) {
                      item.disabled = true;
                    }
                  }
                  if (item.code === "sort") {
                    if (column == null ? void 0 : column.sortable) {
                      item.visible = true;
                      if (column.order === "asc") {
                        item.children = [{
                          code: "clearSort",
                          name: "清除排序",
                          prefixIcon: "i-ant-design:clear-outlined",
                          disabled: false
                        }, {
                          code: "sortAsc",
                          name: "升序",
                          prefixIcon: "vxe-icon-sort-alpha-asc",
                          disabled: true
                        }, {
                          code: "sortDesc",
                          name: "降序",
                          prefixIcon: "vxe-icon-sort-alpha-desc",
                          disabled: false
                        }];
                      } else if (column.order === "desc") {
                        item.children = [{
                          code: "clearSort",
                          name: "清除排序",
                          prefixIcon: "i-ant-design:clear-outlined",
                          disabled: false
                        }, {
                          code: "sortAsc",
                          name: "升序",
                          prefixIcon: "vxe-icon-sort-alpha-asc",
                          disabled: false
                        }, {
                          code: "sortDesc",
                          name: "降序",
                          prefixIcon: "vxe-icon-sort-alpha-desc",
                          disabled: true
                        }];
                      } else {
                        item.children = [{
                          code: "clearSort",
                          name: "清除排序",
                          prefixIcon: "i-ant-design:clear-outlined",
                          disabled: true
                        }, {
                          code: "sortAsc",
                          name: "升序",
                          prefixIcon: "vxe-icon-sort-alpha-asc",
                          disabled: false
                        }, {
                          code: "sortDesc",
                          name: "降序",
                          prefixIcon: "vxe-icon-sort-alpha-desc",
                          disabled: false
                        }];
                      }
                    } else {
                      item.visible = false;
                    }
                  }
                  if (item.code === "check") {
                    const checked = $table.getCheckboxRecords().some((item2) => item2[crud.dict.primaryId] === (row == null ? void 0 : row[crud.dict.primaryId]));
                    if (checked) {
                      item.name = "取消选择";
                      item.prefixIcon = "vxe-icon-checkbox-unchecked";
                    } else {
                      item.name = "选择";
                      item.prefixIcon = "vxe-icon-square-checked";
                    }
                    const isCheck = columns.some((item2) => item2.type === "checkbox");
                    const isRadio = columns.some((item2) => item2.type === "radio");
                    if (isCheck && isRadio) {
                      item.visible = false;
                    } else if (isCheck || isRadio) {
                      item.visible = true;
                    } else {
                      item.visible = false;
                    }
                  }
                });
              });
            }
          }
          if (config.visibleMethod) {
            config.visibleMethod({
              $table,
              ...params
            });
          }
          return true;
        }
      };
    } else {
      return {};
    }
  }
  const menuConfig = getMenuConfig();
  return {
    menuConfig,
    onRowContextMenu
  };
}
function useHeight({
  config,
  Table
}) {
  const {
    mitt
  } = useCore();
  const {
    render
  } = useTools();
  const isAuto = computed(() => isBoolean(config.autoHeight) ? config.autoHeight : render.autoHeight);
  const maxHeight = ref(0);
  const update = debounce(async () => {
    var _a;
    if (!isAuto.value) {
      return false;
    }
    await nextTick();
    let vm = Table.value;
    let r = null;
    if (vm) {
      while (!((_a = vm.$parent) == null ? void 0 : _a.$el.className.includes("cl-crud"))) {
        vm = vm.$parent;
        r = vm.$parent.$el;
      }
      r.querySelectorAll(".cl-row").forEach((e, i, arr) => {
        if (i == arr.length - 1) {
          addClass(e, "cl-row--last");
        }
      });
      let h2 = vm.$el.offsetTop;
      let n = vm.$el.nextSibling;
      while (n && (n.className || "").includes("cl-row")) {
        h2 += n.clientHeight;
        n = n.nextSibling;
      }
      maxHeight.value = r.clientHeight - h2 - 10;
    }
  }, 100);
  mitt.on("crud.resize", () => {
    update();
  });
  onMounted(function() {
    update();
  });
  onActivated(function() {
    update();
  });
  return {
    isAuto,
    maxHeight,
    calcMaxHeight: update
  };
}
function useSelection({
  emit,
  Table
}) {
  const {
    crud
  } = useCore();
  async function onRadioChange({
    row
  }) {
    const $table = Table.value;
    await $table.clearCheckboxRow();
    crud.selection.splice(0, crud.selection.length, row);
    emit("selection-change", crud.selection);
  }
  async function onCheckboxChange({
    $table
  }) {
    await $table.clearRadioRow();
    const Records = $table.getCheckboxRecords();
    crud.selection.splice(0, crud.selection.length, ...Records);
    emit("selection-change", crud.selection);
  }
  function onCheckboxAll({
    $table
  }) {
    $table.clearRadioRow();
    const Records = $table.getCheckboxRecords();
    crud.selection.splice(0, crud.selection.length, ...Records);
    emit("selection-change", crud.selection);
  }
  async function clearCheckbox() {
    const $table = Table.value;
    await $table.clearCheckboxRow();
    crud.selection.splice(0, crud.selection.length);
    emit("selection-change", []);
  }
  return {
    selection: crud.selection,
    onRadioChange,
    onCheckboxAll,
    onCheckboxChange,
    clearCheckbox
  };
}
function useData({
  Table,
  config
}) {
  var _a, _b;
  const {
    mitt,
    crud
  } = useCore();
  const data = ref([]);
  const rowKey = ((_b = (_a = config == null ? void 0 : config.tableProps) == null ? void 0 : _a.rowConfig) == null ? void 0 : _b.keyField) || config.rowKey || "id";
  function setData(list) {
    data.value = list;
  }
  mitt.on("crud.refresh", ({
    list
  }) => {
    data.value = list;
    setTimeout(() => {
      if (crud.params.prop && crud.params.order) {
        Table.value.sort({
          field: crud.params.prop,
          order: crud.params.order
        });
      }
      if (crud.selection.length) {
        const rows = [];
        list.forEach((item) => {
          if (crud.selection.map((item2) => item2[rowKey]).includes(item.id)) {
            rows.push(item);
          }
        });
        Table.value.setCheckboxRow(rows, true);
      }
    }, 0);
  });
  return {
    data,
    setData
  };
}
function useRender() {
  const {
    slots
  } = useTools();
  function renderEmpty(emptyText) {
    return createVNode("div", {
      "class": "cl-table__empty"
    }, [slots.empty ? slots.empty() : h(Empty, {
      imageSize: 100,
      description: emptyText
    }, {})]);
  }
  function renderAppend() {
    return createVNode("div", {
      "class": "cl-table__append"
    }, [slots.append && slots.append()]);
  }
  return {
    renderEmpty,
    renderAppend
  };
}
function useTransformColumns(columns, config, Table) {
  const {
    getValue,
    browser
  } = useTools();
  const {
    crud
  } = useCore();
  const defaultConfig = {
    align: "center",
    minWidth: "100px"
  };
  function deep(arr) {
    return arr.map((e) => {
      var _a;
      const d = getValue(e);
      const r = {
        ...defaultConfig,
        ...d
      };
      switch (d.type) {
        case "checkbox":
        case "radio":
        case "seq":
          r.width = 60;
          break;
        case "expand":
          r.width = 40;
          break;
        case "op":
          delete r.type;
          r.title = crud.dict.label.op;
          r.width = r.width ? r.width : 160;
          r.fixed = browser.isMini ? null : "right";
          r.cellRender = {
            name: "op",
            props: {
              length: d.length,
              buttons: d.buttons
            }
          };
          break;
      }
      if (d == null ? void 0 : d.children) {
        r.children = deep(d.children);
      }
      if (d == null ? void 0 : d.dict) {
        r.cellRender = {
          name: "tags",
          props: d.dict
        };
      }
      console.log(r, 222);
      if (((r == null ? void 0 : r.showOverflow) || (config == null ? void 0 : config.showOverflow) || ((_a = config == null ? void 0 : config.tooltipConfig) == null ? void 0 : _a.showAll)) && !r.cellRender) {
        r.editRender = {
          ...r.editRender,
          name: "tooltip",
          props: r.tooltip
        };
      }
      return r;
    });
  }
  return deep(columns || []);
}
export {
  useData,
  useHeight,
  useRender,
  useRow,
  useSelection,
  useSort,
  useTransformColumns
};