refactor(front): 重构前端组件并优化代码
- 移除了多个无用的组件和文件 - 更新了部分组件的实现方式 - 优化了代码结构和样式 - 修复了CuteSimpleTable、CuteDragTable组件,在无数据时,数据表格不刷新问题
This commit is contained in:
@@ -52,24 +52,33 @@ https://github.com/odboy-tianjun/cutejava
|
|||||||
- 存储管理:本地存储、Minio存储
|
- 存储管理:本地存储、Minio存储
|
||||||
- 服务监控:监控服务器的负载情况
|
- 服务监控:监控服务器的负载情况
|
||||||
|
|
||||||
#### 丰富的自定义组件
|
#### 前端基础组件
|
||||||
|
|
||||||
|
> 组件所在路径:cutejava-front/src/views/components/dev
|
||||||
|
|
||||||
- CuteSimpleTable 简单表格
|
- CuteSimpleTable 简单表格
|
||||||
- CuteDragTable 支持拖拽的表格
|
- CuteDragTable 支持拖拽的表格
|
||||||
- CuteFormDialog 支持表单的对话框
|
- CuteFormDialog 支持表单的对话框
|
||||||
|
- CuteRichTextEditor 富文本编辑器
|
||||||
|
- CuteOneKeyCopy 一键复制
|
||||||
|
- CuteMarkdown Markdown编辑器
|
||||||
|
- CuteJavaEditor Java编辑器(已弃用)
|
||||||
|
- CuteYamlEditor Yaml编辑器(已弃用)
|
||||||
|
- CuteCodeEditor 多语言编辑器(支持yaml、java、go、swift、dockerfile、groovy、lua、perl、python、ruby、sql、xml、vue)
|
||||||
|
|
||||||
|
#### 前端业务组件
|
||||||
|
|
||||||
|
> 组件所在路径:cutejava-front/src/views/components/business
|
||||||
|
|
||||||
|
- CuteDeptTree 部门树
|
||||||
|
- CuteUserSelect 用户多选框
|
||||||
|
|
||||||
#### 系统模块
|
#### 系统模块
|
||||||
|
|
||||||
- cutejava-framework:系统基础框架,提供核心功能,如:权限、数据权限、异常处理、缓存、工具类、接口限流、接口防重、接口幂等。
|
- cutejava-framework:系统基础框架。提供核心功能,如:权限、数据权限、异常处理、缓存、工具类、接口限流、接口防重、接口幂等。
|
||||||
- cutejava-system:系统功能模块,提供用户、角色、菜单、部门、岗位、字典、定时任务、邮件、Minio存储、服务监控等功能
|
- cutejava-system:系统功能模块。提供用户、角色、菜单、部门、岗位、字典、定时任务、邮件、Minio存储、服务监控等功能
|
||||||
- cutejava-pipeline:流水线模块,参考阿里云云效,提供流水线功能,可配置流水线任务,并支持任务依赖、任务参数、任务参数校验、任务参数回填。
|
- cutejava-devops:devops模块,已实现流水线功能。参考阿里云云效,提供流水线功能,可配置流水线任务,并支持任务依赖、任务参数、任务参数校验、任务参数回填。
|
||||||
|
|
||||||
#### 特别鸣谢
|
#### 特别鸣谢
|
||||||
|
|
||||||
- 感谢 [PanJiaChen](https://github.com/PanJiaChen/vue-element-admin) 大佬提供的前端模板
|
- 感谢 [elunez](https://github.com/elunez/eladmin-mp) 大佬提供的基础框架
|
||||||
|
|
||||||
- 感谢 [Moxun](https://github.com/moxun1639) 大佬提供的前端 Curd 通用组件
|
|
||||||
|
|
||||||
- 感谢 [zhy6599](https://gitee.com/zhy6599) 大佬提供的后端运维管理相关功能
|
|
||||||
|
|
||||||
- 感谢 [j.yao.SUSE](https://github.com/everhopingandwaiting) 大佬提供的匿名接口与Redis限流等功能
|
|
||||||
@@ -61,12 +61,4 @@ https://www.ydyno.com/archives/1219.html
|
|||||||
|
|
||||||
#### 特别鸣谢
|
#### 特别鸣谢
|
||||||
|
|
||||||
- 感谢 [JetBrains](https://www.jetbrains.com/) 提供的非商业开源软件开发授权
|
- 感谢 [elunez](https://github.com/elunez/eladmin-mp) 大佬提供的基础框架
|
||||||
|
|
||||||
- 感谢 [PanJiaChen](https://github.com/PanJiaChen/vue-element-admin) 大佬提供的前端模板
|
|
||||||
|
|
||||||
- 感谢 [Moxun](https://github.com/moxun1639) 大佬提供的前端 Crud 通用组件
|
|
||||||
|
|
||||||
- 感谢 [zhy6599](https://gitee.com/zhy6599) 大佬提供的后端运维管理相关功能
|
|
||||||
|
|
||||||
- 感谢 [j.yao.SUSE](https://github.com/everhopingandwaiting) 大佬提供的匿名接口与Redis限流等功能
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||||||
export function get(dictName) {
|
export function get(dictName) {
|
||||||
const params = {
|
const params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: {
|
args: {
|
||||||
dictName: dictName
|
dictName: dictName
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||||||
export function queryAllEnableJob() {
|
export function queryAllEnableJob() {
|
||||||
const params = {
|
const params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: {
|
args: {
|
||||||
enabled: true
|
enabled: true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,77 +0,0 @@
|
|||||||
<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/clike/clike'
|
|
||||||
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-java',
|
|
||||||
lineNumbers: true,
|
|
||||||
lint: true,
|
|
||||||
lineWrapping: true,
|
|
||||||
tabSize: 2,
|
|
||||||
cursorHeight: 0.9,
|
|
||||||
// 替换主题这里需修改名称
|
|
||||||
theme: 'idea',
|
|
||||||
readOnly: false
|
|
||||||
})
|
|
||||||
this.editor.setSize('auto', this.height)
|
|
||||||
this.editor.setValue(this.value)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getValue() {
|
|
||||||
return this.editor.getValue()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.json-editor{
|
|
||||||
height: 100%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.json-editor >>> .CodeMirror {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight:normal
|
|
||||||
}
|
|
||||||
.json-editor >>> .CodeMirror-scroll{
|
|
||||||
}
|
|
||||||
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
|
||||||
color: #F08047;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="editor" style="border: 1px solid #ccc;">
|
|
||||||
<Toolbar
|
|
||||||
style="border-bottom: 1px solid #ccc"
|
|
||||||
:editor="editor"
|
|
||||||
:default-config="toolbarConfig"
|
|
||||||
:mode="editMode"
|
|
||||||
/>
|
|
||||||
<Editor
|
|
||||||
v-model="editValue"
|
|
||||||
:style="{'height': editorHeight +'px', 'overflow-y': 'hidden'}"
|
|
||||||
:default-config="editorConfig"
|
|
||||||
:mode="editMode"
|
|
||||||
@onCreated="onCreated"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { upload } from '@/utils/upload'
|
|
||||||
import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'WangEditor',
|
|
||||||
components: { Toolbar, Editor },
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
editorHeight: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 420
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const _this = this
|
|
||||||
return {
|
|
||||||
toolbarConfig: {},
|
|
||||||
editorConfig: { placeholder: '请输入内容...', MENU_CONF: {
|
|
||||||
'uploadImage': {
|
|
||||||
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
|
|
||||||
allowedFileTypes: ['image/*'],
|
|
||||||
// 自定义上传
|
|
||||||
async customUpload(file, insertFn) { // JS 语法
|
|
||||||
upload(_this.imagesUploadApi, file).then(res => {
|
|
||||||
const data = res.data
|
|
||||||
const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
|
|
||||||
// 最后插入图片
|
|
||||||
insertFn(url, '', '')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}},
|
|
||||||
editMode: 'simple',
|
|
||||||
editor: null,
|
|
||||||
editValue: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'imagesUploadApi',
|
|
||||||
'baseApi'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
editValue(newVal, oldVal) {
|
|
||||||
this.$emit('input', newVal)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onCreated(editor) {
|
|
||||||
this.editor = Object.seal(editor)
|
|
||||||
this.editValue = this.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
|
||||||
<style scoped>
|
|
||||||
.text {
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
::v-deep .w-e-text-container {
|
|
||||||
height: 420px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<JavaEdit height="500px" :value="form.content" :read-only="false" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import JavaEdit from '@/components/JavaEdit/index.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { JavaEdit },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
content: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- el-table中 添加 row-key="id" ,ref 创建拖拽时用到获取表格节点 -->
|
|
||||||
<el-table
|
|
||||||
ref="sortTable"
|
|
||||||
height="300"
|
|
||||||
:data="sortList"
|
|
||||||
row-key="id"
|
|
||||||
>
|
|
||||||
<el-table-column width="50" align="center" prop="orderNum" label="序号" />
|
|
||||||
<el-table-column width="100" align="center" prop="username" label="用户名" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column align="center" prop="code" label="编号" />
|
|
||||||
<el-table-column width="100" align="center" prop="sex" label="性别" />
|
|
||||||
</el-table>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Sortable from 'sortablejs'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sortList: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const list = []
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
list.push({
|
|
||||||
orderNum: i + 1,
|
|
||||||
id: i + 1,
|
|
||||||
username: '用户名' + i,
|
|
||||||
code: i,
|
|
||||||
sex: i % 2 === 0 ? '男' : '女'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.sortList = list
|
|
||||||
this.initDragTable()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 初始化拖拽功能
|
|
||||||
initDragTable() {
|
|
||||||
const table = this.$refs.sortTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
|
||||||
const that = this
|
|
||||||
Sortable.create(table, {
|
|
||||||
animation: 1000,
|
|
||||||
onEnd({ newIndex, oldIndex }) {
|
|
||||||
// 拖拽排序数据
|
|
||||||
that.sortList.splice(newIndex, 0, that.sortList.splice(oldIndex, 1)[0])
|
|
||||||
const newArray = that.sortList.slice(0)
|
|
||||||
that.sortList = [] // 必须有此步骤,不然拖拽后回弹
|
|
||||||
that.$nextTick(function() {
|
|
||||||
that.sortList = newArray // 重新赋值,用新数据来刷新视图
|
|
||||||
this.updateOrderNum(that.sortList)// 更改列表中的序号,使序号1.2.3.4.....显示,不然就是行拖拽后乱序显示如:3.2.4.1...
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
updateOrderNum(data) {
|
|
||||||
data.forEach((item, index) => {
|
|
||||||
item.orderNum = index + 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<p class="warn-content">
|
|
||||||
富文本基于
|
|
||||||
<el-link type="primary" href="https://www.wangeditor.com/v5/getting-started.html" target="_blank">wangEditor</el-link>
|
|
||||||
</p>
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<wang-editor v-model="editorContent" style="height: 500px; overflow-y: hidden;" />
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import WangEditor from '@/components/WangEditor/index.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Editor',
|
|
||||||
components: { WangEditor },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editorContent:
|
|
||||||
`更多帮助请查看官方文档`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'imagesUploadApi',
|
|
||||||
'baseApi'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<p class="warn-content">
|
|
||||||
Markdown 基于
|
|
||||||
<el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>
|
|
||||||
</p>
|
|
||||||
<mavon-editor ref="md" :style="'height:' + height" @imgAdd="imgAdd" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { upload } from '@/utils/upload'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import { mavonEditor } from 'mavon-editor'
|
|
||||||
import 'mavon-editor/dist/css/index.css'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Markdown',
|
|
||||||
components: {
|
|
||||||
mavonEditor
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
height: document.documentElement.clientHeight - 200 + 'px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'imagesUploadApi',
|
|
||||||
'baseApi'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const that = this
|
|
||||||
window.onresize = function temp() {
|
|
||||||
that.height = document.documentElement.clientHeight - 200 + 'px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
imgAdd(pos, $file) {
|
|
||||||
upload(this.imagesUploadApi, $file).then(res => {
|
|
||||||
const data = res.data
|
|
||||||
const url = this.baseApi + '/file/' + data.type + '/' + data.realName
|
|
||||||
this.$refs.md.$img2Url(pos, url)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.v-note-wrapper.shadow {
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<p class="warn-content">
|
|
||||||
Yaml编辑器 基于
|
|
||||||
<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>,
|
|
||||||
主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>
|
|
||||||
</p>
|
|
||||||
<Yaml :value="value" :height="height" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Yaml from '@/components/YamlEdit/index.vue'
|
|
||||||
export default {
|
|
||||||
name: 'YamlEdit',
|
|
||||||
components: { Yaml },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
height: document.documentElement.clientHeight - 210 + 'px',
|
|
||||||
value: '# 展示数据,如需更换主题,请在src/components/YamlEdit 目录中搜索原主题名称进行替换\n' +
|
|
||||||
'\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'# Spring Boot configuration.\n' +
|
|
||||||
'#\n' +
|
|
||||||
'# This configuration will be overridden by the Spring profile you use,\n' +
|
|
||||||
'# for example application-dev.yml if you use the "dev" profile.\n' +
|
|
||||||
'#\n' +
|
|
||||||
'# More information on profiles: https://www.jhipster.tech/profiles/\n' +
|
|
||||||
'# More information on configuration properties: https://www.jhipster.tech/common-application-properties/\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'# Standard Spring Boot properties.\n' +
|
|
||||||
'# Full reference is available at:\n' +
|
|
||||||
'# http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'\n' +
|
|
||||||
'eureka:\n' +
|
|
||||||
' client:\n' +
|
|
||||||
' enabled: true\n' +
|
|
||||||
' healthcheck:\n' +
|
|
||||||
' enabled: true\n' +
|
|
||||||
' fetch-registry: true\n' +
|
|
||||||
' register-with-eureka: true\n' +
|
|
||||||
' instance-info-replication-interval-seconds: 10\n' +
|
|
||||||
' registry-fetch-interval-seconds: 10\n' +
|
|
||||||
' instance:\n' +
|
|
||||||
' appname: product\n' +
|
|
||||||
' instanceId: product:${spring.application.instance-id:${random.value}}\n' +
|
|
||||||
' #instanceId: 127.0.0.1:9080\n' +
|
|
||||||
' lease-renewal-interval-in-seconds: 5\n' +
|
|
||||||
' lease-expiration-duration-in-seconds: 10\n' +
|
|
||||||
' status-page-url-path: ${management.endpoints.web.base-path}/info\n' +
|
|
||||||
' health-check-url-path: ${management.endpoints.web.base-path}/health\n' +
|
|
||||||
' metadata-map:\n' +
|
|
||||||
' zone: primary # This is needed for the load balancer\n' +
|
|
||||||
' profile: ${spring.profiles.active}\n' +
|
|
||||||
' version: ${info.project.version:}\n' +
|
|
||||||
' git-version: ${git.commit.id.query:}\n' +
|
|
||||||
' git-commit: ${git.commit.id.abbrev:}\n' +
|
|
||||||
' git-branch: ${git.branch:}\n' +
|
|
||||||
'ribbon:\n' +
|
|
||||||
' ReadTimeout: 120000\n' +
|
|
||||||
' ConnectTimeout: 300000\n' +
|
|
||||||
' eureka:\n' +
|
|
||||||
' enabled: true\n' +
|
|
||||||
'zuul:\n' +
|
|
||||||
' host:\n' +
|
|
||||||
' connect-timeout-millis: 5000\n' +
|
|
||||||
' max-per-route-connections: 10000\n' +
|
|
||||||
' max-total-connections: 5000\n' +
|
|
||||||
' socket-timeout-millis: 60000\n' +
|
|
||||||
' semaphore:\n' +
|
|
||||||
' max-semaphores: 500\n' +
|
|
||||||
'\n' +
|
|
||||||
'feign:\n' +
|
|
||||||
' hystrix:\n' +
|
|
||||||
' enabled: true\n' +
|
|
||||||
' client:\n' +
|
|
||||||
' config:\n' +
|
|
||||||
' default:\n' +
|
|
||||||
' connectTimeout: 500000\n' +
|
|
||||||
' readTimeout: 500000\n' +
|
|
||||||
'\n' +
|
|
||||||
'# See https://github.com/Netflix/Hystrix/wiki/Configuration\n' +
|
|
||||||
'hystrix:\n' +
|
|
||||||
' command:\n' +
|
|
||||||
' default:\n' +
|
|
||||||
' circuitBreaker:\n' +
|
|
||||||
' sleepWindowInMilliseconds: 100000\n' +
|
|
||||||
' forceClosed: true\n' +
|
|
||||||
' execution:\n' +
|
|
||||||
' isolation:\n' +
|
|
||||||
'# strategy: SEMAPHORE\n' +
|
|
||||||
'# See https://github.com/spring-cloud/spring-cloud-netflix/issues/1330\n' +
|
|
||||||
' thread:\n' +
|
|
||||||
' timeoutInMilliseconds: 60000\n' +
|
|
||||||
' shareSecurityContext: true\n' +
|
|
||||||
'\n' +
|
|
||||||
'management:\n' +
|
|
||||||
' endpoints:\n' +
|
|
||||||
' web:\n' +
|
|
||||||
' base-path: /management\n' +
|
|
||||||
' exposure:\n' +
|
|
||||||
' include: ["configprops", "env", "health", "info", "threaddump"]\n' +
|
|
||||||
' endpoint:\n' +
|
|
||||||
' health:\n' +
|
|
||||||
' show-details: when_authorized\n' +
|
|
||||||
' info:\n' +
|
|
||||||
' git:\n' +
|
|
||||||
' mode: full\n' +
|
|
||||||
' health:\n' +
|
|
||||||
' mail:\n' +
|
|
||||||
' enabled: false # When using the MailService, configure an SMTP server and set this to true\n' +
|
|
||||||
' metrics:\n' +
|
|
||||||
' enabled: false # http://micrometer.io/ is disabled by default, as we use http://metrics.dropwizard.io/ instead\n' +
|
|
||||||
'\n' +
|
|
||||||
'spring:\n' +
|
|
||||||
' application:\n' +
|
|
||||||
' name: product\n' +
|
|
||||||
' jpa:\n' +
|
|
||||||
' open-in-view: false\n' +
|
|
||||||
' hibernate:\n' +
|
|
||||||
' ddl-auto: update\n' +
|
|
||||||
' naming:\n' +
|
|
||||||
' physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy\n' +
|
|
||||||
' implicit-strategy: org.springframework.boot.orm.jpa.hibernate.SpringImplicitNamingStrategy\n' +
|
|
||||||
' messages:\n' +
|
|
||||||
' basename: i18n/messages\n' +
|
|
||||||
' mvc:\n' +
|
|
||||||
' favicon:\n' +
|
|
||||||
' enabled: false\n' +
|
|
||||||
' thymeleaf:\n' +
|
|
||||||
' mode: HTML\n' +
|
|
||||||
'security:\n' +
|
|
||||||
' oauth2:\n' +
|
|
||||||
' resource:\n' +
|
|
||||||
' filter-order: 3\n' +
|
|
||||||
'\n' +
|
|
||||||
'server:\n' +
|
|
||||||
' servlet:\n' +
|
|
||||||
' session:\n' +
|
|
||||||
' cookie:\n' +
|
|
||||||
' http-only: true\n' +
|
|
||||||
'\n' +
|
|
||||||
'# Properties to be exposed on the /info management endpoint\n' +
|
|
||||||
'info:\n' +
|
|
||||||
' # Comma separated list of profiles that will trigger the ribbon to show\n' +
|
|
||||||
' display-ribbon-on-profiles: "dev"\n' +
|
|
||||||
'\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'# JHipster specific properties\n' +
|
|
||||||
'#\n' +
|
|
||||||
'# Full reference is available at: https://www.jhipster.tech/common-application-properties/\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'\n' +
|
|
||||||
'jhipster:\n' +
|
|
||||||
' async:\n' +
|
|
||||||
' core-pool-size: 2\n' +
|
|
||||||
' max-pool-size: 50\n' +
|
|
||||||
' queue-capacity: 10000\n' +
|
|
||||||
' # By default CORS is disabled. Uncomment to enable.\n' +
|
|
||||||
' #cors:\n' +
|
|
||||||
' #allowed-origins: "*"\n' +
|
|
||||||
' #allowed-methods: "*"\n' +
|
|
||||||
' #allowed-headers: "*"\n' +
|
|
||||||
' #exposed-headers: "Authorization,Link,X-Total-Count"\n' +
|
|
||||||
' #allow-credentials: true\n' +
|
|
||||||
' #max-age: 1800\n' +
|
|
||||||
' mail:\n' +
|
|
||||||
' from: product@localhost\n' +
|
|
||||||
' swagger:\n' +
|
|
||||||
' default-include-pattern: /api/.*\n' +
|
|
||||||
' title: product API\n' +
|
|
||||||
' description: product API documentation\n' +
|
|
||||||
' version: 0.0.1\n' +
|
|
||||||
' terms-of-service-url:\n' +
|
|
||||||
' contact-name:\n' +
|
|
||||||
' contact-url:\n' +
|
|
||||||
' contact-email:\n' +
|
|
||||||
' license:\n' +
|
|
||||||
' license-url:\n' +
|
|
||||||
'\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'# Application specific properties\n' +
|
|
||||||
'# Add your own application properties here, see the ApplicationProperties class\n' +
|
|
||||||
'# to have type-safe configuration, like in the JHipsterProperties above\n' +
|
|
||||||
'#\n' +
|
|
||||||
'# More documentation is available at:\n' +
|
|
||||||
'# https://www.jhipster.tech/common-application-properties/\n' +
|
|
||||||
'# ===================================================================\n' +
|
|
||||||
'\n' +
|
|
||||||
'# application:\n'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const that = this
|
|
||||||
window.onresize = function temp() {
|
|
||||||
that.height = document.documentElement.clientHeight - 210 + 'px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -43,18 +43,13 @@ export default {
|
|||||||
currentDept: null
|
currentDept: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
// 监听currentDept变量
|
|
||||||
currentDept(newValue) {
|
|
||||||
this.$emit('input', newValue)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getDeptData(node, resolve) {
|
getDeptData(node, resolve) {
|
||||||
const params = {}
|
const params = {}
|
||||||
if (typeof node !== 'object') {
|
if (typeof node !== 'object') {
|
||||||
if (node) {
|
if (node) {
|
||||||
params['name'] = node
|
params['name'] = node
|
||||||
|
this.$emit('search', node)
|
||||||
}
|
}
|
||||||
} else if (node.level !== 0) {
|
} else if (node.level !== 0) {
|
||||||
params['pid'] = node.data.id
|
params['pid'] = node.data.id
|
||||||
@@ -62,7 +57,7 @@ export default {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
queryDeptList({
|
queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: params
|
args: params
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (resolve) {
|
if (resolve) {
|
||||||
|
|||||||
@@ -40,12 +40,6 @@ export default {
|
|||||||
options: []
|
options: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
// 监听users变量
|
|
||||||
users(newValue) {
|
|
||||||
this.$emit('input', newValue)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
remoteMethod(query) {
|
remoteMethod(query) {
|
||||||
if (query !== '') {
|
if (query !== '') {
|
||||||
@@ -66,7 +60,6 @@ export default {
|
|||||||
},
|
},
|
||||||
onChange(value) {
|
onChange(value) {
|
||||||
this.$emit('change', value)
|
this.$emit('change', value)
|
||||||
this.$emit('input', value)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding: 50px">
|
|
||||||
<el-form ref="form" :model="form" label-width="80px">
|
|
||||||
<el-form-item label="用户" prop="user">
|
|
||||||
<!-- v-model 本质上是 :value 和 @input 事件的语法糖 -->
|
|
||||||
<cute-user-select v-model="form.user" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门" prop="dept">
|
|
||||||
<cute-dept-tree v-model="form.dept" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
|
||||||
<el-button>取消</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<!-- <el-divider content-position="left">用户选择框</el-divider>-->
|
|
||||||
<!-- <cute-user-select @change="onUserSelectChange" />-->
|
|
||||||
<!-- <el-divider content-position="left">部门树</el-divider>-->
|
|
||||||
<!-- <cute-dept-tree @node-click="onDeptTreeNodeClick" />-->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import CuteUserSelect from '@/views/components/business/CuteUserSelect'
|
|
||||||
import CuteDeptTree from '@/views/components/business/CuteDeptTree'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DemoShow',
|
|
||||||
components: { CuteDeptTree, CuteUserSelect },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
user: null,
|
|
||||||
dept: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onUserSelectChange(data) {
|
|
||||||
console.error('onUserSelectChange=', data)
|
|
||||||
},
|
|
||||||
onDeptTreeNodeClick(data) {
|
|
||||||
console.error('onDeptTreeNodeClick=', data)
|
|
||||||
},
|
|
||||||
onSubmit() {
|
|
||||||
console.error('this.form=', this.form)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
<!--Yaml编辑器 基于-->
|
||||||
|
<!--<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>,-->
|
||||||
|
<!--主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>-->
|
||||||
|
<!--</p>-->
|
||||||
|
<!-- mode取值如下:yaml、java、go、swift、dockerfile、groovy、lua、perl、python、ruby、sql、xml、vue -->
|
||||||
|
<template>
|
||||||
|
<textarea ref="textarea" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CodeMirror from 'codemirror'
|
||||||
|
import 'codemirror/lib/codemirror.css'
|
||||||
|
// 替换主题这里需修改名称
|
||||||
|
// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
|
||||||
|
import 'codemirror/theme/darcula.css'
|
||||||
|
import 'codemirror/mode/javascript/javascript'
|
||||||
|
import 'codemirror/mode/yaml/yaml'
|
||||||
|
import 'codemirror/mode/go/go'
|
||||||
|
import 'codemirror/mode/swift/swift'
|
||||||
|
import 'codemirror/mode/dockerfile/dockerfile'
|
||||||
|
import 'codemirror/mode/groovy/groovy'
|
||||||
|
import 'codemirror/mode/lua/lua'
|
||||||
|
import 'codemirror/mode/perl/perl'
|
||||||
|
import 'codemirror/mode/python/python'
|
||||||
|
import 'codemirror/mode/ruby/ruby'
|
||||||
|
import 'codemirror/mode/sql/sql'
|
||||||
|
import 'codemirror/mode/vue/vue'
|
||||||
|
import 'codemirror/mode/xml/xml'
|
||||||
|
import { Message } from 'element-ui'
|
||||||
|
const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy', 'lua', 'perl', 'python', 'ruby', 'sql', 'xml', 'vue']
|
||||||
|
export default {
|
||||||
|
name: 'CuteCodeEditor',
|
||||||
|
props: {
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '500px'
|
||||||
|
},
|
||||||
|
readOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: 'yaml'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
content(newVal, oldVal) {
|
||||||
|
const editorValue = this.editor.getValue()
|
||||||
|
if (newVal !== editorValue) {
|
||||||
|
this.editor.setValue(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
height(newVal, oldVal) {
|
||||||
|
this.editor.setSize('auto', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.mode && SupportModeList.includes(this.mode)) {
|
||||||
|
let mode = 'yaml'
|
||||||
|
if (this.mode === 'java' || this.mode === 'javascript') {
|
||||||
|
mode = 'javascript'
|
||||||
|
} else {
|
||||||
|
mode = this.mode
|
||||||
|
}
|
||||||
|
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||||
|
mode: mode,
|
||||||
|
autoRefresh: true,
|
||||||
|
lineNumbers: true,
|
||||||
|
lint: true,
|
||||||
|
lineWrapping: true,
|
||||||
|
tabSize: 2,
|
||||||
|
cursorHeight: 1,
|
||||||
|
// 替换主题这里需修改名称
|
||||||
|
theme: 'darcula'
|
||||||
|
})
|
||||||
|
this.editor.setSize('auto', this.height)
|
||||||
|
if (this.content) {
|
||||||
|
this.editor.setValue(this.content)
|
||||||
|
}
|
||||||
|
this.editor.setOption('readOnly', this.readOnly)
|
||||||
|
this.editor.on('change', cm => {
|
||||||
|
this.$emit('change', cm.getValue())
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
Message.error('不支持的mode')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getValue() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return this.editor.getValue()
|
||||||
|
},
|
||||||
|
setValue(val) {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.setValue(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -49,11 +49,6 @@ export default {
|
|||||||
required: true,
|
required: true,
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
dataSource: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
fetch: {
|
fetch: {
|
||||||
type: Function,
|
type: Function,
|
||||||
required: false,
|
required: false,
|
||||||
@@ -94,7 +89,7 @@ export default {
|
|||||||
columns: this.columns && this.columns.length > 0 ? this.columns : [],
|
columns: this.columns && this.columns.length > 0 ? this.columns : [],
|
||||||
operateColumn: this.operateColumn,
|
operateColumn: this.operateColumn,
|
||||||
fetchUrl: null,
|
fetchUrl: null,
|
||||||
dataSource: this.dataSource && this.dataSource.length > 0 ? this.dataSource : [],
|
dataSource: [],
|
||||||
onPageChange: (currentPage, pageSize) => {
|
onPageChange: (currentPage, pageSize) => {
|
||||||
this.pageProps.current = currentPage
|
this.pageProps.current = currentPage
|
||||||
this.pageProps.pageSize = pageSize
|
this.pageProps.pageSize = pageSize
|
||||||
@@ -114,11 +109,6 @@ export default {
|
|||||||
this.initDragTable()
|
this.initDragTable()
|
||||||
},
|
},
|
||||||
async initData() {
|
async initData() {
|
||||||
// 以dataSource属性为准
|
|
||||||
if (this.dataSource) {
|
|
||||||
this.crud.dataSource = this.dataSource
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let params = {}
|
let params = {}
|
||||||
// 自定义请求参数
|
// 自定义请求参数
|
||||||
if (this.paramsTransform) {
|
if (this.paramsTransform) {
|
||||||
@@ -135,7 +125,7 @@ export default {
|
|||||||
if (this.responseTransform) {
|
if (this.responseTransform) {
|
||||||
return this.responseTransform(response)
|
return this.responseTransform(response)
|
||||||
}
|
}
|
||||||
if (response && response.totalElements && response.content) {
|
if (response && response.hasOwnProperty('totalElements') && response.hasOwnProperty('content')) {
|
||||||
this.pageProps.total = response.totalElements
|
this.pageProps.total = response.totalElements
|
||||||
this.crud.dataSource = response.content
|
this.crud.dataSource = response.content
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog :title="title" :visible.sync="visible" :width="width" :fullscreen="fullscreen" :before-close="beforeClose">
|
<el-dialog
|
||||||
<el-form ref="form" :model="form.model" :rules="form.rules">
|
:title="title"
|
||||||
<!-- 这里是插槽,用于渲染传入的 el-form-item -->
|
:visible.sync="visible"
|
||||||
<slot />
|
:width="width"
|
||||||
</el-form>
|
:fullscreen="fullscreen"
|
||||||
<div slot="footer" class="dialog-footer">
|
:before-close="beforeClose"
|
||||||
|
>
|
||||||
|
<div class="container-form">
|
||||||
|
<el-form ref="form" :model="form.model" :rules="form.rules">
|
||||||
|
<!-- 这里是插槽,用于渲染传入的 el-form-item -->
|
||||||
|
<slot />
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="dialog-footer" style="padding-right: 30px;text-align: right">
|
||||||
<el-button type="danger" @click="hidden">取 消</el-button>
|
<el-button type="danger" @click="hidden">取 消</el-button>
|
||||||
<!--<el-button @click="resetForm('form')">重 置</el-button>-->
|
<!--<el-button @click="resetForm('form')">重 置</el-button>-->
|
||||||
<el-button type="primary" @click="submitForm('form')">提 交</el-button>
|
<el-button type="primary" @click="submitForm('form')">提 交</el-button>
|
||||||
@@ -69,4 +78,16 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container-form {
|
||||||
|
overflow-y: scroll; /* 启用滚动 */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
padding-right: 20px;
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-form::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari, Opera*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<el-drawer
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="visible"
|
||||||
|
:size="width"
|
||||||
|
:before-close="beforeClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
:close-on-press-escape="false"
|
||||||
|
:destroy-on-close="true"
|
||||||
|
:show-close="false"
|
||||||
|
>
|
||||||
|
<div class="container-form">
|
||||||
|
<el-form ref="form" :model="form.model" :rules="form.rules">
|
||||||
|
<!-- 这里是插槽,用于渲染传入的 el-form-item -->
|
||||||
|
<slot />
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-divider />
|
||||||
|
<div class="dialog-footer" style="padding-right: 30px;text-align: right">
|
||||||
|
<el-button type="danger" @click="hidden">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="submitForm('form')">提 交</el-button>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CuteFormDrawer',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: '默认标题'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '40%'
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show() {
|
||||||
|
this.visible = true
|
||||||
|
},
|
||||||
|
hidden() {
|
||||||
|
this.resetForm('form')
|
||||||
|
this.visible = false
|
||||||
|
},
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.$emit('submit', this.form.model)
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields()
|
||||||
|
},
|
||||||
|
beforeClose() {
|
||||||
|
this.hidden()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container-form {
|
||||||
|
overflow-y: scroll; /* 启用滚动 */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
height: 88%;
|
||||||
|
padding-right: 20px;
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-form::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome, Safari, Opera*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<!--Yaml编辑器 基于-->
|
||||||
|
<!--<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>,-->
|
||||||
|
<!--主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>-->
|
||||||
|
<!--</p>-->
|
||||||
|
<template>
|
||||||
|
<textarea ref="textarea" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CodeMirror from 'codemirror'
|
||||||
|
import 'codemirror/lib/codemirror.css'
|
||||||
|
// 替换主题这里需修改名称
|
||||||
|
// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
|
||||||
|
import 'codemirror/theme/darcula.css'
|
||||||
|
import 'codemirror/mode/javascript/javascript'
|
||||||
|
export default {
|
||||||
|
name: 'CuteJavaEditor',
|
||||||
|
props: {
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '500px'
|
||||||
|
},
|
||||||
|
readOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
content(newVal, oldVal) {
|
||||||
|
const editorValue = this.editor.getValue()
|
||||||
|
if (newVal !== editorValue) {
|
||||||
|
this.editor.setValue(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
height(newVal, oldVal) {
|
||||||
|
this.editor.setSize('auto', newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||||
|
mode: 'javascript',
|
||||||
|
autoRefresh: true,
|
||||||
|
lineNumbers: true,
|
||||||
|
lint: true,
|
||||||
|
lineWrapping: true,
|
||||||
|
tabSize: 2,
|
||||||
|
cursorHeight: 1,
|
||||||
|
// 替换主题这里需修改名称
|
||||||
|
theme: 'darcula'
|
||||||
|
})
|
||||||
|
this.editor.setSize('auto', this.height)
|
||||||
|
if (this.content) {
|
||||||
|
this.editor.setValue(this.content)
|
||||||
|
}
|
||||||
|
this.editor.setOption('readOnly', this.readOnly)
|
||||||
|
this.editor.on('change', cm => {
|
||||||
|
this.$emit('change', cm.getValue())
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getValue() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return this.editor.getValue()
|
||||||
|
},
|
||||||
|
setValue(val) {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.setValue(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<!--<p class="warn-content">-->
|
||||||
|
<!--Markdown 基于-->
|
||||||
|
<!--<el-link type="primary" href="https://github.com/hinesboy/mavonEditor" target="_blank">MavonEditor</el-link>-->
|
||||||
|
<!--</p>-->
|
||||||
|
<template>
|
||||||
|
<mavon-editor
|
||||||
|
ref="md"
|
||||||
|
v-model="content"
|
||||||
|
:style="`height: + ${height};overflow-y: hidden`"
|
||||||
|
:ishljs="true"
|
||||||
|
@imgAdd="imgAdd"
|
||||||
|
@change="onChange"
|
||||||
|
@save="onSave"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { upload } from '@/utils/upload'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import { mavonEditor } from 'mavon-editor'
|
||||||
|
import 'mavon-editor/dist/css/index.css'
|
||||||
|
const dynamicHeight = 160
|
||||||
|
export default {
|
||||||
|
name: 'CuteMarkdown',
|
||||||
|
components: {
|
||||||
|
mavonEditor
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: document.documentElement.clientHeight - dynamicHeight + 'px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'imagesUploadApi',
|
||||||
|
'baseApi'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const that = this
|
||||||
|
window.onresize = () => {
|
||||||
|
that.height = document.documentElement.clientHeight - dynamicHeight + 'px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
imgAdd(pos, $file) {
|
||||||
|
const that = this
|
||||||
|
upload(that.imagesUploadApi, $file).then(res => {
|
||||||
|
const data = res.data
|
||||||
|
const url = that.baseApi + '/file/' + data.type + '/' + data.realName
|
||||||
|
that.$refs.md.$img2Url(pos, url)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange(value, render) {
|
||||||
|
this.$emit('change', value, render)
|
||||||
|
},
|
||||||
|
onSave(value, render) {
|
||||||
|
this.$emit('save', value, render)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
@@ -16,6 +16,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
content: {
|
content: {
|
||||||
type: String,
|
type: String,
|
||||||
|
required: true,
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,294 @@
|
|||||||
|
<!--富文本基于-->
|
||||||
|
<!--<el-link type="primary" href="https://www.wangeditor.com/v5/getting-started.html" target="_blank">wangEditor</el-link>-->
|
||||||
|
<template>
|
||||||
|
<div ref="editor" style="border: 1px solid #ccc;">
|
||||||
|
<Toolbar
|
||||||
|
style="border-bottom: 1px solid #ccc"
|
||||||
|
:editor="editor"
|
||||||
|
:default-config="toolbarConfig"
|
||||||
|
:mode="editMode"
|
||||||
|
/>
|
||||||
|
<Editor
|
||||||
|
v-model="editValue"
|
||||||
|
:style="`height: 500px;overflow-y: hidden`"
|
||||||
|
:default-config="editorConfig"
|
||||||
|
:mode="editMode"
|
||||||
|
@onCreated="onCreated"
|
||||||
|
@onChange="onChange"
|
||||||
|
@onDestroyed="onDestroyed"
|
||||||
|
@onFocus="onFocus"
|
||||||
|
@onBlur="onBlur"
|
||||||
|
@customAlert="customAlert"
|
||||||
|
@customPaste="customPaste"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import '@wangeditor/editor/dist/css/style.css'
|
||||||
|
import { Message } from 'element-ui'
|
||||||
|
import { upload } from '@/utils/upload'
|
||||||
|
import { Toolbar, Editor } from '@wangeditor/editor-for-vue'
|
||||||
|
export default {
|
||||||
|
name: 'CuteRichTextEditor',
|
||||||
|
components: { Toolbar, Editor },
|
||||||
|
props: {
|
||||||
|
readOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const that = this
|
||||||
|
return {
|
||||||
|
toolbarConfig: {},
|
||||||
|
editorConfig: {
|
||||||
|
placeholder: '请输入内容...',
|
||||||
|
readOnly: that.readOnly,
|
||||||
|
autoFocus: true,
|
||||||
|
scroll: false,
|
||||||
|
// 会造成卡顿
|
||||||
|
// maxLength: this.maxLength
|
||||||
|
MENU_CONF: {
|
||||||
|
'uploadImage': {
|
||||||
|
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
|
||||||
|
allowedFileTypes: ['image/*'],
|
||||||
|
// 自定义上传
|
||||||
|
async customUpload(file, insertFn) { // JS 语法
|
||||||
|
upload(that.imagesUploadApi, file).then(res => {
|
||||||
|
const data = res.data
|
||||||
|
const url = that.baseApi + '/file/' + data.dateGroup + '/' + data.realName
|
||||||
|
// 最后插入图片
|
||||||
|
insertFn(url, '', '')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 'default' or 'simple'
|
||||||
|
editMode: 'simple',
|
||||||
|
editor: null,
|
||||||
|
editValue: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'imagesUploadApi',
|
||||||
|
'baseApi'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 编辑器创建完毕时的回调函数
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
onCreated(editor) {
|
||||||
|
// 一定要用 Object.seal(), 否则会报错
|
||||||
|
this.editor = Object.seal(editor)
|
||||||
|
this.editValue = this.content
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 编辑器内容、选区变化时的回调函数
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
onChange(editor) {
|
||||||
|
if (editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 非格式化的 html
|
||||||
|
const html = editor.getHtml()
|
||||||
|
// 纯文本内容
|
||||||
|
const text = editor.getText()
|
||||||
|
this.$emit('change', html, text)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
onDestroyed(editor) {
|
||||||
|
if (editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
editor.destroy()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 编辑器内容达到最大长度时的回调函数(会导致卡顿)
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
onMaxLength(editor) {
|
||||||
|
if (editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 编辑器 focus 时的回调函数
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
onFocus(editor) {
|
||||||
|
if (editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$emit('focus', editor)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 编辑器 blur 时的回调函数
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
onBlur(editor) {
|
||||||
|
if (editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$emit('blur', editor)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 自定义编辑器 alert 。如想用 ElementUI 的 Message 功能
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
customAlert(info, type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'success':
|
||||||
|
Message.success(info)
|
||||||
|
break
|
||||||
|
case 'info':
|
||||||
|
Message.info(info)
|
||||||
|
break
|
||||||
|
case 'warning':
|
||||||
|
Message.warning(info)
|
||||||
|
break
|
||||||
|
case 'error':
|
||||||
|
Message.error(info)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
Message.info(info)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 自定义粘贴。可阻止编辑器的默认粘贴,实现自己的粘贴逻辑
|
||||||
|
* @param editor
|
||||||
|
*/
|
||||||
|
customPaste(editor, event, callback) {
|
||||||
|
if (editor == null) {
|
||||||
|
callback(true)
|
||||||
|
}
|
||||||
|
// console.log('ClipboardEvent 粘贴事件对象', event)
|
||||||
|
// // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
|
||||||
|
// // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
|
||||||
|
// // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据(如从 word wsp 复制粘贴)
|
||||||
|
//
|
||||||
|
// // 自定义插入内容
|
||||||
|
// editor.insertText('xxx')
|
||||||
|
//
|
||||||
|
// // 返回 false ,阻止默认粘贴行为
|
||||||
|
// event.preventDefault()
|
||||||
|
// callback(false) // 返回值(注意,vue 事件的返回值,不能用 return)
|
||||||
|
//
|
||||||
|
// // 返回 true ,继续默认的粘贴行为
|
||||||
|
// // callback(true)
|
||||||
|
callback(true)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置编辑器html内容
|
||||||
|
* @param html
|
||||||
|
* <br/>
|
||||||
|
* 如果是 editor.getHtml() 获取的 HTML 格式,可以完美解析。
|
||||||
|
* 如果是其他的 HTML 格式,则不能保证语义正确 —— dangerously 。
|
||||||
|
*/
|
||||||
|
setHtml(html) {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.dangerouslyInsertHtml(html)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取编辑器html内容
|
||||||
|
*/
|
||||||
|
getHtml() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
this.editor.getHtml()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 清空编辑器内容
|
||||||
|
*/
|
||||||
|
clear() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.clear()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 撤销
|
||||||
|
*/
|
||||||
|
undo() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.undo()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 重做
|
||||||
|
*/
|
||||||
|
redo() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.redo()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取选中的文本
|
||||||
|
*/
|
||||||
|
getSelectionText() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return this.editor.getSelectionText()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 删除选中的内容
|
||||||
|
*/
|
||||||
|
deleteFragment() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.deleteFragment()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取选中的内容。JSON格式
|
||||||
|
*/
|
||||||
|
getFragment() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
return this.editor.getFragment()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取文本内容
|
||||||
|
*/
|
||||||
|
getText() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return this.editor.getText()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 在选区插入文本
|
||||||
|
* @param text
|
||||||
|
*/
|
||||||
|
insertText(text) {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.insertText(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -49,11 +49,6 @@ export default {
|
|||||||
required: true,
|
required: true,
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
dataSource: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
fetch: {
|
fetch: {
|
||||||
type: Function,
|
type: Function,
|
||||||
required: false,
|
required: false,
|
||||||
@@ -94,7 +89,7 @@ export default {
|
|||||||
columns: this.columns && this.columns.length > 0 ? this.columns : [],
|
columns: this.columns && this.columns.length > 0 ? this.columns : [],
|
||||||
operateColumn: this.operateColumn,
|
operateColumn: this.operateColumn,
|
||||||
fetchUrl: null,
|
fetchUrl: null,
|
||||||
dataSource: this.dataSource && this.dataSource.length > 0 ? this.dataSource : [],
|
dataSource: [],
|
||||||
onPageChange: (currentPage, pageSize) => {
|
onPageChange: (currentPage, pageSize) => {
|
||||||
this.pageProps.current = currentPage
|
this.pageProps.current = currentPage
|
||||||
this.pageProps.pageSize = pageSize
|
this.pageProps.pageSize = pageSize
|
||||||
@@ -113,11 +108,6 @@ export default {
|
|||||||
this.initData()
|
this.initData()
|
||||||
},
|
},
|
||||||
async initData() {
|
async initData() {
|
||||||
// 以dataSource属性为准
|
|
||||||
if (this.dataSource) {
|
|
||||||
this.crud.dataSource = this.dataSource
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let params = {}
|
let params = {}
|
||||||
// 自定义请求参数
|
// 自定义请求参数
|
||||||
if (this.paramsTransform) {
|
if (this.paramsTransform) {
|
||||||
@@ -134,7 +124,7 @@ export default {
|
|||||||
if (this.responseTransform) {
|
if (this.responseTransform) {
|
||||||
return this.responseTransform(response)
|
return this.responseTransform(response)
|
||||||
}
|
}
|
||||||
if (response && response.totalElements && response.content) {
|
if (response && response.hasOwnProperty('totalElements') && response.hasOwnProperty('content')) {
|
||||||
this.pageProps.total = response.totalElements
|
this.pageProps.total = response.totalElements
|
||||||
this.crud.dataSource = response.content
|
this.crud.dataSource = response.content
|
||||||
}
|
}
|
||||||
|
|||||||
+31
-15
@@ -1,3 +1,7 @@
|
|||||||
|
<!--Yaml编辑器 基于-->
|
||||||
|
<!--<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>,-->
|
||||||
|
<!--主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>-->
|
||||||
|
<!--</p>-->
|
||||||
<template>
|
<template>
|
||||||
<textarea ref="textarea" />
|
<textarea ref="textarea" />
|
||||||
</template>
|
</template>
|
||||||
@@ -6,18 +10,21 @@
|
|||||||
import CodeMirror from 'codemirror'
|
import CodeMirror from 'codemirror'
|
||||||
import 'codemirror/lib/codemirror.css'
|
import 'codemirror/lib/codemirror.css'
|
||||||
// 替换主题这里需修改名称
|
// 替换主题这里需修改名称
|
||||||
import 'codemirror/theme/idea.css'
|
// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
|
||||||
|
import 'codemirror/theme/darcula.css'
|
||||||
import 'codemirror/mode/yaml/yaml'
|
import 'codemirror/mode/yaml/yaml'
|
||||||
export default {
|
export default {
|
||||||
|
name: 'CuteYamlEditor',
|
||||||
props: {
|
props: {
|
||||||
value: {
|
content: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true,
|
||||||
|
default: ''
|
||||||
},
|
},
|
||||||
height: {
|
height: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
default: '450px'
|
default: '500px'
|
||||||
},
|
},
|
||||||
readOnly: {
|
readOnly: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -31,40 +38,49 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value(value) {
|
content(newVal, oldVal) {
|
||||||
const editorValue = this.editor.getValue()
|
const editorValue = this.editor.getValue()
|
||||||
if (value !== editorValue) {
|
if (newVal !== editorValue) {
|
||||||
this.editor.setValue(this.value)
|
this.editor.setValue(newVal)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
height(newHeight) {
|
height(newVal, oldVal) {
|
||||||
this.editor.setSize('auto', newHeight)
|
this.editor.setSize('auto', newVal)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||||
mode: 'text/x-yaml',
|
mode: 'text/x-yaml',
|
||||||
|
autoRefresh: true,
|
||||||
lineNumbers: true,
|
lineNumbers: true,
|
||||||
lint: true,
|
lint: true,
|
||||||
lineWrapping: true,
|
lineWrapping: true,
|
||||||
tabSize: 2,
|
tabSize: 2,
|
||||||
cursorHeight: 0.9,
|
cursorHeight: 1,
|
||||||
// 替换主题这里需修改名称
|
// 替换主题这里需修改名称
|
||||||
theme: 'idea'
|
theme: 'darcula'
|
||||||
})
|
})
|
||||||
this.editor.setSize('auto', this.height)
|
this.editor.setSize('auto', this.height)
|
||||||
if (this.value) {
|
if (this.content) {
|
||||||
this.editor.setValue(this.value)
|
this.editor.setValue(this.content)
|
||||||
}
|
}
|
||||||
this.editor.setOption('readOnly', this.readOnly)
|
this.editor.setOption('readOnly', this.readOnly)
|
||||||
this.editor.on('change', cm => {
|
this.editor.on('change', cm => {
|
||||||
this.$emit('changed', cm.getValue())
|
this.$emit('change', cm.getValue())
|
||||||
this.$emit('input', cm.getValue())
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getValue() {
|
getValue() {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
return this.editor.getValue()
|
return this.editor.getValue()
|
||||||
|
},
|
||||||
|
setValue(val) {
|
||||||
|
if (this.editor == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.editor.setValue(val)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -141,7 +141,7 @@ export default {
|
|||||||
getDeptDatas(tree, treeNode, resolve) {
|
getDeptDatas(tree, treeNode, resolve) {
|
||||||
const params = {
|
const params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { pid: tree.id }
|
args: { pid: tree.id }
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -184,7 +184,7 @@ export default {
|
|||||||
getDepts() {
|
getDepts() {
|
||||||
crudDept.queryDeptList({
|
crudDept.queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { enabled: true }
|
args: { enabled: true }
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.depts = res.content.map(function(obj) {
|
this.depts = res.content.map(function(obj) {
|
||||||
@@ -200,7 +200,7 @@ export default {
|
|||||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||||
crudDept.queryDeptList({
|
crudDept.queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { enabled: true, pid: parentNode.id }
|
args: { enabled: true, pid: parentNode.id }
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
parentNode.children = res.content.map(function(obj) {
|
parentNode.children = res.content.map(function(obj) {
|
||||||
|
|||||||
@@ -202,7 +202,7 @@ export default {
|
|||||||
queryMenuByArgs(tree, treeNode, resolve) {
|
queryMenuByArgs(tree, treeNode, resolve) {
|
||||||
const params = {
|
const params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { pid: tree.id }
|
args: { pid: tree.id }
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
@@ -286,7 +286,7 @@ export default {
|
|||||||
getDepts() {
|
getDepts() {
|
||||||
queryDeptList({
|
queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { enabled: true }
|
args: { enabled: true }
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.depts = res.content.map(function(obj) {
|
this.depts = res.content.map(function(obj) {
|
||||||
@@ -323,7 +323,7 @@ export default {
|
|||||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||||
queryDeptList({
|
queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { enabled: true, pid: parentNode.id }
|
args: { enabled: true, pid: parentNode.id }
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
parentNode.children = res.content.map(function(obj) {
|
parentNode.children = res.content.map(function(obj) {
|
||||||
|
|||||||
@@ -378,7 +378,7 @@ export default {
|
|||||||
getDepts() {
|
getDepts() {
|
||||||
queryDeptList({
|
queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { enabled: true }
|
args: { enabled: true }
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.depts = res.content.map(function(obj) {
|
this.depts = res.content.map(function(obj) {
|
||||||
@@ -411,7 +411,7 @@ export default {
|
|||||||
if (action === LOAD_CHILDREN_OPTIONS) {
|
if (action === LOAD_CHILDREN_OPTIONS) {
|
||||||
queryDeptList({
|
queryDeptList({
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 999999,
|
size: 9999999,
|
||||||
args: { enabled: true, pid: parentNode.id }
|
args: { enabled: true, pid: parentNode.id }
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
parentNode.children = res.content.map(function(obj) {
|
parentNode.children = res.content.map(function(obj) {
|
||||||
|
|||||||
Reference in New Issue
Block a user