From 4fc76650c03ee3e2fbceecf19bb5a3269cc860fd Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 20 Sep 2024 15:43:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E5=8D=B0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ah-jjzhgd-web/src/App.vue                     |  36 +++---
 ah-jjzhgd-web/src/utils/waterMark.js          | 109 ++++++++++--------
 ah-jjzhgd-web/src/views/system/dict/index.vue |  31 ++++-
 ah-jjzhgd-web/src/views/system/menu/index.vue |  29 ++++-
 ah-jjzhgd-web/src/views/system/org/index.vue  |  31 ++++-
 .../src/views/system/roles/index.vue          |  29 ++++-
 ah-jjzhgd-web/src/views/system/user/index.vue |  33 +++++-
 7 files changed, 227 insertions(+), 71 deletions(-)

diff --git a/ah-jjzhgd-web/src/App.vue b/ah-jjzhgd-web/src/App.vue
index 2426936..406bbd0 100644
--- a/ah-jjzhgd-web/src/App.vue
+++ b/ah-jjzhgd-web/src/App.vue
@@ -6,38 +6,38 @@
 
 <script>
 import { removeWatermark, setWaterMark } from "@/utils/waterMark";
-import {decryptData} from '@/utils/test';
+import { decryptData } from '@/utils/test';
 export default {
   name: 'App',
   created() {
-    this.loadWaterMark();
+    // this.loadWaterMark();
   },
-  updated(){
-    removeWatermark();
-    this.loadWaterMark();
+  updated() {
+    // removeWatermark();
+    // this.loadWaterMark();
   },
   mounted() {
-    window.onresize = () => {
+    /* window.onresize = () => {
       removeWatermark();
       this.loadWaterMark();
-    }
-    
+    } */
+
   },
   methods: {
     loadWaterMark() {
-    //设置水印内容，这段代码实现的是两行文本内容的水印。
-    const nickName = sessionStorage.getItem('nickName');
-    const roleName = sessionStorage.getItem('roleName');
-    let str1 = nickName ? decryptData(nickName) : '';
-    let str2 = roleName ? decryptData(roleName) : '';
-    let str3 = '建设部';
-    if(nickName || roleName){
-      setWaterMark(str1, str2,str3);
-    }
+      //设置水印内容，这段代码实现的是两行文本内容的水印。
+      const nickName = sessionStorage.getItem('nickName');
+      const roleName = sessionStorage.getItem('roleName');
+      let str1 = nickName ? decryptData(nickName) : '';
+      let str2 = roleName ? decryptData(roleName) : '';
+      let str3 = '建设部';
+      if (nickName || roleName) {
+        setWaterMark(str1, str2, str3);
+      }
     },
   },
   destroyed() {
-    removeWatermark();
+    // removeWatermark();
   },
 }
 </script>
diff --git a/ah-jjzhgd-web/src/utils/waterMark.js b/ah-jjzhgd-web/src/utils/waterMark.js
index 42e1e23..8e20718 100644
--- a/ah-jjzhgd-web/src/utils/waterMark.js
+++ b/ah-jjzhgd-web/src/utils/waterMark.js
@@ -1,51 +1,66 @@
 /**  水印添加方法  */
-let setWatermark = (str1, str2,str3) => {
-    let id = '1.23452384164.123412415'
-   
-    if (document.getElementById(id) !== null) {
-      document.body.removeChild(document.getElementById(id))
-    }
-    let can = document.createElement('canvas')
-    // 设置canvas画布大小
-    can.width = 200
-    can.height = 100
-    let cans = can.getContext('2d')
-    cans.rotate(-30 * Math.PI / 180) // 水印旋转角度
-    cans.font = '16px Microsoft Yahei'
-    cans.fillStyle = '#333333'
-    cans.textAlign = 'center'
-    cans.textBaseline = 'Middle'
-    cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴
-    cans.fillText(str2, can.width / 2, can.height + 20)
-    cans.fillText(str3, can.width / 2, can.height + 40)
-   
-    let div = document.createElement('div')
-    div.id = id
-    div.style.pointerEvents = 'none'
-    div.style.top = '0px'
-    div.style.left = '0px'
-    div.style.opacity = '0.3'
-    div.style.position = 'fixed'
-    div.style.zIndex = '100000'
-    div.style.width = document.documentElement.clientWidth + 'px'
-    div.style.height = document.documentElement.clientHeight  + 'px'
-    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
-    document.body.appendChild(div)
-    return id
+let setWatermark = (str1, str2, str3, sourceBody) => {
+  let id = "1.23452384164.123412415";
+
+  if (document.getElementById(id) !== null) {
+    document.body.removeChild(document.getElementById(id));
   }
-   
-  // 添加水印方法
-  export const setWaterMark = (str1, str2,str3) => {
-    let id = setWatermark(str1, str2,str3)
-    if (document.getElementById(id) === null) {
-      id = setWatermark(str1, str2,str3)
+  let can = document.createElement("canvas");
+  // 设置canvas画布大小
+  can.width = 200;
+  can.height = 100;
+  let cans = can.getContext("2d");
+  cans.rotate((-35 * Math.PI) / 180); // 水印旋转角度
+  cans.font = "16px Microsoft Yahei";
+  cans.fillStyle = "#333333";
+  cans.textAlign = "center";
+  cans.textBaseline = "Middle";
+  cans.fillText(str1, can.width / 3, can.height); // 水印在画布的位置x，y轴
+  cans.fillText(str2, can.width / 3, can.height + 20);
+  cans.fillText(str3, can.width / 3, can.height + 40);
+
+  let div = document.createElement("div");
+  div.id = id;
+  div.style.pointerEvents = "none";
+
+  div.style.opacity = "0.3";
+  div.style.zIndex = "100000";
+  div.style.background =
+    "url(" + can.toDataURL("image/png") + ") left top repeat";
+  if (sourceBody) {
+    div.style.width = sourceBody.clientWidth + "px";
+    div.style.height = sourceBody.clientHeight + "px";
+    div.style.top = "200px";
+    div.style.left = "640px";
+    div.style.position = "fixed";
+    sourceBody.appendChild(div);
+  } else {
+    div.style.top = "0px";
+    div.style.left = "0px";
+    div.style.position = "fixed";
+    div.style.width = document.documentElement.clientWidth + "px";
+    div.style.height = document.documentElement.clientHeight + "px";
+    document.body.appendChild(div);
+  }
+  return id;
+};
+
+// 添加水印方法
+export const setWaterMark = (str1, str2, str3, sourceBody) => {
+  let id = setWatermark(str1, str2, str3, sourceBody);
+  if (document.getElementById(id) === null) {
+    id = setWatermark(str1, str2, str3, sourceBody);
+  }
+};
+
+// 移除水印方法
+export const removeWatermark = (sourceBody) => {
+  let id = "1.23452384164.123412415";
+  if (document.getElementById(id) !== null) {
+    if (sourceBody) {
+      sourceBody.removeChild(document.getElementById(id));
+    } else {
+      document.body.removeChild(document.getElementById(id));
     }
   }
-   
-  // 移除水印方法
-  export const removeWatermark = () => {
-    let id = '1.23452384164.123412415'
-    if (document.getElementById(id) !== null) {
-      document.body.removeChild(document.getElementById(id))
-    }
-  }
\ No newline at end of file
+};
diff --git a/ah-jjzhgd-web/src/views/system/dict/index.vue b/ah-jjzhgd-web/src/views/system/dict/index.vue
index ed3a6bc..d589a15 100644
--- a/ah-jjzhgd-web/src/views/system/dict/index.vue
+++ b/ah-jjzhgd-web/src/views/system/dict/index.vue
@@ -28,6 +28,7 @@
     </div>
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+      <div ref="content">
       <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px"
         style="width: 400px; margin-left:50px;">
         <el-form-item label="上级节点" prop="type">
@@ -47,8 +48,9 @@
           <el-input v-model="temp.remarks" :maxlength="100" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
+    </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
+        <el-button @click="closeDialog">
           关闭
         </el-button>
         <el-button type="primary" @click="dialogStatus === 'create' ? addDict() : updateDict()">
@@ -78,6 +80,8 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { delUser } from '@/api/user'
 import { verifyPwd } from '@/api/verifyPwd'
 import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
+import { removeWatermark, setWaterMark } from "@/utils/waterMark";
+import {decryptData} from '@/utils/test';
 export default {
   components: { Pagination, Treeselect,modulDialog },
   directives: { waves },
@@ -124,7 +128,29 @@ export default {
     this.getList()
     this.fetchDictList()
   },
+  mounted() {
+    window.onresize = () => {
+      removeWatermark(this.$refs.content);
+      this.loadWaterMark();
+    }
+
+  },
   methods: {
+    closeDialog(){
+      removeWatermark(this.$refs.content);
+      this.dialogFormVisible = false
+    },
+    loadWaterMark() {
+      //设置水印内容，这段代码实现的是两行文本内容的水印。
+      const nickName = sessionStorage.getItem('nickName');
+      const roleName = sessionStorage.getItem('roleName');
+      let str1 = nickName ? decryptData(nickName) : '';
+      let str2 = roleName ? decryptData(roleName) : '';
+      let str3 = '建设部';
+      if (nickName || roleName) {
+        setWaterMark(str1, str2, str3,this.$refs.content);
+      }
+    },
     openModulDialog(title, modulName, width, openFalg) {
       this.componentDialog.title = title
       this.componentDialog.modulName = modulName
@@ -224,6 +250,9 @@ export default {
         }
         this.temp = response.data
       })
+      this.$nextTick(() => {
+        this.loadWaterMark();
+      })
     },
     updateDict() {
       this.$refs['dataForm'].validate((valid) => {
diff --git a/ah-jjzhgd-web/src/views/system/menu/index.vue b/ah-jjzhgd-web/src/views/system/menu/index.vue
index 579ca0a..b848c7b 100644
--- a/ah-jjzhgd-web/src/views/system/menu/index.vue
+++ b/ah-jjzhgd-web/src/views/system/menu/index.vue
@@ -75,6 +75,7 @@
     </el-table>
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+      <div ref="content">
       <el-form
         ref="dataForm"
         :rules="rules"
@@ -123,8 +124,9 @@
           />
         </el-form-item>
       </el-form>
+    </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button @click="closeDialog"> 关闭 </el-button>
         <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
           提交
         </el-button>
@@ -148,6 +150,8 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import IconSelect from '@/components/IconSelect'
 import { verifyPwd } from '@/api/verifyPwd'
 import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
+import { removeWatermark, setWaterMark } from "@/utils/waterMark";
+import {decryptData} from '@/utils/test';
 const menuTypeArr = [
   {
     value: '0',
@@ -226,7 +230,29 @@ export default {
     this.getList()
     this.getMenuList()
   },
+  mounted() {
+    window.onresize = () => {
+      removeWatermark(this.$refs.content);
+      this.loadWaterMark();
+    }
+
+  },
   methods: {
+    closeDialog(){
+      removeWatermark(this.$refs.content);
+      this.dialogFormVisible = false
+    },
+    loadWaterMark() {
+      //设置水印内容，这段代码实现的是两行文本内容的水印。
+      const nickName = sessionStorage.getItem('nickName');
+      const roleName = sessionStorage.getItem('roleName');
+      let str1 = nickName ? decryptData(nickName) : '';
+      let str2 = roleName ? decryptData(roleName) : '';
+      let str3 = '建设部';
+      if (nickName || roleName) {
+        setWaterMark(str1, str2, str3,this.$refs.content);
+      }
+    },
     openModulDialog(title, modulName, width, openFalg) {
       this.componentDialog.title = title
       this.componentDialog.modulName = modulName
@@ -336,6 +362,7 @@ export default {
       this.$nextTick(() => {
         this.temp.menuId = null
         this.$refs['dataForm'].resetFields()
+        this.loadWaterMark();
       })
     },
     updateData() {
diff --git a/ah-jjzhgd-web/src/views/system/org/index.vue b/ah-jjzhgd-web/src/views/system/org/index.vue
index ce5250a..6a50308 100644
--- a/ah-jjzhgd-web/src/views/system/org/index.vue
+++ b/ah-jjzhgd-web/src/views/system/org/index.vue
@@ -28,6 +28,7 @@
     </div>
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+      <div ref="content">
       <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
         <el-form-item label="上级节点" prop="type">
           <treeselect v-model="temp.pId" :options="orgList" :show-count="true" placeholder="请选择组织机构" />
@@ -42,8 +43,9 @@
           <el-input v-model="temp.bName" placeholder="组织机构别名" />
         </el-form-item>
       </el-form>
+    </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
+        <el-button @click="closeDialog">
           关闭
         </el-button>
         <el-button type="primary" @click="dialogStatus==='create'?addOrg():updateOrg()">
@@ -67,6 +69,8 @@ import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { verifyPwd } from '@/api/verifyPwd'
 import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
+import { removeWatermark, setWaterMark } from "@/utils/waterMark";
+import {decryptData} from '@/utils/test';
 export default {
   components: { Pagination, Treeselect,modulDialog },
   directives: { waves },
@@ -111,7 +115,29 @@ export default {
     this.getList()
     this.fetchOrgList()
   },
+  mounted() {
+    window.onresize = () => {
+      removeWatermark(this.$refs.content);
+      this.loadWaterMark();
+    }
+
+  },
   methods: {
+    closeDialog(){
+      removeWatermark(this.$refs.content);
+      this.dialogFormVisible = false
+    },
+    loadWaterMark() {
+      //设置水印内容，这段代码实现的是两行文本内容的水印。
+      const nickName = sessionStorage.getItem('nickName');
+      const roleName = sessionStorage.getItem('roleName');
+      let str1 = nickName ? decryptData(nickName) : '';
+      let str2 = roleName ? decryptData(roleName) : '';
+      let str3 = '建设部';
+      if (nickName || roleName) {
+        setWaterMark(str1, str2, str3,this.$refs.content);
+      }
+    },
     openModulDialog(title, modulName, width, openFalg) {
       this.componentDialog.title = title
       this.componentDialog.modulName = modulName
@@ -210,6 +236,9 @@ export default {
         }
         this.temp = response.data
       })
+      this.$nextTick(() => {
+        this.loadWaterMark();
+      })
     },
     updateOrg() {
       this.$refs['dataForm'].validate((valid) => {
diff --git a/ah-jjzhgd-web/src/views/system/roles/index.vue b/ah-jjzhgd-web/src/views/system/roles/index.vue
index 955f992..36c5417 100644
--- a/ah-jjzhgd-web/src/views/system/roles/index.vue
+++ b/ah-jjzhgd-web/src/views/system/roles/index.vue
@@ -76,6 +76,7 @@
     />
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
+      <div ref="content">
       <el-form
         ref="dataForm"
         :rules="rules"
@@ -91,8 +92,9 @@
           <el-input-number v-model="temp.roleSort" :min="1" :max="1000" controls-position="right" />
         </el-form-item>
       </el-form>
+    </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button @click="closeDialog"> 关闭 </el-button>
         <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
           提交
         </el-button>
@@ -135,6 +137,8 @@ import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination'
 import { verifyPwd } from '@/api/verifyPwd'
 import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
+import { removeWatermark, setWaterMark } from "@/utils/waterMark";
+import {decryptData} from '@/utils/test';
 export default {
   components: { Pagination,modulDialog },
   directives: { waves },
@@ -192,7 +196,29 @@ export default {
     this.getList()
     this.getMenuList()
   },
+  mounted() {
+    window.onresize = () => {
+      removeWatermark(this.$refs.content);
+      this.loadWaterMark();
+    }
+
+  },
   methods: {
+    closeDialog(){
+      removeWatermark(this.$refs.content);
+      this.dialogFormVisible = false
+    },
+    loadWaterMark() {
+      //设置水印内容，这段代码实现的是两行文本内容的水印。
+      const nickName = sessionStorage.getItem('nickName');
+      const roleName = sessionStorage.getItem('roleName');
+      let str1 = nickName ? decryptData(nickName) : '';
+      let str2 = roleName ? decryptData(roleName) : '';
+      let str3 = '建设部';
+      if (nickName || roleName) {
+        setWaterMark(str1, str2, str3,this.$refs.content);
+      }
+    },
     openModulDialog(title, modulName, width, openFalg) {
       this.componentDialog.title = title
       this.componentDialog.modulName = modulName
@@ -297,6 +323,7 @@ export default {
       this.$nextTick(() => {
         this.temp.roleId = null
         this.$refs['dataForm'].resetFields()
+        this.loadWaterMark();
       })
     },
     updateData() {
diff --git a/ah-jjzhgd-web/src/views/system/user/index.vue b/ah-jjzhgd-web/src/views/system/user/index.vue
index 28749b0..fe1dd97 100644
--- a/ah-jjzhgd-web/src/views/system/user/index.vue
+++ b/ah-jjzhgd-web/src/views/system/user/index.vue
@@ -53,7 +53,8 @@
       @pagination="getList" />
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px"
+      <div ref="content">
+        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="80px"
         style="width: 400px; margin-left: 50px">
         <el-form-item label="用户名" prop="userName">
           <el-input v-model="temp.userName" placeholder="用户名" :maxlength="30" />
@@ -98,12 +99,15 @@
           </el-radio-group>
         </el-form-item>
       </el-form>
+      </div>
+      
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button @click="closeDialog"> 关闭 </el-button>
         <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
           提交
         </el-button>
       </div>
+      
     </el-dialog>
 
     <el-dialog title="重置密码" :visible.sync="dialogFormVisible2" width="600px">
@@ -143,6 +147,7 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import modulDialog from '@/components/pwdVerifiers/pwdVerifiers.vue'
 import {decryptData} from '@/utils/test';
 import {desensitize} from '@/utils/hyposensitization.js';
+import { removeWatermark, setWaterMark } from "@/utils/waterMark";
 const loginTypeArr = [
   {
     value: '1',
@@ -288,7 +293,29 @@ export default {
     this.getRoleList()
     this.getBuildList()
   },
+  mounted() {
+    window.onresize = () => {
+      removeWatermark(this.$refs.content);
+      this.loadWaterMark();
+    }
+
+  },
   methods: {
+    closeDialog(){
+      removeWatermark(this.$refs.content);
+      this.dialogFormVisible = false
+    },
+    loadWaterMark() {
+      //设置水印内容，这段代码实现的是两行文本内容的水印。
+      const nickName = sessionStorage.getItem('nickName');
+      const roleName = sessionStorage.getItem('roleName');
+      let str1 = nickName ? decryptData(nickName) : '';
+      let str2 = roleName ? decryptData(roleName) : '';
+      let str3 = '建设部';
+      if (nickName || roleName) {
+        setWaterMark(str1, str2, str3,this.$refs.content);
+      }
+    },
     phoneFormatter(row, column, cellValue, index){
       if(row.phone){
         let phone = decryptData(row.phone).replace(/\/g, '');
@@ -416,6 +443,7 @@ export default {
       this.openModulDialog('验证密码', 'pwdVerifiers', '600px', true)
     },
     isOpenEditDialog(){
+      
       let row = this.checkRow;
       getUserById({ userId: row.userId }).then((response) => {
         this.temp = Object.assign({}, response.data)
@@ -434,6 +462,7 @@ export default {
       this.$nextTick(() => {
         this.temp.roleId = null
         this.$refs['dataForm'].resetFields()
+        this.loadWaterMark();
       })
     },
     updateData() {