@wlydfe/pro-ui 0.1.25

package/es/components/table/src/table-action-bar.vue2.mjs

@@ -0,0 +1,358 @@
+import { defineComponent, ref, inject, unref, h, withDirectives, openBlock, createBlock, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, resolveDynamicComponent, createVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
+import { ArrowDownBold } from '@element-plus/icons-vue';
+import { ElTooltip, ElPopconfirm, ElIcon, ElButton, ElLink, ElMessageBox, ElTableColumn, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import '../../utils/index.mjs';
+import '../../../hooks/index.mjs';
+import '../../../constants/index.mjs';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+import { TableFormRefInjectionKey } from '../../../constants/form.mjs';
+import { isFunction, isPlainObject } from '../../utils/is.mjs';
+
+const _hoisted_1 = { class: "plus-table-action-bar__dropdown__link" };
+const _hoisted_2 = { class: "plus-table-action-bar__more-text" };
+var _sfc_main = /* @__PURE__ */ 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: () => ({}) },
+    confirmType: { default: "messageBox" }
+  },
+  emits: ["clickAction", "clickActionConfirmCancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale();
+    const hideOnClick = ref(true);
+    const formRefs = inject(TableFormRefInjectionKey);
+    const getSubButtons = (row, index) => {
+      const data = props.buttons.filter((item) => {
+        if (isFunction(item.show)) {
+          const tempFunction = item.show;
+          const isShow = tempFunction(row, index, item);
+          return unref(isShow) !== false;
+        }
+        return unref(item.show) !== false;
+      });
+      const showNumber = 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 (isPlainObject(buttonRow.confirm)) {
+        const tempTitle = isFunction(buttonRow.confirm.title) ? buttonRow.confirm.title(callbackParams) : buttonRow.confirm.title;
+        if (tempTitle) {
+          title = tempTitle;
+        }
+        const tempMessage = 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 = isFunction(buttonRow.props) ? buttonRow.props(row, index, buttonRow) : unref(buttonRow.props);
+      const text = isFunction(buttonRow.text) ? unref(buttonRow.text(row, index, buttonRow)) : unref(buttonRow.text);
+      const params = {
+        text,
+        row,
+        buttonRow,
+        index,
+        rest
+      };
+      const { msg, callbackParams } = getConfirmParams(params);
+      if (props.type === "icon") {
+        return h(
+          ElTooltip,
+          { placement: "top", content: text, ...buttonRow.tooltipProps },
+          () => {
+            var _a2;
+            return props.confirmType === "popconfirm" && buttonRow.confirm ? h(
+              "span",
+              {
+                class: "el-icon"
+              },
+              h(
+                ElPopconfirm,
+                {
+                  trigger: "click",
+                  ...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: () => withDirectives(
+                    h(
+                      ElIcon,
+                      {
+                        size: 16,
+                        style: { margin: 0 },
+                        ...buttonRowProps,
+                        onClick: () => {
+                          hideOnClick.value = false;
+                          if (isFunction(buttonRow.onClick)) {
+                            buttonRow.onClick({
+                              ...callbackParams,
+                              formRefs: formRefs.value[index]
+                            });
+                          }
+                        }
+                      },
+                      () => buttonRow.icon ? h(buttonRow.icon) : ""
+                    ),
+                    buttonRow.directives || []
+                  )
+                }
+              )
+            ) : withDirectives(
+              h(
+                ElIcon,
+                {
+                  size: 16,
+                  ...buttonRowProps,
+                  onClick: (event) => handleClickAction(
+                    { ...callbackParams, e: event, formRefs: formRefs.value[index] },
+                    msg
+                  )
+                },
+                () => buttonRow.icon ? h(buttonRow.icon) : ""
+              ),
+              buttonRow.directives || []
+            );
+          }
+        );
+      } else {
+        const Tag = props.type === "button" ? ElButton : ElLink;
+        const defaultProps = props.type === "link" ? { href: "javaScript:;" } : {};
+        return props.confirmType === "popconfirm" && buttonRow.confirm ? h(
+          ElPopconfirm,
+          {
+            trigger: "click",
+            ...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: () => withDirectives(
+              h(
+                Tag,
+                {
+                  size: "small",
+                  ...defaultProps,
+                  ...buttonRowProps,
+                  onClick: () => {
+                    hideOnClick.value = false;
+                    if (isFunction(buttonRow.onClick)) {
+                      buttonRow.onClick({ ...callbackParams, formRefs: formRefs.value[index] });
+                    }
+                  }
+                },
+                () => text
+              ),
+              buttonRow.directives || []
+            )
+          }
+        ) : withDirectives(
+          h(
+            Tag,
+            {
+              size: "small",
+              ...defaultProps,
+              ...buttonRowProps,
+              onClick: (event) => handleClickAction(
+                { ...callbackParams, e: event, formRefs: formRefs.value[index] },
+                msg
+              )
+            },
+            () => text
+          ),
+          buttonRow.directives || []
+        );
+      }
+    };
+    const handleConfirm = (callbackParams) => {
+      if (isFunction(callbackParams.buttonRow.onConfirm)) {
+        callbackParams.buttonRow.onConfirm(callbackParams);
+      }
+      emit("clickAction", callbackParams);
+    };
+    const handleCancel = (callbackParams) => {
+      if (isFunction(callbackParams.buttonRow.onCancel)) {
+        callbackParams.buttonRow.onCancel(callbackParams);
+      }
+      emit("clickActionConfirmCancel", callbackParams);
+    };
+    const handleClickAction = (callbackParams, msg) => {
+      hideOnClick.value = true;
+      const { buttonRow } = callbackParams;
+      if (isFunction(buttonRow.onClick)) {
+        buttonRow.onClick(callbackParams);
+      }
+      if (buttonRow.confirm) {
+        if (props.confirmType === "messageBox") {
+          const { message, title, options, appContext } = msg;
+          ElMessageBox.confirm(message, title, options, appContext).then(() => {
+            if (isFunction(buttonRow.onConfirm)) {
+              buttonRow.onConfirm(callbackParams);
+            }
+            emit("clickAction", callbackParams);
+          }).catch(() => {
+            if (isFunction(buttonRow.onCancel)) {
+              buttonRow.onCancel(callbackParams);
+            }
+            emit("clickActionConfirmCancel", callbackParams);
+          });
+        }
+      } else {
+        emit("clickAction", callbackParams);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
+        key: "actionBar",
+        "class-name": "plus-table-action-bar",
+        label: unref(_ctx.label) || unref(t)("plus.table.action"),
+        fixed: _ctx.fixed || "right",
+        width: _ctx.width || 200
+      }, _ctx.actionBarTableColumnProps), {
+        default: withCtx(({ row, $index, ...rest }) => [
+          createCommentVNode(" \u663E\u793A\u51FA\u6765\u7684\u6309\u94AE "),
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(getSubButtons(row, $index).preButtons, (buttonRow) => {
+              return openBlock(), createBlock(resolveDynamicComponent(render(row, buttonRow, $index, rest)), {
+                key: buttonRow.text
+              });
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          createCommentVNode(" \u9690\u85CF\u7684\u6309\u94AE "),
+          getSubButtons(row, $index).showMore ? (openBlock(), createBlock(unref(ElDropdown), {
+            key: 0,
+            trigger: "click",
+            class: "plus-table-action-bar__dropdown",
+            "hide-on-click": hideOnClick.value
+          }, {
+            dropdown: withCtx(() => [
+              createVNode(
+                unref(ElDropdownMenu),
+                null,
+                {
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(getSubButtons(row, $index).nextButtons, (buttonRow) => {
+                        return openBlock(), createBlock(
+                          unref(ElDropdownItem),
+                          {
+                            key: unref(buttonRow.text)
+                          },
+                          {
+                            default: withCtx(() => [
+                              (openBlock(), createBlock(resolveDynamicComponent(render(row, buttonRow, $index, rest))))
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          },
+                          1024
+                          /* DYNAMIC_SLOTS */
+                        );
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                },
+                1024
+                /* DYNAMIC_SLOTS */
+              )
+            ]),
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_1, [
+                createElementVNode(
+                  "span",
+                  _hoisted_2,
+                  toDisplayString(unref(t)("plus.table.more")),
+                  1
+                  /* TEXT */
+                ),
+                renderSlot(_ctx.$slots, "action-bar-more-icon", {}, () => [
+                  createVNode(unref(ElIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowDownBold))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["hide-on-click"])) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["label", "fixed", "width"]);
+    };
+  }
+});
+
+export { _sfc_main as default };