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-07-17 15:20:57 +08:00
parent cc894333bf
commit e2261c5fc4
13 changed files with 161 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components.d.ts vendored
View File

@@ -5,62 +5,62 @@
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
export {} export {}
declare module 'vue' { declare module "vue" {
export interface GlobalComponents { export interface GlobalComponents {
ElAside: typeof import('element-plus/es')['ElAside'] ElAside: typeof import("element-plus/es")["ElAside"];
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete'] ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"];
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import("element-plus/es")["ElButton"];
ElCarousel: typeof import("element-plus/es")["ElCarousel"] ElCarousel: typeof import("element-plus/es")["ElCarousel"];
ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"] ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"];
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
ElColorPicker: typeof import("element-plus/es")["ElColorPicker"] ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
ElContainer: typeof import('element-plus/es')['ElContainer'] ElContainer: typeof import("element-plus/es")["ElContainer"];
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import("element-plus/es")["ElDialog"];
ElDivider: typeof import('element-plus/es')['ElDivider'] ElDivider: typeof import("element-plus/es")["ElDivider"];
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import("element-plus/es")["ElDrawer"];
ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdown: typeof import("element-plus/es")["ElDropdown"];
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import("element-plus/es")["ElForm"];
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import("element-plus/es")["ElFormItem"];
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import("element-plus/es")["ElHeader"];
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import("element-plus/es")["ElIcon"];
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import("element-plus/es")["ElImage"];
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import("element-plus/es")["ElInput"];
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
ElMain: typeof import('element-plus/es')['ElMain'] ElMain: typeof import("element-plus/es")["ElMain"];
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import("element-plus/es")["ElMenu"];
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import("element-plus/es")["ElOption"];
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import("element-plus/es")["ElPagination"];
ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadio: typeof import("element-plus/es")["ElRadio"];
ElRadioButton: typeof import("element-plus/es")["ElRadioButton"] ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import("element-plus/es")["ElSelect"];
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import("element-plus/es")["ElSwitch"];
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import("element-plus/es")["ElTable"];
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabPane: typeof import("element-plus/es")["ElTabPane"];
ElTabs: typeof import('element-plus/es')['ElTabs'] ElTabs: typeof import("element-plus/es")["ElTabs"];
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import("element-plus/es")["ElTag"];
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import("element-plus/es")["ElTooltip"];
ElTree: typeof import("element-plus/es")["ElTree"] ElTree: typeof import("element-plus/es")["ElTree"];
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
ElUpload: typeof import('element-plus/es')['ElUpload'] ElUpload: typeof import("element-plus/es")["ElUpload"];
IEpArrowDown: typeof import('~icons/ep/arrow-down')['default'] IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
IEpCircleClose: typeof import('~icons/ep/circle-close')['default'] IEpCircleClose: typeof import("~icons/ep/circle-close")["default"];
IEpFolderDelete: typeof import('~icons/ep/folder-delete')['default'] IEpFolderDelete: typeof import("~icons/ep/folder-delete")["default"];
IEpFullScreen: typeof import('~icons/ep/full-screen')['default'] IEpFullScreen: typeof import("~icons/ep/full-screen")["default"];
IEpRemove: typeof import('~icons/ep/remove')['default'] IEpRemove: typeof import("~icons/ep/remove")["default"];
IEpSearch: typeof import('~icons/ep/search')['default'] IEpSearch: typeof import("~icons/ep/search")["default"];
IEpSwitchButton: typeof import('~icons/ep/switch-button')['default'] IEpSwitchButton: typeof import("~icons/ep/switch-button")["default"];
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import("vue-router")["RouterLink"];
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import("vue-router")["RouterView"];
} }
} }

145
src/components/Editor/index.vue
View File

@@ -43,6 +43,7 @@ import { h } from "@/utils/url";
import { routerObj } from "./utils.js"; import { routerObj } from "./utils.js";
import { titleConfig } from "./titleConfig.js"; import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload"; import { uploadVideo, uploadImg } from "@/api/modules/upload";
import { ElNotification } from "element-plus";
//uploadImg //uploadImg
// 字体配置 // 字体配置
let fontSizeStyle = Quill.import("attributors/style/size"); let fontSizeStyle = Quill.import("attributors/style/size");
@@ -87,13 +88,14 @@ const props = defineProps({
const editorContent = computed({ const editorContent = computed({
get: () => props.content, get: () => props.content,
set: val => { set: val => {
console.log(val, "======value==========");
emit("update:content", val); emit("update:content", val);
} }
}); });
//富文本ref //富文本ref
const myQuillEditor = ref(null); const myQuillEditor = ref(null);
//富文本值 //富文本值
const oldContent = ref(""); // const oldContent = ref("");
//富文本配置项 //富文本配置项
const options = reactive({ const options = reactive({
theme: "snow", theme: "snow",
@@ -149,16 +151,32 @@ const options = reactive({
] ]
} }
}); });
// 对 imageListDb 按文件名末尾数字排序（从小到大）
const sortImageListByNumber = () => {
imageListDb.value.sort((a, b) => {
// 提取文件名中的数字（匹配末尾的 -数字 格式）
const getNumber = fileName => {
// 正则匹配：以 - 开头，后面跟数字，且在文件名末尾（\d+$ 表示数字结尾）
const match = fileName.match(/-(\d+)$/);
// 若匹配到数字则返回，否则返回 0（避免无数字的文件排序出错）
return match ? parseInt(match[1], 10) : 0;
};
// 分别获取 a 和 b 文件名中的数字
const numA = getNumber(a.name);
const numB = getNumber(b.name);
// 按数字从小到大排序（numA - numB 为升序）
return numA - numB;
});
};
// 上传前的钩子 // 上传前的钩子
const handleBeforeUpload = file => { const handleBeforeUpload = file => {
const fileType = file.type; const fileType = file.type;
console.log(file, "====file====");
// 为文件添加唯一标识 // 为文件添加唯一标识
file.customUid = generateUUID(); // 确保有唯一ID file.customUid = generateUUID(); // 确保有唯一ID
imageListDb.value.push(file); imageListDb.value.push(file);
sortImageListByNumber();
// 图片和视频格式校验 // 图片和视频格式校验
const validTypes = [ const validTypes = [
"image/jpeg", "image/jpeg",
@@ -177,36 +195,42 @@ const handleBeforeUpload = file => {
// 校检文件大小 // 校检文件大小
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit; const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
if (!isLt) { if (!isLt) {
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`); ElNotification({
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`); title: "温馨提示",
message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
type: "warning"
});
imageListDb.value = [];
return false; return false;
} }
return true; return true;
} else { } else {
alert(`文件格式不正确！`); ElNotification({
title: "温馨提示",
message: `文件格式不正确！`,
type: "warning"
});
imageListDb.value = [];
return false; return false;
} }
}; };
// 图片上传 // 图片上传
const handleHttpUpload = async options => { const handleHttpUpload = async options => {
console.log(imageListDb.value.length, "==============length============");
let formData = new FormData(); let formData = new FormData();
formData.append("image", options.file); formData.append("image", options.file);
imageList.value.push(options.file); imageList.value.push(options.file);
try { try {
const result = await uploadImg(formData, routerName.value, options.file.customUid); const result = await uploadImg(formData, routerName.value, options.file.customUid);
// 假设服务器返回格式为 { imgId: 'xxx', data: { code: 0, data: { path: 'xxx' } } } // 假设服务器返回格式为 { imgId: 'xxx', data: { code: 0, data: { path: 'xxx' } } }
const { imgId } = result; const { imgId } = result;
console.log(imgId, "==========imgId from server");
if (result?.data?.code === 0) { if (result?.data?.code === 0) {
const { data } = result?.data; const { data } = result?.data;
// 1. 通过customUid查找对应的文件对象 // 1. 通过customUid查找对应的文件对象
const fileItem = imageListDb.value.find(item => item.customUid === options.file.customUid); const fileItem = imageListDb.value.find(item => item.customUid === imgId);
if (fileItem) { if (fileItem) {
fileItem.serverImgId = imgId; // 保存服务器返回的imgId fileItem.serverImgId = imgId; // 保存服务器返回的imgId
fileItem.path = data.path; // 保存图片路径 fileItem.path = data.path; // 保存图片路径
@@ -228,8 +252,6 @@ const handleHttpUpload = async options => {
imageListDb.value.forEach((item, index) => { imageListDb.value.forEach((item, index) => {
// 获取光标位置（每次插入后光标会移动） // 获取光标位置（每次插入后光标会移动）
const length = quill.getLength() - 1; // 文本末尾 const length = quill.getLength() - 1; // 文本末尾
console.log(length, "=插入位置=");
quill.insertEmbed(length, "image", { quill.insertEmbed(length, "image", {
url: h + item.path, url: h + item.path,
id: item.serverImgId || generateUUID() id: item.serverImgId || generateUUID()
@@ -252,86 +274,6 @@ const handleHttpUpload = async options => {
} }
}; };
// //上传前的钩子
// const handleBeforeUpload = file => {
// const fileType = file.type;
// console.log(file, "====file====");
// 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;
// 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 => {
// console.log(imageListDb.value.length, "==============length============");
// 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, options.file.uid);
// const { imgId } = result;
// console.log(imgId, "==========sdsdsd");
// if (result?.data?.code === 0) {
// const { data } = result?.data;
// //获取到imgId,将data.path匹配
// let iLength = imageListDb.value.length;
// for (let i = 0; i < iLength; i++) {
// let item = imageListDb.value[i];
// if (item.uid == imgId) {
// item.path = data.path;
// }
// }
// if (imageList.value.length === imageListDb.value.length) {
// console.log("走进来了");
// let tLength = imageListDb.value.length;
// for (let j = 0; j < tLength; j++) {
// let rawMyQuillEditor = toRaw(myQuillEditor.value);
// // 获取富文本实例
// let quill = rawMyQuillEditor.getQuill();
// // 获取光标位置
// let length = quill.selection.savedRange.index;
// console.log(length, "=光标length=");
// quill.insertEmbed(length, "image", {
// url: h + imageListDb.value[j].path,
// id: generateUUID()
// });
// quill.setSelection(length + 1);
// if (j === tLength - 1) {
// imageList.value = [];
// imageListDb.value = [];
// }
// }
// }
// }
// } catch (error) {}
// };
//视频上传 //视频上传
const handleVideoUpload = async evt => { const handleVideoUpload = async evt => {
if (evt.target.files.length === 0) { if (evt.target.files.length === 0) {
@@ -367,9 +309,22 @@ const initTitle = () => {
tip.setAttribute("title", item.title); tip.setAttribute("title", item.title);
} }
}; };
// 获取 Quill 实例并定义清空方法
const clearEditor = () => {
const rawMyQuillEditor = toRaw(myQuillEditor.value);
if (rawMyQuillEditor) {
const quill = rawMyQuillEditor.getQuill();
quill.setText(""); // 清空内容（会触发 v-model 同步）
editorContent.value = ""; // 同步更新绑定的变量
}
};
onMounted(() => { onMounted(() => {
initTitle(); initTitle();
oldContent.value = props.content; // oldContent.value = props.content;
});
// 暴露方法给父组件
defineExpose({
clearEditor
}); });
</script> </script>
<style lang="scss"> <style lang="scss">

2
src/components/FormTable/index.vue
View File

@@ -28,7 +28,7 @@
</template> </template>
<template #default="scope" v-if="item.formType === 'inputNumber'"> <template #default="scope" v-if="item.formType === 'inputNumber'">
<el-input-number <el-input-number
:min="1" :min="0"
:max="9999" :max="9999"
:controls="true" :controls="true"
style="width: 125px" style="width: 125px"

4
src/components/Upload/UploadImg.vue
View File

@@ -119,9 +119,9 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
const api = props.api ?? uploadImg; const api = props.api ?? uploadImg;
const result = await api(formData, routerName.value); const result = await api(formData, routerName.value);
console.log(result, "============>>>");
if (result?.data?.code === 0) { if (result?.data?.code === 0) {
const { data } = result; emit("update:imageUrl", result?.data?.data.path);
emit("update:imageUrl", data.path);
} }
// 调用 el-form 内部的校验方法（可自动校验） // 调用 el-form 内部的校验方法（可自动校验）

6
src/components/Upload/UploadImgs.vue
View File

@@ -136,10 +136,8 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
const api = props.api ?? uploadImg; const api = props.api ?? uploadImg;
const { data } = await api(formData, routerName.value); const { data } = await api(formData, routerName.value);
console.log(data, "============>>>."); console.log(data.data.path, "========data==========");
options.onSuccess(data.data.path);
console.log(data.path, "========data==========");
options.onSuccess(data.path);
} catch (error) { } catch (error) {
options.onError(error as any); options.onError(error as any);
} }

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

@@ -53,7 +53,7 @@
</template> </template>
<template v-if="item.type === 'inputNumber'"> <template v-if="item.type === 'inputNumber'">
<el-input-number <el-input-number
:min="1" :min="0"
:max="9999" :max="9999"
:controls="true" :controls="true"
v-model="_ruleForm[`${item.prop}`]" v-model="_ruleForm[`${item.prop}`]"
@@ -178,7 +178,7 @@
<slot /> <slot />
</template> </template>
<template v-if="item.type === 'WangEditor'"> <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> </template>
</el-form-item> </el-form-item>
</template> </template>
@@ -209,7 +209,7 @@ const emits = defineEmits<{
(e: "handleRadioGroupEmits", result?: any): void; (e: "handleRadioGroupEmits", result?: any): void;
(e: "handleTreesSelectChangeEmits", result?: any): void; (e: "handleTreesSelectChangeEmits", result?: any): void;
}>(); }>();
const editorRef = ref<any>(null);
const ruleFormRef = ref<FormInstance>(); const ruleFormRef = ref<FormInstance>();
const props = defineProps<IProps>(); const props = defineProps<IProps>();
//本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了 //本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
@@ -235,7 +235,8 @@ const handleRadioGroup = (value: any) => {
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去) // 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({ defineExpose({
ruleForm: _ruleForm, ruleForm: _ruleForm,
ruleFormRef: ruleFormRef ruleFormRef: ruleFormRef,
editorRef: editorRef
}); });
</script> </script>

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

@@ -20,7 +20,7 @@
<el-tab-pane label="问答详细" name="third"> <el-tab-pane label="问答详细" name="third">
<div style="width: 1280px; margin: 0 auto"> <div style="width: 1280px; margin: 0 auto">
<Editor v-model:content="dataStore.editRuleForm.answer" /> <Editor v-model:content="dataStore.editRuleForm.answer" ref="editorRef" />
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -47,6 +47,7 @@ const dataStore = reactive<any>({
rules: RULES rules: RULES
}); });
const formRef: any = ref(null); const formRef: any = ref(null);
const editorRef = ref<any>(null);
//详情 //详情
const getQAListDetails = async () => { const getQAListDetails = async () => {
let id = $route.query.id; let id = $route.query.id;
@@ -58,6 +59,9 @@ const getQAListDetails = async () => {
const { data } = result; const { data } = result;
//这里是传给基本信息组件的表单数据 //这里是传给基本信息组件的表单数据
dataStore.editRuleForm = cloneDeep(data); dataStore.editRuleForm = cloneDeep(data);
if (!data.answer) {
editorRef!.value!.clearEditor();
}
// dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer); // dataStore.editRuleForm.answer = convertSpanToDiv(dataStore.editRuleForm.answer);
dataStore.value = data.answer; dataStore.value = data.answer;
@@ -93,9 +97,11 @@ const handleReset = () => {
const resetFields = () => { const resetFields = () => {
if (!formRef.value!.ruleFormRef) return; if (!formRef.value!.ruleFormRef) return;
formRef!.value!.ruleFormRef.resetFields(); formRef!.value!.ruleFormRef.resetFields();
editorRef!.value!.clearEditor();
for (let key in dataStore.editRuleForm) { for (let key in dataStore.editRuleForm) {
dataStore.editRuleForm[key] = ""; dataStore.editRuleForm[key] = "";
} }
dataStore.editRuleForm.sort = 1;
// dataStore.value = ""; // dataStore.value = "";
}; };

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

@@ -20,7 +20,7 @@
<el-tab-pane label="详细内容" name="third"> <el-tab-pane label="详细内容" name="third">
<div style="width: 1280px; margin: 0 auto"> <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> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -47,7 +47,7 @@ import { useMsg } from "@/hooks/useMsg";
const formRef = ref<any>(null); const formRef = ref<any>(null);
const activeName = ref("basicInfo"); const activeName = ref("basicInfo");
const $route = useRoute(); const $route = useRoute();
const editorRef = ref<any>(null);
//数据集合 //数据集合
const dataStore = reactive<any>({ const dataStore = reactive<any>({
rules: cloneDeep(RULES), //抽屉表单验证 rules: cloneDeep(RULES), //抽屉表单验证
@@ -79,6 +79,9 @@ const getArticleListDetails = async () => {
if (result?.code === 0) { if (result?.code === 0) {
const { data } = result; const { data } = result;
dataStore.editRuleForm = data; dataStore.editRuleForm = data;
if (!data.content) {
editorRef.value.clearEditor(); // 调用子组件的清空方法
}
// dataStore.editRuleForm.content = convertSpanToDiv(dataStore.editRuleForm.content); // dataStore.editRuleForm.content = convertSpanToDiv(dataStore.editRuleForm.content);
let is = dataStore.editFormData[1].options.some((item: any) => let is = dataStore.editFormData[1].options.some((item: any) =>
recursiveCompare(item, dataStore.editRuleForm.category_id) recursiveCompare(item, dataStore.editRuleForm.category_id)
@@ -148,6 +151,13 @@ const handleConfirmClick = () => {
const handleReset = () => { const handleReset = () => {
if ($route.query.type === "add") { if ($route.query.type === "add") {
dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM); dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
editorRef.value.clearEditor(); // 调用子组件的清空方法
// if (!data.detail) {
// dataStore.detail = "";
// editorRef.value.clearEditor(); // 调用子组件的清空方法
// } else {
// dataStore.detail = cloneDeep(data.detail);
// }
} else { } else {
getArticleListDetails(); getArticleListDetails();
} }

5
src/views/bannerManagement/list/index.vue
View File

@@ -224,6 +224,9 @@ const getBannerRead = async (id: any) => {
if (result?.code === 0) { if (result?.code === 0) {
setImgOrVideo(result); setImgOrVideo(result);
getProductCategoryList(); getProductCategoryList();
if (!result?.data?.desc) {
formRef?.value?.editorRef[0]?.clearEditor();
}
nextTick(() => { nextTick(() => {
dataStore.editRuleForm = result?.data; dataStore.editRuleForm = result?.data;
if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) { if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
@@ -231,7 +234,6 @@ const getBannerRead = async (id: any) => {
if (!id || !name || !link) { if (!id || !name || !link) {
return; return;
} }
console.log("1232323");
let obj: any = { let obj: any = {
label: name, // 确保这里的name是你想要显示的文本 label: name, // 确保这里的name是你想要显示的文本
value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`, value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
@@ -331,6 +333,7 @@ const handleConfirmClick = () => {
const resetFields = () => { const resetFields = () => {
if (!formRef.value!.ruleFormRef) return; if (!formRef.value!.ruleFormRef) return;
formRef!.value!.ruleFormRef.resetFields(); formRef!.value!.ruleFormRef.resetFields();
formRef?.value?.editorRef[0]?.clearEditor();
}; };
// 抽屉重置 // 抽屉重置
const handleResetClick = () => { const handleResetClick = () => {

2
src/views/productManagement/list/components/basicInfo.vue
View File

@@ -38,7 +38,7 @@
<!-- <el-input v-model="_ruleFormParam.sort" /> --> <!-- <el-input v-model="_ruleFormParam.sort" /> -->
<el-input-number <el-input-number
:min="1" :min="0"
:max="9999" :max="9999"
:controls="true" :controls="true"
v-model="_ruleFormParam.sort" v-model="_ruleFormParam.sort"

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

@@ -3,7 +3,7 @@
<div class="table-box"> <div class="table-box">
<div style="padding-bottom: 16px"> <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> <el-button type="primary" @click="handleSubmit(infoRef, imgInfoRef, dataStore)"> 提交 </el-button>
</div> </div>
<div class="card table-main"> <div class="card table-main">
@@ -16,7 +16,7 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="产品详情" name="third"> <el-tab-pane label="产品详情" name="third">
<div style="width: 1280px; margin: 0 auto"> <div style="width: 1280px; margin: 0 auto">
<Editor v-model:content="dataStore.detail" /> <Editor v-model:content="dataStore.detail" ref="editorRef" />
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="相关信息" name="related"> <el-tab-pane label="相关信息" name="related">
@@ -65,6 +65,9 @@ import imgInfo from "./components/imgInfo.vue";
import FormTable from "@/components/FormTable/index.vue"; import FormTable from "@/components/FormTable/index.vue";
const $route = useRoute(); const $route = useRoute();
const editorRef = ref<any>(null);
//数据集合 //数据集合
const dataStore = reactive<any>({ const dataStore = reactive<any>({
relatedColumns: cloneDeep(RELATED_INFO_COLUMNS), //相关信息及下载表格配置 relatedColumns: cloneDeep(RELATED_INFO_COLUMNS), //相关信息及下载表格配置
@@ -94,7 +97,7 @@ const getProductDetails = async () => {
if (result?.code === 0) { if (result?.code === 0) {
const { data } = result; const { data } = result;
//参数初始化(将参数按照不同的tab区分出来) //参数初始化(将参数按照不同的tab区分出来)
initDetailParams(dataStore, data); initDetailParams(dataStore, data, editorRef);
} }
}; };
getProductDetails(); getProductDetails();

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

@@ -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); let is = hasIdRecursive(dataStore.options, data.category_id);
//基本信息 //基本信息
dataStore.basicInfoRuleForm = cloneDeep({ dataStore.basicInfoRuleForm = cloneDeep({
@@ -40,9 +40,15 @@ export const initDetailParams = (dataStore: any, data: any) => {
stock_qty: data.stock_qty, stock_qty: data.stock_qty,
id: data.id id: data.id
}); });
console.log(dataStore.basicInfoRuleForm, "= dataStore.basicInfoRuleForm=");
//详情 //详情
dataStore.detail = cloneDeep(data.detail); if (!data.detail) {
//dataStore.detail = convertSpanToDiv(dataStore.detail); dataStore.detail = "";
editorRef.value.clearEditor(); // 调用子组件的清空方法
} else {
dataStore.detail = cloneDeep(data.detail);
}
//图片 //图片
dataStore.imgInfoData.cover_image = data.cover_image; dataStore.imgInfoData.cover_image = data.cover_image;
dataStore.imgInfoData.video_url = data.video_url; dataStore.imgInfoData.video_url = data.video_url;

8
src/views/productManagement/list/utils/edit/reset.ts
View File

@@ -4,19 +4,19 @@ import { messageBox } from "@/utils/messageBox";
// import { cloneDeep } from "lodash-es"; // import { cloneDeep } from "lodash-es";
import { initDetailParams } from "./initDetailParams"; import { initDetailParams } from "./initDetailParams";
//详情(重置,重新获取一下详情) //详情(重置,重新获取一下详情)
const getProductDetails = async (dataStore: any) => { const getProductDetails = async (dataStore: any, editorRef: any) => {
const { id } = dataStore.basicInfoRuleForm; const { id } = dataStore.basicInfoRuleForm;
const result = await getProductDetailsApi(id); const result = await getProductDetailsApi(id);
if (result?.code === 0) { if (result?.code === 0) {
const { data } = result; const { data } = result;
initDetailParams(dataStore, data); initDetailParams(dataStore, data, editorRef);
useMsg("success", "重置成功 !"); useMsg("success", "重置成功 !");
} }
}; };
export const handleReset = (dataStore: any) => { export const handleReset = (dataStore: any, editorRef?: any) => {
messageBox("该操作会将数据重置为初始状态", () => { messageBox("该操作会将数据重置为初始状态", () => {
getProductDetails(dataStore); getProductDetails(dataStore, editorRef);
}); });
}; };