Compare commits
9 Commits
dev
...
b3bffac35e
| Author | SHA1 | Date | |
|---|---|---|---|
| b3bffac35e | |||
| da149760cb | |||
| d79c3f8191 | |||
| 2347bc6f0c | |||
| f867f50114 | |||
| fd0aaee998 | |||
| e2261c5fc4 | |||
| cc894333bf | |||
| e24a4adec6 |
11
package-lock.json
generated
11
package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.4.0",
|
||||
"bwip-js": "^4.3.2",
|
||||
@@ -3896,6 +3897,11 @@
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@zhj-target/vue3-kind-editor": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.8.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||
@@ -17949,6 +17955,11 @@
|
||||
"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@zhj-target/vue3-kind-editor": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.8.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.4.0",
|
||||
"bwip-js": "^4.3.2",
|
||||
|
||||
@@ -71,16 +71,25 @@ class RequestHttp {
|
||||
*/
|
||||
this.service.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
const { data } = response;
|
||||
const { data, request } = response;
|
||||
|
||||
tryHideFullScreenLoading();
|
||||
const imgId = request?.responseURL?.split("imgId=")[1];
|
||||
//获取导出表格名称
|
||||
getDispositionName(response);
|
||||
// 获取响应头中的 Authorization 信息
|
||||
const authorization = response.headers["authorization"];
|
||||
if (imgId) {
|
||||
return {
|
||||
imgId,
|
||||
data
|
||||
};
|
||||
}
|
||||
if (authorization) {
|
||||
// 可以在这里更新用户的 token 信息
|
||||
const userStore = useUserStore();
|
||||
userStore.setToken(authorization);
|
||||
console.log("123232323");
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ export const getArticleClassDelApi = (params: any) => {
|
||||
};
|
||||
//文章分类更新(用于编辑后)
|
||||
export const getArticleClassEditUpApi = (params: any) => {
|
||||
const { id, name, sort, is_show, pid, seo_title, seo_keywords, seo_desc } = params;
|
||||
const { id, name, sort, is_show, pid, seo_title, seo_keywords, seo_desc, icon } = params;
|
||||
|
||||
return http.put<any>(`/article/category/update/${id}`, {
|
||||
name,
|
||||
@@ -28,7 +28,8 @@ export const getArticleClassEditUpApi = (params: any) => {
|
||||
pid,
|
||||
seo_title,
|
||||
seo_keywords,
|
||||
seo_desc
|
||||
seo_desc,
|
||||
icon
|
||||
});
|
||||
};
|
||||
//文章分类详情(用于编辑)
|
||||
|
||||
@@ -11,8 +11,8 @@ import http from "@/api";
|
||||
* @name 文件上传模块
|
||||
*/
|
||||
// 图片上传
|
||||
export const uploadImg = (params: any, name?: any) => {
|
||||
return http.post<any>(`/images/${name}/upload`, params);
|
||||
export const uploadImg = (params: any, name?: any, id?: any) => {
|
||||
return http.post<any>(`/images/${name}/upload?imgId=${id}`, params);
|
||||
};
|
||||
|
||||
// 视频上传
|
||||
|
||||
117
src/auto-import.d.ts
vendored
117
src/auto-import.d.ts
vendored
@@ -4,67 +4,66 @@
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const ElNotification: typeof import('element-plus/es')['ElNotification']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const EffectScope: typeof import("vue")["EffectScope"];
|
||||
const computed: typeof import("vue")["computed"];
|
||||
const createApp: typeof import("vue")["createApp"];
|
||||
const customRef: typeof import("vue")["customRef"];
|
||||
const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
|
||||
const defineComponent: typeof import("vue")["defineComponent"];
|
||||
const effectScope: typeof import("vue")["effectScope"];
|
||||
const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
|
||||
const getCurrentScope: typeof import("vue")["getCurrentScope"];
|
||||
const h: typeof import("vue")["h"];
|
||||
const inject: typeof import("vue")["inject"];
|
||||
const isProxy: typeof import("vue")["isProxy"];
|
||||
const isReactive: typeof import("vue")["isReactive"];
|
||||
const isReadonly: typeof import("vue")["isReadonly"];
|
||||
const isRef: typeof import("vue")["isRef"];
|
||||
const markRaw: typeof import("vue")["markRaw"];
|
||||
const nextTick: typeof import("vue")["nextTick"];
|
||||
const onActivated: typeof import("vue")["onActivated"];
|
||||
const onBeforeMount: typeof import("vue")["onBeforeMount"];
|
||||
const onBeforeRouteLeave: typeof import("vue-router")["onBeforeRouteLeave"];
|
||||
const onBeforeRouteUpdate: typeof import("vue-router")["onBeforeRouteUpdate"];
|
||||
const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
|
||||
const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
|
||||
const onDeactivated: typeof import("vue")["onDeactivated"];
|
||||
const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
|
||||
const onMounted: typeof import("vue")["onMounted"];
|
||||
const onRenderTracked: typeof import("vue")["onRenderTracked"];
|
||||
const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
|
||||
const onScopeDispose: typeof import("vue")["onScopeDispose"];
|
||||
const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
|
||||
const onUnmounted: typeof import("vue")["onUnmounted"];
|
||||
const onUpdated: typeof import("vue")["onUpdated"];
|
||||
const provide: typeof import("vue")["provide"];
|
||||
const reactive: typeof import("vue")["reactive"];
|
||||
const readonly: typeof import("vue")["readonly"];
|
||||
const ref: typeof import("vue")["ref"];
|
||||
const resolveComponent: typeof import("vue")["resolveComponent"];
|
||||
const shallowReactive: typeof import("vue")["shallowReactive"];
|
||||
const shallowReadonly: typeof import("vue")["shallowReadonly"];
|
||||
const shallowRef: typeof import("vue")["shallowRef"];
|
||||
const toRaw: typeof import("vue")["toRaw"];
|
||||
const toRef: typeof import("vue")["toRef"];
|
||||
const toRefs: typeof import("vue")["toRefs"];
|
||||
const toValue: typeof import("vue")["toValue"];
|
||||
const triggerRef: typeof import("vue")["triggerRef"];
|
||||
const unref: typeof import("vue")["unref"];
|
||||
const useAttrs: typeof import("vue")["useAttrs"];
|
||||
const useCssModule: typeof import("vue")["useCssModule"];
|
||||
const useCssVars: typeof import("vue")["useCssVars"];
|
||||
const useLink: typeof import("vue-router")["useLink"];
|
||||
const useRoute: typeof import("vue-router")["useRoute"];
|
||||
const useRouter: typeof import("vue-router")["useRouter"];
|
||||
const useSlots: typeof import("vue")["useSlots"];
|
||||
const watch: typeof import("vue")["watch"];
|
||||
const watchEffect: typeof import("vue")["watchEffect"];
|
||||
const watchPostEffect: typeof import("vue")["watchPostEffect"];
|
||||
const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from "vue";
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: "14px";
|
||||
content: "12px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||
@@ -78,3 +78,149 @@
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||
content: "等宽字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
|
||||
font-family: SimSun, sans-serif;
|
||||
content: "宋体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
|
||||
font-family: SimHei, sans-serif;
|
||||
content: "黑体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
content: "微软雅黑";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
|
||||
font-family: KaiTi, sans-serif;
|
||||
content: "楷体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
|
||||
font-family: FangSong, sans-serif;
|
||||
content: "仿宋";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
|
||||
font-family: Arial, sans-serif;
|
||||
content: "Arial";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
|
||||
font-family: "Times New Roman", sans-serif;
|
||||
content: "Times New Roman";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
|
||||
font-family: sans-serif;
|
||||
content: "sans-serif";
|
||||
}
|
||||
.ql-font-SimSun {
|
||||
font-family: SimSun, sans-serif;
|
||||
}
|
||||
.ql-font-SimHei {
|
||||
font-family: SimHei, sans-serif;
|
||||
}
|
||||
.ql-font-Microsoft-YaHei {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
.ql-font-KaiTi {
|
||||
font-family: KaiTi, sans-serif;
|
||||
}
|
||||
.ql-font-FangSong {
|
||||
font-family: FangSong, sans-serif;
|
||||
}
|
||||
.ql-font-Arial {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.ql-font-Times-New-Roman {
|
||||
font-family: "Times New Roman", sans-serif;
|
||||
}
|
||||
.ql-font-sans-serif {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
|
||||
// content: "10px";
|
||||
// }
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
|
||||
content: "12px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
|
||||
content: "14px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
|
||||
content: "16px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
|
||||
content: "18px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
|
||||
content: "20px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
|
||||
content: "22px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
|
||||
content: "24px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
|
||||
content: "26px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
|
||||
content: "28px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
|
||||
content: "30px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||
content: "32px";
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||
// content: "32px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
|
||||
// content: "36px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
|
||||
// content: "38px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
|
||||
// content: "40px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
|
||||
// content: "44px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="44px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="44px"]::before {
|
||||
// content: "44px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
|
||||
// content: "45px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
|
||||
// content: "50px";
|
||||
// }
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<!-- 图片上传组件 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
@@ -12,7 +13,7 @@
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
|
||||
<!-- 视频上传组件 -->
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
@@ -22,9 +23,11 @@
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
|
||||
<!-- 主富文本编辑器 -->
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="editorId"
|
||||
id="mainEditor"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@@ -32,185 +35,318 @@
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 标签页配置弹窗 -->
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="outerVisible"
|
||||
title="标签页配置"
|
||||
style="width: 1200px; height: 900px"
|
||||
close-on-click-modal
|
||||
close-on-press-escape
|
||||
:before-close="handleBeforeClose"
|
||||
>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
editable
|
||||
@edit="handleTabsEdit"
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<!-- 标签页：标题支持编辑 -->
|
||||
<el-tab-pane
|
||||
:label="item.title"
|
||||
:name="item.key"
|
||||
v-for="(item, index) in tabsData"
|
||||
:key="item.key"
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
>
|
||||
<template #label>
|
||||
<div class="tab-title-edit">
|
||||
<!-- 文字显示状态 -->
|
||||
<span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<!-- 输入框编辑状态 -->
|
||||
<el-input
|
||||
@click.stop
|
||||
@keydown.delete.stop
|
||||
@keydown.backspace.stop
|
||||
v-else
|
||||
v-model="item.title"
|
||||
:ref="el => (editInputRefs[index] = el)"
|
||||
size="small"
|
||||
class="title-input"
|
||||
@blur="finishEditTitle(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 标签页编辑器内容 -->
|
||||
<QuillEditor
|
||||
:id="`tabEditor_${item.key}`"
|
||||
:ref="
|
||||
el => {
|
||||
if (el) tabEditors[index] = el;
|
||||
}
|
||||
"
|
||||
v-model:content="item.content"
|
||||
contentType="html"
|
||||
:options="options1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleQX">取消</el-button>
|
||||
<el-button type="primary" @click="handleQR"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
// 引入插入图片标签自定义的类
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useMsg } from "@/hooks/useMsg";
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
Quill.register(TabsBlot);
|
||||
|
||||
// 基础变量
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const outerVisible = ref(false);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const activeName = ref(null); // 跟踪当前激活的标签页key
|
||||
const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引
|
||||
|
||||
// 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
|
||||
const tabsData = ref([]);
|
||||
// 标签页编辑器ref数组
|
||||
const tabEditors = ref([]);
|
||||
// 标题编辑输入框的ref
|
||||
const editInputRefs = ref([]);
|
||||
const currentEditingTabsRef = ref(null);
|
||||
// Props
|
||||
const props = defineProps({
|
||||
/* 编辑器的内容 */
|
||||
content: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/* 只读 */
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 上传文件大小限制(MB)
|
||||
fileSizeLimit: {
|
||||
type: Number,
|
||||
default: 10
|
||||
}
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 10 }
|
||||
});
|
||||
//值
|
||||
|
||||
// 主编辑器内容双向绑定
|
||||
const editorContent = computed({
|
||||
get: () => props.content,
|
||||
set: val => {
|
||||
emit("update:content", val);
|
||||
}
|
||||
});
|
||||
//富文本ref
|
||||
const myQuillEditor = ref(null);
|
||||
//富文本值
|
||||
const oldContent = ref("");
|
||||
//富文本配置项
|
||||
const myQuillEditor = ref(null); // 主编辑器ref
|
||||
|
||||
// 主编辑器配置（保持不变）
|
||||
const options = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
// 工具栏配置
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||
["blockquote", "code-block"], // 引用 代码块
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
["clean"], // 清除文本格式
|
||||
["link", "image", "video"] // 链接、图片、视频
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
// 重写图片上传事件
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
//调用图片上传
|
||||
activeEditor.value = "main";
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else {
|
||||
Quill.format("image", true);
|
||||
}
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
// 劫持原来的视频点击按钮事件
|
||||
activeEditor.value = "main";
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else {
|
||||
Quill.format("video", true);
|
||||
}
|
||||
} else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function (value) {
|
||||
outerVisible.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly,
|
||||
clipboard: {
|
||||
matchers: [
|
||||
[
|
||||
"img",
|
||||
(node, delta) => {
|
||||
const src = node.getAttribute("src");
|
||||
const id = node.getAttribute("id");
|
||||
delta.insert({ image: { src, id: id } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
//上传前的钩子
|
||||
|
||||
// 标签页编辑器配置（保持不变）
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 上传前校验（保持不变）
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
imageListDb.value.push(file);
|
||||
|
||||
// 图片
|
||||
if (
|
||||
fileType == "image/jpeg" ||
|
||||
fileType == "image/png" ||
|
||||
fileType == "image/gif" ||
|
||||
fileType == "image/jpg" ||
|
||||
fileType == "image/bmp" ||
|
||||
fileType == "image/webp" ||
|
||||
fileType == "video/mov" ||
|
||||
fileType == "video/ts" ||
|
||||
fileType == "video/mp4" ||
|
||||
fileType == "video/avi"
|
||||
) {
|
||||
const fileSizeLimit = file.size;
|
||||
// 校检文件大小
|
||||
const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
|
||||
const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
|
||||
if (!validTypes.includes(fileType)) {
|
||||
ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
||||
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
||||
ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
} else {
|
||||
console.log(`RIch MB!`);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
alert(`文件格式不正确！`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
//图片上传
|
||||
|
||||
// 图片上传（保持不变）
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
//这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
|
||||
formData.append("image", options.file);
|
||||
imageList.value.push(options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value);
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
let rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
// 获取富文本实例
|
||||
let quill = rawMyQuillEditor.getQuill();
|
||||
// 获取光标位置
|
||||
let length = quill.selection.savedRange.index;
|
||||
quill.insertEmbed(length, "image", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
const { data } = result.data;
|
||||
const { imgId } = result;
|
||||
|
||||
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
if (fileItem) {
|
||||
fileItem.serverImgId = imgId;
|
||||
fileItem.path = data.path;
|
||||
}
|
||||
|
||||
const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
if (allFilesUploaded) {
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
|
||||
imageListDb.value.forEach(item => {
|
||||
const length = quill.getLength() - 1;
|
||||
quill.insertEmbed(length, "customImage", {
|
||||
url: h + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
});
|
||||
|
||||
const finalLength = quill.getLength();
|
||||
quill.setSelection(finalLength);
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
//视频上传
|
||||
// 视频上传（保持不变）
|
||||
const handleVideoUpload = async evt => {
|
||||
if (evt.target.files.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (evt.target.files.length === 0) return;
|
||||
const formData = new FormData();
|
||||
formData.append("video", evt.target.files[0]);
|
||||
try {
|
||||
let quill = toRaw(myQuillEditor.value).getQuill();
|
||||
// 获取光标位置
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
let length = quill.selection.savedRange.index;
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(length, "video", {
|
||||
url: h + data.path, //h + data.fileUrl, //
|
||||
quill.insertEmbed(length, "customVideo", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = "";
|
||||
@@ -219,24 +355,218 @@ const handleVideoUpload = async evt => {
|
||||
}
|
||||
};
|
||||
|
||||
// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
// 标签页切换事件（基于key切换）
|
||||
const handleTabChange = key => {
|
||||
const tabIndex = tabsData.value.findIndex(item => item.key === key);
|
||||
activeName.value = key;
|
||||
activeEditor.value = `tab-${tabIndex}`;
|
||||
};
|
||||
// 增加hover工具栏有中文提示
|
||||
const initTitle = () => {
|
||||
document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
|
||||
for (let item of titleConfig.value) {
|
||||
let tip = document.querySelector(".ql-toolbar " + item.Choice);
|
||||
if (!tip) continue;
|
||||
tip.setAttribute("title", item.title);
|
||||
|
||||
// 标签页增删事件
|
||||
const handleTabsEdit = (targetKey, action) => {
|
||||
if (action === "add") {
|
||||
if (tabsData.value.length > 5) {
|
||||
return useMsg("error", "标签页已达上限 !");
|
||||
}
|
||||
// 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
|
||||
const newKey = `tab_${generateUUID()}`;
|
||||
const newIndex = tabsData.value.length;
|
||||
tabsData.value.push({
|
||||
key: newKey,
|
||||
title: `标签${newIndex + 1}`,
|
||||
content: "",
|
||||
isEditing: false // 新增时默认不编辑
|
||||
});
|
||||
nextTick(() => {
|
||||
activeName.value = newKey;
|
||||
activeEditor.value = `tab-${newIndex}`;
|
||||
// 新增后自动进入编辑状态
|
||||
setTimeout(() => {
|
||||
startEditTitle(newIndex);
|
||||
}, 100);
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
// 删除标签页
|
||||
const index = tabsData.value.findIndex(item => item.key === targetKey);
|
||||
tabsData.value.splice(index, 1);
|
||||
tabEditors.value.splice(index, 1);
|
||||
editInputRefs.value.splice(index, 1);
|
||||
|
||||
// 调整活跃编辑器索引
|
||||
if (activeEditor.value.startsWith("tab-")) {
|
||||
const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
if (currentTabIndex > index) {
|
||||
activeEditor.value = `tab-${currentTabIndex - 1}`;
|
||||
} else if (currentTabIndex === index) {
|
||||
// 若删除当前活跃标签，切换到第一个或主编辑器
|
||||
activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
|
||||
activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 开始编辑标签页标题
|
||||
const startEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
// 记录原始标题（用于取消编辑时恢复）
|
||||
tab.originalTitle = tab.title;
|
||||
tab.isEditing = true;
|
||||
// 延迟获取焦点，确保输入框已渲染
|
||||
nextTick(() => {
|
||||
editInputRefs.value[index]?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
// 完成编辑（失去焦点或回车）
|
||||
const finishEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
// 校验标题（不能为空）
|
||||
if (!tab.title.trim()) {
|
||||
tab.title = tab.originalTitle || `标签${index + 1}`;
|
||||
ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
|
||||
}
|
||||
tab.isEditing = false;
|
||||
// 更新activeName（如果当前编辑的是活跃标签）
|
||||
if (tab.key === activeName.value) {
|
||||
activeName.value = tab.key; // 触发重绘
|
||||
}
|
||||
};
|
||||
|
||||
// 其他方法（保持不变）
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
};
|
||||
const setTabsInfo = () => {
|
||||
outerVisible.value = false;
|
||||
//清空
|
||||
tabsData.value = [];
|
||||
activeName.value = null;
|
||||
activeEditor.value = "main";
|
||||
};
|
||||
//弹窗关闭前的钩子
|
||||
const handleBeforeClose = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
// 确认按钮点击事件（修改后）
|
||||
const handleQR = () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (!quill) return;
|
||||
if (!tabsData.value.length) {
|
||||
return useMsg("error", "标签页内容为空 !");
|
||||
}
|
||||
const range = quill.getSelection(true);
|
||||
// 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
|
||||
if (currentEditingTabsRef.value) {
|
||||
// 1. 编辑模式：更新原有标签页组件
|
||||
const blot = currentEditingTabsRef.value;
|
||||
// 更新 blot 的数据（触发 DOM 更新）
|
||||
blot.updateContents(tabsData.value); // 需要在 TabsBlot 中添加 updateContents 方法
|
||||
// 清除编辑状态标记
|
||||
currentEditingTabsRef.value = null;
|
||||
} else {
|
||||
// 2. 新增模式：插入新的标签页组件
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
quill.setSelection(range.index + 1);
|
||||
}
|
||||
// 关闭弹窗并清空临时数据
|
||||
setTabsInfo();
|
||||
};
|
||||
//取消
|
||||
const handleQX = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
const initTitle = () => {
|
||||
const editor = document.querySelector(".ql-editor");
|
||||
if (editor) editor.dataset.placeholder = "";
|
||||
titleConfig.value.forEach(item => {
|
||||
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
});
|
||||
};
|
||||
// 定义 loadTabsDataToEditor 函数
|
||||
const loadTabsDataToEditor = tabs => {
|
||||
// 清空现有数据
|
||||
tabsData.value = [];
|
||||
// 转换原始标签数据为编辑所需格式（添加key和编辑状态）
|
||||
tabs.forEach((tab, index) => {
|
||||
tabsData.value.push({
|
||||
key: `tab_${generateUUID()}`, // 生成唯一key
|
||||
title: tab.title || `标签${index + 1}`, // 避免空标题
|
||||
content: tab.content || "", // 标签页内容
|
||||
isEditing: false // 编辑状态标记
|
||||
});
|
||||
});
|
||||
// 激活第一个标签页（如果有数据）
|
||||
nextTick(() => {
|
||||
if (tabsData.value.length > 0) {
|
||||
activeName.value = tabsData.value[0].key;
|
||||
activeEditor.value = "tab-0";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
oldContent.value = props.content;
|
||||
// 监听编辑按钮点击事件
|
||||
const editorEl = document.querySelector(".ql-editor");
|
||||
if (editorEl) {
|
||||
editorEl.addEventListener("edit-tabs", e => {
|
||||
console.log(1232, "测试");
|
||||
console.log(e.detail.blot, "=e.detail=");
|
||||
const tabsData = TabsBlot.value(e.detail.blot.domNode);
|
||||
console.log(tabsData, "=tabsData=");
|
||||
if (tabsData.length > 0) {
|
||||
// 保存当前编辑的标签页引用
|
||||
currentEditingTabsRef.value = e.detail.blot;
|
||||
console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
|
||||
// 加载数据到弹窗
|
||||
loadTabsDataToEditor(tabsData);
|
||||
// 显示弹窗
|
||||
outerVisible.value = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
clearEditor: () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (quill) {
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 增加编辑器内容区交互性确保删除可用
|
||||
.ql-editor {
|
||||
min-height: 600px; // 确保空编辑器也有点击区域
|
||||
cursor: text !important;
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
// /* 标签页样式 */
|
||||
.quill-tabs {
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// /* 用伪元素添加图标（可替换为自己的图标） */
|
||||
.ql-tabs::before {
|
||||
font-size: 16px;
|
||||
content: "T"; /* 用 emoji 或字体图标 */
|
||||
}
|
||||
.title-input {
|
||||
width: 100px;
|
||||
margin: -2px 0; /* 与标签对齐 */
|
||||
}
|
||||
</style>
|
||||
|
||||
550
src/components/Editor/index2.vue
Normal file
550
src/components/Editor/index2.vue
Normal file
@@ -0,0 +1,550 @@
|
||||
<template>
|
||||
<!-- 图片上传组件 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 视频上传组件 -->
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
name="file"
|
||||
ref="uploadFileVideo"
|
||||
id="uploadFileVideo"
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
|
||||
<!-- 主富文本编辑器 -->
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="mainEditor"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 标签页配置弹窗 -->
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="outerVisible"
|
||||
title="标签页配置"
|
||||
style="width: 1200px; height: 900px"
|
||||
close-on-click-modal
|
||||
close-on-press-escape
|
||||
:before-close="handleBeforeClose"
|
||||
>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
editable
|
||||
@edit="handleTabsEdit"
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<!-- 标签页：标题支持编辑 -->
|
||||
<el-tab-pane :label="item.title" :name="item.key" v-for="(item, index) in tabsData" :key="item.key">
|
||||
<template #label>
|
||||
<div class="tab-title-edit">
|
||||
<!-- 文字显示状态 -->
|
||||
<span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<!-- 输入框编辑状态 -->
|
||||
<el-input
|
||||
v-else
|
||||
v-model="item.title"
|
||||
:ref="el => (editInputRefs[index] = el)"
|
||||
size="small"
|
||||
class="title-input"
|
||||
@blur="finishEditTitle(index)"
|
||||
@keyup.enter="finishEditTitle(index)"
|
||||
@keyup.esc="cancelEditTitle(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 标签页编辑器内容 -->
|
||||
<QuillEditor
|
||||
:id="`tabEditor_${item.key}`"
|
||||
:ref="
|
||||
el => {
|
||||
if (el) tabEditors[index] = el;
|
||||
}
|
||||
"
|
||||
v-model:content="item.content"
|
||||
contentType="html"
|
||||
:options="options1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleQX">取消</el-button>
|
||||
<el-button type="primary" @click="handleQR"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
Quill.register(TabsBlot);
|
||||
|
||||
// 基础变量
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const outerVisible = ref(false);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const activeName = ref(null); // 跟踪当前激活的标签页key
|
||||
const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引
|
||||
|
||||
// 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
|
||||
const tabsData = ref([]);
|
||||
// 标签页编辑器ref数组
|
||||
const tabEditors = ref([]);
|
||||
// 标题编辑输入框的ref
|
||||
const editInputRefs = ref([]);
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 10 }
|
||||
});
|
||||
|
||||
// 主编辑器内容双向绑定
|
||||
const editorContent = computed({
|
||||
get: () => props.content,
|
||||
set: val => {
|
||||
emit("update:content", val);
|
||||
}
|
||||
});
|
||||
const myQuillEditor = ref(null); // 主编辑器ref
|
||||
|
||||
// 主编辑器配置（保持不变）
|
||||
const options = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main";
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main";
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function (value) {
|
||||
outerVisible.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 标签页编辑器配置（保持不变）
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
// 上传前校验（保持不变）
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
imageListDb.value.push(file);
|
||||
|
||||
const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
|
||||
if (!validTypes.includes(fileType)) {
|
||||
ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// 图片上传（保持不变）
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
imageList.value.push(options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
const { data } = result.data;
|
||||
const { imgId } = result;
|
||||
|
||||
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
|
||||
if (fileItem) {
|
||||
fileItem.serverImgId = imgId;
|
||||
fileItem.path = data.path;
|
||||
}
|
||||
|
||||
const allFilesUploaded = imageListDb.value.every(item => item.path);
|
||||
if (allFilesUploaded) {
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
|
||||
imageListDb.value.forEach(item => {
|
||||
const length = quill.getLength() - 1;
|
||||
quill.insertEmbed(length, "customImage", {
|
||||
url: h + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
});
|
||||
|
||||
const finalLength = quill.getLength();
|
||||
quill.setSelection(finalLength);
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("图片上传失败:", error);
|
||||
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
|
||||
}
|
||||
};
|
||||
|
||||
// 视频上传（保持不变）
|
||||
const handleVideoUpload = async evt => {
|
||||
if (evt.target.files.length === 0) return;
|
||||
const formData = new FormData();
|
||||
formData.append("video", evt.target.files[0]);
|
||||
try {
|
||||
let rawQuillEditor = "";
|
||||
let quill = "";
|
||||
if (activeEditor.value === "main") {
|
||||
rawQuillEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
let length = quill.selection.savedRange.index;
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(length, "customVideo", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = "";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 标签页切换事件（基于key切换）
|
||||
const handleTabChange = key => {
|
||||
const tabIndex = tabsData.value.findIndex(item => item.key === key);
|
||||
activeName.value = key;
|
||||
activeEditor.value = `tab-${tabIndex}`;
|
||||
};
|
||||
|
||||
// 标签页增删事件
|
||||
const handleTabsEdit = (targetKey, action) => {
|
||||
if (action === "add") {
|
||||
// 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
|
||||
const newKey = `tab_${generateUUID()}`;
|
||||
const newIndex = tabsData.value.length;
|
||||
tabsData.value.push({
|
||||
key: newKey,
|
||||
title: `标签${newIndex + 1}`,
|
||||
content: "",
|
||||
isEditing: false // 新增时默认不编辑
|
||||
});
|
||||
nextTick(() => {
|
||||
activeName.value = newKey;
|
||||
activeEditor.value = `tab-${newIndex}`;
|
||||
// 新增后自动进入编辑状态
|
||||
setTimeout(() => {
|
||||
startEditTitle(newIndex);
|
||||
}, 100);
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
// 删除标签页
|
||||
const index = tabsData.value.findIndex(item => item.key === targetKey);
|
||||
tabsData.value.splice(index, 1);
|
||||
tabEditors.value.splice(index, 1);
|
||||
editInputRefs.value.splice(index, 1);
|
||||
|
||||
// 调整活跃编辑器索引
|
||||
if (activeEditor.value.startsWith("tab-")) {
|
||||
const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
if (currentTabIndex > index) {
|
||||
activeEditor.value = `tab-${currentTabIndex - 1}`;
|
||||
} else if (currentTabIndex === index) {
|
||||
// 若删除当前活跃标签，切换到第一个或主编辑器
|
||||
activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
|
||||
activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 开始编辑标签页标题
|
||||
const startEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
// 记录原始标题（用于取消编辑时恢复）
|
||||
tab.originalTitle = tab.title;
|
||||
tab.isEditing = true;
|
||||
// 延迟获取焦点，确保输入框已渲染
|
||||
nextTick(() => {
|
||||
editInputRefs.value[index]?.focus();
|
||||
});
|
||||
};
|
||||
|
||||
// 完成编辑（失去焦点或回车）
|
||||
const finishEditTitle = index => {
|
||||
const tab = tabsData.value[index];
|
||||
if (!tab) return;
|
||||
// 校验标题（不能为空）
|
||||
if (!tab.title.trim()) {
|
||||
tab.title = tab.originalTitle || `标签${index + 1}`;
|
||||
ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
|
||||
}
|
||||
tab.isEditing = false;
|
||||
// 更新activeName（如果当前编辑的是活跃标签）
|
||||
if (tab.key === activeName.value) {
|
||||
activeName.value = tab.key; // 触发重绘
|
||||
}
|
||||
};
|
||||
|
||||
// 其他方法（保持不变）
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
};
|
||||
const setTabsInfo = () => {
|
||||
outerVisible.value = false;
|
||||
//清空
|
||||
tabsData.value = [];
|
||||
activeName.value = null;
|
||||
activeEditor.value = "main";
|
||||
};
|
||||
//弹窗关闭前的钩子
|
||||
const handleBeforeClose = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
//确认
|
||||
const handleQR = () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (quill) {
|
||||
const range = quill.getSelection(true);
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
quill.setSelection(range.index + 1);
|
||||
setTabsInfo();
|
||||
}
|
||||
};
|
||||
//取消
|
||||
const handleQX = () => {
|
||||
setTabsInfo();
|
||||
};
|
||||
const initTitle = () => {
|
||||
const editor = document.querySelector(".ql-editor");
|
||||
if (editor) editor.dataset.placeholder = "";
|
||||
titleConfig.value.forEach(item => {
|
||||
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
clearEditor: () => {
|
||||
const quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
if (quill) {
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 增加编辑器内容区交互性确保删除可用
|
||||
.ql-editor {
|
||||
min-height: 600px; // 确保空编辑器也有点击区域
|
||||
cursor: text !important;
|
||||
user-select: text !important;
|
||||
}
|
||||
|
||||
/* 标签页样式 */
|
||||
.quill-tabs {
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 用伪元素添加图标（可替换为自己的图标） */
|
||||
.ql-tabs::before {
|
||||
font-size: 16px;
|
||||
content: "T"; /* 用 emoji 或字体图标 */
|
||||
}
|
||||
.quill-tab-list {
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
.quill-tab-button {
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.quill-tab-button.active {
|
||||
color: #007bff;
|
||||
background-color: white;
|
||||
border-bottom: 2px solid #007bff;
|
||||
}
|
||||
.quill-tab-content-list {
|
||||
padding: 15px;
|
||||
}
|
||||
.quill-tab-content {
|
||||
display: none;
|
||||
}
|
||||
.quill-tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 标签页标题编辑样式 */
|
||||
.tab-title-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title-text {
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.title-input {
|
||||
width: 100px;
|
||||
margin: -2px 0; /* 与标签对齐 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,9 +5,16 @@ class ImageBlot extends BlockEmbed {
|
||||
let node = super.create();
|
||||
node.setAttribute("src", value.url);
|
||||
node.setAttribute("id", value.id);
|
||||
|
||||
console.log("图片信息", node);
|
||||
return node;
|
||||
}
|
||||
|
||||
// 允许通过键盘删除
|
||||
deleteAt(index, length) {
|
||||
console.log(index, length, "===============>");
|
||||
console.log("===========super===========");
|
||||
super.deleteAt(index, length);
|
||||
}
|
||||
static value(node) {
|
||||
return {
|
||||
url: node.getAttribute("src"),
|
||||
@@ -15,6 +22,6 @@ class ImageBlot extends BlockEmbed {
|
||||
};
|
||||
}
|
||||
}
|
||||
ImageBlot.blotName = "image";
|
||||
ImageBlot.blotName = "customImage";
|
||||
ImageBlot.tagName = "img";
|
||||
export default ImageBlot;
|
||||
|
||||
375
src/components/Editor/quill-tabs.js
Normal file
375
src/components/Editor/quill-tabs.js
Normal file
@@ -0,0 +1,375 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "m-quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 绑定删除键事件
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const node = super.create(value);
|
||||
const tabs = value || [];
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "m-quill-tab-list";
|
||||
tabList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
`
|
||||
);
|
||||
|
||||
// 内容区
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "m-quill-tab-content-list";
|
||||
contentList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 15px;
|
||||
`
|
||||
);
|
||||
|
||||
// 生成标签按钮和内容面板
|
||||
tabs.forEach((tab, index) => {
|
||||
// 标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `m-quill-tab-button`;
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 60px;
|
||||
cursor: pointer;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.appendChild(btn);
|
||||
|
||||
// 内容面板 - 关键修改：设置为可编辑
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `m-quill-tab-content`;
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false"; // 内容面板可编辑
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 编辑按钮
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "m-quill-tab-edit-btn";
|
||||
editBtn.innerHTML = "编辑";
|
||||
editBtn.setAttribute("data-action", "edit");
|
||||
editBtn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display:block;
|
||||
`
|
||||
);
|
||||
// display: flex;
|
||||
//align-items: center;
|
||||
// editBtn.onmouseover = () => {
|
||||
// editBtn.style.color = "#007bff";
|
||||
// };
|
||||
// editBtn.onmouseout = () => {
|
||||
// editBtn.style.color = "#606266";
|
||||
// };
|
||||
tabList.appendChild(editBtn);
|
||||
|
||||
// 标签页切换逻辑
|
||||
const scriptTag = document.createElement("script");
|
||||
// 修改 scriptTag.textContent 中的逻辑
|
||||
scriptTag.textContent = `
|
||||
(function() {
|
||||
const container = document.currentScript.parentElement;
|
||||
const isAdmin = window.location.pathname.includes('/admin');
|
||||
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
|
||||
|
||||
// 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
|
||||
if (!isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
|
||||
} else if (isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
|
||||
}
|
||||
|
||||
// 非管理系统才执行标签切换逻辑（管理系统不执行）
|
||||
if (!isAdmin) {
|
||||
const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
|
||||
const contentPanels = container.querySelectorAll('.m-quill-tab-content');
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const index = parseInt(this.dataset.index);
|
||||
tabButtons.forEach((b, i) => {
|
||||
b.setAttribute('style', \`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
font-size:16px;
|
||||
margin-right: 60px;
|
||||
color: #8f9099;
|
||||
border: none;
|
||||
\${i === index ?
|
||||
'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' :
|
||||
''
|
||||
}
|
||||
\`);
|
||||
});
|
||||
contentPanels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
`;
|
||||
|
||||
node.appendChild(tabList);
|
||||
node.appendChild(contentList);
|
||||
node.appendChild(scriptTag);
|
||||
node.setAttribute("contenteditable", "false");
|
||||
return node;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 移除 eventBoundElements 依赖，直接重新绑定事件（避免弱映射导致的问题）
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
if (editBtn) {
|
||||
// 先移除旧事件，避免重复绑定
|
||||
editBtn.removeEventListener("click", this.handleEditClick);
|
||||
// 绑定新事件（使用箭头函数确保 this 指向正确）
|
||||
this.handleEditClick = e => {
|
||||
e.stopPropagation();
|
||||
console.log("1232323");
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
};
|
||||
editBtn.addEventListener("click", this.handleEditClick);
|
||||
}
|
||||
|
||||
// 标签切换事件
|
||||
const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 增强版删除键处理
|
||||
bindDeleteKeyEvent() {
|
||||
// 阻止从外部删除整个组件
|
||||
this.domNode.addEventListener(
|
||||
"keydown",
|
||||
e => {
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const parentBlock = this.domNode;
|
||||
|
||||
// 判断光标是否在组件内部
|
||||
const isInside = parentBlock.contains(range.commonAncestorContainer);
|
||||
|
||||
// 如果光标在组件外部，阻止删除
|
||||
if (!isInside) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否选中了整个组件
|
||||
if (
|
||||
range.startContainer === parentBlock &&
|
||||
range.endContainer === parentBlock &&
|
||||
range.startOffset === 0 &&
|
||||
range.endOffset >= parentBlock.childNodes.length
|
||||
) {
|
||||
e.preventDefault(); // 阻止删除整个组件
|
||||
}
|
||||
}
|
||||
},
|
||||
true
|
||||
); // 使用捕获阶段
|
||||
|
||||
// 标签栏禁止编辑
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
if (tabList) {
|
||||
tabList.querySelectorAll("*").forEach(el => {
|
||||
el.contentEditable = "false";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size:16px;
|
||||
margin-right: 60px;
|
||||
color: #8f9099;
|
||||
border-bottom: 3px solid transparent;
|
||||
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: panels[i]?.innerHTML || ""
|
||||
});
|
||||
});
|
||||
|
||||
return tabs;
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
const scriptTag = this.domNode.querySelector("script");
|
||||
if (scriptTag) {
|
||||
const newScript = document.createElement("script");
|
||||
|
||||
newScript.textContent = scriptTag.textContent;
|
||||
scriptTag.parentNode.replaceChild(newScript, scriptTag);
|
||||
}
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 重新绑定删除事件
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return TabsBlot.value(this.domNode);
|
||||
}
|
||||
|
||||
// 更新标签页数据（编辑后更新 DOM）
|
||||
updateContents(tabs) {
|
||||
// 清空原有内容
|
||||
const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
// 保留编辑按钮（如果需要）
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
// 清空标签栏和内容区（保留编辑按钮）
|
||||
Array.from(tabList.children).forEach(child => {
|
||||
if (!child.classList.contains("m-quill-tab-edit-btn")) {
|
||||
child.remove();
|
||||
}
|
||||
});
|
||||
contentList.innerHTML = "";
|
||||
|
||||
// 重新渲染标签页（复用 create 方法中的逻辑）
|
||||
tabs.forEach((tab, index) => {
|
||||
// 重建标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "m-quill-tab-button";
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 60px;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
|
||||
|
||||
// 重建内容面板
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "m-quill-tab-content";
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 重新绑定事件（确保切换功能正常）
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
export default TabsBlot;
|
||||
287
src/components/Editor/quill-tabs1.js
Normal file
287
src/components/Editor/quill-tabs1.js
Normal file
@@ -0,0 +1,287 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 绑定删除键事件
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const node = super.create(value);
|
||||
const tabs = value || [];
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "quill-tab-list";
|
||||
tabList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
`
|
||||
);
|
||||
|
||||
// 内容区
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "quill-tab-content-list";
|
||||
contentList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 15px;
|
||||
`
|
||||
);
|
||||
|
||||
// 生成标签按钮和内容面板
|
||||
tabs.forEach((tab, index) => {
|
||||
// 标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.appendChild(btn);
|
||||
|
||||
// 内容面板 - 关键修改：设置为可编辑
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px; /* 确保有编辑区域 */
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "true"; // 内容面板可编辑
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 编辑按钮
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "quill-tab-edit-btn";
|
||||
editBtn.innerHTML = "编辑";
|
||||
editBtn.setAttribute("data-action", "edit");
|
||||
editBtn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
`
|
||||
);
|
||||
editBtn.onmouseover = () => {
|
||||
editBtn.style.color = "#007bff";
|
||||
};
|
||||
editBtn.onmouseout = () => {
|
||||
editBtn.style.color = "#606266";
|
||||
};
|
||||
tabList.appendChild(editBtn);
|
||||
// 标签页切换逻辑
|
||||
const scriptTag = document.createElement("script");
|
||||
scriptTag.textContent = `
|
||||
(function() {
|
||||
const container = document.currentScript.parentElement;
|
||||
const tabButtons = container.querySelectorAll('.quill-tab-button:not([data-action])');
|
||||
const contentPanels = container.querySelectorAll('.quill-tab-content');
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const index = parseInt(this.dataset.index);
|
||||
tabButtons.forEach((b, i) => {
|
||||
b.setAttribute('style', \`
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
\${i === index ?
|
||||
'color: #007bff; background-color: white; border-bottom: 2px solid #007bff;' :
|
||||
''
|
||||
}
|
||||
\`);
|
||||
});
|
||||
|
||||
contentPanels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
`;
|
||||
|
||||
// 组装结构 - 关键修改：移除contenteditable="false"
|
||||
node.appendChild(tabList);
|
||||
node.appendChild(contentList);
|
||||
node.appendChild(scriptTag);
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 编辑按钮事件
|
||||
const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
|
||||
if (editBtn && !this.eventBoundElements.has(editBtn)) {
|
||||
editBtn.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
});
|
||||
this.eventBoundElements.set(editBtn, true);
|
||||
}
|
||||
|
||||
// 标签切换事件
|
||||
const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 增强版删除键处理
|
||||
bindDeleteKeyEvent() {
|
||||
// 阻止从外部删除整个组件
|
||||
this.domNode.addEventListener(
|
||||
"keydown",
|
||||
e => {
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const parentBlock = this.domNode;
|
||||
|
||||
// 判断光标是否在组件内部
|
||||
const isInside = parentBlock.contains(range.commonAncestorContainer);
|
||||
|
||||
// 如果光标在组件外部，阻止删除
|
||||
if (!isInside) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否选中了整个组件
|
||||
if (
|
||||
range.startContainer === parentBlock &&
|
||||
range.endContainer === parentBlock &&
|
||||
range.startOffset === 0 &&
|
||||
range.endOffset >= parentBlock.childNodes.length
|
||||
) {
|
||||
e.preventDefault(); // 阻止删除整个组件
|
||||
}
|
||||
}
|
||||
},
|
||||
true
|
||||
); // 使用捕获阶段
|
||||
|
||||
// 标签栏禁止编辑
|
||||
const tabList = this.domNode.querySelector(".quill-tab-list");
|
||||
if (tabList) {
|
||||
tabList.querySelectorAll("*").forEach(el => {
|
||||
el.contentEditable = "false";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: panels[i].innerHTML
|
||||
});
|
||||
});
|
||||
|
||||
return { tabs };
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
const scriptTag = this.domNode.querySelector("script");
|
||||
if (scriptTag) {
|
||||
const newScript = document.createElement("script");
|
||||
newScript.textContent = scriptTag.textContent;
|
||||
scriptTag.parentNode.replaceChild(newScript, scriptTag);
|
||||
}
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 重新绑定删除事件
|
||||
}
|
||||
}
|
||||
|
||||
export default TabsBlot;
|
||||
180
src/components/Editor/quill-tabs222.js
Normal file
180
src/components/Editor/quill-tabs222.js
Normal file
@@ -0,0 +1,180 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const tabs = Array.isArray(value) ? value : [];
|
||||
const node = super.create(value);
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏容器
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "quill-tab-list";
|
||||
tabList.style.cssText = `
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
`;
|
||||
|
||||
// 内容区容器
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "quill-tab-content-list";
|
||||
contentList.style.cssText = "padding: 15px;";
|
||||
|
||||
// 生成标签和内容
|
||||
tabs.forEach((tab, index) => {
|
||||
// 标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
|
||||
btn.dataset.index = index;
|
||||
btn.textContent = tab.title || `标签${index + 1}`;
|
||||
btn.style.cssText = `
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`;
|
||||
tabList.appendChild(btn);
|
||||
|
||||
// 内容面板
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
|
||||
panel.dataset.index = index;
|
||||
panel.innerHTML = tab.content || "";
|
||||
panel.style.display = index === 0 ? "block" : "none";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 编辑按钮
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "quill-tab-edit-btn";
|
||||
editBtn.textContent = "编辑";
|
||||
editBtn.dataset.action = "edit";
|
||||
editBtn.style.cssText = `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
`;
|
||||
editBtn.onmouseover = () => (editBtn.style.color = "#007bff");
|
||||
editBtn.onmouseout = () => (editBtn.style.color = "#606266");
|
||||
tabList.appendChild(editBtn);
|
||||
|
||||
// 组装DOM
|
||||
node.appendChild(tabList);
|
||||
node.appendChild(contentList);
|
||||
node.contentEditable = "false";
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
// 改进的事件绑定方法，避免重复绑定
|
||||
bindEvents() {
|
||||
// 使用WeakMap存储已绑定的元素，避免重复绑定
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 编辑按钮事件
|
||||
const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
|
||||
if (editBtn && !this.eventBoundElements.has(editBtn)) {
|
||||
editBtn.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
});
|
||||
this.eventBoundElements.set(editBtn, true);
|
||||
}
|
||||
|
||||
// 标签切换事件
|
||||
const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 移除了有问题的unbindEvents方法
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".quill-tab-content");
|
||||
|
||||
if (index < 0 || index >= buttons.length) return;
|
||||
|
||||
// 更新按钮样式
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.style.cssText = `
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`;
|
||||
});
|
||||
|
||||
// 更新内容面板显示
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: panels[i]?.innerHTML || ""
|
||||
});
|
||||
});
|
||||
|
||||
return tabs;
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
export default TabsBlot;
|
||||
@@ -57,7 +57,7 @@ class Video extends BlockEmbed {
|
||||
return `<a href="${video}">${video}</a>`;
|
||||
}
|
||||
}
|
||||
Video.blotName = "video"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
|
||||
Video.blotName = "customVideo"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
|
||||
Video.className = "ql-video"; // 可添加样式，看实际使用需要
|
||||
Video.tagName = "video"; // 用video标签替换iframe
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</template>
|
||||
<template #default="scope" v-if="item.formType === 'inputNumber'">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:controls="true"
|
||||
style="width: 125px"
|
||||
|
||||
@@ -119,9 +119,9 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
const api = props.api ?? uploadImg;
|
||||
|
||||
const result = await api(formData, routerName.value);
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
emit("update:imageUrl", data.path);
|
||||
console.log(result, "============>>>");
|
||||
if (result?.data?.code === 0) {
|
||||
emit("update:imageUrl", result?.data?.data.path);
|
||||
}
|
||||
|
||||
// 调用 el-form 内部的校验方法（可自动校验）
|
||||
|
||||
@@ -134,9 +134,10 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
formData.append("image", options.file);
|
||||
try {
|
||||
const api = props.api ?? uploadImg;
|
||||
|
||||
const { data } = await api(formData, routerName.value);
|
||||
console.log(data.path, "========data==========");
|
||||
options.onSuccess(data.path);
|
||||
console.log(data.data.path, "========data==========");
|
||||
options.onSuccess(data.data.path);
|
||||
} catch (error) {
|
||||
options.onError(error as any);
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</template>
|
||||
<template v-if="item.type === 'inputNumber'">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:controls="true"
|
||||
v-model="_ruleForm[`${item.prop}`]"
|
||||
@@ -178,7 +178,7 @@
|
||||
<slot />
|
||||
</template>
|
||||
<template v-if="item.type === 'WangEditor'">
|
||||
<Editor v-model:content="_ruleForm[`${item.prop}`]"></Editor>
|
||||
<Editor v-model:content="_ruleForm[`${item.prop}`]" ref="editorRef"></Editor>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
@@ -209,7 +209,7 @@ const emits = defineEmits<{
|
||||
(e: "handleRadioGroupEmits", result?: any): void;
|
||||
(e: "handleTreesSelectChangeEmits", result?: any): void;
|
||||
}>();
|
||||
|
||||
const editorRef = ref<any>(null);
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const props = defineProps<IProps>();
|
||||
//本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
|
||||
@@ -235,7 +235,8 @@ const handleRadioGroup = (value: any) => {
|
||||
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
||||
defineExpose({
|
||||
ruleForm: _ruleForm,
|
||||
ruleFormRef: ruleFormRef
|
||||
ruleFormRef: ruleFormRef,
|
||||
editorRef: editorRef
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -271,5 +271,5 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
.el-message__wrapper {
|
||||
z-index: 9999 !important; /* 一个较大的值，确保在抽屉之上 */
|
||||
z-index: 3000 !important; /* 一个较大的值，确保在抽屉之上 */
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<el-tab-pane label="问答详细" name="third">
|
||||
<div style="width: 1280px; margin: 0 auto">
|
||||
<Editor v-model:content="dataStore.editRuleForm.answer" />
|
||||
<Editor v-model:content="dataStore.editRuleForm.answer" ref="editorRef" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -47,6 +47,7 @@ const dataStore = reactive<any>({
|
||||
rules: RULES
|
||||
});
|
||||
const formRef: any = ref(null);
|
||||
const editorRef = ref<any>(null);
|
||||
//详情
|
||||
const getQAListDetails = async () => {
|
||||
let id = $route.query.id;
|
||||
@@ -58,6 +59,9 @@ const getQAListDetails = async () => {
|
||||
const { data } = result;
|
||||
//这里是传给基本信息组件的表单数据
|
||||
dataStore.editRuleForm = cloneDeep(data);
|
||||
if (!data.answer) {
|
||||
editorRef?.value?.clearEditor();
|
||||
}
|
||||
// dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);
|
||||
|
||||
dataStore.value = data.answer;
|
||||
@@ -93,9 +97,11 @@ const handleReset = () => {
|
||||
const resetFields = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
editorRef?.value?.clearEditor();
|
||||
for (let key in dataStore.editRuleForm) {
|
||||
dataStore.editRuleForm[key] = "";
|
||||
}
|
||||
dataStore.editRuleForm.sort = 0;
|
||||
// dataStore.value = "";
|
||||
};
|
||||
|
||||
|
||||
@@ -53,13 +53,19 @@ export const EDIT_FORM_DATA: FormItem[] = [
|
||||
type: "treeSelect",
|
||||
label: "所属分类: ",
|
||||
options: []
|
||||
},
|
||||
{
|
||||
prop: "icon",
|
||||
type: "upImg",
|
||||
label: "图片: "
|
||||
}
|
||||
];
|
||||
export const EDIT_RULE_FORM = {
|
||||
is_show: 1,
|
||||
sort: 1,
|
||||
sort: 0,
|
||||
name: "",
|
||||
pid: 0
|
||||
pid: 0,
|
||||
icon: ""
|
||||
};
|
||||
// editRuleForm: {},
|
||||
//editFormData: [],
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
|
||||
<script setup lang="ts" name="articleClassListIndex">
|
||||
import rulesForm from "@/components/rulesForm/index.vue";
|
||||
import SearchForm from "@/components/SearchForm/index.vue";
|
||||
import { integerRexg } from "@/utils/regexp/index";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
import { h } from "@/utils/url";
|
||||
@@ -174,7 +175,6 @@ const getArticleClassAddSave = async () => {
|
||||
};
|
||||
//文章编辑
|
||||
const getArticleClassUpEdit = async () => {
|
||||
console.log("编辑");
|
||||
const result = await getArticleClassEditUpApi(dataStore.editRuleForm);
|
||||
const { msg, code } = result;
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<el-tab-pane label="详细内容" name="third">
|
||||
<div style="width: 1280px; margin: 0 auto">
|
||||
<Editor v-model:content="dataStore.editRuleForm.content"></Editor>
|
||||
<Editor v-model:content="dataStore.editRuleForm.content" ref="editorRef"></Editor>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -47,7 +47,7 @@ import { useMsg } from "@/hooks/useMsg";
|
||||
const formRef = ref<any>(null);
|
||||
const activeName = ref("basicInfo");
|
||||
const $route = useRoute();
|
||||
|
||||
const editorRef = ref<any>(null);
|
||||
//数据集合
|
||||
const dataStore = reactive<any>({
|
||||
rules: cloneDeep(RULES), //抽屉表单验证
|
||||
@@ -79,6 +79,9 @@ const getArticleListDetails = async () => {
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
dataStore.editRuleForm = data;
|
||||
if (!data.content) {
|
||||
editorRef?.value?.clearEditor(); // 调用子组件的清空方法
|
||||
}
|
||||
// dataStore.editRuleForm.content = convertSpanToDiv(dataStore.editRuleForm.content);
|
||||
let is = dataStore.editFormData[1].options.some((item: any) =>
|
||||
recursiveCompare(item, dataStore.editRuleForm.category_id)
|
||||
@@ -148,6 +151,13 @@ const handleConfirmClick = () => {
|
||||
const handleReset = () => {
|
||||
if ($route.query.type === "add") {
|
||||
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
|
||||
editorRef?.value?.clearEditor(); // 调用子组件的清空方法
|
||||
// if (!data.detail) {
|
||||
// dataStore.detail = "";
|
||||
// editorRef.value.clearEditor(); // 调用子组件的清空方法
|
||||
// } else {
|
||||
// dataStore.detail = cloneDeep(data.detail);
|
||||
// }
|
||||
} else {
|
||||
getArticleListDetails();
|
||||
}
|
||||
|
||||
@@ -121,6 +121,7 @@ const dataStore = reactive<any>({
|
||||
formData: FORM_DATA, // 搜索配置项 dataStore.formData
|
||||
visible: false,
|
||||
data: [],
|
||||
type: "image",
|
||||
isFirstRequest: true
|
||||
});
|
||||
|
||||
@@ -140,6 +141,7 @@ const getProductCategoryList = async () => {
|
||||
const result = await getProductCategoryListApi();
|
||||
if (result?.code === 0) {
|
||||
let dataClone: any = cloneDeep(result?.data);
|
||||
console.log(dataClone, "=dataClone=");
|
||||
dataStore.editFormData[7].options = addLabelValue(dataClone);
|
||||
}
|
||||
};
|
||||
@@ -164,6 +166,7 @@ const buildTree = (data: any, outerLinkTo: any = "") => {
|
||||
};
|
||||
// let isFirstRequest = true;
|
||||
const handleRadioGroupEmits = (value: any) => {
|
||||
dataStore.type = value;
|
||||
if (value === "video") {
|
||||
dataStore.editFormData = EDIT_FORM_DATA1;
|
||||
dataStore.rules = RULES1;
|
||||
@@ -205,6 +208,7 @@ const getSystemUrls = async (node: any, resolve: any) => {
|
||||
}
|
||||
};
|
||||
const setImgOrVideo = (result: any) => {
|
||||
dataStore.type = result?.data?.type;
|
||||
if (result?.data?.type === "image") {
|
||||
dataStore.editFormData = cloneDeep(EDIT_FORM_DATA);
|
||||
}
|
||||
@@ -224,6 +228,9 @@ const getBannerRead = async (id: any) => {
|
||||
if (result?.code === 0) {
|
||||
setImgOrVideo(result);
|
||||
getProductCategoryList();
|
||||
if (result?.data?.type === "image" && !result?.data?.desc) {
|
||||
formRef?.value?.editorRef[0]?.clearEditor();
|
||||
}
|
||||
nextTick(() => {
|
||||
dataStore.editRuleForm = result?.data;
|
||||
if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
|
||||
@@ -231,7 +238,6 @@ const getBannerRead = async (id: any) => {
|
||||
if (!id || !name || !link) {
|
||||
return;
|
||||
}
|
||||
console.log("1232323");
|
||||
let obj: any = {
|
||||
label: name, // 确保这里的name是你想要显示的文本
|
||||
value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
|
||||
@@ -249,6 +255,7 @@ const getBannerRead = async (id: any) => {
|
||||
};
|
||||
const handleCheck = (checkedNodes: any, values: any) => {
|
||||
const { checkedKeys } = values;
|
||||
console.log(checkedKeys, "=checkedKeys=");
|
||||
if (checkedKeys.length) {
|
||||
dataStore.editRuleForm.link = checkedNodes.url;
|
||||
dataStore.editRuleForm.link_to = checkedNodes.link_to;
|
||||
@@ -331,6 +338,9 @@ const handleConfirmClick = () => {
|
||||
const resetFields = () => {
|
||||
if (!formRef.value!.ruleFormRef) return;
|
||||
formRef!.value!.ruleFormRef.resetFields();
|
||||
if (dataStore.type === "image") {
|
||||
formRef?.value?.editorRef[0]?.clearEditor();
|
||||
}
|
||||
};
|
||||
// 抽屉重置
|
||||
const handleResetClick = () => {
|
||||
|
||||
@@ -61,7 +61,7 @@ const $route = useRoute();
|
||||
import { getCategorysApi } from "@/api/modules/downloadClass";
|
||||
import { recursiveCompare } from "@/utils/recursiveCompare";
|
||||
import { addLabelValue } from "@/utils/addLabelValue";
|
||||
|
||||
import { ElNotification } from "element-plus";
|
||||
//深拷贝方法
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import {
|
||||
@@ -156,7 +156,6 @@ const excelUploadSuccess = (response: any, row: any) => {
|
||||
if (response?.code === 0) {
|
||||
row.file_path = response.data.path; // 假设后端返回的文件路径在 data.path 中
|
||||
}
|
||||
console.log(row, "====row========");
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件上传成功！`,
|
||||
|
||||
291
src/views/login/index2.vue
Normal file
291
src/views/login/index2.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="left-logo-box"></div>
|
||||
</div>
|
||||
<!-- 登录 -->
|
||||
<div class="right" v-if="dataStore.type === 1">
|
||||
<div class="right-logo-box">
|
||||
<div>
|
||||
<div class="right-logo-font">登录</div>
|
||||
<div class="sign-in">Sign in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 100px">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="width: 300px"
|
||||
:model="dataStore.ruleForm"
|
||||
:rules="dataStore.rules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="dataStore.ruleForm.password"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 350px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #4178d5;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="handleTabClick(2)"
|
||||
>
|
||||
忘记密码?
|
||||
</div> -->
|
||||
</el-form-item>
|
||||
<!-- <el-form-item prop="captcha">
|
||||
<span style="margin-right: 10px; color: #606266">验证码</span>
|
||||
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
||||
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
||||
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="submitForm"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!--忘记密码 -->
|
||||
<div class="right" v-if="dataStore.type === 2">
|
||||
<div style="margin-left: 100px">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="ArrowLeftBold"
|
||||
circle
|
||||
style="margin: 60px 0 20px"
|
||||
@click="handleTabClick(1)"
|
||||
/>
|
||||
<el-form
|
||||
ref="resetRuleFormRef"
|
||||
:model="dataStore.resetRuleForm"
|
||||
:rules="dataStore.resetRules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="手机号" prop="iphone">
|
||||
<el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码">
|
||||
<el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
|
||||
<template #append>
|
||||
<div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
|
||||
{{ dataStore.codeFont }}
|
||||
</div>
|
||||
<div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
|
||||
{{ dataStore.timeCount }}s
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.confirmPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="resetConfirmForm"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import CryptoJS from "crypto-js";
|
||||
//loginCodeImgApi
|
||||
import { loginApi } from "@/api/modules/login";
|
||||
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
|
||||
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//用户信息存储
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const $router = useRouter();
|
||||
//登录表单Ref
|
||||
const ruleFormRef: any = ref(null);
|
||||
//修改密码表单Ref
|
||||
const resetRuleFormRef: any = ref(null);
|
||||
//数据源
|
||||
const dataStore = reactive<any>({
|
||||
timeCount: 120, //修改密码里验证码倒计时
|
||||
isShowTime: false,
|
||||
|
||||
base64: "", //验证码图片
|
||||
type: 1, //1:登录,2:修改密码
|
||||
codeFont: "获取验证码", //修改密码里的验证码按钮文字
|
||||
ruleForm: cloneDeep(RULE_FORM), //登录表单数据
|
||||
rules: cloneDeep(RULES), //登录表单验证
|
||||
resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
|
||||
resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
|
||||
});
|
||||
//计时器
|
||||
let intervalId: any = null;
|
||||
|
||||
//登录
|
||||
const submitForm = () => {
|
||||
console.log(ruleFormRef);
|
||||
if (!ruleFormRef) return;
|
||||
ruleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
login();
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//忘记密码提交事件
|
||||
const resetConfirmForm = () => {
|
||||
if (!resetRuleFormRef) return;
|
||||
resetRuleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
|
||||
console.log(password, "==== dataStore.ruleForm.password====");
|
||||
console.log("submit!");
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//登录接口
|
||||
const login = async () => {
|
||||
const result: any = await loginApi({
|
||||
...dataStore.ruleForm,
|
||||
password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
|
||||
});
|
||||
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
setUserData(data);
|
||||
}
|
||||
// else {
|
||||
// getLoginCodeImg();
|
||||
// }
|
||||
};
|
||||
//获取验证码图片接口
|
||||
// const getLoginCodeImg = async () => {
|
||||
// const result: any = await loginCodeImgApi();
|
||||
// if (result?.code === 0) {
|
||||
// const { data } = result;
|
||||
// const { captcha, token } = data;
|
||||
// dataStore.base64 = captcha;
|
||||
// dataStore.ruleForm.token = token;
|
||||
// }
|
||||
// };
|
||||
// getLoginCodeImg();
|
||||
//登录和密码重置切换
|
||||
const handleTabClick = (type: any) => {
|
||||
dataStore.type = type;
|
||||
for (let key in dataStore.ruleForm) {
|
||||
dataStore.ruleForm[key] = "";
|
||||
}
|
||||
for (let key in dataStore.resetRuleForm) {
|
||||
dataStore.resetRuleForm[key] = "";
|
||||
}
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
};
|
||||
//120秒验证时间
|
||||
const updateCountdown = () => {
|
||||
intervalId = setInterval(() => {
|
||||
if (dataStore.timeCount > 0) {
|
||||
dataStore.isShowTime = true;
|
||||
dataStore.timeCount--;
|
||||
} else {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
//获取验证码
|
||||
const handleGetCode = () => {
|
||||
//如果计时器已经启动了,就不要再去触发了
|
||||
if (intervalId) {
|
||||
return;
|
||||
}
|
||||
resetRuleFormRef.value.validateField("iphone", (valid: any) => {
|
||||
if (valid) {
|
||||
updateCountdown();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
//清理定时器
|
||||
const handleClearInterval = () => {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
};
|
||||
|
||||
// 设置用户数据
|
||||
const setUserData = (data: any) => {
|
||||
const { username, uid, token, avatar } = data;
|
||||
console.log();
|
||||
// 设置token
|
||||
userStore.setToken("Bearer" + " " + token);
|
||||
userStore.setUid(uid);
|
||||
userStore.setNickname(username);
|
||||
userStore.setAvatar(avatar);
|
||||
// await userStore.getAuthMenuList();
|
||||
//跳转到首页
|
||||
setTimeout(() => {
|
||||
$router.push("/admin/index");
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
//页面卸载的时候清空定时器
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -38,7 +38,7 @@
|
||||
<!-- <el-input v-model="_ruleFormParam.sort" /> -->
|
||||
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:controls="true"
|
||||
v-model="_ruleFormParam.sort"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<div class="table-box">
|
||||
<div style="padding-bottom: 16px">
|
||||
<el-button @click="handleReset(dataStore)"> 重置 </el-button>
|
||||
<el-button @click="handleReset(dataStore, editorRef)"> 重置 </el-button>
|
||||
<el-button type="primary" @click="handleSubmit(infoRef, imgInfoRef, dataStore)"> 提交 </el-button>
|
||||
</div>
|
||||
<div class="card table-main">
|
||||
@@ -16,7 +16,7 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="产品详情" name="third">
|
||||
<div style="width: 1280px; margin: 0 auto">
|
||||
<Editor v-model:content="dataStore.detail" />
|
||||
<Editor v-model:content="dataStore.detail" ref="editorRef" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="相关信息" name="related">
|
||||
@@ -65,6 +65,9 @@ import imgInfo from "./components/imgInfo.vue";
|
||||
import FormTable from "@/components/FormTable/index.vue";
|
||||
|
||||
const $route = useRoute();
|
||||
|
||||
const editorRef = ref<any>(null);
|
||||
|
||||
//数据集合
|
||||
const dataStore = reactive<any>({
|
||||
relatedColumns: cloneDeep(RELATED_INFO_COLUMNS), //相关信息及下载表格配置
|
||||
@@ -94,7 +97,7 @@ const getProductDetails = async () => {
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
//参数初始化(将参数按照不同的tab区分出来)
|
||||
initDetailParams(dataStore, data);
|
||||
initDetailParams(dataStore, data, editorRef);
|
||||
}
|
||||
};
|
||||
getProductDetails();
|
||||
|
||||
@@ -16,7 +16,7 @@ const hasIdRecursive = (data: any, targetId: any) => {
|
||||
};
|
||||
|
||||
//将参数分离
|
||||
export const initDetailParams = (dataStore: any, data: any) => {
|
||||
export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
|
||||
let is = hasIdRecursive(dataStore.options, data.category_id);
|
||||
//基本信息
|
||||
dataStore.basicInfoRuleForm = cloneDeep({
|
||||
@@ -40,9 +40,17 @@ export const initDetailParams = (dataStore: any, data: any) => {
|
||||
stock_qty: data.stock_qty,
|
||||
id: data.id
|
||||
});
|
||||
console.log(data.detail, "=======detail========");
|
||||
|
||||
//详情
|
||||
dataStore.detail = cloneDeep(data.detail);
|
||||
//dataStore.detail = convertSpanToDiv(dataStore.detail);
|
||||
if (!data.detail) {
|
||||
dataStore.detail = "";
|
||||
editorRef?.value?.clearEditor(); // 调用子组件的清空方法
|
||||
} else {
|
||||
dataStore.detail = data.detail;
|
||||
// console.log(dataStore.detail, "=dataStore.detail=");
|
||||
}
|
||||
|
||||
//图片
|
||||
dataStore.imgInfoData.cover_image = data.cover_image;
|
||||
dataStore.imgInfoData.video_url = data.video_url;
|
||||
|
||||
@@ -4,19 +4,19 @@ import { messageBox } from "@/utils/messageBox";
|
||||
// import { cloneDeep } from "lodash-es";
|
||||
import { initDetailParams } from "./initDetailParams";
|
||||
//详情(重置,重新获取一下详情)
|
||||
const getProductDetails = async (dataStore: any) => {
|
||||
const getProductDetails = async (dataStore: any, editorRef: any) => {
|
||||
const { id } = dataStore.basicInfoRuleForm;
|
||||
const result = await getProductDetailsApi(id);
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
|
||||
initDetailParams(dataStore, data);
|
||||
initDetailParams(dataStore, data, editorRef);
|
||||
useMsg("success", "重置成功 !");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleReset = (dataStore: any) => {
|
||||
export const handleReset = (dataStore: any, editorRef?: any) => {
|
||||
messageBox("该操作会将数据重置为初始状态", () => {
|
||||
getProductDetails(dataStore);
|
||||
getProductDetails(dataStore, editorRef);
|
||||
});
|
||||
};
|
||||
|
||||
371
vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
Normal file
371
vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user