yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 切换富文本编辑器

Browse Source
This commit is contained in:
yangchunlong
2025-05-07 17:55:49 +08:00
parent 4bd5797772
commit ab003714bf
28 changed files with 1145 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components.d.ts vendored
View File

@@ -11,21 +11,15 @@ declare module "vue" {
404: typeof import("./components/ErrorMessage/404.vue")["default"];
500: typeof import("./components/ErrorMessage/500.vue")["default"];
ColSetting: typeof import("./components/ProTable/components/ColSetting.vue")["default"];
Editor: typeof import("./components/Editor/index.vue")["default"];
ElAside: typeof import("element-plus/es")["ElAside"];
ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"];
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
ElButton: typeof import("element-plus/es")["ElButton"];
ElCarousel: typeof import("element-plus/es")["ElCarousel"];
ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"];
ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
ElContainer: typeof import("element-plus/es")["ElContainer"];
ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
ElDialog: typeof import("element-plus/es")["ElDialog"];
ElDivider: typeof import("element-plus/es")["ElDivider"];
ElDrawer: typeof import("element-plus/es")["ElDrawer"];
ElDropdown: typeof import("element-plus/es")["ElDropdown"];
ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
@@ -33,28 +27,19 @@ declare module "vue" {
ElFormItem: typeof import("element-plus/es")["ElFormItem"];
ElHeader: typeof import("element-plus/es")["ElHeader"];
ElIcon: typeof import("element-plus/es")["ElIcon"];
ElImage: typeof import("element-plus/es")["ElImage"];
ElInput: typeof import("element-plus/es")["ElInput"];
ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
ElMain: typeof import("element-plus/es")["ElMain"];
ElMenu: typeof import("element-plus/es")["ElMenu"];
ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
ElOption: typeof import("element-plus/es")["ElOption"];
ElPagination: typeof import("element-plus/es")["ElPagination"];
ElRadio: typeof import("element-plus/es")["ElRadio"];
ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
ElSelect: typeof import("element-plus/es")["ElSelect"];
ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
ElSwitch: typeof import("element-plus/es")["ElSwitch"];
ElTable: typeof import("element-plus/es")["ElTable"];
ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
ElTabPane: typeof import("element-plus/es")["ElTabPane"];
ElTabs: typeof import("element-plus/es")["ElTabs"];
ElTag: typeof import("element-plus/es")["ElTag"];
ElTooltip: typeof import("element-plus/es")["ElTooltip"];
ElTree: typeof import("element-plus/es")["ElTree"];
ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
ElUpload: typeof import("element-plus/es")["ElUpload"];
Empty: typeof import("./components/ProTable/components/Empty.vue")["default"];

80
src/components/Editor/index.scss Normal file
View File

@@ -0,0 +1,80 @@
.editor,
.ql-toolbar {
line-height: normal !important;
white-space: pre-wrap !important;
}
.editor-img-uploader {
display: none;
}
.ql-editor {
min-height: 600px;
max-height: 600px;
overflow: auto;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
padding-right: 0;
content: "保存";
border-right: 0;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.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 {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}

242
src/components/Editor/index.vue Normal file
View File

@@ -0,0 +1,242 @@
<template>
<el-upload
:id="uuid"
action="#"
:multiple="false"
:show-file-list="false"
:http-request="handleHttpUpload"
:before-upload="handleBeforeUpload"
class="editor-img-uploader"
accept=".jpeg,.jpg,.png"
>
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
</el-upload>
<!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
<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="editorId"
ref="myQuillEditor"
v-model:content="editorContent"
contentType="html"
@update:content="onContentChange"
:options="options"
/>
</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 { 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 ImageBlot from "./quill-image";
import Video from "./quill-video";
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 props = defineProps({
/* 编辑器的内容 */
content: {
type: String,
default: ""
},
/* 只读 */
readOnly: {
type: Boolean,
default: false
},
// 上传文件大小限制(MB)
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 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"] // 链接、图片、视频
],
handlers: {
// 重写图片上传事件
image: function (value) {
if (value) {
//调用图片上传
proxy.$refs.uploadRef.click();
} else {
Quill.format("image", true);
}
},
video: function (value) {
if (value) {
// 劫持原来的视频点击按钮事件
document.querySelector("#uploadFileVideo")?.click();
} else {
Quill.format("video", true);
}
}
}
}
},
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 } });
}
]
]
}
});
//上传前的钩子
const handleBeforeUpload = file => {
const fileType = file.type;
// 图片
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;
if (!isLt) {
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
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);
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()
});
quill.setSelection(length + 1);
}
} catch (error) {}
};
//视频上传
const handleVideoUpload = async evt => {
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 length = quill.selection.savedRange.index;
const { data } = await uploadVideo(formData);
quill.insertEmbed(length, "video", {
url: h + data.path, //h + data.fileUrl, //
id: generateUUID()
});
uploadFileVideo.value.value = "";
} catch (error) {
console.log(error);
}
};
// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
const onContentChange = content => {
emit("handleRichTextContentChange", content);
};
// 增加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);
}
};
onMounted(() => {
initTitle();
oldContent.value = props.content;
});
</script>
<style lang="scss">
@import "./index.scss";
</style>

