1、前端新增yaml编辑器页面功能
This commit is contained in:
parent
cab9090293
commit
3b8a7a2b9d
|
|
@ -40,6 +40,7 @@
|
||||||
"@vue/composition-api": "^1.3.0",
|
"@vue/composition-api": "^1.3.0",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
|
"codemirror": "^5.65.2",
|
||||||
"core-js": "3.19.1",
|
"core-js": "3.19.1",
|
||||||
"echarts": "^5.3.0",
|
"echarts": "^5.3.0",
|
||||||
"element-ui": "2.15.6",
|
"element-ui": "2.15.6",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<div class="json-editor">
|
||||||
|
<textarea ref="textarea" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CodeMirror from 'codemirror'
|
||||||
|
import 'codemirror/lib/codemirror.css'
|
||||||
|
// 替换主题这里需修改名称
|
||||||
|
import 'codemirror/theme/idea.css'
|
||||||
|
import 'codemirror/mode/yaml/yaml'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value(value) {
|
||||||
|
const editorValue = this.editor.getValue()
|
||||||
|
if (value !== editorValue) {
|
||||||
|
this.editor.setValue(this.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
height(value) {
|
||||||
|
this.editor.setSize('auto', this.height)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||||
|
mode: 'text/x-yaml',
|
||||||
|
lineNumbers: true,
|
||||||
|
lint: true,
|
||||||
|
lineWrapping: true,
|
||||||
|
tabSize: 2,
|
||||||
|
cursorHeight: 0.9,
|
||||||
|
// 替换主题这里需修改名称
|
||||||
|
theme: 'idea'
|
||||||
|
})
|
||||||
|
this.editor.setSize('auto', this.height)
|
||||||
|
this.editor.setValue(this.value)
|
||||||
|
this.editor.on('change', cm => {
|
||||||
|
this.$emit('changed', cm.getValue())
|
||||||
|
this.$emit('input', cm.getValue())
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getValue() {
|
||||||
|
return this.editor.getValue()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.json-editor{
|
||||||
|
height: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.json-editor >>> .CodeMirror {
|
||||||
|
font-size: 18px;
|
||||||
|
overflow-y:auto;
|
||||||
|
font-weight:normal
|
||||||
|
}
|
||||||
|
.json-editor >>> .CodeMirror-scroll{
|
||||||
|
}
|
||||||
|
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
||||||
|
color: #F08047;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div class="">
|
||||||
|
<p class="warn-content">
|
||||||
|
Yaml编辑器 基于
|
||||||
|
<a href="https://github.com/codemirror/CodeMirror" target="_blank"><strong style="color: orangered">CodeMirror</strong></a>,
|
||||||
|
主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank"><strong style="color: orangered">Theme</strong></a>
|
||||||
|
</p>
|
||||||
|
<Yaml :value="value" :height="height"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Yaml from '@/components/YamlEdit/index'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'YamlEdit',
|
||||||
|
components: {Yaml},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: document.documentElement.clientHeight - 210 + 'px',
|
||||||
|
value: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const that = this
|
||||||
|
window.onresize = function temp() {
|
||||||
|
that.height = document.documentElement.clientHeight - 210 + 'px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
p{
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 35px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -34,8 +34,6 @@ public class MailController {
|
||||||
public AjaxResult sendMail(MailVo mailVo) {
|
public AjaxResult sendMail(MailVo mailVo) {
|
||||||
MailBean mailBean = new MailBean();
|
MailBean mailBean = new MailBean();
|
||||||
BeanUtils.copyProperties(mailVo, mailBean);
|
BeanUtils.copyProperties(mailVo, mailBean);
|
||||||
mailBean.setMailType(MailBean.MailType.ATTACHMENT);
|
|
||||||
|
|
||||||
mailService.sendMail(mailBean);
|
mailService.sendMail(mailBean);
|
||||||
return AjaxResult.success();
|
return AjaxResult.success();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,13 @@ public class MailServiceImpl implements MailService {
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void sendMail(MailBean mailBean) {
|
public void sendMail(MailBean mailBean) {
|
||||||
|
if (mailBean.getMailType() == null) {
|
||||||
|
if (mailBean.getFileList() != null && mailBean.getFileList().length > 0) {
|
||||||
|
mailBean.setMailType(MailBean.MailType.ATTACHMENT);
|
||||||
|
} else if (mailBean.getFileList() == null || mailBean.getFileList().length == 0) {
|
||||||
|
mailBean.setMailType(MailBean.MailType.HTML);
|
||||||
|
}
|
||||||
|
}
|
||||||
mailServer.sendMail(mailBean);
|
mailServer.sendMail(mailBean);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue