feat: 插件标注同步编辑表单数据修改完善

frontend/src/views/CodeList.vue

@@ -112,6 +112,7 @@
         </el-main>
     </el-card>
     <EditSpider ref="editSpiderDialog" @custom-event="dialogEvents.editSpiderConfigSaveEvent" />
+    <RunSpider ref="runSpiderDialog" />
 </template>
 
 <script setup>
@@ -124,6 +125,7 @@ import { SaveOrUpdateSpiderConfig } from "../../wailsjs/go/main/App"
 import { SwitchSpiderConfig } from "../../wailsjs/go/main/App"
 import Breadcrumb from "../components/Breadcrumb.vue"
 import EditSpider from "../components/spider/EditSpider.vue"
+import RunSpider from "../components/spider/RunSpider.vue"
 import useCodeListFiltersWithRole from '../composables/filter-options'
 import { USER_ROLE_ADMIN, USER_ROLE_DEVELOPER, USER_ROLE_REVIEWER } from '../data/user'
 import { Refresh, Search, Box } from '@element-plus/icons-vue'
@@ -195,6 +197,9 @@ const defaultListState = {
     list: [],
 }
 
+// 当前编辑的row的数据
+const currentEditRow = ref({})
+// 上一个点击的row的数据
 const prevClickedRow = ref({})
 
 // 用户身份标识
@@ -224,65 +229,7 @@ const stopWatch = watch(() => filters.modifyuser, (n) => {
 })
 
 const editSpiderDialog = ref(null)
