odjbin/sist_adminui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clay commit : bug基本修复完成

Browse Source
This commit is contained in:
clay
2022-10-06 00:53:43 +08:00
parent be112b68d6
commit 7ec353ad6c
11 changed files with 586 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ebts-ui/package.json
View File

@@ -41,7 +41,7 @@
"axios": "0.18.1",
"ckeditor4-vue": "^1.4.0",
"clipboard": "2.0.4",
"codemirror": "^5.59.2",
"codemirror": "^5.65.9",
"core-js": "3.6.5",
"diff-match-patch": "^1.0.5",
"echarts": "4.2.1",

1
ebts-ui/src/components/Editor/index.vue
View File

@@ -55,7 +55,6 @@ export default {
},
data () {
return {
// 默认有这么多菜单，meanArray有值以meanArray为准
defaultMeanus: [
'head',

137
ebts-ui/src/components/Editor/index_back.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<div class="editor" :style="styles" ref="editor"></div>
</template>
<script>
import Editor from 'wangeditor'
export default {
name: "Editor",
props: {
/* 编辑器的内容 */
value: {
type: String,
default: ''
},
/* 高度 */
height: {
type: Number,
default: null,
},
/* 最小高度 */
minHeight: {
type: Number,
default: null,
},
meanArray: {
// 自定义菜单
type: Array,
default: null
}
},
model: {
prop: 'value',
event: 'change'
},
computed: {
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height+50}px`;
}
return style;
},
},
watch: {
value: function (value) {
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value)
}
}
// value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
},
data () {
return {
// 默认有这么多菜单，meanArray有值以meanArray为准
defaultMeanus: [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'justify',
'quote',
'emoticon',
'image',
'video',
'table',
'code',
'splitLine',
'undo',
'redo'
],
editor: ''
}
},
methods: {
init () {
const _this = this
this.editor = new Editor(this.$refs.editor)
this.editor.config.uploadImgAccept = ['doc', 'docx', 'png', 'gif', 'bmp', 'webp']
this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
this.editor.config.height = this.height
this.editor.config.pasteFilterStyle = false
this.editor.config.zIndex = 10
this.setMenus() // 设置菜单
this.editor.config.onchange = (html) => {
_this.$emit('change', html) // 将内容同步到父组件中
}
this.editor.create() // 创建编辑器
},
setMenus () {
// 设置菜单
if (this.meanArray) {
this.editor.config.menus = this.meanArray
} else {
this.editor.config.menus = this.defaultMeanus
}
},
getHtml () {
// 得到文本内容
return this.editor.txt.html()
},
setHtml (txt) {
// 设置富文本里面的值
this.editor.txt.html(txt)
}
},
mounted () {
const that = this
that.$nextTick(function () {
that.init()
})
}
}
</script>
<style scoped lang="scss">
.editor{
z-index: 1!important;
white-space: pre-wrap!important;
line-height: normal !important;
}
</style>

1
ebts-ui/src/views/cas-login.vue
View File

@@ -6,7 +6,6 @@ import {setToken} from "@/utils/auth";
export default {
name: "cas-login",
mounted() {
debugger
let search = window.location.search;
let token = search.slice(search.indexOf("=") + 1)
setToken(token)

4
ebts-ui/src/views/sist/banner/index.vue
View File

@@ -83,6 +83,7 @@
<el-table-column label="标题" align="left" prop="title" />
<el-table-column label="英文标题" align="left" prop="enTitle" />
<el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat"/>
<el-table-column label="排序" align="center" prop="sort"/>
<el-table-column label="轮播类型" align="center" prop="type":formatter="bannerStyleFormat" />
<el-table-column label="图表路径" align="center">
<template slot-scope="scope">
@@ -146,6 +147,9 @@
<el-form-item label="英文标题" prop="enTitle">
<el-input v-model="form.enTitle" placeholder="请输入英文标题" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" placeholder="请输入排序序号" />
</el-form-item>
<el-form-item prop="imgurl">
<UploadFile v-model="form.imgurl"
file-type="image"

45
ebts-ui/src/views/sist/dire/direData.vue
View File

@@ -77,10 +77,10 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="上级" prop="pid">
<treeselect v-model="form.pid" :options="empleeOptions" :normalizer="normalizer" placeholder="请选择父id"/>
<treeselect v-model="form.pid" :options="empleeOptions" :normalizer="normalizer" @select="handleNodeSelect" placeholder="请选择父id"/>
</el-form-item>
<el-form-item label="层" prop="level">
<el-input-number type="number" :min="1" :max="3" v-model="form.level" placeholder="请输入层"/>
<el-input disabled v-model="form.level" placeholder="请输入层"/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" placeholder="排序"/>
@@ -88,9 +88,9 @@
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"/>
</el-form-item>
<el-form-item v-if="form.level === 3" label="跳转链接" prop="link">
<el-form-item v-if="form.level === 3 || form.level === 2" label="跳转链接" prop="link">
<el-input v-model="form.link" placeholder="请输跳转链接">
<template slot="prepend">Http://</template>
<template slot="prepend"></template>
</el-input>
</el-form-item>
</el-form>
@@ -144,6 +144,13 @@ export default {
this.getList()
},
methods: {
handleNodeSelect(data){
let level = data.level + 1
if (level > 3){
this.msgError("最多为3层结构")
}
this.form.level = level
},
/** 查询层级结构列表 */
getList() {
this.loading = true
@@ -162,6 +169,7 @@ export default {
return {
id: node.id,
label: node.name,
level:node.level,
children: node.children
}
},
@@ -170,7 +178,7 @@ export default {
listEmplee({ type: this.direId, siteType: this.siteType }).then(response => {
console.log(response)
this.empleeOptions = []
const data = { id: 0, name: '顶级节点', children: [] }
const data = { id: 0, level:0, name: '顶级节点', children: [] }
if (response.code == 200) {
data.children = this.handleTree(response.data, 'id', 'pid')
}
@@ -267,30 +275,3 @@ export default {
}
}
</script>
<!--<template>-->
<!-- <div>-->
<!-- {{ direId }}-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!-- name: "direData",-->
<!-- data() {-->
<!-- return {-->
<!-- direId: this.$route.params && this.$route.params.direId,-->
<!-- }-->
<!-- },-->
<!-- created() {-->
<!-- let direId = this.$route.params && this.$route.params.direId;-->
<!-- console.log(direId)-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style scoped>-->
<!--</style>-->

208
ebts-ui/src/views/sist/dire/index.vue
View File

@@ -35,7 +35,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['sist:dire:add']"
>新增</el-button>
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -46,7 +47,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['sist:dire:edit']"
>修改</el-button>
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -57,7 +59,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['sist:dire:remove']"
>删除</el-button>
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@@ -67,23 +70,25 @@
size="mini"
@click="handleExport"
v-hasPermi="['sist:dire:export']"
>导出</el-button>
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="层级数据编码" align="center" prop="dictCode" />-->
<el-table-column label="网站类型" align="center" prop="attribute2" :formatter="attribute2Format" />
<el-table-column label="层级数据" align="center" prop="dictLabel" >
<el-table-column type="selection" width="55" align="center"/>
<!-- <el-table-column label="层级数据编码" align="center" prop="dictCode" />-->
<el-table-column label="网站类型" align="center" prop="attribute2" :formatter="attribute2Format"/>
<el-table-column label="层级数据" align="center" prop="dictLabel">
<template slot-scope="scope">
<router-link :to="'/dire/data/' + scope.row.dictValue+'/'+scope.row.cssClass" class="link-type">
<span>{{ scope.row.dictLabel }}</span>
</router-link>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="使用模板" align="center" prop="attribute1" :formatter="templateFormatter"/>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
@@ -98,7 +103,8 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['sist:dire:edit']"
>修改</el-button>
>修改
</el-button>
<el-button
size="mini"
type="text"
@@ -106,7 +112,8 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['sist:dire:remove']"
>删除</el-button>
>删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -123,18 +130,29 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="层级数据" prop="dictLabel">
<el-input v-model="form.dictLabel" placeholder="请输入数据" />
<el-input v-model="form.dictLabel" placeholder="请输入数据"/>
</el-form-item>
<el-form-item label="显示排序" prop="dictSort">
<el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
<el-input-number v-model="form.dictSort" controls-position="right" :min="0"/>
</el-form-item>
<el-form-item label="模板类型" prop="attribute1">
<el-radio-group v-model="form.attribute1">
<el-radio-button
v-for="item in templateOptions"
:key="item.key"
:label="item.key"
>{{ item.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="网站类型" prop="attribute2">
<el-radio-group v-model="form.attribute2">
<el-radio
<el-radio-button
v-for="dict in attribute2Options"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
>{{ dict.dictLabel }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
@@ -150,10 +168,10 @@
</template>
<script>
import { listData, getData, delData, addData, updateData, exportData } from "@/api/sist/dire";
import { listData, getData, delData, addData, updateData, exportData } from '@/api/sist/dire'
export default {
name: "Data",
name: 'Data',
data() {
return {
// 遮罩层
@@ -171,13 +189,23 @@ export default {
// 字典表格数据
dataList: [],
// 默认字典类型
defaultDictType: "",
defaultDictType: '',
// 弹出层标题
title: "",
title: '',
// 是否显示弹出层
open: false,
// 状态数据字典
attribute2Options: [],
templateOptions: [
{
key: '2',
label: '二层模板'
},
{
key: '1',
label: '三层模板'
},
],
// 查询参数
queryParams: {
pageNum: 1,
@@ -190,41 +218,56 @@ export default {
// 表单校验
rules: {
dictLabel: [
{ required: true, message: "层级数据不能为空", trigger: "blur" }
{ required: true, message: '层级数据不能为空', trigger: 'blur' }
],
attribute1: [
{ required: true, message: '模板类型不能为空', trigger: 'blur' }
],
attribute2: [
{ required: true, message: "网站类型不能为空", trigger: "blur" }
{ required: true, message: '网站类型不能为空', trigger: 'blur' }
],
dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
{ required: true, message: '数据顺序不能为空', trigger: 'blur' }
]
}
};
}
},
created() {
this.getList();
this.getDicts("unencrypted_site_type").then(response => {
this.attribute2Options = response.data;
});
this.getList()
this.getDicts('unencrypted_site_type').then(response => {
this.attribute2Options = response.data
})
},
methods: {
/** 模板转换器 */
templateFormatter(row){
let attribute1 = row.attribute1
if (null == attribute1){
return
}
for (let templateOption of this.templateOptions) {
if (templateOption.key == attribute1){
return templateOption.label
}
}
},
/** 查询字典数据列表 */
getList() {
this.loading = true;
this.loading = true
listData(this.queryParams).then(response => {
this.dataList = response.rows;
this.total = response.total;
this.loading = false;
});
this.dataList = response.rows
this.total = response.total
this.loading = false
})
},
// 数据状态字典翻译
attribute2Format(row, column) {
return this.selectDictLabel(this.attribute2Options, row.attribute2);
return this.selectDictLabel(this.attribute2Options, row.attribute2)
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.open = false
this.reset()
},
// 表单重置
reset() {
@@ -233,94 +276,99 @@ export default {
dictLabel: undefined,
dictValue: undefined,
dictSort: 0,
status: "0",
attribute2: "1",
status: '0',
attribute2: '1',
remark: undefined
};
this.resetForm("form");
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.dictType = this.defaultDictType;
this.handleQuery();
this.resetForm('queryForm')
this.queryParams.dictType = this.defaultDictType
this.handleQuery()
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加层级数据";
this.form.dictType = this.queryParams.dictType;
this.reset()
this.open = true
this.title = '添加层级数据'
this.form.dictType = this.queryParams.dictType
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.dictCode)
this.single = selection.length!=1
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.reset()
const dictCode = row.dictCode || this.ids
getData(dictCode).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改层级数据";
});
this.form = response.data
if (this.form.attribute2 == 1) {
this.form.attribute2 = '1'
} else {
this.form.attribute2 = '2'
}
this.open = true
this.title = '修改层级数据'
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
this.$refs['form'].validate(valid => {
if (valid) {
this.form.dictType = 'dire_type'
if (this.form.dictCode != undefined) {
updateData(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
this.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addData(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
this.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
});
})
},
/** 删除按钮操作 */
handleDelete(row) {
const dictCodes = row.dictCode || this.ids;
this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
const dictCodes = row.dictCode || this.ids
this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return delData(dictCodes);
return delData(dictCodes)
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
this.getList()
this.msgSuccess('删除成功')
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
const queryParams = this.queryParams
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
return exportData(queryParams);
return exportData(queryParams)
}).then(response => {
this.download(response.msg);
this.download(response.msg)
})
}
}
};
}
</script>

49
ebts-ui/src/views/sist/navigation/index.vue
View File

@@ -137,7 +137,7 @@
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="缩略图" prop="isThumbnail" v-show="articleSelShow">
<el-form-item label="缩略图" prop="isThumbnail" v-show="isThumbnailShow">
<el-radio-group v-model="form.isThumbnail">
<el-radio-button
v-for="dict in thumbnailOptions"
@@ -147,6 +147,16 @@
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="模板" prop="isSimple" v-show="isThumbnailShow">
<el-radio-group v-model="form.isSimple">
<el-radio-button
v-for="dict in simpleOptions"
:key="dict.key"
:label="dict.key"
>{{ dict.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="内容类型" prop="refId" v-show="articleSelShow">-->
<!-- <el-select v-model="form.refId" placeholder="请选择内容类型" clearable :style="{width: '100%'}">-->
<!-- <el-option-->
@@ -192,6 +202,9 @@
</div>
</el-dialog>
<el-dialog title="编辑详情" :visible="detailsShow" width="1100px" :close-on-click-modal="false" @close="detailsClose()"
append-to-body
>
@@ -207,7 +220,9 @@
</el-row>
<el-row>
<el-col :offset="1" :span="22">
<Editor v-model="formData.content" :height="500"/>
<Editor ref="editor" v-model="formData.content" :height="500"/>
<!-- <CodeEdit ref="codeEdit" v-model="formData.content" :height="500"/>-->
<!-- <CustomEditor v-model="formData.content" :height="500"/>-->
</el-col>
</el-row>
<el-row>
@@ -235,7 +250,8 @@ import {
} from '@/api/sist/navigation'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Editor from '@/components/Editor'
import Editor from '@/views/utils/Editor'
import CodeEdit from '@/views/utils/CodeEdit'
import UploadFile from '@/views/utils/uploadFile'
import { getArticleNav } from '../../../api/sist/article'
@@ -243,6 +259,7 @@ export default {
name: 'Navigation',
components: {
Treeselect,
CodeEdit,
Editor,
UploadFile
},
@@ -258,6 +275,7 @@ export default {
// 显示搜索条件
showSearch: true,
articleSelShow: false,
isThumbnailShow:false,
empleeSelShow: false,
imageShow: false,
// 导航表格数据
@@ -272,6 +290,16 @@ export default {
label: '有'
}
],
simpleOptions:[
{
key: 0,
label: '正常列表'
},
{
key: 1,
label: '简单列表'
}
],
// 导航树选项
navigationList: [],
articleTypeOptions: [],
@@ -408,6 +436,7 @@ export default {
},
// 表单重置
reset() {
this.isThumbnailShow = false
this.articleSelShow = false
this.imageShow = false
this.empleeSelShow = false
@@ -455,6 +484,11 @@ export default {
this.formData = res.data
})
},
code(){
let html = this.$refs.editor.getHtml()
this.$refs.editor.setHtml(html)
console.log(this.$refs.editor.getHtml())
},
save() {
updateDetails(this.formData).then(res => {
this.msgSuccess('修改成功')
@@ -468,7 +502,8 @@ export default {
// }
this.articleTypeOptions = []
this.direTypeOptions = []
if (type == 2) {
if (type == "2") {
this.isThumbnailShow = true
this.articleSelShow = true
this.empleeSelShow = false
if (this.form.sitetype == 1) {
@@ -476,9 +511,10 @@ export default {
} else if (this.form.sitetype == 2) {
this.articleTypeOptions = this.labArticleTypeOption
}
} else if (type == 3) {
} else if (type == "3") {
this.articleSelShow = false
this.empleeSelShow = true
this.isThumbnailShow = false
if (this.form.sitetype == 1) {
this.direTypeOptions = this.sistDireTypeOptions
} else if (this.form.sitetype == 2) {
@@ -489,7 +525,7 @@ export default {
this.empleeSelShow = false
}
if (this.form.type == 0) {
if (this.form.type == "0") {
this.imageShow = false
} else {
this.imageShow = true
@@ -529,6 +565,7 @@ export default {
} else {
this.imageShow = true
}
this.navigationTypeChang(this.form.type)
this.open = true
this.title = '修改导航'
})

122
ebts-ui/src/views/utils/CodeEdit.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<div class="in-coder-panel">
<textarea ref="textarea"></textarea>
</div>
</template>
<script>
// 引入全局实例
import _CodeMirror from 'codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/cobalt.css'
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/vue/vue.js'
// 尝试获取全局实例
const CodeMirror = window.CodeMirror || _CodeMirror
export default {
name: 'codeEdit.vue',
props: {
// 外部传入的内容，用于实现双向绑定
value: String,
// 外部传入的语法类型
language: {
type: String,
default: null
}
},
data() {
return {
// 内部真实的内容
code: this.value,
// 默认的语法类型
mode: 'javascript',
// 编辑器实例
coder: null,
// 默认配置
options: {
// 缩进格式
tabSize: 2,
// 主题，对应主题库 JS 需要提前引入
theme: 'cobalt',
// 显示行号
lineNumbers: true,
line: true
},
// 支持切换的语法高亮类型，对应 JS 已经提前引入
// 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
}
},
watch : {
value(val){
this.code = val
}
},
created(){
this._initialize()
},
// mounted() {
// // 初始化
// this._initialize()
// },
methods: {
// 初始化
_initialize() {
console.log(this.value)
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)
// 编辑器赋值
this.coder.setValue(this.value || this.code)
// 支持双向绑定
this.coder.on('change', (coder) => {
this.code = coder.getValue()
if (this.$emit) {
this.$emit('input', this.code)
}
})
},
}
}
</script>
<style lang="scss">
.in-coder-panel {
flex-grow: 1;
display: flex;
position: relative;
.CodeMirror {
flex-grow: 1;
z-index: 1;
.CodeMirror-code {
line-height: 19px;
.code-mode-select {
position: absolute;
z-index: 2;
righ: 10px;
top: 10px;
max-width: 130px;
}
}
}
}
</style>

8
ebts-ui/src/views/utils/Editor.vue
View File

@@ -40,7 +40,7 @@ export default {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
style.height = `${this.height+50}px`;
}
return style;
},
@@ -89,7 +89,11 @@ export default {
init () {
const _this = this
this.editor = new Editor(this.$refs.editor)
this.editor.config.uploadImgAccept = ['doc', 'docx', 'png', 'gif', 'bmp', 'webp']
this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
this.editor.config.height = this.height
this.editor.config.pasteFilterStyle = false
this.editor.config.zIndex = 10
this.setMenus() // 设置菜单
this.editor.config.onchange = (html) => {
_this.$emit('change', html) // 将内容同步到父组件中
@@ -123,9 +127,11 @@ export default {
</script>
<style scoped lang="scss">
.editor{
z-index: 1!important;
white-space: pre-wrap!important;
line-height: normal !important;
}
</style>

131
ebts-ui/src/views/utils/Editor_back.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div class="editor" :style="styles" ref="editor"></div>
</template>
<script>
import Editor from 'wangeditor'
export default {
name: "Editor",
props: {
/* 编辑器的内容 */
value: {
type: String,
default: ''
},
/* 高度 */
height: {
type: Number,
default: null,
},
/* 最小高度 */
minHeight: {
type: Number,
default: null,
},
meanArray: {
// 自定义菜单
type: Array,
default: null
}
},
model: {
prop: 'value',
event: 'change'
},
computed: {
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
},
},
watch: {
value: function (value) {
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value)
}
}
// value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
},
data () {
return {
// 默认有这么多菜单，meanArray有值以meanArray为准
defaultMeanus: [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'justify',
'quote',
'emoticon',
'image',
'video',
'table',
'code',
'splitLine',
'undo',
'redo'
],
editor: ''
}
},
methods: {
init () {
const _this = this
this.editor = new Editor(this.$refs.editor)
this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
this.setMenus() // 设置菜单
this.editor.config.onchange = (html) => {
_this.$emit('change', html) // 将内容同步到父组件中
}
this.editor.create() // 创建编辑器
},
setMenus () {
// 设置菜单
if (this.meanArray) {
this.editor.config.menus = this.meanArray
} else {
this.editor.config.menus = this.defaultMeanus
}
},
getHtml () {
// 得到文本内容
return this.editor.txt.html()
},
setHtml (txt) {
// 设置富文本里面的值
this.editor.txt.html(txt)
}
},
mounted () {
const that = this
that.$nextTick(function () {
that.init()
})
}
}
</script>
<style scoped lang="scss">
.editor{
z-index: 1!important;
white-space: pre-wrap!important;
line-height: normal !important;
}
</style>