y-admin-pro 0.0.1

package/packages/ele-popover/index.vue

@@ -0,0 +1,98 @@
+<!-- 气泡卡片 -->
+<template>
+  <EleTooltip
+    :tabindex="tabindex"
+    v-bind="tooltipProps"
+    ref="tooltipRef"
+    :isPopover="true"
+    @update:visible="handleUpdateVisible"
+    @before-show="handlePopBeforeEnter"
+    @before-hide="handlePopBeforeLeave"
+    @show="handlePopAfterEnter"
+    @hide="handlePopAfterLeave"
+  >
+    <template v-if="$slots.reference">
+      <slot name="reference"></slot>
+    </template>
+    <template #body>
+      <div :class="['ele-popover-body', bodyClass]" :style="bodyStyle">
+        <slot name="body">
+          <div
+            v-if="(title != null && title != '') || $slots.title"
+            class="ele-popover-title"
+            :style="titleStyle"
+          >
+            <slot name="title">{{ title }}</slot>
+          </div>
+          <div class="ele-popover-content" :style="contentStyle">
+            <slot>{{ content }}</slot>
+          </div>
+        </slot>
+      </div>
+    </template>
+  </EleTooltip>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import type { EleTooltipInstance, EleTooltipProps } from '../ele-app/plus';
+  import { pick } from '../utils/common';
+  import EleTooltip from '../ele-tooltip/index.vue';
+  import { tooltipPropKeys } from '../ele-tooltip/props';
+  import { popoverProps, popoverEmits } from './props';
+
+  defineOptions({ name: 'ElePopover' });
+
+  const props = defineProps(popoverProps);
+
+  const emit = defineEmits(popoverEmits);
+
+  /** 文字提示实例 */
+  const tooltipRef = ref<EleTooltipInstance>(null);
+
+  /** 文字提示属性 */
+  const tooltipProps = computed<EleTooltipProps>(() => {
+    const keys: any = tooltipPropKeys.filter(
+      (k) => !['content', 'bodyStyle'].includes(k)
+    );
+    const options: EleTooltipProps = pick(props, keys) as EleTooltipProps;
+    options.ariaLabel = props.title;
+    options.gpuAcceleration = props.transition === 'el-fade-in-linear';
+    return options;
+  });
+
+  /** 关闭气泡 */
+  const hide = () => {
+    tooltipRef.value && tooltipRef.value.hide();
+  };
+
+  /** 更新打开状态 */
+  const handleUpdateVisible = (visible: boolean) => {
+    emit('update:visible', visible);
+  };
+
+  /** 开始打开事件 */
+  const handlePopBeforeEnter = () => {
+    emit('before-enter');
+  };
+
+  /** 开始关闭事件 */
+  const handlePopBeforeLeave = () => {
+    emit('before-leave');
+  };
+
+  /** 打开结束事件 */
+  const handlePopAfterEnter = () => {
+    emit('after-enter');
+  };
+
+  /** 关闭结束事件 */
+  const handlePopAfterLeave = () => {
+    emit('after-leave');
+  };
+
+  defineExpose({
+    tooltipRef,
+    hide
+  });
+</script>

package/packages/ele-popover/props.ts

@@ -0,0 +1,39 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import {
+  popoverProps as elPopoverProps,
+  popoverEmits as elPopoverEmits
+} from 'element-plus';
+import type { StyleValue } from '../ele-app/types';
+import { omit } from '../utils/common';
+import { tooltipProps } from '../ele-tooltip/props';
+type Excludes = 'onUpdate:visible' | 'popperClass' | 'popperStyle';
+const normalizeProps = omit(elPopoverProps, ['onUpdate:visible'] as Excludes[]);
+
+/**
+ * 属性
+ */
+export const popoverProps = {
+  ...omit(tooltipProps, ['rawContent', 'isPopover']),
+  popperStyle: [String, Array, Object] as PropType<StyleValue>,
+  popperClass: String,
+  ...normalizeProps,
+  transition: {
+    type: String,
+    default: 'el-fade-in-linear'
+  },
+  /** 自定义主体类名 */
+  bodyClass: String,
+  /** 自定义主体样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 自定义标题样式 */
+  titleStyle: Object as PropType<StyleValue>,
+  /** 自定义内容样式 */
+  contentStyle: Object as PropType<StyleValue>
+};
+
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>;
+
+/**
+ * 事件
+ */
+export const popoverEmits = elPopoverEmits;

