n20-common-lib 2.9.59 → 2.9.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.9.59",
+  "version": "2.9.60",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/directives/watermark/index.js

@@ -1,66 +1,134 @@
-const addWaterMarker = (str, parentNode, font, textColor) => {
-  const args = arguments[0]
-  let can = document.createElement('canvas')
-  const __wm = document.querySelector('.n20_v_watermark')
-  let div = __wm || document.createElement('div')
-
-  can.width = 220
-  can.height = 180
+// 全局状态
+let isGlobalWatermarkActive = false
+let globalObserver = null
+
+// 默认配置
+const defaultOptions = {
+  text: '', // 水印文本
+  font: '16px Microsoft JhengHei', // 字体
+  textColor: 'rgba(180, 180, 180, 0.3)', // 文字颜色
+  width: 220, // 水印宽度
+  height: 180, // 水印高度
+  rotate: -20, // 旋转角度
+  zIndex: 99999, // z-index
+  global: false // 是否全局应用
+}
+
+// 创建水印canvas
+const createWatermarkCanvas = (options) => {
+  const can = document.createElement('canvas')
+  can.width = options.width
+  can.height = options.height
   can.style.display = 'none'
-  let cans = can.getContext('2d')
-  cans.rotate((-20 * Math.PI) / 180)
-  cans.font = font || '16px Microsoft JhengHei'
-  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
-  cans.textAlign = 'left'
-  cans.textBaseline = 'Middle'
-  cans.fillText(str, can.width / 10, can.height / 2)
-  const styleStr = `
-          position:absolute;
-          top:0;
-          left:0;
-          width:100%;
-          height:100%;
-          inset:0;
-          z-index:99999;
-          pointer-events:none;
-          background-repeat:repeat;
-          background-image:url('${can.toDataURL('image/png')}')`
-  div.setAttribute('style', styleStr)
-  div.classList.add('n20_v_watermark')
-  if (!__wm) {
-    parentNode.style.position = 'relative'
-    parentNode.insertBefore(div, parentNode.firstChild)
+
+  const ctx = can.getContext('2d')
+  ctx.rotate((options.rotate * Math.PI) / 180)
+  ctx.font = options.font
+  ctx.fillStyle = options.textColor
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'Middle'
+  ctx.fillText(options.text, can.width / 10, can.height / 2)
+
+  return can.toDataURL('image/png')
+}
+
+// 创建水印容器
+const createWatermarkContainer = (options) => {
+  const div = document.createElement('div')
+  div.className = 'n20_v_watermark'
+
+  const style = `
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    inset:0;
+    z-index:${options.zIndex};
+    pointer-events:none;
+    background-repeat:repeat;
+    background-image:url('${createWatermarkCanvas(options)}')`
+
+  div.setAttribute('style', style)
+  return div
+}
+
+// 清除水印
+const clearWatermark = () => {
+  const watermarks = document.querySelectorAll('.n20_v_watermark')
+  watermarks.forEach((wm) => wm.remove())
+  if (globalObserver) {
+    globalObserver.disconnect()
+    globalObserver = null
+  }
+  isGlobalWatermarkActive = false
+}
+
+// 添加水印
+const addWatermark = (el, options) => {
+  // 如果全局水印已激活且当前不是全局调用，则跳过
+  if (isGlobalWatermarkActive && el !== document.body) {
+    return
+  }
+
+  const parent = el || document.body
+  const watermark = createWatermarkContainer(options)
+
+  parent.style.position = 'relative'
+  parent.insertBefore(watermark, parent.firstChild)
+
+  // 如果是全局水印，设置状态
+  if (el === document.body) {
+    isGlobalWatermarkActive = true
   }
+
+  // 监听DOM变化
   const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
   if (MutationObserver) {
-    let mo = new MutationObserver(function () {
-      const __wm = document.querySelector('.n20_v_watermark')
-      // 只在__wm元素变动才重新调用 __canvasWM
-      if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
-        // 避免一直触发
-        mo.disconnect()
-        mo = null
-        addWaterMarker(str, parentNode, font, textColor)
+    const observer = new MutationObserver(() => {
+      const wm = document.querySelector('.n20_v_watermark')
+      if (!wm || wm.getAttribute('style') !== watermark.getAttribute('style')) {
+        observer.disconnect()
+        addWatermark(el, options)
       }
     })
 
-    mo.observe(parentNode, {
+    observer.observe(parent, {
       attributes: true,
       subtree: true,
       childList: true
     })
-  }
 
-  parentNode.style.position = 'relative'
-  parentNode.insertBefore(div, parentNode.firstChild)
+    // 如果是全局水印，保存observer
+    if (el === document.body) {
+      globalObserver = observer
+    }
+  }
 }
 
 const watermark = {
-  install: function (Vue) {
+  install(Vue, options = {}) {
+    // 合并配置
+    const config = { ...defaultOptions, ...options }
+
+    // 全局应用
+    if (config.global) {
+      clearWatermark()
+      addWatermark(document.body, config)
+    }
+
+    // 指令方式
     Vue.directive('watermark', {
-      inserted: function (el, binding) {
-        console.log(el, binding)
-        addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
+      inserted(el, binding) {
+        if (isGlobalWatermarkActive) return
+
+        const directiveOptions = typeof binding.value === 'string' ? { text: binding.value } : binding.value
+        addWatermark(el, { ...config, ...directiveOptions, global: false })
+      },
+      unbind(el) {
+        if (!isGlobalWatermarkActive) {
+          clearWatermark()
+        }
       }
     })
   }

package/src/index.js

@@ -64,13 +64,13 @@ import Upload from './components/Upload/index.vue'
 import WornPagination from './components/WornPagination/index.vue'
 
 import AdvancedFilter from './components/AdvancedFilter/index.vue'
+import AttachmentPass from './components/AttachmentPass/index.vue'
 import DateChoose from './components/DateChoose/index.vue'
 import ElectronicArchive from './components/ElectronicArchive/index.vue'
+import HandlingAdvice from './components/HandlingAdvice/index.vue'
 import Preview from './components/Preview/index.vue'
 import SelectTreePro from './components/SelectTree/pro.vue'
 import Tree from './components/Tree/index.vue'
-import AttachmentPass from './components/AttachmentPass/index.vue'
-import HandlingAdvice from './components/HandlingAdvice/index.vue'
 
 // 新版日期选择框
 import BusiDatePicker from './components/DateSelect/busiDate.vue'
@@ -263,7 +263,7 @@ const install = function (Vue, opts = { prefix: 'Cl', i18nConfig: {} }) {
   Vue.use(VHas)
   Vue.use(VTableLoading)
   Vue.use(VErrorMessage)
-  Vue.use(watermark)
+  // Vue.use(watermark)
 
   Vue.use(i18n, opts.i18nConfig)
   Vue.prototype.$axios = axios
@@ -299,6 +299,7 @@ export {
   ApprovalRecordZjk,
   ApproveCard,
   ApproveCardZjk,
+  AttachmentPass,
   BusiDatePicker,
   Button,
   ButtonGroup,
@@ -326,6 +327,8 @@ export {
   FlowDialog,
   FlowStep,
   FooterBox,
+  HalfYearPicker,
+  HandlingAdvice,
   IconGroupButton,
   InputNumber,
   InputNumberRange,
@@ -337,7 +340,6 @@ export {
   Pagination,
   Preview,
   QuarterDatePicker,
-  HalfYearPicker,
   SecondaryTab,
   SelectDatePicker,
   SelectDatePickerPro,
@@ -364,12 +366,10 @@ export {
   TertiaryTab,
   TimePicker,
   Tree,
-  AttachmentPass,
   Upload,
   UploadMsg,
   WorkCard,
   WornPagination,
-  HandlingAdvice,
   asyncGetRelaNos,
   // 方法
   auth,
@@ -402,5 +402,6 @@ export {
   // 页签/路由
   setTabs,
   type,
-  version
+  version,
+  watermark
 }