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

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;
}
};