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 @@ ...@@ -15,6 +15,8 @@
"@antv/g2": "4.2.4", "@antv/g2": "4.2.4",
"@babel/polyfill": "7.0.0", "@babel/polyfill": "7.0.0",
"@babel/runtime": "7.2.0", "@babel/runtime": "7.2.0",
"@wangeditor/editor": "^5.1.14",
"@wangeditor/editor-for-vue": "^1.0.2",
"ant-design-vue": "1.7.8", "ant-design-vue": "1.7.8",
"axios": "0.18.0", "axios": "0.18.0",
"dayjs": "1.7.7", "dayjs": "1.7.7",
...@@ -25,11 +27,10 @@ ...@@ -25,11 +27,10 @@
"lodash.pick": "4.4.0", "lodash.pick": "4.4.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"simple-lightbox": "^2.1.0", "simple-lightbox": "^2.1.0",
"vue": "2.6.11", "vue": "2.6.14",
"vue-ls": "3.2.0", "vue-ls": "3.2.0",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vuex": "3.0.1", "vuex": "3.0.1"
"wangeditor": "^4.7.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-transform-runtime": "7.2.0", "@babel/plugin-transform-runtime": "7.2.0",
...@@ -42,7 +43,7 @@ ...@@ -42,7 +43,7 @@
"eslint-plugin-vue": "6.2.2", "eslint-plugin-vue": "6.2.2",
"less": "3.8.1", "less": "3.8.1",
"less-loader": "4.1.0", "less-loader": "4.1.0",
"vue-template-compiler": "2.6.11" "vue-template-compiler": "2.6.14"
}, },
"postcss": { "postcss": {
"plugins": { "plugins": {
......
src/components/richtext/richtext-editor.vue
View file @ 507e680e
<template> <template>
<!-- <a-spin :spinning="loading"> --> <a-spin :spinning="loading">
<div class="wangeditor-atkj-wrapper"> <div class="wangeditor-atkj-wrapper">
<div id="wangeditor-toolbar-container"></div> <Toolbar
<div style="border-bottom: 1px solid #ccc"
id="wangeditor-editor-container" :editor="editor"
:style="{ height: `${height}px` }" :defaultConfig="toolbarConfig"
></div> :mode="mode"
/>
<Editor
:style="`height: ${height}px; overflow-y: auto`"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div> </div>
<!-- </a-spin> --> </a-spin>
</template> </template>
<script> <script>
// 引入 wangEditor // 引入 wangEditor
import { createEditor, createToolbar } from '@wangeditor/editor' import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' import '@wangeditor/editor/dist/css/style.css'
export default { export default {
name: 'RichTextEditor', name: 'RichTextEditor',
components: { Editor, Toolbar },
props: { props: {
height: { height: {
type: Number, type: Number,
...@@ -35,80 +43,75 @@ export default { ...@@ -35,80 +43,75 @@ export default {
data() { data() {
return { return {
editor: null, 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() { beforeDestroy() {
this.editor.destroy() const editor = this.editor
this.editor = null if (editor == null) return
}, editor.destroy()
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
}, },
methods: { methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
// 设置内容 // 设置内容
setContent(v) { setContent(v) {
this.editor.setHtml(v) console.info('got data', v)
this.$nextTick(() => {
this.html = v
})
}, },
// 获取内容 // 获取内容
getContent() { getContent() {
return this.editor.getHtml() return this.html
}, },
// 清空内容 // 清空内容
clear() { clear() {
this.editor.clear() this.html = '<p></p>'
},
getToken() {
return sessionStorage.getItem('Access-Token')
} }
} }
} }
......
src/views/serv/ServiceList.vue
View file @ 507e680e
<template> <template>
<a-spin :spinning="loading"> <table-template :soul="this">
<div class="wangeditor-atkj-wrapper"> <template #action="{ record }">
<div id="wangeditor-toolbar-container"></div> <a-space>
<div id="wangeditor-editor-container"></div> <template v-if="record.type == 1">
</div> <a @click="add(record)">添加服务项</a>
</a-spin> <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> </template>
<script> <script>
import { createEditor, createToolbar } from '@wangeditor/editor' import { TableTemplate, TableScript, SearchType } from '@/components/table'
import '@wangeditor/editor/dist/css/style.css' 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 { export default {
name: 'ServiceList', name: 'ServiceList',
mixins: [TableScript, {}],
components: { TableTemplate, SubClassEdit, CategoryEdit },
data() { data() {
return { return {
loading: false columns,
useYScroll: true,
title: '服务管理',
pagination: false,
codes: [['SYS0002'], []],
loadingKeys: [],
showInHomeLoadingKeys: [],
rowKey: 'key'
} }
}, },
methods: {}, methods: {
mounted() { queryData: getCategoryList,
const editorConfig = { loadSuccess() {
MENU_CONF: {} this.expandedRowKeys = this.dataSource.map((d) => d.id + '')
} },
const token = sessionStorage.getItem('Access-Token') enableChange(record, index) {
// 上传图片设置 if (this.loadingKeys.includes(record.id)) {
editorConfig.MENU_CONF['uploadImage'] = { return
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])
} }
} this.loadingKeys.push(record.id)
saveOrUpdateSubClass({ id: record.id, enabled: !record.enabled })
editorConfig.MENU_CONF['uploadVideo'] = { .then(({ code }) => {
server: `${process.env.VUE_APP_URL}upload?fileType=VIDEO`, if (code == 200) {
timeout: 5000, this.$message.success('保存成功')
fieldName: 'files', const pIndex = this.dataSource.findIndex(
headers: { Authorization: token }, (d) => d.id == record.categoryId
onBeforeUpload() { )
// _this.loading = true this.dataSource[pIndex].children[index].enabled = !record.enabled
}, }
onFailed() { })
// _this.loading = false .finally(() => {
}, this.loadingKeys.splice(this.loadingKeys.indexOf(record.id), 1)
onError() { })
// _this.loading = false },
}, showInHomeChange(record, index) {
customInsert(res, insertFn) { if (this.loadingKeys.includes(record.id)) {
if (res.code == 200) { return
insertFn(res.data.urls[0])
} else {
this.$message.error('上传失败')
// _this.loading = false
}
} }
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 @@ ...@@ -19,17 +19,17 @@
/> />
</a-col> </a-col>
<a-col v-if="param.type == 3" :span="24"> <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" /> <RichText ref="RichText" :height="600" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-if="param.type == 1" :span="24"> <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-input-number style="width: 180px" v-model="value" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-if="param.type == 2" :span="24"> <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-input v-model="value" />
</a-form-item> </a-form-item>
</a-col> </a-col>
...@@ -65,6 +65,7 @@ export default { ...@@ -65,6 +65,7 @@ export default {
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
if (row.type == 3) { if (row.type == 3) {
console.info('row value', row.value)
this.$refs.RichText.setContent(row.value) this.$refs.RichText.setContent(row.value)
} }
if (row.type == 4) { 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