20
src/components/Editor/quill-image.js Normal file
View File

@@ -0,0 +1,20 @@
import { Quill } from "@vueup/vue-quill";
let BlockEmbed = Quill.import("blots/block/embed");
class ImageBlot extends BlockEmbed {
static create(value) {
let node = super.create();
node.setAttribute("src", value.url);
node.setAttribute("id", value.id);
return node;
}
static value(node) {
return {
url: node.getAttribute("src"),
id: node.getAttribute("id")
};
}
}
ImageBlot.blotName = "image";
ImageBlot.tagName = "img";
export default ImageBlot;

64
src/components/Editor/quill-video.js Normal file
View File

@@ -0,0 +1,64 @@
import { Quill } from "@vueup/vue-quill";
// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import("blots/block/embed");
const Link = Quill.import("formats/link");
const ATTRIBUTES = ["height", "width"];
class Video extends BlockEmbed {
static create(value) {
let node = super.create();
// 添加video标签所需的属性
node.setAttribute("controls", "controls");
node.setAttribute("playsinline", "true");
node.setAttribute("webkit-playsinline", "true");
node.setAttribute("type", "video/mp4");
// poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
node.setAttribute("poster", value.poster);
node.setAttribute("src", this.sanitize(value.url));
return node;
}
static formats(domNode) {
return ATTRIBUTES.reduce((formats, attribute) => {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute);
}
return formats;
}, {});
}
static sanitize(url) {
return Link.sanitize(url);
}
static value(domNode) {
// 设置自定义的属性值
return {
url: domNode.getAttribute("src"),
poster: domNode.getAttribute("poster")
};
}
format(name, value) {
if (ATTRIBUTES.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value);
} else {
this.domNode.removeAttribute(name);
}
} else {
super.format(name, value);
}
}
html() {
const { video } = this.value();
return `<a href="${video}">${video}</a>`;
}
}
Video.blotName = "video"; // 这里不用改，不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = "ql-video"; // 可添加样式，看实际使用需要
Video.tagName = "video"; // 用video标签替换iframe
export default Video;

47
src/components/Editor/titleConfig.js Normal file
View File

@@ -0,0 +1,47 @@
// toolbar标题（此项是用来增加hover标题）
export const titleConfig = ref([
{ Choice: ".ql-insertMetric", title: "跳转配置" },
{ Choice: ".ql-bold", title: "加粗" },
{ Choice: ".ql-italic", title: "斜体" },
{ Choice: ".ql-underline", title: "下划线" },
{ Choice: ".ql-header", title: "段落格式" },
{ Choice: ".ql-strike", title: "删除线" },
{ Choice: ".ql-blockquote", title: "块引用" },
{ Choice: ".ql-code", title: "插入代码" },
{ Choice: ".ql-code-block", title: "插入代码段" },
{ Choice: ".ql-font", title: "字体" },
{ Choice: ".ql-size", title: "字体大小" },
{ Choice: '.ql-list[value="ordered"]', title: "编号列表" },
{ Choice: '.ql-list[value="bullet"]', title: "项目列表" },
{ Choice: ".ql-direction", title: "文本方向" },
{ Choice: '.ql-header[value="1"]', title: "h1" },
{ Choice: '.ql-header[value="2"]', title: "h2" },
{ Choice: ".ql-align", title: "对齐方式" },
{ Choice: ".ql-color", title: "字体颜色" },
{ Choice: ".ql-background", title: "背景颜色" },
{ Choice: ".ql-image", title: "图像" },
{ Choice: ".ql-video", title: "视频" },
{ Choice: ".ql-link", title: "添加链接" },
{ Choice: ".ql-formula", title: "插入公式" },
{ Choice: ".ql-clean", title: "清除字体格式" },
{ Choice: '.ql-script[value="sub"]', title: "下标" },
{ Choice: '.ql-script[value="super"]', title: "上标" },
{ Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
{ Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
{ Choice: ".ql-header .ql-picker-label", title: "标题大小" },
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
{ Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
{ Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
{ Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: "居中对齐" },
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: "居右对齐" },
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: "两端对齐" }
]);

8
src/components/Editor/utils.js Normal file
View File

@@ -0,0 +1,8 @@
export const routerObj = {
articleEditIndex: "article",
productEditIndex: "product",
bannerListIndex: "banner",
downloadListIndex: "download",
videoListIndex: "video",
QAListIndex: "QA"
};

3
src/components/WangEditor/index.scss
View File

@@ -26,3 +26,6 @@
overflow-y: hidden;
}
}
span img {
display: block !important;
}

