feat: 🚀 图片排序

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"

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();

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;

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