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

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

import { defineComponent, inject, toRef, computed, createVNode, mergeProps, Fragment, isVNode } from "vue";
import { IconRefresh } from "@arco-design/web-vue/es/icon";
import { Space } from "@arco-design/web-vue";
import ColumnSetting from "./column-setting.js";
import { useI18n } from "../../locale/index.js";
import { getPrefixCls } from "../../_utils/index.js";
import DensityIcon from "./density-icon.js";
import FullScreenIcon from "./fullscreen-icon.js";
import { proTableInjectionKey } from "../form/context.js";
import { isArray } from "../../_utils/is.js";
import MyToolTip from "../my-tool-tip/index.js";
import { runFunction } from "../utils/index.js";
function getSettingItem(setting, slots) {
  if (isVNode(setting)) {
    return setting;
  }
  if (setting) {
    const settingConfig = setting;
    const {
      icon,
      tooltip,
      onClick,
      key
    } = settingConfig;
    if (icon && tooltip) {
      return createVNode(MyToolTip, null, {
        default: () => [createVNode("span", {
          "key": key,
          "onClick": () => {
            if (onClick) {
              onClick(key);
            }
          }
        }, [icon])],
        content: () => {
          return tooltip;
        }
      });
    }
    return icon;
  }
  return null;
}
function getButtonText({
  getMessage
}, options) {
  var _a;
  return {
    reload: {
      text: getMessage("tableToolBar.reload", "\u5237\u65B0"),
      icon: (_a = options.reloadIcon) != null ? _a : createVNode(IconRefresh, null, null)
    },
    density: {
      text: getMessage("tableToolBar.density", "\u8868\u683C\u5BC6\u5EA6"),
      icon: createVNode(DensityIcon, {
        "icon": options.densityIcon
      }, null)
    },
    fullScreen: {
      text: getMessage("tableToolBar.fullScreen", "\u5168\u5C4F"),
      icon: createVNode(FullScreenIcon, null, null)
    }
  };
}
function renderDefaultOption(options, defaultOptions, actions, columns, slots) {
  return Object.keys(options).filter((item) => item).map((key) => {
    const value = options[key];
    if (!value) {
      return null;
    }
    let onClick = value === true ? defaultOptions[key] : (event) => {
      value == null ? void 0 : value(event, actions);
    };
    if (typeof onClick !== "function") {
      onClick = () => {
      };
    }
    if (key === "setting") {
      return createVNode(ColumnSetting, mergeProps(options[key], {
        "columns": columns,
        "key": key,
        "icon": options.settingIcon
      }), slots);
    }
    if (key === "fullScreen") {
      return createVNode("span", {
        "key": key,
        "onClick": onClick
      }, [createVNode(FullScreenIcon, null, null)]);
    }
    const optionItem = getButtonText(defaultOptions, options)[key];
    if (optionItem) {
      return createVNode("span", {
        "key": key,
        "onClick": onClick
      }, [createVNode(MyToolTip, null, {
        default: () => [slots[`${key}-icon`] ? slots[`${key}-icon`]() : optionItem.icon],
        content: () => {
          return optionItem.text;
        }
      })]);
    }
    return null;
  }).filter((item) => item);
}
var ToolBar = defineComponent({
  name: "ProToolBar",
  props: {
    toolBarRender: {
      type: [Boolean, Function],
      default: void 0
    },
    optionsRender: {
      type: [Boolean, Function],
      default: false
    },
    options: {
      type: [Object, Boolean],
      default: false
    },
    headerTitle: {
      type: [String, Boolean, Object, Function],
      default: "\u5217\u8868\u6570\u636E"
    }
  },
  setup(props, {
    slots
  }) {
    const tableCtx = inject(proTableInjectionKey, {});
    const propsOptions = toRef(props, "options");
    const prefixCls = getPrefixCls("pro-table");
    const {
      getMessage
    } = useI18n();
    const optionDom = computed(() => {
      const defaultOptions = {
        reload: () => {
          var _a;
          return (_a = tableCtx.action) == null ? void 0 : _a.reload();
        },
        density: true,
        setting: true,
        fullScreen: () => {
          var _a, _b;
          return (_b = (_a = tableCtx.action) == null ? void 0 : _a.fullScreen) == null ? void 0 : _b.call(_a);
        }
      };
      if (propsOptions.value === false) {
        return [];
      }
      const options = {
        ...defaultOptions,
        fullScreen: false,
        ...propsOptions.value === true ? {} : propsOptions.value
      };
      const settings = renderDefaultOption(options, {
        ...defaultOptions,
        getMessage
      }, tableCtx.action, tableCtx.columns, slots);
      if (slots["options-render"]) {
        return slots["options-render"]({
          headerTitle: props.headerTitle,
          toolBarRender: props.toolBarRender,
          action: tableCtx.action,
          options: propsOptions.value,
          selectedRowKeys: tableCtx.selectedRowKeys || [],
          selectedRows: tableCtx.selectedRows || [],
          columns: tableCtx.columns || [],
          optionsRender: props.optionsRender
        }, settings);
      }
      if (props.optionsRender) {
        return props.optionsRender(
          {
            headerTitle: props.headerTitle,
            toolBarRender: props.toolBarRender,
            action: tableCtx.action,
            options: propsOptions.value,
            selectedRowKeys: tableCtx.selectedRowKeys || [],
            selectedRows: tableCtx.selectedRows || [],
            columns: tableCtx.columns || [],
            optionsRender: props.optionsRender
          },
          settings
        );
      }
      return settings;
    });
    const render = () => {
      var _a, _b;
      const data = {
        action: tableCtx.action,
        selectedRowKeys: tableCtx.selectedRowKeys || [],
        selectedRows: tableCtx.selectedRows || []
      };
      const actions = props.toolBarRender ? props.toolBarRender(data) : [];
      return createVNode("div", {
        "class": `${prefixCls}-toolbarContainer`
      }, [createVNode("div", {
        "class": `${prefixCls}-title`
      }, [(_b = (_a = slots["header-title"]) == null ? void 0 : _a.call(slots, data)) != null ? _b : runFunction(props.headerTitle, data)]), createVNode(Space, null, {
        default: () => {
          var _a2, _b2;
          return [(_a2 = slots["tool-bar"]) == null ? void 0 : _a2.call(slots, data), actions.filter((item) => !!item).map((node, index) => createVNode(Fragment, {
            "key": index
          }, [node])), isArray(optionDom.value) && ((_b2 = optionDom.value) == null ? void 0 : _b2.length) ? createVNode("div", {
            "class": `${prefixCls}-setting`
          }, [optionDom.value.map((setting, index) => {
            const settingItem = getSettingItem(setting);
            if (!settingItem) {
              return null;
            }
            return createVNode("div", {
              "key": index,
              "class": `${prefixCls}-setting-item`
            }, [settingItem]);
          })]) : null];
        }
      })]);
    };
    return {
      render
    };
  },
  render() {
    return this.render();
  }
});
export { ToolBar as default };