package/packages/ele-popover/style/index.ts

@@ -0,0 +1 @@
+import '../../ele-tooltip/style/index';

package/packages/ele-printer/index.vue

@@ -0,0 +1,116 @@
+<!-- 打印 -->
+<template>
+  <Teleport :to="container" :disabled="isStatic && !visible">
+    <table
+      :class="[
+        'ele-printer',
+        { 'is-open': visible },
+        { 'is-static': isStatic }
+      ]"
+    >
+      <thead v-if="$slots.header">
+        <tr>
+          <td>
+            <div class="ele-printer-header" :style="headerStyle">
+              <slot name="header"></slot>
+            </div>
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <ReceiverView class="ele-printer-body" :style="bodyStyle">
+              <slot></slot>
+            </ReceiverView>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot v-if="$slots.footer">
+        <tr>
+          <td>
+            <div class="ele-printer-footer" :style="footerStyle">
+              <slot name="footer"></slot>
+            </div>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+  import { shallowRef, ref, watch, nextTick, computed, onMounted } from 'vue';
+  import ReceiverView from '../ele-config-provider/components/receiver-view';
+  import { getPrintContainer, mergeOptions, usePrinter } from './util';
+  import type { PrintOption } from './types';
+  import { printerProps, printerEmits } from './props';
+
+  defineOptions({ name: 'ElePrinter' });
+
+  const props = defineProps(printerProps);
+
+  const emit = defineEmits(printerEmits);
+
+  const doPrint = usePrinter(() => {
+    visible.value = false;
+    updateModelValue(false);
+    handleDone();
+  });
+
+  /** 打印容器 */
+  const container = shallowRef<Element>(getPrintContainer());
+
+  /** 是否开始打印 */
+  const visible = ref<boolean>(false);
+
+  /** 是否显示在文档流中 */
+  const isStatic = computed<boolean>(() => props.static);
+
+  /** 打印 */
+  const print = (options?: any) => {
+    if (visible.value) {
+      return;
+    }
+    visible.value = true;
+    nextTick(() => {
+      const option: PrintOption = {
+        title: props.title,
+        margin: props.margin,
+        direction: props.direction,
+        orientation: props.orientation,
+        options: mergeOptions(props.options, options)
+      };
+      doPrint(option, props.target);
+    });
+  };
+
+  /** 打印完成事件 */
+  const handleDone = () => {
+    emit('done');
+  };
+
+  /** 更新绑定值 */
+  const updateModelValue = (value: boolean) => {
+    emit('update:modelValue', value);
+  };
+
+  watch(
+    () => props.modelValue,
+    (modelValue) => {
+      if (modelValue) {
+        print();
+      }
+    }
+  );
+
+  onMounted(() => {
+    if (props.modelValue) {
+      print();
+    }
+  });
+
+  defineExpose({
+    print
+  });
+</script>

package/packages/ele-printer/props.ts

