0.0
This commit is contained in:
parent
8b16d07971
commit
a0070aa65d
2
auto-imports.d.ts
vendored
2
auto-imports.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
// Generated by 'unplugin-auto-import'
|
||||
export {}
|
||||
declare global {
|
||||
const layer: typeof import('@layui/layer-vue')['layer']
|
||||
|
||||
}
|
||||
|
||||
1704
package-lock.json
generated
1704
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,8 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@layui/layui-vue": "2.21.1",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"axios": "^1.5.1",
|
||||
"echarts": "^5.4.3",
|
||||
"js-base64": "^3.7.2",
|
||||
@ -20,6 +19,7 @@
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.0",
|
||||
"quill": "^2.0.3",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue3-puzzle-vcode": "^1.1.7"
|
||||
|
||||
@ -6,16 +6,21 @@ import router from '../router'
|
||||
type TAxiosOption = {
|
||||
timeout: number;
|
||||
baseURL: string;
|
||||
headers: object;
|
||||
}
|
||||
//记得修改上传路径/api/common/upload
|
||||
//const baseURL = 'http://yfyd.hschool.com.cn' // 设置基础URL前缀
|
||||
const baseURL="/api";
|
||||
|
||||
|
||||
// 导出baseURL，使其可以在其他页面使用
|
||||
export { baseURL };
|
||||
|
||||
const config: TAxiosOption = {
|
||||
timeout: 5000,
|
||||
baseURL: baseURL,
|
||||
headers:{
|
||||
'content-type':'application/x-www-form-urlencoded'
|
||||
}
|
||||
}
|
||||
|
||||
class Http {
|
||||
|
||||
@ -342,6 +342,11 @@ export function noticeDelete(data: any) {
|
||||
return Http.post('/api/backend/public_announcement/delete', data)
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
export function uploadImage(data: any) {
|
||||
return Http.post('/api/common/upload', data)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
207
src/library/customEditor.vue
Normal file
207
src/library/customEditor.vue
Normal file
@ -0,0 +1,207 @@
|
||||
|
||||
<template>
|
||||
<div class="editor">
|
||||
<!-- 这两个都是获取值的必要条件： v-model:content contentType="html" -->
|
||||
<quill-editor
|
||||
ref="editorRef"
|
||||
v-model:content="content"
|
||||
:options="options"
|
||||
contentType="html"
|
||||
></quill-editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 引入富文本编辑器与样式
|
||||
import { Quill, QuillEditor } from '@vueup/vue-quill'
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||
|
||||
// 引入缩放图片的插件
|
||||
import BlotFormatter from 'quill-blot-formatter'
|
||||
Quill.register('modules/blotFormatter', BlotFormatter)
|
||||
|
||||
|
||||
const content = ref('')
|
||||
const editorRef = ref(null)
|
||||
// 富文本配置
|
||||
const options = ref({
|
||||
theme: 'snow', // 使用snow主题
|
||||
modules: {
|
||||
// 富文本头部栏的功能配置
|
||||
toolbar: {
|
||||
container: [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
|
||||
[{ font: [] }], // 字体种类
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ direction: 'ltl' }], // 文本方向
|
||||
[{ direction: 'rtl' }], // 文本方向
|
||||
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
||||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
|
||||
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
['clean'], // 清除文本格式
|
||||
['link', 'image', 'video'], // 链接、图片、视频
|
||||
],
|
||||
handlers: {
|
||||
image: imageHandler, // 点击图片触发事件
|
||||
},
|
||||
},
|
||||
// 图片缩放
|
||||
blotFormatter: {
|
||||
// 可以在这里设置缩放样式
|
||||
// overlay: {
|
||||
// style: {
|
||||
// border: '2px solid red',
|
||||
// }
|
||||
// },
|
||||
toolbar: {
|
||||
mainClassName: 'blot-formatter__toolbar'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// ！！！如果方法报错，把imageHandler 方法放到options的上面
|
||||
// 处理富文本图片上传
|
||||
const imageHandler = () => {
|
||||
// 创建一个文件输入元素
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'file');
|
||||
input.setAttribute('accept', 'image/*');
|
||||
// 模拟点击，打开文件选择对话框
|
||||
input.click();
|
||||
|
||||
// 当用户选择文件后触发的事件
|
||||
input.onchange = async () => {
|
||||
// 获取用户选择的文件
|
||||
const file = input.files ? input.files[0] : null;
|
||||
if (file) {
|
||||
// 创建一个 FormData 对象，用于文件上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
/**
|
||||
* @todo 可以选中图片，然后把file文件给后端，后端给存到文件服务器，然后返回一个线上地址
|
||||
* 这里的abc替换成你的请求接口方法,也可以使用 axios 发送 POST 请求
|
||||
* */
|
||||
// todo
|
||||
// 使用 axios 发送 POST 请求，将文件上传到服务器,这里的abc替换成你的请求接口方法
|
||||
// 可以选中图片，然后把file文件给后端，后端给存到文件服务器，然后返回一个线上地址
|
||||
const res = await abc(formData);
|
||||
|
||||
// 确保获取到 Quill 编辑器实例
|
||||
const quill = toRaw(editorRef.value).getQuill()
|
||||
if (quill) {
|
||||
// 获取当前光标位置
|
||||
const range = quill.getSelection(true);
|
||||
// 在当前光标位置插入上传的图片
|
||||
quill.insertEmbed(range.index, 'image', res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('图片上传失败')
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
// toolbar标题,划过富文本头部提示信息
|
||||
const titleConfig = [
|
||||
{ Choice: '.ql-insertMetric', title: '跳转配置' },
|
||||
{ Choice: '.ql-bold', title: '加粗' },
|
||||
{ Choice: '.ql-italic', title: '斜体' },
|
||||
{ Choice: '.ql-underline', title: '下划线' },
|
||||
{ Choice: '.ql-header', title: '段落格式' },
|
||||
{ Choice: '.ql-strike', title: '删除线' },
|
||||
{ Choice: '.ql-blockquote', title: '块引用' },
|
||||
{ Choice: '.ql-code', title: '插入代码' },
|
||||
{ Choice: '.ql-code-block', title: '插入代码段' },
|
||||
{ Choice: '.ql-font', title: '字体' },
|
||||
{ Choice: '.ql-size', title: '字体大小' },
|
||||
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },
|
||||
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },
|
||||
{ Choice: '.ql-direction', title: '文本方向' },
|
||||
{ Choice: '.ql-header[value="1"]', title: 'h1' },
|
||||
{ Choice: '.ql-header[value="2"]', title: 'h2' },
|
||||
{ Choice: '.ql-align', title: '对齐方式' },
|
||||
{ Choice: '.ql-color', title: '字体颜色' },
|
||||
{ Choice: '.ql-background', title: '背景颜色' },
|
||||
{ Choice: '.ql-image', title: '图像' },
|
||||
{ Choice: '.ql-video', title: '视频' },
|
||||
{ Choice: '.ql-link', title: '添加链接' },
|
||||
{ Choice: '.ql-formula', title: '插入公式' },
|
||||
{ Choice: '.ql-clean', title: '清除字体格式' },
|
||||
{ Choice: '.ql-script[value="sub"]', title: '下标' },
|
||||
{ Choice: '.ql-script[value="super"]', title: '上标' },
|
||||
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
|
||||
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
|
||||
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
|
||||
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
|
||||
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
|
||||
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
|
||||
]
|
||||
// 给富文本框工具栏加上鼠标悬浮中文提示
|
||||
const initTitle = () => {
|
||||
for (let item of titleConfig) {
|
||||
// .editor 是富文本编辑器的类名
|
||||
let tip = document.querySelector('.editor ' + item.Choice);
|
||||
if (tip) {
|
||||
tip.setAttribute('title', item.title);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义粘贴事件
|
||||
const customPaste=(e)=>{
|
||||
// 获取当前最新时间 改名啥的可以用
|
||||
let newTime = new Date().getTime()
|
||||
|
||||
const clipboardData = e.clipboardData // 粘贴信息
|
||||
const types = clipboardData.types // 当前文件类型
|
||||
if (types.includes('Files')) {
|
||||
e.preventDefault();
|
||||
e.clipboardData.files.forEach(file=>{
|
||||
// 在这里可以拿到粘贴后的图片与文件信息
|
||||
// 在这里做操作
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
nextTick(()=>{
|
||||
// 给富文本框工具栏加上鼠标悬浮中文提示
|
||||
initTitle()
|
||||
})
|
||||
// 给富文本增加粘贴事件
|
||||
editorRef.value.getQuill().root.addEventListener('customPaste', customPaste, false)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.editor{
|
||||
width: 100%;
|
||||
:deep(.ql-editor) {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -6,9 +6,19 @@
|
||||
<template #title>
|
||||
<div style="font-size: 16px; font-weight: bold;">通知公告</div>
|
||||
</template>
|
||||
<lay-table :page="page" size="lg" height="600px" :columns="columns" :data-source="dataSource" @row-click="handleRowClick">
|
||||
<lay-table
|
||||
:page="page"
|
||||
size="lg"
|
||||
height="600px"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
@page-change="changePage"
|
||||
>
|
||||
<template v-slot:content="{ data }">
|
||||
<div v-html="data.content"></div>
|
||||
</template>
|
||||
<template #operation="{ data }">
|
||||
<span style="color: #00A394;cursor: pointer" @click.stop="handleViewDetail(data)">查看详情</span>
|
||||
<span style="color: #00A394;cursor: pointer" @click.stop="handleViewDetail(data)">查看详情</span>
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
@ -20,11 +30,10 @@
|
||||
<div class="notice-detail">
|
||||
<h2>{{ currentNotice?.title }}</h2>
|
||||
<div class="notice-info">
|
||||
<span>发布时间：{{ currentNotice?.publishTime }}</span>
|
||||
<span>发布部门：{{ currentNotice?.department }}</span>
|
||||
<span>发布时间：{{ currentNotice?.createtime }}</span>
|
||||
<span>发布人：{{ currentNotice?.author }}</span>
|
||||
</div>
|
||||
<div class="notice-content">
|
||||
{{ currentNotice?.content }}
|
||||
<div class="notice-content" v-html="currentNotice?.content">
|
||||
</div>
|
||||
</div>
|
||||
</lay-layer>
|
||||
@ -32,87 +41,92 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, reactive, ref } from "vue";
|
||||
import { defineComponent, reactive, ref, onMounted } from "vue";
|
||||
import { noticeList } from '../../api/module/home';
|
||||
import { layer } from '@layui/layer-vue';
|
||||
|
||||
interface Notice {
|
||||
id: number;
|
||||
title: string;
|
||||
department: string;
|
||||
publishTime: string;
|
||||
author: string;
|
||||
content: string;
|
||||
createtime: string;
|
||||
status: number;
|
||||
}
|
||||
// 修改分页参数的定义方式
|
||||
|
||||
const page = reactive({
|
||||
current: 1,
|
||||
limit: 10,
|
||||
total: 1
|
||||
})
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: "标题",
|
||||
key: "title",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "发布部门",
|
||||
key: "department",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
key: "publishTime"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
width: "120px",
|
||||
customSlot: "operation"
|
||||
}
|
||||
];
|
||||
current: 1,
|
||||
limit: 10,
|
||||
total: 1
|
||||
});
|
||||
|
||||
// 模拟数据
|
||||
const dataSource = ref<Notice[]>([
|
||||
{
|
||||
id: 1,
|
||||
title: "关于开展2024年第二季度医德医风考核的通知",
|
||||
department: "医务科",
|
||||
publishTime: "2024-03-15",
|
||||
content: "根据医院年度工作计划，定于2024年第二季度开展医德医风考核工作。请各科室做好相关准备工作，具体考核细则详见附件。考核时间：2024年4月1日至4月15日..."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "医院感染防控培训通知",
|
||||
department: "感染管理科",
|
||||
publishTime: "2024-03-14",
|
||||
content: "为进一步加强医院感染防控工作，提高全院医务人员防控意识和操作规范性，定于2024年3月20日下午14:00在第一会议室开展感染防控培训..."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "关于调整门诊工作时间的通知",
|
||||
department: "院办公室",
|
||||
publishTime: "2024-03-13",
|
||||
content: "为更好地服务患者，经医院研究决定，自2024年4月1日起调整门诊工作时间。调整后的工作时间为：周一至周五 8:00-17:30，周六、周日 8:30-12:00..."
|
||||
}
|
||||
]);
|
||||
const columns = [
|
||||
{
|
||||
title: "公告标题",
|
||||
width: "180px",
|
||||
key: "title"
|
||||
},
|
||||
{
|
||||
title: "作者",
|
||||
width: "120px",
|
||||
key: "author"
|
||||
},
|
||||
{
|
||||
title: "公告内容",
|
||||
width: "280px",
|
||||
key: "content",
|
||||
customSlot: 'content',
|
||||
ellipsisTooltip: true
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
width: "180px",
|
||||
key: "createtime"
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '120px',
|
||||
customSlot: 'operation',
|
||||
key: 'operation',
|
||||
align: 'center',
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 控制详情弹窗显示
|
||||
const showDetail = ref(false);
|
||||
// 当前查看的通知
|
||||
const currentNotice = ref<Notice | null>(null);
|
||||
// 弹窗标题
|
||||
const detailTitle = ref('');
|
||||
const dataSource = ref<Notice[]>([]);
|
||||
|
||||
// 点击行查看详情
|
||||
const handleViewDetail = (row: Notice) => {
|
||||
currentNotice.value = row;
|
||||
detailTitle.value = row.title;
|
||||
showDetail.value = true;
|
||||
};
|
||||
// 控制详情弹窗显示
|
||||
const showDetail = ref(false);
|
||||
// 当前查看的通知
|
||||
const currentNotice = ref<Notice | null>(null);
|
||||
|
||||
// 修改行点击事件
|
||||
const handleRowClick = (row: Notice) => {
|
||||
handleViewDetail(row);
|
||||
};
|
||||
// 获取通知列表
|
||||
const getNoticeList = () => {
|
||||
noticeList({ page: page.current, size: page.limit }).then((res) => {
|
||||
if (res.code == 1) {
|
||||
dataSource.value = res.data.data.filter((item: Notice) => item.status === 1);
|
||||
page.total = res.data.count;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 分页变化
|
||||
const changePage = (currentPage: number) => {
|
||||
page.current = currentPage;
|
||||
getNoticeList();
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (row: Notice) => {
|
||||
currentNotice.value = row;
|
||||
showDetail.value = true;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getNoticeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -6,9 +6,12 @@
|
||||
<lay-button type="primary" @click="openNew()" size="sm">新增公告</lay-button>
|
||||
</div>
|
||||
<lay-table :page="page" height="600px" size="lg" :columns="columns" :data-source="dataSource">
|
||||
<template v-slot:content="{ data }">
|
||||
<div v-html="data.content"></div>
|
||||
</template>
|
||||
<template v-slot:status="{ data }">
|
||||
<span v-if="data.status == 1">已发布</span>
|
||||
<span v-if="data.status == 0">未发布</span>
|
||||
<span v-if="data.status == 0">已隐藏</span>
|
||||
</template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-space size="lg">
|
||||
@ -31,10 +34,10 @@
|
||||
<lay-input v-model="addData.author" placeholder="请输入作者"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="公告内容" prop="content">
|
||||
<div style="border: 1px solid #ccc">
|
||||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
|
||||
mode="default" />
|
||||
<Editor style="height: 500px; " @onCreated="(e) => onCreated(e)" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" />
|
||||
<div class="editor">
|
||||
<!-- 这两个都是获取值的必要条件： v-model:content contentType="html" -->
|
||||
<quill-editor ref="editorRef" v-model:content="content" :options="options"
|
||||
contentType="html"></quill-editor>
|
||||
</div>
|
||||
</lay-form-item>
|
||||
<lay-form-item required label="状态" prop="status">
|
||||
@ -54,48 +57,170 @@ import {
|
||||
noticeAdd,
|
||||
noticeList,
|
||||
noticeEdit,
|
||||
noticeDelete
|
||||
noticeDelete,
|
||||
uploadImage
|
||||
} from '../../api/module/home'
|
||||
import { ref, onMounted, reactive, shallowRef, watch } from 'vue'
|
||||
import { ref, onMounted, reactive, shallowRef, watch, nextTick, toRaw } from 'vue'
|
||||
import { layer } from '@layui/layer-vue'
|
||||
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
|
||||
|
||||
import { baseURL } from '@/api/http'
|
||||
// Update editor configuration
|
||||
const toolbarConfig = {
|
||||
showLinkImg: false,
|
||||
uploadImgShowBase64: true,
|
||||
excludeKeys: [
|
||||
'insertVideo',
|
||||
'uploadVideo',
|
||||
'group-video',
|
||||
'insertLink',
|
||||
'insertTable',
|
||||
'codeBlock',
|
||||
]
|
||||
// 引入富文本编辑器与样式
|
||||
import { Quill, QuillEditor } from '@vueup/vue-quill'
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||
|
||||
const content = ref('')
|
||||
const editorRef = ref<any>(null)
|
||||
// ！！！如果方法报错，把imageHandler 方法放到options的上面
|
||||
// 处理富文本图片上传
|
||||
const imageHandler = () => {
|
||||
// 创建一个文件输入元素
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'file');
|
||||
input.setAttribute('accept', 'image/*');
|
||||
// 模拟点击，打开文件选择对话框
|
||||
input.click();
|
||||
|
||||
// 当用户选择文件后触发的事件
|
||||
input.onchange = async () => {
|
||||
// 获取用户选择的文件
|
||||
const file = input.files ? input.files[0] : null;
|
||||
if (file) {
|
||||
// 创建一个 FormData 对象，用于文件上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
/**
|
||||
* @todo 可以选中图片，然后把file文件给后端，后端给存到文件服务器，然后返回一个线上地址
|
||||
* 这里的abc替换成你的请求接口方法,也可以使用 axios 发送 POST 请求
|
||||
* */
|
||||
// todo
|
||||
// 使用 axios 发送 POST 请求，将文件上传到服务器,这里的abc替换成你的请求接口方法
|
||||
// 可以选中图片，然后把file文件给后端，后端给存到文件服务器，然后返回一个线上地址
|
||||
const res = await uploadImage(formData);
|
||||
|
||||
// 确保获取到 Quill 编辑器实例
|
||||
const quill = toRaw(editorRef.value).getQuill()
|
||||
if (quill) {
|
||||
// 获取当前光标位置
|
||||
const range = quill.getSelection(true);
|
||||
// 在当前光标位置插入上传的图片
|
||||
quill.insertEmbed(range.index, 'image', res.data.fullurl);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('图片上传失败')
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const editorConfig = {
|
||||
placeholder: '',
|
||||
readOnly: false,
|
||||
autoFocus: true,
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
maxFileSize: 50 * 1024 * 1024, // 50MB
|
||||
server: '/api/common/upload',
|
||||
fieldName: 'file',
|
||||
meta: {
|
||||
association_id: 0,
|
||||
},
|
||||
customInsert(res: any, insertFn: any) {
|
||||
console.log(res);
|
||||
insertFn(res.data.fullurl, '', '')
|
||||
// 富文本配置
|
||||
const options = ref({
|
||||
theme: 'bubble', // 使用snow主题
|
||||
modules: {
|
||||
// 富文本头部栏的功能配置
|
||||
toolbar: {
|
||||
container: [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
|
||||
[{ font: [] }], // 字体种类
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ direction: 'ltl' }], // 文本方向
|
||||
[{ direction: 'rtl' }], // 文本方向
|
||||
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
||||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
|
||||
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
['clean'], // 清除文本格式
|
||||
['link', 'image', 'video'], // 链接、图片、视频
|
||||
],
|
||||
handlers: {
|
||||
image: imageHandler, // 点击图片触发事件
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
// toolbar标题,划过富文本头部提示信息
|
||||
const titleConfig = [
|
||||
{ Choice: '.ql-insertMetric', title: '跳转配置' },
|
||||
{ Choice: '.ql-bold', title: '加粗' },
|
||||
{ Choice: '.ql-italic', title: '斜体' },
|
||||
{ Choice: '.ql-underline', title: '下划线' },
|
||||
{ Choice: '.ql-header', title: '段落格式' },
|
||||
{ Choice: '.ql-strike', title: '删除线' },
|
||||
{ Choice: '.ql-blockquote', title: '块引用' },
|
||||
{ Choice: '.ql-code', title: '插入代码' },
|
||||
{ Choice: '.ql-code-block', title: '插入代码段' },
|
||||
{ Choice: '.ql-font', title: '字体' },
|
||||
{ Choice: '.ql-size', title: '字体大小' },
|
||||
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },
|
||||
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },
|
||||
{ Choice: '.ql-direction', title: '文本方向' },
|
||||
{ Choice: '.ql-header[value="1"]', title: 'h1' },
|
||||
{ Choice: '.ql-header[value="2"]', title: 'h2' },
|
||||
{ Choice: '.ql-align', title: '对齐方式' },
|
||||
{ Choice: '.ql-color', title: '字体颜色' },
|
||||
{ Choice: '.ql-background', title: '背景颜色' },
|
||||
{ Choice: '.ql-image', title: '图像' },
|
||||
{ Choice: '.ql-video', title: '视频' },
|
||||
{ Choice: '.ql-link', title: '添加链接' },
|
||||
{ Choice: '.ql-formula', title: '插入公式' },
|
||||
{ Choice: '.ql-clean', title: '清除字体格式' },
|
||||
{ Choice: '.ql-script[value="sub"]', title: '下标' },
|
||||
{ Choice: '.ql-script[value="super"]', title: '上标' },
|
||||
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
|
||||
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
|
||||
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
|
||||
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
|
||||
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
|
||||
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
|
||||
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
|
||||
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
|
||||
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
|
||||
]
|
||||
// 给富文本框工具栏加上鼠标悬浮中文提示
|
||||
const initTitle = () => {
|
||||
for (let item of titleConfig) {
|
||||
// .editor 是富文本编辑器的类名
|
||||
let tip = document.querySelector('.editor ' + item.Choice);
|
||||
if (tip) {
|
||||
tip.setAttribute('title', item.title);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add valueHtml for editor content
|
||||
const valueHtml = ref('')
|
||||
// 自定义粘贴事件
|
||||
const customPaste = (e: ClipboardEvent) => {
|
||||
// Prevent default paste behavior
|
||||
e.preventDefault()
|
||||
|
||||
const clipboardData = e.clipboardData
|
||||
if (!clipboardData) return
|
||||
|
||||
const types = clipboardData.types
|
||||
if (types.includes('Files')) {
|
||||
Array.from(clipboardData.files).forEach(file => {
|
||||
// Handle file paste
|
||||
// Add your file handling logic here
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface NoticeData {
|
||||
id?: number;
|
||||
@ -125,10 +250,23 @@ const addData = reactive<NoticeData>({
|
||||
status: 1
|
||||
});
|
||||
|
||||
const editorRef = shallowRef()
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getNoticeList()
|
||||
|
||||
// Wait for editor to be mounted and initialized
|
||||
nextTick(() => {
|
||||
// Add null check before accessing editor
|
||||
if (editorRef.value && editorRef.value.getQuill()) {
|
||||
// Initialize title tooltips
|
||||
initTitle()
|
||||
|
||||
// Add paste event listener
|
||||
const editor = editorRef.value.getQuill()
|
||||
editor.root.addEventListener('paste', customPaste, false)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const openNew = () => {
|
||||
@ -136,7 +274,7 @@ const openNew = () => {
|
||||
addData.title = '';
|
||||
addData.author = '';
|
||||
addData.content = '';
|
||||
valueHtml.value = '';
|
||||
content.value = '';
|
||||
addData.status = 1;
|
||||
addIsEdit.value = 1;
|
||||
addShow.value = true;
|
||||
@ -145,7 +283,7 @@ const openNew = () => {
|
||||
const getNoticeList = () => {
|
||||
noticeList({ page: page.current, size: page.limit }).then((res) => {
|
||||
if (res.code == 1) {
|
||||
dataSource.value = res.data.list;
|
||||
dataSource.value = res.data.data;
|
||||
page.total = res.data.count;
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 })
|
||||
@ -159,13 +297,13 @@ const editShowMsd = (data: NoticeData) => {
|
||||
addData.title = data.title;
|
||||
addData.author = data.author;
|
||||
addData.content = data.content;
|
||||
valueHtml.value = data.content;
|
||||
content.value = data.content;
|
||||
addData.status = parseInt(data.status.toString());
|
||||
addIsEdit.value = 2;
|
||||
}
|
||||
|
||||
// Watch for changes in valueHtml and update addData.content
|
||||
watch(valueHtml, (newValue) => {
|
||||
watch(content, (newValue) => {
|
||||
addData.content = newValue;
|
||||
})
|
||||
|
||||
@ -192,18 +330,20 @@ const columns = [
|
||||
},
|
||||
{
|
||||
title: "作者",
|
||||
width: "120px",
|
||||
width: "120px",
|
||||
key: "author"
|
||||
},
|
||||
{
|
||||
title: "公告内容",
|
||||
width: "280px",
|
||||
key: "content"
|
||||
key: "content",
|
||||
customSlot: 'content',
|
||||
ellipsisTooltip: true
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
width: "180px",
|
||||
key: "create_time"
|
||||
key: "createtime"
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
@ -222,7 +362,7 @@ const columns = [
|
||||
]
|
||||
const onCreated = (editor: any) => {
|
||||
editorRef.value = Object.seal(editor);
|
||||
}
|
||||
}
|
||||
const addButton = ref([
|
||||
{
|
||||
text: "确认",
|
||||
@ -261,7 +401,6 @@ const addButton = ref([
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
<style scoped>
|
||||
:deep(.w-e-text-container) {
|
||||
min-height: 400px !important;
|
||||
@ -276,4 +415,12 @@ const addButton = ref([
|
||||
border: 1px solid #ddd !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
:deep(.ql-editor) {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.layui-input-block){
|
||||
max-width: 85%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user