This commit is contained in:
parent
e0fa309c94
commit
1e88ad422d
|
|
@ -23,6 +23,9 @@
|
|||
"dependencies": {
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"@vueuse/core": "^10.7.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "5.1.10",
|
||||
"@wangeditor/plugin-upload-attachment": "^1.1.0",
|
||||
"axios": "^1.6.7",
|
||||
"clipboardy": "^4.0.0",
|
||||
"crypto-js": "^4.2.0",
|
||||
|
|
@ -38,7 +41,6 @@
|
|||
"vue": "^3.4.19",
|
||||
"vue-i18n": "^9.9.1",
|
||||
"vue-router": "^4.2.5",
|
||||
"wangeditor": "^4.7.15",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,15 @@
|
|||
<script setup>
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { Boot } from '@wangeditor/editor'
|
||||
import attachmentModule from '@wangeditor/plugin-upload-attachment'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
// wangEditor：注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
|
||||
Boot.registerModule(attachmentModule)
|
||||
|
||||
onMounted(() => {
|
||||
settingsStore.changeSetting({ key: 'layout', value: settingsStore.layout })
|
||||
settingsStore.changeSetting({ key: 'theme', value: settingsStore.theme })
|
||||
|
|
|
|||
|
|
@ -1,7 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="editor-wrapper">
|
||||
<!-- 工具栏 -->
|
||||
<el-affix target=".editor-wrapper" :offset="150">
|
||||
<Toolbar
|
||||
id="toolbar-container"
|
||||
:editor="editorRef"
|
||||
:default-config="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
</el-affix>
|
||||
<!-- 编辑器 -->
|
||||
<div :id="editorId"></div>
|
||||
<Editor
|
||||
id="editor-container"
|
||||
v-model="modelValue"
|
||||
:default-config="editorConfig"
|
||||
:mode="mode"
|
||||
@on-change="handleChange"
|
||||
@on-created="handleCreated"
|
||||
/>
|
||||
<!-- 文件管理 -->
|
||||
<el-dialog
|
||||
v-model="fileDialog"
|
||||
|
|
@ -17,248 +33,116 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import E from 'wangeditor'
|
||||
import { randomString } from '@/utils'
|
||||
<script setup>
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { i18nChangeLanguage } from '@wangeditor/editor'
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||
import FileManage from '@/components/FileManage/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'RichEditor',
|
||||
components: { FileManage },
|
||||
model: {
|
||||
prop: 'content',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
id: { type: String, default: 'wangeditor' + randomString() },
|
||||
content: { type: String, default: '' },
|
||||
excludeMenus: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['image', 'video']
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const appStore = useAppStore()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
// 切换语言 - 'en' 或者 'zh-CN'
|
||||
i18nChangeLanguage(appStore.language == 'zh-cn' ? 'zh-CN' : 'en')
|
||||
const modelValue = useVModel(props, 'modelValue', emit)
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef()
|
||||
// 编辑器模式
|
||||
const mode = ref('default')
|
||||
// 工具条配置
|
||||
const toolbarConfig = ref({
|
||||
insertKeys: {
|
||||
index: 24, // 自定义插入的位置
|
||||
keys: ['uploadAttachment'] // “上传附件”菜单
|
||||
}
|
||||
})
|
||||
// 编辑器配置
|
||||
const editorConfig = ref({
|
||||
placeholder: '请输入内容...',
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
// 自定义选择图片
|
||||
customBrowseAndUpload() {
|
||||
fileDialog.value = true
|
||||
fileType.value = 'image'
|
||||
}
|
||||
},
|
||||
zIndex: { type: Number, default: 5000 },
|
||||
height: { type: Number, default: 500 },
|
||||
focus: { type: Boolean, default: false },
|
||||
placeholder: { type: String, default: '请输入内容' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '富文本编辑器',
|
||||
editor: null,
|
||||
editorId: this.id,
|
||||
editorContent: this.content,
|
||||
editorContentNew: '',
|
||||
fileDialog: false,
|
||||
fileTitle: '文件管理',
|
||||
fileType: 'image'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
content(value) {
|
||||
if (value !== this.editor.txt.html()) {
|
||||
this.editor.txt.html(this.content)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.editorCreate()
|
||||
},
|
||||
unmounted() {
|
||||
this.editorDestroy()
|
||||
},
|
||||
methods: {
|
||||
// 编辑器创建
|
||||
editorCreate() {
|
||||
const that = this
|
||||
// 扩展菜单
|
||||
const { BtnMenu } = E
|
||||
|
||||
class upimage extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = E.$(
|
||||
`<div class="w-e-menu" data-title="上传图片"><el-button>图片</el-button></div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
clickHandler() {
|
||||
that.fileType = 'image'
|
||||
that.fileTitle = '上传图片'
|
||||
that.fileDialog = true
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
|
||||
class upvideo extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = E.$(
|
||||
`<div class="w-e-menu" data-title="上传视频"><el-button>视频</el-button></div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
clickHandler() {
|
||||
that.fileType = 'video'
|
||||
that.fileTitle = '上传视频'
|
||||
that.fileDialog = true
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
|
||||
class upaudio extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = E.$(
|
||||
`<div class="w-e-menu" data-title="上传音频"><el-button>音频</el-button></div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
clickHandler() {
|
||||
that.fileType = 'audio'
|
||||
that.fileTitle = '上传音频'
|
||||
that.fileDialog = true
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
|
||||
class upword extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = E.$(
|
||||
`<div class="w-e-menu" data-title="上传文档"><el-button>文档</el-button></div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
clickHandler() {
|
||||
that.fileType = 'word'
|
||||
that.fileTitle = '上传文档'
|
||||
that.fileDialog = true
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
|
||||
class upother extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = E.$(
|
||||
`<div class="w-e-menu" data-title="上传附件"><el-button>附件</el-button></div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
clickHandler() {
|
||||
that.fileType = 'other'
|
||||
that.fileTitle = '上传附件'
|
||||
that.fileDialog = true
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
|
||||
class clear extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = E.$(
|
||||
`<div class="w-e-menu" data-title="清空内容"><el-button>清空</el-button></div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
clickHandler() {
|
||||
that.editor.txt.clear()
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
// 配置
|
||||
that.editor = new E('#' + that.editorId)
|
||||
that.editor.config.excludeMenus = that.excludeMenus
|
||||
that.editor.menus.extend('upimageKey', upimage)
|
||||
that.editor.config.menus = that.editor.config.menus.concat('upimageKey')
|
||||
that.editor.menus.extend('upvideoKey', upvideo)
|
||||
that.editor.config.menus = that.editor.config.menus.concat('upvideoKey')
|
||||
that.editor.menus.extend('upaudioKey', upaudio)
|
||||
that.editor.config.menus = that.editor.config.menus.concat('upaudioKey')
|
||||
that.editor.menus.extend('upwordKey', upword)
|
||||
that.editor.config.menus = that.editor.config.menus.concat('upwordKey')
|
||||
that.editor.menus.extend('upotherKey', upother)
|
||||
that.editor.config.menus = that.editor.config.menus.concat('upotherKey')
|
||||
that.editor.menus.extend('clearKey', clear)
|
||||
that.editor.config.menus = that.editor.config.menus.concat('clearKey')
|
||||
|
||||
that.editor.config.zIndex = that.zIndex
|
||||
that.editor.config.height = that.height
|
||||
that.editor.config.focus = that.focus
|
||||
that.editor.config.placeholder = that.placeholder
|
||||
|
||||
that.editor.config.onchange = (newHtml) => {
|
||||
that.editorContentNew = newHtml
|
||||
this.$emit('change', that.editorContentNew)
|
||||
}
|
||||
|
||||
console.log(that.editor.textElemId)
|
||||
console.log(that.editor.toolbarElemId)
|
||||
|
||||
that.editor.create()
|
||||
that.editor.txt.clear()
|
||||
that.editor.txt.html(that.editorContent)
|
||||
},
|
||||
// 编辑器销毁
|
||||
editorDestroy() {
|
||||
this.editorContent = ''
|
||||
this.editorContentNew = ''
|
||||
if (this.editor) {
|
||||
this.editor.txt.html('')
|
||||
this.editor.destroy()
|
||||
this.editor = null
|
||||
uploadVideo: {
|
||||
// 自定义选择视频
|
||||
customBrowseAndUpload() {
|
||||
fileDialog.value = true
|
||||
fileType.value = 'video'
|
||||
}
|
||||
},
|
||||
// 文件管理
|
||||
fileCancel() {
|
||||
this.fileDialog = false
|
||||
},
|
||||
fileSubmit(filelist, filetype) {
|
||||
this.fileDialog = false
|
||||
this.fileTitle = ''
|
||||
const fileLength = filelist.length
|
||||
if (fileLength) {
|
||||
for (let i = 0; i < fileLength; i++) {
|
||||
if (filetype === 'image') {
|
||||
this.editor.cmd.do(
|
||||
'insertHTML',
|
||||
`<img file-id="${filelist[i]['file_id']}" src="${filelist[i]['file_url']}" style="max-width:50%;"/>`
|
||||
)
|
||||
} else if (filetype === 'video') {
|
||||
this.editor.cmd.do(
|
||||
'insertHTML',
|
||||
`<video width="50%" height="50%" controls>
|
||||
<source file-id="${filelist[i]['file_id']}" src="${filelist[i]['file_url']}" type="video/mp4">
|
||||
<object file-id="${filelist[i]['file_id']}" data="${filelist[i]['file_url']}" width="50%" height="50%">
|
||||
<embed file-id="${filelist[i]['file_id']}" src="${filelist[i]['file_url']}" width="50%" height="50%">
|
||||
</object>
|
||||
</video>`
|
||||
)
|
||||
} else if (filetype === 'audio') {
|
||||
this.editor.cmd.do(
|
||||
'insertHTML',
|
||||
`<audio width="50%" height="50%" controls>
|
||||
<source file-id="${filelist[i]['file_id']}" src="${filelist[i]['file_url']}" type="audio/mp3">
|
||||
<embed file-id="${filelist[i]['file_id']}" src="${filelist[i]['file_url']}" width="50%" height="50%">
|
||||
</audio>`
|
||||
)
|
||||
} else {
|
||||
this.editor.cmd.do(
|
||||
'insertHTML',
|
||||
`<a file-id="${filelist[i]['file_id']}" href="${filelist[i]['file_url']}" download="${filelist[i]['file_url']}" target="_blank">${filelist[i]['file_name']}.${filelist[i]['file_ext']}</a>`
|
||||
)
|
||||
}
|
||||
}
|
||||
uploadAttachment: {
|
||||
// 自定义选择附件
|
||||
customBrowseAndUpload() {
|
||||
fileDialog.value = true
|
||||
fileType.value = 'word'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handleCreated = (editor) => {
|
||||
// 记录 editor 实例，重要！
|
||||
editorRef.value = editor
|
||||
}
|
||||
|
||||
function handleChange(editor) {
|
||||
modelValue.value = editor.getHtml()
|
||||
}
|
||||
|
||||
// 文件管理
|
||||
const fileDialog = ref(false)
|
||||
const fileTitle = ref('文件管理')
|
||||
const fileType = ref('image')
|
||||
function fileCancel() {
|
||||
fileDialog.value = false
|
||||
}
|
||||
function fileSubmit(files) {
|
||||
fileDialog.value = false
|
||||
var htmls = ''
|
||||
const length = files.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (files[i]['file_type'] === 'image') {
|
||||
htmls += `<img file-id="${files[i]['file_id']}" src="${files[i]['file_url']}" style="width:640px;"/>`
|
||||
} else if (files[i]['file_type'] === 'video') {
|
||||
htmls += `<div data-w-e-type="video" data-w-e-is-void><video width="640" height="480" controls>
|
||||
<source file-id="${files[i]['file_id']}" src="${files[i]['file_url']}" type="video/mp4">
|
||||
<object file-id="${files[i]['file_id']}" data="${files[i]['file_url']}">
|
||||
<embed file-id="${files[i]['file_id']}" src="${files[i]['file_url']}" width="640" height="480">
|
||||
</object>
|
||||
</video></div>`
|
||||
} else if (files[i]['file_type'] === 'audio') {
|
||||
htmls += `<div data-w-e-type="audio" data-w-e-is-void data-w-e-is-inline><audio controls>
|
||||
<source file-id="${files[i]['file_id']}" src="${files[i]['file_url']}" type="audio/mp3">
|
||||
<embed file-id="${files[i]['file_id']}" src="${files[i]['file_url']}">
|
||||
</audio></div>`
|
||||
} else {
|
||||
htmls += `<div data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline><a file-id="${files[i]['file_id']}" href="${files[i]['file_url']}" download="${files[i]['file_url']}" target="_blank">${files[i]['file_name']}.${files[i]['file_ext']}</a></div>`
|
||||
}
|
||||
}
|
||||
const editor = editorRef.value
|
||||
editor.dangerouslyInsertHtml(htmls)
|
||||
}
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value
|
||||
if (editor == null) return
|
||||
editor.destroy()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.w-e-toolbar {
|
||||
border: 1px solid var(--el-border-color) !important;
|
||||
background-color: var(--el-bg-color) !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
.w-e-text-container {
|
||||
border: 1px solid var(--el-border-color) !important;
|
||||
background-color: var(--el-bg-color) !important;
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
<style>
|
||||
.editor-wrapper {
|
||||
border: 1px solid #cfd3dc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ const defaultSettings = {
|
|||
sidebarName: true,
|
||||
fixedHeader: true,
|
||||
tagsView: true,
|
||||
layout: 'left',
|
||||
theme: 'light',
|
||||
themeColor: '#409EFF',
|
||||
layout: 'left', // 导航模式：left、top、mix
|
||||
theme: 'light', // 主题：light明亮，dark暗黑
|
||||
themeColor: '#409EFF', // 主题颜色
|
||||
tokenType: 'header', // token方式，header、param
|
||||
tokenName: 'AdminToken', // token名称，前后端必须一致
|
||||
pageLimit: 20, // 分页每页默认数量
|
||||
size: 'default',
|
||||
language: 'zh-cn'
|
||||
size: 'default', // 组件大小：large、default、small
|
||||
language: 'zh-cn' //语言：zh-cn中文，en英文
|
||||
}
|
||||
|
||||
export default defaultSettings
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@ html.dark {
|
|||
--subMenuHover: rgb(0 0 0 / 20%);
|
||||
--subMenuActiveText: var(--el-menu-active-color);
|
||||
|
||||
// wangEditor
|
||||
--w-e-textarea-bg-color: var(--el-bg-color-overlay);
|
||||
--w-e-toolbar-bg-color: var(--el-bg-color-overlay);
|
||||
--w-e-modal-button-bg-color: var(--el-bg-color-overlay);
|
||||
--w-e-toolbar-border-color: var(--el-button-border-color);
|
||||
|
||||
.navbar {
|
||||
background-color: var(--el-bg-color);
|
||||
.setting-container .setting-item:hover {
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@
|
|||
<el-tab-pane label="内容">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor :content="model.content" />
|
||||
<RichEditor v-model="model.content" />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
|
|
|
|||
|
|
@ -332,7 +332,8 @@
|
|||
</el-input>
|
||||
</el-col>
|
||||
<el-col class="line" :span="13">
|
||||
官方域名 在 [ 百度云 > 对象存储 > 发布管理 ] 获取。如：yyladmin.gz.bcebos.com
|
||||
官方域名 在 [ 百度云 > 对象存储 > Bucket列表 > 发布管理 ]
|
||||
获取。如：yyladmin.gz.bcebos.com
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属地域" prop="baidu_endpoint">
|
||||
|
|
@ -502,7 +503,12 @@
|
|||
<el-col :span="11">
|
||||
<el-input v-model="model.image_ext" clearable />
|
||||
</el-col>
|
||||
<el-col class="line" :span="13"> 允许上传的图片后缀，逗号,隔开 </el-col>
|
||||
<el-col class="line" :span="13">
|
||||
<el-tooltip :content="model.image_exts">
|
||||
<svg-icon icon-class="question-filled" />
|
||||
</el-tooltip>
|
||||
允许上传的图片后缀，逗号,隔开
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片大小" prop="image_size">
|
||||
<el-col :span="11">
|
||||
|
|
@ -517,7 +523,12 @@
|
|||
<el-col :span="11">
|
||||
<el-input v-model="model.video_ext" clearable />
|
||||
</el-col>
|
||||
<el-col class="line" :span="13"> 允许上传的视频后缀，逗号,隔开 </el-col>
|
||||
<el-col class="line" :span="13">
|
||||
<el-tooltip :content="model.video_exts">
|
||||
<svg-icon icon-class="question-filled" />
|
||||
</el-tooltip>
|
||||
允许上传的视频后缀，逗号,隔开
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频大小" prop="video_size">
|
||||
<el-col :span="11">
|
||||
|
|
@ -532,7 +543,12 @@
|
|||
<el-col :span="11">
|
||||
<el-input v-model="model.audio_ext" clearable />
|
||||
</el-col>
|
||||
<el-col class="line" :span="13"> 允许上传的音频后缀，逗号,隔开 </el-col>
|
||||
<el-col class="line" :span="13">
|
||||
<el-tooltip :content="model.audio_exts">
|
||||
<svg-icon icon-class="question-filled" />
|
||||
</el-tooltip>
|
||||
允许上传的音频后缀，逗号,隔开
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="音频大小" prop="audio_size">
|
||||
<el-col :span="11">
|
||||
|
|
@ -547,7 +563,12 @@
|
|||
<el-col :span="11">
|
||||
<el-input v-model="model.word_ext" clearable />
|
||||
</el-col>
|
||||
<el-col class="line" :span="13"> 允许上传的文档后缀，逗号,隔开 </el-col>
|
||||
<el-col class="line" :span="13">
|
||||
<el-tooltip :content="model.word_exts">
|
||||
<svg-icon icon-class="question-filled" />
|
||||
</el-tooltip>
|
||||
允许上传的文档后缀，逗号,隔开
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="文档大小" prop="word_size">
|
||||
<el-col :span="11">
|
||||
|
|
@ -562,7 +583,12 @@
|
|||
<el-col :span="11">
|
||||
<el-input v-model="model.other_ext" clearable />
|
||||
</el-col>
|
||||
<el-col class="line" :span="13"> 允许上传的其它文件后缀，逗号,隔开 </el-col>
|
||||
<el-col class="line" :span="13">
|
||||
<el-tooltip :content="model.other_exts">
|
||||
<svg-icon icon-class="question-filled" />
|
||||
</el-tooltip>
|
||||
允许上传的其它文件后缀，逗号,隔开
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="其它大小" prop="other_size">
|
||||
<el-col :span="11">
|
||||
|
|
@ -640,14 +666,19 @@ export default {
|
|||
aws_region: '',
|
||||
aws_domain: '',
|
||||
image_ext: '',
|
||||
image_exts: '',
|
||||
image_size: 0,
|
||||
video_ext: '',
|
||||
video_exts: '',
|
||||
video_size: 0,
|
||||
audio_ext: '',
|
||||
audio_exts: '',
|
||||
audio_size: 0,
|
||||
word_ext: '',
|
||||
word_exts: '',
|
||||
word_size: 0,
|
||||
other_ext: '',
|
||||
other_exts: '',
|
||||
other_size: 0
|
||||
},
|
||||
rules: {
|
||||
|
|
|
|||
|
|
@ -149,49 +149,57 @@
|
|||
top="5vh"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-scrollbar native :height="height - 30">
|
||||
<el-form ref="ref" :rules="rules" :model="model" label-width="100px">
|
||||
<el-form-item label="标识" prop="unique">
|
||||
<el-input v-model="model.unique" placeholder="请输入标识（唯一）" clearable>
|
||||
<template #append>
|
||||
<el-button title="复制" @click="copy(model.unique)">
|
||||
<svg-icon icon-class="copy-document" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="model.name" placeholder="请输入名称" clearable>
|
||||
<template #append>
|
||||
<el-button title="复制" @click="copy(model.name)">
|
||||
<svg-icon icon-class="copy-document" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input v-model="model.desc" type="textarea" autosize placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="model.remark" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="model.sort" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor :content="model.content" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
|
||||
<el-input v-model="model.create_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
|
||||
<el-input v-model="model.update_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
|
||||
<el-input v-model="model.delete_time" disabled />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<el-form ref="ref" :rules="rules" :model="model" label-width="100px">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="信息">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="标识" prop="unique">
|
||||
<el-input v-model="model.unique" placeholder="请输入标识（唯一）" clearable>
|
||||
<template #append>
|
||||
<el-button title="复制" @click="copy(model.unique)">
|
||||
<svg-icon icon-class="copy-document" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="model.name" placeholder="请输入名称" clearable>
|
||||
<template #append>
|
||||
<el-button title="复制" @click="copy(model.name)">
|
||||
<svg-icon icon-class="copy-document" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input v-model="model.desc" type="textarea" autosize placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="model.remark" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="model.sort" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
|
||||
<el-input v-model="model.create_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
|
||||
<el-input v-model="model.update_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
|
||||
<el-input v-model="model.delete_time" disabled />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="内容">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor v-model="model.content" />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :loading="loading" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submit">提交</el-button>
|
||||
|
|
@ -316,6 +324,8 @@ export default {
|
|||
this.loading = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('请完善必填项（带红色星号*）')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -177,66 +177,84 @@
|
|||
:before-close="cancel"
|
||||
top="5vh"
|
||||
>
|
||||
<el-scrollbar native :height="height - 30">
|
||||
<el-form ref="ref" :model="model" :rules="rules" label-width="100px">
|
||||
<el-form-item label="图片" prop="image_id">
|
||||
<FileImage v-model="model.image_id" :file-url="model.image_url" :height="100" upload />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="model.type">
|
||||
<el-option v-for="(item, index) in types" :key="index" :value="index" :label="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-col :span="18">
|
||||
<el-input v-model="model.title" placeholder="请输入标题" clearable />
|
||||
</el-col>
|
||||
<el-col :span="3" class="text-center">标题颜色</el-col>
|
||||
<el-col :span="3">
|
||||
<el-color-picker v-model="model.title_color" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input v-model="model.desc" type="textarea" autosize placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="start_time">
|
||||
<el-date-picker
|
||||
v-model="model.start_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="开始时间"
|
||||
:default-time="new Date(2024, 1, 1, 0, 0, 0)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="end_time">
|
||||
<el-date-picker
|
||||
v-model="model.end_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="结束时间"
|
||||
:default-time="new Date(2024, 1, 1, 23, 59, 59)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="model.remark" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="model.sort" type="number" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor :content="model.content" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
|
||||
<el-input v-model="model.create_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
|
||||
<el-input v-model="model.update_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
|
||||
<el-input v-model="model.delete_time" disabled />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<el-form ref="ref" :model="model" :rules="rules" label-width="100px">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="信息">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="图片" prop="image_id">
|
||||
<FileImage
|
||||
v-model="model.image_id"
|
||||
:file-url="model.image_url"
|
||||
:height="100"
|
||||
upload
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="model.type">
|
||||
<el-option
|
||||
v-for="(item, index) in types"
|
||||
:key="index"
|
||||
:value="index"
|
||||
:label="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-col :span="18">
|
||||
<el-input v-model="model.title" placeholder="请输入标题" clearable />
|
||||
</el-col>
|
||||
<el-col :span="3" class="text-center">标题颜色</el-col>
|
||||
<el-col :span="3">
|
||||
<el-color-picker v-model="model.title_color" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-input v-model="model.desc" type="textarea" autosize placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="start_time">
|
||||
<el-date-picker
|
||||
v-model="model.start_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="开始时间"
|
||||
:default-time="new Date(2024, 1, 1, 0, 0, 0)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="end_time">
|
||||
<el-date-picker
|
||||
v-model="model.end_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="结束时间"
|
||||
:default-time="new Date(2024, 1, 1, 23, 59, 59)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="model.remark" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="model.sort" type="number" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
|
||||
<el-input v-model="model.create_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
|
||||
<el-input v-model="model.update_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
|
||||
<el-input v-model="model.delete_time" disabled />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="内容">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor v-model="model.content" />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :loading="loading" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submit">提交</el-button>
|
||||
|
|
|
|||
|
|
@ -162,61 +162,74 @@
|
|||
:before-close="cancel"
|
||||
top="5vh"
|
||||
>
|
||||
<el-scrollbar native :height="height - 30">
|
||||
<el-form ref="ref" :model="model" :rules="rules" label-width="100px">
|
||||
<el-form-item label="图片" prop="image_id">
|
||||
<FileImage v-model="model.image_id" :file-url="model.image_url" :height="100" upload />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-col :span="18">
|
||||
<el-input v-model="model.title" placeholder="请输入标题" clearable />
|
||||
</el-col>
|
||||
<el-col :span="3" style="text-align: center">标题颜色</el-col>
|
||||
<el-col :span="3">
|
||||
<el-color-picker v-model="model.title_color" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="desc">
|
||||
<el-input v-model="model.desc" type="textarea" autosize placeholder="请输入简介" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="start_time">
|
||||
<el-date-picker
|
||||
v-model="model.start_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="new Date(2024, 1, 1, 0, 0, 0)"
|
||||
placeholder="开始时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="end_time">
|
||||
<el-date-picker
|
||||
v-model="model.end_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="new Date(2024, 1, 1, 23, 59, 59)"
|
||||
placeholder="结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="model.remark" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="model.sort" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor :content="model.content" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
|
||||
<el-input v-model="model.create_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
|
||||
<el-input v-model="model.update_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
|
||||
<el-input v-model="model.delete_time" disabled />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<el-form ref="ref" :model="model" :rules="rules" label-width="100px">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="信息">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="图片" prop="image_id">
|
||||
<FileImage
|
||||
v-model="model.image_id"
|
||||
:file-url="model.image_url"
|
||||
:height="100"
|
||||
upload
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-col :span="18">
|
||||
<el-input v-model="model.title" placeholder="请输入标题" clearable />
|
||||
</el-col>
|
||||
<el-col :span="3" style="text-align: center">标题颜色</el-col>
|
||||
<el-col :span="3">
|
||||
<el-color-picker v-model="model.title_color" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="desc">
|
||||
<el-input v-model="model.desc" type="textarea" autosize placeholder="请输入简介" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="start_time">
|
||||
<el-date-picker
|
||||
v-model="model.start_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="new Date(2024, 1, 1, 0, 0, 0)"
|
||||
placeholder="开始时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="end_time">
|
||||
<el-date-picker
|
||||
v-model="model.end_time"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="new Date(2024, 1, 1, 23, 59, 59)"
|
||||
placeholder="结束时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="model.remark" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="model.sort" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="添加时间" prop="create_time">
|
||||
<el-input v-model="model.create_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model[idkey]" label="修改时间" prop="update_time">
|
||||
<el-input v-model="model.update_time" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="model.delete_time" label="删除时间" prop="delete_time">
|
||||
<el-input v-model="model.delete_time" disabled />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="内容">
|
||||
<el-scrollbar native :height="height - 80">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<RichEditor v-model="model.content" />
|
||||
</el-form-item>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :loading="loading" @click="cancel">取消</el-button>
|
||||
<el-button :loading="loading" type="primary" @click="submit">提交</el-button>
|
||||
|
|
@ -348,6 +361,8 @@ export default {
|
|||
this.loading = false
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('请完善必填项（带红色星号*）')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ export default defineConfig(({ mode }) => {
|
|||
'echarts/charts',
|
||||
'echarts/components',
|
||||
'echarts/renderers',
|
||||
'element-plus/es/components/affix/style/css',
|
||||
'element-plus/es/components/alert/style/css',
|
||||
'element-plus/es/components/avatar/style/css',
|
||||
'element-plus/es/components/breadcrumb-item/style/css',
|
||||
|
|
|
|||
Loading…
Reference in New Issue