feat: qlm采集页面调整

frontend/src/views/CollectionList.vue

@@ -7,7 +7,7 @@
                 <el-space class="action-bar-item-container action-bar-action-left">
                     <el-button-group class="ml-4">
                         <!-- <el-button type="primary" :icon="Refresh" @click="resetFilterAndRefreshTableList">刷新</el-button> -->
-                        <el-button type="primary" :icon="DocumentAdd" @click="showAddNewRecordDialog">新增记录</el-button>
+                        <el-button type="primary" :icon="DocumentAdd" :loading="recordInfo.loading" @click="addRecord">新增记录</el-button>
                     </el-button-group>
                 </el-space>
                 <el-space class="action-bar-item-container action-bar-action-right"></el-space>
@@ -16,9 +16,9 @@
         <el-main>
             <el-table ref="spiderTable" :data="listState.list" border stripe :row-style="getRowStyle" v-loading="listState.loading">
                 <el-table-column prop="comeintimeText" label="日期" width="110" align="left" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="proxyText" label="代理" align="left" show-overflow-tooltip></el-table-column>
+                <!-- <el-table-column prop="proxyText" label="代理" align="left" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="headlessText" label="浏览器" align="left" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="imageText" label="图像" align="left" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="imageText" label="图像" align="left" show-overflow-tooltip></el-table-column> -->
                 <el-table-column prop="listdatanum" label="列表量" align="left" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="needdownloadnum" label="待采量" align="center" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="detaildatanum" label="成功量" align="center" show-overflow-tooltip></el-table-column>
@@ -28,7 +28,7 @@
                         <div class="highlight-main">{{scope.row.stateText}}</div>
                     </template>
                 </el-table-column>
-                <el-table-column label="功能" min-width="260" align="center">
+                <el-table-column label="功能" min-width="140" align="center">
                     <template #default="scope">
                         <el-tooltip content="列表页采集" placement="top">
                             <el-button size="small" :class="{ active: scope.row._action_clicked_list_collect }" @click="tableEvents.handleListCollect(scope.$index, scope.row)">
@@ -50,6 +50,10 @@
                                 <el-icon><DocumentCopy /></el-icon>
                             </el-button>
                         </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template #default="scope">
                         <el-tooltip content="清除记录" placement="top">
                             <el-button size="small" :class="{ active: scope.row._action_clicked_remove_history }" @click="tableEvents.handleRemoveHistory(scope.$index, scope.row)">
                                 <el-icon><DArrowLeft /></el-icon>
@@ -67,22 +71,22 @@
             </div>
         </el-main>
     </el-card>
-    <el-dialog v-model="addNewRecord.dialog" title="新增记录">
+    <el-dialog v-model="recordInfo.dialog" title="新增记录">
         <el-form>
             <el-form-item label="配置使用代理" label-width="100px">
-                <el-radio-group v-model="addNewRecord.form.proxy">
+                <el-radio-group v-model="recordInfo.form.proxy">
                     <el-radio :value="true">是</el-radio>
                     <el-radio :value="false">否</el-radio>
                 </el-radio-group>
             </el-form-item>
             <el-form-item label="无头浏览器" label-width="100px">
-                <el-radio-group v-model="addNewRecord.form.headless">
+                <el-radio-group v-model="recordInfo.form.headless">
                     <el-radio :value="true">是</el-radio>
                     <el-radio :value="false">否</el-radio>
                 </el-radio-group>
             </el-form-item>
             <el-form-item label="显示图像" label-width="100px">
-                <el-radio-group v-model="addNewRecord.form.image">
+                <el-radio-group v-model="recordInfo.form.image">
                     <el-radio :value="true">显示</el-radio>
                     <el-radio :value="false">不显示</el-radio>
                 </el-radio-group>
@@ -90,8 +94,8 @@
         </el-form>
         <template #footer>
             <div class="dialog-footer">
-                <el-button type="primary" :loading="false" @click="addNewRecordConfirm">确定</el-button>
-                <el-button @click="addNewRecord.dialog = false">取消</el-button>
+                <el-button type="primary" :loading="false" @click="recordInfoConfirm">确定</el-button>
+                <el-button @click="recordInfo.dialog = false">取消</el-button>
             </div>
         </template>
     </el-dialog>
@@ -160,9 +164,10 @@ const defaultListState = {
     list: [],
 }
 
-const addNewRecord = reactive({
+const recordInfo = reactive({
     dialog: false,
     loading: false,
+    type: '', // list/detail
     form: {
         proxy: false,
         headless: false,
@@ -284,15 +289,11 @@ const handleCurrentChange = (val) => {
 };
 
 
-const showAddNewRecordDialog = () => {
-    addNewRecord.dialog = true
-}
-const addNewRecordConfirm = () => {
+const addRecord = () => {
     const payload = {
-        ...addNewRecord.form,
+        ...recordInfo.form,
     }
-    addNewRecord.loading = true
-  console.log(payload)
+    recordInfo.loading = true
     ServerActionQlmAddRecord(payload).then(r => {
           if (r.err === 1) {
               ElMessage({
@@ -300,7 +301,7 @@ const addNewRecordConfirm = () => {
                   type: 'success',
                   duration: 3000,
               })
-              addNewRecord.dialog = false
+              recordInfo.dialog = false
               refreshTableList()
           } else {
               return ElMessage({
@@ -310,7 +311,7 @@ const addNewRecordConfirm = () => {
               })
           }
       }).finally(() => {
-          addNewRecord.loading = false
+          recordInfo.loading = false
       })
 }
 
@@ -346,6 +347,14 @@ const confirmDialog = (conf = {}) => {
   })
 }
 
+const setRecordDialogState = (row) => {
+    Object.assign(recordInfo.form, {
+        proxy: row.proxy || false,
+        headless: row.headless || false,
+        image: row.image || false,
+    })
+}
+
 // table的按钮事件集合
 const tableEvents = {
     handleListCollect: (index, row) => {
@@ -358,6 +367,11 @@ const tableEvents = {
                 duration: 3000,
             })
         }
+        currentEditRow.value = row
+        setRecordDialogState(row)
+        showRecordInfoDialog('list')
+    },
+    confirmListCollect(row) {
         loading.value = true
         const { param, other } = getActionCommonParams(row)
         param.state = 1
@@ -426,6 +440,11 @@ const tableEvents = {
                 duration: 3000,
             })
         }
+        currentEditRow.value = row
+        setRecordDialogState(row)
+        showRecordInfoDialog('detail')
+    },
+    confirmDetailCollect(row) {
         loading.value = true
         const { param, other } = getActionCommonParams(row)
         param.state = 4
@@ -519,6 +538,19 @@ const tableEvents = {
     },
 }
 
+const showRecordInfoDialog = (type) => {
+    recordInfo.type = type
+    recordInfo.dialog = true
+}
+const recordInfoConfirm = () => {
+    const row = currentEditRow.value
+    if (recordInfo.type === 'list') {
+        tableEvents.confirmListCollect(row)
+    } else if (recordInfo.type === 'detail') {
+        tableEvents.confirmDetailCollect(row)
+    }
+}
+
 // 表格按钮是否可用
 const tableActionDisabled = {
     // 此按钮是开发者才会展示