-
-const dialogEvents = {
-    editSpiderConfigSaveEvent: async function (data) {
-        // 整理数据结构
-        // [{ query: {code: 'code'}, set: {} }, {query:{},set:{}}]
-        const rowData = data._originData
-        const payload = data.value
-        const updateRule = [
-            {
-                query: { code: rowData.code },
-                set: {
-                    cssmark: payload,
-                }
-            }
-        ]
-        const params = {
-            stype: 'save',
-            update: updateRule
-        }
-        console.log("change data:", data, params)
-        try {
-            const r = await store.dispatch('rulesList/editCodeItem', params)
-            const { msg, err } = r
-            if (err === 1) {
-                ElMessage({
-                    message: msg || '保存成功',
-                    type: 'success',
-                    duration: 3000,
-                })
-                // getTableList()
-            } else {
-                ElMessage({
-                    message: msg || '保存失败',
-                    type: 'error',
-                    duration: 3000,
-                })
-            }
-        } catch (error) {
-            ElMessage({
-                message: '保存失败',
-                type: 'error',
-                duration: 3000,
-            })
-        }
-        // SaveOrUpdateSpiderConfig(data).then(result => {
-        //     ElMessage({
-        //         message: `成功更新爬虫 ${data.site} /${data.channel}/${data.code}`,
-        //         showClose: true,
-        //         duration: 3000,
-        //     });
-        //     //表格数据更新
-        //     listState.list.forEach((v, i) => {
-        //         if (v.code == data.code) v = data
-        //     })
-        //     //更新当前选择
-        //     SwitchSpiderConfig(data.code).then(result => { })
-        // })
-    },
-}
+const runSpiderDialog = ref(null)
 
 // 取消prevClicked的高亮
 const cancelOtherHighlight = () => {
@@ -299,49 +246,6 @@ const onlyClickHighlight = (row, key) => {
     prevClickedRow.value = row
 }
 
-// table的按钮事件集合
-const tableEvents = {
-    handleDataTag(index, row) {
-        onlyClickHighlight(row, '_action_clicked_mark')
-        // 自定义关闭时间
-        ElMessage({
-            message: `${row.site} ${row.channel} ${row.href}`,
-            showClose: true,
-            duration: 3000,
-        });
-        BrowserOpenURL(row.href)
-    },
-    handleEdit: (index, row) => {
-        onlyClickHighlight(row, '_action_clicked_edit')
-        prevClickedRow.value = row
-        ElMessage({
-            message: `${row.site} ${row.channel} ${row.href}`,
-            showClose: true,
-            duration: 3000,
-        });
-        editSpiderDialog.value.dialogVisible = true
-        editSpiderDialog.value.setPageData(row)
-    },
-    handleDebug(index, row) {
-        onlyClickHighlight(row, '_action_clicked_debug')
-        router.push({
-            path: '/run'
-        });
-    },
-    handleVerify(index, row) {
-        onlyClickHighlight(row, '_action_clicked_verify')
-        console.log('handleVerify', row)
-    },
-    handleSubmit(index, row) {
-        onlyClickHighlight(row, '_action_clicked_submit')
-        console.log('handleSubmit', row)
-    },
-    handleRollback(index, row) {
-        onlyClickHighlight(row, '_action_clicked_rollback')
-        console.log('handleRollback', row)
-    },
-}
-
 const getRowStyle = ({ row }) => {
     return row.selected ? { backgroundColor: '#F7F7F7' } : {};
 };
@@ -498,10 +402,140 @@ const onClaimSelectChange = () => {
     refreshTableList()
 }
 
+// 保存完成后(不刷新优化)，同步更新表单内的数据
+const refreshRowData = (code, payload) => {
+    const target = listState.list.find(item => item.code === code)
+    if (target) {
+        Object.assign(target.cssmark, payload)
+    }
+}
+// 更新编辑弹窗数据
+const refreshAndAsyncEditDialog = (key, value) => {
+    editSpiderDialog.value.refreshPageData(key, value)
+}
+
+// 打开编辑弹窗(如果传数据了，则恢复数据)
+const openEditDialog = (row) => {
+    editSpiderDialog.value.dialogVisible = true
+    if (row) {
+        editSpiderDialog.value.setPageData({
+            ...row,
+            ...row.cssmark,
+        })
+    }
+}
+
+
+const dialogEvents = {
+    editSpiderConfigSaveEvent: async function (data) {
+        // 整理数据结构
+        // [{ query: {code: 'code'}, set: {} }, {query:{},set:{}}]
+        const rowData = data._originData
+        const payload = data.value
+        const code = rowData.code
+        const updateRule = [
+            {
+                query: { code: code },
+                set: {
+                    cssmark: payload,
+                }
+            }
+        ]
+        const params = {
+            stype: 'save',
+            update: updateRule
+        }
+        console.log("change data:", data, params)
+        try {
+            const r = await store.dispatch('rulesList/editCodeItem', params)
+            const { msg, err } = r
+            if (err === 1) {
+                refreshRowData(code, payload)
+                ElMessage({
+                    message: msg || '保存成功',
+                    type: 'success',
+                    duration: 3000,
+                })
+                // getTableList()
+            } else {
+                ElMessage({
+                    message: msg || '保存失败',
+                    type: 'error',
+                    duration: 3000,
+                })
+            }
+        } catch (error) {
+            ElMessage({
+                message: '保存失败',
+                type: 'error',
+                duration: 3000,
+            })
+        }
+        // SaveOrUpdateSpiderConfig(data).then(result => {
+        //     ElMessage({
+        //         message: `成功更新爬虫 ${data.site} /${data.channel}/${data.code}`,
+        //         showClose: true,
+        //         duration: 3000,
+        //     });
+        //     //表格数据更新
+        //     listState.list.forEach((v, i) => {
+        //         if (v.code == data.code) v = data
+        //     })
+        //     //更新当前选择
+        //     SwitchSpiderConfig(data.code).then(result => { })
+        // })
+    },
+}
+
+// table的按钮事件集合
+const tableEvents = {
+    handleDataTag(index, row) {
+        onlyClickHighlight(row, '_action_clicked_mark')
+        // 自定义关闭时间
+        ElMessage({
+            message: `${row.site} ${row.channel} ${row.href}`,
+            showClose: true,
+            duration: 3000,
+        });
+        BrowserOpenURL(row.href)
+    },
+    handleEdit: (index, row) => {
+        currentEditRow.value = row
+        onlyClickHighlight(row, '_action_clicked_edit')
+        prevClickedRow.value = row
+        ElMessage({
+            message: `${row.site} ${row.channel} ${row.href}`,
+            showClose: true,
+            duration: 3000,
+        });
+        openEditDialog(row)
+    },
+    handleDebug(index, row) {
+        onlyClickHighlight(row, '_action_clicked_debug')
+        runSpiderDialog.value.dialogVisible = true
+        runSpiderDialog.value.setPageData(row)
+        // router.push({
+        //     path: '/run'
+        // });
+    },
+    handleVerify(index, row) {
+        onlyClickHighlight(row, '_action_clicked_verify')
+        console.log('handleVerify', row)
+    },
+    handleSubmit(index, row) {
+        onlyClickHighlight(row, '_action_clicked_submit')
+        console.log('handleSubmit', row)
+    },
+    handleRollback(index, row) {
+        onlyClickHighlight(row, '_action_clicked_rollback')
+        console.log('handleRollback', row)
+    },
+}
 
 //Wails事件绑定
 EventsOn("spiderConfigChange", data => {
-    console.log(data)
+    const { key, sc } = data
+    refreshAndAsyncEditDialog(key, sc[key])
     // listState.list.forEach((v, i) => {
     //     if (v.code == data.code) {
     //         let rowData = { ...data }