16 changed files with 705 additions and 226 deletions
-
BINsrc/assets/images/system/default-img.jpg
-
BINsrc/assets/images/system/xt-wm.png
-
29src/assets/styles/archives-manage.scss
-
58src/assets/styles/mixin.scss
-
230src/assets/styles/yxk-admin.scss
-
9src/views/system/archiveScopeManage/index.vue
-
79src/views/system/archivesCategory/archiveSealSetting/index.vue
-
9src/views/system/fieldCorresManage/index.vue
-
9src/views/system/fourCharacterDetection/index.vue
-
31src/views/system/log/errorLog/index.vue
-
17src/views/system/log/operateLog/index.vue
-
22src/views/system/log/search.vue
-
9src/views/system/processManage/index.vue
-
3src/views/system/role/index.vue
-
155src/views/system/watermarkManage/index.vue
-
271src/views/system/watermarkManage/module/form.vue
|
After Width: 591 | Height: 317 | Size: 6.2 KiB |
|
After Width: 386 | Height: 544 | Size: 7.5 KiB |
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>归档范围管理</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>字段对应管理</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>四性检测管理</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div>流程管理</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<div class="app-container row-container"> |
|||
<div class="container-wrap"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<div class="waterMark-title">全局水印设置</div> |
|||
<div class="chapter-tip"> |
|||
<p>注意</p> |
|||
<span>全局自定义水印，可使用自定义文本或自定义图片生成水印，水印统一采用“平铺”方式进行展示。</span> |
|||
<span><i>自定义文本要求：</i>字数不得超过20，可自定义字号、颜色、透明度</span> |
|||
<span><i>自定义图片要求：</i>图片可以使用.png或.jpg文件，建议宽度控制在500px以内效果最佳</span> |
|||
</div> |
|||
<div class="waterMark-main"> |
|||
<div class="waterMark-result"> |
|||
<div class="chapter-item"> |
|||
<p class="item-title">水印类型</p> |
|||
<span class="item-selected">默认版式</span> |
|||
</div> |
|||
<div class="chapter-item"> |
|||
<p class="item-title">字号</p> |
|||
<span class="item-selected">20</span> |
|||
</div> |
|||
<div class="chapter-item"> |
|||
<p class="item-title">颜色、透明度</p> |
|||
<span class="item-selected">颜色、透明度</span> |
|||
</div> |
|||
<div class="chapter-item"> |
|||
<p class="item-title">内容</p> |
|||
<span class="item-selected item-remark">自定义全局水印测试</span> |
|||
</div> |
|||
</div> |
|||
<div class="waterMark-preview"> |
|||
<div class="chapter-item"> |
|||
<p class="item-title">效果预览</p> |
|||
<img src="~@/assets/images/system/xt-wm.png" alt=""> |
|||
</div> |
|||
</div> |
|||
<div class="chapter-enable"> |
|||
<div class="chapter-item"> |
|||
<p class="item-title">是否启用</p> |
|||
<el-switch v-model="enable" class="isEnable-chapter" /> |
|||
</div> |
|||
<div class="chapter-edit"> |
|||
<el-button size="mini" @click="toEdit()"> |
|||
<i class="iconfont icon-bianji" /> |
|||
编辑 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<eForm ref="cuform" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
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 |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
toEdit() { |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/styles/mixin.scss"; |
|||
@import "~@/assets/styles/variables.scss"; |
|||
|
|||
@mixin title-bottom{ |
|||
[data-theme="dark"] & { |
|||
padding: 20px; |
|||
border-bottom: 1px solid $mainColor; |
|||
} |
|||
[data-theme="light"] & { |
|||
margin-top: -20px; |
|||
padding-bottom: 20px; |
|||
border-bottom: 1px solid #EDEFF3; |
|||
} |
|||
} |
|||
|
|||
@mixin tip-margin{ |
|||
[data-theme="dark"] & { |
|||
margin: 0 20px 30px 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin waterMark-main-margin{ |
|||
[data-theme="dark"] & { |
|||
margin: 0 20px; |
|||
} |
|||
} |
|||
.waterMark-main{ |
|||
width: 1220px; |
|||
min-height: calc(100vh - 398px); |
|||
@include waterMark-main-margin; |
|||
} |
|||
.waterMark-title{ |
|||
margin-bottom: 20px; |
|||
@include tree_font_color; |
|||
@include title-bottom; |
|||
} |
|||
.chapter-tip{ |
|||
width: 1220px; |
|||
@include tip-margin; |
|||
span{ |
|||
display: block; |
|||
position: relative; |
|||
padding-left: 14px; |
|||
&::before{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
width: 6px; |
|||
height: 6px; |
|||
border-radius: 50%; |
|||
background-color: #9BA6B7; |
|||
transform: translateY(-50%); |
|||
} |
|||
i{ |
|||
font-style: normal; |
|||
font-weight: bold; |
|||
@include tree_font_color; |
|||
} |
|||
} |
|||
} |
|||
.waterMark-preview{ |
|||
img{ |
|||
display: block; |
|||
width: 360px; |
|||
height: 518px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,271 @@ |
|||
<template> |
|||
<el-dialog :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-row> |
|||
<el-form-item label="水印类型" prop="type"> |
|||
<el-radio-group v-model="form.type" size="mini" style="width: 178px"> |
|||
<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-col :span="12"> |
|||
<el-form-item label="字号" prop="fontSize"> |
|||
<el-select v-model="form.fontSize"> |
|||
<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-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-form-item> |
|||
</el-row> |
|||
<el-row v-if="form.type.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" |
|||
> |
|||
<el-button size="small" type="primary"><i class="iconfont icon-fabu" />点击上传</el-button> |
|||
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> --> |
|||
</el-upload> |
|||
</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> |
|||
</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-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> |
|||
</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 |
|||
} |
|||
export default { |
|||
mixins: [form(defaultForm)], |
|||
data() { |
|||
return { |
|||
title: '编辑全局水印', |
|||
cuDialogVisible: false, |
|||
loading: false, |
|||
fontSizeOptions: [], |
|||
predefineColors: [ |
|||
'#ff4500', |
|||
'#ff8c00', |
|||
'#ffd700', |
|||
'#90ee90', |
|||
'#00ced1', |
|||
'#1e90ff', |
|||
'#c71585', |
|||
'rgba(255, 69, 0, 0.68)', |
|||
'rgb(255, 120, 0)', |
|||
'hsv(51, 100, 98)', |
|||
'hsva(120, 40, 94, 0.5)', |
|||
'hsl(181, 100%, 37%)', |
|||
'hsla(209, 100%, 56%, 0.73)', |
|||
'#c7158577' |
|||
], |
|||
qiniuData: { |
|||
key: '', |
|||
token: '' |
|||
}, |
|||
// 七牛云的上传地址 |
|||
upload_qiniu_url: 'https://upload.qiniup.com/', |
|||
// 这是七牛云空间的外链默认域名 |
|||
upload_qiniu_addr: 'qiniu.aiyxlib.com', |
|||
rules: { |
|||
type: [ |
|||
{ required: true, message: '请选择水印类型', trigger: 'change' } |
|||
], |
|||
fontSize: [ |
|||
{ 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' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getFontSizeOptions() |
|||
}, |
|||
methods: { |
|||
getFontSizeOptions() { |
|||
for (var i = 8; i <= 40; i++) { |
|||
if (i % 2 === 0) { |
|||
this.fontSizeOptions.push({ 'label': i, 'value': i }) |
|||
} |
|||
} |
|||
}, |
|||
// 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 |
|||
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格式的文件 !') |
|||
} |
|||
if (!isLt2M) { |
|||
this.$message.error('图片大小不能超过 2MB !') |
|||
} |
|||
return isJPG && isLt2M |
|||
}, |
|||
handleAvatarSuccess: function(res, file) { |
|||
this.form.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key |
|||
console.log(this.form.imageUrl) |
|||
}, |
|||
handleError: function(res) { |
|||
this.$message({ |
|||
message: '上传失败', |
|||
duration: 2000, |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
save() { |
|||
this.$refs['formData'].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') |
|||
} else { |
|||
return false |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-dialog .el-dialog__body{ |
|||
padding-bottom: 0; |
|||
} |
|||
.dialog-footer{ |
|||
margin-top: 20px; |
|||
} |
|||
.color-item{ |
|||
::v-deep .el-form-item__content{ |
|||
.el-input-group--prepend{ |
|||
display: flex; |
|||
height: 34px !important; |
|||
padding-left: 10px; |
|||
border: 1px solid #e6e8ed; |
|||
border-radius: 4px; |
|||
.el-input-group__prepend{ |
|||
width: 30px; |
|||
height: 30px !important; |
|||
padding: 0 !important; |
|||
border: none !important; |
|||
border-radius: 0 !important; |
|||
background-color: transparent !important; |
|||
.el-color-picker__trigger{ |
|||
width: 30px !important; |
|||
height: 30px !important; |
|||
// padding: 6px !important; |
|||
border: none !important; |
|||
border-radius: 0 !important; |
|||
background-color: transparent !important; |
|||
} |
|||
.el-color-picker__color{ |
|||
border: none !important; |
|||
} |
|||
} |
|||
.el-input__inner{ |
|||
padding-left: 10px !important; |
|||
border: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.upload-wm{ |
|||
::v-deep .el-upload { |
|||
.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%; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue