feat: codeList编辑保存逻辑添加

frontend/src/store/modules/rulesList.js

@@ -2,6 +2,7 @@ import {
   ServerActionCodeList,
   ServerActionGetModifyUsers,
   ServerActionClaimCodes,
+  ServerActionUpdateCode,
 } from '../../../wailsjs/go/main/App'
 
 // 爬虫列表模块(局部模块)
@@ -52,6 +53,10 @@ export default {
       const r = await ServerActionGetModifyUsers()
       return r
     },
+    async editCodeItem(_, payload) {
+      const r = await ServerActionUpdateCode(payload)
+      return r
+    }
   },
   getters: {}
 }

frontend/src/views/CodeList.vue

@@ -13,7 +13,7 @@
                 <el-space class="action-bar-item-container action-bar-action-right">
                     <div class="action-bar-item" v-if="showModifyUserFilter">
                         <span class="action-bar-name">维护人：</span>
-                        <el-select v-model="filters.modifyuser" style="width: 140px" @change="onModifyUserSelectChange" :disabled="modifyUserSelectDisabled">
+                        <el-select v-model="filters.modifyuser" style="width: 110px" @change="onModifyUserSelectChange" :disabled="modifyUserSelectDisabled">
                             <el-option
                                 v-for="item in filterConfig.modifyUserList"
                                 :key="item.value"
@@ -24,7 +24,7 @@
                     </div>
                     <div class="action-bar-item">
                         <span class="action-bar-name">爬虫状态：</span>
-                        <el-select v-model="filters.state" placeholder="爬虫状态" style="width: 140px" @change="onStateSelectChange">
+                        <el-select v-model="filters.state" placeholder="爬虫状态" style="width: 110px" @change="onStateSelectChange">
                             <el-option
                                 v-for="item in filterConfig.stateOptions"
                                 :key="item.value"
@@ -35,7 +35,7 @@
                     </div>
                     <div class="action-bar-item">
                         <span class="action-bar-name">认领状态：</span>
-                        <el-select v-model="filters.claimtype" placeholder="认领状态" style="width: 140px" @change="onClaimSelectChange">
+                        <el-select v-model="filters.claimtype" placeholder="认领状态" style="width: 110px" @change="onClaimSelectChange">
                             <el-option
                                 v-for="item in filterConfig.claimOptions"
                                 :key="item.value"
@@ -66,17 +66,17 @@
                 <el-table-column label="操作" width="160">
                     <template #default="scope">
                         <el-tooltip content="标注" placement="top">
-                            <el-button size="small" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_mark }" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
                                 <el-icon><Link /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="编辑" placement="top">
-                            <el-button size="small" @click="tableEvents.handleEdit(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_edit }" @click="tableEvents.handleEdit(scope.$index, scope.row)">
                                 <el-icon><Edit /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="调试" placement="top">
-                            <el-button size="small" @click="tableEvents.handleDebug(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_debug }" @click="tableEvents.handleDebug(scope.$index, scope.row)">
                                 <el-icon><SetUp /></el-icon>
                             </el-button>
                         </el-tooltip>
@@ -85,17 +85,17 @@
                 <el-table-column label="功能" width="160">
                     <template #default="scope">
                         <el-tooltip content="验证" placement="top">
-                            <el-button size="small" @click="tableEvents.handleDataTag(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_verify }" @click="tableEvents.handleVerify(scope.$index, scope.row)">
                                 <el-icon><Aim /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="提交" placement="top">
-                            <el-button size="small" @click="tableEvents.handleEdit(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_submit }" @click="tableEvents.handleSubmit(scope.$index, scope.row)">
                                 <el-icon><Promotion /></el-icon>
                             </el-button>
                         </el-tooltip>
                         <el-tooltip content="回退" placement="top">
