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