@arco-vue-pro-components/pro-components/es/pro-table/tool-bar/column-setting.js

基于@arco-design/web-vue组件的高级组件，包括pro-table

import { defineComponent, createVNode, inject, toRef, reactive, computed, ref, watch, toRaw, isVNode, Fragment, nextTick } from "vue";
import { Popover, Checkbox, Space, Tree } from "@arco-design/web-vue";
import { useI18n } from "../../locale/index.js";
import { getPrefixCls } from "../../_utils/index.js";
import MyToolTip from "../my-tool-tip/index.js";
import MyIcon from "../my-icon/index.js";
import { proTableInjectionKey } from "../form/context.js";
import { IconSettings, IconToTop, IconToBottom } from "@arco-design/web-vue/es/icon";
import { isArray } from "../../_utils/is.js";
import { loopFilter, deepClone, getArrDiff } from "../utils/index.js";
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var ColumnSetting = defineComponent({
  name: "ColumnSetting",
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    draggable: {
      type: Boolean,
      default: true
    },
    checkable: {
      type: Boolean,
      default: true
    },
    showListItemOption: {
      type: Boolean,
      default: true
    },
    checkedReset: {
      type: Boolean,
      default: true
    },
    icon: {
      default: createVNode(IconSettings, null, null)
    }
  },
  setup(props, {
    slots
  }) {
    const tableCtx = inject(proTableInjectionKey, {});
    const localColumns = toRef(props, "columns");
    const listMap = reactive({
      left: [],
      other: [],
      right: []
    });
    const checkedKeysMap = reactive({
      left: [],
      right: [],
      other: [],
      disable: []
    });
    const checkedKeys = computed(() => [...checkedKeysMap.left, ...checkedKeysMap.right, ...checkedKeysMap.other]);
    const defaultCheckedKeysMap = ref({
      left: [],
      right: [],
      other: [],
      disable: []
    });
    const defaultListMap = ref({
      left: [],
      right: [],
      other: []
    });
    const treeRef = ref({
      left: null,
      right: null,
      other: null
    });
    const defaultAllCheckedKeys = ref([]);
    const currentDragTreeData = ref({});
    const needInit = ref((tableCtx == null ? void 0 : tableCtx.columnsMap) ? Object.keys(tableCtx == null ? void 0 : tableCtx.columnsMap).length > 0 : false);
    const localColumnsMap = ref(JSON.parse(JSON.stringify(tableCtx == null ? void 0 : tableCtx.columnsMap)) || {});
    const loopData = (data, parentItem, parentIndex) => {
      if (!data || !isArray(data) || !data.length) {
        return void 0;
      }
      let newData = [];
      let index = 0;
      for (let [_, columnItem] of data.entries()) {
        const {
          title,
          render: render2,
          hideInSetting,
          sortOrder,
          disable,
          ...item
        } = columnItem;
        if (hideInSetting) {
          continue;
        }
        const newItem = {
          ...item,
          disableCheckbox: parentItem.disableCheckbox || disable,
          nodeTitle: title,
          parentIndexs: (parentItem.parentIndexs || []).concat(parentIndex),
          dragLevel: parentItem.dragLevel + 1,
          dragLevelKey: `${parentItem.key}_${parentItem.dragLevel + 1}`,
          dragIndex: index
        };
        if (newItem.disableCheckbox) {
          checkedKeysMap.disable.push(item.key);
        }
        defaultAllCheckedKeys.value.push(item.key);
        switch (item.fixed || parentItem.fixed) {
          case "left":
            checkedKeysMap.left.push(item.key);
            break;
          case "right":
            checkedKeysMap.right.push(item.key);
            break;
          default:
            checkedKeysMap.other.push(item.key);
            break;
        }
        if (newItem.children) {
          newItem.children = loopData(newItem.children, newItem, index);
        }
        newData.push(newItem);
        index++;
      }
      return newData;
    };
    watch([localColumns, needInit], ([columns, needInit2]) => {
      let newLeftList = [];
      let newRightList = [];
      let newList = [];
      let parentIndexMap = {
        left: 0,
        right: 0,
        other: 0
      };
      let initColumns = [...columns];
      if (needInit2 && Object.keys(localColumnsMap.value).length > 0) {
        initColumns = loopFilter(columns, void 0, localColumnsMap, false);
      }
      initColumns.forEach((columnItem) => {
        const {
          title,
          render: render2,
          hideInSetting,
          sortOrder,
          disable,
          ...item
        } = columnItem;
        const {
          fixed
        } = item;
        if (hideInSetting) {
          return;
        }
        const newItem = {
          ...item,
          nodeTitle: title,
          disableCheckbox: disable,
          dragLevel: 1,
          dragLevelKey: 1,
          showTool: true,
          dragIndex: parentIndexMap[fixed || "other"]
        };
        if (newItem.disableCheckbox) {
          checkedKeysMap.disable.push(item.key);
        }
        defaultAllCheckedKeys.value.push(item.key);
        switch (fixed) {
          case "left":
            checkedKeysMap.left.push(item.key);
            break;
          case "right":
            checkedKeysMap.right.push(item.key);
            break;
          default:
            checkedKeysMap.other.push(item.key);
            break;
        }
        if (newItem.children) {
          newItem.children = loopData(
            newItem.children,
            newItem,
            parentIndexMap[fixed || "other"]
          );
        }
        parentIndexMap[fixed || "other"] += 1;
        if (fixed === "left") {
          newLeftList.push(newItem);
          return;
        }
        if (fixed === "right") {
          newRightList.push(newItem);
          return;
        }
        newList.push(newItem);
      });
      listMap.left = newLeftList;
      listMap.right = newRightList;
      listMap.other = newList;
      defaultCheckedKeysMap.value = JSON.parse(JSON.stringify(toRaw(checkedKeysMap)));
      defaultListMap.value = deepClone(listMap);
    }, {
      immediate: true,
      deep: true
    });
    const {
      getMessage
    } = useI18n();
    const prefixCls = getPrefixCls("pro-table-column-setting");
    const checkedAll = (val, reset = false) => {
      var _a, _b;
      if (val) {
        const defaultCheckedKeysData = toRaw(defaultCheckedKeysMap.value);
        checkedKeysMap.left = defaultCheckedKeysData.left;
        checkedKeysMap.right = defaultCheckedKeysData.right;
        checkedKeysMap.other = defaultCheckedKeysData.other;
      } else {
        if (checkedKeysMap.disable.length) {
          for (let type of Object.keys(listMap)) {
            checkedKeysMap[type] = checkedKeysMap[type].filter((item) => {
              return checkedKeysMap.disable.includes(item);
            });
          }
        } else {
          checkedKeysMap.left = [];
          checkedKeysMap.right = [];
          checkedKeysMap.other = [];
        }
      }
      defaultAllCheckedKeys.value.map((key) => {
        localColumnsMap.value[key] = {
          ...localColumnsMap.value[key] || {},
          show: val
        };
      });
      if (reset) {
        const defaultListMapData = toRaw(defaultListMap.value);
        listMap.left = defaultListMapData.left;
        listMap.right = defaultListMapData.right;
        listMap.other = defaultListMapData.other;
        if (needInit.value) {
          needInit.value = false;
        }
        localColumnsMap.value = {};
        (_a = tableCtx == null ? void 0 : tableCtx.setColumnsMap) == null ? void 0 : _a.call(tableCtx, {});
      } else {
        (_b = tableCtx == null ? void 0 : tableCtx.setColumnsMap) == null ? void 0 : _b.call(tableCtx, localColumnsMap.value);
      }
    };
    const indeterminate = computed(() => {
      return checkedKeys.value.length > 0 && checkedKeys.value.length !== defaultAllCheckedKeys.value.length;
    });
    const updateTreeData = (list) => {
      if (!list || !list.length) {
        return;
      }
      function loop(data, parentIndex) {
        data.map((item) => {
          if (item.parentIndexs) {
            item.parentIndexs.splice(0, 1, parentIndex);
          }
          if (item.children && item.children.length) {
            loop(item.children, parentIndex);
          }
        });
      }
      list.map((item, index) => {
        item.dragIndex = index;
        if (item.children && item.children.length) {
          loop(item.children, index);
        }
      });
    };
    const ToolTipIcon = ({
      title,
      show,
      fixed,
      icon,
      type,
      dragIndex
    }) => {
      if (!show) {
        return null;
      }
      return createVNode(MyToolTip, {
        "content": title
      }, {
        default: () => [createVNode("span", {
          "onClick": (e) => {
            var _a;
            e.stopPropagation();
            e.preventDefault();
            const toolList = listMap[type].splice(dragIndex, 1);
            if (!toolList.length) {
              return;
            }
            const toolItem = toolList[0];
            toolItem.fixed = fixed;
            switch (fixed) {
              case "left":
                listMap["left"].push(toolItem);
                break;
              case "right":
                listMap["right"].unshift(toolItem);
                break;
              default:
                type === "right" ? listMap["other"].push(toolItem) : listMap["other"].unshift(toolItem);
                break;
            }
            localColumnsMap.value[toolItem.key] = {
              ...localColumnsMap.value[toolItem.key] || {},
              fixed
            };
            [...listMap["left"], ...listMap["other"], ...listMap["right"]].map((item, order) => {
              localColumnsMap.value[item.key] = {
                ...localColumnsMap.value[item.key] || {},
                order,
                fixed: item.fixed
              };
            });
            (_a = tableCtx == null ? void 0 : tableCtx.setColumnsMap) == null ? void 0 : _a.call(tableCtx, localColumnsMap.value);
            updateTreeData(listMap[fixed || "other"]);
            updateTreeData(listMap[type]);
            nextTick(() => {
              const currentCheckedNodes = treeRef.value[type].getCheckedNodes({
                checkedStrategy: "all",
                includeHalfChecked: false
              });
              const currentCheckedKeys = currentCheckedNodes.map((node) => node.key);
              const currentKeys = getArrDiff(checkedKeysMap[type], currentCheckedKeys);
              checkedKeysMap[fixed || "other"] = checkedKeysMap[fixed || "other"].concat(currentKeys);
              checkedKeysMap[type] = currentCheckedKeys;
            });
          }
        }, [icon])]
      });
    };
    const CheckboxListItem = ({
      columnKey,
      title,
      fixed,
      showListItemOption,
      showTool,
      type,
      dragIndex
    }) => {
      const dom = createVNode("span", {
        "class": `${prefixCls}-list-item-option`
      }, [createVNode(ToolTipIcon, {
        "fixed": "left",
        "title": getMessage("tableToolBar.leftPin", "\u56FA\u5B9A\u5728\u5DE6\u4FA7"),
        "show": fixed !== "left",
        "icon": createVNode(IconToTop, null, null),
        "type": type,
        "dragIndex": dragIndex
      }, null), createVNode(ToolTipIcon, {
        "fixed": void 0,
        "title": getMessage("tableToolBar.noPin", "\u4E0D\u56FA\u5B9A"),
        "show": !!fixed,
        "icon": createVNode(MyIcon, {
          "type": "icon-vertical-align-middl1"
        }, null),
        "type": type,
        "dragIndex": dragIndex
      }, null), createVNode(ToolTipIcon, {
        "fixed": "right",
        "title": getMessage("tableToolBar.rightPin", "\u56FA\u5B9A\u5728\u53F3\u4FA7"),
        "show": fixed !== "right",
        "icon": createVNode(IconToBottom, null, null),
        "type": type,
        "dragIndex": dragIndex
      }, null)]);
      return createVNode("span", {
        "class": `${prefixCls}-list-item`,
        "key": columnKey
      }, [createVNode("div", {
        "class": `${prefixCls}-list-item-title`,
        "title": typeof title === "string" ? title : void 0
      }, [title]), showListItemOption && showTool ? dom : null]);
    };
    const getCurrentDropList = (list, indexs) => {
      let current = list;
      for (let i of indexs) {
        current = current[i].children;
      }
      return current || [];
    };
    const CheckboxList = ({
      list,
      draggable,
      checkable,
      showListItemOption,
      showTitle = true,
      title: listTitle,
      type
    }) => {
      if (!list || !list.length) {
        return null;
      }
      const listDom = createVNode(Tree, {
        "draggable": !!(draggable && ((list == null ? void 0 : list.length) && (list == null ? void 0 : list.length) > 1 || list.length === 1 && list[0].children)),
        "checkable": checkable,
        "blockNode": true,
        "checkedKeys": checkedKeysMap[type],
        "onUpdate:checkedKeys": ($event) => checkedKeysMap[type] = $event,
        "ref": (ref2) => {
          treeRef.value[type] = ref2;
        },
        "showLine": false,
        "onCheck": (newCheckedKeys, {
          checked,
          halfCheckedKeys
        }) => {
          var _a, _b;
          if (checked) {
            [...newCheckedKeys, ...halfCheckedKeys].map((key) => {
              localColumnsMap.value[key] = {
                ...localColumnsMap.value[key] || {},
                show: true
              };
            });
            (_a = tableCtx == null ? void 0 : tableCtx.setColumnsMap) == null ? void 0 : _a.call(tableCtx, localColumnsMap.value);
            return;
          }
          const prevCheckedNodes = treeRef.value[type].getCheckedNodes({
            checkedStrategy: "all",
            includeHalfChecked: true
          });
          const prevCheckedKeys = prevCheckedNodes.map((node) => node.key);
          prevCheckedKeys.map((key) => {
            localColumnsMap.value[key] = {
              ...localColumnsMap.value[key] || {},
              show: [...newCheckedKeys, ...halfCheckedKeys].includes(key)
            };
          });
          (_b = tableCtx == null ? void 0 : tableCtx.setColumnsMap) == null ? void 0 : _b.call(tableCtx, localColumnsMap.value);
        },
        "onDrop": ({
          dragNode,
          dropNode,
          dropPosition
        }) => {
          var _a;
          const currentList = dragNode.parentIndexs ? getCurrentDropList(list, dragNode.parentIndexs) : list;
          currentList.splice(dropPosition === 1 ? dropNode.dragIndex + 1 : dropNode.dragIndex, 0, dragNode);
          const dragIndexAmend = dragNode.dragIndex < dropNode.dragIndex ? 0 : 1;
          currentList.splice(dragNode.dragIndex + dragIndexAmend, 1);
          currentList.map((item, index) => {
            localColumnsMap.value[item.key] = {
              ...localColumnsMap.value[item.key] || {},
              order: index
            };
            item.dragIndex = index;
          });
          (_a = tableCtx == null ? void 0 : tableCtx.setColumnsMap) == null ? void 0 : _a.call(tableCtx, localColumnsMap.value);
        },
        "onDragStart": (_, dragNode) => {
          currentDragTreeData.value = dragNode;
        },
        "allowDrop": ({
          dropNode
        }) => {
          return currentDragTreeData.value.dragLevelKey === dropNode.dragLevelKey;
        },
        "data": list
      }, {
        title: (_node) => {
          const node = {
            ..._node,
            children: void 0
          };
          if (!node.nodeTitle)
            return null;
          return createVNode(CheckboxListItem, {
            "fixed": node.fixed,
            "showTool": node.showTool,
            "showListItemOption": showListItemOption,
            "title": node.nodeTitle,
            "columnKey": node.key,
            "type": type,
            "dragIndex": node.dragIndex
          }, null);
        }
      });
      return createVNode(Fragment, null, [showTitle && createVNode("span", {
        "class": `${prefixCls}-list-title`
      }, [listTitle]), listDom]);
    };
    const GroupCheckboxList = ({
      draggable,
      checkable,
      showListItemOption
    }) => {
      const showRight = listMap.right && listMap.right.length > 0;
      const showLeft = listMap.left && listMap.left.length > 0;
      return createVNode("div", {
        "class": [`${prefixCls}-list`, {
          [`${prefixCls}-list-group`]: showRight || showLeft,
          [`${prefixCls}-list-nocheckbox`]: !checkable
        }]
      }, [createVNode(CheckboxList, {
        "title": getMessage("tableToolBar.leftFixedTitle", "\u56FA\u5B9A\u5728\u5DE6\u4FA7"),
        "list": listMap.left,
        "draggable": draggable,
        "checkable": checkable,
        "showListItemOption": showListItemOption,
        "type": "left"
      }, null), createVNode(CheckboxList, {
        "list": listMap.other,
        "draggable": draggable,
        "checkable": checkable,
        "showListItemOption": showListItemOption,
        "title": getMessage("tableToolBar.noFixedTitle", "\u4E0D\u56FA\u5B9A"),
        "showTitle": showLeft || showRight,
        "type": "other"
      }, null), createVNode(CheckboxList, {
        "title": getMessage("tableToolBar.rightFixedTitle", "\u56FA\u5B9A\u5728\u53F3\u4FA7"),
        "list": listMap.right,
        "draggable": draggable,
        "checkable": checkable,
        "showListItemOption": showListItemOption,
        "type": "right"
      }, null)]);
    };
    const render = () => {
      return createVNode(Popover, {
        "showArrow": false,
        "overlayClassName": `${prefixCls}-overlay`,
        "trigger": "click",
        "position": "br",
        "popupContainer": tableCtx.popupContainer
      }, {
        title: () => {
          let _slot, _slot2;
          return createVNode("div", {
            "class": `${prefixCls}-title`
          }, [props.checkable === false ? createVNode("div", null, null) : createVNode(Checkbox, {
            "indeterminate": indeterminate.value,
            "modelValue": checkedKeys.value.length === defaultAllCheckedKeys.value.length,
            "onChange": (val) => {
              checkedAll(val);
            }
          }, _isSlot(_slot = getMessage("tableToolBar.columnDisplay", "\u5217\u5C55\u793A")) ? _slot : {
            default: () => [_slot]
          }), props.checkedReset ? createVNode("a", {
            "onClick": () => {
              checkedAll(true, true);
            },
            "class": `${prefixCls}-action-rest-button`
          }, [getMessage("tableToolBar.reset", "\u91CD\u7F6E")]) : null, slots["setting-extra"] ? createVNode(Space, {
            "size": 12,
            "align": "center"
          }, _isSlot(_slot2 = slots["setting-extra"]()) ? _slot2 : {
            default: () => [_slot2]
          }) : null]);
        },
        content: () => {
          var _a, _b, _c;
          return createVNode(GroupCheckboxList, {
            "checkable": (_a = props.checkable) != null ? _a : true,
            "draggable": (_b = props.draggable) != null ? _b : true,
            "showListItemOption": (_c = props.showListItemOption) != null ? _c : true
          }, null);
        },
        default: () => {
          return createVNode(MyToolTip, {
            "content": getMessage("tableToolBar.columnSetting", "\u5217\u8BBE\u7F6E")
          }, {
            default: () => [slots["setting-icon"] ? slots["setting-icon"]() : props.icon]
          });
        },
        ...slots
      });
    };
    return {
      render
    };
  },
  render() {
    return this.render();
  }
});
export { ColumnSetting as default };