From 3a8cd04f6d10b9a327dbe1739116948ee869ed8d Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 21 Aug 2023 17:30:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E5=8D=B0=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/waterMask.js                   |  19 ++
 src/views/system/log/index2.vue               | 141 -----------
 src/views/system/watermarkManage/index.vue    |  47 ++--
 .../system/watermarkManage/module/form.vue    | 224 ++++++++----------
 4 files changed, 154 insertions(+), 277 deletions(-)
 create mode 100644 src/api/system/waterMask.js
 delete mode 100644 src/views/system/log/index2.vue

diff --git a/src/api/system/waterMask.js b/src/api/system/waterMask.js
new file mode 100644
index 0000000..70febc2
--- /dev/null
+++ b/src/api/system/waterMask.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+export function getInitWatermark(params) {
+  return request({
+    url: 'api/watermark/initWatermark',
+    method: 'get',
+    params
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/watermark/editWatermark',
+    method: 'post',
+    data
+  })
+}
+
+export default { edit, getInitWatermark }
diff --git a/src/views/system/log/index2.vue b/src/views/system/log/index2.vue
deleted file mode 100644
index 2296b5c..0000000
--- a/src/views/system/log/index2.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-  <div>
-    <div class="head-container">
-      <Search />
-      <crudOperation>
-        <el-button
-          slot="left"
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :loading="crud.delAllLoading"
-          @click="delVisible = true"
-        >
-          清空
-        </el-button>
-      </crudOperation>
-    </div>
-    <!--表格渲染-->
-    <div class="app-container container-wrap" style="min-height: calc(100vh - 242px)">
-      <span class="right-top-line" />
-      <span class="left-bottom-line" />
-      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-        <el-table-column type="expand">
-          <template slot-scope="props">
-            <el-form label-position="left" inline class="demo-table-expand">
-              <el-form-item label="请求方法">
-                <span>{{ props.row.method }}</span>
-              </el-form-item>
-              <el-form-item label="请求参数">
-                <span>{{ props.row.params }}</span>
-              </el-form-item>
-            </el-form>
-          </template>
-        </el-table-column>
-        <el-table-column prop="username" label="用户名" />
-        <el-table-column prop="requestIp" label="IP" />
-        <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
-        <el-table-column prop="description" label="描述" />
-        <el-table-column prop="browser" label="浏览器" />
-        <el-table-column prop="time" label="请求耗时" align="center">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
-            <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
-            <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建日期" width="180px" />
-      </el-table>
-      <!--分页组件-->
-      <pagination />
-      <!-- 清空 -->
-      <el-dialog :visible.sync="delVisible" title="确认清空">
-        <span class="dialog-right-top" />
-        <span class="dialog-left-bottom" />
-        <div class="setting-dialog">
-          <p class="delMsg">确认清空所有操作日志吗?</p>
-          <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="confirmDelAll">确定</el-button>
-          </div>
-        </div>
-      </el-dialog>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import Search from './search'
-import { delAllInfo } from '@/api/monitor/log'
-import CRUD, { presenter } from '@crud/crud'
-import crudOperation from '@crud/CRUD.operation'
-import pagination from '@crud/Pagination'
-
-export default {
-  name: 'Log',
-  components: { Search, crudOperation, pagination },
-  cruds() {
-    return CRUD({ title: '日志', url: 'api/logs' })
-  },
-  mixins: [presenter()],
-  data() {
-    return {
-      delVisible: false
-    }
-  },
-  created() {
-    this.crud.optShow = {
-      add: false,
-      edit: false,
-      del: false,
-      download: true
-    }
-  },
-  methods: {
-    confirmDelAll() {
-      // this.$confirm(`确认清空所有操作日志吗?`, '提示', {
-      //   confirmButtonText: '确定',
-      //   cancelButtonText: '取消',
-      //   type: 'warning'
-      // }).then(() => {
-      this.crud.delAllLoading = true
-      delAllInfo().then(res => {
-        this.crud.delAllLoading = false
-        this.crud.dleChangePage(1)
-        this.crud.delSuccessNotify()
-        this.crud.toQuery()
-        this.delVisible = false
-      }).catch(err => {
-        this.crud.delAllLoading = false
-        console.log(err.response.data.message)
-      })
-      // })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.demo-table-expand {
-  font-size: 0;
-}
-.demo-table-expand label {
-  width: 70px;
-  color: #99a9bf;
-}
-.demo-table-expand .el-form-item {
-  margin-right: 0;
-  margin-bottom: 0;
-  width: 100%;
-}
-.demo-table-expand .el-form-item__content {
-  font-size: 12px;
-}
-::v-deep .head-container{
-  display: flex;
-  padding-bottom: 0;
-}
-.head-search{
-  margin-bottom:0 ;
-}
-</style>
diff --git a/src/views/system/watermarkManage/index.vue b/src/views/system/watermarkManage/index.vue
index ae057f1..79e8e18 100644
--- a/src/views/system/watermarkManage/index.vue
+++ b/src/views/system/watermarkManage/index.vue
@@ -14,19 +14,20 @@
         <div class="waterMark-result">
           <div class="chapter-item">
             <p class="item-title">水印类型</p>
-            <span class="item-selected">默认版式</span>
+            <span class="item-selected">{{ watermarkInfo.watermarkType === '0' ? '文本' : '图片' }}</span>
           </div>
-          <div class="chapter-item">
+          <div v-if="watermarkInfo.watermarkType === '0'" class="chapter-item">
             <p class="item-title">字号</p>
-            <span class="item-selected">20</span>
+            <span class="item-selected">{{ watermarkInfo.watermarkFont }}</span>
           </div>
           <div class="chapter-item">
             <p class="item-title">颜色、透明度</p>
-            <span class="item-selected">颜色、透明度</span>
+            <span class="item-selected">{{ watermarkInfo.transparency }}</span>
           </div>
           <div class="chapter-item">
             <p class="item-title">内容</p>
-            <span class="item-selected item-remark">自定义全局水印测试</span>
+            <span v-if=" watermarkInfo.watermarkType === '0'" class="item-selected item-remark">{{ watermarkInfo.context }}</span>
+            <img v-else :src="watermarkInfo.context" alt class="preview-img">
           </div>
         </div>
         <div class="waterMark-preview">
@@ -38,7 +39,7 @@
         <div class="chapter-enable">
           <div class="chapter-item">
             <p class="item-title">是否启用</p>
-            <el-switch v-model="enable" class="isEnable-chapter" />
+            <el-switch v-model="isEnable" class="isEnable-chapter" />
           </div>
           <div class="chapter-edit">
             <el-button size="mini" @click="toEdit()">
@@ -48,25 +49,21 @@
           </div>
         </div>
       </div>
-      <eForm ref="cuform" />
+      <eForm ref="cuform" @refresh="getInit" />
     </div>
   </div>
 </template>
 
 <script>
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import { getInitWatermark } from '@/api/system/waterMask'
 import eForm from './module/form'
-const defaultForm = { }
 export default {
   name: 'WatermarkManage',
   components: { eForm },
-  cruds() {
-    return CRUD({ title: '全局水印设置', url: 'api/users', crudMethod: { }})
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
-      enable: true
+      watermarkInfo: {},
+      isEnable: true
     }
   },
   computed: {
@@ -74,10 +71,27 @@ export default {
   created() {
   },
   mounted() {
+    this.getInit()
   },
   methods: {
+    getInit() {
+      getInitWatermark().then((res) => {
+        this.watermarkInfo = res
+        console.log(res)
+      }).catch(err => {
+        this.crud.delAllLoading = false
+        console.log(err)
+      })
+    },
     toEdit() {
       this.$refs.cuform.cuDialogVisible = true
+      this.$refs.cuform.form = {
+        id: this.watermarkInfo.id,
+        watermarkType: this.watermarkInfo.watermarkType,
+        watermarkFont: this.watermarkInfo.watermarkFont,
+        context: this.watermarkInfo.context,
+        transparency: this.watermarkInfo.transparency
+      }
     }
   }
 }
@@ -138,4 +152,9 @@ export default {
     height: 518px;
   }
 }
+.preview-img{
+  display: block;
+    width: 150px;
+    height: 150px;
+}
 </style>
diff --git a/src/views/system/watermarkManage/module/form.vue b/src/views/system/watermarkManage/module/form.vue
index b865150..b10b24d 100644
--- a/src/views/system/watermarkManage/module/form.vue
+++ b/src/views/system/watermarkManage/module/form.vue
@@ -1,92 +1,84 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :visible.sync="cuDialogVisible" :modal-append-to-body="false" :title="title">
+  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="cuDialogVisible" :title="title">
     <div class="setting-dialog">
-      <el-form ref="formData" :model="form" :rules="rules" size="small" label-width="110px">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
         <el-row>
-          <el-form-item label="水印类型" prop="type">
-            <el-radio-group v-model="form.type" size="mini" style="width: 178px">
+          <el-form-item label="水印类型" prop="watermarkType">
+            <el-radio-group v-model="form.watermarkType" size="mini" style="width: 178px" @change="changType">
               <el-radio-button label="0">文本</el-radio-button>
               <el-radio-button label="1">图片</el-radio-button>
             </el-radio-group>
           </el-form-item>
         </el-row>
-        <el-row v-if="form.type.toString() === '0'">
+        <el-row v-if="form.watermarkType.toString() === '0'">
           <el-col :span="12">
-            <el-form-item label="字号" prop="fontSize">
-              <el-select v-model="form.fontSize">
+            <el-form-item label="字号" prop="watermarkFont">
+              <el-select v-model="form.watermarkFont">
                 <el-option v-for="option in fontSizeOptions" :key="option.value" :label="option.label" :value="option.value" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="颜色、透明度" prop="color" class="color-item">
-              <el-input v-model="form.color" placeholder="请选择" readonly>
-                <el-color-picker slot="prepend" v-model="form.color" show-alpha :predefine="predefineColors" />
+            <el-form-item label="颜色、透明度" prop="transparency" class="color-item">
+              <el-input v-model="form.transparency" placeholder="请选择" readonly>
+                <el-color-picker slot="prepend" v-model="form.transparency" show-alpha :predefine="predefineColors" />
               </el-input>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row v-if="form.type.toString() === '0'">
-          <el-form-item label="内容" prop="content">
-            <el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入内容" style="width: 576px;" />
+        <el-row v-if="form.watermarkType.toString() === '0'">
+          <el-form-item label="内容" prop="context">
+            <el-input v-model="form.context" type="textarea" :rows="4" placeholder="请输入内容" style="width: 576px;" />
           </el-form-item>
         </el-row>
-        <el-row v-if="form.type.toString() === '1'">
+        <el-row v-if="form.watermarkType.toString() === '1'">
           <el-col :span="12" class="upload-wm">
             <el-form-item label="上传" prop="upload">
-              <el-upload
-                :action="upload_qiniu_url"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :on-error="handleError"
-                :before-upload="beforeAvatarUpload"
-                :data="qiniuData"
-              >
+              <div class="upload-img">
+                <input class="upload-input" type="file" @change="handleFileUpload">
                 <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />点击上传</el-button>
-                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
-              </el-upload>
+              </div>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="透明度" prop="alpha" class="color-item">
-              <el-input v-model="form.alpha" />
+            <el-form-item label="透明度" prop="transparency" class="color-item">
+              <el-input v-model="form.transparency" />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row v-if="form.type.toString() === '1'">
-          <el-form-item label="预览" prop="imageUrl">
-            <el-input v-show="false" v-model="form.imageUrl" />
-            <img :src="form.imageUrl" alt class="preview-img">
+        <el-row v-if="form.watermarkType.toString() === '1'">
+          <el-form-item label="预览" prop="context">
+            <el-input v-show="false" v-model="form.context" />
+            <img :src="form.context" alt class="preview-img" :onerror="defaultImg">
           </el-form-item>
         </el-row>
       </el-form>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="cuDialogVisible = false">取消</el-button>
-      <el-button type="primary" :loading="loading" @click="save">确定</el-button>
+      <el-button @click="cuDialogVisible=false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="confirmWatermask">确定</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { form } from '@crud/crud'
-// import { getQiniuToken } from '@/api/upload/upload'
-const defaultForm = {
-  id: null,
-  type: '0',
-  fontSize: null,
-  color: 'rgba(0, 0, 0, 0.5)',
-  content: '自定义全局水印测试',
-  alpha: '50%',
-  imageUrl: null
-}
+import { edit } from '@/api/system/waterMask'
 export default {
-  mixins: [form(defaultForm)],
   data() {
     return {
+      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"',
+      currentWaterInfo: null,
+      selectedImage: null,
       title: '编辑全局水印',
       cuDialogVisible: false,
       loading: false,
+      form: {
+        id: null,
+        watermarkType: '0',
+        watermarkFont: null,
+        context: '',
+        transparency: ''
+      },
       fontSizeOptions: [],
       predefineColors: [
         '#ff4500',
@@ -104,35 +96,22 @@ export default {
         'hsla(209, 100%, 56%, 0.73)',
         '#c7158577'
       ],
-      qiniuData: {
-        key: '',
-        token: ''
-      },
-      // 七牛云的上传地址
-      upload_qiniu_url: 'https://upload.qiniup.com/',
-      // 这是七牛云空间的外链默认域名
-      upload_qiniu_addr: 'qiniu.aiyxlib.com',
+      // color: [
+      //   { required: true, message: '请选择颜色、透明度', trigger: 'change' }
+      // ],
+
       rules: {
-        type: [
+        watermarkType: [
           { required: true, message: '请选择水印类型', trigger: 'change' }
         ],
-        fontSize: [
+        watermarkFont: [
           { required: true, message: '请选择字号', trigger: 'change' }
         ],
-        color: [
-          { required: true, message: '请选择颜色、透明度', trigger: 'change' }
-        ],
-        content: [
-          { required: true, message: '内容不可为空', trigger: 'blur' }
-        ],
         uplpad: [
           { required: true, message: '请上传图片', trigger: 'change' }
         ],
-        alpha: [
-          { required: true, message: '透明度不可为空', trigger: 'blur' }
-        ],
-        imageUrl: [
-          { required: true, message: '请上传图片', trigger: 'blur' }
+        transparency: [
+          { required: true, message: '请选择颜色、透明度', trigger: 'blur' }
         ]
       }
     }
@@ -141,68 +120,64 @@ export default {
     this.getFontSizeOptions()
   },
   methods: {
-    getFontSizeOptions() {
-      for (var i = 8; i <= 40; i++) {
-        if (i % 2 === 0) {
-          this.fontSizeOptions.push({ 'label': i, 'value': i })
-        }
-      }
+    handleImageError() {
+      this.imageUrl = '默认/图片路径.png'
     },
-    // getQiniuToken() {
-    //   const _this = this
-    //   getQiniuToken().then(res => {
-    //     if (res.code === 200) {
-    //       this.qiniuData.token = res.data
-    //     } else {
-    //       _this.$message({
-    //         message: res.msg,
-    //         duration: 2000,
-    //         type: 'warning'
-    //       })
-    //     }
-    //   })
-    // },
-    // 验证文件合法性
-    beforeAvatarUpload(file) {
-      this.qiniuData.key = file.name
+    async handleFileUpload(event) {
+      const file = event.target.files[0]
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
       const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG) {
         this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !')
+        return false
       }
       if (!isLt2M) {
         this.$message.error('图片大小不能超过 2MB !')
+        return false
       }
-      return isJPG && isLt2M
-    },
-    handleAvatarSuccess: function(res, file) {
-      this.form.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key
-      console.log(this.form.imageUrl)
+      this.selectedImage = file
+      const fileBase64 = await this.getBase64(this.selectedImage)
+      this.form.context = fileBase64
     },
-    handleError: function(res) {
-      this.$message({
-        message: '上传失败',
-        duration: 2000,
-        type: 'warning'
+    // 将上传的图片转为base64
+    getBase64(file) {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      return new Promise((resolve) => {
+        reader.onload = () => {
+          resolve(reader.result)
+        }
       })
     },
-    save() {
-      this.$refs['formData'].validate((valid) => {
+    changType(val) {
+      if (val.toString() === '0') {
+        this.form.transparency = 'rgba(0, 0, 0, 0.5)'
+      } else {
+        this.form.transparency = '50%'
+      }
+      this.form.context = ''
+    },
+    getFontSizeOptions() {
+      for (var i = 8; i <= 40; i++) {
+        if (i % 2 === 0) {
+          this.fontSizeOptions.push({ 'label': i, 'value': i })
+        }
+      }
+    },
+    confirmWatermask() {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           this.loading = true
-          // edit(this.formData.fields).then((res) => {
-          //   this.$message({
-          //     message: '保存成功',
-          //     type: 'success',
-          //     duration: 2500
-          //   })
-          //   this.cuDialogVisible = false
-          //   this.loading = false
-          //   this.$emit('refresh')
-          // })
-          // this.cuDialogVisible = false
-          // this.loading = false
-          // this.$emit('refresh')
+          edit(this.form).then((res) => {
+            this.$message({
+              message: '保存成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.cuDialogVisible = false
+            this.loading = false
+            this.$emit('refresh')
+          })
         } else {
           return false
         }
@@ -253,19 +228,24 @@ export default {
     }
   }
 }
-.upload-wm{
-  ::v-deep .el-upload {
-    .el-button{
-      color: #fff !important;
-      background-color: #1F55EB !important;
-      border: none !important;
-    }
+.upload-img{
+  position: relative;
+  .upload-input{
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+  .el-button{
+    color: #fff !important;
+    background-color: #1F55EB !important;
+    border: none !important;
   }
 }
+
 .preview-img{
   width: 590px;
   height: 317px;
-  background: url('~@/assets/images/system/default-img.jpg') no-repeat;
-  background-size: 100% 100%;
+  overflow: hidden;
 }
 </style>