@zhsz/cool-design-crud/es/components/toolbar/index.mjs

import { defineComponent, reactive, ref, nextTick, h, createVNode, createTextVNode } from "vue";
import Sortable from "sortablejs";
import { Icon } from "@iconify/vue";
import XEUtils from "xe-utils";
import "../../utils/test.mjs";
import { useCore } from "../../hooks/core.mjs";
import "clone-deep";
import "array.prototype.flat";
import "merge";
import "@formily/core";
import { sortBy } from "lodash-es";
import "../../hooks/table.mjs";
import { Checkbox, Button } from "tdesign-vue-next";
import { NPopover, NScrollbar } from "naive-ui";
import GlobalConfig, { formatText } from "./utils.mjs";
const orderStorageKey = "VXE_TABLE_CUSTOM_COLUMN_ORDER";
const index = /* @__PURE__ */ defineComponent({
  name: "cl-toolbar",
  props: {},
  setup: function(props) {
    const {
      crud
    } = useCore();
    let $xetable;
    const reactData = reactive({
      isRefresh: false,
      columns: []
    });
    const customStore = reactive({
      isAll: false,
      isIndeterminate: false,
      visible: false
    });
    const indexMap = {};
    const checkCustomStatus = () => {
      const {
        columns
      } = reactData;
      const {
        computeCustomOpts: computeTableCustomOpts
      } = $xetable.getComputeMaps();
      const tableCustomOpts = computeTableCustomOpts.value;
      const {
        checkMethod
      } = tableCustomOpts;
      customStore.isAll = columns.filter((item) => !item.type && item.title !== "操作").every((column) => (checkMethod ? !checkMethod({
        column
      }) : false) || column.visible);
      customStore.isIndeterminate = !customStore.isAll && columns.some((column) => (!checkMethod || checkMethod({
        column
      })) && (column.visible || column.halfVisible));
    };
    const handleOptionCheck = (column) => {
      const {
        columns
      } = reactData;
      const matchObj = XEUtils.findTree(columns, (item) => item === column);
      if (matchObj && matchObj.parent) {
        const {
          parent
        } = matchObj;
        if (parent.children && parent.children.length) {
          parent.visible = parent.children.every((column2) => column2.visible);
          parent.halfVisible = !parent.visible && parent.children.some((column2) => column2.visible || column2.halfVisible);
          handleOptionCheck(parent);
        }
      }
    };
    const changeCheckboxOption = (column) => {
      const isChecked = !column.visible;
      XEUtils.eachTree([column], (item) => {
        item.visible = isChecked;
        item.halfVisible = false;
      });
      handleOptionCheck(column);
      checkCustomStatus();
    };
    const allCustomEvent = () => {
      const {
        columns
      } = reactData;
      const {
        computeCustomOpts: computeTableCustomOpts
      } = $xetable.getComputeMaps();
      const tableCustomOpts = computeTableCustomOpts.value;
      const {
        checkMethod
      } = tableCustomOpts;
      const isAll = !customStore.isAll;
      XEUtils.eachTree(columns, (column) => {
        if (!checkMethod || checkMethod({
          column
        })) {
          column.visible = isAll;
          column.halfVisible = false;
        }
      });
      customStore.isAll = isAll;
      checkCustomStatus();
    };
    const getCustomStorageMap = (key2) => {
      const version = GlobalConfig.version;
      const rest = XEUtils.toStringJSON(localStorage.getItem(key2) || "");
      return rest && rest._v === version ? rest : {
        _v: version
      };
    };
    const handleTableCustom = async () => {
      await $xetable.handleCustom();
    };
    const closeCustom = async () => {
      if (customStore.visible) {
        customStore.visible = false;
        await handleTableCustom();
      }
    };
    const checkTable = () => {
      if ($xetable) {
        return true;
      }
    };
    const calcIndexMap = () => {
      let index2 = 0;
      const {
        columns
      } = reactData;
      columns.forEach((t, i) => {
        var _a;
        indexMap[index2] = i;
        if ((_a = t.children) == null ? void 0 : _a.length) {
          index2 += t.children.length + 1;
        } else {
          index2++;
        }
      });
    };
    const showCustom = () => {
      customStore.visible = true;
      calcIndexMap();
      checkCustomStatus();
    };
    const customOpenEvent = (evnt) => {
      if (checkTable()) {
        if (!customStore.visible) {
          showCustom();
          emitCustomEvent("open", evnt);
        }
      }
    };
    const emitCustomEvent = (type, evnt) => {
      $xetable.dispatchEvent("custom", {
        type
      }, evnt);
    };
    const confirmCustomEvent = async (evnt) => {
      var _a;
      const id = (_a = $xetable.props) == null ? void 0 : _a.id;
      if (id) {
        const columnOrderStorage = getCustomStorageMap(orderStorageKey);
        const colOrders = [];
        reactData.columns.forEach((column) => {
          colOrders.push(column.field || column.type);
        });
        columnOrderStorage[id] = [colOrders.join(",")];
        localStorage.setItem(orderStorageKey, XEUtils.toJSONString(columnOrderStorage));
      }
      await closeCustom();
      emitCustomEvent("confirm", evnt);
    };
    const changeFixedOption = async (column, colFixed) => {
      const {
        computeIsMaxFixedColumn
      } = $xetable.getComputeMaps();
      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
      if (column.fixed === colFixed) {
        await $xetable.clearColumnFixed(column);
      } else {
        if (!isMaxFixedColumn || column.fixed) {
          await $xetable.setColumnFixed(column, colFixed);
        }
      }
    };
    const resetCustomEvent = async (evnt) => {
      var _a, _b;
      localStorage.removeItem("VXE_TABLE_CUSTOM_COLUMN_ORDER");
      if ((_a = $xetable.xegrid) == null ? void 0 : _a.props.columns) {
        await $xetable.loadColumn((_b = $xetable.xegrid) == null ? void 0 : _b.props.columns);
      }
      await $xetable.resetColumn(true);
      await closeCustom();
      emitCustomEvent("reset", evnt);
    };
    const key = ref(0);
    const popUpdateShow = (value) => {
      customStore.visible = value;
      nextTick(() => {
        if (!$xetable.props.id) {
          return;
        }
        const tbody = document.querySelector(".cl-toolbar.panel-wrapper .body");
        new Sortable(tbody, {
          animation: 200,
          handle: ".operations.level--1",
          ghostClass: "sortable-ghost",
          direction: "vertical",
          onEnd: async ({
            oldIndex,
            newIndex,
            item
          }) => {
            const {
              columns
            } = reactData;
            const tempItem = columns.splice(indexMap[oldIndex] || 0, 1);
            columns.splice(indexMap[newIndex] || 0, 0, tempItem[0]);
            key.value++;
            calcIndexMap();
          }
        });
      });
    };
    const count = ref(0);
    async function restoreCustomStorage() {
      count.value++;
      if (count.value > 5) {
        return;
      }
      const id = $xetable.props.id;
      if (!id) {
        console.error("vxe.error.reqProp", ["id"]);
        return;
      }
      const columnOrderStorageKey = getCustomStorageMap(orderStorageKey)[id || ""];
      if (columnOrderStorageKey) {
        const colOrder = columnOrderStorageKey[0].split(",").filter(Boolean);
        const {
          columns
        } = reactData;
        const oldColOrder = columns.map((item) => item.field || item.type);
        if (!(colOrder == null ? void 0 : colOrder.length) || !(oldColOrder == null ? void 0 : oldColOrder.length) || JSON.stringify(oldColOrder) === JSON.stringify(colOrder)) {
          return;
        }
        const sortedList = sortBy(columns, (column) => {
          const index2 = colOrder.indexOf(column.field || column.type);
          return index2 === -1 ? colOrder.length : index2;
        });
        reactData.columns = sortedList;
        await $xetable.loadColumn(sortedList);
      }
    }
    nextTick(async () => {
      if (crud["cl-table"]) {
        await crud["cl-table"].connect({
          syncUpdate(params) {
            const {
              collectColumn
            } = params;
            $xetable = params.$table;
            reactData.columns = collectColumn;
            restoreCustomStorage();
          }
        });
      }
    });
    return () => {
      const colVNs = [];
      const {
        columns
      } = reactData;
      XEUtils.eachTree(columns, (column, index2, items, path, parent) => {
        const colTitle = formatText(column.getTitle(), 1);
        const colKey = column.getKey();
        const isColGroup = column.children && column.children.length;
        if (isColGroup || colKey || colTitle) {
          const isChecked = column.visible;
          const isIndeterminate = column.halfVisible;
          colVNs.push(h("div", {
            key: key.value + Math.random(),
            class: ["operations", `level--${column.level}`, {
              hidden: ["seq", "checkbox", "radio", "expand"].includes(column.type || ""),
              "is--group": isColGroup
            }]
          }, [h(Checkbox, {
            label: colTitle,
            indeterminate: isIndeterminate,
            checked: isChecked,
            class: ["vxe-custom--checkbox-option"],
            onChange: () => {
              changeCheckboxOption(column);
            }
          }, void 0), !parent ? h("div", {
            class: "custom--fixed-option"
          }, [h(Icon, {
            icon: "icon-park-outline:left-c",
            class: ["vxe-custom--fixed-left-option", column.fixed === "left" ? "active" : ""],
            onClick: async () => {
              await changeFixedOption(column, "left");
            }
          }), h(Icon, {
            icon: "icon-park-outline:right-c",
            class: ["vxe-custom--fixed-right-option", column.fixed === "right" ? "active" : ""],
            size: "26px",
            onClick: async () => {
              await changeFixedOption(column, "right");
            }
          }), h(Icon, {
            icon: "icon-park-outline:direction-adjustment-three",
            class: ["move"]
          })]) : null]));
        }
      });
      return createVNode(NPopover, {
        "trigger": "click",
        "scrollable": true,
        "show": customStore.visible,
        "onUpdateShow": popUpdateShow
      }, {
        trigger: () => createVNode(Button, {
          "shape": "circle",
          "theme": "default",
          "variant": "outline",
          "size": "medium",
          "onClick": customOpenEvent
        }, {
          icon: () => createVNode(Icon, {
            "icon": "icon-park-solid:system"
          }, null)
        }),
        default: () => createVNode("div", {
          "class": "cl-toolbar panel-wrapper"
        }, [createVNode("div", {
          "class": "top"
        }, [createVNode(Checkbox, {
          "checked": customStore.isAll,
          "indeterminate": customStore.isIndeterminate,
          "on-change": allCustomEvent
        }, {
          default: () => [createTextVNode("全选")]
        })]), createVNode(NScrollbar, {
          "style": "max-height: 300px"
        }, {
          default: () => [createVNode("div", {
            "class": "body"
          }, {
            default: () => colVNs
          })]
        }), createVNode("div", {
          "class": "bottom"
        }, [createVNode(Button, {
          "theme": "default",
          "variant": "text",
          "onClick": resetCustomEvent
        }, {
          default: () => [createTextVNode("重置")]
        }), createVNode(Button, {
          "theme": "default",
          "variant": "text",
          "onClick": confirmCustomEvent
        }, {
          default: () => [createTextVNode("确认")]
        })])])
      });
    };
  }
});
export {
  index as default
};