@@ -0,0 +1,43 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { PrintDirection, PrintOrientation, PrintTarget } from './types';
+
+/**
+ * 属性
+ */
+export const printerProps = {
+  /** 是否打印 */
+  modelValue: Boolean,
+  /** 页眉样式 */
+  headerStyle: Object as PropType<StyleValue>,
+  /** 内容样式 */
+  bodyStyle: Object as PropType<StyleValue>,
+  /** 页脚样式 */
+  footerStyle: Object as PropType<StyleValue>,
+  /** 标题 */
+  title: String,
+  /** 页间距 */
+  margin: [String, Number],
+  /** 纸张方向 */
+  direction: String as PropType<PrintDirection | null>,
+  /** 纸张旋转 */
+  orientation: String as PropType<PrintOrientation | null>,
+  /** 打印位置 */
+  target: String as PropType<PrintTarget | null>,
+  /** 是否显示在文档流中 */
+  static: Boolean,
+  /** 打印方法参数 */
+  options: Object
+};
+
+export type PrinterProps = ExtractPropTypes<typeof printerProps>;
+
+/**
+ * 事件
+ */
+export const printerEmits = {
+  /** 更新打印状态 */
+  'update:modelValue': (_value: boolean) => true,
+  /** 打印完成的事件 */
+  done: () => true
+};

package/packages/ele-printer/style/index.scss

@@ -0,0 +1,66 @@
+/* 打印容器 */
+#ele-printer-container {
+  pointer-events: none;
+  display: none;
+}
+
+/* 页眉页脚 */
+.ele-printer {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  & > thead > tr > td,
+  & > tbody > tr > td,
+  & > tfoot > tr > td {
+    padding: 0;
+    border: none;
+  }
+
+  &:not(.is-open):not(.is-static) {
+    display: none;
+  }
+
+  .ele-printer-header,
+  .ele-printer-footer {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+
+  &:not(.is-open) .ele-printer-header,
+  &:not(.is-open) .ele-printer-footer {
+    display: none;
+  }
+
+  .ele-printer-body {
+    box-sizing: border-box;
+  }
+}
+
+/* 打印状态 */
+html.ele-printing,
+html.ele-printing > body {
+  color: #000 !important;
+  background: #fff !important;
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+  width: auto !important;
+  min-width: auto !important;
+  max-width: none !important;
+  overflow: visible !important;
+}
+
+html.ele-printing > body > * {
+  display: none !important;
+}
+
+html.ele-printing #ele-printer-container {
+  display: block !important;
+
+  * {
+    pointer-events: none !important;
+  }
+}

package/packages/ele-printer/style/index.ts

@@ -0,0 +1 @@
+import './index.scss';

package/packages/ele-printer/types.ts

@@ -0,0 +1,46 @@
+/**
+ * 纸张方向
+ */
+export type PrintDirection = 'landscape' | 'portrait' | string;
+
+/**
+ * 纸张旋转
+ */
+export type PrintOrientation = 'upright' | 'rotate-left' | 'rotate-right';
+
+/**
+ * 打印位置
+ */
+export type PrintTarget = '_self' | '_blank' | '_iframe';
+
+/**
+ * 打印参数
+ */
+export interface PrintOption {
+  /** 页面标题 */
+  title?: string;
+  /** 页间距 */
+  margin?: string | number;
+  /** 纸张方向 */
+  direction?: string | null;
+  /** 纸张旋转 */
+  orientation?: string | null;
+  /** 打印方法参数 */
+  options?: any;
+}
+
+/**
+ * pdf 打印参数
+ */
+export interface PrintPdfOption {
+  /** pdf 链接地址 */
+  url?: string;
+  /** 直接指定 arraybuffer 数据 */
+  arraybuffer?: ArrayBuffer;
+  /** 打印完成的回调 */
+  done?: () => void;
+  /** 错误回调 */
+  error?: (status: number, result: string) => void;
+  /** 打印方法参数 */
+  options?: any;
+}

package/packages/ele-printer/util.ts

