feat: codeList编辑表单回显

frontend/src/components/EditSpider.vue

@@ -48,8 +48,8 @@
                     </el-row>
                     <el-row>
                         <el-col :span="12">
-                            <el-form-item label="延迟时间">
-                                <el-input v-model="formData.listDelayTime" placeholder="500"></el-input>
+                            <el-form-item label="延迟时间(MS)">
+                                <el-input v-model="formData.listCSSDelayTime" placeholder="500"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -93,8 +93,8 @@
                     </el-row>
                     <el-row>
                         <el-col :span="12">
-                            <el-form-item label="延迟时间">
-                                <el-input v-model="formData.detailDelayTime" placeholder="500"></el-input>
+                            <el-form-item label="延迟时间(MS)">
+                                <el-input v-model="formData.detailCSSDelayTime" placeholder="500"></el-input>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -116,6 +116,13 @@
                     <el-input v-model="formData.listJs" class="codeEditor" :rows="6" type="textarea"
                         placeholder="Please input" />
                 </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="延迟时间(MS)">
+                            <el-input v-model="formData.listJSDelayTime" placeholder="500"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
             <el-tab-pane label="列表页翻页JS代码" name="list_trunpage_js">
 
@@ -132,6 +139,13 @@
                     <el-input v-model="formData.listTrunPageJs" class="codeEditor" :rows="6" type="textarea"
                         placeholder="Please input" />
                 </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="延迟时间(MS)">
+                            <el-input v-model="formData.listJSTurnDelayTime" placeholder="500"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
 
             <el-tab-pane label="详情页JS代码" name="content_js">
@@ -148,6 +162,13 @@
                 <el-row><el-input v-model="formData.contentJs" class="codeEditor" :rows="6" type="textarea"
                         placeholder="Please input" />
                 </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="延迟时间(MS)">
+                            <el-input v-model="formData.contentJSDelayTime" placeholder="500"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
             <div class="space" />
         </el-tabs>
@@ -168,6 +189,34 @@ const formData = ref({
     href: '',
     code: '',
     modifyuser: '',
+
+    // list-css-tab
+    listBodyCss: '',
+    listItemCss: '',
+    listLinkCss: '',
+    listPublishTimeCss: '',
+    listNextPageCss: '',
+    listCSSDelayTime: '',
+
+    // content-css-tab
+    titleCss: '',
+    publishTimeCss: '',
+    publishUnitCss: '',
+    contentCss: '',
+    attachCss: '',
+    detailCSSDelayTime: '',
+
+    // list-js-tab
+    listJs: '',
+    listJSDelayTime: '',
+
+    // list-pageination-tab
+    listTrunPageJs: '',
+    listJSTurnDelayTime: '',
+
+    // detail-js-tab
+    contentJs: '',
+    contentJSDelayTime: '',
 });
 
 const activeName = ref("first")
@@ -189,17 +238,102 @@ const editorHandle = {
     }
 }
 
+const setPageData = (row) => {
+    if (!row) return
+    formData.value = row
+    console.log(row)
+    const cssList = row?.css_list
+    const cssContent = row?.css_content
+    const cssOther = row?.css_other
+    const jsList = row?.js_list
+    const jsNextPage = row?.js_nextpage
+    const jsContent = row?.js_content
+
+    if (cssList) {
+        formData.value.listBodyCss = cssList.body
+        formData.value.listItemCss = cssList.title
+        formData.value.listLinkCss = cssList.href
+        formData.value.listPublishTimeCss = cssList.ptime
+        formData.value.listNextPageCss = cssList.nextpage
+        formData.value.listCSSDelayTime = cssList.delaytime
+    }
+    if (cssContent) {
+        formData.value.titleCss = cssContent.title
+        formData.value.publishTimeCss = cssContent.ptime
+        formData.value.publishUnitCss = cssContent.source
+        formData.value.contentCss = cssContent.content
+        formData.value.attachCss = cssContent.file
+        formData.value.detailCSSDelayTime = cssContent.delaytime
+    }
+    if (jsList) {
+        formData.value.listJs = jsList.js
+        formData.value.listJSDelayTime = jsList.delaytime
+    }
+    if (jsNextPage) {
+        formData.value.listTrunPageJs = jsNextPage.js
+        formData.value.listJSTurnDelayTime = jsNextPage.delaytime
+    }
+    if (jsContent) {
+        formData.value.contentJs = jsContent.js
+        formData.value.contentJSDelayTime = jsContent.delaytime
+    }
+}
+
+// [{ query: {code: 'code'}, set: {} }, {query:{},set:{}}]
+const getPageData = () => {
+    const formDataValue = formData.value
+    const css_list = {
+        body: formDataValue.listBodyCss,
+        title: formDataValue.listItemCss,
+        href: formDataValue.listLinkCss,
+        ptime: formDataValue.listPublishTimeCss,
+        nextpage: formDataValue.listNextPageCss,
+        delaytime: formDataValue.listCSSDelayTime,
+    }
+    const css_content = {
+        title: formDataValue.titleCss,
+        ptime: formDataValue.publishTimeCss,
+        source: formDataValue.publishUnitCss,
+        content: formDataValue.contentCss,
+        file: formDataValue.attachCss,
+        delaytime: formDataValue.detailCSSDelayTime,
+    }
+    const js_list = {
+        js: formDataValue.listJs,
+        delaytime: formDataValue.listJSDelayTime,
+    }
+    const js_nextpage = {
+        js: formDataValue.listTrunPageJs,
+        delaytime: formDataValue.listJSTurnDelayTime,
+    }
+    const js_content = {
+        js: formDataValue.contentJs,
+        delaytime: formDataValue.contentJSDelayTime,
+    }
+
+    return {
+        code: code,
+        css_list,
+        css_content,
+        js_list,
+        js_nextpage,
+        js_content,
+    }
+}
+
 const handleSave = () => {
     dialogVisible.value = false;
-    emit("custom-event", { ...formData.value })
+    const payload = getPageData()
+    emit("custom-event", payload)
     formData.value = {}
 }
 
-
 //这里是重点: 向外部组建暴露可供调用的方法
 defineExpose({
     dialogVisible,
     formData,
+    setPageData,
+    getPageData,
     emit
 })
 </script>

frontend/src/views/CodeList.vue

@@ -96,7 +96,7 @@
                         </el-tooltip>
                         <el-tooltip content="回退" placement="top">
                             <el-button size="small" @click="tableEvents.handleDebug(scope.$index, scope.row)">
-                                <el-icon><RefreshLeft /></el-icon>
+                                <el-icon><DArrowLeft /></el-icon>
                             </el-button>
                         </el-tooltip>
                     </template>
@@ -260,7 +260,7 @@ const tableEvents = {
             duration: 3000,
         });
         editSpiderDialog.value.dialogVisible = true
-        editSpiderDialog.value.formData = row
+        editSpiderDialog.value.setPageData(row)
     },
     handleDebug(index, row) {
         router.push({