@zhsz/cool-design-crud/lib/components/dialog/index.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const tdesignVueNext = require("tdesign-vue-next");
const tdesignIconsVueNext = require("tdesign-icons-vue-next");
const coolDesign = require("@zhsz/cool-design");
const index = require("../../utils/index.js");
const vnode = require("../../utils/vnode.js");
require("../../utils/test.js");
const core = require("../../hooks/core.js");
require("@formily/core");
const lodashEs = require("lodash-es");
require("../../hooks/table.js");
const XEUtils = require("xe-utils");
const ClDialog = /* @__PURE__ */ vue.defineComponent({
  name: "cl-dialog",
  components: {
    TDialog: tdesignVueNext.Dialog,
    CloseIcon: tdesignIconsVueNext.CloseIcon,
    FullscreenIcon: tdesignIconsVueNext.FullscreenIcon,
    FullscreenExitIcon: tdesignIconsVueNext.FullscreenExitIcon,
    ChevronLeftIcon: tdesignIconsVueNext.ChevronLeftIcon,
    TdButton: tdesignVueNext.Button,
    Space: tdesignVueNext.Space,
    Divider: tdesignVueNext.Divider,
    Scrollbar: coolDesign.Scrollbar,
    Transition: vue.Transition
  },
  props: {
    /** 表格水印 优先级高于全局设置 */
    watermarkText: String,
    /** 表格水印props，会覆盖watermarkText */
    watermarkProps: {
      type: Object
    },
    watermarkDic: {
      type: Object
    },
    dialogProps: {
      type: Object
    },
    // 是否可见
    modelValue: {
      type: Boolean,
      default: false
    },
    props: Object,
    // 自定义样式名
    customClass: String,
    // 标题
    title: {
      type: String,
      default: "-"
    },
    // 高度
    height: {
      type: String,
      default: null
    },
    // 宽度
    width: {
      type: String,
      default: "50%"
    },
    placement: {
      type: String,
      default: "center"
    },
    attach: {
      type: String,
      default: "body"
    },
    // 是否缓存
    keepAlive: Boolean,
    // 是否全屏
    fullscreen: Boolean,
    // 点击蒙层时是否触发关闭事件
    closeOnOverlayClick: {
      type: Boolean,
      default: false
    },
    // 按下 ESC 时是否触发对话框关闭事件
    closeOnEscKeydown: {
      type: Boolean,
      default: false
    },
    // 控制按钮
    controls: {
      type: Array,
      default: () => ["fullscreen", "close"]
    },
    showBox: {
      type: Boolean,
      default: false
    },
    pageLayoutId: {
      type: String
    },
    // 关闭前
    beforeClose: Function,
    // 按钮组
    footer: [Function, Boolean],
    // 页面级样式
    pageStyle: {
      type: [Object, String],
      default: () => ({})
    },
    pageClass: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue", "fullscreen-change", "closed"],
  setup(props, {
    emit,
    expose,
    slots
  }) {
    const {
      browser,
      showWatermark,
      watermark,
      dict
    } = core.useTools();
    const Dialog = vue.ref();
    const fullscreen = vue.ref(false);
    const visible = vue.ref(false);
    const cacheKey = vue.ref(0);
    const isFullscreen = vue.computed(() => {
      return browser && browser.isMini ? true : fullscreen.value;
    });
    const isMounted = vue.ref(false);
    vue.onMounted(async () => {
      await vue.nextTick();
      if (props.showBox) {
        if (props.pageLayoutId && document.getElementById(props.pageLayoutId)) {
          isMounted.value = true;
        } else {
          console.error("不存在渲染父节点");
        }
      }
    });
    vue.watch(() => props.showBox, (bol) => {
      if (bol) {
        if (props.pageLayoutId && document.getElementById(props.pageLayoutId)) {
          isMounted.value = true;
        } else {
          console.error("不存在渲染父节点");
        }
      }
    });
    vue.watch(() => props.modelValue, (val) => {
      visible.value = val;
      if (val && !props.keepAlive) {
        cacheKey.value += 1;
      }
    }, {
      immediate: true
    });
    vue.watch(() => props.fullscreen, (val) => {
      fullscreen.value = val;
    }, {
      immediate: true
    });
    vue.watch(fullscreen, (val) => {
      emit("fullscreen-change", val);
    });
    vue.provide("dialog", {
      visible,
      fullscreen: isFullscreen
    });
    function open() {
      fullscreen.value = true;
    }
    function close() {
      function done() {
        onClose();
      }
      if (props.beforeClose) {
        props.beforeClose(done);
      } else {
        done();
      }
    }
    function onClose() {
      emit("update:modelValue", false);
      emit("closed");
    }
    function changeFullscreen(val) {
      fullscreen.value = index.isBoolean(val) ? Boolean(val) : !fullscreen.value;
    }
    function dblClickFullscreen() {
      if (index.isArray(props.controls) && props.controls.includes("fullscreen")) {
        changeFullscreen();
      }
    }
    function renderHeader() {
      return vue.createVNode("div", {
        "class": "cl-dialog__header",
        "onDblclick": dblClickFullscreen
      }, [vue.createVNode("span", {
        "class": "cl-dialog__title"
      }, [props.title]), vue.createVNode("div", {
        "class": "cl-dialog__controls"
      }, [props.controls.map((e) => {
        switch (e) {
          case "fullscreen":
            if (browser.screen === "xs") {
              return null;
            }
            if (isFullscreen.value) {
              return vue.createVNode("div", {
                "class": "minimize"
              }, [vue.createVNode(tdesignIconsVueNext.FullscreenExitIcon, {
                "size": "20px",
                "onClick": () => {
                  changeFullscreen(false);
                }
              }, null)]);
            } else {
              return vue.createVNode("div", {
                "class": "maximize"
              }, [vue.createVNode(tdesignIconsVueNext.FullscreenIcon, {
                "size": "20px",
                "onClick": () => {
                  changeFullscreen(true);
                }
              }, null)]);
            }
          case "close":
            return vue.createVNode("div", {
              "class": "close"
            }, [vue.createVNode(tdesignIconsVueNext.CloseIcon, {
              "size": "25px",
              "onClick": close
            }, null)]);
          default:
            return vnode.renderNode(e, {
              slots
            });
        }
      })])]);
    }
    const watermarkProps = vue.computed(() => {
      var _a, _b, _c, _d, _e, _f;
      if (props.watermarkProps)
        if (props.watermarkProps.watermarkContent) {
          return props.watermarkProps;
        } else {
          return {
            ...props.watermarkProps,
            watermarkContent: props.watermarkText
          };
        }
      if (showWatermark) {
        if (props.watermarkDic) {
          return {
            ...watermark,
            watermarkContent: {
              text: ((_a = props.watermarkDic) == null ? void 0 : _a.prefix) ?? "" + ((_b = props.watermarkDic) == null ? void 0 : _b.level) + ((_c = props.watermarkDic) == null ? void 0 : _c.detail)
            }
          };
        }
        if (dict.watermark) {
          return {
            ...watermark,
            watermarkContent: {
              text: ((_d = dict.watermark) == null ? void 0 : _d.prefix) ?? "" + ((_e = dict.watermark) == null ? void 0 : _e.level) + ((_f = dict.watermark) == null ? void 0 : _f.detail)
            }
          };
        }
        return {
          ...watermark,
          watermarkContent: {
            text: ""
          }
        };
      } else {
        return {
          ...watermark,
          watermarkContent: {
            text: ""
          }
        };
      }
    });
    expose({
      Dialog,
      visible,
      isFullscreen,
      open,
      close,
      changeFullscreen
    });
    const box = vue.createVNode(vue.Teleport, {
      "to": ["#", props.pageLayoutId].join("")
    }, {
      default: () => [vue.createVNode(vue.Transition, {
        "name": "slide-fade"
      }, {
        default: () => [visible.value ? vue.createVNode("div", {
          "ref": "popupContainer",
          "class": "cl-popup-container"
        }, [vue.createVNode(tdesignVueNext.Watermark, watermarkProps.value, {
          default: () => [vue.createVNode("div", {
            "class": "cl-popup-body"
          }, [vue.createVNode("div", {
            "class": "cl-popup-header"
          }, [vue.createVNode("div", {
            "style": {
              display: "flex",
              paddingLeft: "24px",
              alignItems: "center"
            }
          }, [vue.createVNode("div", null, [vue.createVNode(tdesignVueNext.Button, {
            "variant": "text",
            "onClick": close,
            "style": "padding:0"
          }, {
            default: () => [vue.createVNode("div", {
              "style": "display:flex;align-items:center;"
            }, [vue.createVNode(tdesignIconsVueNext.ChevronLeftIcon, {
              "size": "18px"
            }, null), vue.createTextVNode("返回")])]
          })]), vue.createVNode(tdesignVueNext.Divider, {
            "layout": "vertical"
          }, null), vue.createVNode("div", {
            "style": {
              fontSize: "14px",
              color: "#86909c"
            }
          }, [props.title])]), vue.createVNode("div", {
            "style": {
              paddingRight: "20px"
            }
          }, [vue.createVNode(tdesignVueNext.Space, null, {
            default: () => {
              var _a;
              return [(_a = slots.footer) == null ? void 0 : _a.call(slots)];
            }
          })])]), vue.createVNode(coolDesign.Scrollbar, null, {
            default: () => {
              var _a;
              return [vue.createVNode("div", {
                "class": props.pageClass,
                "style": XEUtils.isString(props.pageStyle) ? `pading: 50px 100px;flex: 1 1 0%;overflow:auto;${props.pageStyle}` : {
                  padding: "50px 100px",
                  flex: "1 1 0%",
                  overflow: "auto",
                  ...props.pageStyle
                }
              }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
            }
          })])]
        })]) : ""]
      })]
    });
    const dialog = () => vue.createVNode(coolDesign.Scrollbar, {
      "height": props.height
    }, {
      default: () => [vue.createVNode("div", {
        "class": "cl-dialog__container",
        "key": cacheKey.value
      }, [vue.createVNode(tdesignVueNext.Watermark, watermarkProps.value, {
        default: () => {
          var _a;
          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
        }
      })])]
    });
    return () => {
      if (isMounted.value && props.showBox) {
        return box;
      } else {
        return vue.createVNode(tdesignVueNext.Dialog, vue.mergeProps({
          "ref": Dialog
        }, lodashEs.omit(lodashEs.pickBy(props.dialogProps, (value) => value !== void 0), ["header", "footer", "body", "visible", "onClose", "attach", "mode", "closeOnOverlayClick", "placement", "width", "customClass"]), {
          "class": ["cl-dialog", props.customClass],
          "width": props.width,
          "placement": props.placement,
          "closeOnOverlayClick": props.closeOnOverlayClick,
          "closeOnEscKeydown": props.closeOnEscKeydown,
          "mode": fullscreen.value ? "full-screen" : "modal",
          "attach": props.attach,
          "onClose": onClose,
          "visible": visible.value,
          "onUpdate:visible": (value) => {
            visible.value = value;
          }
        }), {
          header() {
            return renderHeader();
          },
          default() {
            return dialog();
          },
          footer() {
            var _a;
            return slots.footer ? vue.createVNode("div", {
              "class": "cl-dialog__footer"
            }, [(_a = slots.footer) == null ? void 0 : _a.call(slots)]) : "";
          }
        });
      }
    };
  }
});
exports.default = ClDialog;