@@ -0,0 +1,276 @@
+import { onBeforeUnmount } from 'vue';
+import { useTimer } from '../utils/hook';
+import type { PrintOption, PrintTarget, PrintPdfOption } from './types';
+export const printContainerId = 'ele-printer-container';
+export const printFrameId = 'ele-printer-iframe';
+export const printingClass = 'ele-printing';
+let printIdNum = 0;
+
+/**
+ * 合并打印方法参数
+ * @param options 参数
+ * @param userOptions 自定义参数
+ */
+export function mergeOptions(options?: any, userOptions?: any) {
+  if (options == null) {
+    return userOptions;
+  }
+  return Object.assign({}, options, userOptions);
+}
+
+/**
+ * 创建并获取打印容器
+ */
+export function getPrintContainer(): Element {
+  const container = document.getElementById(printContainerId);
+  if (container) {
+    return container;
+  }
+  const elem = document.createElement('div');
+  elem.id = printContainerId;
+  document.body.appendChild(elem);
+  return elem;
+}
+
+/**
+ * 生成打印设置的样式
+ * @param opt 打印参数
+ */
+function getOptionCss(opt: PrintOption) {
+  const css = ['@page {'];
+  if (opt.margin != null && opt.margin !== '') {
+    const v = typeof opt.margin === 'number' ? opt.margin + 'px' : opt.margin;
+    css.push(`margin: ${v};`);
+  }
+  if (opt.direction != null && opt.direction !== '') {
+    css.push(`size: ${opt.direction};`);
+  }
+  if (opt.orientation != null && opt.orientation !== '') {
+    css.push(`page-orientation: ${opt.orientation};`);
+  }
+  css.push('}');
+  return css.join(' ');
+}
+
+/**
+ * 移除打印子窗口
+ */
+function removePrintFrame() {
+  const pFrame = document.getElementById(printFrameId);
+  if (pFrame) {
+    if (pFrame.parentNode) {
+      pFrame.parentNode.removeChild(pFrame);
+    }
+    const url = pFrame.getAttribute('src');
+    if (url) {
+      try {
+        window.URL.revokeObjectURL(url);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+}
+
+/**
+ * 创建并获取打印子窗口
+ */
+function getPrintFrame(): HTMLIFrameElement {
+  removePrintFrame();
+  const elem = document.createElement('iframe');
+  elem.id = printFrameId;
+  elem.style.width = '66px';
+  elem.style.height = '66px';
+  elem.style.position = 'fixed';
+  elem.style.left = '-666px';
+  elem.style.top = '-666px';
+  document.body.appendChild(elem);
+  elem.focus();
+  return elem;
+}
+
+/**
+ * 在子窗口中打印
+ * @param opt 打印参数
+ * @param printId 唯一标识
+ * @param timeout 延迟时间
+ */
+function doPrintOnFrame(opt: PrintOption, printId: number, timeout?: number) {
+  const pFrame = getPrintFrame();
+  const pWin = pFrame.contentWindow;
+  if (!pWin) {
+    return;
+  }
+  pWin.focus();
+  const pDoc = pFrame.contentDocument || pWin.document;
+  if (!pDoc) {
+    return;
+  }
+  const container = getPrintContainer();
+  Array.from(
+    container.querySelectorAll('input[type="text"], input[type="number"]')
+  ).forEach((el: HTMLInputElement) => {
+    el.setAttribute('value', el.value);
+  });
+  pDoc.open();
+  const printOption = opt.options
+    ? `JSON.parse('${JSON.stringify(opt.options)}')`
+    : '';
+  const optHtml = `
+  <style type="text/css" media="print">
+    ${getOptionCss(opt)}
+  </style>
+  <script>
+    const $html = document.querySelector('html');
+    if($html && $html.classList && $html.classList.add) {
+      $html.classList.add('${printingClass}');
+    }
+    window.onload = function() {
+      if(${opt.title == null ? 0 : 1}) {
+        document.title = '${opt.title}';
+      }
+      ${timeout != null ? 'setTimeout(() => {' : ''}
+        window.print(${printOption});
+        window.parent.postMessage('elePrintDone_${printId}', '*');
+      ${timeout != null ? '}, ' + timeout + ');' : ''}
+    };
+  </script>
+  `;
+  const html = document.querySelector('html')?.outerHTML || '';
+  const content = html
+    .replace(/<script/g, '<textarea style="display:none;" ')
+    .replace(/<\/script>/g, '</textarea>')
+    .replace(/<\/html>/, optHtml + '</html>');
+  pDoc.write('<!DOCTYPE html>' + content);
+  pDoc.close();
+  return pWin;
+}
+
+/**
+ * usePrinter
+ * @param done 打印结束回调
+ */
+export function usePrinter(done: () => void) {
+  printIdNum++;
+  const printId = printIdNum;
+  const printTimeout = 500;
+  const [startPrintTimer] = useTimer(printTimeout);
+
+  /** 打印 */
+  const doPrint = (option: PrintOption, target?: PrintTarget | null) => {
+    if (target === '_iframe') {
+      doPrintOnFrame(option, printId, printTimeout);
+      return;
+    }
+    const $html = document.querySelector('html');
+    if (!$html) {
+      done && done();
+      return;
+    }
+    $html.classList.add(printingClass);
+    // 打印设置
+    const elem = document.createElement('style');
+    elem.setAttribute('type', 'text/css');
+    elem.setAttribute('media', 'print');
+    elem.innerHTML = getOptionCss(option);
+    document.body.appendChild(elem);
+    // 修改页面标题
+    const title = document.title;
+    if (option.title != null && option.title !== '') {
+      document.title = option.title;
+    }
+    // 打印
+    startPrintTimer(() => {
+      (window as any).print(option.options);
+      // 打印结束
+      startPrintTimer(() => {
+        $html.classList.remove(printingClass);
+        document.body.removeChild(elem);
+        // 恢复页面标题
+        if (option.title != null) {
+          document.title = title;
+        }
+        done && done();
+      });
+    });
+  };
+
+  /** 在子窗口中打印完回调 */
+  const handleMessage = (e: MessageEvent<any>) => {
+    if (e.data === `elePrintDone_${printId}`) {
+      startPrintTimer(() => {
+        removePrintFrame();
+        done && done();
+      });
+    }
+  };
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('message', handleMessage);
+  });
+
+  window.addEventListener('message', handleMessage);
+
+  return doPrint;
+}
+
+/**
+ * 打印 pdf
+ * @param option 打印参数
+ */
+export function printPdf(option: PrintPdfOption) {
+  const pFrame: any = getPrintFrame();
+  pFrame.onload = () => {
+    const url = pFrame.getAttribute('src');
+    if (!url) {
+      return;
+    }
+    pFrame.focus();
+    try {
+      pFrame.contentWindow && pFrame.contentWindow.print(option.options);
+      option.done && option.done();
+      window.URL.revokeObjectURL(url);
+      return;
+    } catch (e) {
+      console.error(e);
+    }
+    if (!option.arraybuffer && option.url) {
+      window.URL.revokeObjectURL(url);
+      window.open(option.url);
+    } else {
+      window.open(url);
+    }
+    option.done && option.done();
+  };
+
+  /** 开始打印 */
+  const doPrint = (buffer: ArrayBuffer) => {
+    const blob = new window.Blob([buffer], { type: 'application/pdf' });
+    if (window.navigator && window.navigator['msSaveOrOpenBlob']) {
+      window.navigator['msSaveOrOpenBlob'](blob, 'print.pdf');
+      option.done && option.done();
+      return;
+    }
+    pFrame.setAttribute('src', window.URL.createObjectURL(blob));
+  };
+
+  if (option.arraybuffer) {
+    doPrint(option.arraybuffer);
+    return;
+  }
+
+  // 请求地址数据
+  if (option.url) {
+    const req = new window.XMLHttpRequest();
+    req.open('GET', option.url, true);
+    req.responseType = 'arraybuffer';
+    req.onload = () => {
+      if ([200, 201].indexOf(req.status) !== -1) {
+        doPrint(req.response);
+        return;
+      }
+      option.error && option.error(req.status, req.statusText);
+    };
+    req.send();
+  }
+}