18
src/components/WangEditor/index.vue
View File

@@ -20,7 +20,7 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { uploadImg, uploadVideo } from "@/api/modules/upload";
import "@wangeditor/editor/dist/css/style.css";
import { formContextKey, formItemContextKey } from "element-plus";
// import { cloneDeep } from "lodash-es";
// 富文本 DOM 元素
const editorRef = shallowRef();
@@ -28,6 +28,8 @@ const editorRef = shallowRef();
const handleCreated = (editor: any) => {
editorRef.value = editor;
};
console.log(editorRef.value, "=editorRef.value=");
const $router = useRouter();
const routerValueName: string = $router.currentRoute.value.name as string;
const routerObj: any = {
@@ -55,12 +57,23 @@ const props = withDefaults(defineProps<RichEditorProps>(), {
excludeKeys: []
};
},
editorConfig: () => {
return {
placeholder: "请输入内容...",
MENU_CONF: {}
// parseElemHtml: (elemHtml: string, elem: HTMLElement, editor: any) => {
// console.log(editor, "========editor=========");
// console.log(elem.tagName, "=elem.tagName=");
// if (elem.tagName === "SPAN" && elem.querySelector("img")) {
// // 确保 span 元素可以正确显示 img
// elem.style.display = "inline-block";
// }
// return elemHtml;
// }
};
},
height: "500px",
mode: "default",
hideToolBar: false,
@@ -84,7 +97,9 @@ type EmitProps = {
(e: "update:value", val: string): void;
(e: "check-validate"): void;
};
const emit = defineEmits<EmitProps>();
const valueHtml = computed({
get() {
return props.value;
@@ -112,7 +127,6 @@ props.editorConfig.MENU_CONF!["uploadImage"] = {
const result = await uploadImg(formData, routerName.value);
if (result?.code === 0) {
const { data } = result;
console.log(data, "==============data====================");
insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.path);
}
} catch (error) {

1
src/components/WangEditor/text.txt Normal file
View File

File diff suppressed because one or more lines are too long

3
src/components/rulesForm/index.vue
View File

@@ -178,7 +178,7 @@
<slot />
</template>
<template v-if="item.type === 'WangEditor'">
<WangEditor v-model:value="_ruleForm[`${item.prop}`]" />
<Editor v-model:content="_ruleForm[`${item.prop}`]"></Editor>
</template>
</el-form-item>
</template>
@@ -189,6 +189,7 @@
import type { FormInstance, FormRules } from "element-plus";
import UploadVideo from "@/components/Upload/UploadVideo.vue";
import UploadImg from "@/components/Upload/UploadImg.vue";
import Editor from "@/components/Editor/index.vue";
interface IProps {
ruleForm: { [key: string]: any };
formData: any[];

4
src/main.ts
View File

@@ -33,8 +33,10 @@ import errorHandler from "@/utils/errorHandler";
import VXETable from "vxe-table";
import "vxe-table/lib/style.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
const app = createApp(App);
app.config.errorHandler = errorHandler;
app.use(directives).use(router).use(pinia).use(VXETable).mount("#app");
app.use(directives).use(router).use(pinia).use(VXETable).use(mavonEditor).mount("#app");

15
src/utils/convertSpanToDiv.ts Normal file
View File

@@ -0,0 +1,15 @@
export const convertSpanToDiv = (html: any) => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const spans = doc.querySelectorAll("span");
if (!spans.length) {
return;
}
spans.forEach((span: any) => {
if (span.querySelector("img")) {
const img = span.querySelector("img");
span.parentNode.replaceChild(img, span);
}
});
return doc.body.innerHTML;
};

13
src/utils/recursiveCompare.ts Normal file
View File

@@ -0,0 +1,13 @@
export const recursiveCompare = (item: any, targetId: any) => {
if (typeof item === "object" && item !== null) {
if (item.value !== undefined && item.value === targetId) {
return true;
}
for (const key in item) {
if (recursiveCompare(item[key], targetId)) {
return true;
}
}
}
return false;
};

8
src/views/QAManagement/list/edit.vue
View File

@@ -20,7 +20,7 @@
<el-tab-pane label="问答详细" name="third">
<div style="width: 1280px; margin: 0 auto">
<WangEditor v-model:value="dataStore.editRuleForm.answer" />
<Editor v-model:value="dataStore.editRuleForm.answer" />
</div>
</el-tab-pane>
</el-tabs>
@@ -32,7 +32,8 @@
import rulesForm from "@/components/rulesForm/index.vue";
import { getQAListDetailsApi, getQAListEditUpApi, getQAListSaveApi } from "@/api/modules/QAList";
import { ref, reactive } from "vue";
import WangEditor from "@/components/WangEditor/index.vue";
// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
import Editor from "@/components/Editor/index.vue";
import { useMsg } from "@/hooks/useMsg";
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
import { cloneDeep } from "lodash-es";
@@ -49,7 +50,6 @@ const formRef: any = ref(null);
//详情
const getQAListDetails = async () => {
let id = $route.query.id;
console.log(id, "=========id========");
if (!id) {
return;
}
@@ -58,6 +58,8 @@ const getQAListDetails = async () => {
const { data } = result;
//这里是传给基本信息组件的表单数据
dataStore.editRuleForm = cloneDeep(data);
// dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);
dataStore.value = data.answer;
}
};

8
src/views/articleManagement/class/index.vue
View File

@@ -27,6 +27,12 @@
{{ row.is_show === 1 ? "✔️" : "❌" }}
</template>
</el-table-column>
<el-table-column prop="icon" label="图片">
<template #default="{ row }">
<el-image :src="row.icon ? h + row.icon : ''" style="width: 60px; height: 60px" />
</template>
</el-table-column>
<!-- <template #default="scope"> -->
<el-table-column label="操作" :width="240">
<template #default="scope">
@@ -77,6 +83,8 @@
<script setup lang="ts" name="articleClassListIndex">
import rulesForm from "@/components/rulesForm/index.vue";
import { integerRexg } from "@/utils/regexp/index";
import { h } from "@/utils/url";
// import ProTable from "@/components/ProTable/index.vue";
import { messageBox } from "@/utils/messageBox";
import { useMsg } from "@/hooks/useMsg";

2
src/views/articleManagement/list/constant/edit.ts
View File

@@ -29,7 +29,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
{
prop: "category_id1",
placeholder: "请选择",
type: "select",
type: "treeSelect",
label: "文章分类: ",
options: []
},

2
src/views/articleManagement/list/constant/search.ts
View File

@@ -27,7 +27,7 @@ export const FORM_DATA: FormItem[] = [
{
prop: "category_id",
placeholder: "请选择",
type: "select",
type: "treeSelect",
isArray: true,
label: "文章分类: ",
options: []

37
src/views/articleManagement/list/edit.vue
View File

@@ -20,7 +20,7 @@
<el-tab-pane label="详细内容" name="third">
<div style="width: 1280px; margin: 0 auto">
<WangEditor v-model:value="dataStore.editRuleForm.content" />
<Editor v-model:content="dataStore.editRuleForm.content"></Editor>
</div>
</el-tab-pane>
</el-tabs>
@@ -30,18 +30,17 @@
<script setup lang="ts" name="articleEditIndex">
import rulesForm from "@/components/rulesForm/index.vue";
import Editor from "@/components/Editor/index.vue";
import {
getArticleClassDataApi,
getArticleListAddSaveApi,
getArticleListDetailsApi,
getArticleListUpApi
} from "@/api/modules/articleList";
// /handleSubmit,
import { recursiveCompare } from "@/utils/recursiveCompare";
import { EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
import { useSearchInfoArray } from "@/hooks/useSearch";
import { ref, reactive } from "vue";
import WangEditor from "@/components/WangEditor/index.vue";
// import rulesForm from "@/components/rulesForm/index.vue";
import { cloneDeep } from "lodash-es";
import { useMsg } from "@/hooks/useMsg";
@@ -56,12 +55,26 @@ const dataStore = reactive<any>({
editFormData: cloneDeep(EDIT_FORM_DATA) //抽屉表单配置项
});
const addLabelValue = (arr: any) => {
return arr.map((item: any) => {
// 为当前对象添加 label 和 value 属性
const newItem = { ...item };
newItem.label = newItem.name;
newItem.value = newItem.id;
// 如果有子对象，递归调用 addLabelValue 处理子对象
if (newItem.children && Array.isArray(newItem.children)) {
newItem.children = addLabelValue(newItem.children);
}
return newItem;
});
};
//文章分类
const getArticleClassData = async () => {
const result = await getArticleClassDataApi({ is_show: 1 });
if (result?.code === 0) {
const { data } = result;
dataStore.editFormData[1].options = useSearchInfoArray(data);
dataStore.editFormData[1].options = addLabelValue(data);
//如果有category_id就代表是从文章分类跳转过来的
if ($route.query.category_id) {
dataStore.editRuleForm.category_id = Number($route.query.category_id);
@@ -80,18 +93,14 @@ const getArticleListDetails = async () => {
if (result?.code === 0) {
const { data } = result;
dataStore.editRuleForm = data;
console.log(data);
let is = dataStore.editFormData[1].options.some((item: any) => {
console.log(item.id);
console.log(dataStore.editRuleForm.category_id);
return item.value == dataStore.editRuleForm.category_id;
});
// dataStore.editRuleForm.content = convertSpanToDiv(dataStore.editRuleForm.content);
let is = dataStore.editFormData[1].options.some((item: any) =>
recursiveCompare(item, dataStore.editRuleForm.category_id)
);
dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
}
};
const handleSelectChangeEmits = (value: any) => {
console.log(value, "=======value========");
if (value?.prop === "category_id1") {
dataStore.editRuleForm.category_id = value.id;
}

17
src/views/articleManagement/list/index.vue
View File

@@ -38,7 +38,7 @@ import {
getArticleListExportApi,
getArticleListDelApi
} from "@/api/modules/articleList";
import { useSearchInfoArray } from "@/hooks/useSearch";
// import { useSearchInfoArray } from "@/hooks/useSearch";
//深拷贝方法
import { cloneDeep } from "lodash-es";
//表格和搜索條件
@@ -57,13 +57,26 @@ const dataStore = reactive<any>({
formData: FORM_DATA, //搜索配置项
selectRow: {} //当前选择的row
});
const addLabelValue = (arr: any) => {
return arr.map((item: any) => {
// 为当前对象添加 label 和 value 属性
const newItem = { ...item };
newItem.label = newItem.name;
newItem.value = newItem.id;
// 如果有子对象，递归调用 addLabelValue 处理子对象
if (newItem.children && Array.isArray(newItem.children)) {
newItem.children = addLabelValue(newItem.children);
}
return newItem;
});
};
//文章分类(搜索条件)
const getArticleClassData = async () => {
const result = await getArticleClassDataApi();
if (result?.code === 0) {
const { data } = result;
dataStore.formData[1].options = useSearchInfoArray(data);
dataStore.formData[1].options = addLabelValue(data);
}
};
getArticleClassData();

18
src/views/articleManagement/recycle/index.vue
View File

@@ -27,7 +27,7 @@
import ProTable from "@/components/ProTable/index.vue";
import { messageBox } from "@/utils/messageBox";
import { useMsg } from "@/hooks/useMsg";
import { useSearchInfoArray } from "@/hooks/useSearch";
import { h } from "@/utils/url";
//列表接口
import { getArticleTrashListApi, getArticleTrashDelApi, getArticleTrashRestoreApi } from "@/api/modules/articleRecycle";
@@ -66,12 +66,26 @@ const getArticleTrashDel = (id: any) => {
}
});
};
const addLabelValue = (arr: any) => {
return arr.map((item: any) => {
// 为当前对象添加 label 和 value 属性
const newItem = { ...item };
newItem.label = newItem.name;
newItem.value = newItem.id;
// 如果有子对象，递归调用 addLabelValue 处理子对象
if (newItem.children && Array.isArray(newItem.children)) {
newItem.children = addLabelValue(newItem.children);
}
return newItem;
});
};
//文章分类(搜索条件)
const getArticleClassData = async () => {
const result = await getArticleClassDataApi();
if (result?.code === 0) {
const { data } = result;
dataStore.formData[1].options = useSearchInfoArray(data);
dataStore.formData[1].options = addLabelValue(data);
}
};
getArticleClassData();

31
src/views/downloadManagement/list/edit.vue
View File

@@ -59,6 +59,7 @@ import { useMsg } from "@/hooks/useMsg";
import { Delete } from "@element-plus/icons-vue";
const $route = useRoute();
import { getCategorysApi } from "@/api/modules/downloadClass";
import { recursiveCompare } from "@/utils/recursiveCompare";
//深拷贝方法
import { cloneDeep } from "lodash-es";
import {
@@ -219,6 +220,20 @@ const handleEditAdd = () => {
file_ext: "" //文件格式
});
};
// const recursiveCompare = (item: any, targetId: any) => {
// if (typeof item === "object" && item !== null) {
// if (item.value !== undefined && item.value === targetId) {
// return true;
// }
// for (const key in item) {
// if (recursiveCompare(item[key], targetId)) {
// return true;
// }
// }
// }
// return false;
// };
//详情
const getAttachmentRead = async () => {
let id = $route.query.id;
@@ -229,12 +244,16 @@ const getAttachmentRead = async () => {
if (result?.code === 0) {
dataStore.editRuleForm = result?.data;
dataStore.editTableData = result?.data.attach;
let is = dataStore.editFormData[1].options.some((item: any) => {
console.log(item.id);
console.log(dataStore.editRuleForm.category_id);
return item.value == dataStore.editRuleForm.category_id;
});
//recursiveCompare
let is = dataStore.editFormData[1].options.some((item: any) =>
recursiveCompare(item, dataStore.editRuleForm.category_id)
);
console.log(is, "========is==========");
// let is = dataStore.editFormData[1].options.some((item: any) => {
// console.log(item.id);
// console.log(dataStore.editRuleForm.category_id);
// return item.value == dataStore.editRuleForm.category_id;
// });
dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
}
};

6
src/views/productManagement/list/edit.vue
View File

@@ -16,7 +16,7 @@
</el-tab-pane>
<el-tab-pane label="产品详情" name="third">
<div style="width: 1280px; margin: 0 auto">
<WangEditor v-model:value="dataStore.detail" />
<Editor v-model:value="dataStore.detail" />
</div>
</el-tab-pane>
<el-tab-pane label="相关信息" name="related">
@@ -42,7 +42,7 @@
<script setup lang="ts" name="productEditIndex">
import { ref, reactive } from "vue";
//getProductAttrsApi
import Editor from "@/components/Editor/index.vue";
import {
getProductDetailsApi,
getProductListApi,
@@ -60,7 +60,7 @@ import { addLabelValue } from "./utils/common/addLabelValue";
//组件引入
import basicInfo from "./components/basicInfo.vue";
import imgInfo from "./components/imgInfo.vue";
import WangEditor from "@/components/WangEditor/index.vue";
//import WangEditor from "@/components/WangEditor/index.vue";
import FormTable from "@/components/FormTable/index.vue";
const $route = useRoute();

3
src/views/productManagement/list/utils/edit/initDetailParams.ts
View File

@@ -1,5 +1,5 @@
import { cloneDeep } from "lodash-es";
// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
const hasIdRecursive = (data: any, targetId: any) => {
for (let i = 0; i < data.length; i++) {
const item = data[i];
@@ -42,6 +42,7 @@ export const initDetailParams = (dataStore: any, data: any) => {
});
//详情
dataStore.detail = cloneDeep(data.detail);
//dataStore.detail = convertSpanToDiv(dataStore.detail);
//图片
dataStore.imgInfoData.cover_image = data.cover_image;
dataStore.imgInfoData.video_url = data.video_url;

14
src/views/videoManagement/list/index.vue
View File

@@ -73,6 +73,7 @@ import {
getVideoSaveApi,
getVideoClassListApi
} from "@/api/modules/videoList";
import { recursiveCompare } from "@/utils/recursiveCompare";
// import { getVideoClassListApi } from "@/api/modules/videoClass";
//深拷贝方法
import { cloneDeep } from "lodash-es";
@@ -177,11 +178,14 @@ const getVideoRead = async (id: any) => {
const result = await getVideoReadApi(id);
if (result?.code === 0) {
dataStore.editRuleForm = result?.data;
let is = dataStore.editFormData[1].options.some((item: any) => {
console.log(item.id);
console.log(dataStore.editRuleForm.category_id);
return item.value == dataStore.editRuleForm.category_id;
});
// let is = dataStore.editFormData[1].options.some((item: any) => {
// console.log(item.id);
// console.log(dataStore.editRuleForm.category_id);
// return item.value == dataStore.editRuleForm.category_id;
// });
let is = dataStore.editFormData[1].options.some((item: any) =>
recursiveCompare(item, dataStore.editRuleForm.category_id)
);
dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
}
};