Browse Source

水印管理

master
xuhuajiao 1 year ago
parent
commit
3a8cd04f6d
  1. 19
      src/api/system/waterMask.js
  2. 141
      src/views/system/log/index2.vue
  3. 47
      src/views/system/watermarkManage/index.vue
  4. 224
      src/views/system/watermarkManage/module/form.vue

19
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 }

141
src/views/system/log/index2.vue

@ -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>

47
src/views/system/watermarkManage/index.vue

@ -14,19 +14,20 @@
<div class="waterMark-result"> <div class="waterMark-result">
<div class="chapter-item"> <div class="chapter-item">
<p class="item-title">水印类型</p> <p class="item-title">水印类型</p>
<span class="item-selected">默认版式</span>
<span class="item-selected">{{ watermarkInfo.watermarkType === '0' ? '文本' : '图片' }}</span>
</div> </div>
<div class="chapter-item">
<div v-if="watermarkInfo.watermarkType === '0'" class="chapter-item">
<p class="item-title">字号</p> <p class="item-title">字号</p>
<span class="item-selected">20</span>
<span class="item-selected">{{ watermarkInfo.watermarkFont }}</span>
</div> </div>
<div class="chapter-item"> <div class="chapter-item">
<p class="item-title">颜色透明度</p> <p class="item-title">颜色透明度</p>
<span class="item-selected">颜色透明度</span>
<span class="item-selected">{{ watermarkInfo.transparency }}</span>
</div> </div>
<div class="chapter-item"> <div class="chapter-item">
<p class="item-title">内容</p> <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> </div>
<div class="waterMark-preview"> <div class="waterMark-preview">
@ -38,7 +39,7 @@
<div class="chapter-enable"> <div class="chapter-enable">
<div class="chapter-item"> <div class="chapter-item">
<p class="item-title">是否启用</p> <p class="item-title">是否启用</p>
<el-switch v-model="enable" class="isEnable-chapter" />
<el-switch v-model="isEnable" class="isEnable-chapter" />
</div> </div>
<div class="chapter-edit"> <div class="chapter-edit">
<el-button size="mini" @click="toEdit()"> <el-button size="mini" @click="toEdit()">
@ -48,25 +49,21 @@
</div> </div>
</div> </div>
</div> </div>
<eForm ref="cuform" />
<eForm ref="cuform" @refresh="getInit" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import { getInitWatermark } from '@/api/system/waterMask'
import eForm from './module/form' import eForm from './module/form'
const defaultForm = { }
export default { export default {
name: 'WatermarkManage', name: 'WatermarkManage',
components: { eForm }, components: { eForm },
cruds() {
return CRUD({ title: '全局水印设置', url: 'api/users', crudMethod: { }})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() { data() {
return { return {
enable: true
watermarkInfo: {},
isEnable: true
} }
}, },
computed: { computed: {
@ -74,10 +71,27 @@ export default {
created() { created() {
}, },
mounted() { mounted() {
this.getInit()
}, },
methods: { methods: {
getInit() {
getInitWatermark().then((res) => {
this.watermarkInfo = res
console.log(res)
}).catch(err => {
this.crud.delAllLoading = false
console.log(err)
})
},
toEdit() { toEdit() {
this.$refs.cuform.cuDialogVisible = true 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; height: 518px;
} }
} }
.preview-img{
display: block;
width: 150px;
height: 150px;
}
</style> </style>

224
src/views/system/watermarkManage/module/form.vue

@ -1,92 +1,84 @@
<template> <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"> <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-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="0">文本</el-radio-button>
<el-radio-button label="1">图片</el-radio-button> <el-radio-button label="1">图片</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-row v-if="form.type.toString() === '0'">
<el-row v-if="form.watermarkType.toString() === '0'">
<el-col :span="12"> <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-option v-for="option in fontSizeOptions" :key="option.value" :label="option.label" :value="option.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <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-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </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-form-item>
</el-row> </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-col :span="12" class="upload-wm">
<el-form-item label="上传" prop="upload"> <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> <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-form-item>
</el-col> </el-col>
<el-col :span="12"> <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-form-item>
</el-col> </el-col>
</el-row> </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-form-item>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer"> <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> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <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 { export default {
mixins: [form(defaultForm)],
data() { data() {
return { return {
defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"',
currentWaterInfo: null,
selectedImage: null,
title: '编辑全局水印', title: '编辑全局水印',
cuDialogVisible: false, cuDialogVisible: false,
loading: false, loading: false,
form: {
id: null,
watermarkType: '0',
watermarkFont: null,
context: '',
transparency: ''
},
fontSizeOptions: [], fontSizeOptions: [],
predefineColors: [ predefineColors: [
'#ff4500', '#ff4500',
@ -104,35 +96,22 @@ export default {
'hsla(209, 100%, 56%, 0.73)', 'hsla(209, 100%, 56%, 0.73)',
'#c7158577' '#c7158577'
], ],
qiniuData: {
key: '',
token: ''
},
//
upload_qiniu_url: 'https://upload.qiniup.com/',
//
upload_qiniu_addr: 'qiniu.aiyxlib.com',
// color: [
// { required: true, message: '', trigger: 'change' }
// ],
rules: { rules: {
type: [
watermarkType: [
{ required: true, message: '请选择水印类型', trigger: 'change' } { required: true, message: '请选择水印类型', trigger: 'change' }
], ],
fontSize: [
watermarkFont: [
{ required: true, message: '请选择字号', trigger: 'change' } { required: true, message: '请选择字号', trigger: 'change' }
], ],
color: [
{ required: true, message: '请选择颜色、透明度', trigger: 'change' }
],
content: [
{ required: true, message: '内容不可为空', trigger: 'blur' }
],
uplpad: [ uplpad: [
{ required: true, message: '请上传图片', trigger: 'change' } { 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() this.getFontSizeOptions()
}, },
methods: { 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 isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2 const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) { if (!isJPG) {
this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !') this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !')
return false
} }
if (!isLt2M) { if (!isLt2M) {
this.$message.error('图片大小不能超过 2MB !') 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) { if (valid) {
this.loading = true 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 { } else {
return false 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{ .preview-img{
width: 590px; width: 590px;
height: 317px; height: 317px;
background: url('~@/assets/images/system/default-img.jpg') no-repeat;
background-size: 100% 100%;
overflow: hidden;
} }
</style> </style>
Loading…
Cancel
Save