Skip to content

F
front-backend
Commit 4ccb6cb8 by Elune
Options

优化图片上传，加入图床同步功能

parent b9b48e13
Showing with 353 additions and 166 deletions
src/api/system/timing.js
......@@ -8,10 +8,11 @@ export function add(data) {
})
}
export function del(id) {
export function del(ids) {
return request({
url: 'api/jobs/' + id,
method: 'delete'
url: 'api/jobs',
method: 'delete',
data: ids
})
}
......
src/api/tools/picture.js
......@@ -8,4 +8,11 @@ export function del(ids) {
})
}
export default { del }
export function sync() {
return request({
url: 'api/pictures/synchronize',
method: 'post'
})
}
export default { del, sync }
src/utils/upload.js 0 → 100644
import axios from 'axios'
import { getToken } from '@/utils/auth'
export function upload(api, file) {
var data = new FormData()
data.append('file', file)
const config = {
headers: { 'Authorization': getToken() }
}
return axios.post(api, data, config)
}
src/views/components/Editor.vue
<template>
<div>
<div ref="editor" class="text" />
<div style="margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969">HTML渲染如下：</div>
<div class="editor-content" v-html="editorContent" />
<div class="app-container">
<p class="warn-content">
Markdown 基于
<el-link type="primary" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599" target="_blank">wangEditor</el-link>
，图片上传使用 <el-link type="primary" href="https://sm.ms/" target="_blank">SM.MS</el-link>
</p>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
<div ref="editor" class="text" />
</el-col>
<el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
<div v-html="editorContent" />
</el-col>
</el-row>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
import { getToken } from '@/utils/auth'
export default {
name: 'Editor',
data() {
return {
headers: {
'Authorization': getToken()
},
editorContent:
`<h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
`
<ul>
<li>富文本中图片上传使用的是sm.ms图床，支持上传到七牛云：<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
<li>富文本中图片上传使用的是 SM.MS 图床：<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
<li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">wangEditor</a></li>
</ul>`
}
......@@ -31,13 +38,20 @@ export default {
])
},
mounted() {
const _this = this
var editor = new E(this.$refs.editor)
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
// 不可修改
editor.customConfig.uploadImgHeaders = this.headers
// 自定义文件名，不可修改，修改后会上传失败
editor.customConfig.uploadFileName = 'file'
editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
// 自定义菜单配置
editor.customConfig.zIndex = 10
// 文件上传
editor.customConfig.customUploadImg = function(files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法
files.forEach(image => {
upload(_this.imagesUploadApi, image).then(data => {
insert(data.data.url)
})
})
}
editor.customConfig.onchange = (html) => {
this.editorContent = html
}
......@@ -49,11 +63,10 @@ export default {
</script>
<style scoped>
.editor-content{
padding-left: 5px;
}
.text {
text-align:left;
margin: 5px
}
/deep/ .w-e-text-container {
height: 420px !important;
}
</style>
src/views/components/MarkDown.vue
......@@ -2,24 +2,21 @@
<div class="app-container">
<p class="warn-content">
Markdown 基于
<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
<el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>
，图片上传使用 <el-link type="primary" href="https://sm.ms/" target="_blank">SM.MS</el-link>
</p>
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" @imgDel="imgDel" />
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
</div>
</template>
<script>
import axios from 'axios'
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { del } from '@/api/tools/picture'
export default {
name: 'Markdown',
data() {
return {
height: document.documentElement.clientHeight - 200 + 'px',
data: null,
images: {}
height: document.documentElement.clientHeight - 200 + 'px'
}
},
computed: {
......@@ -28,7 +25,6 @@ export default {
])
},
mounted() {
this.$refs.md.$refs.toolbar_left.img_file = []
const that = this
window.onresize = function temp() {
that.height = document.documentElement.clientHeight - 200 + 'px'
......@@ -36,31 +32,9 @@ export default {
},
methods: {
imgAdd(pos, $file) {
var formdata = new FormData()
formdata.append('file', $file)
axios({
url: this.imagesUploadApi,
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data', 'Authorization': getToken() }
}).then((data) => {
this.data = data.data
this.$refs.md.$img2Url(pos, this.data.data[0])
this.images[this.data.data[0]] = this.data
}).catch((error) => {
console.log('image upload error', error)
this.$refs.md.$refs.toolbar_left.$imgDel(pos)
upload(this.imagesUploadApi, $file).then(data => {
this.$refs.md.$img2Url(pos, data.data.url)
})
},
imgDel(file, pos) {
const image = this.images[file[1]]
if (image) {
del(image.id).then(res => {
}).catch(err => {
console.log(err.response.data.message)
})
}
}
}
}
......
src/views/system/timing/index.vue
......@@ -2,49 +2,37 @@
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker
v-model="query.createTime"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 新增 -->
<el-button
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增</el-button>
<!-- 导出 -->
<el-button
:loading="downloadLoading"
size="mini"
class="filter-item"
type="warning"
icon="el-icon-download"
@click="downloadMethod"
>导出</el-button>
<!-- 任务日志 -->
<el-button
class="filter-item"
size="mini"
type="info"
icon="el-icon-tickets"
@click="doLog"
>日志</el-button>
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker
v-model="query.createTime"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission">
<!-- 任务日志 -->
<el-button
slot="right"
class="filter-item"
size="mini"
type="info"
icon="el-icon-tickets"
@click="doLog"
>日志</el-button>
</crudOperation>
<Log ref="log" />
</div>
<!--Form表单-->
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="600px">
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" append-to-body width="600px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
<el-form-item label="任务名称" prop="jobName">
<el-input v-model="form.jobName" style="width: 460px;" />
......@@ -70,33 +58,34 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="jobName" width="100px" label="任务名称" />
<el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
<el-table-column :show-overflow-tooltip="true" prop="methodName" width="90px" label="执行方法" />
<el-table-column :show-overflow-tooltip="true" prop="params" width="80px" label="参数" />
<el-table-column :show-overflow-tooltip="true" prop="cronExpression" width="100px" label="cron表达式" />
<el-table-column :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column :selectable="checkboxT" type="selection" width="55" />
<el-table-column v-if="columns.visible('jobName')" :show-overflow-tooltip="true" prop="jobName" width="100px" label="任务名称" />
<el-table-column v-if="columns.visible('beanName')" :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
<el-table-column v-if="columns.visible('methodName')" :show-overflow-tooltip="true" prop="methodName" width="90px" label="执行方法" />
<el-table-column v-if="columns.visible('params')" :show-overflow-tooltip="true" prop="params" width="80px" label="参数" />
<el-table-column v-if="columns.visible('cronExpression')" :show-overflow-tooltip="true" prop="cronExpression" width="100px" label="cron表达式" />
<el-table-column v-if="columns.visible('isPause')" :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
<template slot-scope="scope">
<el-tag :type="scope.row.isPause ? 'warning' : 'success'">{{ scope.row.isPause ? '已暂停' : '运行中' }}</el-tag>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
<el-table-column v-if="columns.visible('remark')" :show-overflow-tooltip="true" prop="remark" label="描述" />
<el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" prop="createTime" label="创建日期">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column v-if="checkPermission(['admin','timing:edit','timing:del'])" label="操作" width="180px" align="center" fixed="right">
<el-table-column v-permission="['admin','timing:edit','timing:del']" label="操作" width="180px" align="center" fixed="right">
<template slot-scope="scope">
<el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="showEditFormDialog(scope.row)">编辑</el-button>
<el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="crud.toEdit(scope.row)">编辑</el-button>
<el-button v-permission="['admin','timing:edit']" style="margin-left: -2px" type="text" size="mini" @click="execute(scope.row.id)">执行</el-button>
<el-button v-permission="['admin',,'timing:edit']" style="margin-left: 3px" type="text" size="mini" @click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')">
<el-button v-permission="['admin','timing:edit']" style="margin-left: 3px" type="text" size="mini" @click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')">
{{ scope.row.isPause ? '恢复' : '暂停' }}
</el-button>
<el-popover
......@@ -116,30 +105,33 @@
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
<pagination />
</div>
</template>
<script>
import crud from '@/mixins/crud'
import crudJob from '@/api/system/timing'
import Log from './log'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }})
const defaultForm = { jobName: null, beanName: null, methodName: null, params: null, cronExpression: null, isPause: false, remark: null }
export default {
name: 'Timing',
components: { Log },
mixins: [crud],
components: { Log, pagination, crudOperation, rrOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() {
return {
title: '定时任务',
crudMethod: { ...crudJob },
form: { jobName: null, beanName: null, methodName: null, params: null, cronExpression: null, isPause: false, remark: null },
delLoading: false,
permission: {
add: ['admin', 'timing:add'],
edit: ['admin', 'timing:edit'],
del: ['admin', 'timing:del']
},
rules: {
jobName: [
{ required: true, message: '请输入任务名称', trigger: 'blur' }
......@@ -156,46 +148,44 @@ export default {
}
}
},
created() {
this.$nextTick(() => {
this.init()
})
},
methods: {
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/jobs'
return true
},
// 执行
execute(id) {
this.crudMethod.execution(id).then(res => {
this.$notify({
title: '执行成功',
type: 'success',
duration: 2500
})
crudJob.execution(id).then(res => {
this.crud.notify('执行成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
}).catch(err => {
console.log(err.response.data.message)
})
},
// 改变状态
updateStatus(id, status) {
this.crudMethod.updateIsPause(id).then(res => {
this.init()
this.$notify({
title: status + '成功',
type: 'success',
duration: 2500
})
crudJob.updateIsPause(id).then(res => {
this.crud.toQuery()
this.crud.notify(status + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
}).catch(err => {
console.log(err.response.data.message)
})
},
delMethod(id) {
this.delLoading = true
crudJob.del([id]).then(() => {
this.delLoading = false
this.$refs[id].doClose()
this.crud.dleChangePage(1)
this.crud.delSuccessNotify()
this.crud.toQuery()
}).catch(() => {
this.delLoading = false
this.$refs[id].doClose()
})
},
// 显示日志
doLog() {
this.$refs.log.dialog = true
this.$refs.log.doInit()
},
checkboxT(row, rowIndex) {
return row.id !== 1
}
}
}
......
src/views/tools/email/send.vue
......@@ -2,14 +2,14 @@
<div>
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
<el-form-item label="邮件标题" prop="subject">
<el-input v-model="form.subject" style="width: 40%" />
<el-input v-model="form.subject" style="width: 646px" />
</el-form-item>
<el-form-item
v-for="(domain, index) in tos"
:key="domain.key"
:label="'收件邮箱' + (index === 0 ? '': index)"
>
<el-input v-model="domain.value" style="width: 31%" />
<el-input v-model="domain.value" style="width: 550px" />
<el-button icon="el-icon-plus" @click="addDomain" />
<el-button style="margin-left:0;" icon="el-icon-minus" @click.prevent="removeDomain(domain)" />
</el-form-item>
......@@ -20,18 +20,15 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { send } from '@/api/tools/email'
import { upload } from '@/utils/upload'
import { validEmail } from '@/utils/validate'
import { mapGetters } from 'vuex'
import E from 'wangeditor'
export default {
name: 'Index',
data() {
return {
headers: {
'Authorization': getToken()
},
loading: false, form: { subject: '', tos: [], content: '' },
tos: [{
value: ''
......@@ -45,21 +42,26 @@ export default {
},
computed: {
...mapGetters([
// sm.ms图床
'imagesUploadApi',
// 七牛云 按需选择
'qiNiuUploadApi'
'imagesUploadApi'
])
},
mounted() {
const _this = this
var editor = new E(this.$refs.editor)
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
// 不可修改
editor.customConfig.uploadImgHeaders = this.headers
// 自定义文件名，不可修改，修改后会上传失败
editor.customConfig.uploadFileName = 'file'
// 上传到哪儿，按需选择
editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
// 自定义菜单配置
editor.customConfig.zIndex = 10
// 文件上传
editor.customConfig.customUploadImg = function(files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法
files.forEach(image => {
files.forEach(image => {
upload(_this.imagesUploadApi, image).then(data => {
insert(data.data.url)
})
})
})
}
editor.customConfig.onchange = (html) => {
this.form.content = html
}
......@@ -132,5 +134,9 @@ export default {
.editor{
text-align:left;
margin: 20px;
width: 730px;
}
/deep/ .w-e-text-container {
height: 360px !important;
}
</style>
src/views/tools/picture/index.vue 0 → 100644
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!--搜索-->
<el-input v-model="query.filename" clearable size="small" placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker
v-model="query.createTime"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission">
<!-- 上传 -->
<el-button
slot="left"
v-permission="['admin','pictures:add']"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-upload"
@click="dialog = true"
>上传</el-button>
<el-tooltip slot="right" class="item" effect="dark" content="使用同步功能需要在 https://sm.ms/login 中注册账号，并且在 application.yml 文件中修改 Secret Token" placement="top-start">
<el-button
v-permission="['admin','pictures:add']"
class="filter-item"
size="mini"
type="success"
icon="el-icon-upload"
:loading="syncLoading"
@click="sync"
>同步</el-button>
</el-tooltip>
</crudOperation>
</div>
<!--上传图片-->
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="600px" @close="doSubmit">
<el-upload
:on-preview="handlePictureCardPreview"
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:headers="headers"
:file-list="fileList"
:action="imagesUploadApi"
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog append-to-body :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column v-if="columns.visible('filename')" width="200" prop="filename" label="文件名" />
<el-table-column v-if="columns.visible('username')" prop="username" label="上传者" />
<el-table-column v-if="columns.visible('url')" ref="table" :show-overflow-tooltip="true" prop="url" label="缩略图">
<template slot-scope="{row}">
<el-image
:src="row.url"
:preview-src-list="[row.url]"
fit="contain"
lazy
class="el-avatar"
/>
</template>
</el-table-column>
<el-table-column v-if="columns.visible('size')" prop="size" label="文件大小" />
<el-table-column v-if="columns.visible('height')" prop="height" label="高度" />
<el-table-column v-if="columns.visible('width')" prop="width" label="宽度" />
<el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import crudPic from '@/api/tools/picture'
import CRUD, { presenter, header, crud } from '@crud/crud'
import { getToken } from '@/utils/auth'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '图片', url: 'api/pictures', crudMethod: { ...crudPic }})
export default {
name: 'Pictures',
components: { pagination, crudOperation, rrOperation },
mixins: [presenter(defaultCrud), header(), crud()],
data() {
return {
dialog: false,
syncLoading: false,
headers: {
'Authorization': getToken()
},
permission: {
del: ['admin', 'pictures:del']
},
dialogImageUrl: '',
dialogVisible: false,
fileList: [],
pictures: []
}
},
computed: {
...mapGetters([
'imagesUploadApi'
])
},
created() {
this.crud.optShow.add = false
this.crud.optShow.edit = false
},
methods: {
handleSuccess(response, file, fileList) {
const uid = file.uid
const id = response.id
this.pictures.push({ uid, id })
},
handleBeforeRemove(file, fileList) {
for (let i = 0; i < this.pictures.length; i++) {
if (this.pictures[i].uid === file.uid) {
crudPic.del(this.pictures[i].id).then(res => {})
return true
}
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 刷新列表数据
doSubmit() {
this.fileList = []
this.dialogVisible = false
this.dialogImageUrl = ''
this.dialog = false
this.crud.toQuery()
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
this.$notify({
title: msg.message,
type: 'error',
duration: 2500
})
},
sync() {
this.syncLoading = true
crudPic.sync().then(res => {
this.crud.notify('同步成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.crud.toQuery()
this.syncLoading = false
})
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment