xiaoxian521
3 years ago
24 changed files with 703 additions and 157 deletions
-
14index.html
-
10package.json
-
248pnpm-lock.yaml
-
2public/serverConfig.json
-
4src/layout/components/sidebar/sidebarItem.vue
-
63src/layout/frameView.vue
-
1src/layout/types.ts
-
5src/main.ts
-
11src/router/index.ts
-
9src/router/modules/externalLink.ts
-
7src/router/utils.ts
-
2src/store/modules/multiTags.ts
-
4src/style/index.scss
-
4src/utils/http/index.ts
-
4src/utils/http/types.d.ts
-
3src/utils/is.ts
-
3src/utils/link.ts
-
54src/utils/loaders/index.ts
-
15src/utils/operate/index.ts
-
226src/utils/print.ts
-
35src/utils/resize/index.ts
-
116src/utils/watermark.ts
-
9types/global.d.ts
-
11vite.config.ts
@ -0,0 +1,63 @@ |
|||||
|
<template> |
||||
|
<div class="frame" v-loading="loading"> |
||||
|
<iframe :src="frameSrc" class="frame-iframe" ref="frameRef"></iframe> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { useRoute } from "vue-router"; |
||||
|
import { ref, unref, onMounted, nextTick } from "vue"; |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const currentRoute = useRoute(); |
||||
|
const frameSrc = ref<string>(""); |
||||
|
const frameRef = ref<HTMLElement | null>(null); |
||||
|
|
||||
|
if (unref(currentRoute.meta)?.frameSrc) { |
||||
|
frameSrc.value = unref(currentRoute.meta)?.frameSrc as string; |
||||
|
} |
||||
|
|
||||
|
function hideLoading() { |
||||
|
loading.value = false; |
||||
|
} |
||||
|
|
||||
|
function init() { |
||||
|
nextTick(() => { |
||||
|
const iframe = unref(frameRef); |
||||
|
if (!iframe) return; |
||||
|
const _frame = iframe as any; |
||||
|
if (_frame.attachEvent) { |
||||
|
_frame.attachEvent("onload", () => { |
||||
|
hideLoading(); |
||||
|
}); |
||||
|
} else { |
||||
|
iframe.onload = () => { |
||||
|
hideLoading(); |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
loading.value = true; |
||||
|
init(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.frame { |
||||
|
height: 100vh; |
||||
|
z-index: 998; |
||||
|
|
||||
|
.frame-iframe { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
border: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main-content { |
||||
|
margin: 0 !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
interface ProxyLoader { |
||||
|
loadCss(src: string): any; |
||||
|
loadScript(src: string): Promise<any>; |
||||
|
loadScriptConcurrent(src: Array<string>): Promise<any>; |
||||
|
} |
||||
|
|
||||
|
class loaderProxy implements ProxyLoader { |
||||
|
constructor() {} |
||||
|
|
||||
|
protected scriptLoaderCache: Array<string> = []; |
||||
|
|
||||
|
public loadCss = (src: string): any => { |
||||
|
const element: HTMLLinkElement = document.createElement("link"); |
||||
|
element.rel = "stylesheet"; |
||||
|
element.href = src; |
||||
|
document.body.appendChild(element); |
||||
|
}; |
||||
|
|
||||
|
public loadScript = async (src: string): Promise<any> => { |
||||
|
if (this.scriptLoaderCache.includes(src)) { |
||||
|
return src; |
||||
|
} else { |
||||
|
const element: HTMLScriptElement = document.createElement("script"); |
||||
|
element.src = src; |
||||
|
document.body.appendChild(element); |
||||
|
element.onload = () => { |
||||
|
return this.scriptLoaderCache.push(src); |
||||
|
}; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
public loadScriptConcurrent = async ( |
||||
|
srcList: Array<string> |
||||
|
): Promise<any> => { |
||||
|
if (Array.isArray(srcList)) { |
||||
|
const len: number = srcList.length; |
||||
|
if (len > 0) { |
||||
|
let count = 0; |
||||
|
srcList.map(src => { |
||||
|
if (src) { |
||||
|
this.loadScript(src).then(() => { |
||||
|
count++; |
||||
|
if (count === len) { |
||||
|
return; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export const loader = new loaderProxy(); |
||||
@ -0,0 +1,226 @@ |
|||||
|
interface PrintFunction { |
||||
|
extendOptions: Function; |
||||
|
getStyle: Function; |
||||
|
setDomHeight: Function; |
||||
|
toPrint: Function; |
||||
|
} |
||||
|
|
||||
|
const Print = function (dom, options?: object): PrintFunction { |
||||
|
options = options || {}; |
||||
|
// @ts-expect-error
|
||||
|
if (!(this instanceof Print)) return new Print(dom, options); |
||||
|
this.conf = { |
||||
|
styleStr: "", |
||||
|
// Elements that need to dynamically get and set the height
|
||||
|
setDomHeightArr: [], |
||||
|
// Echart dom List
|
||||
|
echartDomArr: [], |
||||
|
// Callback before printing
|
||||
|
printBeforeFn: null, |
||||
|
// Callback after printing
|
||||
|
printDoneCallBack: null |
||||
|
}; |
||||
|
for (const key in this.conf) { |
||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||
|
if (key && options.hasOwnProperty(key)) { |
||||
|
this.conf[key] = options[key]; |
||||
|
} |
||||
|
} |
||||
|
if (typeof dom === "string") { |
||||
|
this.dom = document.querySelector(dom); |
||||
|
} else { |
||||
|
this.dom = this.isDOM(dom) ? dom : dom.$el; |
||||
|
} |
||||
|
if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) { |
||||
|
this.setDomHeight(this.conf.setDomHeightArr); |
||||
|
} |
||||
|
this.init(); |
||||
|
}; |
||||
|
|
||||
|
Print.prototype = { |
||||
|
/** |
||||
|
* init |
||||
|
*/ |
||||
|
init: function (): void { |
||||
|
const content = this.getStyle() + this.getHtml(); |
||||
|
this.writeIframe(content); |
||||
|
}, |
||||
|
/** |
||||
|
* Configuration property extension |
||||
|
* @param {Object} obj |
||||
|
* @param {Object} obj2 |
||||
|
*/ |
||||
|
extendOptions: function <T>(obj, obj2: T): T { |
||||
|
for (const k in obj2) { |
||||
|
obj[k] = obj2[k]; |
||||
|
} |
||||
|
return obj; |
||||
|
}, |
||||
|
/** |
||||
|
Copy all styles of the original page |
||||
|
*/ |
||||
|
getStyle: function (): string { |
||||
|
let str = ""; |
||||
|
const styles: NodeListOf<Element> = document.querySelectorAll("style,link"); |
||||
|
for (let i = 0; i < styles.length; i++) { |
||||
|
str += styles[i].outerHTML; |
||||
|
} |
||||
|
str += `<style>.no-print{display:none;}${this.conf.styleStr}</style>`; |
||||
|
return str; |
||||
|
}, |
||||
|
// form assignment
|
||||
|
getHtml: function (): Element { |
||||
|
const inputs = document.querySelectorAll("input"); |
||||
|
const selects = document.querySelectorAll("select"); |
||||
|
const textareas = document.querySelectorAll("textarea"); |
||||
|
for (let k = 0; k < inputs.length; k++) { |
||||
|
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") { |
||||
|
if (inputs[k].checked == true) { |
||||
|
inputs[k].setAttribute("checked", "checked"); |
||||
|
} else { |
||||
|
inputs[k].removeAttribute("checked"); |
||||
|
} |
||||
|
} else if (inputs[k].type == "text") { |
||||
|
inputs[k].setAttribute("value", inputs[k].value); |
||||
|
} else { |
||||
|
inputs[k].setAttribute("value", inputs[k].value); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
for (let k2 = 0; k2 < textareas.length; k2++) { |
||||
|
if (textareas[k2].type == "textarea") { |
||||
|
textareas[k2].innerHTML = textareas[k2].value; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
for (let k3 = 0; k3 < selects.length; k3++) { |
||||
|
if (selects[k3].type == "select-one") { |
||||
|
const child = selects[k3].children; |
||||
|
for (const i in child) { |
||||
|
if (child[i].tagName == "OPTION") { |
||||
|
// @ts-ignore
|
||||
|
if (child[i].selected == true) { |
||||
|
child[i].setAttribute("selected", "selected"); |
||||
|
} else { |
||||
|
child[i].removeAttribute("selected"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return this.dom.outerHTML; |
||||
|
}, |
||||
|
/** |
||||
|
create iframe |
||||
|
*/ |
||||
|
writeIframe: function (content) { |
||||
|
let w: Document | Window; |
||||
|
let doc: Document; |
||||
|
const iframe: HTMLIFrameElement = document.createElement("iframe"); |
||||
|
const f: HTMLIFrameElement = document.body.appendChild(iframe); |
||||
|
iframe.id = "myIframe"; |
||||
|
iframe.setAttribute( |
||||
|
"style", |
||||
|
"position:absolute;width:0;height:0;top:-10px;left:-10px;" |
||||
|
); |
||||
|
// eslint-disable-next-line prefer-const
|
||||
|
w = f.contentWindow || f.contentDocument; |
||||
|
// eslint-disable-next-line prefer-const
|
||||
|
doc = f.contentDocument || f.contentWindow.document; |
||||
|
doc.open(); |
||||
|
doc.write(content); |
||||
|
doc.close(); |
||||
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
|
const _this = this; |
||||
|
iframe.onload = function (): void { |
||||
|
// Before popping, callback
|
||||
|
if (_this.conf.printBeforeFn) { |
||||
|
_this.conf.printBeforeFn({ doc }); |
||||
|
} |
||||
|
|
||||
|
_this.drawEchartImg(doc).then(() => { |
||||
|
_this.toPrint(w); |
||||
|
setTimeout(function () { |
||||
|
document.body.removeChild(iframe); |
||||
|
// After popup, callback
|
||||
|
if (_this.conf.printDoneCallBack) { |
||||
|
_this.conf.printDoneCallBack(); |
||||
|
} |
||||
|
}, 100); |
||||
|
}); |
||||
|
}; |
||||
|
}, |
||||
|
/** |
||||
|
* echarts printing |
||||
|
* @param {Object} doc iframe window |
||||
|
*/ |
||||
|
drawEchartImg(doc): Promise<void> { |
||||
|
return new Promise<void>(resolve => { |
||||
|
if (this.conf.echartDomArr && this.conf.echartDomArr.length > 0) { |
||||
|
this.conf.echartDomArr.forEach(e => { |
||||
|
const dom = doc.querySelector("#" + e.$el.id); |
||||
|
const img = new Image(); |
||||
|
const w = dom.offsetWidth + "px"; |
||||
|
const H = dom.offsetHeight + "px"; |
||||
|
|
||||
|
img.style.width = w; |
||||
|
img.style.height = H; |
||||
|
img.src = e.imgSrc; |
||||
|
dom.innerHTML = ""; |
||||
|
dom.appendChild(img); |
||||
|
}); |
||||
|
} |
||||
|
resolve(); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
Print |
||||
|
*/ |
||||
|
toPrint: function (frameWindow): void { |
||||
|
try { |
||||
|
setTimeout(function () { |
||||
|
frameWindow.focus(); |
||||
|
try { |
||||
|
if (!frameWindow.document.execCommand("print", false, null)) { |
||||
|
frameWindow.print(); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
frameWindow.print(); |
||||
|
} |
||||
|
frameWindow.close(); |
||||
|
}, 10); |
||||
|
} catch (err) { |
||||
|
console.error(err); |
||||
|
} |
||||
|
}, |
||||
|
isDOM: |
||||
|
typeof HTMLElement === "object" |
||||
|
? function (obj) { |
||||
|
return obj instanceof HTMLElement; |
||||
|
} |
||||
|
: function (obj) { |
||||
|
return ( |
||||
|
obj && |
||||
|
typeof obj === "object" && |
||||
|
obj.nodeType === 1 && |
||||
|
typeof obj.nodeName === "string" |
||||
|
); |
||||
|
}, |
||||
|
/** |
||||
|
* Set the height of the specified dom element by getting the existing height of the dom element and setting |
||||
|
* @param {Array} arr |
||||
|
*/ |
||||
|
setDomHeight(arr) { |
||||
|
if (arr && arr.length) { |
||||
|
arr.forEach(name => { |
||||
|
const domArr = document.querySelectorAll(name); |
||||
|
domArr.forEach(dom => { |
||||
|
dom.style.height = dom.offsetHeight + "px"; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export default Print; |
||||
@ -0,0 +1,35 @@ |
|||||
|
import ResizeObserver from "resize-observer-polyfill"; |
||||
|
|
||||
|
const isServer = typeof window === "undefined"; |
||||
|
|
||||
|
const resizeHandler = (entries: any[]): void => { |
||||
|
for (const entry of entries) { |
||||
|
const listeners = entry.target.__resizeListeners__ || []; |
||||
|
if (listeners.length) { |
||||
|
listeners.forEach((fn: () => any) => { |
||||
|
fn(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const addResizeListener = (element: any, fn: () => any): any => { |
||||
|
if (isServer) return; |
||||
|
if (!element.__resizeListeners__) { |
||||
|
element.__resizeListeners__ = []; |
||||
|
element.__ro__ = new ResizeObserver(resizeHandler); |
||||
|
element.__ro__.observe(element); |
||||
|
} |
||||
|
element.__resizeListeners__.push(fn); |
||||
|
}; |
||||
|
|
||||
|
export const removeResizeListener = (element: any, fn: () => any): any => { |
||||
|
if (!element || !element.__resizeListeners__) return; |
||||
|
element.__resizeListeners__.splice( |
||||
|
element.__resizeListeners__.indexOf(fn), |
||||
|
1 |
||||
|
); |
||||
|
if (!element.__resizeListeners__.length) { |
||||
|
element.__ro__.disconnect(); |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,116 @@ |
|||||
|
import { |
||||
|
ref, |
||||
|
Ref, |
||||
|
unref, |
||||
|
shallowRef, |
||||
|
onBeforeUnmount, |
||||
|
getCurrentInstance |
||||
|
} from "vue"; |
||||
|
import { isDef } from "/@/utils/is"; |
||||
|
import { useRafThrottle } from "/@/utils/operate"; |
||||
|
import { addResizeListener, removeResizeListener } from "/@/utils/resize"; |
||||
|
|
||||
|
const domSymbol = Symbol("watermark-dom"); |
||||
|
|
||||
|
type attr = { |
||||
|
font?: string; |
||||
|
fillStyle?: string; |
||||
|
}; |
||||
|
|
||||
|
export function useWatermark( |
||||
|
appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement> |
||||
|
) { |
||||
|
const func = useRafThrottle(function () { |
||||
|
const el = unref(appendEl); |
||||
|
if (!el) return; |
||||
|
const { clientHeight: height, clientWidth: width } = el; |
||||
|
updateWatermark({ height, width }); |
||||
|
}); |
||||
|
const id = domSymbol.toString(); |
||||
|
const watermarkEl = shallowRef<HTMLElement>(); |
||||
|
|
||||
|
const clear = () => { |
||||
|
const domId = unref(watermarkEl); |
||||
|
watermarkEl.value = undefined; |
||||
|
const el = unref(appendEl); |
||||
|
if (!el) return; |
||||
|
domId && el.removeChild(domId); |
||||
|
removeResizeListener(el, func); |
||||
|
}; |
||||
|
|
||||
|
function createBase64(str: string, attr?: attr) { |
||||
|
const can = document.createElement("canvas"); |
||||
|
const width = 300; |
||||
|
const height = 240; |
||||
|
Object.assign(can, { width, height }); |
||||
|
|
||||
|
const cans = can.getContext("2d"); |
||||
|
if (cans) { |
||||
|
cans.rotate((-20 * Math.PI) / 120); |
||||
|
cans.font = attr?.font ?? "15px Reggae One"; |
||||
|
cans.fillStyle = attr?.fillStyle ?? "rgba(0, 0, 0, 0.15)"; |
||||
|
cans.textAlign = "left"; |
||||
|
cans.textBaseline = "middle"; |
||||
|
cans.fillText(str, width / 20, height); |
||||
|
} |
||||
|
return can.toDataURL("image/png"); |
||||
|
} |
||||
|
|
||||
|
function updateWatermark( |
||||
|
options: { |
||||
|
width?: number; |
||||
|
height?: number; |
||||
|
str?: string; |
||||
|
attr?: attr; |
||||
|
} = {} |
||||
|
) { |
||||
|
const el = unref(watermarkEl); |
||||
|
if (!el) return; |
||||
|
if (isDef(options.width)) { |
||||
|
el.style.width = `${options.width}px`; |
||||
|
} |
||||
|
if (isDef(options.height)) { |
||||
|
el.style.height = `${options.height}px`; |
||||
|
} |
||||
|
if (isDef(options.str)) { |
||||
|
el.style.background = `url(${createBase64( |
||||
|
options.str, |
||||
|
options.attr |
||||
|
)}) left top repeat`;
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const createWatermark = (str: string, attr?: attr) => { |
||||
|
if (unref(watermarkEl)) { |
||||
|
updateWatermark({ str, attr }); |
||||
|
return id; |
||||
|
} |
||||
|
const div = document.createElement("div"); |
||||
|
watermarkEl.value = div; |
||||
|
div.id = id; |
||||
|
div.style.pointerEvents = "none"; |
||||
|
div.style.top = "0px"; |
||||
|
div.style.left = "0px"; |
||||
|
div.style.position = "absolute"; |
||||
|
div.style.zIndex = "100000"; |
||||
|
const el = unref(appendEl); |
||||
|
if (!el) return id; |
||||
|
const { clientHeight: height, clientWidth: width } = el; |
||||
|
updateWatermark({ str, width, height, attr }); |
||||
|
el.appendChild(div); |
||||
|
return id; |
||||
|
}; |
||||
|
|
||||
|
function setWatermark(str: string, attr?: attr) { |
||||
|
createWatermark(str, attr); |
||||
|
addResizeListener(document.documentElement, func); |
||||
|
const instance = getCurrentInstance(); |
||||
|
if (instance) { |
||||
|
onBeforeUnmount(() => { |
||||
|
clear(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { setWatermark, clear }; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue