feat: 🚀 图片排序

2025-07-17 15:20:57 +08:00
parent cc894333bf
commit e2261c5fc4
13 changed files with 161 additions and 179 deletions
--- a/src/views/QAManagement/list/edit.vue
+++ b/src/views/QAManagement/list/edit.vue
@@ -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 = 1;
    // dataStore.value = "";
 };

--- a/src/views/articleManagement/list/edit.vue
+++ b/src/views/articleManagement/list/edit.vue
@@ -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();
    }
--- a/src/views/bannerManagement/list/index.vue
+++ b/src/views/bannerManagement/list/index.vue
@@ -224,6 +224,9 @@ const getBannerRead = async (id: any) => {
    if (result?.code === 0) {
        setImgOrVideo(result);
        getProductCategoryList();
+        if (!result?.data?.desc) {
+            formRef?.value?.editorRef[0]?.clearEditor();
+        }
        nextTick(() => {
            dataStore.editRuleForm = result?.data;
            if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
@@ -231,7 +234,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}`,
@@ -331,6 +333,7 @@ const handleConfirmClick = () => {
 const resetFields = () => {
    if (!formRef.value!.ruleFormRef) return;
    formRef!.value!.ruleFormRef.resetFields();
+    formRef?.value?.editorRef[0]?.clearEditor();
 };
 // 抽屉重置
 const handleResetClick = () => {
--- a/src/views/productManagement/list/components/basicInfo.vue
+++ b/src/views/productManagement/list/components/basicInfo.vue
@@ -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"
--- a/src/views/productManagement/list/edit.vue
+++ b/src/views/productManagement/list/edit.vue
@@ -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();
--- a/src/views/productManagement/list/utils/edit/initDetailParams.ts
+++ b/src/views/productManagement/list/utils/edit/initDetailParams.ts
@@ -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,15 @@ export const initDetailParams = (dataStore: any, data: any) => {
        stock_qty: data.stock_qty,
        id: data.id
    });
+    console.log(dataStore.basicInfoRuleForm, "=  dataStore.basicInfoRuleForm=");
    //详情
-    dataStore.detail = cloneDeep(data.detail);
-    //dataStore.detail = convertSpanToDiv(dataStore.detail);
+    if (!data.detail) {
+        dataStore.detail = "";
+        editorRef.value.clearEditor(); // 调用子组件的清空方法
+    } else {
+        dataStore.detail = cloneDeep(data.detail);
+    }
+
    //图片
    dataStore.imgInfoData.cover_image = data.cover_image;
    dataStore.imgInfoData.video_url = data.video_url;
--- a/src/views/productManagement/list/utils/edit/reset.ts
+++ b/src/views/productManagement/list/utils/edit/reset.ts
@@ -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);
    });
 };