@wlydfe/pro-ui 0.2.21 → 0.2.23

package/lib/components/table/src/table-action-bar.vue2.js

@@ -0,0 +1,365 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var iconsVue = require('@element-plus/icons-vue');
+var elementPlus = require('element-plus');
+require('../../utils/index.js');
+require('../../../hooks/index.js');
+require('../../../constants/index.js');
+var useLocale = require('../../../hooks/useLocale.js');
+var form = require('../../../constants/form.js');
+var is = require('../../utils/is.js');
+
+const _hoisted_1 = { class: "plus-table-action-bar__dropdown__link" };
+const _hoisted_2 = { class: "plus-table-action-bar__more-text" };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusTableActionBar"
+  },
+  __name: "table-action-bar",
+  props: {
+    label: { default: "" },
+    fixed: { default: "right" },
+    showNumber: { type: [Number, Function], default: 3 },
+    showLimitIncludeMore: { type: Boolean, default: false },
+    type: { default: "link" },
+    buttons: { default: () => [] },
+    width: { default: 200 },
+    actionBarTableColumnProps: { default: () => ({
+      align: "center"
+    }) },
+    confirmType: { default: "messageBox" },
+    triggerMoreProps: { default: () => ({
+      trigger: "click"
+    }) }
+  },
+  emits: ["clickAction", "clickActionConfirmCancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale.useLocale();
+    const hideOnClick = vue.ref(true);
+    const formRefs = vue.inject(form.TableFormRefInjectionKey);
+    const getSubButtons = (row, index) => {
+      const data = props.buttons.filter((item) => {
+        if (is.isFunction(item.show)) {
+          const tempFunction = item.show;
+          const isShow = tempFunction(row, index, item);
+          return vue.unref(isShow) !== false;
+        }
+        return vue.unref(item.show) !== false;
+      });
+      const showNumber = is.isFunction(props.showNumber) ? props.showNumber(row, index) : props.showNumber;
+      const showMore = data.length > showNumber;
+      if (!showMore) {
+        return {
+          showMore,
+          preButtons: data,
+          nextButtons: []
+        };
+      }
+      if (props.showLimitIncludeMore) {
+        return {
+          showMore,
+          preButtons: data.slice(0, showNumber - 1),
+          nextButtons: data.slice(showNumber - 1)
+        };
+      }
+      return {
+        showMore,
+        preButtons: data.slice(0, showNumber),
+        nextButtons: data.slice(showNumber)
+      };
+    };
+    const getConfirmParams = (params, e) => {
+      var _a, _b;
+      const { row, buttonRow, index, rest, text } = params;
+      const callbackParams = {
+        /**
+         * 解析后的按钮数据中的text
+         * @version v0.1.17
+         */
+        text,
+        row,
+        buttonRow,
+        index,
+        rowIndex: index,
+        e,
+        formRefs: formRefs.value[index],
+        ...rest
+      };
+      let message = t("plus.table.confirmToPerformThisOperation");
+      let title = t("plus.table.prompt");
+      let options = void 0;
+      let appContext = null;
+      if (is.isPlainObject(buttonRow.confirm)) {
+        const tempTitle = is.isFunction(buttonRow.confirm.title) ? buttonRow.confirm.title(callbackParams) : buttonRow.confirm.title;
+        if (tempTitle) {
+          title = tempTitle;
+        }
+        const tempMessage = is.isFunction(buttonRow.confirm.message) ? buttonRow.confirm.message(callbackParams) : buttonRow.confirm.message;
+        if (tempMessage) {
+          message = tempMessage;
+        }
+        options = (_a = buttonRow.confirm) == null ? void 0 : _a.options;
+        appContext = (_b = buttonRow.confirm) == null ? void 0 : _b.appContext;
+      }
+      return { msg: { message, title, options, appContext }, callbackParams };
+    };
+    const render = (row, buttonRow, index, rest) => {
+      var _a;
+      const buttonRowProps = is.isFunction(buttonRow.props) ? buttonRow.props(row, index, buttonRow) : vue.unref(buttonRow.props);
+      const text = is.isFunction(buttonRow.text) ? vue.unref(buttonRow.text(row, index, buttonRow)) : vue.unref(buttonRow.text);
+      const params = {
+        text,
+        row,
+        buttonRow,
+        index,
+        rest
+      };
+      const { msg, callbackParams } = getConfirmParams(params);
+      if (props.type === "icon") {
+        return vue.h(
+          elementPlus.ElTooltip,
+          { placement: "top", content: text, ...buttonRow.tooltipProps },
+          () => {
+            var _a2;
+            return props.confirmType === "popconfirm" && buttonRow.confirm ? vue.h(
+              "span",
+              {
+                class: "el-icon"
+              },
+              vue.h(
+                elementPlus.ElPopconfirm,
+                {
+                  trigger: "click",
+                  ...is.isPlainObject(buttonRow.confirm) ? (_a2 = buttonRow.confirm) == null ? void 0 : _a2.popconfirmProps : {},
+                  title: msg.message,
+                  onConfirm: (event) => handleConfirm({ ...callbackParams, e: event, formRefs: formRefs.value[index] }),
+                  onCancel: (event) => handleCancel({ ...callbackParams, e: event, formRefs: formRefs.value[index] })
+                },
+                {
+                  reference: () => vue.withDirectives(
+                    vue.h(
+                      elementPlus.ElIcon,
+                      {
+                        size: 16,
+                        style: { margin: 0 },
+                        ...buttonRowProps,
+                        onClick: () => {
+                          hideOnClick.value = false;
+                          if (is.isFunction(buttonRow.onClick)) {
+                            buttonRow.onClick({
+                              ...callbackParams,
+                              formRefs: formRefs.value[index]
+                            });
+                          }
+                        }
+                      },
+                      () => buttonRow.icon ? vue.h(buttonRow.icon) : ""
+                    ),
+                    buttonRow.directives || []
+                  )
+                }
+              )
+            ) : vue.withDirectives(
+              vue.h(
+                elementPlus.ElIcon,
+                {
+                  size: 16,
+                  ...buttonRowProps,
+                  onClick: (event) => handleClickAction(
+                    { ...callbackParams, e: event, formRefs: formRefs.value[index] },
+                    msg
+                  )
+                },
+                () => buttonRow.icon ? vue.h(buttonRow.icon) : ""
+              ),
+              buttonRow.directives || []
+            );
+          }
+        );
+      } else {
+        const Tag = props.type === "button" ? elementPlus.ElButton : elementPlus.ElLink;
+        const defaultProps = props.type === "link" ? { href: "javaScript:;" } : {};
+        return props.confirmType === "popconfirm" && buttonRow.confirm ? vue.h(
+          elementPlus.ElPopconfirm,
+          {
+            trigger: "click",
+            ...is.isPlainObject(buttonRow.confirm) ? (_a = buttonRow.confirm) == null ? void 0 : _a.popconfirmProps : {},
+            title: msg.message,
+            onConfirm: (event) => handleConfirm({ ...callbackParams, e: event, formRefs: formRefs.value[index] }),
+            onCancel: (event) => handleCancel({ ...callbackParams, e: event, formRefs: formRefs.value[index] })
+          },
+          {
+            reference: () => vue.withDirectives(
+              vue.h(
+                Tag,
+                {
+                  size: "small",
+                  ...defaultProps,
+                  ...buttonRowProps,
+                  onClick: () => {
+                    hideOnClick.value = false;
+                    if (is.isFunction(buttonRow.onClick)) {
+                      buttonRow.onClick({ ...callbackParams, formRefs: formRefs.value[index] });
+                    }
+                  }
+                },
+                () => text
+              ),
+              buttonRow.directives || []
+            )
+          }
+        ) : vue.withDirectives(
+          vue.h(
+            Tag,
+            {
+              size: "small",
+              ...defaultProps,
+              ...buttonRowProps,
+              onClick: (event) => handleClickAction(
+                { ...callbackParams, e: event, formRefs: formRefs.value[index] },
+                msg
+              )
+            },
+            () => text
+          ),
+          buttonRow.directives || []
+        );
+      }
+    };
+    const handleConfirm = (callbackParams) => {
+      if (is.isFunction(callbackParams.buttonRow.onConfirm)) {
+        callbackParams.buttonRow.onConfirm(callbackParams);
+      }
+      emit("clickAction", callbackParams);
+    };
+    const handleCancel = (callbackParams) => {
+      if (is.isFunction(callbackParams.buttonRow.onCancel)) {
+        callbackParams.buttonRow.onCancel(callbackParams);
+      }
+      emit("clickActionConfirmCancel", callbackParams);
+    };
+    const handleClickAction = (callbackParams, msg) => {
+      hideOnClick.value = true;
+      const { buttonRow } = callbackParams;
+      if (is.isFunction(buttonRow.onClick)) {
+        buttonRow.onClick(callbackParams);
+      }
+      if (buttonRow.confirm) {
+        if (props.confirmType === "messageBox") {
+          const { message, title, options, appContext } = msg;
+          elementPlus.ElMessageBox.confirm(message, title, options, appContext).then(() => {
+            if (is.isFunction(buttonRow.onConfirm)) {
+              buttonRow.onConfirm(callbackParams);
+            }
+            emit("clickAction", callbackParams);
+          }).catch(() => {
+            if (is.isFunction(buttonRow.onCancel)) {
+              buttonRow.onCancel(callbackParams);
+            }
+            emit("clickActionConfirmCancel", callbackParams);
+          });
+        }
+      } else {
+        emit("clickAction", callbackParams);
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTableColumn), vue.mergeProps({
+        key: "actionBar",
+        "class-name": "plus-table-action-bar",
+        label: vue.unref(_ctx.label) || vue.unref(t)("plus.table.action"),
+        fixed: _ctx.fixed || "right",
+        width: _ctx.width || 200
+      }, _ctx.actionBarTableColumnProps), {
+        default: vue.withCtx(({ row, $index, ...rest }) => [
+          vue.createCommentVNode(" \u663E\u793A\u51FA\u6765\u7684\u6309\u94AE "),
+          (vue.openBlock(true), vue.createElementBlock(
+            vue.Fragment,
+            null,
+            vue.renderList(getSubButtons(row, $index).preButtons, (buttonRow) => {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(render(row, buttonRow, $index, rest)), {
+                key: buttonRow.text
+              });
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          vue.createCommentVNode(" \u9690\u85CF\u7684\u6309\u94AE "),
+          getSubButtons(row, $index).showMore ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElDropdown), vue.mergeProps({ key: 0 }, _ctx.triggerMoreProps, {
+            class: "plus-table-action-bar__dropdown",
+            "hide-on-click": hideOnClick.value
+          }), {
+            dropdown: vue.withCtx(() => [
+              vue.createVNode(
+                vue.unref(elementPlus.ElDropdownMenu),
+                null,
+                {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(getSubButtons(row, $index).nextButtons, (buttonRow) => {
+                        return vue.openBlock(), vue.createBlock(
+                          vue.unref(elementPlus.ElDropdownItem),
+                          {
+                            key: vue.unref(buttonRow.text)
+                          },
+                          {
+                            default: vue.withCtx(() => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(render(row, buttonRow, $index, rest))))
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          },
+                          1024
+                          /* DYNAMIC_SLOTS */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                },
+                1024
+                /* DYNAMIC_SLOTS */
+              )
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("span", _hoisted_1, [
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_2,
+                  vue.toDisplayString(vue.unref(t)("plus.table.more")),
+                  1
+                  /* TEXT */
+                ),
+                vue.renderSlot(_ctx.$slots, "action-bar-more-icon", {}, () => [
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowDownBold))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1040, ["hide-on-click"])) : vue.createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["label", "fixed", "width"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;