-                            <el-button size="small" @click="tableEvents.handleDebug(scope.$index, scope.row)">
+                            <el-button size="small" :class="{ active: scope.row._action_clicked_rollback }" @click="tableEvents.handleRollback(scope.$index, scope.row)">
                                 <el-icon><DArrowLeft /></el-icon>
                             </el-button>
                         </el-tooltip>
@@ -195,6 +195,8 @@ const defaultListState = {
     list: [],
 }
 
+const prevClickedRow = ref({})
+
 // 用户身份标识
 const userRole = computed(() => store.getters.userRole)
 // 是否展示维护人模块
@@ -224,27 +226,64 @@ const stopWatch = watch(() => filters.modifyuser, (n) => {
 const editSpiderDialog = ref(null)
 
 const dialogEvents = {
-    editSpiderConfigSaveEvent: function (data) {
-        console.log("change data:", data)
-        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 => { })
-        })
+    editSpiderConfigSaveEvent: async function (data) {
+        // 整理数据结构
+        // [{ query: {code: 'code'}, set: {} }, {query:{},set:{}}]
+        const rowData = data._originData
+        const updateRule = [
+            {
+                query: { code: rowData.code },
+                set: {
+                    css_list: data.css_list,
+                    css_content: data.css_content,
+                    js_list: data.js_list,
+                    js_nextpage: data.js_nextpage,
+                    js_content: data.js_content,
+                }
+            }
+        ]
+        const payload = {
+            stype: 'save',
+            update: updateRule
+        }
+        console.log("change data:", data, payload)
+        const r = await store.dispatch('rulesList/editCodeItem', payload)
+        console.log(r)
+        // 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 => { })
+        // })
     },
 }
 
+// 取消prevClicked的高亮
+const cancelOtherHighlight = () => {
+    for (const key in prevClickedRow.value) {
+        if (key.includes('_action_clicked')) {
+            prevClickedRow.value[key] = false
+        }
+    }
+}
+// 页面按钮点击高亮
+const onlyClickHighlight = (row, key) => {
+    cancelOtherHighlight()
+    row[key] = true
+    prevClickedRow.value = row
+}
+
 // table的按钮事件集合
 const tableEvents = {
     handleDataTag(index, row) {
+        onlyClickHighlight(row, '_action_clicked_mark')
         // 自定义关闭时间
         ElMessage({
             message: `${row.site} ${row.channel} ${row.href}`,
@@ -254,6 +293,8 @@ const tableEvents = {
         BrowserOpenURL(row.href)
     },
     handleEdit: (index, row) => {
+        onlyClickHighlight(row, '_action_clicked_edit')
+        prevClickedRow.value = row
         ElMessage({
             message: `${row.site} ${row.channel} ${row.href}`,
             showClose: true,
@@ -263,10 +304,23 @@ const tableEvents = {
         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 }) => {
@@ -312,6 +366,13 @@ const getTableList = async () => {
                         ...t,
                         stateText: calcStateText(t.state),
                         claimText: calcClaimText(t.claimtype),
+                        // 操作按钮是否点击过
+                        _action_clicked_mark: false,
+                        _action_clicked_edit: false,
+                        _action_clicked_debug: false,
+                        _action_clicked_verify: false,
+                        _action_clicked_submit: false,
+                        _action_clicked_rollback: false,
                     }
                 })
 
@@ -323,7 +384,6 @@ const getTableList = async () => {
     } finally {
         listState.loading = false
     }
-    
 }
 
 // 重置列表数据
@@ -432,7 +492,18 @@ EventsOn("spiderConfigChange", data => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+::v-deep {
+    .el-button {
+        &.active {
+            background-color: var(--el-button-hover-bg-color);
+            border-color: var(--el-button-hover-border-color);
+            color: var(--el-button-hover-text-color);
+            outline: none;
+        }
+    }
+}
+
 .pagination-container {
     display: flex;
     align-items: center;
@@ -451,5 +522,6 @@ EventsOn("spiderConfigChange", data => {
 }
 .action-bar-name {
     font-size: 14px;
+    white-space: nowrap;
 }
 </style>