Skip to content

O
on-site-service-admin-view
Commit 507e680e authored by shangtx's avatar shangtx
Browse files
Options

fix: 富文本组件升级，字体问题

parent c7afe541
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1128 additions and 265 deletions
package-lock.json
View file @ 507e680e
This diff is collapsed.
package.json
View file @ 507e680e
......@@ -15,6 +15,8 @@
"@antv/g2": "4.2.4",
"@babel/polyfill": "7.0.0",
"@babel/runtime": "7.2.0",
"@wangeditor/editor": "^5.1.14",
"@wangeditor/editor-for-vue": "^1.0.2",
"ant-design-vue": "1.7.8",
"axios": "0.18.0",
"dayjs": "1.7.7",
......@@ -25,11 +27,10 @@
"lodash.pick": "4.4.0",
"nprogress": "0.2.0",
"simple-lightbox": "^2.1.0",
"vue": "2.6.11",
"vue": "2.6.14",
"vue-ls": "3.2.0",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"wangeditor": "^4.7.5"
"vuex": "3.0.1"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "7.2.0",
......@@ -42,7 +43,7 @@
"eslint-plugin-vue": "6.2.2",
"less": "3.8.1",
"less-loader": "4.1.0",
"vue-template-compiler": "2.6.11"
"vue-template-compiler": "2.6.14"
},
"postcss": {
"plugins": {
......
src/components/richtext/richtext-editor.vue
View file @ 507e680e
<template>
<!-- <a-spin :spinning="loading"> -->
<a-spin :spinning="loading">
<div class="wangeditor-atkj-wrapper">
<div id="wangeditor-toolbar-container"></div>
<div
id="wangeditor-editor-container"
:style="{ height: `${height}px` }"
></div>
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
:style="`height: ${height}px; overflow-y: auto`"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
<!-- </a-spin> -->
</a-spin>
</template>
<script>
// 引入 wangEditor
import { createEditor, createToolbar } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
name: 'RichTextEditor',
components: { Editor, Toolbar },
props: {
height: {
type: Number,
......@@ -35,80 +43,75 @@ export default {
data() {
return {
editor: null,
toolbar: null,
loading: false
loading: false,
html: '<p><br></p>',
editorConfig: {
MENU_CONF: {
uploadImage: {
server: `${process.env.VUE_APP_URL}upload?fileType=IMG`,
timeout: 5000,
fieldName: 'files',
headers: { Authorization: this.getToken() },
customInsert: function (result, insertImgFn) {
insertImgFn(result.data.urls[0])
}
},
uploadVideo: {
server: `${process.env.VUE_APP_URL}upload?fileType=VIDEO`,
timeout: 5000,
fieldName: 'files',
headers: { Authorization: this.getToken() },
onBeforeUpload() {
this.loading = true
},
onFailed() {
this.loading = false
},
onError() {
this.loading = false
},
customInsert(res, insertFn) {
if (res.code == 200) {
insertFn(res.data.urls[0])
} else {
this.$message.error('上传失败')
this.loading = false
}
}
}
}
},
toolbarConfig: {},
mode: 'default'
}
},
beforeDestroy() {
this.editor.destroy()
this.editor = null
},
mounted() {
const editorConfig = {
MENU_CONF: {}
}
// const token = sessionStorage.getItem('Access-Token')
// 上传图片设置
// editorConfig.MENU_CONF['uploadImage'] = {
// server: `${process.env.VUE_APP_URL}upload?fileType=IMG`,
// timeout: 5000,
// fieldName: 'files',
// headers: { Authorization: token },
// customInsert: function (result, insertImgFn) {
// insertImgFn(result.data.urls[0])
// }
// }
// editorConfig.MENU_CONF['uploadVideo'] = {
// server: `${process.env.VUE_APP_URL}upload?fileType=VIDEO`,
// timeout: 5000,
// fieldName: 'files',
// headers: { Authorization: token },
// onBeforeUpload() {
// this.loading = true
// },
// onFailed() {
// this.loading = false
// },
// onError() {
// this.loading = false
// },
// customInsert(res, insertFn) {
// if (res.code == 200) {
// insertFn(res.data.urls[0])
// } else {
// this.$message.error('上传失败')
// this.loading = false
// }
// }
// }
const editor = createEditor({
selector: `#wangeditor-editor-container`,
config: editorConfig,
mode: 'default'
})
createToolbar({
editor: editor,
selector: `#wangeditor-toolbar-container`,
config: {},
mode: 'default'
})
this.editor = editor
const editor = this.editor
if (editor == null) return
editor.destroy()
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
// 设置内容
setContent(v) {
this.editor.setHtml(v)
console.info('got data', v)
this.$nextTick(() => {
this.html = v
})
},
// 获取内容
getContent() {
return this.editor.getHtml()
return this.html
},
// 清空内容
clear() {
this.editor.clear()
this.html = '<p></p>'
},
getToken() {
return sessionStorage.getItem('Access-Token')
}
}
}
......
src/views/serv/ServiceList.vue
View file @ 507e680e
<template>
<a-spin :spinning="loading">
<div class="wangeditor-atkj-wrapper">
<div id="wangeditor-toolbar-container"></div>
<div id="wangeditor-editor-container"></div>
</div>
</a-spin>
<table-template :soul="this">
<template #action="{ record }">
<a-space>
<template v-if="record.type == 1">
<a @click="add(record)">添加服务项</a>
<a @click="editCategory(record)">修改信息</a>
</template>
<template v-if="record.type == 2">
<a @click="edit(record)">修改信息</a>
</template>
</a-space>
</template>
<template #enable="{ record, index }">
<a-switch
v-if="hasPerm('SYS0210101.ENABLE') && record.type == 2"
:checked="record.enabled"
checked-children="启用"
un-checked-children="禁用"
:loading="loadingKeys.includes(record.id)"
@click="enableChange(record, index)"
/>
</template>
<template #showInHome="{ record, index }">
<a-switch
v-if="hasPerm('SYS0210101.ENABLE') && record.type == 2"
:checked="record.showInHome"
checked-children="展示"
un-checked-children="隐藏"
:loading="showInHomeLoadingKeys.includes(record.id)"
@click="showInHomeChange(record, index)"
/>
</template>
<template #free>
<SubClassEdit ref="SubClassEdit" :success="reset" />
<CategoryEdit ref="CategoryEdit" :success="reset" />
</template>
</table-template>
</template>
<script>
import { createEditor, createToolbar } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
import { TableTemplate, TableScript, SearchType } from '@/components/table'
import { getCategoryList, saveOrUpdateSubClass } from '@/api/serv'
import SubClassEdit from './SubClassEdit.vue'
import CategoryEdit from './CategoryEdit.vue'
import dayjs from 'dayjs'
const columns = [
{
title: '名称',
dataIndex: 'serviceName'
},
{
title: '排序号',
width: 130,
dataIndex: 'sequence'
},
{
title: '是否启用',
scopedSlots: { customRender: 'enable' },
enum: 'SYS0002',
dataIndex: 'enabled',
filter: { type: SearchType.ENUM }
},
{
title: '首页展示',
scopedSlots: { customRender: 'showInHome' },
enum: 'SYS0002',
dataIndex: 'showInHome',
filter: { type: SearchType.ENUM }
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 200,
sorter: true,
customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
},
{ title: '操作', scopedSlots: { customRender: 'action' }, width: 190 }
]
export default {
name: 'ServiceList',
mixins: [TableScript, {}],
components: { TableTemplate, SubClassEdit, CategoryEdit },
data() {
return {
loading: false
columns,
useYScroll: true,
title: '服务管理',
pagination: false,
codes: [['SYS0002'], []],
loadingKeys: [],
showInHomeLoadingKeys: [],
rowKey: 'key'
}
},
methods: {},
mounted() {
const editorConfig = {
MENU_CONF: {}
}
const token = sessionStorage.getItem('Access-Token')
// 上传图片设置
editorConfig.MENU_CONF['uploadImage'] = {
server: `${process.env.VUE_APP_URL}upload?fileType=IMG`,
timeout: 5000,
fieldName: 'files',
headers: { Authorization: token },
customInsert: function (result, insertImgFn) {
insertImgFn(result.data.urls[0])
methods: {
queryData: getCategoryList,
loadSuccess() {
this.expandedRowKeys = this.dataSource.map((d) => d.id + '')
},
enableChange(record, index) {
if (this.loadingKeys.includes(record.id)) {
return
}
}
editorConfig.MENU_CONF['uploadVideo'] = {
server: `${process.env.VUE_APP_URL}upload?fileType=VIDEO`,
timeout: 5000,
fieldName: 'files',
headers: { Authorization: token },
onBeforeUpload() {
// _this.loading = true
},
onFailed() {
// _this.loading = false
},
onError() {
// _this.loading = false
},
customInsert(res, insertFn) {
if (res.code == 200) {
insertFn(res.data.urls[0])
} else {
this.$message.error('上传失败')
// _this.loading = false
}
this.loadingKeys.push(record.id)
saveOrUpdateSubClass({ id: record.id, enabled: !record.enabled })
.then(({ code }) => {
if (code == 200) {
this.$message.success('保存成功')
const pIndex = this.dataSource.findIndex(
(d) => d.id == record.categoryId
)
this.dataSource[pIndex].children[index].enabled = !record.enabled
}
})
.finally(() => {
this.loadingKeys.splice(this.loadingKeys.indexOf(record.id), 1)
})
},
showInHomeChange(record, index) {
if (this.loadingKeys.includes(record.id)) {
return
}
this.showInHomeLoadingKeys.push(record.id)
saveOrUpdateSubClass({ id: record.id, showInHome: !record.showInHome })
.then(({ code }) => {
if (code == 200) {
this.$message.success('保存成功')
const pIndex = this.dataSource.findIndex(
(d) => d.id == record.categoryId
)
this.dataSource[pIndex].children[index].showInHome =
!record.showInHome
}
})
.finally(() => {
this.showInHomeLoadingKeys.splice(
this.showInHomeLoadingKeys.indexOf(record.id),
1
)
})
},
edit(record) {
const categoryName = this.dataSource.filter(
(d) => d.id == record.categoryId
)[0].serviceName
this.$refs.SubClassEdit.show({
id: record.id,
categoryId: record.categoryId,
categoryName
})
},
add(record) {
this.$refs.SubClassEdit.show({
id: null,
categoryId: record.id,
categoryName: record.serviceName
})
},
editCategory(record) {
this.$refs.CategoryEdit.show(record.id)
}
const editor = createEditor({
selector: `#wangeditor-editor-container`,
config: editorConfig,
mode: 'default'
})
createToolbar({
editor: editor,
selector: `#wangeditor-toolbar-container`,
config: {},
mode: 'default'
})
}
}
</script>
<style lang="less">
.wangeditor-atkj-wrapper {
border: 1px solid rgb(243, 243, 243);
z-index: 100; /* 按需定义 */
#wangeditor-toolbar-container {
border-bottom: 1px solid rgb(235, 235, 235);
}
#wangeditor-editor-container {
height: 800px;
}
}
</style>
</script>
\ No newline at end of file
src/views/system/sysParam/SysParamEdit.vue
View file @ 507e680e
......@@ -19,17 +19,17 @@
/>
</a-col>
<a-col v-if="param.type == 3" :span="24">
<a-form-item :label="param.name" v-bind="formItemLayout">
<a-form-item :label="param.name" >
<RichText ref="RichText" :height="600" />
</a-form-item>
</a-col>
<a-col v-if="param.type == 1" :span="24">
<a-form-item :label="param.name" v-bind="formItemLayout">
<a-form-item :label="param.name" >
<a-input-number style="width: 180px" v-model="value" />
</a-form-item>
</a-col>
<a-col v-if="param.type == 2" :span="24">
<a-form-item :label="param.name" v-bind="formItemLayout">
<a-form-item :label="param.name" >
<a-input v-model="value" />
</a-form-item>
</a-col>
......@@ -65,6 +65,7 @@ export default {
this.visible = true
this.$nextTick(() => {
if (row.type == 3) {
console.info('row value', row.value)
this.$refs.RichText.setContent(row.value)
}
if (row.type == 4) {
......
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